/* OptiBull v6: components for the done-for-you pages.
   Loaded after style.css on these pages only:
   naredite-namesto-mene.html, nacrt-rasti.html, preden-prejmete-nacrt.html, nacrt-primer.html.
   Documented in README-stran-nacrt.md. Colours come from the tokens in style.css only.
   Order: 1 long letter (parts, part mark, hero card, proof line), 2 shared lists (rešitve, plan contents,
   media caption, closing section), 3 questionnaire additions, 4 sample plan page, 5 motion states. */

/* ==========================================================================
   1. Long letter
   ========================================================================== */

/* Hero of the sales letter: headline left, guarantee summary card right */
.lf-hero { padding-block: clamp(2rem, 1rem + 3vw, 4.5rem) clamp(3.5rem, 2rem + 4vw, 6rem); }
.lf-hero__title { font-size: min(var(--fs-h1), 5.6rem); max-width: 13ch; }
.lf-hero__lead { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.lf-hero__lead + .muted { margin-top: 1rem; max-width: 38rem; }
.lf-hero .cta-block { margin-top: 2rem; }
@media (min-width: 960px) { .lf-hero .split { align-items: end; } }

/* Guarantee summary card (dark): the six point titles, numbered like the full block */
.gcard { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.gcard__kicker { display: flex; align-items: center; gap: .6em; color: var(--fg-2); font: 600 .9375rem/1.3 var(--f-sans); }
.gcard__kicker::before { content: ""; width: .56em; height: .56em; border-radius: 50%; background: var(--red); }
.gcard__title { margin-top: .9rem !important; font: 700 clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem)/1.02 var(--f-display); letter-spacing: -.025em; text-wrap: balance; }
.gcard__list { counter-reset: gc; display: grid; margin-top: 1.5rem !important; border-top: 1px solid var(--hair); }
.gcard__list li { counter-increment: gc; display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); align-items: baseline; gap: .6rem; padding: .7rem 0; border-bottom: 1px solid var(--hair); font-weight: 600; line-height: 1.35; }
.gcard__list li::before { content: counter(gc); font: 650 .95rem/1 var(--f-display); color: var(--fg-2); }
.gcard__more { margin-top: 1.25rem !important; font-size: var(--fs-small); }

/* Proof line under the video: a big count and the names */
.proofline { display: grid; gap: 1.1rem; align-content: start; }
.proofline__num { font: 800 clamp(3.4rem, 2.6rem + 3vw, 5.4rem)/.86 var(--f-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.proofline__label { font: 600 1.0625rem/1.3 var(--f-sans); max-width: 22ch; }
.proofline__more { padding-top: 1rem; border-top: 1px solid var(--hair); }
.proofline .inline-list { padding-top: 1rem; border-top: 1px solid var(--hair); font: 600 1.05rem/1.6 var(--f-display); letter-spacing: -.01em; color: var(--fg-2); }
.media-row { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
@media (min-width: 960px) { .media-row { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; } }

/* A part of the letter: the head (mark, title, gist) stays beside the text on wide screens */
.part__grid { display: grid; gap: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
@media (min-width: 1024px) {
  .part__grid { grid-template-columns: minmax(0, 4.2fr) minmax(0, 7fr); column-gap: clamp(3rem, 1rem + 5vw, 6.5rem); }
  .part__head { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}
.part__title { font-size: clamp(2rem, 1.35rem + 2.3vw, 3.35rem); line-height: 1.02; max-width: 15ch; }
.part__gist {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hair);
  font-size: var(--fs-lead);
  line-height: 1.42;
  color: var(--fg);
  max-width: 30rem;
  text-wrap: pretty;
}
.part__body { display: grid; gap: 2rem; min-width: 0; }
.part__body > .prose { max-width: 66ch; }
.part__wide { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

/* Part mark: where the reader is in the letter. A small path, the current node is the red visitor dot. */
.part-mark { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1rem; margin-bottom: 1.4rem; color: var(--fg-2); font: 600 .9375rem/1.3 var(--f-sans); }
.part-mark__path { position: relative; display: inline-flex; align-items: center; gap: 13px; }
.part-mark__path::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 1px; background: var(--hair); }
.part-mark__path i { position: relative; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--fg-2); background: var(--bg); }
.part-mark__path i.is-done { background: var(--fg); border-color: var(--fg); }
.part-mark__path i.is-here { width: 12px; height: 12px; margin: 0 -1.5px; border: 0; background: var(--red); box-shadow: 0 0 0 4px rgba(242, 107, 29, .22); }
.part-mark strong { color: var(--fg); font-weight: 650; }

.part__subtitle { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); }

/* Under the full guarantee: why these six points, and the three conditions explained */
.why { display: grid; gap: 2rem var(--gap); padding-top: 2rem; border-top: 1px solid var(--hair); }
@media (min-width: 900px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 1rem + 4vw, 5.5rem); } }
.why h3 { margin-bottom: .8rem; font: 650 var(--fs-h4)/1.2 var(--f-display); letter-spacing: -.01em; color: var(--fg); }
.why p { color: var(--fg-2); max-width: 52ch; }
.why .checks { margin-bottom: 1rem; }
.why .checks li { color: var(--fg-2); }
.why .checks strong { color: var(--fg); }

/* The example calculation in the letter */
.calc caption { padding-bottom: .4rem; }
.calc .tag { margin-left: .5rem; vertical-align: .1em; }

/* ==========================================================================
   2. Shared lists and blocks
   ========================================================================== */

/* The twelve rešitve: a numbered menu, two columns from 700px */
.resitve { counter-reset: r; display: grid; border-top: 1px solid var(--hair); }
.resitve li { counter-increment: r; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: .5rem; padding: 1rem 0 1.05rem; border-bottom: 1px solid var(--hair); line-height: 1.45; }
.resitve li::before { content: counter(r); grid-row: span 2; font: 700 1.35rem/1.1 var(--f-display); letter-spacing: -.03em; color: var(--red-ink); }
.resitve strong { font-weight: 650; }
.resitve span { color: var(--fg-2); font-size: 1rem; }
@media (min-width: 700px) {
  .resitve { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}

/* Plan contents: the six parts of the Načrt rasti, as a table of contents */
.contents { counter-reset: c; display: grid; border-top: 1.5px solid var(--fg); }
.contents li { counter-increment: c; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: .75rem; align-items: baseline; padding: .95rem 0 1rem; border-bottom: 1px solid var(--hair); }
.contents li::before { content: counter(c, decimal-leading-zero); font: 650 .95rem/1.4 var(--f-display); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.contents__title { display: block; font: 650 1.15rem/1.3 var(--f-display); letter-spacing: -.01em; color: var(--fg); }
.contents__text { display: block; margin-top: .2rem; color: var(--fg-2); font-size: 1rem; line-height: 1.45; }
.contents a { color: inherit; text-decoration: none; }
.contents a:hover .contents__title, .contents a:focus-visible .contents__title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
.contents-card { padding: clamp(1.4rem, 1rem + 1.5vw, 2.25rem); border: 1px solid var(--hair); border-radius: var(--radius); background: var(--surface); }
.contents-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; margin-bottom: 1.1rem; }
.contents-card__title { font: 700 clamp(1.4rem, 1.2rem + .7vw, 1.8rem)/1.1 var(--f-display); letter-spacing: -.02em; }
.contents-card__value { color: var(--fg-2); font-size: var(--fs-small); font-weight: 600; }
.contents-card__foot { margin-top: 1.1rem; color: var(--fg-2); font-size: var(--fs-small); }

/* Video with its AI caption. In live mode a video without a URL is hidden, and so is its caption. */
.media { display: grid; gap: .75rem; }
.media__cap { display: flex; align-items: center; gap: .6rem; color: var(--fg-2); font-size: var(--fs-small); line-height: 1.4; }
.media__cap::before { content: "AI"; flex: none; display: inline-grid; place-items: center; min-width: 2.1rem; height: 1.45rem; padding: 0 .4rem; border: 1px solid var(--hair); border-radius: var(--pill); color: var(--fg); font: 700 .72rem/1 var(--f-sans); letter-spacing: .04em; }
.media:has(> .video[hidden]) { display: none; }
@media (max-width: 600px) { .media .video:not(.video--live) { aspect-ratio: 4 / 3; } }

/* Closing section (dark): headline left, the one call to action right */
.closing { padding-block: clamp(4.5rem, 3rem + 6vw, 8.5rem); }
.closing__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
@media (min-width: 960px) { .closing__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; column-gap: clamp(2.5rem, 1rem + 4vw, 5rem); } }
.closing .display { max-width: 15ch; }
.closing__text { display: grid; gap: 1.1rem; color: var(--fg-2); max-width: 40rem; }
.closing__text .lead { color: var(--fg); }
.closing__ps { padding-top: 1.1rem; border-top: 1px solid var(--hair); }
.closing__ps strong:first-child { font-family: var(--f-display); color: var(--fg); }
.closing__action { display: grid; gap: 1rem; justify-items: start; }
.closing__action .cover { width: min(16rem, 64%); margin-bottom: .75rem; }
@media (min-width: 960px) { .closing__action { align-self: center; justify-items: center; } }

/* ==========================================================================
   3. Questionnaire (nacrt-rasti.html), additions to the kit in style.css
   ========================================================================== */
.quiz-hero { padding-block: clamp(2rem, 1rem + 3vw, 4.5rem) clamp(3.5rem, 2rem + 4vw, 6rem); }
.quiz-how { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 1px solid var(--hair); }
.quiz-how .stack { max-width: 40rem; }
/* Minimal footer on these pages: only the bottom line, without the empty band above it */
.site-footer--minimal { padding-block: 1.6rem; }
.site-footer--minimal .site-footer__bottom { margin-top: 0; padding-top: 0; border-top: 0; }
.quiz-hero__grid { display: grid; gap: clamp(2.25rem, 1rem + 4vw, 4rem); }
@media (min-width: 960px) { .quiz-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; column-gap: clamp(2.5rem, 1rem + 4vw, 5rem); } }
.quiz-hero__title { font-size: clamp(2.35rem, 1.4rem + 3.6vw, 4.6rem); max-width: 15ch; }
.quiz-hero .lead { margin-top: 1.5rem; }
.quiz-hero__filter { margin-top: 1rem; color: var(--fg-2); max-width: 36rem; }
.quiz-hero .cta-block { margin-top: 2rem; }
.quiz-hero__meta { color: var(--fg-2); font-size: var(--fs-small); }
.resume { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); max-width: 44rem; }
.resume .notice__title { font: 700 clamp(1.3rem, 1.15rem + .6vw, 1.6rem)/1.15 var(--f-display); letter-spacing: -.015em; }
.resume .btn { margin-top: .9rem; }

.quiz-layout { display: grid; gap: 3rem; }
@media (min-width: 1100px) {
  .quiz-layout { grid-template-columns: minmax(0, 48rem) minmax(0, 1fr); column-gap: clamp(3rem, 1rem + 5vw, 6rem); }
  .quiz-aside { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}
@media (max-width: 1099px) { .quiz-aside { display: none; } }
.quiz-section { padding-block: clamp(2rem, 1.2rem + 3vw, 4rem) clamp(4rem, 2.5rem + 4vw, 6rem); min-height: calc(100vh - var(--header-h)); }

/* Progress: the kit track plus a travelling visitor dot. --step and --steps are set on .quiz__progress. */
.quiz__progress { position: relative; }
.quiz__dot {
  position: absolute; top: 6px; left: calc(6px + (100% - 12px) * (var(--step, 1) - 1) / max(var(--steps, 2) - 1, 1));
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(242, 107, 29, .2);
  transition: left .7s var(--ease-out);
  pointer-events: none;
}
.quiz__count { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; }
.quiz__count strong { color: var(--fg); font-weight: 650; }
.quiz__part { color: var(--fg-2); }
.quiz__step legend:focus, .quiz-result h2:focus { outline: none; }
.quiz__step .field + .options, .quiz__step .options + .field, .quiz__step .field + .field { margin-top: 1rem; }
.quiz__step > .field input, .quiz__step > .field textarea { font-size: 1.125rem; }
.quiz__fine { margin-top: 1.25rem; color: var(--fg-2); font-size: .875rem; line-height: 1.5; max-width: 56ch; }
.quiz__consent { margin-top: .9rem; }
.quiz__step .check { margin-top: 1.5rem; }
.quiz__nav .btn[type="submit"] { min-width: 9rem; }
.quiz-pause { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius); background: var(--paper-2); }
.quiz-pause__left { margin-top: 1.25rem; font: 700 clamp(1.4rem, 1.2rem + .8vw, 1.9rem)/1.1 var(--f-display); letter-spacing: -.02em; }
.quiz-pause p + p { margin-top: .75rem; }

/* Quiz dialogs (exit and promise): text only, no cover */
.popup__box--solo { grid-template-columns: minmax(0, 1fr); }
.popup__box--solo .popup__body > p + p { margin-top: .75rem; }

/* Rich option: a meta line under the text */
.option__meta { grid-column: 2; margin-top: .55rem; padding-top: .55rem; border-top: 1px solid var(--hair); color: var(--fg-2); font-size: .875rem; line-height: 1.45; }

/* Scale from 1 to 10 */
.scale { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .4rem; }
@media (max-width: 520px) { .scale { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.scale__item { position: relative; display: block; cursor: pointer; }
.scale__item input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.scale__item span {
  display: grid; place-items: center; min-height: 56px;
  border: 1.5px solid var(--input-border); border-radius: var(--radius-sm);
  background: var(--input-bg); color: var(--fg);
  font: 700 1.25rem/1 var(--f-display);
  transition: background-color .2s, border-color .2s, color .2s;
}
.scale__item:hover span { border-color: var(--fg-2); }
.scale__item input:checked + span { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.scale__item input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.scale__ends { display: flex; justify-content: space-between; gap: 1rem; margin-top: .75rem; color: var(--fg-2); font-size: var(--fs-small); }
.scale__ends span:last-child { text-align: right; }

/* Loader after a qualified submission: four real steps on a small path */
.loader { position: relative; display: grid; gap: 1.35rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.loader li { position: relative; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); align-items: center; gap: 1rem; color: var(--fg-2); font-size: 1.0625rem; line-height: 1.4; transition: color .3s; }
.loader li:not(:last-child)::after { content: ""; position: absolute; left: calc(.8rem - .5px); top: 1.6rem; width: 1px; height: 1.35rem; background: var(--hair); }
.loader__node { position: relative; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1.5px solid var(--fg-2); background: var(--bg); transition: background-color .3s, border-color .3s, box-shadow .3s; }
.loader__node::after {
  content: ""; position: absolute; inset: 5px;
  background: var(--bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.6 2.5L10 3.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.6 2.5L10 3.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(0); transition: transform .35s var(--ease-out);
}
.loader li.is-active { color: var(--fg); }
.loader li.is-active .loader__node { border-color: var(--red); background: var(--red); box-shadow: 0 0 0 6px rgba(242, 107, 29, .2); }
.loader li.is-done { color: var(--fg); }
.loader li.is-done .loader__node { border-color: var(--fg); background: var(--fg); }
.loader li.is-done .loader__node::after { transform: scale(1); }

.quiz-result { max-width: 48rem; }
.quiz-result h2 { font: 700 clamp(2rem, 1.4rem + 2.2vw, 3.1rem)/1.03 var(--f-display); letter-spacing: -.025em; text-wrap: balance; }
.quiz-result .lead { margin-top: 1.1rem; }
.quiz-result__book { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-top: 2.25rem; padding-top: 2rem; border-top: 1px solid var(--hair); }
.quiz-result__book .cover { width: 100%; }
.quiz-result__book .stack > p { color: var(--fg-2); }
@media (max-width: 480px) { .quiz-result__book { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: 1.1rem; } }

/* ==========================================================================
   4. Sample plan (nacrt-primer.html) and the page before the plan
   ========================================================================== */

/* "Primer" ribbon under the header; stays visible while the reader scrolls */
.sample-bar {
  position: sticky; top: var(--header-h); z-index: 45;
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  padding: .55rem var(--gutter);
  background: var(--ink); color: var(--paper);
  font-size: .9375rem; line-height: 1.35; text-align: center;
  transition: top .55s var(--ease-out);
}
.sample-bar::before { content: ""; flex: none; width: .55em; height: .55em; border-radius: 50%; background: var(--red); }
body:has(.site-header.is-hidden) .sample-bar { top: 0; }

.plan-hero { padding-block: clamp(2.25rem, 1.2rem + 3vw, 4.5rem) clamp(3.5rem, 2rem + 4vw, 6rem); }
.plan-hero__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
@media (min-width: 960px) { .plan-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; column-gap: clamp(2.5rem, 1rem + 4vw, 5rem); } }
.plan-hero__side { display: grid; gap: 1.5rem; align-content: start; }
.plan-hero__side .dates { margin-top: 0; }
.plan-hero__title { font-size: clamp(2.8rem, 1.6rem + 4.6vw, 5.6rem); }
.plan-hero .lead { margin-top: 1.4rem; }
.plan-hero__text { display: grid; gap: 1rem; margin-top: 1.4rem; max-width: 36rem; }
.plan-hero__text p { color: var(--fg-2); }

.dates { display: grid; gap: .75rem; margin-top: 2rem; }
@media (min-width: 560px) { .dates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.date { padding: 1rem 1.15rem 1.1rem; border: 1px solid var(--hair); border-radius: var(--radius-sm); background: var(--surface); }
.date__label { color: var(--fg-2); font-size: var(--fs-small); font-weight: 600; }
.date__value { margin-top: .3rem; font: 700 1.45rem/1.1 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.date__note { margin-top: .35rem; color: var(--fg-2); font-size: .875rem; line-height: 1.45; }
.date--red { border-left: 3px solid var(--red); }

.plan-index { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.plan-index__title { margin-bottom: 1rem; font: 650 var(--fs-h4)/1.2 var(--f-display); }
@media (min-width: 760px) { .plan-index .contents { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; } }
@media (min-width: 1100px) { .plan-index .contents { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Section head of a plan part: the part number on a small path */
.plan-head { display: grid; gap: 1.1rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); max-width: 52rem; }
.plan-head .display { font-size: clamp(2.05rem, 1.4rem + 2.4vw, 3.6rem); max-width: 20ch; }
.plan-head .part-mark { margin-bottom: 0; }
.plan-head .lead { color: var(--fg-2); }
.plan-cols { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
@media (min-width: 960px) { .plan-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.plan-sub { margin-bottom: 1rem; font: 650 var(--fs-h4)/1.2 var(--f-display); letter-spacing: -.01em; }

/* What you told us: the owner's words */
.said { display: grid; gap: 1.25rem; }
.said__quote {
  padding-left: 1.2em; border-left: 2px solid var(--red);
  font: italic 400 clamp(1.45rem, 1.15rem + 1vw, 2rem)/1.28 var(--f-serif); letter-spacing: -.005em;
}
.said__label { color: var(--fg-2); font-size: var(--fs-small); font-weight: 600; }
.verdict { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding-top: 1.5rem; border-top: 1.5px solid var(--fg); }
.verdict__line { font: 700 clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem)/1.12 var(--f-display); letter-spacing: -.02em; max-width: 30ch; text-wrap: balance; }
.verdict p + p { margin-top: .8rem; color: var(--fg-2); max-width: 56ch; }

/* Findings of the website review */
.findings { counter-reset: f; display: grid; border-top: 1px solid var(--hair); }
.findings > li { counter-increment: f; display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; padding: 1.5rem 0 1.6rem; border-bottom: 1px solid var(--hair); }
.findings > li::before { content: counter(f); grid-row: span 3; font: 700 2.1rem/1 var(--f-display); letter-spacing: -.04em; color: var(--red-ink); }
.findings h3, .findings h4 { font: 650 var(--fs-h4)/1.25 var(--f-display); letter-spacing: -.01em; }
.findings p { margin-top: .45rem; color: var(--fg-2); max-width: 60ch; }
.findings .fix { display: flex; gap: .55rem; align-items: baseline; color: var(--fg); }
.findings .fix::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--red); transform: translateY(-.1em); }
.fix__label { font-weight: 650; }
.works { display: grid; gap: .9rem; }

/* Competitor table */
.compare th, .compare td { text-align: center; }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare thead th { white-space: normal; }
.compare .is-you { background: var(--paper-2); font-weight: 700; color: var(--fg); }
.section--paper-2 .compare .is-you { background: var(--paper); }
.compare tbody th { font-weight: 600; font-size: .9375rem; }
.compare td { font-variant-numeric: tabular-nums; }
.compare .no { color: var(--fg-2); }
@media (max-width: 600px) { .compare { font-size: .875rem; } .compare th, .compare td { padding: .75rem .6rem; } }
.searches { color: var(--fg-2); font-size: var(--fs-small); }

/* Estimate label: every euro or deal estimate carries it */
.estimate {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .3em .75em; border: 1px solid var(--hair); border-radius: var(--pill);
  background: var(--surface); color: var(--fg-2);
  font: 600 .875rem/1.25 var(--f-sans);
}
.estimate::before { content: ""; flex: none; width: .5em; height: .5em; border-radius: 50%; background: var(--amber); }
.goal { display: grid; gap: .75rem; }
.goal__row { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: .9rem 0; border-bottom: 1px solid var(--hair); }
.goal__row:first-child { border-top: 1px solid var(--hair); }
.goal__key { color: var(--fg-2); font-weight: 600; font-size: var(--fs-small); }
.goal__val { font: 700 clamp(1.3rem, 1.1rem + .8vw, 1.75rem)/1.15 var(--f-display); letter-spacing: -.02em; }

/* A rešitev reference on a path step */
.path__fix { display: inline-flex; margin-top: .7rem; padding: .32em .8em; border: 1px solid var(--hair); border-radius: var(--pill); background: var(--surface); color: var(--fg); font: 600 .875rem/1.3 var(--f-sans); }
.later { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--hair); }

/* Offer that stands out */
.offer { display: grid; gap: 1.1rem; }
.offer__name { font: 700 clamp(1.5rem, 1.2rem + 1.1vw, 2.15rem)/1.08 var(--f-display); letter-spacing: -.022em; }
.have { display: inline-block; margin-left: .35rem; padding: .12em .55em; border-radius: var(--pill); background: var(--paper-2); color: var(--fg-2); font: 600 .78rem/1.4 var(--f-sans); white-space: nowrap; vertical-align: .08em; }
.card--dark .have { background: var(--ink-2); }

/* Quick improvements and copy templates */
.wins { counter-reset: w; display: grid; gap: var(--gap); }
@media (min-width: 1000px) { .wins { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.win { counter-increment: w; display: flex; flex-direction: column; gap: .9rem; padding: clamp(1.4rem, 1rem + 1.3vw, 2rem); border: 1px solid var(--hair); border-radius: var(--radius); background: var(--surface); }
.win::before { content: "Izboljšava " counter(w); color: var(--red-ink); font: 650 .875rem/1 var(--f-sans); letter-spacing: .01em; }
.win h3 { font: 650 var(--fs-h4)/1.22 var(--f-display); letter-spacing: -.01em; }
.win p { color: var(--fg-2); font-size: 1rem; line-height: 1.55; }
.win .template { color: var(--ink); }
.template { margin-top: auto; padding: .95rem 1.05rem 1.05rem; border: 1px dashed var(--input-border); border-radius: var(--radius-sm); background: var(--white); color: var(--ink); font-size: .98rem; line-height: 1.55; }
.template__label { display: block; margin-bottom: .4rem; color: var(--muted); font: 600 .78rem/1.2 var(--f-sans); letter-spacing: .02em; }

/* Homepage preview in a phone frame. Display only; sizes in cqi so it scales. */
.preview { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); }
@media (min-width: 900px) { .preview { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; } }
.preview__device { display: grid; justify-items: center; gap: .9rem; }
.phone { width: min(20rem, 100%); padding: .55rem; border-radius: 2.6rem; background: var(--ink); }
.phone__screen { container-type: inline-size; overflow: hidden; border-radius: 2.1rem; background: var(--white); color: var(--ink); font-family: var(--f-sans); }
.pv-notch { width: 30%; height: 3.2cqi; margin: 3cqi auto 0; border-radius: var(--pill); background: var(--ink); }
.pv-top { display: flex; align-items: center; justify-content: space-between; gap: 3cqi; padding: 4cqi 5.5cqi; border-bottom: 1px solid var(--line); }
.pv-logo { display: flex; align-items: center; gap: 2cqi; font: 700 5.2cqi/1 var(--f-display); letter-spacing: -.02em; }
.pv-logo svg { width: 6.5cqi; height: 6.5cqi; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv-call { display: grid; place-items: center; width: 10cqi; height: 10cqi; border-radius: 50%; background: var(--red); }
.pv-call svg { width: 50%; height: 50%; fill: none; stroke: var(--on-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv-hero { display: grid; gap: 3.2cqi; padding: 7cqi 5.5cqi 6cqi; background: var(--paper); }
.pv-h { font: 700 8.6cqi/1.02 var(--f-display); letter-spacing: -.03em; text-wrap: balance; }
.pv-sub { color: var(--muted); font-size: 4.4cqi; line-height: 1.35; }
.pv-stars { display: flex; align-items: center; gap: 1.6cqi; color: var(--ink); font: 600 4cqi/1 var(--f-sans); }
.pv-stars svg { width: 4.4cqi; height: 4.4cqi; fill: var(--amber); }
.pv-btn { display: block; padding: 3.6cqi 4cqi; border-radius: var(--pill); background: var(--red); color: var(--on-accent); font: 600 4.3cqi/1.1 var(--f-sans); text-align: center; }
.pv-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pv-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.6cqi; padding: 5cqi 5.5cqi 0; }
.pv-photo {
  display: grid; place-items: end start; aspect-ratio: 4 / 3; padding: 2cqi 2.4cqi; border-radius: 2.6cqi;
  background: repeating-linear-gradient(135deg, var(--paper-2) 0 2.4cqi, var(--paper) 2.4cqi 4.8cqi);
  color: var(--muted); font-size: 3.2cqi; line-height: 1.2;
}
.pv-form { display: grid; gap: 2.4cqi; margin: 5cqi 5.5cqi 6cqi; padding: 4.5cqi; border-radius: 3.6cqi; background: var(--paper-2); }
.pv-form__t { font: 700 4.8cqi/1.15 var(--f-display); letter-spacing: -.015em; }
.pv-input { padding: 2.8cqi 3.4cqi; border: 1px solid var(--line); border-radius: 2cqi; background: var(--white); color: var(--muted); font-size: 3.8cqi; }
.preview__note { color: var(--fg-2); font-size: var(--fs-small); text-align: center; }
.preview__text { display: grid; gap: 1.25rem; }
.preview__text p { max-width: 56ch; }

/* Recommendation and price */
.reco { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
@media (min-width: 960px) { .reco { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; } }
.reco__lead { font: 700 clamp(1.6rem, 1.25rem + 1.4vw, 2.4rem)/1.08 var(--f-display); letter-spacing: -.022em; }
.reco__text { display: grid; gap: 1rem; margin-top: 1.25rem; }
.reco__text p { max-width: 56ch; }
.reco .price { box-shadow: none; }
.reco .price .checks li { font-size: 1rem; }
.price__rok { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--hair); color: var(--fg-2); font-size: var(--fs-small); }
.price__rok strong { color: var(--fg); }
.pay .table td:last-child, .pay .table th:last-child { text-align: right; }
.pay .cta-block { margin-top: 1.75rem; }
.pay__notes { display: grid; gap: .8rem; margin-top: 1.5rem; }
.pay__notes p { max-width: 60ch; }

.bonus { display: grid; gap: 1.1rem; max-width: 52rem; }
.bonus__date { font: 800 clamp(2.4rem, 1.7rem + 2.6vw, 4rem)/1 var(--f-display); letter-spacing: -.04em; }
.bonus p { max-width: 58ch; }

.guarantee__you { margin-top: 2rem; padding: 1.1rem 1.3rem; border-left: 3px solid var(--red); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); max-width: 60rem; }
.guarantee__you strong { font-family: var(--f-display); }

/* AI assistant demo (static) */
.chat { overflow: hidden; border: 1px solid var(--hair); border-radius: var(--radius); background: var(--white); color: var(--ink); }
.chat__head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .85rem 1.1rem; background: var(--ink); color: var(--paper); }
.chat__head strong { font: 650 1.05rem/1.2 var(--f-display); }
.chat__head .tag { margin-left: auto; background: var(--ink-2); border-color: var(--dark-line); color: var(--paper); }
.chat__log { display: grid; gap: .75rem; padding: 1.1rem; background: var(--paper); }
.msg { max-width: 88%; padding: .7rem .9rem; border-radius: 14px 14px 14px 4px; background: var(--white); border: 1px solid var(--line); font-size: .98rem; line-height: 1.5; }
.msg--me { justify-self: end; border-radius: 14px 14px 4px 14px; background: var(--ink); border-color: var(--ink); color: var(--paper); }
.msg__who { display: block; margin-bottom: .2rem; color: var(--muted); font: 600 .75rem/1.2 var(--f-sans); letter-spacing: .02em; }
.msg--me .msg__who { color: var(--dark-2); }
.chat__input { padding: .8rem 1.1rem 1rem; border-top: 1px solid var(--line); }
.chat__input input { width: 100%; min-height: 48px; padding: .7rem .9rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--muted); font: 400 1rem/1.4 var(--f-sans); }
.chat__note { margin-top: .75rem; color: var(--fg-2); font-size: var(--fs-small); }

/* Order summary in the closing section of the plan */
.order { display: grid; gap: 1rem; }
.order .plan-sub { margin: 1rem 0 0; color: var(--fg); }
.order .steps { --cols: 2; margin-top: .25rem; }
.order .steps > li { border-top-color: var(--dark-line); }
.order .steps > li::before { font-size: 1.8rem; color: var(--fg-2); }
.order .steps h3 { color: var(--fg); }
.closing__ps p + p { margin-top: .75rem; }
.order-box { display: grid; gap: 1.1rem; width: 100%; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border: 1px solid var(--dark-line); border-radius: var(--radius); background: var(--ink-2); }
.order-box__kicker { color: var(--fg-2); font: 600 .9375rem/1.3 var(--f-sans); }
.order-box__name { font: 700 clamp(1.6rem, 1.3rem + 1vw, 2.1rem)/1.05 var(--f-display); letter-spacing: -.02em; }
.order-box__price { font: 800 clamp(2.4rem, 1.9rem + 1.8vw, 3.3rem)/1 var(--f-display); letter-spacing: -.04em; }
.order-box__price span { font: 500 1rem/1.3 var(--f-sans); letter-spacing: 0; color: var(--fg-2); }
.order-box .checks { padding: 1.1rem 0; border-block: 1px solid var(--dark-line); }
.order-box .checks li { font-size: 1rem; }
.order-box .cta-block { justify-items: stretch; }
@media (min-width: 960px) { .closing__action:has(.order-box) { position: sticky; top: calc(var(--header-h) + 3.5rem); align-self: start; justify-items: stretch; } }

/* Before the plan: the next 48 hours, what to prepare */
.next48 { padding: clamp(1.4rem, 1rem + 1.5vw, 2.25rem); border: 1px solid var(--hair); border-radius: var(--radius); background: var(--surface); }
.next48 .plan-sub { margin-bottom: 1.75rem; }
.next48 .path--numbered { --node: 40px; --path-gap: 2rem; }
.next48 .path--numbered .path__title { font-size: var(--fs-h4); }
.next48 .path__text { font-size: 1rem; line-height: 1.55; }
.watch__note { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); max-width: 44rem; }
.prep__lead { margin-top: 1.25rem; }
.prep__list { gap: 1rem; }
.prep { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .prep { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.prep .checks li { padding-bottom: .7rem; border-bottom: 1px solid var(--hair); }
.prep .checks li:last-child { border-bottom: 0; padding-bottom: 0; }
.prep .checks strong { display: block; font-weight: 650; }
.prep .checks span { color: var(--fg-2); font-size: 1rem; }

.watch { display: grid; gap: clamp(3rem, 2rem + 3vw, 4.5rem); }
.watch__item { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
@media (min-width: 960px) { .watch__item { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; } }
@media (min-width: 960px) { .watch__item:nth-child(even) > :first-child { order: 2; } }
.watch__item h3 { font: 700 clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem)/1.06 var(--f-display); letter-spacing: -.022em; text-wrap: balance; }
.watch__item .checks { margin-top: 1.25rem; }
.watch__item p { margin-top: 1rem; color: var(--fg-2); max-width: 46ch; }
.watch__item:has(.video[hidden]) { display: none; }

/* ==========================================================================
   5. Motion start states (only under .js, removed by .is-static)
   ========================================================================== */
.js:not(.is-static) .loader li { transition: color .35s ease; }
@media (prefers-reduced-motion: reduce) {
  .quiz__dot { transition: none; }
}

/* Payment choice after »Potrjujem in naročam« (assets/narocilo.js) */
.placilo-odprto, .placilo-odprto body { overflow: hidden; }
.placilo {
  position: fixed; inset: 0; z-index: 130;
  display: grid; place-items: center;
  padding: 16px;
  background: rgba(20, 33, 61, .62);
}
.placilo[hidden] { display: none; }
.placilo__box {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: clamp(1.4rem, 1rem + 2vw, 2.25rem);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  --fg: var(--ink); --fg-2: var(--muted); --bg: var(--paper); --surface: var(--white);
}
@media (prefers-reduced-motion: no-preference) {
  .placilo:not([hidden]) { animation: fade-in .3s ease; }
  .placilo:not([hidden]) .placilo__box { animation: pop-in .5s var(--ease-out); }
}
.placilo__zapri {
  position: absolute; top: .5rem; right: .5rem;
  width: 44px; height: 44px; border: 0; border-radius: var(--pill);
  background: none; color: var(--ink); font: 400 1.75rem/1 var(--f-sans); cursor: pointer;
}
.placilo__zapri:hover { background: var(--paper-2); }
.placilo__paket { margin-bottom: .5rem; }
.placilo__naslov { margin-bottom: 1.25rem; padding-right: 2.5rem; font: 700 clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem)/1.05 var(--f-display); letter-spacing: -.022em; }
.placilo__izbira { display: grid; gap: .75rem; }
.placilo__moznost {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: baseline;
  width: 100%; padding: 1rem 1.15rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); color: var(--ink);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  transition: border-color .2s, transform .3s var(--ease-out);
}
.placilo__moznost:hover { border-color: var(--ink); }
.placilo__moznost:active { transform: translateY(1px); }
.placilo__moznost:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.placilo__moznost-naslov { font: 650 1.125rem/1.25 var(--f-display); }
.placilo__moznost-znesek { font: 700 1.125rem/1.25 var(--f-sans); white-space: nowrap; }
.placilo__moznost-opis { grid-column: 1 / -1; color: var(--muted); font-size: .9375rem; line-height: 1.45; }
.placilo__obrazec { gap: .9rem; }
.placilo__povzetek { margin: 0; color: var(--muted); }
.placilo__vrsta { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .75rem; }
@media (max-width: 420px) { .placilo__vrsta { grid-template-columns: 1fr; } }
.placilo__neobvezno { font-weight: 400; color: var(--muted); }
.placilo__gumbi { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.placilo__nazaj { min-height: 44px; padding: 0 .25rem; border: 0; background: none; color: var(--muted); font: 600 1rem/1 var(--f-sans); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.placilo__nazaj:hover { color: var(--ink); }
.placilo__koncano { display: grid; gap: 1rem; }
.placilo__koncano p { margin: 0; max-width: 52ch; }
.placilo__podatki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.25rem; margin: 0; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); }
.placilo__podatki dt { color: var(--muted); font-size: .875rem; }
.placilo__podatki dd { margin: 0; font-weight: 700; }

/* Value with the price struck through (owner, 7. 11. 2026) */
.contents-card__value s { text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.contents-card__value strong { margin-left: .35rem; color: var(--fg); font: 800 1.15rem/1 var(--f-display); }
.quiz__promise { margin: 0 0 1.1rem; color: var(--fg-2); font-size: .875rem; font-weight: 600; }
.quiz__promise s { text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.quiz__promise strong { color: var(--fg); }
@media (min-width: 1000px) { .quiz__promise { display: none; } }