/* usluge.css — /usluge/ i /prodavnice/ (S149, 9.11.2026; dizajn sa platna
 * claude.ai/artifact/7ErbqQ4iSpkZfy8PUyMRuN).
 *
 * Novi blokovi NE uvode svoju anatomiju: koriste klase bloka „Prvi razgovor"
 * (.uo-corner, .uo-kicker, .uo-head, .uo-title, .uo-intro, .uo-rule,
 * .uo-grid, .uo-card, .uo-wm, .uo-mark, .uo-num, .uo-h, .uo-p, .uo-foot iz
 * home-variant-c.css). Ovde su samo podloge (.us-blok + varijante), tamna
 * varijanta tih klasa i ono čega u „Prvom razgovoru" nema: cena, tabela
 * stavki, listovi izveštaja, „Šta ako", crtež prodavnice.
 *
 * Mera (Denis, 9.11.): tekst kartica 16 px, uvodi 17 px — kompromis između
 * kanona (18) i uzora (15).
 */

/* ── Mera teksta kartica (važi i za „Prvi razgovor" na ovim stranama) ── */
.uo-p { font-size: 16px; max-width: 33ch; }
.uo-intro { font-size: 17px; }

/* ── Podloge ─────────────────────────────────────────────────────────── */
.us-blok {
    --us-red: var(--brand);
    position: relative;
    overflow: hidden;
    padding: 110px 0 120px;
    color: var(--fg-light-deep);
    background: var(--bg-paper);
}
.us-blok::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(26,26,24,0.025) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(26,26,24,0.025) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}
.us-blok > .container { position: relative; z-index: 1; }
/* granica između blokova: tanka linija preseka na vrhu svakog svetlog bloka,
   i smena podloga (papir / hladni papir), da se dva bloka ne sliju u jedan */
.us-blok:not(.us-blok--tamno),
.us-blok + .uo { border-top: 1px solid rgba(20,20,18,0.16); }
.us-blok--hladno { background: var(--bg-paper-cool); }
.us-blok--hladno .uo-wm { -webkit-text-stroke-color: #d9d5cb; }

.us-blok--tamno {
    --us-red: var(--brand-on-dark);
    --brand-light: var(--brand-on-dark);
    background: var(--bg-dark);
    color: var(--fg-dark-strong);
    border-top: 1px solid rgba(155,25,25,0.45);
}
.us-blok--tamno::before {
    background-image:
        linear-gradient(to right, rgba(232,232,230,0.022) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(232,232,230,0.022) 1px, transparent 1px);
}
.us-blok--tamno .uo-corner { color: var(--fg-dark-faint); }
.us-blok--tamno .uo-kicker,
.us-blok--tamno .uo-num { color: var(--brand-on-dark); }
.us-blok--tamno .uo-kicker .sep { color: var(--fg-dark-faint); }
.us-blok--tamno .uo-title,
.us-blok--tamno .uo-h { color: var(--fg-dark-strong); }
.us-blok--tamno .uo-title em { color: var(--brand-on-dark); }
.us-blok--tamno .uo-intro,
.us-blok--tamno .uo-p { color: var(--fg-dark-soft); }
.us-blok--tamno .uo-intro em { color: var(--fg-dark-strong); }
.us-blok--tamno .uo-rule,
.us-blok--tamno .uo-mark { color: var(--fg-dark-soft); }
.us-blok--tamno .uo-rule .red,
.us-blok--tamno .uo-mark .red { stroke: var(--brand-on-dark); }
.us-blok--tamno .uo-card { border-right-color: var(--bg-dark-rule); }
.us-blok--tamno .uo-wm { -webkit-text-stroke-color: #2a2a28; }
.us-blok--tamno .uo-foot { border-top-color: var(--bg-dark-rule); color: var(--fg-dark-faint); }
.us-blok--tamno .uo-foot strong { color: var(--fg-dark-strong); }

/* crvena ispuna u znakovima i crtežima, prati podlogu */
.us-r  { fill: var(--us-red); }
.us-rs { stroke: var(--us-red); }

/* ── Sitnice zajedničke za kartice ───────────────────────────────────── */
.us-cena {
    position: relative;
    z-index: 1;
    margin: 24px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
}
.us-cena strong {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.us-cena span,
.us-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-light-soft);
}
.us-korist {
    position: relative;
    z-index: 1;
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 500;
    max-width: 33ch;
}
.us-veza {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-top: 14px;
    padding: 6px 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--us-red);
    text-decoration: none;
}
@media (hover: hover) {
    .us-veza:hover { text-decoration: underline; text-underline-offset: 4px; }
}
.uo-foot a { color: inherit; text-decoration: none; }
@media (hover: hover) {
    .uo-foot a:hover { color: var(--us-red); }
}
.us-par {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}
.us-par p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--fg-dark-soft);
    max-width: 52ch;
}
.us-par strong { color: var(--fg-dark-strong); font-weight: 500; }

/* šest polja u dva reda (kako radimo) */
.us-grid-6 { grid-template-columns: repeat(3, 1fr); }
.us-grid-6 .uo-card:nth-child(3) { border-right: none; padding-right: 0; }
.us-grid-6 .uo-card:nth-child(4) { padding-left: 0; }
.us-grid-6 .uo-card:nth-child(n+4) { border-top: 1px solid rgba(20,20,18,0.12); }
.us-grid-6 .uo-card:nth-child(3) .uo-wm,
.us-grid-6 .uo-card:last-child .uo-wm { right: 0; }
.us-prilog-najava {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.us-prilog-najava p {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    max-width: 22ch;
}

/* ── Tabela „šta ulazi u koji paket" ─────────────────────────────────── */
.us-tabela { margin-top: 0; }
.us-tabela > summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid rgba(20,20,18,0.35);
    border-bottom: 1px solid rgba(20,20,18,0.35);
    font-size: 17px;
    font-weight: 600;
}
.us-tabela > summary::-webkit-details-marker { display: none; }
.us-tabela > summary .us-meta { color: var(--brand); }
.us-tabela > summary .us-meta::after { content: ' ▼'; }
.us-tabela[open] > summary .us-meta::after { content: ' ▲'; }
.us-tabela > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.us-tabela-okvir { overflow-x: auto; }
.us-tabela table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    margin-top: 24px;
    font-size: 16px;
}
.us-tabela thead th {
    padding: 0 0 12px;
    border-bottom: 1px solid var(--fg-light-deep);
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    width: 140px;
}
.us-tabela thead th:first-child { text-align: left; width: auto; }
.us-tabela tbody th[colspan] {
    padding: 26px 0 10px;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand);
}
.us-tabela tbody td {
    padding: 10px 0;
    border-top: 1px solid var(--border-light-soft);
    text-align: center;
    vertical-align: middle;
}
.us-tabela tbody td:first-child {
    padding: 10px 24px 10px 20px;
    text-align: left;
    line-height: 1.5;
    color: var(--fg-light-muted);
}
.us-da { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.us-ne { display: inline-block; width: 10px; height: 1px; background: #8a8780; vertical-align: middle; }
.us-dva { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--fg-light-soft); }
.us-tabela tfoot td {
    padding: 18px 10px 0;
    border-top: 1px solid var(--fg-light-deep);
    font-size: 14px;
    line-height: 1.5;
    vertical-align: top;
}
.us-tabela tfoot td:first-child {
    padding-left: 20px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-light-soft);
}
.us-napomena {
    margin: 40px 0 0;
    max-width: 84ch;
    font-size: 15px;
    line-height: 1.65;
    color: var(--fg-light-soft);
}

/* ── Listovi izveštaja (prilog e.1) ──────────────────────────────────── */
.us-listovi {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.us-list { background: #fbfaf7; border: 1px solid #ddd9cf; }
.us-list-zag {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #ddd9cf;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-light-soft);
}
.us-list-telo {
    padding: 16px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 13px;
    color: #2e2e2c;
}
.us-list-red {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 7px;
    border-bottom: 1px solid #ece9e2;
}
.us-list-red:last-of-type { border-bottom: 0; padding-bottom: 0; }
.us-tacka { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.us-tacka--ok { background: var(--fg-light-deep); }
.us-tacka--paz { border: 1px solid var(--brand); }
.us-tacka--riz { background: var(--brand); }
.us-list-mono {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--fg-light-soft);
}
.us-list-broj { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.us-list-broj strong { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.us-uredjaji { display: grid; grid-template-columns: repeat(17, 1fr); gap: 2px; }
.us-uredjaji span { height: 18px; background: var(--fg-light-deep); }
.us-uredjaji span.ne { background: transparent; border: 1px solid var(--brand); }
.us-list p.us-list-tekst { margin: 0; font-size: 12.5px; line-height: 1.5; color: #5a5a58; }
.us-list-naslov { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; }
.us-list dl {
    margin: 4px 0 0;
    display: grid;
    grid-template-columns: auto 1fr;
    font-size: 12px;
    border-top: 1px solid #ece9e2;
}
.us-list dt,
.us-list dd { padding: 6px 0; border-bottom: 1px solid #ece9e2; }
.us-list dt {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-light-soft);
}
.us-list dd { margin: 0; text-align: right; }
.us-rok { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; margin-bottom: 5px; }
.us-traka { height: 2px; background: #e3dfd6; }
.us-traka i { display: block; height: 2px; background: var(--fg-light-deep); }
.us-traka i.p67 { width: 67%; }
.us-traka i.p25 { width: 25%; }
.us-listovi-potpis {
    margin: 14px 0 0;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-light-soft);
}

/* ── Šta ako ─────────────────────────────────────────────────────────── */
.us-staako {
    margin-top: 88px;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 80px;
    align-items: start;
}
.us-staako h3 {
    margin: 0;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.us-staako-lista { border-top: 1px solid rgba(20,20,18,0.35); }
.us-staako-lista details { border-bottom: 1px solid #d9d5cb; }
.us-staako-lista summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0;
    font-size: 17px;
    font-weight: 500;
}
.us-staako-lista summary::-webkit-details-marker { display: none; }
.us-staako-lista summary::after { content: '+'; font-family: var(--font-mono); color: var(--brand); }
.us-staako-lista details[open] summary::after { content: '−'; }
.us-staako-lista summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.us-staako-lista details p {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--fg-light-mid);
}

/* ── /prodavnice/ ────────────────────────────────────────────────────── */
.us-pr-hero {
    position: relative;
    overflow: hidden;
    padding: 104px 0 64px;
    background-color: var(--bg-paper);
    background-image:
        linear-gradient(to right, rgba(26,26,24,0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(26,26,24,0.035) 1px, transparent 1px);
    background-size: 20px 20px;
}
.us-pr-hero .container {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    gap: 56px;
}
.us-pr-hero h1 {
    margin: 0;
    font-size: clamp(36px, 3.8vw, 52px);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.025em;
    max-width: 17ch;
    text-wrap: balance;
}
.us-pr-hero h1 em { font-style: normal; color: var(--brand); }
.us-pr-dek {
    margin: 30px 0 0;
    font-size: 18px;
    line-height: 1.65;
    color: var(--fg-light-muted);
    max-width: 52ch;
    text-wrap: pretty;
}
.us-pr-cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.us-pr-cta .primary {
    padding: 16px 24px;
    background: var(--brand);
    color: var(--bg-paper);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.08em;
}
.us-pr-cta .ghost {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--fg-light-deep);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding: 6px 0 3px;
}
@media (hover: hover) {
    .us-pr-cta .primary:hover { background: var(--brand-hover); }
}
.us-pr-crtez { width: 100%; height: auto; display: block; }
.us-pr-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0 26px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand);
}
.us-pr-eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--brand); }
.us-pr-nalazi-tekst {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.01em;
    max-width: 48ch;
    text-wrap: pretty;
}
.us-pr-nalazi-tekst span { color: var(--fg-dark-faint); }
.us-pr-nalazi {
    list-style: none;
    margin: 64px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--bg-dark-rule);
}
.us-pr-nalazi li { padding: 28px 24px 0; border-right: 1px solid var(--bg-dark-rule); }
.us-pr-nalazi li:first-child { padding-left: 0; }
.us-pr-nalazi li:last-child { border-right: none; padding-right: 0; }
.us-pr-nalazi svg { display: block; margin-bottom: 18px; color: var(--fg-dark-soft); }
.us-pr-nalazi b {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--brand-on-dark);
}
.us-pr-nalazi span { font-size: 16px; line-height: 1.5; color: var(--fg-dark-soft); }
.us-pr-dva { display: grid; grid-template-columns: 1.15fr 1fr; gap: 80px; align-items: start; }
.us-pr-dva p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--fg-light-mid); max-width: 56ch; text-wrap: pretty; }
.us-pr-mera { display: block; width: 100%; height: auto; margin-bottom: 20px; color: var(--fg-light-deep); }
.us-pr-sporedno {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid rgba(20,20,18,0.35);
}
.us-pr-sporedno > div {
    padding: 32px 36px 36px 0;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 20px;
    border-right: 1px solid rgba(20,20,18,0.35);
}
.us-pr-sporedno > div + div { padding: 32px 0 36px 36px; border-right: none; }
.us-pr-sporedno p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--fg-light-mid); max-width: 50ch; }
.us-pr-sporedno .uo-num { margin-bottom: 10px; }

/* ── Telefon ─────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .us-listovi { grid-template-columns: repeat(2, 1fr); }
    .us-pr-hero .container { grid-template-columns: 1fr; }
    .us-pr-crtez { max-width: 600px; }
    .us-pr-nalazi { grid-template-columns: 1fr 1fr; }
    .us-pr-nalazi li,
    .us-pr-nalazi li:first-child,
    .us-pr-nalazi li:last-child { padding: 24px 16px 24px 0; border-right: none; border-bottom: 1px solid var(--bg-dark-rule); }
}
@media (max-width: 880px) {
    .us-blok { padding: 72px 0 80px; }
    .us-par,
    .us-staako,
    .us-pr-dva,
    .us-pr-sporedno { grid-template-columns: 1fr; gap: 24px; }
    .us-pr-sporedno > div,
    .us-pr-sporedno > div + div { padding: 28px 0; border-right: none; border-bottom: 1px solid var(--border-light-soft); }
    .us-grid-6 { grid-template-columns: 1fr; }
    .us-grid-6 .uo-card,
    .us-grid-6 .uo-card:nth-child(n) { padding: 32px 0 28px; border-right: none; border-top: 0; border-bottom: 1px solid var(--border-light-soft); }
    .us-staako { margin-top: 56px; }
    .us-veza { padding: 12px 0; }
    .uo-foot a { display: inline-block; padding: 10px 0; }
    .us-pr-hero { padding: 72px 0 48px; }
    .us-pr-nalazi-tekst { font-size: 20px; }
}
@media (max-width: 560px) {
    .us-listovi { grid-template-columns: 1fr; }
    .us-pr-nalazi { grid-template-columns: 1fr; }
}

/* ── Poravnanje kolona: naslov, opis, cena i link u istoj liniji ────── */
.us-poravnato { grid-template-rows: repeat(6, auto); }
.us-poravnato > .uo-card {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
}
.us-poravnato > .uo-card > .uo-num,
.us-poravnato > .uo-card > .us-veza { justify-self: start; }
.us-poravnato > .uo-card > .uo-p { align-self: start; }
.us-poravnato > .uo-card > .us-cena { align-self: start; }

/* dugi naslovi blokova: šira mera nego kratki naslov „Prvog razgovora" */
.us-blok .uo-title { max-width: 22ch; }

/* usluge za prodavnice imaju i red „šta dobijate" — sedam redova podmreže */
.us-poravnato--7 { grid-template-rows: repeat(7, auto); }
.us-poravnato--7 > .uo-card { grid-row: span 7; }
.us-poravnato > .uo-card > .us-korist { align-self: start; }
.us-pr-hero { --us-red: var(--brand); }
.us-pr-hero .uo-corner { z-index: 2; }

/* ── Završni poziv (zamenjuje stari .rs blok; S149) ──────────────────── */
.us-poziv-red {
    padding-top: 40px;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 80px;
    align-items: center;
}
.us-poziv-koord {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-light-soft);
}
.us-poziv-cta {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 18px 0 14px;
    border-bottom: 1px solid var(--us-red);
    color: var(--fg-light-deep);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.us-poziv-cta span { color: var(--us-red); }
@media (hover: hover) {
    .us-poziv-cta:hover { color: var(--us-red); }
}
.us-poziv-cta:focus-visible { outline: 2px solid var(--us-red); outline-offset: 4px; }
.us-blok--tamno .us-poziv-koord { color: var(--fg-dark-faint); }
.us-blok--tamno .us-poziv-cta { color: var(--fg-dark-strong); }
@media (max-width: 880px) {
    .us-poziv-red { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Saće (faza 06) u paleti strane (S149) ───────────────────────────────
   Ćelije (.po-cell, .po-num, .po-h, .po-scope iz home-variant-c.css) čitaju
   --po-* tokene; ovde ih vezujemo za tamnu podlogu ostalih faza umesto
   indigo „blueprint" palete. */
.us-sace {
    --po-fg:      var(--fg-dark-strong);
    --po-fg-mid:  var(--fg-dark-soft);
    --po-fg-haze: var(--fg-dark-faint);
    scroll-margin-top: 80px;
}
.us-sace .po-comb { margin-top: 8px; }
.us-sace .po-num { color: var(--brand-on-dark); }
.us-sace .po-h a {
    color: inherit;
    text-decoration: none;
    pointer-events: auto;
    border-bottom: 1px solid rgba(238,65,48,0.55);
}
@media (hover: hover) {
    .us-sace .po-h a:hover { color: var(--brand-on-dark); }
}
.us-sace .po-h a:focus-visible { outline: 2px solid var(--brand-on-dark); outline-offset: 3px; }

/* paketi: vodeni žig je raspon zaposlenih, ne redni broj (Denis, 9.11.) */
.us-pk .uo-wm { font-size: 72px; top: 26px; letter-spacing: -0.06em; }
@media (max-width: 880px) { .us-pk .uo-wm { font-size: 56px; top: 12px; } }
/* cena: iznos pa opis ispod, uvek isto u sve tri kolone (Denis, 9.11.) */
.us-cena { flex-direction: column; align-items: flex-start; gap: 6px; }

/* paketi: raspon zaposlenih kao veliki obrisni broj, a ispod njega samo
   „zaposlenih"; stoji u istom redu sa znakom, pa ne prelazi preko teksta */
.us-poravnato--5 { grid-template-rows: repeat(5, auto); }
.us-poravnato--5 > .uo-card { grid-row: span 5; }
.us-pk-vrh {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}
.us-pk-vrh .uo-mark { margin-bottom: 0; }
.us-raspon { margin: 0; text-align: right; line-height: 1; }
.us-raspon span {
    display: block;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 72px;
    letter-spacing: -0.06em;
    color: transparent;
    -webkit-text-stroke: 1px #c9c4b8;
}
.us-raspon small {
    display: block;
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-light-soft);
}
@media (max-width: 880px) { .us-raspon span { font-size: 56px; } }

/* ── Listovi izveštaja, druga verzija: grafikoni (izmišljeni podaci) ── */
.us-listovi { grid-template-columns: repeat(3, 1fr); }
.us-dole { color: var(--us-red); font-family: var(--font-mono); }
.us-kpi {
    padding: 8px 10px 9px 12px;
    background: #f4f2ec;
    border-left: 3px solid var(--fg-light-soft);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 10px;
}
.us-kpi span { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-light-soft); }
.us-kpi strong { grid-row: span 2; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.us-kpi small { font-size: 11.5px; line-height: 1.35; color: #5a5a58; }
.us-kpi--ok  { border-left-color: #2f6b3a; } .us-kpi--ok strong  { color: #2f6b3a; }
.us-kpi--riz { border-left-color: var(--brand); } .us-kpi--riz strong { color: var(--brand); }
.us-kpi--paz { border-left-color: #a8721a; } .us-kpi--paz strong { color: #8a5d12; }
.us-graf { display: block; width: 100%; height: auto; }
.us-pad { font-family: var(--font-mono); font-weight: 500; color: #2f6b3a; }
.us-list-telo--red { flex-direction: row; align-items: center; gap: 14px; }
.us-krofna { width: 112px; height: 112px; flex: none; }
.us-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; color: #2e2e2c; }
.us-legenda i { display: inline-block; width: 9px; height: 9px; margin-right: 7px; vertical-align: -1px; }
.us-l-crno { background: var(--fg-light-deep); }
.us-l-crveno { background: var(--brand); }
.us-l-sivo { background: #b9b5ab; }
.us-list-dno { padding: 0 14px 16px; }
@media (max-width: 980px) { .us-listovi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .us-listovi { grid-template-columns: 1fr; } }

/* nalazi: uvod se završava sa „pate od:", kartice nastavljaju rečenicu
   (podebljan deo) i dodaju po jednu konkretnu rečenicu (Denis, 9.11.) */
.us-pr-nalazi strong {
    display: block;
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--fg-dark-strong);
}
.us-pr-nalazi strong + span { display: block; font-size: 16px; line-height: 1.55; }

/* za koga / mera: isti tekst, ali u strukturi — uvodna rečenica, izdvojen
   citat, napomena; desno redovi sa oznakama koje prate krivu (Denis, 9.11.) */
.us-pr-dva > div > p + p { margin-top: 16px; }
.us-pr-dva .us-pr-lead {
    margin: 0 0 18px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--fg-light-deep);
    max-width: 26ch;
    text-wrap: balance;
}
.us-pr-dva .us-pr-pull {
    margin: 26px 0;
    padding: 4px 0 4px 20px;
    border-left: 2px solid var(--brand);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--fg-light-deep);
    max-width: 40ch;
}
.us-pr-dva .us-pr-napomena {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid rgba(20,20,18,0.16);
    font-size: 15px;
    color: var(--fg-light-soft);
}
.us-pr-napomena strong { color: var(--fg-light-deep); font-weight: 600; }
.us-pr-redovi {
    margin: 4px 0 0;
    display: grid;
    grid-template-columns: 120px 1fr;
    border-top: 1px solid rgba(20,20,18,0.16);
}
.us-pr-redovi dt,
.us-pr-redovi dd { padding: 14px 0; border-bottom: 1px solid rgba(20,20,18,0.16); }
.us-pr-redovi dt {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-light-soft);
    padding-top: 17px;
}
.us-pr-redovi dt.us-pr-crveno { color: var(--brand); }
.us-pr-redovi dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--fg-light-mid); }
@media (max-width: 560px) {
    .us-pr-redovi { grid-template-columns: 1fr; }
    .us-pr-redovi dt { border-bottom: 0; padding-bottom: 0; }
}

.us-staako h3 em { font-style: normal; color: var(--brand); }

/* saće: jezgro (konsalting) malo jače od ostalih ćelija */
.us-sace .po-cell--jezgro .po-h { font-size: clamp(17px, 1.75vw, 23px); }

/* ── Crvena podloga: završni poziv (Denis, 9.11.) ─────────────────────
   Tonovi iz bivšeg crvenog cenovnika (.vj, mereni u S130): pozadina
   #7a1515, tekst krem, akcenat breskva. Jedini crveni blok na strani,
   pa kraj strane ima naglasak i odvaja se od svetlog footera. */
.us-blok--crveno {
    --us-red: #ffd9a8;
    background: #7a1515;
    color: #f7eee2;
    border-top: 0;
}
.us-blok--crveno::before {
    background-image:
        linear-gradient(to right, rgba(243,230,216,0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(243,230,216,0.05) 1px, transparent 1px);
}
.us-blok--crveno .uo-corner { color: #c3a49d; }
.us-blok--crveno .uo-kicker { color: #ffd9a8; }
.us-blok--crveno .uo-kicker .sep { color: #c3a49d; }
.us-blok--crveno .uo-title { color: #f7eee2; }
.us-blok--crveno .uo-title em { color: #ffd9a8; }
.us-blok--crveno .uo-intro { color: #e6d0bd; }
.us-blok--crveno .uo-rule { color: #e6c5b8; }
.us-blok--crveno .uo-rule .red { stroke: #ffd9a8; }
.us-blok--crveno .us-poziv-koord { color: #cca194; }
.us-blok--crveno .us-poziv-cta { color: #f7eee2; border-bottom-color: #ffd9a8; }
.us-blok--crveno .us-poziv-cta span { color: #ffd9a8; }
@media (hover: hover) {
    .us-blok--crveno .us-poziv-cta:hover { color: #ffd9a8; }
}
.us-blok--crveno .us-poziv-cta:focus-visible { outline-color: #ffd9a8; }
.us-blok--crveno .uo-foot { border-top-color: rgba(243,230,216,0.18); color: #cca194; }
.us-blok--crveno .uo-foot strong { color: #f7eee2; }
.us-blok--crveno .uo-foot .pin { color: #ffd9a8; }

/* ── Ispravke iz završnog pregleda dizajna (9.11.) ───────────────────── */
/* 1) telefon: oznaka faze teče kao jedan red teksta, ne kao tri kolone */
@media (max-width: 600px) {
    .uo-kicker { display: block; line-height: 1.7; }
    .uo-kicker .sep { margin: 0 0.5em; }
}
/* 2) telefon: „Šta ulazi u koji paket" ne sme da se gnječi uz mono oznaku */
@media (max-width: 600px) {
    .us-tabela > summary { grid-template-columns: 44px 1fr; row-gap: 6px; }
    .us-tabela > summary .us-meta { grid-column: 2; }
}
/* 3) telefon: jezgro saća (konsalting) najveće i na telefonu */
.us-sace .po-comb-v .po-cell--jezgro .po-h { font-size: 30px; }
/* 4) telefon: oznake ispod EKG linije u trijaži u dva reda, ne slepljene */
@media (max-width: 600px) {
    .kz-ekg-axis { grid-template-columns: 1fr 1fr; row-gap: 6px; }
}
/* 5) prodavnice: oznaka usluge ne ulazi u vodeni žig */
.us-poravnato--7 .uo-num { max-width: 72%; }
.us-pr-rez { margin-top: 40px; }
.us-pr-rez + .us-pr-nalazi { margin-top: 24px; border-top: 0; }
/* 6) trijaža: naslovi kartica u istoj liniji — višak visine ne razvlači
      gornje redove (kartica sa kraćim opisom je spuštala naslov za 8 px) */
.kz-card { align-content: start; }

/* telefon: cena paketa desno, kao protivteža rasponu gore desno (Denis, 9.11.) */
@media (max-width: 880px) {
    .us-poravnato > .uo-card > .us-cena { justify-self: end; align-items: flex-end; text-align: right; }
}

/* telefon: tabela stavki postaje lista — tekst preko celog reda, ispod
   tri paketa sa oznakom (Denis, 9.11.: na telefonu se ne vidi dobro) */
@media (max-width: 600px) {
    .us-tabela-okvir { overflow: visible; }
    .us-tabela table { min-width: 0; margin-top: 12px; }
    .us-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .us-tabela tbody tr,
    .us-tabela tfoot tr {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-top: 1px solid var(--border-light-soft);
        padding: 12px 0;
    }
    .us-tabela tbody tr:has(th) { border-top: 0; padding: 0; }
    .us-tabela tbody th[colspan] { grid-column: 1 / -1; padding: 22px 0 6px; }
    .us-tabela tbody td,
    .us-tabela tfoot td { border-top: 0; padding: 0; }
    .us-tabela tbody td:first-child,
    .us-tabela tfoot td:first-child {
        grid-column: 1 / -1;
        padding: 0 0 10px;
        font-size: 16px;
    }
    .us-tabela tbody td[data-paket] {
        display: flex;
        align-items: center;
        gap: 8px;
        justify-content: flex-start;
    }
    .us-tabela tbody td[data-paket]::before,
    .us-tabela tfoot td[data-paket]::before {
        content: attr(data-paket);
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--fg-light-soft);
    }
    .us-tabela tfoot tr { border-top: 1px solid var(--fg-light-deep); margin-top: 18px; padding-top: 16px; row-gap: 14px; }
    .us-tabela tfoot td[data-paket] { grid-column: 1 / -1; font-size: 15px; }
    .us-tabela tfoot td[data-paket]::before { display: block; margin-bottom: 4px; }
    .us-da { width: 8px; height: 8px; }
}
@media (max-width: 600px) {
    .us-tabela tfoot td:first-child { font-size: 11px; padding-bottom: 4px; }
}