/* Canvas: CanvasPrism */

@layer custom {
:root {
  --cnvs-themecolor: #FF3D7F;
  --cnvs-themecolor-rgb: 255,61,127;
  --c-ground: #FFFFFF;
  --c-ink: #121212;
  --c-muted: #4A4A4A;
  --c-accent: var(--cnvs-themecolor);
  --c-yellow: #FFE14D;
  --c-blue: #2B3DFF;
  --c-line: #121212;
  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px;
  --space-5: 40px; --space-6: 64px; --space-7: 96px; --space-8: 140px;
  --band: var(--space-7); --band-compact: var(--space-6); --gutter: 24px;
  --radius-s: 12px; --radius-m: 20px;
  --fs-display: clamp(3rem, 8vw, 7rem);
  --fs-h1: clamp(2.5rem, 6vw, 5rem);
  --fs-h2: clamp(2.2rem, 4vw, 3.5rem);
  --fs-h3: 1.5rem;
  --fs-lead: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.875rem;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --cnvs-body-font: "Onest", sans-serif;
  --cnvs-primary-font: "Onest", sans-serif;
  --cnvs-secondary-font: "Anybody", sans-serif;
}
body { font-family: var(--cnvs-body-font); font-size: var(--fs-body); line-height: 1.6; color: var(--c-ink); }
h1, h2, h3 { font-family: var(--cnvs-secondary-font); text-wrap: balance; }
:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 2px; }

.cp-header #header-wrap { background: #fff; border-bottom: 3px solid var(--c-ink); }
.cp-header .cnvs-menu-link { font-family: var(--cnvs-body-font); font-weight: 600; color: var(--c-ink); }
@media (max-width: 991.98px) {
  .cp-header #header-wrap { background: #fff; }
  .cp-header .header-misc .cp-btn { display: none; }
}

.cp-btn { background: var(--c-ink); color: #fff; border: 3px solid var(--c-ink); border-radius: 999px; font-family: var(--cnvs-body-font); font-weight: 600; font-size: var(--fs-small); padding: var(--space-3) var(--space-5); min-height: 44px; text-transform: none; letter-spacing: 0; transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out); }
.cp-btn:active { transform: scale(0.97); }
.cp-btn-yellow { background: var(--c-yellow); color: var(--c-ink); }
.cp-btn-lg { font-size: var(--fs-lead); padding: var(--space-4) var(--space-6); }
@media (hover: hover) and (pointer: fine) {
  .cp-btn:hover { transform: translateY(-2px); background: var(--c-ink); color: #fff; }
  .cp-btn-yellow:hover { background: #fff; color: var(--c-ink); }
}

.cp-display { font-size: var(--fs-display); line-height: 1; font-weight: 900; letter-spacing: -0.02em; }
.cp-h2 { font-size: var(--fs-h2); line-height: 1.1; font-weight: 800; margin-bottom: var(--space-3); }
.cp-lead { font-size: var(--fs-lead); line-height: 1.5; font-weight: 500; max-width: 50ch; }
.cp-sub { margin-bottom: var(--space-6); }
.cp-band { padding: var(--band) 0; }
.cp-white { background: var(--c-ground); }
.cp-blue { background: var(--c-blue); color: #fff; }
.cp-pink { background: var(--c-accent); color: var(--c-ink); }
.cp-yellow { background: var(--c-yellow); }
.cp-ink { background: var(--c-ink); color: #fff; }
.cp-blue h2, .cp-ink h2, .cp-pink.dark h2 { color: #fff; }
.cp-pink h2 { color: var(--c-ink); }
.cp-pink.dark { background: #D6195C; }
.cp-pink.dark h2 { color: #fff; }
.cp-pink.dark .cp-btn-yellow { color: var(--c-ink); }

.cp-hero { position: relative; min-height: 90vh; display: flex; align-items: center; overflow: hidden; background: var(--c-ink); }
.cp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,18,18,0.88) 0%, rgba(18,18,18,0.6) 50%, rgba(18,18,18,0.1) 100%); }
.cp-hero-inner { position: relative; padding-top: var(--space-6); padding-bottom: var(--space-6); }
.cp-hero .cp-display { color: #fff; max-width: 9em; margin-bottom: var(--space-4); }
.cp-hero .cp-lead { color: #fff; margin-bottom: var(--space-5); }
.cp-chip { position: absolute; background: var(--c-yellow); color: var(--c-ink); border: 3px solid var(--c-ink); border-radius: var(--radius-s); padding: var(--space-2) var(--space-3); font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; animation: cp-float 4s ease-in-out infinite; }
.cp-chip-1 { right: 18%; top: 22%; }
.cp-chip-2 { right: 6%; top: 46%; animation-delay: 1s; background: var(--c-accent); }
.cp-chip-3 { right: 22%; bottom: 16%; animation-delay: 2s; }
@keyframes cp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 1023.98px) { .cp-chip { display: none; } }

.cp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.cp-tile { position: relative; border: 3px solid var(--c-line); border-radius: var(--radius-m); padding: var(--space-5); min-height: 260px; overflow: hidden; transition: transform 200ms var(--ease-out); }
.cp-tile i { font-size: 2rem; display: block; margin-bottom: var(--space-3); }
.cp-tile h3 { font-size: var(--fs-h3); font-weight: 800; margin-bottom: var(--space-2); }
.cp-tile p { font-size: var(--fs-body); margin: 0; }
.cp-tile-pink { background: var(--c-accent); color: var(--c-ink); }
.cp-tile-yellow { background: var(--c-yellow); }
.cp-tile-blue { background: var(--c-blue); color: #fff; }
.cp-tile-ink { background: var(--c-ink); color: #fff; }
.cp-tile-line { background: #fff; }
.cp-tile-photo { padding: 0; }
.cp-tile-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-tile-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-4); background: rgba(18,18,18,0.82); color: #fff; }
.cp-tile-cap h3, .cp-tile-cap p { color: #fff; }
.cp-count { margin-top: var(--space-5); font-family: var(--cnvs-secondary-font); font-weight: 800; font-size: var(--fs-h3); }
@media (hover: hover) and (pointer: fine) { .cp-tile:hover { transform: translateY(-6px) rotate(-1deg); } }
@media (max-width: 1023.98px) { .cp-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .cp-tiles { grid-template-columns: 1fr; } }

.cp-list { list-style: none; padding: 0; margin: var(--space-5) 0 0; }
.cp-list li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) 0; font-size: var(--fs-body); }
.cp-list i { font-size: 1.25rem; flex: none; }

.cp-editor { background: #fff; color: var(--c-ink); border: 3px solid var(--c-ink); border-radius: var(--radius-m); overflow: hidden; }
.cp-editor-bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-bottom: 3px solid var(--c-ink); background: var(--c-yellow); }
.cp-editor-bar span { width: 12px; height: 12px; border-radius: 50%; background: var(--c-ink); }
.cp-editor-bar strong { margin-left: var(--space-3); font-size: var(--fs-small); }
.cp-editor-body { display: grid; grid-template-columns: 64px 1fr 170px; }
.cp-editor-side { display: flex; flex-direction: column; gap: var(--space-4); align-items: center; padding: var(--space-4) 0; border-right: 3px solid var(--c-ink); font-size: 1.25rem; }
.cp-editor-canvas { position: relative; padding: var(--space-4); background: #EEE; }
.cp-editor-canvas img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-s); display: block; }
.cp-post-title { position: absolute; left: var(--space-5); bottom: var(--space-5); background: var(--c-yellow); border: 3px solid var(--c-ink); padding: var(--space-2) var(--space-3); font-family: var(--cnvs-secondary-font); font-weight: 900; font-size: var(--fs-h3); color: var(--c-ink); }
.cp-editor-props { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-3); border-left: 3px solid var(--c-ink); font-size: var(--fs-small); }
.cp-editor-props b { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.08em; }
.cp-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--c-accent); border: 3px solid var(--c-ink); margin-bottom: var(--space-2); }
@media (max-width: 575.98px) {
  .cp-editor-body { grid-template-columns: 1fr; }
  .cp-editor-side, .cp-editor-props { display: none; }
}

.cp-kits { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); align-items: start; margin-bottom: var(--space-5); }
.cp-kit { background: #fff; border: 3px solid var(--c-ink); border-radius: var(--radius-m); padding: var(--space-5); }
.cp-kit:nth-child(2) { margin-top: var(--space-4); }
.cp-kit h3 { font-size: var(--fs-h3); font-weight: 800; margin-bottom: var(--space-4); }
.cp-marks, .cp-swatches { display: flex; gap: var(--space-3); }
.cp-mark { width: 64px; height: 64px; display: grid; place-items: center; font-family: var(--cnvs-secondary-font); font-weight: 900; font-size: var(--fs-h3); border: 3px solid var(--c-ink); }
.cp-mark-1 { background: var(--c-yellow); border-radius: 50%; }
.cp-mark-2 { background: var(--c-blue); color: #fff; border-radius: var(--radius-s); }
.cp-mark-3 { background: var(--c-accent); border-radius: 0; }
.cp-swatches span { flex: 1; height: 80px; border: 3px solid var(--c-ink); border-radius: var(--radius-s); }
.sw1 { background: var(--c-accent); } .sw2 { background: var(--c-yellow); } .sw3 { background: var(--c-blue); } .sw4 { background: var(--c-ink); } .sw5 { background: #fff; }
.cp-fontdemo span { display: block; font-family: var(--cnvs-secondary-font); font-weight: 900; font-size: 4rem; line-height: 1; }
.cp-fontdemo small { font-size: var(--fs-small); color: var(--c-muted); }
.cp-wide { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border: 3px solid var(--c-ink); border-radius: var(--radius-m); display: block; margin-top: var(--space-5); }
@media (max-width: 1023.98px) { .cp-kits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .cp-kits { grid-template-columns: 1fr; } .cp-kit:nth-child(2) { margin-top: 0; } }

.cp-collab { position: relative; }
.cp-photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: 3px solid var(--c-ink); border-radius: var(--radius-m); display: block; }
.cp-bubble { position: absolute; right: var(--space-3); top: calc(-1 * var(--space-4)); background: var(--c-yellow); border: 3px solid var(--c-ink); border-radius: 999px; padding: var(--space-3) var(--space-4); font-weight: 600; transform: rotate(-3deg); }
.cp-steps { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: var(--space-4); }
.cp-steps li { display: flex; gap: var(--space-3); align-items: flex-start; }
.cp-steps i { font-size: 1.5rem; width: 48px; height: 48px; flex: none; display: grid; place-items: center; background: var(--c-accent); border: 3px solid var(--c-ink); border-radius: 50%; }
.cp-steps strong { display: block; font-size: var(--fs-lead); }
.cp-steps span { font-size: var(--fs-small); color: var(--c-muted); }

.cp-formats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); margin-top: var(--space-6); }
.cp-formats div { border-top: 1px solid #fff; padding-top: var(--space-3); }
.cp-formats strong { display: block; font-family: var(--cnvs-secondary-font); font-weight: 900; font-size: var(--fs-h1); line-height: 1.05; }
.cp-formats div:nth-child(1) strong { color: var(--c-accent); }
.cp-formats div:nth-child(2) strong { color: var(--c-yellow); }
.cp-formats div:nth-child(3) strong { color: #8E98FF; }
.cp-formats div:nth-child(4) strong { color: #fff; }
.cp-formats span { display: block; margin-top: var(--space-2); font-size: var(--fs-small); color: #fff; }
@media (max-width: 575.98px) { .cp-formats { grid-template-columns: 1fr 1fr; } }

.cp-plans { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gutter); align-items: start; }
.cp-plan { background: #fff; border: 3px solid var(--c-ink); border-radius: var(--radius-m); padding: var(--space-5); }
.cp-plan h3 { font-size: var(--fs-h3); font-weight: 800; }
.cp-price { font-family: var(--cnvs-secondary-font); font-weight: 900; font-size: var(--fs-h1); line-height: 1.1; margin: var(--space-3) 0 0; }
.cp-price small { font-family: var(--cnvs-body-font); font-size: var(--fs-small); font-weight: 500; }
.cp-plan-pro { background: var(--c-ink); color: #fff; margin-top: calc(-1 * var(--space-3)); }
.cp-plan-pro h3, .cp-plan-pro .cp-price { color: #fff; }
.cp-plan-pro .cp-btn { margin-top: var(--space-4); }
@media (max-width: 991.98px) { .cp-plans { grid-template-columns: 1fr; } .cp-plan-pro { margin-top: 0; } }

.cp-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); margin-top: var(--space-6); }
.cp-quote { margin: 0; padding: var(--space-5); border: 3px solid var(--c-ink); border-radius: var(--radius-m); transition: transform 200ms var(--ease-out); }
.cp-quote p { font-size: var(--fs-lead); font-weight: 500; line-height: 1.4; margin-bottom: var(--space-4); }
.cp-quote footer { font-size: var(--fs-small); font-weight: 600; }
.cp-quote-pink { background: var(--c-accent); color: var(--c-ink); }
.cp-quote-blue { background: var(--c-blue); color: #fff; }
.cp-quote-yellow { background: var(--c-yellow); color: var(--c-ink); }
.cp-quote { position: relative; --rx: 0deg; --ry: 0deg; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); }
.cp-quote .cx-tz { position: absolute; z-index: 2; width: 33.34%; height: 33.34%; }
.cp-quote .cx-tz:nth-child(3n+1) { left: 0; } .cp-quote .cx-tz:nth-child(3n+2) { left: 33.33%; } .cp-quote .cx-tz:nth-child(3n) { left: 66.66%; }
.cp-quote .cx-tz:nth-child(-n+3) { top: 0; } .cp-quote .cx-tz:nth-child(n+4):nth-child(-n+6) { top: 33.33%; } .cp-quote .cx-tz:nth-child(n+7) { top: 66.66%; }
.cp-quote:has(.cx-tz:nth-child(1):hover) { --rx: 7deg; --ry: -7deg; }
.cp-quote:has(.cx-tz:nth-child(2):hover) { --rx: 7deg; }
.cp-quote:has(.cx-tz:nth-child(3):hover) { --rx: 7deg; --ry: 7deg; }
.cp-quote:has(.cx-tz:nth-child(4):hover) { --ry: -7deg; }
.cp-quote:has(.cx-tz:nth-child(6):hover) { --ry: 7deg; }
.cp-quote:has(.cx-tz:nth-child(7):hover) { --rx: -7deg; --ry: -7deg; }
.cp-quote:has(.cx-tz:nth-child(8):hover) { --rx: -7deg; }
.cp-quote:has(.cx-tz:nth-child(9):hover) { --rx: -7deg; --ry: 7deg; }
@media (hover: none) { .cp-quote .cx-tz { display: none; } }

.cp-close-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gutter); align-items: center; }
.cp-close-copy .cp-close { margin: 0 0 var(--space-5); max-width: 10em; }
.cp-close-fig { margin: 0; position: relative; }
.cp-close-fig img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 3px solid var(--c-ink); border-radius: var(--radius-m); display: block; }
.cp-close-fig figcaption { position: relative; margin: calc(-1 * var(--space-5)) var(--space-4) 0 calc(-1 * var(--space-5)); background: var(--c-yellow); color: var(--c-ink); border: 3px solid var(--c-ink); border-radius: var(--radius-s); padding: var(--space-3) var(--space-4); font-size: var(--fs-small); font-weight: 600; max-width: 28ch; }
@media (max-width: 991.98px) { .cp-close-grid { grid-template-columns: 1fr; } .cp-close-fig figcaption { margin-left: var(--space-3); } }
@media (max-width: 991.98px) { .cp-quotes { grid-template-columns: 1fr; } }

.cp-close { max-width: 12em; margin: 0 auto var(--space-5); color: #fff; }

.cp-footer { --cnvs-footer-bg: #121212; overflow: hidden; }
.cp-ftag { margin-top: var(--space-3); max-width: 32ch; color: #fff; }
.cp-flinks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.cp-flinks strong { color: var(--c-yellow); }
#footer .footer-widgets-wrap .cp-flinks a { color: #fff; }
#footer .footer-widgets-wrap a.cp-btn-yellow { color: var(--c-ink); }
.cp-footer .footer-widgets-wrap { container-type: inline-size; }
.cp-wordmark { margin: var(--space-6) 0 0; font-family: var(--cnvs-secondary-font); font-weight: 900; font-size: min(200px, 100cqi / 8.2); line-height: 1; color: var(--c-yellow); text-align: center; max-width: 100%; overflow-wrap: anywhere; }
#footer #copyrights { color: #fff; }
#footer #copyrights a { color: var(--c-yellow); }

@media (max-width: 575.98px) { .cp-band { padding: calc(var(--band) / 2) 0; } }
@media (prefers-reduced-motion: reduce) {
  .cp-chip { animation: none; }
  .cp-tile, .cp-quote, .cp-btn { transition: none; }
}

:where(img[width][height]){height:auto}

:is(.content-wrap,.section):has([data-cx]){overflow-x:clip;overflow-y:visible}

.content-wrap {
  padding-top: 0;
  padding-bottom: 0;
}

.section {
  margin-top: 0;
  margin-bottom: 0;
}

#copyrights a:not(.button) { text-decoration: underline !important; text-underline-offset: 0.2em; }
}