/* Variant-only styles for hero-ally-v1.
   Linked ONLY by experiments/hero-ally-v1/variant.html — production index.html never
   references this file, so it has zero effect on the live page.
   External file (not an inline <style>) because the page CSP is style-src 'self',
   which blocks inline styles and style="" attributes. */

.variant-hero-ally .hero-bullets { list-style: none; margin: 8px 0 20px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.variant-hero-ally .hero-bullets li { display: flex; gap: 13px; align-items: flex-start; font-size: 1.06rem; line-height: 1.5; color: rgba(255,255,255,.86); }
.variant-hero-ally .hero-bullets strong { color: #fff; font-weight: 680; }
.variant-hero-ally .hero-bullet-icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(227,183,166,.12); border: 1px solid rgba(227,183,166,.35); }
.variant-hero-ally .hero-bullet-icon svg { width: 24px; height: 24px; stroke: var(--rose-light); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.variant-hero-ally .hero-warmline { max-width: 640px; margin: 0 0 16px; color: rgba(255,255,255,.72); font-size: 1rem; line-height: 1.6; }

/* === WhatsApp fidelity: shared tokens ===
   Measured against WhatsApp's current light theme so the desktop phone and the
   mobile fragment read as the same app:
     wallpaper #efeae2 · outgoing #d9fdd3 · incoming #fff · body text #111b21
     meta/timestamp #667781 · read ticks #53bdeb · header chrome #f0f2f5 / #54656f
   Everything below is scoped to .variant-hero-ally, so production index.html —
   which shares styles.css — is untouched. */

/* Compact WhatsApp proof — mobile only (desktop keeps the big phone).
   Same treatment as the phone minus the chrome: reads as a real thread at a
   fraction of the height, so the CTA stays near the fold. */
.variant-hero-ally .hero-mini-chat { display: none; max-width: 420px; margin: 4px 0 22px; padding: 11px 14px 13px; text-align: left; border: 1px solid rgba(25,34,57,.10); border-radius: 14px; background-color: #efeae2; background-image: radial-gradient(rgba(85,91,86,.07) .8px, transparent .8px); background-size: 13px 13px; }
/* Day divider — in flow, centred, like WhatsApp's date chip. */
.variant-hero-ally .hmc-day { width: fit-content; margin: 0 auto 10px; padding: 4px 11px; color: #54656f; background: #fff; border-radius: 7px; box-shadow: 0 1px .5px rgba(11,20,26,.13); font-size: .6rem; font-weight: 500; }
.variant-hero-ally .hero-mini-bubbles { display: flex; flex-direction: column; gap: 9px; }
/* text-align is set on the bubble itself: .hero-copy centres everything on mobile,
   and centred chat text was the main reason this read as "not WhatsApp".
   Bottom padding reserves the row the absolutely-positioned timestamp sits in. */
.variant-hero-ally .hmc-bubble { position: relative; margin: 0; max-width: 85%; padding: 6px 9px 16px; color: #111b21; font-size: .82rem; line-height: 1.35; text-align: left; border-radius: 7.5px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
/* inline-flex + nowrap: the tick is an SVG sibling of the time text, and without
   this the pair wraps onto two lines inside the absolutely-positioned box. */
.variant-hero-ally .hmc-bubble time { position: absolute; right: 8px; bottom: 3px; display: inline-flex; align-items: center; white-space: nowrap; color: #667781; font-size: .56rem; }
/* Tail: solid triangle at the top corner, tail-side corner squared off. */
.variant-hero-ally .hmc-user { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 0; }
.variant-hero-ally .hmc-luna { align-self: flex-start; background: #fff; border-top-left-radius: 0; }
.variant-hero-ally .hmc-user::after { content: ""; position: absolute; top: 0; right: -8px; width: 0; height: 0; border-left: 8px solid #d9fdd3; border-bottom: 11px solid transparent; }
.variant-hero-ally .hmc-luna::after { content: ""; position: absolute; top: 0; left: -8px; width: 0; height: 0; border-right: 8px solid #fff; border-bottom: 11px solid transparent; }
/* Read receipt belongs to outgoing messages only — WhatsApp never ticks an
   incoming bubble, and the scene now opens with one of Luna's. Drawn as two
   overlapping checks rather than "✓✓", which renders as two detached glyphs. */
.variant-hero-ally .hmc-tick { width: 13px; height: 10px; margin-left: 3px; color: #53bdeb; vertical-align: -1px; }

/* === Desktop phone mockup: WhatsApp fidelity pass ===
   styles.css is shared with production index.html, so every correction here is
   an override scoped to .variant-hero-ally rather than an edit to the base rules.
   The phone's 292×590 box is fixed and header(84) + chat(433) + input(49) = 566
   must keep summing to the inner height — heights below are deliberately unchanged. */
.variant-hero-ally .chat-header { padding: 31px 11px 8px; gap: 7px; color: #111b21; background: #f0f2f5; }
.variant-hero-ally .chat-header small { color: #667781; }
.variant-hero-ally .wa-back { display: grid; place-items: center; color: #54656f; }
.variant-hero-ally .wa-actions { display: flex; margin-left: auto; align-items: center; gap: 13px; color: #54656f; }
/* Real chats stack from the bottom, and the date chip rides above the first
   message rather than floating at a fixed offset — hence flex-end and the
   .chat-day override from absolute back into flow. */
.variant-hero-ally .chat-space { padding: 12px 14px 10px; justify-content: flex-end; gap: 9px; overflow: hidden; background-color: #efeae2; background-image: radial-gradient(rgba(85,91,86,.07) .8px, transparent .8px); background-size: 13px 13px; }
.variant-hero-ally .chat-day { position: static; width: fit-content; margin: 0 auto 2px; padding: 4px 11px; color: #54656f; background: #fff; border-radius: 7px; box-shadow: 0 1px .5px rgba(11,20,26,.13); font-size: .56rem; font-weight: 500; transform: none; }
.variant-hero-ally .bubble { max-width: 85%; padding: 6px 9px 16px; color: #111b21; border-radius: 7.5px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.variant-hero-ally .bubble time { right: 8px; bottom: 3px; display: inline-flex; align-items: center; white-space: nowrap; color: #667781; font-size: .5rem; }
.variant-hero-ally .bubble-user { border-top-right-radius: 0; }
.variant-hero-ally .bubble-luna { border-top-left-radius: 0; }
.variant-hero-ally .bubble-user::after { content: ""; position: absolute; top: 0; right: -8px; width: 0; height: 0; border-left: 8px solid #d9fdd3; border-bottom: 11px solid transparent; }
.variant-hero-ally .bubble-luna::after { content: ""; position: absolute; top: 0; left: -8px; width: 0; height: 0; border-right: 8px solid #fff; border-bottom: 11px solid transparent; }
/* Consecutive messages from the same sender: WhatsApp tails only the first of a
   run, rounds the shared corner back, and tightens the gap. The scene has two
   outgoing messages in a row (her reply, then the evening voice note). */
.variant-hero-ally .bubble-user + .bubble-user,
.variant-hero-ally .bubble-luna + .bubble-luna { margin-top: -6px; }
.variant-hero-ally .bubble-user + .bubble-user { border-top-right-radius: 7.5px; }
.variant-hero-ally .bubble-luna + .bubble-luna { border-top-left-radius: 7.5px; }
.variant-hero-ally .bubble-user + .bubble-user::after,
.variant-hero-ally .bubble-luna + .bubble-luna::after { content: none; }
.variant-hero-ally .wa-tick { width: 11px; height: 9px; margin-left: 3px; color: #53bdeb; vertical-align: -1px; }
/* Voice note: duration sits under the waveform, timestamp keeps the bubble's
   bottom-right slot. Height goes auto so both rows fit. */
.variant-hero-ally .voice-bubble { width: 196px; height: auto; padding: 8px 9px 16px; gap: 7px; }
.variant-hero-ally .voice-time { position: absolute; left: 44px; bottom: 3px; color: #667781; font-size: .5rem; }
/* The thread now fills the screen, so the lower float card no longer has empty
   wallpaper to sit on. Push it out past the phone's left edge so it overlaps the
   bezel instead of covering Luna's closing message. Only needed above 760px —
   .phone-stage is hidden below that. */
/* Anchored to the stage centre, not its left edge: the phone is a fixed 292px
   centred in a stage whose width changes with the grid, so an edge-relative
   offset drifts across breakpoints and re-covers the message. translateX puts
   the card's right edge just inside the bezel at every width. */
.variant-hero-ally .float-card-two { left: 50%; right: auto; bottom: 68px; transform: translateX(-100%) translateX(-125px); }

/* Composer: emoji + placeholder pill, mic on the green send affordance. */
.variant-hero-ally .chat-input { padding: 8px 11px; gap: 8px; background: #f0f2f5; }
/* Descendant .chat-input is required, not decorative: the base rule is
   `.chat-input span:first-child` (0,2,1), which outranks a plain
   `.variant-hero-ally .wa-input-pill` (0,2,0) and would keep its width: 195px. */
.variant-hero-ally .chat-input .wa-input-pill { display: flex; flex: 1; align-items: center; gap: 6px; width: auto; padding: 7px 11px; color: #8696a0; background: #fff; border-radius: 18px; }
.variant-hero-ally .wa-mic { display: grid; flex: none; width: 30px; height: 30px; place-items: center; color: #fff; background: #00a884; border-radius: 50%; }

/* Price transparency line above the final CTA (was an inline style before — CSP-blocked). */
.variant-hero-ally .price-transparency { max-width: 600px; margin: 0 auto 26px; color: rgba(255,255,255,.82); font-size: 1.02rem; line-height: 1.55; text-align: center; }
.variant-hero-ally .price-transparency strong { color: #fff; }

@media (max-width: 760px) {
  /* A1: trust microline always clears the Safari bar / home indicator. */
  .variant-hero-ally .hero { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  /* Show compact proof, hide the tall phone so the CTA stays near the fold. */
  .variant-hero-ally .hero-mini-chat { display: block; margin-left: auto; margin-right: auto; }
  .variant-hero-ally .phone-stage { display: none; }
  /* A3: tagline was 9.4:1 already — this is a legibility (size) bump, not contrast. */
  .variant-hero-ally .eyebrow-light { font-size: .82rem; letter-spacing: .14em; }
  .variant-hero-ally .hero-introduction { font-size: clamp(1.25rem, 4.6vw, 1.7rem); }
  /* Bullets/warmline read left-aligned even though the hero centers on mobile. */
  .variant-hero-ally .hero-bullets,
  .variant-hero-ally .hero-warmline { text-align: left; max-width: 460px; margin-left: auto; margin-right: auto; }
  /* A2: full-width opaque sticky bar so it never shows content through/behind it. */
  .variant-hero-ally .mobile-sticky-cta { left: 0; right: 0; bottom: 0; min-height: auto; border-radius: 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 28px rgba(17,27,54,.30); }
  .variant-hero-ally { padding-bottom: 78px; }
  /* Extra readability bump on mobile (partner: hard to read on the phone). */
  html.variant-scale { font-size: 19px; }
}

/* === Brand palette shift (per partner brief): cream + sage + rosegold + anthracite ===
   Scoped token overrides — cascade to the whole variant, zero effect on production.
   --ink/--cream are never used as backgrounds or inverse text (audited), so this only
   recolours text-on-light and light backgrounds. Rosegold (--rose/--gold) and the navy
   hero are intentionally kept as accents/background per the brief. */
.variant-hero-ally {
  --cream: #faf7f2;   /* brief cream (was #fcfaf7) */
  --ink: #4a4a4a;     /* anthracite body/heading text (was near-black navy) */
  --muted: #5f6461;   /* secondary text, anthracite tone — 6:1 on cream */
  --sage: #99afa2;    /* new brand accent */
}
/* Sage as a fill/border accent only (never as small text on light — that's ~2.2:1).
   Decorative left-rules on light sections carry the sage brand colour. */
.variant-hero-ally .empathy blockquote,
.variant-hero-ally .foundation-conclusion { border-left-color: var(--sage); }

/* === Palette clarity: cream (calm narrative) · sage-surface (persuasion moments) · navy (punctuation) ===
   Collapses the three near-identical warm beiges (cashmere/powder/sand) into one clean system,
   so the page reads as distinct chapters instead of one long beige scroll. */
.variant-hero-ally { --sage-surface: #e7eee9; }

/* Cream = the calm, narrative default surface. */
.variant-hero-ally #warum-luna,
.variant-hero-ally #herkunft,
.variant-hero-ally #sicherheit,
.variant-hero-ally #so-gehts,
.variant-hero-ally #faq { background: var(--cream); }

/* Sage = the three persuasion moments: social proof, why-not-free, price. */
.variant-hero-ally #stimmen,
.variant-hero-ally #vergleich,
.variant-hero-ally #preise { background: var(--sage-surface); }

/* Final CTA is its own focused close, set apart from the trust block above it. */
.variant-hero-ally .final-close { border-top: 1px solid rgba(255,255,255,.08); }
.variant-hero-ally .final-close .shell { padding-top: 8px; }

/* Partner feedback: type reads a touch small. Gentle global bump — scales all rem-based text ~9%. */
html.variant-scale { font-size: 18px; }

/* === Type scale follow-through ===
   styles.css pins body to a hard 17px, so the root bump above never reached the
   default reading text — only rem-based rules moved. Switching to 1rem lets body
   copy track .variant-scale (18px desktop / 19px mobile) like everything else.
   Selector is body.variant-hero-ally so it stays variant-only and outranks `body`. */
body.variant-hero-ally { font-size: 1rem; }

/* Benefit-card body copy is the smallest sustained reading text on the page
   (.84rem dark / .9rem light). Bump both toward the ~.95rem the other body copy
   sits at. Both variants are restated here: the base light rule and a bare
   `.variant-hero-ally .benefit-card p` would tie on specificity, and this file
   loads last — so the light card is spelled out explicitly rather than inherited.
   Labels, legal and footnote sizes are deliberately untouched. */
.variant-hero-ally .benefit-card p { font-size: .92rem; }
.variant-hero-ally .benefits-light .benefit-card p { font-size: .96rem; }

/* Comparison section sits on sage; its body text is --muted (a grey-green) → low perceived
   contrast on a green tint. Darken to neutral anthracite so it reads cleanly. */
.variant-hero-ally #vergleich .difference-intro > p:not(.eyebrow),
.variant-hero-ally #vergleich .difference-list p,
.variant-hero-ally #vergleich .difference-cta p { color: var(--ink); }