/* Generated by scripts/build-v2-css.mjs from html-prototype/v2/css. Scoped to .v2. */
/* engagement models: layout tweaks only. Shared pieces live in css/core.css and css/components.css. */
.v2 .plan__img { aspect-ratio: 4 / 3; }
.v2 .ct-pad { padding: 16px 20px; }
.v2 .ct-lead { max-width: 680px; margin: 18px auto 0; }
.v2 .ct-spot-c { display: block; margin: 0 auto 18px; }
.v2 .ct-center { text-align: center; margin-top: 40px; }
.v2 .em-feat .feat__g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .v2 .em-feat .feat__g { grid-template-columns: minmax(0, 1fr); }
}

/* Engagement models: live-only rules (the approved prototype has no equivalent). */
.v2 .em-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }
.v2 .plan--pop { padding-top: 30px; }
.v2 .plan--pop .plan__ribbon { position: relative; left: auto; right: auto; top: auto; margin: -30px -28px 22px; padding: 12px 28px; border-radius: 16px 16px 0 0; font-size: 14px; line-height: 1.45; }
.v2 #models-comparison .cmp thead th strong, .v2 #models-comparison .cmp thead th span { display: block; }
.v2 #models-comparison .cmp thead th span { font-weight: 400; font-size: 14px; color: var(--slate); margin-top: 6px; }

/* Hero band: the picture is shown whole with no coloured band behind it */
.v2 .band--clear { background: transparent; padding: 0; gap: 40px; }
.v2 .band--clear .media { grid-column: auto; width: 100%; height: auto; max-height: none; object-fit: contain; border-radius: 28px; }
.v2 .band--clear .band__char { top: -34px; right: 8px; }

/* Engagement models, round two: model tabs with a detail panel, tinted factor cards, alternating start flow */
.v2 .em-seg { margin: 40px auto 36px; }
.v2 .em-model { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 20px; }
.v2 .em-model.in { animation: v2-scIn .5s var(--ease) both; }
.v2 .em-model__side { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 36px; border-radius: 32px; overflow: hidden; }
.v2 .em-model__ribbon { position: absolute; right: 20px; top: 20px; font-size: 13px; padding: 5px 12px; border-radius: 99px; background: var(--black); color: #fff; }
.v2 .em-model__ico { width: 150px; height: 150px; border-radius: 40px; object-fit: cover; background: #fff; padding: 8px; box-shadow: 0 14px 34px rgba(20, 20, 60, .16); animation: v2-bob 7s ease-in-out infinite; }
.v2 .em-model__side h3 { margin: 10px 0 0; font-size: clamp(26px, 2.6vw, 36px); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.v2 .em-model__side p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink); }
.v2 .em-model__side .btn { margin-top: auto; }
.v2 .em-model__body { display: grid; gap: 16px; align-content: start; }
.v2 .em-model__lead { padding: 28px 30px; border-radius: 28px; background: var(--cloud); }
.v2 .em-model__lead .prose p, .v2 .em-model__lead p { margin: 0 0 10px; font-size: 17px; line-height: 1.65; color: var(--black); }
.v2 .em-model__lead .prose p:last-child { margin-bottom: 0; }
.v2 .em-model__k { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--violet-strong); margin-bottom: 10px; }
.v2 .em-model__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.v2 .em-fact { padding: 22px 24px; border-radius: 24px; background: var(--snow); border: 1px solid var(--line); animation: v2-scIn .5s var(--ease) both; }
.v2 .em-fact p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--slate); overflow-wrap: anywhere; }
.v2 .em-fact:last-child:nth-child(odd) { grid-column: span 2; }
.v2 .em-compare { margin-top: 32px; border-radius: 24px; border: 1px solid var(--line); background: var(--snow); overflow: hidden; }
.v2 .em-compare > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; padding: 20px 26px; font-size: 18px; list-style: none; }
.v2 .em-compare > summary::-webkit-details-marker { display: none; }
.v2 .em-compare > summary svg { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.v2 .em-compare[open] > summary svg { transform: rotate(180deg); }
.v2 .em-compare .cmp__wrap { padding: 0 8px 8px; }

.v2 .em-factors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 12px; }
.v2 .em-factor { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 6px 22px; align-items: start; padding: 28px; border-radius: 30px; transition: transform .4s var(--ease), box-shadow .4s var(--ease), opacity .8s var(--ease); }
.v2 .em-factor:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }
.v2 .em-factor__ico { grid-row: span 2; width: 84px; height: 84px; border-radius: 24px; object-fit: cover; background: #fff; padding: 6px; box-shadow: 0 8px 22px rgba(20, 20, 60, .12); }
.v2 .em-factor h3 { margin: 4px 0 0; font-size: 20px; font-weight: 600; line-height: 1.3; }
.v2 .em-factor p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }

.v2 .em-trig { display: flex; align-items: center; gap: 12px; width: fit-content; margin: 32px auto 0; padding: 10px 20px 10px 10px; border-radius: 99px; background: var(--snow); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 16px; }
.v2 .em-trig .wf__bolt { width: 34px; height: 34px; border-radius: 50%; background: var(--s-done); color: #fff; display: grid; place-items: center; }
.v2 .em-trig .wf__bolt svg, .v2 .em-trig > svg { width: 17px; height: 17px; }
.v2 .em-wf { margin-top: 28px; }

@media (max-width: 960px) {
  .v2 .em-model { grid-template-columns: minmax(0, 1fr); }
  .v2 .em-model__side { padding: 28px; }
  .v2 .em-model__ico { width: 110px; height: 110px; }
  .v2 .em-factors { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .v2 .em-model__facts { grid-template-columns: minmax(0, 1fr); }
  .v2 .em-fact:last-child:nth-child(odd) { grid-column: auto; }
  .v2 .em-factor { grid-template-columns: minmax(0, 1fr); }
  .v2 .em-factor__ico { grid-row: auto; width: 64px; height: 64px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) { .v2 .em-model__ico, .v2 .em-model.in, .v2 .em-fact { animation: none; } }
.v2 .em-model[hidden] { display: none; }