/* en/en.css — additions on top of the approved prototype styles (en/styles.css, copied verbatim).
   Stage 1 only: the iPhone input zoom fix, the calculating indicator, the free-section block lists. */

/* iOS Safari zooms the page when a focused input has font-size < 16px (prototype: 13px). */
@media (max-width: 800px) {
  .field { font-size: 16px; }
}

/* The result card art: the prototype points at the 2.7 MB PNG (styles.css stays verbatim) —
   the optimized versions from scripts/build-en-art.mjs replace it here. */
.energy-art {
  background-image: url('/en/assets/portrait-light-1536.jpg');
  background-image: url('/en/assets/portrait-light-768.webp');
  background-image: image-set(url('/en/assets/portrait-light-768.avif') type('image/avif'), url('/en/assets/portrait-light-768.webp') type('image/webp'));
}

/* Calculating screen: a hairline that moves (transform only); reduced motion → static line
   via the prototype's global prefers-reduced-motion rule. */
.calc-bar { position: relative; height: 1px; background: var(--line); overflow: hidden; margin-top: 10px; }
.calc-bar span { position: absolute; inset: 0; background: var(--gold); transform: translateX(-100%); animation: calc 1.8s ease-in-out infinite; }
@keyframes calc { 0% { transform: translateX(-100%); } 60% { transform: translateX(0); } 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .calc-bar span { transform: none; opacity: .5; } }

/* Free section: PLUS / MINUS fragments use the prototype list style, block labels keep their rhythm. */
.result-copy .eyebrow { margin: 26px 0 10px; }
.result-copy .eyebrow:first-child { margin-top: 0; }
.result-copy .section-list { margin: 0 0 6px; }
.result-copy .section-list li { color: var(--muted); line-height: 1.7; }
/* Free result (EN_COPY_PACK §5), one reading column: energy name → essence → the full P1 text → CTA →
   a compact share card. Reading scale ported from the editorial prototype (portraitsoul-design/editorial.css:
   16px / 1.75 body, 12–13px meta, hairline separators) in the approved palette and fonts (styles.css tokens:
   #131318 / #e6c487, Playfair Display / Manrope). No new colours, no glow; gold stays on the CTA. */
.flow.result-flow { max-width: 680px; overflow-wrap: break-word; }
.result-head h1 { text-wrap: balance; }
.result-head .sub { font-size: 17px; line-height: 1.65; color: var(--ink); margin-bottom: 0; }
.result-copy { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.result-copy .eyebrow { font-size: 12px; letter-spacing: 1.7px; line-height: 1.6; color: var(--gold); }
.result-copy p, .result-copy .section-list li { font-size: 16px; line-height: 1.75; color: var(--ink); }
.result-copy .intro-copy { color: var(--muted); margin-bottom: 24px; }
.result-copy .keyword-line { font-size: 13px; letter-spacing: 1.2px; color: var(--gold); line-height: 1.7; border-block: 1px solid var(--line); padding: 14px 0; margin: 0 0 24px; }
.result-copy .section-list li { padding: 12px 0 12px 31px; text-indent: -31px; } /* wrapped lines align after the dash */
.result-cta { margin-top: 36px; }
.result-cta .button.full { margin-top: 0; font-size: 15px; font-weight: 600; letter-spacing: 0; }
.result-cta .micro { font-size: 13px; line-height: 1.7; color: var(--muted); }
.result-share { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.share-title { text-align: center; font-size: 12px; letter-spacing: 1.7px; margin: 0 0 18px; }
.result-share .energy-card { max-width: 320px; margin: 0 auto; padding: 22px; }
.result-share .energy-art { height: 120px; margin: 16px 0 20px; }
.result-share .energy-card h2 { font-size: 30px; margin: 10px 0 12px; }
.result-share .energy-card p { font-size: 16px; line-height: 1.6; }
.result-share .energy-card .eyebrow, .result-share .tags span, .result-share .energy-card .card-foot { font-size: 11px; letter-spacing: 1px; }
.result-share .energy-card .card-foot { margin-top: 18px; padding-top: 14px; }
.result-share .share-actions .text-button { font-size: 14px; min-height: 48px; touch-action: manipulation; }
.result-flow .back, .result-flow .privacy-note { font-size: 13px; line-height: 1.7; }
@media (max-width: 800px) {
  .flow.result-flow h1 { font-size: 38px; letter-spacing: -1.2px; line-height: 1.12; }
  .result-head .sub { font-size: 16px; }
  .result-copy { margin-top: 32px; padding-top: 28px; }
  .result-share { margin-top: 44px; }
}
/* Paywall (prototype $19 copy), one reading column like the free result. Panel order (mobile fold audit,
   approved 2026-10-29): price → one-time → No subscription → the no-payment notice → the button → bullets → Total;
   then the 19 paid sections (EN_PROMPT_PACK §12) behind a disclosure. Budget: the button inside the first Safari
   screen on iPhone 13 (664px visible of 844); on iPhone SE (568) a short scroll is fine. Text stays 16px body /
   13px meta; list dashes hairline grey, gold stays on the price and the primary button. */
.flow.paywall-flow { max-width: 680px; overflow-wrap: break-word; }
.paywall-head h1 { text-wrap: balance; }
.paywall-head .sub { font-size: 17px; line-height: 1.65; color: var(--ink); margin-bottom: 0; }
.paywall-sub-narrow { display: none; }
.paywall-flow .pay-panel { padding: 28px; margin-top: 32px; }
.paywall-flow .eyebrow { font-size: 12px; letter-spacing: 1.7px; }
.paywall-flow .back { font-size: 13px; line-height: 1.7; }
.paywall-flow .price { line-height: 1.1; margin: 10px 0 6px; }
.paywall-flow .price span { font-size: 13px; }
.paywall-flow .micro { font-size: 13px; line-height: 1.7; margin: 0 0 16px; }
.paywall-flow .demo-banner { font-size: 13px; line-height: 1.7; margin: 0 0 16px; }
.paywall-flow .button.full { margin-top: 0; min-height: 56px; padding-block: 14px; font-size: 15px; font-weight: 600; letter-spacing: 0; gap: 15px; }
/* the dash sits in the left gutter, so wrapped lines align with the text */
.paywall-flow .feature-list { font-size: 16px; line-height: 1.5; }
.paywall-flow .feature-list li { position: relative; padding: 13px 0 13px 31px; }
.paywall-flow .feature-list li:before { position: absolute; left: 0; margin: 0; }
.paywall-flow .pay-panel .feature-list { margin: 20px 0 0; }
/* Total follows the last bullet's hairline directly: no second line, no empty band */
.paywall-flow .pay-panel .total { margin-top: 0; padding-top: 14px; border-top: 0; font-size: 15px; }
/* the 19 sections: a native disclosure (keyboard + screen reader state for free) */
.paywall-sections { margin-top: 32px; border-top: 1px solid var(--line); }
.paywall-sections summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 14px 0; font-size: 16px; line-height: 1.5; color: var(--ink); cursor: pointer; border-bottom: 1px solid var(--line); touch-action: manipulation; }
.paywall-sections summary::-webkit-details-marker { display: none; }
.paywall-sections summary span { color: var(--muted); transition: transform .2s ease-out; }
.paywall-sections[open] summary span { transform: rotate(180deg); }
.paywall-sections summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .paywall-sections summary:hover span { color: var(--ink); } }
.paywall-sections .feature-list { margin: 0; }
.paywall-sections .feature-list li { padding-block: 14px; color: var(--ink); }
.paywall-sections .feature-list li:before { color: var(--muted); }
.paywall-sections .feature-list li span { color: var(--muted); }
@media (max-width: 800px) {
  .paywall-flow .back { margin-bottom: 8px; }
  .paywall-head .eyebrow { margin-bottom: 8px; }
  .flow.paywall-flow h1 { font-size: 34px; letter-spacing: -1.2px; line-height: 1.12; margin: 8px 0 12px; }
  .paywall-head .sub { font-size: 16px; }
  .paywall-flow .pay-panel { padding: 20px; margin-top: 20px; }
  .paywall-flow .pay-panel .eyebrow { margin-bottom: 6px; }
  .paywall-flow .price { font-size: 44px; margin: 6px 0 4px; }
  .paywall-flow .micro, .paywall-flow .demo-banner { margin-bottom: 14px; }
}
/* iPhone SE width: narrower gutters, the sub moves under the panel, tighter vertical rhythm */
@media (max-width: 360px) {
  .flow.paywall-flow { padding: 0 16px; margin-top: 12px; }
  .paywall-flow .back { margin-bottom: 0; }
  .flow.paywall-flow h1 { font-size: 32px; }
  .paywall-flow .pay-panel { padding: 18px 16px; margin-top: 16px; }
  .paywall-flow .pay-panel .eyebrow { letter-spacing: 1px; }
  .paywall-flow .micro, .paywall-flow .demo-banner { margin-bottom: 10px; }
  .paywall-head:not(.paywall-sub-narrow) .sub { display: none; }
  .paywall-sub-narrow { display: block; margin-top: 24px; }
}

/* Legal footer (EN_COPY_PACK §12): Pricing · Terms · Privacy · Refunds + support email.
   Hairline only — no gold, no shimmer. */
.editorial-footer { flex-wrap: wrap; }
.footer-legal { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(230,196,135,0.10); font: 13px/1.6 var(--sans); color: var(--muted); }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
.footer-legal a:focus-visible { outline: 1px solid var(--line); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .footer-legal a { transition: color .2s ease; }
  .footer-legal a:hover { color: var(--ink); }
}
@media (max-width: 800px) { .footer-legal .sep-mail { display: none; } .footer-legal a[href^="mailto:"] { flex-basis: 100%; } }