/* ===========================================================================
   DvaDoma — landing.
   Spine = the app's own colour language (Maja blue / Rok ochre) used at REAL
   cell scale as product-true artwork, never as page-size flat slabs.
   Devices used for variety: an editorial type scale, run-in paragraphs, a real
   month grid, a real message thread, a content bento, ghost numerals.
   Icons appear in exactly ONE list (Za Slovenijo), at a larger distinct size.
   Video player block preserved verbatim from the approved original.
   =========================================================================== */

body.lp {
  background:
    radial-gradient(1200px 680px at 15% -8%, rgba(30,78,140,.10), transparent 62%),
    radial-gradient(900px 560px at 88% -4%, rgba(169,129,47,.09), transparent 60%),
    var(--dd-bg);
}
.lp-grain::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.028'/%3E%3C/svg%3E"); }
.lp-main { position:relative; z-index:1; }
/* dvadoma.css has NO global border-box reset, so padding adds to width. This must
   cover the WHOLE public page (nav + main + footer), not just .lp-main: scoping it
   to main left the header/footer as content-box, which made their .dd-container
   1232px wide against 1200px in the sections, so the logo sat 16px outside every
   section's content edge. One box model = one layout everywhere. */
body.lp, body.lp *, body.lp *::before, body.lp *::after { box-sizing:border-box; }

/* ── nav ─────────────────────────────────────────────────────────────── */
.lp-nav { position:sticky; top:0; z-index:100; background:rgba(243,242,238,.82); backdrop-filter:saturate(1.3) blur(14px); border-bottom:1px solid rgba(0,0,0,.05); }
.lp-nav-inner { display:flex; align-items:center; gap:.4rem; height:68px; }
.lp-nav .dd-logo { margin-right:auto; font-size:26px; color:var(--dd-primary); text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; font-weight:800; letter-spacing:-.025em; }
.lp-nav .btn { border-radius:11px; min-height:auto; padding:.5rem .9rem; font-weight:600; font-size:.92rem; text-decoration:none; display:inline-flex; align-items:center; transition:background .15s,color .15s,transform .15s; }
/* FIX: .lp-nav .btn (0,2,0) used to beat .dd-hide-mobile (0,1,0) → header overflowed on phones. */
.lp-nav .dd-hide-mobile { display:none; }
@media (min-width:992px){ .lp-nav .dd-hide-mobile { display:inline-flex; } }
/* ── mobile menu: holds the links hidden from the bar. Stays in the header. ──
   CSS-only <details>; lp-nav.js adds the closes. Targets sized up so they are
   comfortable one-handed (project token --dd-tap-min = 44px). */
.lp-menu { position:relative; display:block; }
@media (min-width:992px){ .lp-menu { display:none; } }
.lp-menu > summary {
  list-style:none; width:50px; height:50px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--dd-border-strong); background:var(--dd-surface);
  border-radius:14px; color:var(--dd-text);
}
.lp-menu > summary::-webkit-details-marker { display:none; }
.lp-menu > summary .dd-ic { width:26px; height:26px; }
.lp-menu > summary:hover { background:var(--dd-surface-2); }
.lp-menu[open] > summary { background:var(--dd-surface-2); }
.lp-menu-pop {
  position:absolute; right:0; top:calc(100% + 10px); min-width:230px; z-index:200;
  background:var(--dd-surface); border:1px solid var(--dd-border); border-radius:16px;
  box-shadow:0 24px 48px -18px rgba(24,40,44,.45); padding:.4rem; display:grid; gap:2px;
}
.lp-menu-pop a {
  min-height:48px; display:flex; align-items:center;
  padding:.5rem .9rem; border-radius:11px; text-decoration:none;
  color:var(--dd-text); font-weight:600; font-size:1rem;
}
.lp-menu-pop a:hover, .lp-menu-pop a:active { background:var(--dd-primary-soft); color:var(--dd-primary-dark); }
/* Phones: bigger wordmark and a bigger CTA, so logo + Preizkusi + menu are all
   comfortable one-handed targets. Header grows to hold them on one line. */
@media (max-width:991px){
  .lp-nav-inner { height:74px; gap:.5rem; }
  .lp-nav .dd-logo { font-size:30px; min-height:var(--dd-tap-min); display:inline-flex; align-items:center; }
  .lp-nav .btn.btn-sm { min-height:50px; padding:0 1.1rem; font-size:1rem; border-radius:14px; }
}
/* narrow phones: trim ONLY as far as the measured slack requires, so the logo
   stays visibly large on common phones (checked at 320 / 360 / 375 / 414) */
@media (max-width:359px){
  .lp-nav-inner { height:68px; gap:.4rem; }
  .lp-nav .dd-logo { font-size:25px; }
  .lp-nav .btn.btn-sm { min-height:48px; padding:0 .8rem; font-size:.93rem; }
  .lp-menu > summary { width:48px; height:48px; }
  .lp-menu > summary .dd-ic { width:24px; height:24px; }
}

/* ── type scale (editorial) ──────────────────────────────────────────── */
.lx-kicker { display:inline-flex; align-items:center; gap:.55rem; color:var(--dd-primary); font-weight:600; font-size:.75rem; text-transform:uppercase; letter-spacing:.15em; }
.lx-kicker::before { content:""; width:26px; height:2px; border-radius:2px; background:var(--dd-secondary); }
.lx-kicker--light { color:rgba(255,255,255,.9); }
.lx-h1 { font-size:clamp(2.6rem,6.2vw,4.4rem); font-weight:700; letter-spacing:-.04em; line-height:1.0; margin:1.1rem 0 1.2rem; text-wrap:balance; color:var(--dd-text); }
.lx-h1 .lx-accent { color:var(--dd-primary); }
.lx-h2 { font-size:clamp(1.85rem,3.7vw,2.75rem); font-weight:700; letter-spacing:-.032em; line-height:1.08; color:var(--dd-text); text-wrap:balance; margin:.7rem 0 0; }
.lx-h3 { font-size:clamp(1.3rem,2.3vw,1.7rem); font-weight:700; letter-spacing:-.025em; line-height:1.15; color:var(--dd-text); margin:.55rem 0 0; }
.lx-lead { font-size:clamp(1.1rem,1.7vw,1.28rem); line-height:1.55; color:var(--dd-muted); }
.lx-p { color:var(--dd-muted); font-size:1.1rem; line-height:1.62; max-width:54ch; margin:1.05rem 0 0; }
.lx-p--wide { max-width:60ch; margin-inline:auto; }
.lx-head { text-align:center; margin-bottom:clamp(2rem,4vw,3rem); }
.lx-head .lx-kicker { justify-content:center; }
.lx-head .lx-p { text-align:center; margin-inline:auto; }

/* run-in paragraph — bold lead-ins inside flowing text (replaces bullet lists) */
.lx-runin { margin:1.4rem 0 0; padding-top:1.25rem; border-top:1px solid var(--dd-border); color:var(--dd-muted); font-size:1.02rem; line-height:1.75; max-width:54ch; }
.lx-runin b { color:var(--dd-text); font-weight:700; }
.lx-runin b + * { margin-left:.15rem; }

/* ── buttons ─────────────────────────────────────────────────────────── */
.lx-btn { box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:13px; padding:14px 26px; font-weight:600; font-size:1.02rem; text-decoration:none; letter-spacing:-.01em; transition:transform .15s ease, box-shadow .22s ease, background .15s ease; cursor:pointer; }
.lx-btn--primary { background:var(--dd-primary); color:#fff; box-shadow:0 12px 26px -12px rgba(30,78,140,.6); }
.lx-btn--primary:hover { transform:translateY(-2px); background:var(--dd-primary-dark); box-shadow:0 18px 34px -12px rgba(30,78,140,.62); }
.lx-btn--ghost { color:var(--dd-primary); }
.lx-btn--ghost:hover { color:var(--dd-primary-dark); transform:translateX(2px); }
.lx-btn--light { background:#fff; color:var(--dd-primary-dark); box-shadow:0 14px 30px -12px rgba(0,0,0,.4); }
.lx-btn--light:hover { transform:translateY(-2px); }

/* ── HERO ────────────────────────────────────────────────────────────── */
.lx-hero { padding:clamp(1.4rem,3vw,2.4rem) 0 clamp(2.2rem,4vw,3.2rem); }
.lx-hero-inner { max-width:900px; margin-inline:auto; text-align:center; }
.lx-hero .lx-lead { max-width:54ch; margin-inline:auto; }
.lx-cta { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:2.1rem; }
.lx-hero-note { margin-top:1.1rem; font-size:.9rem; color:var(--dd-muted); }

/* device frames */
.lx-cluster { display:flex; justify-content:center; align-items:flex-end; gap:clamp(.5rem,1.6vw,1.35rem); margin-top:clamp(1.75rem,4vw,2.75rem); }
.lx-cphone { flex:0 0 auto; margin:0; }
.lx-devsvg { display:block; width:100%; height:auto; }
.lx-cphone--c { width:min(256px,54vw); }
.lx-cphone--l, .lx-cphone--r { width:min(214px,45vw); }
@media (max-width:640px){
  .lx-cluster {
    justify-content:flex-start; align-items:flex-start;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    gap:14px; padding:6px 20px 14px; margin-inline:calc(-1 * var(--dd-sp-4)); scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  }
  .lx-cluster::-webkit-scrollbar { display:none; }
  .lx-cphone--l, .lx-cphone--c, .lx-cphone--r { display:block; flex:0 0 64%; width:auto; scroll-snap-align:center; }
}

/* ═══ 1 · KOLEDAR ═══════════════════════════════════════════════════════ */
.lx-cal-sec { padding:clamp(2.6rem,5vw,4.5rem) 0 clamp(2.2rem,4vw,3.4rem); }
.lx-cal-grid { display:grid; grid-template-columns:.88fr 1.12fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.lx-cal-note { margin:1.4rem 0 0; padding-top:1.2rem; border-top:1px solid var(--dd-border); color:var(--dd-text-2); font-size:1.02rem; line-height:1.6; max-width:52ch; }

/* the month grid — the product's real mark language, drawn in CSS */
.lx-cal-art { margin:0; }
.lx-cal-card { background:var(--dd-surface); border:1px solid var(--dd-border); border-radius:22px; padding:clamp(1.1rem,2.2vw,1.6rem); box-shadow:0 36px 70px -44px rgba(24,40,44,.45); }
.lx-cal-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; }
.lx-cal-month { font-size:1.24rem; font-weight:700; letter-spacing:-.02em; color:var(--dd-text); }
.lx-cal-child { font-size:.82rem; font-weight:600; color:var(--dd-primary-dark); background:var(--dd-primary-soft); border-radius:999px; padding:.3rem .7rem; }
.lx-cal-dow { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; margin-bottom:6px; }
.lx-cal-dow span { text-align:center; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--dd-faint); }
.lx-cal-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
/* number pinned to the top, marks to the bottom — same rule as the app's own
   month cell, so every number aligns regardless of whether a day has marks */
.lx-cd { position:relative; box-sizing:border-box; aspect-ratio:1/.92; border:1.5px solid transparent; border-radius:9px; overflow:hidden; }
.lx-cd b { position:absolute; top:22%; left:0; right:0; text-align:center; font-size:.9rem; font-weight:600; color:var(--dd-text); font-variant-numeric:tabular-nums; }
.lx-cd.is-m { background:var(--dd-primary-soft); }
.lx-cd.is-r { background:var(--dd-secondary-soft); }
.lx-cd.is-out b { color:#C3C6C2; font-weight:500; }
.lx-cd.is-p { border:1.5px dashed var(--dd-secondary); background:var(--dd-surface); }
.lx-cd.is-today { border-color:var(--dd-primary); }
.lx-cd.is-hol::before { content:""; position:absolute; top:0; left:0; right:0; height:5px; background:var(--dd-danger); }
.lx-cd-ev { position:absolute; bottom:18%; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:#7E8480; }
/* legend — colour swatches (not icons) */
.lx-cal-legend { display:flex; flex-wrap:wrap; gap:.6rem 1.25rem; margin:1.15rem 0 0; padding:0; }
.lx-sw { display:inline-flex; align-items:center; gap:.5rem; font-size:.86rem; color:var(--dd-muted); white-space:nowrap; }
.lx-sw::before { content:""; width:17px; height:17px; border-radius:5px; flex:none; border:1px solid transparent; }
.lx-sw--m::before { background:var(--dd-primary-soft); border-color:#CBD6EC; }
.lx-sw--r::before { background:var(--dd-secondary-soft); border-color:#E7D6AE; }
.lx-sw--h::before { background:linear-gradient(90deg,var(--dd-primary-soft) 50%,var(--dd-secondary-soft) 50%); border-color:var(--dd-border); }
.lx-sw--hol::before { background:var(--dd-surface); border-color:var(--dd-border); border-top:4px solid var(--dd-danger); }
.lx-sw--p::before { background:var(--dd-surface); border:1.5px dashed var(--dd-secondary); }

/* three-up strip under the calendar (text only, hairline separated) */
.lx-strip { list-style:none; margin:clamp(2rem,3.6vw,2.8rem) 0 0; padding:clamp(1.5rem,2.6vw,2rem) 0 0; border-top:1px solid var(--dd-border); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,3rem); }
.lx-strip li { display:flex; flex-direction:column; gap:.4rem; }
.lx-strip b { font-size:1.06rem; color:var(--dd-text); letter-spacing:-.015em; }
.lx-strip span { color:var(--dd-muted); font-size:.98rem; line-height:1.55; }
@media (max-width:900px){
  .lx-cal-grid { grid-template-columns:1fr; gap:2.2rem; }
  .lx-strip { grid-template-columns:1fr; gap:1.35rem; }
  .lx-strip li { display:grid; grid-template-columns:1fr; gap:.15rem; }
}

/* ═══ 2 · STROŠKI ══════════════════════════════════════════════════════ */
.lx-money { padding:clamp(2.6rem,5vw,4.2rem) 0; background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.34)); border-block:1px solid rgba(0,0,0,.045); }
.lx-money-grid { display:grid; grid-template-columns:minmax(0,.85fr) 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.lx-money-art { box-sizing:border-box; margin:0; justify-self:center; width:100%; max-width:360px; padding:clamp(1.1rem,2.4vw,1.7rem); border-radius:24px; background:linear-gradient(158deg,var(--dd-secondary-soft),#FBF7EC); border:1px solid #EADFBE; }
.lx-money-art img { display:block; width:100%; height:auto; border-radius:15px; border:1px solid rgba(0,0,0,.06); box-shadow:var(--dd-shadow-md); background:#fff; }
/* the balance — the page's hero number */
.lx-bal { box-sizing:border-box; margin-top:1.6rem; padding:1.25rem 1.4rem; background:var(--dd-surface); border:1px solid var(--dd-border); border-radius:18px; box-shadow:var(--dd-shadow-sm); display:block; width:100%; max-width:23rem; }
.lx-bal-lbl { display:block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--dd-muted); }
.lx-bal-amt { display:block; margin:.5rem 0 .35rem; font-size:clamp(1.25rem,2.3vw,1.6rem); font-weight:600; color:var(--dd-text); letter-spacing:-.02em; }
.lx-bal-amt em { font-style:normal; font-weight:800; color:var(--dd-secondary-dark); font-variant-numeric:tabular-nums; }
.lx-bal-sub { font-size:.86rem; color:var(--dd-muted); }
@media (max-width:900px){
  .lx-money-grid { grid-template-columns:1fr; gap:2rem; }
  .lx-money-art { order:2; max-width:320px; }
}

/* ═══ 3 · SPOROČILA ════════════════════════════════════════════════════ */
.lx-talk { padding:clamp(2.6rem,5vw,4.2rem) 0; }
.lx-talk-grid { display:grid; grid-template-columns:1fr minmax(0,.9fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.lx-thread { margin:0; background:var(--dd-surface); border:1px solid var(--dd-border); border-radius:22px; padding:1.35rem 1.4rem 1.2rem; box-shadow:0 36px 70px -46px rgba(24,40,44,.45); }
.lx-thread-top { display:flex; align-items:center; gap:.7rem; padding-bottom:.95rem; margin-bottom:1.1rem; border-bottom:1px solid var(--dd-hair); }
.lx-thread-top span { font-weight:700; color:var(--dd-text); letter-spacing:-.015em; }
.lx-thread-top i { flex:1; height:1px; background:var(--dd-hair); }
.lx-msg { max-width:88%; margin-bottom:1rem; }
.lx-msg--them { margin-right:auto; }
.lx-msg--me { margin-left:auto; text-align:right; }
.lx-msg-who { font-size:.78rem; font-weight:700; letter-spacing:.02em; }
.lx-msg--them .lx-msg-who { color:var(--dd-primary-dark); }
.lx-msg--me .lx-msg-who { color:var(--dd-secondary-dark); }
.lx-msg p { margin:.4rem 0 .35rem; padding:.75rem .95rem; border-radius:15px; font-size:.97rem; line-height:1.5; color:var(--dd-text); text-align:left; }
.lx-msg--them p { background:var(--dd-primary-soft); border-top-left-radius:6px; }
.lx-msg--me p { background:var(--dd-secondary-soft); border-top-right-radius:6px; }
.lx-msg-time { font-size:.76rem; color:var(--dd-muted); font-variant-numeric:tabular-nums; }
.lx-thread-note { margin:.5rem 0 0; padding-top:.9rem; border-top:1px solid var(--dd-hair); font-size:.82rem; color:var(--dd-muted); }
@media (max-width:900px){ .lx-talk-grid { grid-template-columns:1fr; gap:2rem; } }

/* ═══ 4 · DRUŽINSKI PROSTOR — bento ════════════════════════════════════ */
.lx-family { padding:clamp(2.6rem,5vw,4.2rem) 0; }
.lx-bento { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.9rem,1.5vw,1.25rem); }
.lx-bt { background:var(--dd-surface); border:1px solid var(--dd-border); border-radius:20px; padding:1.45rem 1.5rem; box-shadow:var(--dd-shadow-sm); }
.lx-bt--profile { grid-column:span 2; grid-row:span 2; }
.lx-bt--journal { grid-column:span 2; }
.lx-bt h3 { margin:0; font-size:1.14rem; letter-spacing:-.02em; color:var(--dd-text); }
.lx-bt-sub { margin:.4rem 0 0; font-size:.93rem; color:var(--dd-muted); line-height:1.5; }
.lx-kv { margin:1.25rem 0 0; }
.lx-kv > div { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; padding:.68rem 0; border-bottom:1px solid var(--dd-hair); }
.lx-kv > div:last-child { border-bottom:0; padding-bottom:0; }
.lx-kv dt { color:var(--dd-muted); font-size:.95rem; }
.lx-kv dd { margin:0; color:var(--dd-text); font-weight:600; font-size:.95rem; text-align:right; }
.lx-jour { list-style:none; margin:1.15rem 0 0; padding:0; display:grid; gap:.8rem; }
.lx-jour li { display:flex; align-items:center; gap:.7rem; }
.lx-jour-d { font-size:.79rem; color:var(--dd-muted); font-variant-numeric:tabular-nums; flex:0 0 3.5rem; }
.lx-jour-t { flex:1; font-weight:600; font-size:.95rem; color:var(--dd-text); }
.lx-who { font-size:.74rem; font-weight:700; padding:.22rem .55rem; border-radius:999px; flex:none; }
.lx-who--m { background:var(--dd-primary-soft); color:var(--dd-primary-dark); }
.lx-who--r { background:var(--dd-secondary-soft); color:var(--dd-secondary-dark); }
.lx-files, .lx-contacts { list-style:none; margin:1.15rem 0 0; padding:0; display:grid; gap:.68rem; }
.lx-files li { display:flex; align-items:center; gap:.6rem; font-size:.93rem; color:var(--dd-text); }
.lx-fdot { width:14px; height:14px; border-radius:4px; flex:none; }
.lx-fdot--p { background:var(--dd-primary-soft); border:1px solid #CBD6EC; }
.lx-fdot--z { background:var(--dd-success-soft); border:1px solid #C7E4D4; }
.lx-fdot--s { background:var(--dd-secondary-soft); border:1px solid #E7D6AE; }
.lx-contacts li { display:flex; flex-direction:column; gap:.12rem; }
.lx-contacts b { font-size:.95rem; color:var(--dd-text); }
.lx-contacts span { font-size:.82rem; color:var(--dd-muted); }
.lx-c-urgent { color:var(--dd-danger) !important; font-weight:600; }
@media (max-width:900px){
  .lx-bento { grid-template-columns:repeat(2,1fr); }
  .lx-bt--profile, .lx-bt--journal { grid-column:span 2; grid-row:auto; }
}
@media (max-width:560px){
  .lx-bento { grid-template-columns:1fr; }
  .lx-bt--profile, .lx-bt--journal, .lx-bt--docs, .lx-bt--contacts { grid-column:span 1; }
}

/* ═══ 5 · SINHRONIZACIJA ═══════════════════════════════════════════════ */
.lx-sync { padding:clamp(1.6rem,3vw,2.4rem) 0; }
/* padding-BLOCK only: a shorthand `padding:X 0` here would zero the inline padding
   this element inherits as .dd-container, making the band 16px wider per side than
   every other section (visible as misaligned hairlines). */
.lx-sync-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.3rem 2.5rem; padding-block:clamp(1.6rem,3vw,2.2rem); border-block:1px solid var(--dd-border); }
.lx-sync-copy { flex:1 1 380px; }
.lx-sync-copy .lx-p { margin-top:.6rem; font-size:1.02rem; }
.lx-sync-apps { display:flex; gap:.5rem; flex-wrap:wrap; }
.lx-sync-apps span { font-weight:600; font-size:.92rem; color:var(--dd-text-2); background:var(--dd-surface); border:1px solid var(--dd-border); border-radius:11px; padding:.6rem 1.05rem; }

/* ═══ 6 · PREJ / ZDAJ ══════════════════════════════════════════════════ */
.lx-shift { padding:clamp(2.4rem,4.4vw,3.6rem) 0; }
.lx-shift-inner { display:grid; grid-template-columns:1fr auto 1fr; gap:1.25rem; align-items:stretch; max-width:920px; margin-inline:auto; }
.lx-shift-col { border-radius:18px; padding:1.75rem 1.65rem; }
.lx-shift--before { background:var(--dd-surface); border:1px dashed var(--dd-border); color:var(--dd-muted); }
.lx-shift--after { background:linear-gradient(165deg,var(--dd-primary-soft),#fff); border:1px solid #CDD6E8; }
.lx-tag { font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; color:var(--dd-muted); }
.lx-tag--on { color:var(--dd-primary); }
.lx-shift-arrow { align-self:center; font-size:1.6rem; color:var(--dd-secondary); }
.lx-shift-list { list-style:none; padding:0; margin:.95rem 0 0; display:grid; gap:.7rem; }
.lx-shift-list li { position:relative; padding-left:1.7rem; line-height:1.45; }
.lx-shift-list li::before { content:""; position:absolute; left:2px; top:9px; width:10px; height:2px; border-radius:2px; background:var(--dd-muted); }
.lx-shift-list--on li { color:var(--dd-text); }
.lx-shift-list--on li::before { content:""; left:3px; top:5px; width:6px; height:11px; background:none; border:solid var(--dd-primary); border-width:0 2.4px 2.4px 0; border-radius:0; transform:rotate(45deg); }
@media (max-width:720px){ .lx-shift-inner { grid-template-columns:1fr; gap:.9rem; } .lx-shift-arrow { transform:rotate(90deg); justify-self:center; } }

/* ═══ 7 · KAKO DELUJE — ghost numerals ═════════════════════════════════ */
.lx-how { padding:clamp(2.6rem,5vw,4.4rem) 0; }
/* Editorial, not a card grid: a big statement on the left, a structured step
   list on the right. Weight comes from the composition and the large coloured
   numerals, not from boxes. No cards, no circles, no top-stroke accent. */
.lx-how-grid { display:grid; grid-template-columns:1fr; gap:clamp(1.6rem,4vw,2.6rem); align-items:start; }
@media (min-width:880px){ .lx-how-grid { grid-template-columns:.82fr 1.18fr; gap:clamp(2.6rem,5vw,5rem); } }
.lx-how-lead .lx-p { margin-top:1rem; }
.lx-steplist { list-style:none; margin:0; padding:0; }
.lx-steplist li { display:grid; grid-template-columns:auto 1fr; gap:clamp(1rem,2vw,1.6rem); align-items:baseline;
  padding:clamp(1rem,2vw,1.35rem) 0; border-top:1px solid var(--dd-border); }
.lx-steplist li:first-child { border-top:0; padding-top:0; }
.lx-sl-n { font-size:1.7rem; font-weight:800; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--dd-text); }
.lx-steplist li:nth-child(2) .lx-sl-n { color:var(--dd-primary); }
.lx-steplist li:nth-child(3) .lx-sl-n { color:var(--dd-secondary); }
.lx-steplist li:nth-child(4) .lx-sl-n { color:var(--dd-primary-dark); }
.lx-sl-b b { display:block; font-size:1.14rem; color:var(--dd-text); letter-spacing:-.018em; line-height:1.25; }
.lx-sl-b p { margin:.32rem 0 0; color:var(--dd-muted); line-height:1.55; font-size:1rem; }

/* ═══ 8 · ZA SLOVENIJO + CENA (the one icon list) ══════════════════════ */
.lx-band { padding:clamp(2.4rem,4.4vw,3.6rem) 0; }
.lx-band-card { display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(1.6rem,3.5vw,3.25rem); align-items:center; background:var(--dd-surface); border:1px solid var(--dd-border); border-radius:26px; padding:clamp(1.8rem,3vw,3rem); box-shadow:0 40px 80px -52px rgba(24,40,44,.42); }
.lx-si-list { list-style:none; padding:0; margin:1.6rem 0 0; display:grid; gap:1.35rem; }
.lx-si-list li { display:grid; grid-template-columns:auto 1fr; gap:1.15rem; align-items:start; }
.lx-si-ic { width:52px; height:52px; border-radius:15px; background:var(--dd-secondary-soft); color:var(--dd-secondary-dark); display:grid; place-items:center; flex:none; }
.lx-si-ic .dd-ic { width:26px; height:26px; }
.lx-si-list b { display:block; font-size:1.04rem; color:var(--dd-text); letter-spacing:-.015em; margin-bottom:.18rem; }
.lx-si-list li > span:last-child { color:var(--dd-muted); font-size:.99rem; line-height:1.55; }
.lx-price { background:var(--dd-primary-softer); border:1px solid var(--dd-border); border-radius:20px; padding:2rem 1.8rem; text-align:center; }
.lx-price .lx-kicker { justify-content:center; }
.lx-price-amt { font-size:3.2rem; font-weight:700; color:var(--dd-primary-dark); letter-spacing:-.035em; line-height:1; margin:.8rem 0 0; font-variant-numeric:tabular-nums; }
.lx-price-amt span { font-size:1rem; font-weight:500; color:var(--dd-muted); margin-left:.35rem; letter-spacing:0; }
.lx-price-body { color:var(--dd-muted); font-size:.98rem; line-height:1.5; margin:.9rem auto 1.3rem; max-width:34ch; }
.lx-price .lx-btn { width:100%; }
/* Free trial gets the emphasis, in brand ochre (the price stays navy): a two-colour
   rhythm, no pill badge or edge stripe. Darker ochre keeps AA contrast on the tint. */
.lx-price-trial { margin:.95rem 0 0; font-size:1.05rem; font-weight:700; color:var(--dd-secondary-dark); letter-spacing:-.01em; }
.lx-price-note { font-size:.82rem; color:var(--dd-muted); margin:.32rem 0 0; }
@media (max-width:820px){ .lx-band-card { grid-template-columns:1fr; gap:1.8rem; } }

/* ═══ 9 · FAQ ══════════════════════════════════════════════════════════ */
.lx-faq { padding:clamp(2.4rem,5vw,3.6rem) 0; }
.lx-faq-grid { display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start; }
.lx-faq-intro { position:sticky; top:90px; }
/* the intro paragraph fills the column so the kicker, heading, text and photo below
   line up as one block (both edges), instead of the text ending short of the photo. */
.lx-faq-intro .lx-p { max-width:none; margin-bottom:1.2rem; font-size:1.02rem; }
.lx-faq-list { border-top:1px solid rgba(0,0,0,.09); }
.lx-faq details { border-bottom:1px solid rgba(0,0,0,.09); padding:1.05rem .1rem; }
.lx-faq summary { font-weight:600; font-size:1.05rem; cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; color:var(--dd-text); }
.lx-faq summary::-webkit-details-marker { display:none; }
.lx-faq summary::after { content:""; width:10px; height:10px; border-right:2px solid var(--dd-muted); border-bottom:2px solid var(--dd-muted); transform:rotate(45deg); transition:transform .2s ease; flex:none; margin-right:4px; }
.lx-faq details[open] summary::after { transform:rotate(225deg); }
.lx-faq details p { margin:.8rem 0 .2rem; color:var(--dd-muted); line-height:1.6; }
@media (max-width:760px){ .lx-faq-grid { grid-template-columns:1fr; gap:1.25rem; } .lx-faq-intro { position:static; } }

/* ═══ 10 · CLOSE ═══════════════════════════════════════════════════════ */
.lx-close-wrap { padding:0 0 clamp(2rem,4vw,3.25rem); }
.lx-close { position:relative; overflow:hidden; display:grid; grid-template-columns:1.05fr .92fr; gap:clamp(1.75rem,4vw,3.4rem); align-items:center; background:linear-gradient(152deg,#22436f 0%,var(--dd-primary-dark) 58%,#122f57 100%); border-radius:28px; padding:clamp(1.9rem,4.2vw,3.3rem); box-shadow:0 44px 84px -46px rgba(14,36,72,.9); }
.lx-close::before { content:""; position:absolute; width:360px; height:360px; right:-90px; top:-110px; background:radial-gradient(circle,rgba(169,129,47,.36),transparent 66%); pointer-events:none; }
.lx-close::after { content:""; position:absolute; left:-60px; bottom:-120px; width:300px; height:300px; background:radial-gradient(circle,rgba(120,160,220,.22),transparent 68%); pointer-events:none; }
.lx-close > * { position:relative; z-index:1; }
.lx-close-copy h2 { color:#fff; font-size:clamp(1.8rem,3.6vw,2.6rem); letter-spacing:-.032em; line-height:1.08; margin:.85rem 0 0; }
.lx-close-copy p { color:rgba(255,255,255,.82); max-width:44ch; margin:1rem 0 1.55rem; font-size:1.05rem; line-height:1.55; }
.lx-close-cta { display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:center; }
.lx-close-ghost { color:#fff; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.24); }
.lx-close-ghost:hover { background:rgba(255,255,255,.17); transform:translateY(-2px); }
.lx-close-assur { list-style:none; padding:0; margin:1.5rem 0 0; display:flex; flex-wrap:wrap; gap:.55rem 1.4rem; }
.lx-close-assur li { color:rgba(255,255,255,.74); font-size:.9rem; display:flex; align-items:center; gap:.5rem; }
.lx-close-assur li::before { content:"✓"; color:var(--dd-secondary); font-weight:800; font-size:.82rem; }
.lx-rhythm { background:rgba(255,255,255,.98); border-radius:20px; padding:1.2rem 1.2rem 1.1rem; box-shadow:0 34px 64px -30px rgba(0,0,0,.55); }
.lx-rhythm-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:.95rem; }
.lx-rhythm-title { font-weight:700; color:var(--dd-text); letter-spacing:-.01em; font-size:1.02rem; }
.lx-rhythm-tag { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--dd-primary); background:var(--dd-primary-soft); padding:.3rem .62rem; border-radius:999px; }
.lx-rhythm-week { display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem; }
.lx-rday { position:relative; aspect-ratio:1/1.42; border-radius:11px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:.5rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
.lx-rday--m { background:var(--dd-primary-soft); color:var(--dd-primary-dark); }
.lx-rday--r { background:var(--dd-secondary-soft); color:var(--dd-secondary-dark); }
.lx-rday--switch::before { content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%); width:7px; height:7px; border-radius:50%; background:var(--dd-text); box-shadow:0 0 0 3px #fff; }
.lx-rhythm-legend { display:flex; gap:1.1rem; margin-top:.95rem; flex-wrap:wrap; }
.lx-rl { display:inline-flex; align-items:center; gap:.42rem; font-size:.8rem; color:var(--dd-muted); font-weight:500; }
.lx-rl::before { content:""; width:12px; height:12px; border-radius:4px; }
.lx-rl--m::before { background:var(--dd-primary); }
.lx-rl--r::before { background:var(--dd-secondary); }
.lx-rl--h::before { background:var(--dd-text); border-radius:50%; width:8px; height:8px; }
@media (max-width:760px){ .lx-close { grid-template-columns:1fr; gap:1.6rem; } .lx-rhythm { order:2; } }

/* ═══ legal / contact pages ═══════════════════════════════════════════════
   Restored: the landing.css rewrite dropped this block, leaving /zasebnost,
   /pogoji and /kontakt unstyled. Tables were added to the privacy page later
   and, being browser-default, pushed the page sideways on phones (audit: 96px
   overflow at 320px), so a wide table now scrolls inside itself. */
.lx-legal { padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,6vw,5rem); }
/* Legal pages: content uses the SAME 1200px dd-container as the landing page,
   and text/lists fill that width (no narrow left-piled column) so paragraphs and
   tables share one consistent full width, aligned with the rest of the site. */
.lx-legal .dd-container p, .lx-legal .dd-container ul, .lx-legal .dd-container ol { max-width:none; }
.lx-legal h1 { margin:.8rem 0 1rem; }
.lx-legal h2 { font-size:1.25rem; margin:1.9rem 0 .5rem; color:var(--dd-text); letter-spacing:-.01em; font-weight:700; }
.lx-legal h3 { font-size:1.05rem; margin:1.3rem 0 .4rem; color:var(--dd-text); font-weight:700; }
.lx-legal p { color:var(--dd-muted); line-height:1.65; max-width:64ch; margin:0 0 .9rem; }
.lx-legal ul, .lx-legal ol { color:var(--dd-muted); line-height:1.65; max-width:64ch; padding-left:1.25rem; margin:0 0 1rem; }
.lx-legal li { margin:0 0 .4rem; }
.lx-legal .lx-lead { margin-bottom:1.4rem; }
.lx-legal a { color:var(--dd-primary); }
.lx-legal-back { margin-top:2.2rem; }
.lx-legal-back a { text-decoration:none; font-weight:600; }
.lx-legal table { width:100%; border-collapse:collapse; margin:1.3rem 0 1.7rem; font-size:.95rem; }
.lx-legal th, .lx-legal td { text-align:left; padding:.7rem .85rem; border-bottom:1px solid var(--dd-border); vertical-align:top; color:var(--dd-text); line-height:1.5; }
.lx-legal thead th { background:var(--dd-surface-2); font-weight:700; border-bottom:1px solid var(--dd-border-strong); }
.lx-legal tbody tr:last-child td { border-bottom:0; }
@media (max-width:760px){
  .lx-legal table { display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ── footer ──────────────────────────────────────────────────────────── */
.lp-footer { border-top:1px solid rgba(0,0,0,.07); padding:2.75rem 0; color:var(--dd-muted); font-size:var(--dd-fs-sm); }
.lp-footer a { color:var(--dd-muted); text-decoration:none; margin-left:1.25rem; }
.lp-footer a:hover { color:var(--dd-primary); }

/* ── motion ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .lx-hero-inner > *, .lx-cal-grid > *, .lx-money-grid > *, .lx-talk-grid > *, .lx-bt, .lx-steps li { animation:lx-rise .7s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes lx-rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
}

/* ═══════════════════════════════════════════════════════════════
   Promo video — custom branded player (.lx-video*)  [VERBATIM]
   ═══════════════════════════════════════════════════════════════ */
.lx-videowrap { max-width:880px; margin:clamp(1.6rem,3.5vw,2.4rem) auto 0; }
.lx-player {
  position:relative; margin:0; width:100%; aspect-ratio:16/9;
  background:#0a0e18; border-radius:var(--dd-radius-card); overflow:hidden;
  box-shadow:var(--dd-shadow-lg); isolation:isolate;
}
.lx-video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; background:#0a0e18; }
.lx-player:fullscreen, .lx-player:-webkit-full-screen {
  width:100%; height:100%; max-width:none; aspect-ratio:auto; border-radius:0; background:#000;
}
.lx-player:fullscreen .lx-video, .lx-player:-webkit-full-screen .lx-video { object-fit:contain; }
.lx-player::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(6,12,22,.30), rgba(6,12,22,0) 32%); transition:opacity .25s; }
.lx-player.is-playing.is-idle::after { opacity:0; }
.lx-video-big {
  position:absolute; inset:0; margin:auto; width:86px; height:86px; z-index:3;
  display:grid; place-items:center; border:0; cursor:pointer; border-radius:999px;
  background:rgba(30,78,140,.92); color:#fff;
  box-shadow:0 12px 32px rgba(10,14,24,.38), 0 0 0 8px rgba(255,255,255,.14);
  transition:transform .18s ease, background .18s ease, opacity .25s ease;
}
.lx-video-big:hover { transform:scale(1.06); background:var(--dd-primary); }
.lx-video-big svg { width:34px; height:34px; margin-left:4px; fill:currentColor; }
.lx-player.is-playing .lx-video-big { opacity:0; pointer-events:none; }
.lx-video-ctrls {
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; align-items:center; gap:.55rem; padding:.6rem .75rem .7rem;
  background:linear-gradient(to top, rgba(6,12,22,.74), rgba(6,12,22,0));
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.lx-player.is-playing .lx-video-ctrls { opacity:1; transform:none; pointer-events:auto; }
.lx-player.is-playing.is-idle .lx-video-ctrls { opacity:0; transform:translateY(8px); pointer-events:none; }
.lx-vc { border:0; background:transparent; color:#fff; cursor:pointer; display:grid; place-items:center; padding:.2rem; border-radius:8px; line-height:0; }
.lx-vc svg { width:22px; height:22px; fill:currentColor; display:block; }
.lx-vc:hover { color:#e6b968; }
.lx-vc-time { color:rgba(255,255,255,.92); font-size:.78rem; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.lx-vc-seek { flex:1; -webkit-appearance:none; appearance:none; height:16px; background:transparent; cursor:pointer; --pct:0%; }
.lx-vc-seek::-webkit-slider-runnable-track { height:5px; border-radius:999px;
  background:linear-gradient(to right,#e6b968 var(--pct), rgba(255,255,255,.30) var(--pct)); }
.lx-vc-seek::-webkit-slider-thumb { -webkit-appearance:none; margin-top:-4.5px; width:14px; height:14px; border-radius:999px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.45); }
.lx-vc-seek::-moz-range-track { height:5px; border-radius:999px; background:rgba(255,255,255,.30); }
.lx-vc-seek::-moz-range-progress { height:5px; border-radius:999px; background:#e6b968; }
.lx-vc-seek::-moz-range-thumb { width:14px; height:14px; border:0; border-radius:999px; background:#fff; }
.lx-video-note { margin:.6rem .2rem 0; text-align:center; font-size:.82rem; line-height:1.45; color:var(--dd-muted); }
@media (max-width:640px){
  .lx-player { border-radius:12px; }
  .lx-video-big { width:66px; height:66px; }
  .lx-video-big svg { width:27px; height:27px; margin-left:3px; }
  .lx-vc svg { width:24px; height:24px; }
  .lx-video-ctrls { gap:.45rem; }
}
@media (prefers-reduced-motion: reduce){
  .lx-video-big, .lx-video-ctrls, .lx-player::after { transition:none; }
}

/* ═══ STICKY TRIAL PROMPT (ps-*) ══════════════════════════════════════════
   One per site, rendered by layouts/public.ejs, so it rides the landing, the
   blog and the legal pages alike.

   SHAPE: one horizontal row in a pill. Offer, action and dismiss all sit on a
   single line, which is what keeps it a bar riding the corner instead of a
   panel landing on top of the page.

   PLACE: bottom right on a desktop, low but off the edge. Centred along the
   bottom on a phone, where a corner pill would sit under the thumb and a
   right-aligned one would fight the scrollbar.

   The reveal lifts it by 8px. Horizontal centring is ALSO a transform on the
   phone, so both live in one translate() driven by --ps-x. Writing them as two
   competing transform rules is how the pill would jump sideways as it faded in.

   Revealed by public/js/promo-sticky.js once the visitor is actually reading,
   and hidden again near the footer, whose own call to action it would collide
   with. Ships with the hidden attribute so a visitor with JavaScript off never
   gets a panel they cannot close. */

.ps { --ps-x: 0;
  position:fixed; right:clamp(.9rem,2vw,1.6rem);
  bottom:clamp(1.75rem, 9vh, 4rem);
  z-index:120; max-width:calc(100vw - 1.8rem);
  display:flex; align-items:center; gap:.6rem;
  padding:.32rem .32rem .32rem 1rem;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(10px);
  border:1px solid var(--dd-border-strong); border-radius:999px;
  box-shadow:0 10px 28px -12px rgba(24,40,44,.38), 0 1px 3px rgba(24,40,44,.07);
  opacity:0; transform:translate(var(--ps-x), 8px); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease; }
.ps[hidden] { display:none; }
.ps.is-in { opacity:1; transform:translate(var(--ps-x), 0); pointer-events:auto; }

.ps-txt { font-size:.85rem; line-height:1; color:var(--dd-muted); white-space:nowrap; }
.ps-txt b { font-weight:700; color:var(--dd-text); }

.ps-btn { flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-height:34px; padding:.35rem .95rem; border-radius:999px; white-space:nowrap;
  background:var(--dd-primary); color:#fff; border:1px solid var(--dd-primary);
  font-size:.84rem; font-weight:600; text-decoration:none;
  transition:background .15s ease; }
.ps-btn:hover { background:var(--dd-primary-dark); }

/* Close: drawn with two rules, so there is no icon font and no image request
   for a CSP to block. The hit area stays 30px even though the glyph is 9px. */
.ps-x { flex:none; position:relative; width:30px; height:30px; margin-right:.1rem;
  border:0; background:transparent; border-radius:999px; cursor:pointer; padding:0;
  transition:background .15s ease; }
.ps-x:hover { background:var(--dd-surface-2); }
.ps-x::before, .ps-x::after { content:""; position:absolute; left:50%; top:50%;
  width:9px; height:1.5px; margin:-.75px 0 0 -4.5px; border-radius:2px;
  background:var(--dd-faint); }
.ps-x::before { transform:rotate(45deg); }
.ps-x::after { transform:rotate(-45deg); }
.ps-x:hover::before, .ps-x:hover::after { background:var(--dd-text); }
.ps-x:focus-visible, .ps-btn:focus-visible { outline:none; box-shadow:var(--dd-focus-ring); }

/* Phones: centred along the bottom, clear of the safe area so it can never sit
   under the home indicator. */
@media (max-width:560px){
  .ps { --ps-x: -50%; left:50%; right:auto;
    bottom:calc(2.25rem + env(safe-area-inset-bottom, 0px));
    gap:.5rem; padding-left:.9rem; }
  .ps-txt { font-size:.8rem; }
  .ps-btn { font-size:.8rem; padding:.35rem .85rem; min-height:32px; }
}

@media (prefers-reduced-motion: reduce){
  .ps { transition:none; transform:translate(var(--ps-x), 0); }
}

@media print { .ps { display:none !important; } }

/* ── editorial photo split (lx-ps): a framed photo beside copy, in the same
   two-column rhythm the calendar/expenses sections use. A human beat, distinct
   from the product mockups; no gradient wash, no text over faces. ── */
.lx-photo-split { padding: clamp(1.6rem,4vw,3rem) 0; }
.lx-ps-grid { display:grid; grid-template-columns:1fr; gap:clamp(1.4rem,4vw,3rem); align-items:center; }
.lx-ps-media { margin:0; border-radius:26px; overflow:hidden; }
.lx-ps-media img { display:block; width:100%; aspect-ratio:16/11; object-fit:cover; object-position:50% 26%; }
@media (min-width:860px){
  .lx-ps-grid { grid-template-columns:1.02fr .98fr; }
  .lx-ps-media img { aspect-ratio:1/1; object-position:50% 24%; }
}
/* image on the right for the alternating (mid-page) split */
.lx-photo-split--rev .lx-ps-media { order:2; }
@media (max-width:859px){ .lx-photo-split--rev .lx-ps-media { order:0; } }
/* school photo: pan DOWN so the family fills more of the frame and the building
   less; the OSNOVNA ŠOLA sign still sits near the top edge. */
.lx-photo-split:not(.lx-photo-split--rev) .lx-ps-media img { object-position:50% 50%; }

/* ── /faq page ── */
.lx-faqpage { }
.lx-faqpage-lead { max-width:60ch; margin-top:.8rem; }
.lx-faqpage-gt { font-size:clamp(1.15rem,2vw,1.4rem); font-weight:700; letter-spacing:-.02em; color:var(--dd-text); margin:2.4rem 0 .8rem; }
.lx-faqpage-cta { margin-top:2.6rem; }
.lx-faqpage-back { margin-top:2rem; }

/* /faq aside image (framed, no shadow) */
/* FAQ intro promo: the photo carries the CTA, in the same vocabulary as the
   sign-in panel (scrim + ochre rule + label + white pill). The button belongs to
   the image instead of floating beneath it as a lone shape. */
.lx-faq-promo { position:relative; margin-top:1.5rem; border-radius:20px; overflow:hidden; isolation:isolate; }
.lx-faq-promo img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 34%; }
.lx-faq-promo::after { content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(178deg, rgba(18,47,87,0) 38%, rgba(18,47,87,.30) 62%, rgba(19,59,107,.88) 100%); }
.lx-faq-promo-in { position:absolute; z-index:2; left:clamp(1.05rem,5%,1.6rem); right:clamp(1.05rem,5%,1.6rem); bottom:clamp(1.1rem,5%,1.6rem); }
.lx-faq-promo-rule { display:block; width:42px; height:4px; border-radius:4px; background:var(--dd-secondary); margin-bottom:.75rem; }
.lx-faq-promo-line { margin:0 0 .95rem; color:#fff; font-weight:700; font-size:1.14rem; letter-spacing:-.02em; line-height:1.25; text-shadow:0 1px 12px rgba(10,20,40,.34); }
.lx-faq-promo-btn { box-shadow:0 10px 22px -10px rgba(10,20,40,.5); }
.lx-faq-promo-btn:hover { transform:translateY(-2px); }
@media (max-width:760px){ .lx-faq-promo { max-width:460px; } .lx-faq-promo img { aspect-ratio:4/3; } .lx-faq-intro .lx-p { max-width:460px; } }