/* Velang Cards v4 layer (2026-10-12). Loaded after cards.css and planner-v3.css.
   Brings the storefront into the velang.app v4 look (concept 06, user: "6 is almost
   perfect"; "update velang cards too"): white page, one dominant brand blue, Outfit 800
   headlines, chunky buttons with a solid bottom edge, line-bordered cards, no gradients,
   no cream. Owner: docs/features/cards-storefront/SPEC.md */

:root {
  --line: #D5E4F0;
  --line-strong: #C3D8EA;
  --muted: #4A5F78;
  --sky: #CFE5F4;
  --gold-fill: #F2C75C;
  --font-display: "Outfit", "Readex Pro", system-ui, sans-serif;
}

h1, h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; }
h3, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; line-height: 1.3; }
h1 { font-size: clamp(42px, 5.6vw, 72px); }
.section-head h2, .proof-story h2, .closing h2 { font-size: clamp(34px, 4.6vw, 56px); }

/* buttons */
.btn-primary, .btn { min-height: 56px; padding: 0 28px; border-radius: 18px; font-family: var(--font-display); font-weight: 800; letter-spacing: .02em; box-shadow: 0 5px 0 var(--action-deep); }
.btn-primary:hover, .btn:hover { background: var(--action); filter: brightness(1.05); }
.btn-primary:active, .btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--action-deep); }
.btn-ghost { min-height: 56px; border-radius: 18px; border: 2px solid var(--line); color: var(--action); font-family: var(--font-display); font-weight: 800; box-shadow: 0 4px 0 var(--line); }
.btn-ghost:hover { border-color: var(--line-strong); background: var(--select); }
.btn-sm { min-height: 44px; border-radius: 14px; box-shadow: 0 3px 0 var(--action-deep); }

/* header */
.brand-name { font-family: var(--font-display); font-weight: 800; color: var(--action); }

/* hero: phone among floating vocabulary objects (replaces the cream bubble) */
.stage::before, .stage::after { content: none; }
.stage { padding: 40px 0 8px; }
.word-float { position: absolute; z-index: 2; display: grid; justify-items: center; gap: 6px; width: clamp(84px, 9vw, 112px); animation: bob var(--d, 5s) ease-in-out var(--delay, 0s) infinite alternate; }
.word-float img { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 3px var(--sky); background: #fff; object-fit: cover; }
.word-float span { padding: 3px 10px; border: 2px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 3px 0 var(--line); font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--ink); white-space: nowrap; }
.word-float.w1 { inset-inline-start: -2%; top: 18%; --d: 4.6s; }
.word-float.w2 { inset-inline-end: 0; top: 14%; --d: 5.4s; --delay: -1.2s; }
.word-float.w3 { inset-inline-start: 2%; top: 58%; --d: 5.8s; --delay: -2.4s; }
.word-float.w4 { inset-inline-end: 2%; top: 66%; --d: 5s; --delay: -3s; }
@keyframes bob { from { transform: translateY(-8px) rotate(-3deg); } to { transform: translateY(8px) rotate(3deg); } }
@media (max-width: 900px) { .word-float { display: none; } }

/* goal calculator */
.goal { border: 2px solid var(--line); border-radius: 24px; box-shadow: 0 5px 0 var(--line); background: var(--surface); }
.goal-chips span { border-radius: 12px; font-weight: 700; }

/* proof */
.hero-proof { border: 2px solid var(--line); border-radius: 20px; box-shadow: 0 3px 0 var(--line); background: var(--surface); }
.proof-quotes figure { padding: 20px 22px; margin-bottom: 12px; border: 2px solid var(--line); border-radius: 20px; box-shadow: 0 3px 0 var(--line); background: var(--surface); }
.proof-quotes figure:first-child { padding-top: 20px; }
.proof-quotes blockquote { font-family: "Lora", "Noto Naskh Arabic", Georgia, serif; font-weight: 700; }

/* levels ladder */
.ladder { border-top: 0; display: grid; gap: 12px; }
.rung { border: 2px solid var(--line) !important; border-radius: 20px; box-shadow: 0 3px 0 var(--line); background: var(--surface); padding-inline: 20px !important; }
.rung-code { font-family: var(--font-display); font-weight: 800; }
.mix > div { padding: 16px; border: 2px solid var(--line); border-radius: 18px; background: var(--select); }
.mix strong { font-family: var(--font-display); font-weight: 800; }

/* steps */
.steps li { padding: 22px; border: 2px solid var(--line); border-radius: 22px; box-shadow: 0 4px 0 var(--line); background: var(--surface); }
.platform-tab-btn, .taste-tab-btn { border-radius: 12px; font-weight: 700; }

/* planner */
.plan-card.progressive-planner { border: 2px solid var(--line); border-radius: 26px; box-shadow: 0 6px 0 var(--line); }

/* price band: brand blue with a curved top, like the velang.app closing band */
.band { background: var(--action); border-radius: 50% 50% 0 0 / clamp(28px, 5vw, 64px) clamp(28px, 5vw, 64px) 0 0; }
.band .section-head p, .band-demo { color: #E7F2FA; }
.offer { border: 0; border-radius: 28px; box-shadow: 0 8px 0 var(--action-deep); }
.offer-side { background: var(--select); }
.price-big { font-family: var(--font-display); font-weight: 800; }

/* fit + faq */
.fit-grid > div { padding: 24px; border: 2px solid var(--line); border-radius: 22px; box-shadow: 0 4px 0 var(--line); }
.faq-list { border-top: 0; display: grid; gap: 12px; }
.faq-item { border: 2px solid var(--line); border-radius: 20px; box-shadow: 0 3px 0 var(--line); background: var(--surface); }
.faq-question { padding: 18px 22px; font-family: var(--font-display); font-weight: 800; }
.faq-answer-inner { padding: 0 22px 20px; }
.faq-icon { background: none; color: var(--action); font-size: 24px; }

/* closing + footer */
.section.closing { margin-top: 40px; background: var(--action); color: #fff; border-radius: 50% 50% 0 0 / clamp(28px, 5vw, 64px) clamp(28px, 5vw, 64px) 0 0; }
.closing h2 { color: #fff; }
.closing p { color: #E7F2FA; }
.closing .btn-primary { background: #fff; color: var(--action-deep); box-shadow: 0 5px 0 var(--sky); }
.closing .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); box-shadow: 0 4px 0 var(--action-deep); }
.site-footer { background: var(--band); color: var(--sky); border-top: 0; }
.footer-links a { color: #fff; }

/* dark mode in the brand navy (velang.app app night look; deck night canvas #0F2742, card #153357) */
:root[data-theme="dark"] {
  --paper: #0F2742;
  --surface: #153357;
  --surface-2: #10294A;
  --ink: #F3F7FB;
  --text: #DCE7F2;
  --muted: #A9BED4;
  --line: #24496F;
  --line-strong: #2E5884;
  --action: #5AAEE0;
  --action-deep: #1F5A86;
  --on-action: #0B1A2A;
  --select: #1A3B62;
  --sky: #24496F;
  --band: #0A1C30;
  --band-text: #F3F7FB;
  --band-muted: #A9BED4;
  --cream: #2A2A1E;
  --shadow: none;
  --shadow-lg: none;
}
[data-theme="dark"] .word-float img { border-color: #153357; box-shadow: 0 0 0 3px #24496F; }
[data-theme="dark"] .band, [data-theme="dark"] .section.closing { background: #1F5A86; }
[data-theme="dark"] .band .section-head h2, [data-theme="dark"] .band .section-head p, [data-theme="dark"] .band-demo { color: #F3F7FB; }
[data-theme="dark"] .closing .btn-primary { background: #F3F7FB; color: #0F2742; box-shadow: 0 5px 0 #8AA3BF; }
[data-theme="dark"] .closing .btn-ghost { box-shadow: 0 4px 0 #0A1C30; }
[data-theme="dark"] .btn-primary, [data-theme="dark"] .btn { color: var(--on-action); }
[data-theme="dark"] .site-footer { color: #A9BED4; }

@media (prefers-reduced-motion: reduce) { .word-float { animation: none; } }

/* In-phone card preview: mirrors the v4 deck stylesheet (deck-design/velang-cards-v4.css). */
:root { --deck-green: #2E7CB4; --deck-honey: #F2C75C; }
[data-theme="dark"] { --deck-green: #6FB3E3; --deck-honey: #F2C75C; }
.phone-screen { background: #FFFFFF; color: #153357; }
[data-theme="dark"] .phone-screen { background: #0F2742; color: #F3F7FB; }
.anki-deck, .anki-usage { font-family: "Outfit", system-ui, sans-serif; text-transform: none; letter-spacing: .02em; font-weight: 700; font-size: 12.5px; opacity: 1; color: #1F5A86; }
[data-theme="dark"] .anki-deck, [data-theme="dark"] .anki-usage { color: #6FB3E3; }
.anki-card { background: #FFFFFF; border: 2px solid #D5E4F0; border-radius: 22px; box-shadow: 0 5px 0 #D5E4F0; }
[data-theme="dark"] .anki-card { background: #153357; border-color: #2B5079; box-shadow: 0 5px 0 #0A1C30; }
.anki-tag { padding: 3px 10px; border-radius: 9px; border: 2px solid #D5E4F0; background: #E7F2FA; color: #1F5A86; font-weight: 800; }
[data-theme="dark"] .anki-tag { background: #1A3B62; border-color: #2B5079; color: #F3F7FB; }
.anki-prompt, .anki-back { font-family: "Outfit", system-ui, sans-serif; font-weight: 800; letter-spacing: -.02em; }
.anki-back { color: inherit; }
.anki-example, .anki-examplebox .anki-example { font-family: "Lora", Georgia, serif; }
.anki-audio { border-radius: 50%; border: 0; background: #2E7CB4; color: #FFFFFF; box-shadow: 0 4px 0 #1F5A86; }
[data-theme="dark"] .anki-audio { background: #4BA2D4; color: #0F2742; }
.anki-examplebox, .anki-rulebox { background: #F4F8FC; border: 2px solid #E4EEF6; border-radius: 16px; }
[data-theme="dark"] .anki-examplebox, [data-theme="dark"] .anki-rulebox { background: #1A3B62; border-color: #234669; }
.anki-rulelabel { text-transform: none; letter-spacing: .02em; opacity: 1; color: #1F5A86; font-size: 12px; }
.cloze { background: #FDF4DC; color: #5C430A; border: 2px solid #F2C75C; border-radius: 10px; font-weight: 800; }
[data-theme="dark"] .cloze { background: #3A3420; color: #FBE9BC; border-color: #B8933A; }
.anki-show { background: #153357; border-radius: 16px; font-family: "Outfit", system-ui, sans-serif; font-weight: 800; box-shadow: 0 4px 0 #0A1C30; }
[data-theme="dark"] .anki-show { background: #F3F7FB; color: #0F2742; box-shadow: 0 4px 0 #8AA3BF; }
.anki-grade.rating-good b { color: #2E7CB4; }

/* plan links (STUDY_PLAN_SPEC phase 2) */
.goal-plan{display:inline-block;margin:10px 0 2px;font-weight:700;color:var(--action);text-decoration:none}
.goal-plan:hover{text-decoration:underline}
.goal-plan[hidden]{display:none}
.success-plan-link{display:block;margin:-8px 0 16px;font-weight:700;color:var(--action);text-decoration:none}