/* Colorify product page. Layout and cards come from brand.css; the sign-in modal from ui.css. */

/* the game's shared UI (sign-in modal, buttons) in EasyDownloads colors */
:root { --cbx-primary: #5a2dff; --cbx-primary-2: #a514f5; --cbx-ink: #0c1140; --cbx-ink-2: #474d75; --cbx-line: #e5e7f4; --cbx-soft: #f5f6fd; }

.file-notice { display: none; position: sticky; top: 0; z-index: 200; padding: 12px 16px; text-align: center; font-weight: 700; color: #92400e; background: #fef3c7; border-bottom: 2px solid #fcd34d; }
.is-file .file-notice { display: block; }

/* ---------- product bar ---------- */
.cf-bar { position: sticky; top: var(--ed-head-h); z-index: 90; height: 60px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--ed-line); border-bottom: 1px solid var(--ed-line); }
.cf-bar-in { display: flex; align-items: center; gap: 24px; height: 100%; }
.cf-name { display: inline-flex; align-items: center; gap: 10px; font-family: 'Fredoka', var(--ed-font); font-size: 1.3rem; font-weight: 700; color: var(--ed-ink); text-decoration: none; letter-spacing: -.01em; }
.cf-name-mark svg { width: 32px; height: 32px; }
.cf-links { display: flex; gap: 2px; }
.cf-links a { padding: 7px 12px; border-radius: 10px; color: var(--ed-ink-2); text-decoration: none; font-weight: 600; font-size: .92rem; }
.cf-links a:hover { background: var(--ed-soft); color: var(--ed-ink); }
.cf-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.cf-actions .cbx-btn { padding: 9px 16px; font-size: .92rem; border-radius: 12px; font-family: var(--ed-font); }
@media (max-width: 760px) { .cf-links { display: none; } }
@media (max-width: 440px) { .cf-actions .head-etsy { display: none; } }
section[id] { scroll-margin-top: calc(var(--ed-head-h) + 72px); }

/* ---------- hero ---------- */
.cf-hero { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 8vw, 104px); isolation: isolate; background: linear-gradient(180deg, #fbfbff, #f3f2ff); }
.cf-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(640px 420px at 0% 10%, rgba(165, 20, 245, .14), transparent 70%),
  radial-gradient(700px 480px at 100% 60%, rgba(11, 180, 255, .16), transparent 70%),
  radial-gradient(400px 260px at 60% 0%, rgba(255, 176, 32, .1), transparent 70%); }
.cf-hero-in { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.cf-eyebrow { display: inline-block; margin-top: 22px; padding: 7px 14px; border-radius: 999px; background: var(--ed-grad-soft); border: 1px solid rgba(90, 45, 255, .16);
  font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ed-primary); }
.cf-hero h1 { margin: 18px 0 18px; font-size: clamp(2.3rem, 4.8vw, 3.8rem); letter-spacing: -.035em; line-height: 1.06; }
.cf-word { font-family: 'Fredoka', var(--ed-font); font-weight: 700; letter-spacing: -.01em; background: linear-gradient(100deg, #a514f5, #5a2dff 40%, #1f5bff 70%, #0bb4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cf-lead { max-width: 34em; margin-bottom: 30px; font-size: clamp(1.03rem, 1.5vw, 1.15rem); color: var(--ed-ink-2); }
.cf-hero .ed-btn [data-icon] { display: inline-grid; }
.cf-hero .ed-btn .ed-ic, .cf-final-sec .ed-btn .ed-ic { width: 16px; height: 16px; fill: currentColor; }
.cf-hero .ed-btn:hover .ed-ic, .cf-final-sec .ed-btn:hover .ed-ic { transform: none; }
.cf-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding: 0; list-style: none; font-size: .93rem; font-weight: 600; color: var(--ed-ink-2); }
.cf-trust li::before { content: '✓'; margin-right: 7px; color: var(--ed-ok); font-weight: 800; }

/* video */
.cf-media { position: relative; }
.cf-video-frame { position: relative; padding: 10px; border-radius: 28px; background: linear-gradient(140deg, rgba(165, 20, 245, .5), rgba(31, 91, 255, .45) 55%, rgba(11, 180, 255, .5)); box-shadow: 0 50px 90px -40px rgba(42, 31, 143, .6), 0 4px 10px rgba(12, 17, 64, .06); }
.cf-video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; background: #e9e6ff; }
.cf-video-toggle { position: absolute; right: 22px; bottom: 22px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(12, 17, 64, .55); color: #fff; backdrop-filter: blur(6px); opacity: .85; transition: opacity .2s, background-color .2s; }
.cf-video-toggle:hover { opacity: 1; background: rgba(12, 17, 64, .75); }
.cf-video-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.cf-video-toggle .i-play, .cf-video-toggle[aria-pressed="true"] .i-pause { display: none; }
.cf-video-toggle[aria-pressed="true"] .i-play { display: block; }
.cf-float { position: absolute; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: var(--ed-shadow-lg); font-family: 'Fredoka', var(--ed-font); font-weight: 600; font-size: .95rem; animation: cf-bob 5s ease-in-out infinite; }
.cf-float-1 { left: -18px; top: 14%; } .cf-float-2 { right: -12px; bottom: 30%; animation-delay: -2.5s; }
@keyframes cf-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

@media (max-width: 960px) {
  .cf-hero-in { grid-template-columns: 1fr; }
  .cf-hero-copy { text-align: center; }
  .cf-hero .ed-crumbs, .cf-hero .ed-cta-row, .cf-trust { justify-content: center; }
  .cf-lead { margin-inline: auto; }
  .cf-media { max-width: 680px; width: 100%; margin-inline: auto; }
}
@media (max-width: 520px) {
  .cf-hero .ed-cta-row .ed-btn { width: 100%; }
  .cf-float { font-size: .82rem; padding: 7px 11px; } .cf-float-1 { left: -4px; top: auto; bottom: -14px; } .cf-float-2 { right: -4px; top: -14px; bottom: auto; }
  .cf-video-frame { padding: 6px; border-radius: 20px; } .cf-video { border-radius: 15px; }
  .cf-video-toggle { right: 14px; bottom: 14px; width: 34px; height: 34px; }
}

/* feature icon tints (kept within the brand palette) */
.cf-features .cf-ic-1 { background: linear-gradient(135deg, #a514f5, #5a2dff); }
.cf-features .cf-ic-2 { background: linear-gradient(135deg, #5a2dff, #1f5bff); }
.cf-features .cf-ic-3 { background: linear-gradient(135deg, #1f5bff, #0bb4ff); }
.cf-features .cf-ic-4 { background: linear-gradient(135deg, #7a22f8, #3a6bff); }
.cf-features .cf-ic-5 { background: linear-gradient(135deg, #4a32ff, #0bb4ff); }
.cf-features .cf-ic-6 { background: linear-gradient(135deg, #a514f5, #1f5bff); }

/* ---------- steps ---------- */
.cf-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.cf-steps li { position: relative; padding: 32px 26px 28px; border-radius: 22px; background: #fff; border: 1px solid var(--ed-line); }
.cf-steps li:not(:last-child)::after { content: ''; position: absolute; top: 52px; right: -22px; width: 22px; height: 2px; background: linear-gradient(90deg, #c6c3ff, transparent); }
.cf-step-n { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 14px; background: var(--ed-grad); color: #fff; font-weight: 800; font-size: 1.1rem; box-shadow: 0 10px 20px -10px rgba(90, 45, 255, .8); }
.cf-steps h3 { margin-bottom: 8px; font-size: 1.2rem; }
.cf-steps p { color: var(--ed-ink-2); }
@media (max-width: 860px) { .cf-steps { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } .cf-steps li::after { display: none; } }

/* ---------- interactive preview (same coloring demo as before) ---------- */
.board { display: grid; grid-template-columns: 1.25fr .75fr; gap: 32px; align-items: center; padding: 26px; border-radius: 28px; background: #fff; border: 1px solid var(--ed-line); box-shadow: var(--ed-shadow-lg); }
.canvas { padding: 12px; border-radius: 20px; background: linear-gradient(180deg, #eaf6ff, #f3eeff); }
.canvas svg { display: block; width: 100%; height: auto; }
.canvas .rg { fill: #fff; stroke: #2d2a32; stroke-width: 3.5; stroke-linejoin: round; cursor: pointer; transition: fill .35s ease, transform .2s; transform-box: fill-box; transform-origin: center; }
.canvas .rg:hover { filter: brightness(.97); }
.canvas .rg.pop { animation: popfill .35s ease; }
@keyframes popfill { 50% { transform: scale(1.05); } }
.canvas .ink { fill: #2d2a32; pointer-events: none; }
.board h3 { margin-bottom: 8px; font-family: 'Fredoka', var(--ed-font); font-size: 1.6rem; font-weight: 600; letter-spacing: 0; }
.board p { color: var(--ed-ink-2); }
.palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0; }
.swatch { aspect-ratio: 1; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 2px var(--ed-line), 0 8px 16px -10px rgba(0, 0, 0, .5); cursor: pointer; transition: transform .15s; }
.swatch:hover { transform: scale(1.08); }
.swatch[aria-pressed=true] { box-shadow: 0 0 0 3px var(--ed-ink), 0 8px 16px -10px rgba(0, 0, 0, .5); transform: scale(1.1); }
.meter { height: 10px; border-radius: 999px; background: var(--ed-soft-2); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: var(--ed-grad); transition: width .4s ease; }
.done-msg { min-height: 1.6em; margin-top: 10px; font-weight: 700; color: var(--ed-primary); }
.board .cbx-btn { font-family: var(--ed-font); }
@media (max-width: 820px) { .board { grid-template-columns: 1fr; padding: 16px; } }

.cf-final-sec { padding-top: 0; }
@media (prefers-reduced-motion: reduce) { .cf-float { animation: none; } }