/* ============================================================
   2.4 Preise - page styles (spec: 2.4-preise.md)
   Only what main.css doesn't cover; all values from tokens.css.
   Shared blocks reused as-is: .plan-card, .faq-item, .cta-band,
   .reassure-chips, .section, .container--narrow.
   ============================================================ */

/* ── Hero: dark band, text left and building-block visual right
      from desktop, stacked and centered below ──────────────────── */
.price-hero {
    padding-block: var(--space-2xl);
    text-align: center;
}
.price-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.price-hero__eyebrow { margin-bottom: var(--space-md); }
.price-hero__headline { margin-bottom: var(--space-sm); }
.price-hero__sub { font-size: var(--text-lg); color: var(--ink-inverse-muted); margin-bottom: var(--space-lg); }
.price-hero .reassure-chips { justify-content: center; }

@media (min-width: 1024px) {
    .price-hero { padding-block: var(--space-3xl) var(--space-2xl); text-align: left; }
    .price-hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-2xl); }
    .price-hero .reassure-chips,
    .price-hero .price-hero__actions { justify-content: flex-start; }
}

/* Decorative building-block stack (aria-hidden). Static default is the final
   state. JS adds .is-armed (hidden start) then .is-playing (one-shot run):
   the blocks drop onto each other, the badge closes the offer. */
.bk { position: relative; width: 100%; max-width: 380px; margin-inline: auto; padding-top: var(--space-md); }
.bk__stack { display: flex; flex-direction: column; gap: var(--space-3xs); }
.bk__block {
    position: relative;
    display: flex; align-items: center; gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--surface-0); color: var(--ink-900);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    text-align: left;
}
.bk__block--live { border-radius: var(--radius-md) var(--radius-md) var(--radius-sm) var(--radius-sm); }
.bk__block--managed { border-radius: var(--radius-sm); }
.bk__block--platform { border-radius: var(--radius-sm) var(--radius-sm) var(--radius-md) var(--radius-md); }
.bk__name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.bk__badge {
    position: absolute; right: calc(-1 * var(--space-sm)); bottom: calc(-1 * var(--space-md));
    display: inline-flex; align-items: center; gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-md);
    background: var(--blue-700); color: #fff; border: 1px solid var(--cyan-300); border-radius: var(--radius-full);
    font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
    box-shadow: var(--shadow-md);
}
@media (max-width: 420px) {
    .bk__badge { right: 0; }
}
.bk.is-armed .bk__block, .bk.is-armed .bk__badge { opacity: 0; }
.bk.is-playing .bk__block { animation: bk-drop .6s cubic-bezier(.3, 1.4, .5, 1) both; }
.bk.is-playing .bk__block--platform { animation-delay: .2s; }
.bk.is-playing .bk__block--managed { animation-delay: 1s; }
.bk.is-playing .bk__block--live { animation-delay: 1.8s; }
.bk.is-playing .bk__badge { animation: bk-pop .5s cubic-bezier(.3, 1.6, .5, 1) 2.6s both; }
@keyframes bk-drop {
    from { opacity: 0; transform: translateY(-28px); }
    to { opacity: 1; transform: none; }
}
@keyframes bk-pop {
    from { opacity: 0; transform: scale(.4); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .bk .bk__block, .bk .bk__badge { opacity: 1; transform: none; animation: none; }
}

/* ── Building blocks: three plan cards side by side ────────── */
.price-plans__sub {
    color: var(--ink-600);
    text-align: center;
    max-width: var(--container-narrow);
    margin: calc(-1 * var(--space-lg)) auto var(--space-xl); /* tuck under .section__heading's space-xl */
}
.price-plans__grid { display: grid; gap: var(--space-lg); align-items: stretch; }
@media (min-width: 1024px) {
    .price-plans__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* trio cards are a third as wide as the old solo card - tighter padding,
   flex column so CTAs and notes land on one line across the row */
.price-plans__grid .plan-card { display: flex; flex-direction: column; padding: var(--space-xl); }
.price-plans__grid .plan-card__features { flex-grow: 1; font-size: var(--text-sm); }
.price-plans__grid .plan-card__reframe { margin-top: var(--space-2xs); }

/* ── Topic coverage: tiles with a round category thumbnail (page bg;
      the reframe band below is the white one - keep the 50/0 alternation) ── */
.price-topics { text-align: center; }
.price-topics__sub {
    color: var(--ink-600);
    margin: calc(-1 * var(--space-lg)) auto var(--space-lg);
}
.price-topics__list {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm);
}
@media (min-width: 768px) {
    .price-topics__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
}
.price-topics__tile {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-xs);
    padding: var(--space-md) var(--space-sm);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-md);
    background: var(--surface-0);
}
.price-topics__thumb {
    display: grid; place-items: center; flex: none;
    width: 80px; height: 80px; /* raw px: round thumbnail */
    border-radius: var(--radius-full); overflow: hidden;
    background: var(--blue-100);
    box-shadow: var(--shadow-md);
}
.price-topics__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.price-topics__label { font-size: var(--text-sm); font-weight: 600; }

/* ── Why-demo reframe: quiet centered band ─────────────────── */
.price-reframe { background: var(--surface-0); text-align: center; }
.price-reframe h2 { margin-bottom: var(--space-sm); }
.price-reframe p { color: var(--ink-600); }

/* ── Hero actions + page-specific reassurance line ─────────── */
.price-hero__actions {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

/* ── Which block fits: four situation tiles, plain links ───── */
.price-guide { background: var(--surface-0); }
.price-guide__sub {
    color: var(--ink-600);
    text-align: center;
    max-width: var(--container-narrow);
    margin: calc(-1 * var(--space-lg)) auto var(--space-xl);
}
.price-guide__grid {
    list-style: none; padding: 0;
    display: grid; gap: var(--space-md);
}
@media (min-width: 640px) {
    .price-guide__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .price-guide__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.price-guide__tile {
    display: flex; flex-direction: column;
    padding: var(--space-lg);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-lg, var(--radius-md));
    background: var(--surface-50);
}
.price-guide__icon { margin-bottom: var(--space-md); align-self: flex-start; }
.price-guide__img { display: block; width: 100%; max-width: 160px; height: auto; aspect-ratio: 1; margin-bottom: var(--space-md); border-radius: var(--radius-md); object-fit: cover; }
.price-guide__title { font-size: var(--text-lg); margin-bottom: var(--space-xs); }
.price-guide__text { color: var(--ink-600); font-size: var(--text-sm); flex-grow: 1; margin-bottom: var(--space-md); }
.price-guide__links { display: flex; flex-direction: column; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 600; margin: 0; }

.price-plans__combine {
    text-align: center;
    color: var(--ink-600);
    margin-top: var(--space-xl);
}

/* ── Who does what: table from tablet up, stacked below ────── */
.price-compare { background: var(--surface-0); }
.price-compare__sub {
    color: var(--ink-600);
    text-align: center;
    max-width: var(--container-narrow);
    margin: calc(-1 * var(--space-lg)) auto var(--space-xl);
}
.price-compare__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.price-compare__table th,
.price-compare__table td {
    padding: var(--space-md);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line-200);
}
.price-compare__table thead th { font-size: var(--text-lg); border-bottom-width: 2px; }
.price-compare__table tbody th { width: 16%; font-weight: 600; }
.price-compare__table tbody tr:nth-child(odd) { background: var(--surface-50); }
@media (max-width: 767px) {
    .price-compare__table,
    .price-compare__table tbody,
    .price-compare__table tr,
    .price-compare__table th,
    .price-compare__table td { display: block; width: auto; }
    .price-compare__table tbody th { width: auto; }
    .price-compare__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .price-compare__table tbody tr {
        margin-bottom: var(--space-md);
        border: 1px solid var(--line-200);
        border-radius: var(--radius-md);
        overflow: hidden;
    }
    .price-compare__table tbody th { background: var(--surface-100, var(--surface-50)); border-bottom: 1px solid var(--line-200); }
    .price-compare__table td { border-bottom: 0; padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
    .price-compare__table td::before {
        content: attr(data-block);
        display: block;
        font-size: var(--text-sm); font-weight: 600; color: var(--ink-600);
    }
}

/* ── Topics: catalog link under the chips ──────────────────── */
.price-topics__more { margin-top: var(--space-lg); font-weight: 600; }

/* ── Process: four numbered steps ──────────────────────────── */
.price-steps { background: var(--surface-0); }
/* list itself: shared steps component (main.css) */

/* ── Trust: shared strip, then hosting line and links ──────── */
.price-trust { border-top: 1px solid var(--line-200); }
.price-trust__facts { padding-block: var(--space-xl); text-align: center; }
.price-trust__facts p { color: var(--ink-600); margin-bottom: var(--space-sm); }
.price-trust__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs) var(--space-lg); font-weight: 600; margin: 0; }

/* ── Entry package: one compact highlighted card, text left and
      fact rows with icon circles right from tablet ────────────── */
.price-entry { background: var(--surface-0); padding-block: var(--space-xl); }
.price-entry__card {
    display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-2xl);
    padding: var(--space-xl);
    border: 2px solid var(--ink-900);
    border-radius: var(--radius-lg, var(--radius-md));
    background: var(--surface-50);
}
.price-entry__eyebrow { font-size: var(--text-sm); font-weight: 700; color: var(--ink-600); margin-bottom: var(--space-2xs); }
.price-entry__heading { margin-bottom: var(--space-xs); }
.price-entry__text { color: var(--ink-600); max-width: 60ch; }
.price-entry__card .btn { justify-self: start; align-self: start; margin-top: var(--space-md); }
.price-entry__facts {
    list-style: none; padding: 0;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs);
    margin: var(--space-md) 0;
}
.entry-fact {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-md);
    background: var(--surface-0);
}
.entry-fact__body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.entry-fact__main { font-weight: 600; }
.entry-fact--stat .entry-fact__main { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: 1.2; }
.entry-fact__sub { font-size: var(--text-sm); color: var(--ink-600); }
.entry-fact__tag {
    margin-bottom: var(--space-3xs); padding: 0 var(--space-xs);
    background: var(--blue-100); color: var(--blue-700); border-radius: var(--radius-full);
    font-size: var(--text-xs); font-weight: 700;
}
@media (min-width: 900px) {
    .price-entry__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
    .price-entry__card > * { grid-column: 1; }
    .price-entry__card > .price-entry__facts { grid-column: 2; grid-row: 1 / span 5; align-self: center; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .entry-fact--item { grid-column: 1 / -1; }
}

/* ── Plan card visual headers (decorative, aria-hidden) ────── */
.plan-visual {
    position: relative;
    height: 150px; /* raw px: equal header height across the three cards */
    margin-bottom: var(--space-md);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--blue-100);
}
.plan-visual--shot { border: 1px solid var(--line-200); background: var(--surface-0); }
.plan-visual--shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* managed: a phishing mail and a call side by side */
.plan-visual--managed { display: flex; align-items: center; justify-content: center; gap: var(--space-md); padding: var(--space-sm); }
.mini-mail {
    display: flex; align-items: center; gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--surface-0); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
    transform: rotate(-3deg);
}
.mini-mail__lines { display: flex; flex-direction: column; gap: var(--space-2xs); width: 44px; }
.mini-mail__lines span { display: block; height: 6px; border-radius: var(--radius-full); background: var(--line-200); }
.mini-mail__lines span:nth-child(2) { width: 75%; }
.mini-mail__lines span:nth-child(3) { width: 50%; }
.mini-phone {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs);
    width: 84px; padding: var(--space-xs) var(--space-xs) var(--space-sm);
    background: var(--blue-900); color: var(--ink-inverse);
    border: 3px solid var(--navy-950); border-radius: 18px; /* raw px: device bezel */
    box-shadow: var(--shadow-md);
}
.mini-phone__avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--blue-700); }
.mini-phone__avatar .icon { width: 18px; height: 18px; }
.mini-phone__wave { display: block; width: 100%; height: auto; fill: var(--cyan-300); }
.mini-phone__buttons { display: flex; gap: var(--space-sm); }
.mini-phone__btn { display: block; width: 16px; height: 16px; border-radius: var(--radius-full); }
.mini-phone__btn--decline { background: var(--error); }
.mini-phone__btn--accept { background: var(--accent-500); }

/* live: a video frame with the presenter, a mask badge for the deepfake demo */
.plan-visual--live { display: flex; align-items: center; justify-content: center; padding: var(--space-sm); }
.mini-stage {
    position: relative; width: 70%; max-width: 220px; aspect-ratio: 16 / 10;
    display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
    background: var(--blue-900); border: 3px solid var(--navy-950); border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.mini-stage__presenter { display: block; width: 40%; height: auto; margin-right: 25%; fill: var(--blue-700); }
.mini-stage__live {
    position: absolute; top: var(--space-xs); left: var(--space-xs);
    padding: 0 var(--space-xs); background: var(--error); color: #fff; border-radius: var(--radius-sm);
    font-size: var(--text-xs); font-weight: 700; line-height: 1.5;
}
/* mask badge sits fully inside the frame, opposite the presenter */
.mini-stage__mask { position: absolute; right: var(--space-sm); bottom: var(--space-sm); }