/* QuickCards product pages. Loaded after style.css; reuses its nav, footer, buttons and doc styles.
   Palette and type are lifted from the app (Theme.swift): purple ink, cream surface, sticker accents.
   No JavaScript and no inline styles anywhere (CSP), so everything is class based. */

@font-face { font-family: "Fredoka"; src: url("/assets/fonts/Fredoka-Variable.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/assets/fonts/Nunito-Variable.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }

.qc-page {
  --qc-bg: #f4e8fb;
  --qc-ink: #1e0845;
  --qc-ink-2: #5e4a85;
  --qc-surface: #fffcf5;
  --qc-purple: #5b2a9e;
  --qc-deep: #2a0f55;
  --qc-yellow: #fbe56a;
  --qc-coral: #ee6a45;
  --qc-pink: #f28aec;
  --qc-lavender: #d9c2fa;
  --qc-mint: #a6e8c6;
  --qc-sky: #9ccbff;
  --qc-display: "Fredoka", "Nunito", ui-rounded, system-ui, sans-serif;
  --qc-body: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Shared bits ---------- */
.qc-page .kicker { font-family: var(--qc-display); }
.qc-kicker { font: 600 13px/1 var(--qc-display); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 18px; }
.qc-h2 { font: 600 clamp(32px, 5vw, 56px)/1.05 var(--qc-display); letter-spacing: -.02em; margin: 0 0 18px; text-wrap: balance; }
.qc-lead { font: 600 clamp(17px, 1.8vw, 20px)/1.55 var(--qc-body); max-width: 36em; margin: 0 0 40px; }
.qc-yellow { color: var(--qc-yellow); }
.qc-btn { display: inline-block; text-decoration: none; font: 600 16px/1 var(--qc-display); padding: 17px 30px; border-radius: 999px; transition: transform .18s ease, box-shadow .2s ease; }
.qc-btn:hover { transform: translateY(-2px); }
.qc-btn-yellow { background: var(--qc-yellow); color: var(--qc-ink); box-shadow: 0 6px 0 #c9a92c, 0 18px 40px -12px rgba(0, 0, 0, .5); }
.qc-btn-yellow:active { transform: translateY(3px); box-shadow: 0 2px 0 #c9a92c; }
.qc-btn-ghost { color: #fff; border: 2px solid rgba(255, 255, 255, .45); }
.qc-btn-ghost:hover { background: rgba(255, 255, 255, .1); }

/* App Store badge in the product style */
.qc-store { display: inline-flex; align-items: center; gap: 14px; padding: 12px 24px 12px 18px; border-radius: 18px; text-decoration: none; background: var(--qc-yellow); color: var(--qc-ink); box-shadow: 0 6px 0 #c9a92c, 0 18px 40px -12px rgba(0, 0, 0, .5); transition: transform .18s ease, box-shadow .2s ease; }
.qc-store:hover { transform: translateY(-2px); }
.qc-store:active { transform: translateY(3px); box-shadow: 0 2px 0 #c9a92c; }
.qc-store svg { width: 28px; height: 28px; flex: none; }
.qc-store span { display: block; text-align: left; }
.qc-store small { display: block; font: 700 11px/1 var(--qc-body); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 5px; opacity: .75; }
.qc-store strong { display: block; font: 600 20px/1 var(--qc-display); }

/* ---------- Hero ---------- */
.qc-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; padding: clamp(56px, 8vw, 104px) 0 clamp(72px, 9vw, 120px); background: radial-gradient(800px 420px at 85% 10%, rgba(242, 138, 236, .35), transparent 65%), radial-gradient(700px 380px at 5% 100%, rgba(238, 106, 69, .28), transparent 65%), linear-gradient(180deg, #5b2a9e 0%, #3d1a78 100%); }
.qc-hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.qc-hero .qc-kicker { color: var(--qc-mint); }
.qc-hero h1 { font: 600 clamp(40px, 6vw, 80px)/1.02 var(--qc-display); letter-spacing: -.025em; margin: 0 0 24px; text-wrap: balance; }
.qc-hero h1 em { font-style: normal; color: var(--qc-yellow); }
.qc-hero .qc-lead { color: #e8dcf8; margin-bottom: 34px; }
.qc-hero-actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-bottom: 18px; }
.qc-hero-note { font: 700 14px/1.5 var(--qc-body); color: #cdb7ee; margin: 0; }
.qc-confetti i { position: absolute; z-index: -1; display: block; }
.qc-confetti .c1 { width: 44px; height: 44px; border-radius: 50%; background: var(--qc-yellow); left: 54%; top: 7%; opacity: .9; }
.qc-confetti .c2 { width: 54px; height: 20px; border-radius: 99px; background: var(--qc-mint); right: 6%; top: 8%; transform: rotate(-52deg); }
.qc-confetti .c3 { width: 34px; height: 34px; border-radius: 10px; background: var(--qc-coral); left: 46%; bottom: 7%; transform: rotate(14deg); }
.qc-confetti .c4 { width: 26px; height: 26px; border-radius: 50%; background: var(--qc-pink); right: 10%; bottom: 14%; }

/* ---------- Sticker cards (the app's look: thick ink outline, dashed inner edge, slight tilt) ---------- */
.sticker { position: relative; color: var(--qc-ink); background: var(--qc-surface); border: 3px solid var(--qc-ink); border-radius: 24px; padding: 20px 22px; font-family: var(--qc-body); box-shadow: 0 10px 0 rgba(30, 8, 69, .22), 0 26px 44px -18px rgba(0, 0, 0, .45); }
.sticker::after { content: ""; position: absolute; inset: 7px; border: 2px dashed rgba(30, 8, 69, .3); border-radius: 17px; pointer-events: none; }
.sticker h3, .sticker h4 { font-family: var(--qc-display); font-weight: 600; margin: 0; }
.s-yellow { background: var(--qc-yellow); }
.s-pink { background: var(--qc-pink); }
.s-sky { background: var(--qc-sky); }
.s-mint { background: var(--qc-mint); }
.s-coral { background: var(--qc-coral); }
.s-lav { background: var(--qc-lavender); }
.s-dark { background: var(--qc-ink); color: #f5efff; border-color: #0f0326; }
.s-dark::after { border-color: rgba(255, 255, 255, .22); }

.collage { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; }
.collage .sticker { position: absolute; }
.collage .card { left: 0; top: 30%; width: 58%; padding: 22px 24px 20px; transform: rotate(-4deg); z-index: 2; }
.card-tag { display: inline-block; font: 800 13px/1 var(--qc-body); padding: 7px 12px; border-radius: 99px; background: var(--qc-mint); margin-bottom: 14px; }
.card-q { font: 600 clamp(20px, 2.6vw, 26px)/1.2 var(--qc-display); margin: 0 0 22px; }
.card-flip { font: 800 13px/1 var(--qc-body); color: var(--qc-ink-2); margin: 0; }
.card-count { position: absolute; right: 22px; top: 22px; font: 800 13px/1 var(--qc-body); color: var(--qc-ink-2); }
.collage .week { right: 0; top: 24%; width: 44%; transform: rotate(3.5deg); z-index: 3; }
.week h4 { display: flex; justify-content: space-between; font-size: 17px; margin-bottom: 12px; }
.week ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.week li { display: flex; align-items: center; gap: 10px; font: 800 14.5px/1.2 var(--qc-body); }
.week li.done span { text-decoration: line-through; opacity: .6; }
.box { flex: none; width: 20px; height: 20px; border: 2.5px solid var(--qc-ink); border-radius: 6px; position: relative; }
.done .box { background: var(--qc-ink); }
.done .box::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 5px; height: 9px; border: solid var(--qc-yellow); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.collage .cal { left: 4%; top: 0; width: 25%; padding: 0; overflow: hidden; transform: rotate(-7deg); text-align: center; z-index: 1; }
.cal::after { display: none; }
.cal b { display: block; background: #ff4d5e; color: #fff; font: 700 14px/1 var(--qc-display); letter-spacing: .1em; padding: 9px 0; }
.cal strong { display: block; font: 700 clamp(34px, 5vw, 52px)/1 var(--qc-display); padding: 10px 0 14px; }
.collage .notif { left: 32%; top: 0; width: 66%; padding: 16px 18px; transform: rotate(2deg); z-index: 1; }
.notif small { display: block; font: 800 11px/1 var(--qc-body); letter-spacing: .1em; color: #b6a3de; margin-bottom: 8px; }
.notif strong { display: block; font: 600 clamp(15px, 2vw, 19px)/1.25 var(--qc-display); margin-bottom: 4px; }
.notif span { font: 700 13px/1.4 var(--qc-body); color: #cbbcec; }
.collage .friends { left: 6%; bottom: 3%; width: 50%; transform: rotate(-3deg); z-index: 3; }
.friends strong { display: block; font: 600 clamp(15px, 2vw, 18px)/1.25 var(--qc-display); margin-bottom: 4px; }
.friends span { font: 700 13px/1.4 var(--qc-body); }
.friends-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.avatars { display: flex; }
.avatars i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid #fff; font: 700 14px/1 var(--qc-display); font-style: normal; margin-left: -8px; color: var(--qc-ink); }
.avatars i:first-child { margin-left: 0; background: var(--qc-sky); }
.avatars i:nth-child(2) { background: var(--qc-yellow); }
.avatars i:nth-child(3) { background: #c9ee8e; }
.streak { font: 800 14px/1 var(--qc-body); background: #fff; border-radius: 99px; padding: 7px 12px; }
.collage .sem { right: 2%; bottom: 0; width: 40%; transform: rotate(3deg); z-index: 3; }
.sem small { display: block; font: 800 11.5px/1 var(--qc-body); letter-spacing: .08em; margin-bottom: 6px; }
.sem strong { font: 700 clamp(26px, 4vw, 38px)/1 var(--qc-display); }
.sem strong span { font: 700 14px/1 var(--qc-body); }
.bar { height: 11px; border-radius: 99px; background: rgba(30, 8, 69, .2); margin: 12px 0 10px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 64%; background: var(--qc-ink); border-radius: 99px; }
.sem p { font: 800 12px/1.3 var(--qc-body); margin: 0; }

@media (max-width: 900px) {
  .qc-hero .wrap { grid-template-columns: 1fr; }
  .collage { margin-top: 20px; }
}
@media (max-width: 600px) {
  .qc-confetti .c1, .qc-confetti .c2 { display: none; }
  .collage { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 4px 4px 12px; }
  .collage .sticker { position: static; width: auto; }
  .collage .cal, .collage .notif { display: none; }
  .collage .card { grid-column: 1 / -1; transform: rotate(-1.5deg); }
  .collage .week { transform: rotate(1.5deg); }
  .collage .sem { transform: rotate(-1deg); }
  .collage .friends { grid-column: 1 / -1; transform: rotate(1deg); order: 4; }
  .collage .card { order: 1; }
  .collage .week { order: 2; }
  .collage .sem { order: 3; }
  .week li { font-size: 14px; }
}
@media (max-width: 480px) {
  .qc-hero-actions { flex-direction: column; align-items: stretch; }
  .qc-store { justify-content: center; }
}

/* ---------- Light sections ---------- */
.qc-light { background: var(--qc-bg); color: var(--qc-ink); padding: clamp(72px, 9vw, 120px) 0; position: relative; }
.qc-light .qc-kicker { color: var(--qc-purple); }
.qc-light .qc-lead { color: var(--qc-ink-2); }

.qc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.qc-steps li { position: relative; }
.qc-steps .sticker { height: 100%; padding: 26px 24px 28px; }
.qc-steps b { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--qc-ink); color: var(--qc-yellow); font: 700 20px/1 var(--qc-display); margin-bottom: 16px; }
.qc-steps h3 { font-size: 24px; line-height: 1.15; margin-bottom: 8px; }
.qc-steps p { margin: 0; font: 700 15.5px/1.55 var(--qc-body); }
.qc-steps li:nth-child(1) .sticker { transform: rotate(-1.2deg); }
.qc-steps li:nth-child(2) .sticker { transform: rotate(.8deg); }
.qc-steps li:nth-child(3) .sticker { transform: rotate(-.6deg); }
@media (max-width: 860px) { .qc-steps { grid-template-columns: 1fr; } }

.qc-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 8px; }
.qc-features .sticker { padding: 24px 22px 26px; }
.qc-features .sticker h3 { font-size: 21px; line-height: 1.15; margin: 14px 0 8px; }
.qc-features .sticker p { margin: 0; font: 700 14.5px/1.55 var(--qc-body); }
.qc-features .sticker:nth-child(odd) { transform: rotate(-.9deg); }
.qc-features .sticker:nth-child(even) { transform: rotate(.9deg); }
.fi { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(30, 8, 69, .12); }
.fi svg { width: 26px; height: 26px; fill: none; stroke: var(--qc-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.s-dark .fi { background: rgba(255, 255, 255, .14); }
.s-dark .fi svg { stroke: var(--qc-yellow); }
@media (max-width: 1020px) { .qc-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .qc-features { grid-template-columns: 1fr; } }

/* ---------- Pricing ---------- */
.qc-dark { background: linear-gradient(180deg, #2a0f55 0%, #1a0838 100%); color: #fff; padding: clamp(72px, 9vw, 120px) 0; position: relative; overflow: hidden; }
.qc-dark .qc-kicker { color: var(--qc-mint); }
.qc-dark .qc-lead { color: #d9c9f2; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; max-width: 940px; }
.plan { padding: 30px 28px 32px; }
.plan .name { font: 600 28px/1.1 var(--qc-display); margin: 0 0 6px; }
.plan .price { font: 700 clamp(36px, 5vw, 48px)/1 var(--qc-display); margin: 14px 0 4px; }
.plan .price small { font: 800 16px/1 var(--qc-body); opacity: .75; }
.plan .sub { margin: 0 0 22px; font: 700 14.5px/1.4 var(--qc-body); opacity: .8; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.plan li { position: relative; padding-left: 30px; font: 800 15px/1.4 var(--qc-body); }
.plan li::before { content: ""; position: absolute; left: 0; top: .1em; width: 19px; height: 19px; border-radius: 50%; background: var(--qc-ink); }
.plan li::after { content: ""; position: absolute; left: 6.5px; top: calc(.1em + 3px); width: 5px; height: 9px; border: solid var(--qc-yellow); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.plan.pro { transform: rotate(.7deg); }
.plan.free { transform: rotate(-.7deg); }
.plan .badge { position: absolute; top: -16px; right: 22px; z-index: 2; background: var(--qc-coral); color: #fff; font: 700 13px/1 var(--qc-display); letter-spacing: .06em; padding: 9px 14px; border-radius: 99px; border: 2.5px solid var(--qc-ink); }
.plan-fine { margin: 26px 0 0; max-width: 56em; font: 700 13.5px/1.6 var(--qc-body); color: #c3b0e6; }
.plan-fine a { color: var(--qc-yellow); }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } .plan.pro, .plan.free { transform: none; } }

/* ---------- FAQ and good-to-know, on light ---------- */
.qc-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.qc-faq-head { position: sticky; top: 108px; }
.qc-faq-list { display: grid; gap: 14px; }
.qc-faq details { background: var(--qc-surface); border: 3px solid var(--qc-ink); border-radius: 20px; box-shadow: 0 6px 0 rgba(30, 8, 69, .2); }
.qc-faq summary { list-style: none; cursor: pointer; position: relative; padding: 20px 58px 20px 22px; font: 600 19px/1.3 var(--qc-display); border-radius: 18px; }
.qc-faq summary::-webkit-details-marker { display: none; }
.qc-faq summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; border: solid var(--qc-ink); border-width: 0 3px 3px 0; transform: translateY(-72%) rotate(45deg); transition: transform .25s ease; }
.qc-faq details[open] summary::after { transform: translateY(-28%) rotate(-135deg); }
.qc-faq .ans { padding: 0 22px 22px; font: 700 15.5px/1.6 var(--qc-body); color: var(--qc-ink-2); }
.qc-faq .ans p { margin: 0 0 12px; }
.qc-faq .ans p:last-child { margin-bottom: 0; }
.qc-faq .ans a { color: var(--qc-purple); text-underline-offset: 3px; }
.qc-light a:focus-visible, .qc-light summary:focus-visible { outline-color: var(--qc-purple); }
@media (max-width: 900px) { .qc-faq { grid-template-columns: 1fr; } .qc-faq-head { position: static; } }

/* ---------- Closing CTA ---------- */
.qc-cta { background: var(--qc-purple); color: #fff; text-align: center; padding: clamp(64px, 8vw, 104px) 0; position: relative; overflow: hidden; }
.qc-cta .mark { width: 96px; height: 96px; margin: 0 auto 22px; border-radius: 24px; box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .5); }
.qc-cta h2 { font: 600 clamp(32px, 5vw, 58px)/1.05 var(--qc-display); letter-spacing: -.02em; margin: 0 auto 16px; max-width: 14em; text-wrap: balance; }
.qc-cta p { font: 700 17px/1.6 var(--qc-body); color: #e3d6f7; max-width: 32em; margin: 0 auto 30px; }
.qc-cta .qc-hero-actions { justify-content: center; }

/* ---------- Product subnav (QuickCards sub pages) ---------- */
.prod-nav { background: #1a0838; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.prod-nav .wrap { display: flex; align-items: center; gap: 22px; height: 52px; overflow-x: auto; white-space: nowrap; }
.prod-nav a { text-decoration: none; color: #d9c9f2; font: 700 14px/1 var(--qc-body, var(--body)); padding: 8px 2px; }
.prod-nav a:hover, .prod-nav a.active { color: #fff; }
.prod-nav a.active { box-shadow: 0 2px 0 var(--qc-yellow, #fbe56a); }
.prod-nav .pn-brand { display: flex; align-items: center; gap: 9px; margin-right: 8px; color: #fff; font-family: var(--qc-display, var(--display)); font-weight: 600; font-size: 16px; }
.prod-nav .pn-brand img { width: 26px; height: 26px; border-radius: 7px; }

/* ---------- Products index ---------- */
.prod-hero { padding: clamp(56px, 8vw, 104px) 0 24px; position: relative; isolation: isolate; text-align: center; }
.prod-hero::before { content: ""; position: absolute; left: 50%; top: -60px; width: 760px; height: 420px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(200, 16, 46, .3), transparent); z-index: -1; filter: blur(30px); }
.prod-hero h1 { font: 700 clamp(38px, 6vw, 72px)/1.05 var(--display); letter-spacing: -.04em; margin: 0 0 18px; text-wrap: balance; }
.prod-hero p { color: var(--text-soft); font-size: clamp(16px, 1.8vw, 19px); max-width: 34em; margin: 0 auto; }
.prod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding: 48px 0 clamp(72px, 9vw, 120px); }
.prod-card { position: relative; display: flex; flex-direction: column; border-radius: 30px; padding: clamp(28px, 4vw, 44px); text-decoration: none; color: #fff; overflow: hidden; isolation: isolate; border: 1px solid var(--line-strong); transition: transform .25s ease, box-shadow .25s ease; }
.prod-card:hover { transform: translateY(-5px); }
.prod-card.pc-qc { background: radial-gradient(500px 280px at 90% 0%, rgba(242, 138, 236, .4), transparent 70%), linear-gradient(180deg, #5b2a9e, #34166c); box-shadow: 0 34px 70px -34px rgba(91, 42, 158, .9); }
.prod-card.pc-rush { background: radial-gradient(500px 280px at 90% 0%, rgba(59, 223, 137, .22), transparent 70%), linear-gradient(180deg, #0f2262, #050a22); box-shadow: 0 34px 70px -34px rgba(48, 130, 246, .8); }
.prod-card .pc-icon { width: 76px; height: 76px; border-radius: 20px; margin-bottom: 22px; box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .55); }
.prod-card .pc-icon.pc-icon-logo { width: 110px; height: 110px; margin: -8px 0 14px -10px; border-radius: 0; box-shadow: none; }
.prod-card .pc-tag { font: 600 12.5px/1 var(--display); letter-spacing: .15em; text-transform: uppercase; margin: 0 0 12px; color: #cdb7ee; }
.pc-rush .pc-tag { color: #3bdf89; }
.prod-card h2 { font: 700 clamp(30px, 4vw, 44px)/1.05 var(--display); letter-spacing: -.03em; margin: 0 0 12px; }
.pc-qc h2 { font-family: "Fredoka", var(--display); font-weight: 600; letter-spacing: -.02em; }
.prod-card p.pc-text { color: #dccff3; font-size: 16.5px; margin: 0 0 26px; max-width: 28em; }
.pc-rush p.pc-text { color: #c3cbe4; }
.prod-card .pc-meta { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.prod-card .pc-chip { padding: 8px 14px; border-radius: 99px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); font: 600 13px/1 var(--display); }
.prod-card .pc-go { font: 600 15px/1 var(--display); color: #fff; margin-left: auto; }
.prod-card .pc-go::after { content: " \2192"; }
@media (max-width: 860px) { .prod-grid { grid-template-columns: 1fr; } }

.qc-page .doc-shell article h2 { font-family: var(--display); }
.qc-light .qc-lead a { color: var(--qc-purple); text-underline-offset: 3px; }
.week h4 span { white-space: nowrap; }

/* =====================================================================
   QuickCards theme pass: carry the app's colors through the shared nav,
   footer and support page, and add more sticker flair.
   ===================================================================== */

/* ---------- Nav and footer wear the QuickCards colors on QuickCards pages ---------- */
.qc-page .nav { background: rgba(30, 8, 69, .94); border-bottom: 3px solid #0f0326; }
.qc-page .brand span { font-family: var(--qc-display); font-weight: 600; letter-spacing: -.01em; }
.qc-page .nav-links { font-family: var(--qc-body); font-weight: 800; }
.qc-page .nav-links a { color: #d9c9f2; }
.qc-page .nav-links a:hover, .qc-page .nav-links a.active { color: #fff; }
.qc-page .nav-links a.nav-cta { background: var(--qc-yellow); color: var(--qc-ink); border: 2.5px solid #0f0326; box-shadow: 0 4px 0 #c9a92c; font-family: var(--qc-display); font-weight: 600; transition: transform .15s ease, box-shadow .15s ease; }
.qc-page .nav-links a.nav-cta:hover { box-shadow: 0 4px 0 #c9a92c; transform: translateY(-2px); }
.qc-page .prod-nav { background: #2a0f55; border-bottom: 2px dashed rgba(255, 255, 255, .18); }
.qc-page .prod-nav a { font-family: var(--qc-body); font-weight: 800; }
.qc-page footer { background: #1e0845; border-top: 3px solid #0f0326; position: relative; }
.qc-page footer::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 6px; background: repeating-linear-gradient(90deg, var(--qc-yellow) 0 36px, var(--qc-pink) 36px 72px, var(--qc-mint) 72px 108px, var(--qc-sky) 108px 144px, var(--qc-coral) 144px 180px); }
.qc-page .footer-links { font-family: var(--qc-body); font-weight: 800; }
.qc-page .footer-links a { color: #d9c9f2; }
.qc-page .footer-links a:hover { color: var(--qc-yellow); }
.qc-page .copyright { color: #a690d1; font-family: var(--qc-body); font-weight: 700; }
.qc-page :focus-visible { outline-color: var(--qc-yellow); }
.qc-light :focus-visible { outline-color: var(--qc-purple); }

/* ---------- Hero extras ---------- */
.qc-hero-icon { width: 72px; height: 72px; border-radius: 20px; margin: 0 0 22px; transform: rotate(-6deg); box-shadow: 0 8px 0 rgba(15, 3, 38, .35), 0 20px 36px -10px rgba(0, 0, 0, .55); }
.qc-store, .qc-btn-yellow { border: 3px solid #0f0326; }
.qc-btn-ghost { font-family: var(--qc-display); }

/* ---------- Tilted ticker band between hero and content ---------- */
.qc-band { position: relative; z-index: 4; overflow: hidden; margin: -34px 0 -34px; padding: 34px 0; pointer-events: none; }
.qc-band-inner { background: var(--qc-yellow); border-top: 3px solid #0f0326; border-bottom: 3px solid #0f0326; transform: rotate(-1.6deg); width: 104%; margin-left: -2%; overflow: hidden; box-shadow: 0 10px 0 rgba(15, 3, 38, .18); }
.qc-band-track { display: flex; width: max-content; animation: qc-band 36s linear infinite; }
.qc-band-track span { display: inline-flex; align-items: center; gap: 28px; padding: 14px 0 14px 28px; font: 600 clamp(20px, 2.6vw, 30px)/1 var(--qc-display); color: var(--qc-ink); letter-spacing: .01em; white-space: nowrap; }
.qc-band-track span::after { content: ""; width: 14px; height: 14px; background: var(--qc-coral); border: 2.5px solid #0f0326; border-radius: 4px; transform: rotate(45deg); flex: none; }
.qc-band-track span:nth-child(4n+2)::after { background: var(--qc-pink); border-radius: 50%; }
.qc-band-track span:nth-child(4n+3)::after { background: var(--qc-mint); }
.qc-band-track span:nth-child(4n)::after { background: var(--qc-sky); border-radius: 50%; }
@keyframes qc-band { to { transform: translateX(-50%); } }
.qc-after-band { padding-top: clamp(104px, 12vw, 152px); }
@media (prefers-reduced-motion: reduce) { .qc-band-track { animation: none; } }

/* ---------- Marker highlight and confetti on light sections ---------- */
.hl { background: linear-gradient(transparent 56%, var(--qc-yellow) 56% 92%, transparent 92%); padding: 0 .1em; margin: 0 -.1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.qc-light { overflow: hidden; }
.qc-light .wrap, .qc-dark .wrap { position: relative; z-index: 1; }
.qc-light .qc-confetti i, .qc-dark .qc-confetti i { z-index: 0; }
.qc-confetti.lt .c1 { left: auto; right: 7%; top: 9%; width: 30px; height: 30px; background: var(--qc-pink); }
.qc-confetti.lt .c2 { right: auto; left: 3%; top: auto; bottom: 8%; width: 60px; height: 22px; background: var(--qc-sky); transform: rotate(38deg); }
.qc-confetti.lt .c3 { left: auto; right: 4%; bottom: 14%; width: 30px; height: 30px; background: var(--qc-yellow); border: 3px solid var(--qc-ink); }
.qc-confetti.lt .c4 { right: auto; left: 8%; top: 8%; width: 18px; height: 18px; background: var(--qc-coral); border-radius: 5px; transform: rotate(20deg); }
.qc-confetti.dk .c1 { left: auto; right: 6%; top: 8%; width: 36px; height: 36px; background: var(--qc-pink); opacity: .85; }
.qc-confetti.dk .c2 { right: auto; left: 2%; top: 30%; width: 56px; height: 20px; background: var(--qc-mint); transform: rotate(-40deg); opacity: .8; }
.qc-confetti.dk .c3 { left: auto; right: 3%; bottom: 10%; width: 34px; height: 34px; background: var(--qc-coral); opacity: .9; }
.qc-confetti.dk .c4 { right: auto; left: 7%; bottom: 8%; width: 22px; height: 22px; background: var(--qc-yellow); opacity: .9; }
.qc-faq-section .qc-confetti.lt .c1 { top: auto; bottom: 10%; }

/* ---------- Hover wiggle (hover capable devices only) ---------- */
.qc-features .sticker, .qc-steps .sticker { transition: transform .22s ease, box-shadow .22s ease; }
@media (hover: hover) {
  .qc-features .sticker:hover, .qc-steps li:hover .sticker { transform: rotate(0deg) translateY(-8px); box-shadow: 0 18px 0 rgba(30, 8, 69, .2), 0 34px 44px -18px rgba(0, 0, 0, .4); }
}

/* ---------- Pricing polish ---------- */
.qc-dark { background: radial-gradient(700px 360px at 90% 0%, rgba(242, 138, 236, .22), transparent 65%), radial-gradient(600px 360px at 0% 100%, rgba(156, 203, 255, .14), transparent 65%), linear-gradient(180deg, #2a0f55 0%, #1a0838 100%); }
.plan.free { background: var(--qc-lavender); }
.plan .price { font-size: clamp(42px, 6vw, 56px); }
.qc-dark .qc-h2 .qc-yellow { color: var(--qc-yellow); }

/* ---------- Closing CTA ---------- */
.qc-cta { background: radial-gradient(600px 300px at 12% 0%, rgba(242, 138, 236, .38), transparent 65%), radial-gradient(600px 300px at 92% 100%, rgba(238, 106, 69, .3), transparent 65%), var(--qc-purple); border-top: 3px solid #0f0326; }
.qc-cta .mark { transform: rotate(-5deg); border: 3px solid #0f0326; box-shadow: 0 10px 0 rgba(15, 3, 38, .35), 0 24px 40px -12px rgba(0, 0, 0, .5); }
.qc-cta .qc-confetti i { z-index: 0; }
.qc-cta .wrap { position: relative; z-index: 1; }

/* ---------- Support page, themed ---------- */
.qc-support { background: var(--qc-bg); color: var(--qc-ink); padding: clamp(48px, 7vw, 88px) 0 clamp(72px, 9vw, 120px); position: relative; overflow: hidden; }
.qc-support .wrap { position: relative; z-index: 1; max-width: 860px; }
.qc-support .qc-kicker { color: var(--qc-purple); }
.qc-support h1 { font: 600 clamp(38px, 6vw, 68px)/1.04 var(--qc-display); letter-spacing: -.02em; margin: 0 0 18px; }
.qc-support .qc-lead { color: var(--qc-ink-2); margin-bottom: 34px; }
.qc-mail { display: block; padding: 26px 28px; margin-bottom: 52px; transform: rotate(-.8deg); }
.qc-mail .label { font: 800 12px/1 var(--qc-body); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; opacity: .75; }
.qc-mail a { font: 600 clamp(15px, 4.6vw, 34px)/1.2 var(--qc-display); color: var(--qc-ink); overflow-wrap: anywhere; text-decoration: none; background: linear-gradient(transparent 62%, rgba(255, 255, 255, .6) 62%); }
.qc-mail a:hover { text-decoration: underline; text-underline-offset: 5px; }
.qc-support h2 { font: 600 clamp(26px, 3.6vw, 36px)/1.1 var(--qc-display); letter-spacing: -.01em; margin: 0 0 22px; }
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.qa-card { padding: 24px 24px 26px; }
.qa-card h3 { font-size: 20px; line-height: 1.2; margin: 0 0 8px; }
.qa-card p { margin: 0; font: 700 15px/1.6 var(--qc-body); }
.qa-card:nth-child(odd) { transform: rotate(-.7deg); }
.qa-card:nth-child(even) { transform: rotate(.7deg); }
.qa-card a { color: var(--qc-ink); }
@media (max-width: 720px) { .qa-grid { grid-template-columns: 1fr; } .qa-card:nth-child(n) { transform: none; } }

/* ---------- Legal pages (terms, privacy), themed ---------- */
.qc-legal { background: var(--qc-bg); color: var(--qc-ink); padding: clamp(48px, 7vw, 88px) 0 clamp(72px, 9vw, 120px); position: relative; overflow: hidden; }
.qc-legal .wrap { position: relative; z-index: 1; max-width: 1040px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.legal-head { grid-column: 1 / -1; max-width: 760px; }
.legal-head .qc-kicker { color: var(--qc-purple); }
.legal-head h1 { font: 600 clamp(38px, 6vw, 68px)/1.04 var(--qc-display); letter-spacing: -.02em; margin: 0 0 14px; }
.legal-updated { font: 800 14px/1.4 var(--qc-body); color: var(--qc-ink-2); margin: 0; }
.legal-toc { position: sticky; top: 130px; max-height: calc(100vh - 160px); overflow-y: auto; padding: 20px 18px 22px; }
.legal-toc h2 { font-size: 17px; margin: 0 0 10px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: none; }
.legal-toc a { display: block; padding: 5px 4px; font: 800 13.5px/1.3 var(--qc-body); color: var(--qc-ink); text-decoration: none; border-radius: 8px; }
.legal-toc a:hover { background: rgba(30, 8, 69, .1); }
.legal-body { color: var(--qc-ink-2); font: 700 16px/1.7 var(--qc-body); max-width: 760px; }
.legal-body .lead-note { font-size: 18px; color: var(--qc-ink); margin: 0 0 26px; }
.legal-body h2 { font: 600 clamp(24px, 3vw, 32px)/1.15 var(--qc-display); color: var(--qc-ink); letter-spacing: -.01em; margin: 52px 0 14px; scroll-margin-top: 130px; }
.legal-body h3 { font: 600 20px/1.25 var(--qc-display); color: var(--qc-ink); margin: 28px 0 10px; }
.legal-body p { margin: 0 0 14px; }
.legal-body ul { margin: 0 0 16px; padding-left: 22px; }
.legal-body li { margin-bottom: 9px; }
.legal-body strong { color: var(--qc-ink); font-weight: 800; }
.legal-body a { color: var(--qc-purple); text-underline-offset: 3px; }
.legal-body em { font-style: italic; }
.legal-body .todo { background: #ffd0d4; color: #7a0f1d; padding: 1px 6px; border-radius: 6px; }
.legal-summary { margin: 0 0 18px; padding: 24px 26px 18px; transform: rotate(-.4deg); }
.legal-summary h2 { font-size: 24px; margin: 0 0 12px; color: var(--qc-ink); }
.legal-summary ul { margin: 0; }
.legal-summary li { color: var(--qc-ink); font-weight: 800; font-size: 15.5px; }
.legal-lang { margin: 0 0 22px; font: 800 14px/1.4 var(--qc-body); color: var(--qc-ink-2); }
@media (max-width: 880px) {
  .qc-legal .wrap { grid-template-columns: 1fr; }
  .legal-toc { position: relative; top: auto; max-height: none; }
  .legal-toc ol { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .legal-toc ol { grid-template-columns: 1fr; } }

/* ---------- Language picker (a native <details>, no JavaScript) ---------- */
.lang-picker { position: relative; display: inline-block; margin-top: 20px; }
.lang-picker summary { list-style: none; cursor: pointer; position: relative; background: var(--qc-surface); color: var(--qc-ink); border: 2.5px solid var(--qc-ink); border-radius: 999px; padding: 10px 44px 10px 18px; font: 600 15px/1.2 var(--qc-display); box-shadow: 0 4px 0 rgba(30, 8, 69, .22); }
.lang-picker summary::-webkit-details-marker { display: none; }
.lang-picker summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border: solid var(--qc-ink); border-width: 0 2.5px 2.5px 0; transform: translateY(-72%) rotate(45deg); transition: transform .2s ease; }
.lang-picker[open] summary::after { transform: translateY(-28%) rotate(-135deg); }
.lang-picker ul { position: absolute; z-index: 20; left: 0; top: calc(100% + 10px); min-width: 240px; margin: 0; padding: 8px; list-style: none; background: var(--qc-surface); border: 3px solid var(--qc-ink); border-radius: 20px; box-shadow: 0 8px 0 rgba(30, 8, 69, .2), 0 24px 40px -16px rgba(0, 0, 0, .4); }
.lang-picker li { margin: 0; }
.lang-picker a { display: block; padding: 9px 14px; border-radius: 12px; color: var(--qc-ink); text-decoration: none; font: 800 15px/1.2 var(--qc-body); }
.lang-picker a:hover { background: var(--qc-lavender); }
.lang-picker a[aria-current="true"] { background: var(--qc-yellow); }
.lang-picker summary:focus-visible { outline-color: var(--qc-purple); }

/* Fredoka has no Polish accented letters, so Polish pages use Nunito for headings too */
body.qc-page:lang(pl) { --qc-display: "Nunito", ui-rounded, system-ui, sans-serif; }
body.qc-page:lang(pl) .legal-body h2, body.qc-page:lang(pl) .legal-body h3, body.qc-page:lang(pl) .legal-head h1, body.qc-page:lang(pl) .legal-toc h2, body.qc-page:lang(pl) .legal-summary h2 { font-weight: 800; }