/* Claims center (/claims/, claims/landing.html). Green and white slides alternate;
   cards keep dark text on a light surface; every price comes from the calculator. */

.cc { --cc-line: rgb(255 255 255 / .16); --cc-soft: rgb(255 255 255 / .08); overflow-x: clip; }
.cc .jn-slide--white .jn-section-heading h2 { color: var(--jn-green); }
.cc .jn-section-heading { margin-bottom: 2.25rem; }
.cc .jn-section-heading h2 { max-width: 46rem; letter-spacing: -.02em; }
.cc h3 { font-size: 1.0625rem; line-height: 1.35; }
.cc-intro { max-width: 46rem; margin-top: 1rem; font-size: var(--jn-text-lead); line-height: 1.75; color: var(--jn-muted); }
.cc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.cc-button--ghost { color: #fff; border-color: rgb(255 255 255 / .35); background: transparent; }
.cc-button--ghost:hover { border-color: var(--jn-orange); color: #fff; }
.cc-link { color: var(--jn-orange); font-size: .9375rem; font-weight: 700; text-decoration: none; }
.cc-link:hover { text-decoration: underline; }
.cc-note { margin-top: 1.75rem; padding: 1rem 1.25rem; border-left: 3px solid var(--jn-orange); border-radius: var(--jn-radius-sm); background: var(--jn-cream); font-size: .9375rem; line-height: 1.65; color: #444; }
.cc-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .8rem; background: rgb(1 60 53 / .07); color: var(--jn-green); }
.cc-icon svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cc-icon--accent { background: rgb(255 111 63 / .12); color: var(--jn-orange-dark); }

/* Hero */
.cc-hero { display: flex; align-items: center; }
.cc-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 25rem); gap: 4rem; align-items: center; }
.cc-hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 1.5rem; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .7); }
.cc-badge { padding: .4rem .85rem; border-radius: .4rem; background: var(--jn-orange); color: #fff; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; }
.cc-hero h1 { max-width: 40rem; font-size: clamp(1.75rem, 3.2vw, 2.25rem); line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.cc-hero h1 span { color: var(--jn-orange); }
.cc-hero__lead { max-width: 38rem; margin-top: 1rem; font-size: clamp(.9375rem, 1.6vw, 1.125rem); line-height: 1.75; color: rgb(255 255 255 / .78); }
.cc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; max-width: 40rem; margin: 2rem 0; }
.cc-stats div { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; border: 1px solid var(--cc-line); border-radius: var(--jn-radius-sm); background: var(--cc-soft); }
.cc-stats dt { font-size: 1.375rem; font-weight: 700; line-height: 1.15; color: #fff; white-space: nowrap; }
.cc-stats dd { margin: 0; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; color: rgb(255 255 255 / .6); }
.cc-hero__note { margin-top: 1rem; font-size: .8125rem; color: rgb(255 255 255 / .6); }
.cc-hero__visual { position: relative; }
.cc-hero__visual .cc-specimen { position: relative; z-index: 1; }
.cc-molecule { position: absolute; z-index: 0; height: auto; }
.cc-molecule--top { top: -5.6rem; right: -1rem; width: 9rem; }
.cc-molecule--bottom { bottom: -3rem; left: -3.4rem; width: 7.5rem; }
.cc-specimen { --jn-text: #111; --jn-muted: #555; padding: 1.75rem; border-radius: var(--jn-radius); background: #fff; color: #111; box-shadow: 0 24px 60px rgb(0 0 0 / .22); }
.cc-specimen__flow { margin: 0 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--jn-border); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--jn-green); }
.cc-specimen__flow span { margin-inline: .3rem; color: var(--jn-orange); }
.cc-specimen__label { font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--jn-orange-dark); }
.cc-specimen__q { margin: .5rem 0 1.25rem; font-size: 1.1875rem; font-weight: 700; line-height: 1.4; color: var(--jn-green); }
.cc-specimen dl { display: grid; margin: 0; border-top: 1px solid var(--jn-border); }
.cc-specimen dl div { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--jn-border); font-size: .875rem; }
.cc-specimen dt { color: var(--jn-muted); }
.cc-specimen dd { margin: 0; font-weight: 600; }
.cc-specimen__foot { margin-top: 1rem; font-size: .75rem; color: var(--jn-muted); }

/* Cards (audience, methods) */
.cc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.cc-card { --jn-text: #111; --jn-muted: #555; display: flex; flex-direction: column; gap: .6rem; padding: 1.75rem; border: 1px solid var(--jn-border); border-radius: var(--jn-radius); background: var(--jn-cream); color: #111; transition: translate .3s ease, box-shadow .3s ease, border-color .2s ease; }
.jn-slide--green .cc-card { border-color: transparent; background: #fff; }
.cc-card:hover { translate: 0 -4px; border-color: var(--jn-orange); box-shadow: 0 18px 40px rgb(1 60 53 / .12); }
.cc-card .cc-icon { margin-bottom: .4rem; }
.cc-card__label { font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--jn-orange-dark); }
.cc-card h3 { color: var(--jn-green); }
.cc-card p { font-size: .9375rem; line-height: 1.65; color: #444; }
.cc-card q { margin-top: auto; padding-top: .9rem; border-top: 1px dashed var(--jn-border); font-size: .875rem; font-style: italic; font-weight: 600; color: var(--jn-green); }
.cc-limit { --jn-text: #111; display: flex; gap: 1.25rem; align-items: flex-start; margin-top: 1rem; padding: 1.5rem 1.75rem; border-left: 3px solid var(--jn-orange); border-radius: var(--jn-radius); background: #fff; color: #111; }
.cc-limit .cc-icon { flex-shrink: 0; }
.cc-limit h3 { margin-bottom: .4rem; color: var(--jn-green); }
.cc-limit p { font-size: .9375rem; line-height: 1.65; color: #444; }

/* Results */
.cc-results { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; align-items: center; }
.cc-results .jn-section-heading { margin-bottom: 1.25rem; }
.cc-results__lead { max-width: 30rem; margin-bottom: 1.5rem; font-size: var(--jn-text-lead); line-height: 1.75; color: rgb(255 255 255 / .78); }
.cc-deliverables { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.cc-deliverables li { display: flex; gap: 1.25rem; padding: 1.25rem 1.5rem; border: 1px solid var(--cc-line); border-radius: var(--jn-radius-sm); background: var(--cc-soft); }
.cc-deliverables li > span { flex-shrink: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--jn-orange); }
.cc-deliverables h3 { color: #fff; }
.cc-deliverables p { margin-top: .3rem; font-size: .9375rem; line-height: 1.6; color: rgb(255 255 255 / .72); }

/* Plans */
.cc-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.cc-plan { display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem; border: 1px solid var(--jn-border); border-radius: var(--jn-radius); background: var(--jn-cream); transition: translate .3s ease, box-shadow .3s ease, border-color .2s ease; }
.cc-plan:hover { translate: 0 -4px; border-color: var(--jn-orange); box-shadow: 0 18px 40px rgb(1 60 53 / .12); }
.cc-plan--accent { border: 2px solid var(--jn-orange); background: #fff; }
.cc-plan h3 { font-size: 1.25rem; color: var(--jn-green); }
.cc-plan p { flex: 1; font-size: .9375rem; line-height: 1.65; color: #444; }
.cc-plan__price { display: grid; gap: .25rem; padding-top: 1rem; border-top: 1px solid var(--jn-border); }
.cc-plan__price strong { font-size: 1.5rem; line-height: 1.2; color: var(--jn-green); }
.cc-plan__price span { font-size: .8125rem; color: var(--jn-muted); }
.cc-plan .jn-button { align-self: flex-start; margin-top: .25rem; }

/* First step */
.cc-start { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.cc-start__option { display: grid; grid-template-columns: 1fr auto; gap: 1rem 1.5rem; align-items: center; padding: 1.5rem 1.75rem; border: 1px solid var(--cc-line); border-radius: var(--jn-radius); background: var(--cc-soft); }
.cc-start__option h3 { color: #fff; }
.cc-start__option p { margin-top: .35rem; font-size: .9375rem; line-height: 1.6; color: rgb(255 255 255 / .72); }
.cc-start__price { display: grid; justify-items: end; gap: .15rem; text-align: right; }
.cc-start__price strong { font-size: 1.375rem; color: #fff; white-space: nowrap; }
.cc-start__price span { font-size: .8125rem; color: rgb(255 255 255 / .6); }
.cc-start__option .jn-button { grid-column: 1 / -1; justify-self: start; }

/* Estimate */
.cc-estimate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); gap: 2rem; align-items: start; }
.cc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.75rem; border: 1px solid var(--jn-border); border-radius: var(--jn-radius); background: var(--jn-cream); }
.cc-field { display: grid; align-content: start; gap: .4rem; min-width: 0; }
.cc-field[hidden] { display: none; }
.cc-field--full { grid-column: 1 / -1; }
.cc-field > label { font-size: .8125rem; font-weight: 600; color: #222; }
.cc-field :is(input:not([type=checkbox]), select, textarea) { width: 100%; min-width: 0; min-height: 2.75rem; padding: .65rem .75rem; border: 1px solid var(--jn-border); border-radius: .5rem; background: #fff; color: #111; font: inherit; font-size: .9375rem; }
.cc-field textarea { min-height: 6rem; resize: vertical; }
.cc-field :is(input, select, textarea):focus-visible { outline: 2px solid var(--jn-orange); outline-offset: 1px; border-color: var(--jn-orange); }
.cc-field .errorlist, .cc-alert { margin: 0; padding: 0; list-style: none; color: #a52d17; font-size: .8125rem; }
.cc-recalc { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.cc-recalc p, .cc-form__hint { font-size: .8125rem; color: var(--jn-muted); }
.cc-contact { grid-column: 1 / -1; border: 1px solid var(--jn-border); border-radius: var(--jn-radius-sm); background: #fff; }
.cc-contact > summary { padding: 1rem 1.25rem; font-size: .9375rem; font-weight: 700; color: var(--jn-green); cursor: pointer; }
.cc-contact__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 0 1.25rem 1.25rem; }
.cc-consent { display: flex; gap: .75rem; align-items: flex-start; font-size: .8125rem; line-height: 1.6; }
.cc-consent input { flex-shrink: 0; width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--jn-orange); }
.cc-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cc-summary { position: sticky; top: calc(var(--jn-header-height) + 1rem); display: grid; gap: .75rem; padding: 1.75rem; border-radius: var(--jn-radius); background: var(--jn-green); color: #fff; box-shadow: 0 24px 60px rgb(1 60 53 / .2); }
.cc-summary .jn-eyebrow { color: var(--jn-orange); }
.cc-summary__total { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.1; }
.cc-summary__uah { min-height: 1.2em; font-size: .875rem; color: rgb(255 255 255 / .7); }
.cc-summary__lines { display: grid; gap: .1rem; }
.cc-summary__lines div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--cc-line); font-size: .875rem; color: rgb(255 255 255 / .8); }
.cc-summary__lines span:last-child { font-weight: 700; color: #fff; white-space: nowrap; }
.cc-summary__note, .cc-summary__direct { font-size: .8125rem; line-height: 1.6; color: rgb(255 255 255 / .65); }
.cc-summary__direct a { color: #fff; font-weight: 700; white-space: nowrap; }
.cc-summary .jn-button { width: 100%; }
.cc-msg { display: none; font-size: .875rem; font-weight: 600; white-space: pre-line; }
.cc-msg.show { display: block; }

/* FAQ */
.cc-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
.cc-faq__aside .jn-section-heading { margin-bottom: 0; }
.cc-faq__aside .cc-intro { color: rgb(255 255 255 / .72); }
.cc-faq__aside .cc-actions { margin-top: 1.5rem; }
.cc-faq__list { display: grid; gap: .75rem; }
.cc-faq__item { --jn-text: #111; border-radius: var(--jn-radius-sm); background: #fff; color: #111; }
.cc-faq__item summary { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.35rem; font-weight: 700; line-height: 1.45; color: var(--jn-green); cursor: pointer; list-style: none; }
.cc-faq__item summary::-webkit-details-marker { display: none; }
.cc-faq__item summary::after { content: "+"; flex-shrink: 0; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-left: auto; border-radius: 50%; background: rgb(1 60 53 / .07); color: var(--jn-orange-dark); font-size: 1.1rem; transition: rotate .3s ease, background .2s, color .2s; }
.cc-faq__item[open] summary::after { rotate: 45deg; background: var(--jn-orange); color: #fff; }
.cc-faq__answer { padding: 0 1.35rem 1.25rem; font-size: .9375rem; line-height: 1.7; color: #444; }
.cc-faq__answer p + p { margin-top: .6rem; }
.cc-faq__answer a { color: var(--jn-orange-dark); font-weight: 600; }

/* Motion: hero entrance; reveals only where scroll timelines exist. system.css turns
   all of it off for reduced motion and on weak devices (.jn-lite). */
@keyframes cc-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.cc-hero__copy > * { animation: cc-in .7s cubic-bezier(.2, .7, .2, 1) both; }
.cc-hero__copy > :nth-child(2) { animation-delay: .08s; }
.cc-hero__copy > :nth-child(3) { animation-delay: .16s; }
.cc-hero__copy > :nth-child(4) { animation-delay: .24s; }
.cc-hero__copy > :nth-child(5) { animation-delay: .32s; }
.cc-hero__copy > :nth-child(6) { animation-delay: .4s; }
.cc-specimen { animation: cc-in 1s cubic-bezier(.2, .7, .2, 1) .3s both; }
@supports (animation-timeline: view()) {
  .cc :is(.cc-card, .cc-limit, .cc-deliverables li, .cc-plan, .cc-start__option, .cc-faq__item) {
    animation: cc-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
  .cc :is(.cc-card, .cc-deliverables li, .cc-plan, .cc-start__option):nth-child(2n) { animation-range: entry 8% entry 63%; }
  .cc :is(.cc-card, .cc-plan):nth-child(3n) { animation-range: entry 16% entry 71%; }
}

/* Responsive */
@media (min-width: 901px) {
  .cc > .cc-hero { min-height: calc(100svh - var(--jn-header-height)); }
}
@media (max-width: 68rem) {
  .cc-estimate { grid-template-columns: minmax(0, 1fr); }
  .cc-summary { position: static; }
}
@media (max-width: 900px) {
  .cc-hero__grid, .cc-results, .cc-faq { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .cc-molecule { display: none; }
  .cc-cards, .cc-plans { grid-template-columns: minmax(0, 1fr); }
  .cc-start { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .cc-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cc-stats div:first-child { grid-column: 1 / -1; }
  .cc-form, .cc-contact__fields { grid-template-columns: minmax(0, 1fr); }
  .cc-form, .cc-summary, .cc-plan, .cc-card, .cc-specimen { padding: 1.5rem 1.25rem; }
  .cc-actions .jn-button, .cc-plan .jn-button, .cc-start__option .jn-button { flex: 1 1 100%; align-self: stretch; justify-self: stretch; text-align: center; }
  .cc-limit { flex-direction: column; padding: 1.5rem 1.25rem; }
  .cc-start__option { grid-template-columns: minmax(0, 1fr); }
  .cc-start__price { justify-items: start; text-align: left; }
}