/* Clickpad by WeReno — clickpad.com. The handyman.ai design language (Funnel Display / Funnel Sans,
   page #FAF7F6, ink #161616, pill-word headline, pill buttons, full-screen menu), with Clickpad violet
   #6A00F8 in place of the lavender pill and lime #DDF160 kept as the second colour. Built at 1440 first,
   then folded at 1360 / 1100 / 760 (see the end of this file). */
@font-face {font-family: "Funnel Display"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/assets/fonts/funnel-display-v3-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: "Funnel Display"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/assets/fonts/funnel-display-v3-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: "Funnel Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/assets/fonts/funnel-sans-v3-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: "Funnel Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/assets/fonts/funnel-sans-v3-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root {--hm-display: "Funnel Display", "Avenir Next", system-ui, sans-serif; --hm-body: "Funnel Sans", "Helvetica Neue", system-ui, sans-serif; --bo-mono: ui-monospace, "SF Mono", Menlo, monospace;}
*, *::before, *::after {box-sizing: border-box;}
html {-webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: #FAF7F6;}
body {margin: 0; min-height: 100vh;}
.cp {--pg: #FAF7F6; --ik: #161616; --ik2: #303030; --mu: #585858; --mu2: #B2AEAD; --ln: #E0DDDB; --vi: #6A00F8; --vt: #EFE5FF; --li: #DDF160;
  --gr: #3F9A44; --indic: "Gurmukhi MN", "Noto Sans Gurmukhi", "Kohinoor Devanagari", "Noto Sans Devanagari", sans-serif;
  position: relative; overflow: hidden; color: var(--ik); font-family: var(--hm-body), var(--indic); font-size: 18px; line-height: 1.6; text-align: left;
  background: radial-gradient(900px 640px at 0% 0%, rgba(106, 0, 248, .07), transparent 70%), radial-gradient(900px 900px at 100% 18%, rgba(221, 241, 96, .17), transparent 70%), var(--pg);}
.cp :where(h1) {font-family: var(--hm-display), var(--indic); font-weight: 600; margin: 0; color: inherit;}
.cp :where(h2) {font-family: var(--hm-display), var(--indic); font-weight: 600; margin: 0; color: inherit;}
.cp :where(h3) {font-family: var(--hm-display), var(--indic); font-weight: 600; margin: 0; color: inherit;}
.cp :where(h4) {font-family: var(--hm-display), var(--indic); font-weight: 600; margin: 0; color: inherit;}
.cp :where(p) {margin: 0;}
.cp :where(a) {text-decoration: none; color: inherit;}
.cp :where(button) {border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer;}
.cp :where(ul) {list-style: none; margin: 0; padding: 0;}
.cp :where(img) {max-width: none;}
.cp-hdr {position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; padding: 40px 60px 0;}
.cp-logo {display: inline-flex; align-items: center; gap: 16px;}
.cp-wm {height: 50px; width: auto; display: block;}
.cp-by {display: inline-flex; align-items: center; gap: 7px; padding-left: 16px; border-left: 1.5px solid var(--ln); height: 34px; font: 500 15px/1 var(--hm-body); color: var(--mu);}
.cp-by i {font-style: normal;}
.cp-by img {display: block;}
.cp-hdr-r {display: flex; align-items: center; gap: 18px;}
.cp-rnd {width: 56px; height: 56px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;}
.cp-rnd-k {background: var(--ik); color: #fff;}
.cp-rnd-o {border: 2px solid var(--ik);}
.cp-btn {display: inline-flex; align-items: center; justify-content: center; gap: 14px; height: 56px; padding: 0 22px; border-radius: 28px; font: 600 22px/1 var(--hm-display); white-space: nowrap; letter-spacing: -.01em;}
.cp-btn-o {border: 2px solid var(--ik); padding: 0 20px;}
.cp-btn-ow {border: 2px solid #fff; color: #fff; height: 48px; font-size: 18px; border-radius: 24px; padding: 0 18px; gap: 8px;}
.cp-btn-k {background: var(--ik); color: #fff;}
.cp-btn-l {background: var(--li); color: var(--ik);}
.cp-btn-lg {height: 84px; border-radius: 42px; font-size: 30px; padding: 0 34px; gap: 18px;}
.cp-btn-s {height: 44px; border-radius: 22px; border: 1.5px solid var(--ik); font: 500 16px/1 var(--hm-body); padding: 0 16px; gap: 8px;}
.cp-btn-m {height: 64px; border-radius: 32px; font-size: 22px; padding: 0 26px;}
.cp-btn-w {width: 100%; justify-content: space-between; height: 60px; border-radius: 30px; font-size: 20px; padding: 0 26px;}
.cp-burger {width: 56px; height: 56px; border-radius: 50%; background: var(--ik); display: inline-flex; flex-direction: column; gap: 7px; align-items: center; justify-content: center; flex: none;}
.cp-burger i {width: 26px; height: 3px; border-radius: 2px; background: #fff; display: block;}
.cp-label {display: inline-flex; gap: 10px; align-items: center; font: 500 17px/1.2 var(--hm-body); color: var(--ik);}
.cp-label svg {color: var(--vi);}
.cp-label.d {color: #fff;}
.cp-label.d svg {color: var(--li);}
.cp-hero {position: relative; height: 1140px; text-align: center; padding-top: 46px;}
.cp-badge {display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; background: #fff; border: 1px solid var(--ln); border-radius: 999px; font: 600 16px/1 var(--hm-body); color: var(--ik);}
.cp-badge span {color: var(--mu); font-weight: 400;}
.cp-badge img {display: block;}
.cp-dot {width: 8px; height: 8px; border-radius: 50%; background: var(--vi); display: inline-block;}
.cp-h1 {font: 600 120px/132px var(--hm-display); letter-spacing: -.6px; margin: 26px auto 0;}
.cp-pill {display: inline-block; background: var(--vi); color: #fff; border-radius: 999px; padding: .02em .22em .1em; line-height: 1;}
.cp-pill.lime {background: var(--li); color: var(--ik);}
.cp-hstar {display: inline-block; vertical-align: middle; margin-left: 6px;}
.cp-hstar svg {display: block;}
.cp-hero-cta {display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 40px;}
.cp-round {width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle at 30% 20%, #fff, #F3F0F8); box-shadow: rgba(22, 22, 22, .06) 0 0 0 1px, rgba(22, 22, 22, .35) 0 18px 30px -18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px; font-size: 12px; line-height: 1.3;}
.cp-round-l .cp-bub-me {margin: 0;}
.cp-round-l .cp-bub-click {align-self: flex-start; margin-left: 6px;}
.cp-round-r b {font: 600 13px var(--hm-body);}
.cp-round-r small {font-size: 11px; color: var(--gr); display: inline-flex; gap: 4px; align-items: center; background: rgba(76, 175, 80, .12); border-radius: 999px; padding: 2px 7px;}
.cp-okc {width: 30px; height: 30px; border-radius: 50%; background: var(--gr); color: #fff; display: grid; place-items: center;}
.cp-tile {position: absolute; width: 194px; height: 194px; border-radius: 24px; background: linear-gradient(160deg, #fff, #F3EEFF); box-shadow: rgba(22, 22, 22, .06) 0 0 0 1px, rgba(22, 22, 22, .35) 0 22px 40px -24px; padding: 18px 16px; text-align: left; line-height: 1.3;}
.cp-tile-a {left: 150px; top: 150px;}
.cp-tile-b {right: 150px; top: 150px; background: linear-gradient(160deg, #fff, #F4F9DD);}
.cp-mini-h {display: flex; align-items: center; gap: 8px;}
.cp-mini-h b {display: block; font-size: 13px;}
.cp-mini-h small {display: block; font-size: 10.5px; color: var(--mu);}
.cp-tile-msg {background: #F1ECFF; border-radius: 12px; padding: 9px 11px; font-size: 12.5px; margin-top: 12px;}
.cp-chip-g {display: inline-flex; gap: 4px; align-items: center; background: rgba(76, 175, 80, .14); color: var(--gr); font: 600 11.5px/1 var(--hm-body); border-radius: 999px; padding: 5px 9px;}
.cp-tile-money b {display: block; font: 600 17px var(--hm-display); margin-top: 18px;}
.cp-tile-money small {display: block; font-size: 12px; color: var(--mu);}
.cp-tile-lines i {display: block; height: 6px; border-radius: 3px; background: #E9E6E1; margin-top: 9px;}
.cp-tile-lines i:nth-child(2) {width: 78%;}
.cp-tile-lines i:nth-child(3) {width: 55%;}
.cp-peek {position: absolute; display: block;}
.cp-peek-1 {left: 52px; top: 560px; transform: rotate(-12deg);}
.cp-peek-2 {right: 84px; top: 470px; transform: rotate(10deg);}
.cp-hero-low {position: absolute; left: 60px; right: 60px; top: 920px; border-top: 2px dashed #D9D4D2; display: grid; grid-template-columns: 200px 440px 200px 1fr; gap: 40px; padding-top: 40px; text-align: left; align-items: start;}
.cp-hero-low p {font-size: 17px; line-height: 1.65; color: var(--ik2);}
.cp-hero-low ul li {display: flex; gap: 12px; align-items: center; font-size: 18px; line-height: 1.6;}
.cp-spin {position: relative; width: 120px; height: 120px; margin-top: -10px;}
.cp-spin svg {width: 120px; height: 120px; animation: cpspin 22s linear infinite; display: block;}
.cp-spin text {font: 600 10.5px var(--hm-body); letter-spacing: 2.2px; fill: var(--ik);}
.cp-spin .cp-face {position: absolute; left: 40px; top: 40px;}
@keyframes cpspin {to {transform: rotate(360deg);}
}
.cp-launch {position: relative; justify-self: end; width: 290px; margin-top: 18px;}
.cp-launch-film {width: 290px; border-radius: 18px; box-shadow: rgba(22, 22, 22, .06) 0 0 0 1px, rgba(22, 22, 22, .35) 0 18px 36px -22px;}
.cp-launch .cp-watch-pill {position: absolute; right: -10px; top: -26px; z-index: 3;}
.cp-film {position: relative; overflow: hidden; border-radius: 24px; aspect-ratio: 16 / 9; background: radial-gradient(120% 90% at 15% 0%, #E9DDFF, transparent 60%), radial-gradient(90% 90% at 100% 100%, #EEF6C8, transparent 60%), #F5F1FF;}
.cp-film video {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; display: block; max-width: none;}
.cp-sec {position: relative; padding: 0 60px; margin-top: 140px;}
.cp-sec-head {display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 14px 40px; margin-bottom: 44px;}
.cp-sec-head h2 {font-size: 60px; line-height: 1.04; letter-spacing: -1.8px; grid-column: 1;}
.cp-sec-head .cp-label {grid-column: 1;}
.cp-sec-head .cp-btn {grid-column: 2; grid-row: 2;}
.cp-herofilm {margin-top: 120px;}
.cp-herofilm-head {display: grid; gap: 14px; margin-bottom: 36px;}
.cp-herofilm-head h2 {font-size: 60px; line-height: 1.04; letter-spacing: -1.8px;}
.cp-bigfilm {position: relative; margin: 0 40px;}
.cp-film-big {border-radius: 50px;}
.cp-mfilm {display: none;}
.cp-float {position: absolute; z-index: 3;}
.cp-ui {background: #fff; border-radius: 18px; padding: 16px 18px; box-shadow: rgba(22, 22, 22, .06) 0 0 0 1px, rgba(22, 22, 22, .35) 0 18px 36px -22px; font-size: 13px; line-height: 1.4; text-align: left; color: var(--ik);}
.cp-ui small {display: block; color: var(--mu); font-size: 12px;}
.cp-ui-h {display: flex; align-items: center; gap: 10px; margin-bottom: 6px;}
.cp-ui-h b {font: 600 15px/1.2 var(--hm-display); flex: 1;}
.cp-ic {width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; flex: none;}
.cp-ic.v {background: rgba(106, 0, 248, .1); color: var(--vi);}
.cp-ic.g {background: rgba(76, 175, 80, .14); color: var(--gr);}
.cp-ic.a {background: rgba(230, 160, 50, .18); color: #B97716;}
.cp-tag {font: 600 11px/1 var(--hm-body); padding: 5px 8px; border-radius: 999px; background: var(--vt); color: var(--vi); white-space: nowrap; display: inline-flex; gap: 3px; align-items: center;}
.cp-tag.a {background: rgba(230, 160, 50, .18); color: #9A620F;}
.cp-tag.g {background: rgba(76, 175, 80, .14); color: #2F7A33;}
.cp-row {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid #F0ECEA;}
.cp-row > span:first-child {min-width: 0;}
.cp-row b {font-weight: 600; font-size: 13.5px; display: block;}
.cp-row > svg {color: var(--gr); flex: none;}
.cp-bar {width: 84px; height: 6px; border-radius: 3px; background: #EFEAE8; flex: none; overflow: hidden; display: block;}
.cp-bar i {display: block; height: 100%; border-radius: 3px; background: var(--vi);}
.cp-bar i.g {background: var(--gr);}
.cp-ui-p {font-size: 13.5px; color: var(--ik2); margin: 6px 0 12px;}
.cp-chips {display: flex; gap: 6px; flex-wrap: wrap;}
.cp-chips span {display: inline-flex; gap: 4px; align-items: center; padding: 5px 9px; border-radius: 999px; background: rgba(76, 175, 80, .12); color: #2F7A33; font-weight: 600; font-size: 12px;}
.cp-chips span.o {background: var(--vt); color: var(--vi);}
.cp-doc-top {display: flex; justify-content: space-between; align-items: center;}
.cp-doc-top b {font: 600 19px var(--hm-display);}
.cp-doc > small {margin: 2px 0 8px;}
.cp-li {display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #F0ECEA; font-size: 13px;}
.cp-li i {width: 54px; height: 8px; border-radius: 4px; background: #EFEAE8; display: block;}
.cp-li svg {color: var(--gr);}
.cp-doc-btn {margin-top: 10px; height: 36px; border-radius: 18px; background: var(--ik); color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 13px var(--hm-display);}
.cp-sig {width: 100%; height: 58px; margin: 6px 0 8px; border-bottom: 1.5px dashed #D9D4D2; display: block;}
.cp-proof {display: flex; gap: 6px;}
.cp-proof span {display: inline-flex; gap: 5px; align-items: center; font-size: 11.5px; font-weight: 600; padding: 5px 9px; border-radius: 999px; background: #F4F1F0;}
.cp-st {font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: #F4F1F0; color: var(--ik2); flex: none;}
.cp-st.g {background: rgba(76, 175, 80, .14); color: #2F7A33;}
.cp-st.a {background: var(--vt); color: var(--vi);}
.cp-mini {font: 600 12px/1 var(--hm-display); padding: 7px 13px; border-radius: 999px; background: var(--ik); color: #fff; flex: none;}
.cp-prog {margin-top: 10px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--mu);}
.cp-prog .cp-bar {width: 130px;}
.cp-eyebrow {font: 600 10.5px/1.2 var(--bo-mono); letter-spacing: .08em; color: var(--mu); display: block;}
.cp-wrong {margin-top: 10px; display: flex; justify-content: center; align-items: center; gap: 6px; height: 36px; border-radius: 18px; border: 1.5px solid var(--ik); font: 600 13px var(--hm-display);}
.cp-siteprev {position: relative; width: 340px; border-radius: 16px; background: #fff; padding: 8px; box-shadow: rgba(22, 22, 22, .06) 0 0 0 1px, rgba(22, 22, 22, .35) 0 18px 36px -22px;}
.cp-siteprev img {width: 100%; height: 210px; object-fit: cover; object-position: top; border-radius: 10px; display: block;}
.cp-siteprev .cp-bub {font-size: 12.5px; padding: 7px 11px;}
.cp-sitebar {display: flex; gap: 5px; margin-top: 8px; font-size: 11px;}
.cp-sitebar span {padding: 5px 8px; border-radius: 999px; background: #F4F1F0; display: inline-flex; gap: 4px; align-items: center;}
.cp-sitebar b {margin-left: auto; padding: 5px 12px; border-radius: 999px; background: var(--vi); color: #fff;}
.cp-bub {font: 400 14.5px/1.4 var(--hm-body), var(--indic); padding: 10px 14px; border-radius: 18px; text-align: left; width: fit-content; max-width: 100%;}
.cp-bub-me {background: var(--vi); color: #fff; border-bottom-right-radius: 6px; margin-left: auto;}
.cp-bub-click {display: flex; gap: 8px; align-items: flex-start; background: #fff; color: var(--ik); border-bottom-left-radius: 6px; box-shadow: rgba(22, 22, 22, .08) 0 0 0 1px, rgba(22, 22, 22, .25) 0 10px 22px -16px; margin-right: auto;}
.cp-bub.sm {font-size: 11px; padding: 5px 8px; border-radius: 10px;}
.cp-face {border-radius: 50%; background: #fff; object-fit: contain; flex: none; display: block;}
.cp-facts {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 0 180px; margin-top: 70px;}
.cp-fact {border-radius: 22px; padding: 20px 22px; border: 1px solid rgba(22, 22, 22, .07); min-height: 146px; display: flex; flex-direction: column;}
.cp-fact b {font: 600 30px/1.1 var(--hm-display); letter-spacing: -1px; margin-top: auto;}
.cp-fact small {font-size: 14px; color: var(--mu); line-height: 1.35; margin-top: 4px;}
.cp-emo {font-size: 34px; line-height: 1;}
.t-lav {background: linear-gradient(140deg, #EFE6FF, #F8F5FF);}
.t-mint {background: linear-gradient(140deg, #E3F2E7, #F4F8F2);}
.t-peach {background: linear-gradient(140deg, #FBE6DC, #FDF5F0);}
.t-lime {background: linear-gradient(140deg, #EFF6CF, #F9FBEC);}
.cp-steps {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;}
.cp-step {background: #fff; border-radius: 26px; padding: 14px 14px 32px; box-shadow: rgba(127, 127, 127, .18) 0 0 0 1px;}
.cp-step-vis {height: 300px; border-radius: 18px; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 30px;}
.cp-step-vis .cp-ui {margin: 0 auto;}
.cp-num {display: block; font: 600 14px var(--bo-mono); color: var(--vi); margin: 24px 16px 6px;}
.cp-step h3 {font-size: 34px; line-height: 1.1; margin: 0 16px; letter-spacing: -.6px;}
.cp-step p {margin: 10px 16px 0; color: var(--mu); font-size: 17px;}
.cp-dots {display: inline-flex; gap: 3px;}
.cp-dots i {width: 6px; height: 6px; border-radius: 50%; background: var(--vi); display: block; opacity: .45;}
.cp-yn {display: flex; gap: 8px; margin-top: 12px;}
.cp-yn span {flex: 1; height: 36px; border-radius: 18px; display: grid; place-items: center; font: 600 14px var(--hm-display); border: 1.5px solid var(--ik);}
.cp-yn .y {background: var(--ik); color: #fff;}
.cp-marq {overflow: hidden; margin-top: 140px; padding: 6px 0;}
.cp-marq-in {display: flex; width: max-content; animation: cpmarq 46s linear infinite;}
.cp-mw {display: inline-flex; align-items: center; gap: 34px; padding-right: 34px; font: 500 96px/1.15 var(--hm-display); color: var(--mu2); letter-spacing: -2px; white-space: nowrap;}
.cp-mw i {color: var(--vi); display: inline-flex;}
@keyframes cpmarq {to {transform: translateX(-50%);}
}
.cp-fgrid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;}
.cp-ftile {background: #fff; border-radius: 26px; padding: 12px; box-shadow: rgba(127, 127, 127, .18) 0 0 0 1px;}
.cp-fvis {height: 320px; border-radius: 18px; display: grid; place-items: center; overflow: hidden; position: relative;}
.cp-fvis > * {transform: scale(.82);}
.cp-fcap {padding: 20px 14px 12px;}
.cp-fcap h3 {font-size: 26px; line-height: 1.1; letter-spacing: -.5px;}
.cp-fcap p {font-size: 15.5px; color: var(--mu); margin-top: 8px; line-height: 1.5;}
.cp-langs {margin: 140px 40px 0; background: var(--ik); color: #fff; border-radius: 50px; padding: 90px 60px 70px;}
.cp-langs-head {display: grid; grid-template-columns: 1fr 420px; gap: 16px 60px; align-items: end; margin-bottom: 50px;}
.cp-langs-head h2 {font-size: 72px; line-height: 1.05; letter-spacing: -2px; grid-column: 1;}
.cp-langs-head p {color: #ACACAC; font-size: 18px; grid-column: 2; grid-row: 2;}
.cp-lgrid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;}
.cp-lang {background: #1F1F1F; border-radius: 26px; padding: 16px; border: 1px solid #2C2C2C; display: flex; flex-direction: column; color: #fff;}
.cp-lang-h {display: flex; align-items: baseline; gap: 8px; padding: 6px 6px 14px; border-bottom: 1px solid #2C2C2C;}
.cp-lang-h b {font: 600 24px/1.2 var(--hm-display), var(--indic);}
.cp-lang-h span {color: #838383; font-size: 14px;}
.cp-lang-h i {margin-left: auto; font-style: normal; font-size: 12px; color: #ACACAC; display: inline-flex; gap: 4px; align-items: center;}
.cp-lang-body {display: flex; flex-direction: column; gap: 10px; padding: 16px 2px; flex: 1;}
.cp-lang .cp-bub-click {background: #2C2C2C; color: #F2F2F2; box-shadow: none;}
.cp-lang .cp-bub {font-size: 14px;}
.cp-gloss {font-size: 13px; line-height: 1.45; color: #8C8C8C; padding: 12px 6px 4px; border-top: 1px solid #2C2C2C;}
.cp-pteaser {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center;}
.cp-pt-l h2 {font-size: 60px; line-height: 1.04; letter-spacing: -1.8px; margin: 14px 0 20px;}
.cp-pt-l p {color: var(--mu); max-width: 520px; margin-bottom: 30px;}
.cp-pt-r {display: grid; grid-template-columns: 1fr 1fr; gap: 18px;}
.cp-pcard {background: #fff; border-radius: 26px; padding: 34px 30px; box-shadow: rgba(127, 127, 127, .18) 0 0 0 1px;}
.cp-pcard.sm h3 {font-size: 28px; line-height: 1.12; margin: 18px 0 10px; letter-spacing: -.5px;}
.cp-pcard p {color: var(--mu); font-size: 16px;}
.cp-pcard.sm .cp-btn {margin-top: 18px;}
.cp-ptag {display: inline-flex; gap: 6px; align-items: center; font: 600 13px/1 var(--hm-body); padding: 7px 12px; border-radius: 999px;}
.cp-ptag.v {background: var(--vi); color: #fff;}
.cp-ptag.l {background: var(--li); color: var(--ik);}
.cp-faq {display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 60px; margin-top: 140px; padding: 0 60px;}
.cp-faq-l h2 {font-size: 60px; letter-spacing: -1.8px; margin: 14px 0 26px; line-height: 1;}
.cp-q {border-top: 1.5px solid var(--ik);}
.cp-q:last-child {border-bottom: 1.5px solid var(--ik);}
.cp-qh {width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 0; font: 600 28px/1.2 var(--hm-display); text-align: left; color: var(--ik);}
.cp-qi {width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ik); display: grid; place-items: center; flex: none; transition: transform .2s;}
.cp-q p {display: none; padding: 0 80px 28px 0; color: var(--ik2); font-size: 18px;}
.cp-q.open p {display: block;}
.cp-q.open .cp-qi {background: var(--vi); border-color: var(--vi); color: #fff; transform: rotate(45deg);}
.cp-cta {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 50px; overflow: hidden; min-height: 600px; background: linear-gradient(140deg, #F2ECFF, #F5F9E3); box-shadow: rgba(127, 127, 127, .18) 0 0 0 1px;}
.cp-cta-l {background: var(--ik); color: #fff; padding: 80px 60px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;}
.cp-cta-l h2 {font-size: 66px; line-height: 1.08; letter-spacing: -1.6px;}
.cp-cta-l h2 img {display: inline-block; vertical-align: -6px; margin-right: 6px;}
.cp-cta-l .cp-btn {align-self: flex-start;}
.cp-cta-r {position: relative; display: grid; place-items: center; padding: 60px;}
.cp-cta-film {width: 100%; border-radius: 26px; box-shadow: rgba(22, 22, 22, .06) 0 0 0 1px, rgba(22, 22, 22, .35) 0 24px 50px -30px;}
.cp-foot {margin-top: 140px; padding: 0 60px 150px; position: relative;}
.cp-giant {font: 600 290px/.9 var(--hm-display); letter-spacing: -12px; text-align: center; white-space: nowrap; margin-bottom: 96px;}
.cp-giant .v {color: var(--vi);}
.cp-foot-cards {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; align-items: start;}
.cp-fcard {background: #fff; border-radius: 26px; padding: 44px 50px;}
.cp-fnav a {display: flex; align-items: center; gap: 12px; font: 600 40px/1.62 var(--hm-display); letter-spacing: -.5px;}
.cp-fnav em {font: 600 18px/1 var(--hm-display); background: var(--vi); color: #fff; padding: 7px 12px; border-radius: 999px; font-style: normal;}
.cp-legal {display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; margin-top: 44px; font-size: 14px; color: var(--ik2);}
.cp-legal span {display: inline-flex; gap: 6px; align-items: center;}
.cp-fcol {display: flex; flex-direction: column; gap: 30px;}
.cp-fsm {padding: 30px 50px; font-size: 20px; display: flex; align-items: center; gap: 14px;}
.cp-fstar {color: var(--vi); display: inline-flex;}
.cp-crow {display: flex; align-items: center; gap: 16px; padding: 12px 0;}
.cp-crow b {display: block; font-size: 18px; line-height: 1.3;}
.cp-crow small {display: block; font-size: 14px; color: var(--mu);}
.cp-crow > svg:last-child {margin-left: auto;}
.cp-cic {width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none;}
.cp-cic.v {background: var(--vi);}
.cp-cic.k {background: var(--ik);}
.cp-fnews h3 {font-size: 32px; line-height: 1.15; margin-bottom: 50px; letter-spacing: -.5px;}
.cp-email {display: flex; justify-content: space-between; border-bottom: 1.5px solid var(--ik); padding-bottom: 12px; font-size: 20px; color: var(--mu);}
.cp-fwe h3 {font-size: 40px; margin-bottom: 28px; letter-spacing: -.5px;}
.cp-wecard {background: radial-gradient(120% 80% at 100% 0%, rgba(123, 217, 87, .18), transparent 60%), #141414; border-radius: 22px; padding: 28px; color: #fff; box-shadow: rgba(22, 22, 22, .45) 0 30px 60px -40px;}
.cp-wecard img {display: block;}
.cp-we-eye {display: block; margin: 18px 0 10px; font: 600 12px var(--bo-mono); letter-spacing: .12em; color: #7BD957;}
.cp-wecard p {font-size: 15px; line-height: 1.6; color: #D8D8D8;}
.cp-we-link {margin-top: 24px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 15px;}
.cp-we-link span {width: 34px; height: 34px; border-radius: 50%; background: #2A2A2A; display: grid; place-items: center;}
.cp-copy {display: block; margin-top: 28px; font-size: 14px; color: var(--ik2);}
.cp-watch {display: flex; gap: 14px; align-items: center;}
.cp-watch-fixed {position: absolute; right: 60px; bottom: 44px; z-index: 5;}
.cp-watch-pill {display: inline-flex; align-items: center; gap: 14px; height: 56px; padding: 0 24px 0 6px; border-radius: 28px; background: var(--ik); color: #fff; font: 600 18px/1 var(--hm-display); white-space: nowrap; box-shadow: rgba(22, 22, 22, .4) 0 14px 28px -14px;}
.cp-watch-c {width: 44px; height: 44px; border-radius: 50%; background: var(--vi); display: grid; place-items: center; color: #fff;}
.cp-watch-pill.sm {height: 44px; font-size: 15px; padding: 0 18px 0 5px; gap: 10px;}
.cp-watch-pill.sm .cp-watch-c {width: 34px; height: 34px;}
.cp-menu {position: relative; background: #1C1C1C; color: #fff; border-radius: 50px; margin: 20px 40px; height: 860px; padding: 44px 40px 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto;}
.cp-menu-top {grid-column: 1 / -1; display: flex; align-items: flex-start;}
.cp-menu-tag {width: 492px; font-size: 18px; color: #ACACAC; line-height: 1.6;}
.cp-menu-x {margin-left: auto; color: #fff; display: grid; place-items: center;}
.cp-menu-links {grid-column: 1; align-self: center; display: flex; flex-direction: column;}
.cp-menu-links a {font: 600 64px/1.3 var(--hm-display); letter-spacing: -1px; color: #fff; display: flex; align-items: center;}
.cp-menu-plus {color: #fff; margin-left: 200px; display: inline-flex;}
.cp-menu-right {grid-column: 2; align-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 34px; padding-bottom: 24px;}
.cp-menu-right p {text-align: right; font-size: 18px; color: #ACACAC; max-width: 400px; line-height: 1.6;}
.cp-menu-card {width: 454px; border-radius: 26px; background: linear-gradient(140deg, #F2ECFF, #F2F8E0); padding: 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 0 0 8px #111; color: var(--ik);}
.cp-menu-card .cp-mini-h {background: #fff; border-radius: 999px; padding: 6px 16px 6px 6px; align-self: flex-start; box-shadow: rgba(22, 22, 22, .08) 0 0 0 1px;}
.cp-menu-card .cp-mini-h b {font-size: 16px;}
.cp-online {width: 9px; height: 9px; border-radius: 50%; background: #4CAF50; display: block;}
.cp-menu-foot {grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #ACACAC;}
.cp-menu-foot span {display: inline-flex; gap: 6px; align-items: center;}
.cp-menu-ov {position: absolute; left: 0; right: 0; top: 0; height: 900px; z-index: 20;}
.cp-menu-ov[hidden] {display: none;}
.cp-phead {position: relative; padding: 100px 60px 0 280px;}
.cp-phead > .cp-label {position: absolute; left: 60px; top: 122px;}
.cp-h1.sm {font-size: 100px; line-height: 1.08; letter-spacing: -2px; margin: 0;}
.cp-phead > p {font-size: 20px; color: var(--ik2); margin-top: 30px; max-width: 780px;}
.cp-stepnav {display: flex; gap: 10px; margin-top: 40px;}
.cp-stepnav span {padding: 12px 20px; border-radius: 999px; border: 1.5px solid var(--ik); font: 600 16px/1 var(--hm-display);}
.cp-stepnav .on {background: var(--ik); color: #fff;}
.cp-stories {display: flex; flex-direction: column; gap: 30px; margin-top: 100px;}
.cp-story {display: grid; grid-template-columns: 640px minmax(0, 1fr); height: 570px; border-radius: 50px; overflow: hidden; box-shadow: rgba(127, 127, 127, .18) 0 0 0 1px;}
.cp-story-l {padding: 54px 50px 50px; display: flex; flex-direction: column;}
.cp-story-l.k {background: var(--ik); color: #fff;}
.cp-story-l.v {background: var(--vi); color: #fff;}
.cp-story-l.l {background: var(--li); color: var(--ik);}
.cp-story-eye {display: flex; align-items: center; gap: 16px; font: 600 13px var(--bo-mono); letter-spacing: .1em;}
.cp-segs {display: flex; gap: 6px;}
.cp-segs i {width: 44px; height: 4px; border-radius: 2px; background: currentColor; opacity: .25; display: block;}
.cp-segs i.on {opacity: 1;}
.cp-story-l.k .cp-segs i.on {background: #9A5CFF;}
.cp-story-l h2 {font-size: 62px; line-height: 1.06; letter-spacing: -1.6px; margin-top: 30px;}
.cp-story-chips {display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap;}
.cp-story-chips span {padding: 6px 13px; border-radius: 999px; border: 1.2px solid currentColor; font-size: 14px; line-height: 1.3;}
.cp-story-l p {margin-top: 24px; font-size: 18px; line-height: 1.6; opacity: .9; max-width: 530px;}
.cp-story-r {position: relative; display: grid; place-items: center; background: linear-gradient(150deg, #F5F0FF, #F3F8E4); padding: 56px 46px;}
.cp-story-film {width: 100%; border-radius: 22px; box-shadow: rgba(22, 22, 22, .06) 0 0 0 1px, rgba(22, 22, 22, .35) 0 24px 50px -30px;}
.cp-story-go {position: absolute; right: 12px; top: 12px; width: 84px; height: 84px; border-radius: 50%; background: var(--li); display: grid; place-items: center; z-index: 4;}
.cp-never {display: grid; grid-template-columns: 460px minmax(0, 1fr); gap: 60px;}
.cp-never-l h2 {font-size: 60px; line-height: 1.04; letter-spacing: -1.8px; margin-top: 14px;}
.cp-nrow {display: grid; grid-template-columns: 48px 1fr; column-gap: 20px; padding: 24px 0; border-top: 1.5px solid var(--ik);}
.cp-nrow:last-child {border-bottom: 1.5px solid var(--ik);}
.cp-nrow .cp-ic {grid-row: span 2; width: 48px; height: 48px; border-radius: 14px;}
.cp-nrow b {font: 600 28px/1.2 var(--hm-display);}
.cp-nrow small {color: var(--mu); font-size: 16px;}
.cp-findex {display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; max-width: 980px;}
.cp-findex span {display: inline-flex; gap: 8px; align-items: center; padding: 10px 16px; border-radius: 999px; background: #fff; box-shadow: rgba(127, 127, 127, .2) 0 0 0 1px; font: 600 16px/1 var(--hm-display);}
.cp-findex em {font-style: normal; color: var(--vi); font: 600 12px var(--bo-mono);}
.cp-frow {display: grid; grid-template-columns: minmax(0, 1fr) 760px; gap: 60px; align-items: center; padding: 56px 0; border-top: 1.5px solid var(--ik);}
.cp-frow:first-child {margin-top: -30px;}
.cp-frow.rev {grid-template-columns: 760px minmax(0, 1fr);}
.cp-frow.rev .cp-frow-t {order: 2;}
.cp-fnum {font: 600 14px var(--bo-mono); color: var(--vi);}
.cp-frow-t h2 {font-size: 60px; letter-spacing: -1.8px; line-height: 1.04; margin: 8px 0 20px;}
.cp-frow-t p {color: var(--ik2); font-size: 18px; max-width: 470px;}
.cp-frow-t ul {margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px;}
.cp-frow-t li {display: inline-flex; gap: 6px; align-items: center; padding: 7px 13px; border-radius: 999px; border: 1.2px solid var(--ik); font-size: 14px; line-height: 1.2;}
.cp-frow-t li svg {color: var(--vi);}
.cp-frow-v {height: 440px; border-radius: 40px; display: grid; place-items: center; position: relative; overflow: hidden;}
.cp-frow-v > * {transform: scale(1.22);}
.cp-pcols {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 110px; align-items: stretch;}
.cp-pcols .cp-pcard {padding: 44px 40px; display: flex; flex-direction: column;}
.cp-pcols .cp-pcard h3 {font-size: 44px; letter-spacing: -1px; margin: 22px 0 12px; line-height: 1.05;}
.cp-pcard-k h3 {margin-top: 0;}
.cp-pfig {margin: 38px 0 30px;}
.cp-pfig b {display: block; font: 600 50px/1 var(--hm-display); letter-spacing: -1.5px;}
.cp-pfig small {display: block; color: var(--mu); font-size: 14px; margin-top: 10px;}
.cp-pcols h4 {font: 600 16px var(--hm-body); margin: 38px 0 0; padding-top: 28px; border-top: 1.5px solid var(--ik);}
.cp-pcols ul {margin-top: 14px; display: flex; flex-direction: column; gap: 10px;}
.cp-pcols li {display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.45;}
.cp-pcols li svg {color: var(--gr); flex: none; margin-top: 3px;}
.cp-pcols .cp-pcard-k {background: var(--ik); color: #fff;}
.cp-pcard-k p {color: #ACACAC;}
.cp-pcols ul.big {margin-top: 30px; gap: 0;}
.cp-pcols ul.big li {font: 600 26px/1.3 var(--hm-display); gap: 14px; padding: 18px 0; border-top: 1px solid #333; align-items: center;}
.cp-pcols ul.big li svg {color: var(--li); margin-top: 0;}
.cp-pfaq {margin-top: auto; padding-top: 30px; display: inline-flex; gap: 8px; align-items: center; text-decoration: underline; font-size: 15px;}
.cp-gs {display: grid; grid-template-columns: 640px minmax(0, 1fr); height: 900px; padding: 40px 60px 0 50px; gap: 70px;}
.cp-gs-l hr {border: 0; border-top: 4px solid #E7E2E0; margin: 22px 0 30px;}
.cp-gs-eye {font: 600 14px var(--hm-body); letter-spacing: .12em; color: var(--vi);}
.cp-gs-l h1 {font: 600 92px/1 var(--hm-display); letter-spacing: -2.5px; margin: 22px 0 20px;}
.cp-gs-l > p {font-size: 20px; color: var(--ik2); max-width: 580px;}
.cp-gs-steps {display: flex; gap: 22px; margin: 30px 0 22px;}
.cp-gs-steps span {display: inline-flex; gap: 8px; align-items: center; font: 600 16px var(--hm-display); color: var(--mu2);}
.cp-gs-steps i {width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-style: normal; font-size: 13px;}
.cp-gs-steps .on {color: var(--ik);}
.cp-gs-steps .on i {background: var(--vi); border-color: var(--vi); color: #fff;}
.cp-gs-steps .done {color: var(--ik);}
.cp-gs-steps .done i {background: var(--gr); border-color: var(--gr); color: #fff;}
.cp-gs-q {font: 600 32px/1.2 var(--hm-display); letter-spacing: -.6px; margin-bottom: 16px;}
.cp-gs-trades {display: flex; flex-wrap: wrap; gap: 10px;}
.cp-gs-trades span {display: inline-flex; gap: 6px; align-items: center; padding: 12px 18px; border-radius: 999px; background: #fff; box-shadow: rgba(127, 127, 127, .3) 0 0 0 1px; font: 500 17px/1 var(--hm-body);}
.cp-gs-trades .on {background: var(--vt); box-shadow: 0 0 0 2px var(--vi); color: var(--vi); font-weight: 600;}
.cp-gs-row {display: flex; align-items: center; gap: 18px; margin-top: 32px;}
.cp-gs-row > span {font-size: 14px; color: var(--mu);}
.cp-gs-or {margin-left: auto;}
.cp-gs-go {display: inline-flex; gap: 14px; align-items: center; height: 72px; padding: 0 34px; border-radius: 36px; background: var(--vi); color: #fff; font: 600 26px/1 var(--hm-display); box-shadow: 0 18px 30px -16px rgba(106, 0, 248, .6);}
.cp-gs-go.sm {height: 54px; font-size: 19px; padding: 0 24px; margin-top: 22px;}
.cp-gs-r {display: flex; flex-direction: column; min-width: 0;}
.cp-gs-stage {position: relative; flex: 1; margin: 30px 0 10px;}
.cp-gs-card {position: absolute; left: 13%; right: 13%; top: 15%; bottom: 17%; border-radius: 30px; background: #fff; padding: 10px; box-shadow: rgba(22, 22, 22, .06) 0 0 0 1px, rgba(22, 22, 22, .35) 0 30px 60px -36px;}
.cp-gs-card img {width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 22px; display: block;}
.cp-gs-cap {position: absolute; left: 26px; bottom: 26px; background: #fff; padding: 9px 15px; border-radius: 999px; font: 600 14px/1 var(--hm-display); box-shadow: rgba(22, 22, 22, .3) 0 10px 22px -12px;}
.cp-gs-chip {position: absolute; display: inline-flex; gap: 10px; align-items: center; background: #fff; padding: 8px 18px 8px 8px; border-radius: 999px; font: 600 16px/1 var(--hm-display); box-shadow: rgba(22, 22, 22, .06) 0 0 0 1px, rgba(22, 22, 22, .3) 0 14px 28px -16px; white-space: nowrap; z-index: 2;}
.cp-gs-chip .cp-ic {border-radius: 50%;}
.cp-gs-say {display: flex; align-items: center; gap: 18px; margin-bottom: 64px;}
.cp-gs-say span {flex: 1; background: var(--vt); border-radius: 18px; padding: 18px 22px; font-size: 18px; line-height: 1.45;}
@media (max-width: 960px) {.cpd-glance, .cpd-heads, .cpd-dec, .cpd-gsrow {grid-template-columns: minmax(0, 1fr);}
.cpd-films {grid-template-columns: repeat(2, minmax(0, 1fr));}
.cpd-pages {grid-template-columns: repeat(3, minmax(0, 1fr));}
.cp-lin-row {grid-template-columns: minmax(0, 1fr);}
.cp-lin-arr {transform: rotate(90deg);}
}
@media (max-width: 520px) {.cpd-films, .cpd-sw {grid-template-columns: repeat(2, minmax(0, 1fr));}
.cpd-films {grid-template-columns: minmax(0, 1fr);}
.cpd-pages {grid-template-columns: repeat(2, minmax(0, 1fr));}
.cpd-logos {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
.cpd-lg.click {grid-column: 1 / -1; flex-direction: row;}
}
.cp-pcols .cp-ptag {align-self: flex-start;}
#clickpad[hidden] {display: none !important;}
.cp-giant img {display: block; width: 1100px; max-width: 100%; height: auto; margin: 0 auto;}
.cp-play {position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 3; width: 72px; height: 72px; border-radius: 50%; background: var(--vi); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(255, 255, 255, .18), 0 16px 32px -12px rgba(106, 0, 248, .7); transition: transform .15s;}
.cp-play:hover {transform: translate(-50%, -50%) scale(1.06);}
.cp-play svg {margin-left: 3px;}
.cp-film-big .cp-play {width: 104px; height: 104px;}
.cp-film-big .cp-play svg {width: 34px; height: 34px;}
.cp-film.playing .cp-play {display: none;}

/* ---- the real page (the mockups lived inside a fixed 1440 frame) ------------------------------ */
body.cp {overflow: visible; min-height: 100vh;}
.cp-page {position: relative; max-width: 1440px; margin: 0 auto; overflow-x: clip; padding-bottom: 1px;}
.cp a:focus-visible, .cp button:focus-visible, .cp summary:focus-visible {outline: 3px solid var(--vi); outline-offset: 3px; border-radius: 12px;}
.cp img {max-width: 100%; height: auto;}
.cp .cp-wm {height: 50px; width: auto;}
.cp .cp-by img {height: 17px; width: auto;}
.cp-badge img {height: 15px; width: auto;}
.cp-ui {max-width: 100%;}
.cp-btn, .cp-gs-go, .cp-watch-pill, .cp-burger, .cp-rnd {transition: transform .18s ease, background-color .18s ease, color .18s ease;}
.cp-btn:hover, .cp-gs-go:hover, .cp-watch-pill:hover {transform: translateY(-2px);}
.cp-btn-o:hover {background: var(--ik); color: #fff;}
.cp-cta-l h2 img {height: 64px; width: auto; display: inline-block; vertical-align: -6px;}

/* header language picker */
.cp-langpick {position: relative;}
.cp-langpick summary {list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 18px; border-radius: 28px; border: 2px solid var(--ik); font: 600 18px/1 var(--hm-display), var(--indic); cursor: pointer; user-select: none;}
.cp-langpick summary::-webkit-details-marker {display: none;}
.cp-langlist {position: absolute; right: 0; top: 64px; z-index: 30; min-width: 190px; display: flex; flex-direction: column; padding: 8px; background: #fff; border-radius: 18px; box-shadow: rgba(22, 22, 22, .08) 0 0 0 1px, rgba(22, 22, 22, .35) 0 24px 40px -24px;}
.cp-langlist a {padding: 12px 14px; border-radius: 12px; font: 600 17px/1.2 var(--hm-display), var(--indic);}
.cp-langlist a:hover {background: #F4F1F0;}
.cp-langlist a[aria-current] {background: var(--vt); color: var(--vi);}

/* menu: a real full-screen overlay */
.cp-menu-ov {position: fixed; inset: 0; height: auto; z-index: 60; overflow-y: auto; overscroll-behavior: contain;}
.cp-menu {height: calc(100vh - 40px); min-height: 640px;}
.cp-menu-links a:hover {color: var(--li);}
.cp-menu-right a {color: inherit;}
.cp-menu-langs {gap: 16px !important; flex-wrap: wrap;}
.cp-menu-langs a {color: #ACACAC; font-family: var(--hm-body), var(--indic);}
.cp-menu-langs a[aria-current], .cp-menu-langs a:hover {color: #fff;}
html.cp-menu-open {overflow: hidden;}

/* floating watch button */
.cp-watch-fixed {position: fixed; right: max(24px, calc((100vw - 1440px) / 2 + 40px)); bottom: 28px; z-index: 40;}
.cp-watch-fixed .cp-rnd {box-shadow: rgba(22, 22, 22, .4) 0 14px 28px -14px;}
.cp-watch-fixed {opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .25s ease, transform .25s ease;}
.cp-watch-fixed.show {opacity: 1; transform: none; pointer-events: auto;}

/* floats placed by class instead of inline styles */
.cp-bf1 {left: -36px; top: 110px; width: 240px;}
.cp-bf2 {right: -36px; bottom: 120px; width: 240px;}
.cp-cta-f1 {left: 48px; top: 64px; width: 250px;}
.cp-cta-f2 {right: 44px; bottom: 56px; max-width: 270px;}

/* films: our own play button, no native controls over the title */
.cp-film video {cursor: pointer;}
.cp-film.playing .cp-play {display: none;}
.cp-sound {position: absolute; top: 12px; right: 12px; z-index: 4; display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(22, 22, 22, .55); color: #fff; cursor: pointer;}
.cp-sound:hover {background: rgba(22, 22, 22, .75);}
.cp-sound:focus-visible {outline: 3px solid var(--vi); outline-offset: 2px;}
.cp-film.playing .cp-sound {display: grid;}

/* footer pieces that became links */
.cp-fnav .cp-legal a {display: inline-flex; gap: 6px; align-items: center; font: 400 14px/1.6 var(--hm-body); letter-spacing: 0;}
.cp-fnav .cp-legal a:hover, .cp-fnav > a:hover {color: var(--vi);}
.cp-wecard {display: block;}
.cp-we-link span {color: #fff;}
.cp-email {color: var(--ik); align-items: center;}
.cp-copy a:hover, .cp-crow:hover b {color: var(--vi);}

/* get started: trades are links into the app's sign-up */
.cp-gs-trades a {display: inline-flex; gap: 6px; align-items: center; padding: 12px 18px; border-radius: 999px; background: #fff; box-shadow: rgba(127, 127, 127, .3) 0 0 0 1px; font: 500 17px/1 var(--hm-body);}
.cp-gs-trades a:hover {background: var(--vt); box-shadow: 0 0 0 2px var(--vi); color: var(--vi);}
.cp-gs-or a {color: var(--ik);}
.cp-gs-l > p.cp-gs-next {margin-top: 22px; font-size: 15px; color: var(--mu);}
.cp-gs-top {justify-content: flex-end; padding-top: 4px;}
.cp-gs-say img {height: 84px; width: auto;}

/* pages the mockups did not draw */
.cp-contact {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 90px;}
.cp-ccard {position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 250px; padding: 30px; border-radius: 26px; background: #fff; box-shadow: rgba(127, 127, 127, .18) 0 0 0 1px; transition: transform .18s ease;}
.cp-ccard:hover {transform: translateY(-3px);}
.cp-ccard .cp-cic {width: 52px; height: 52px; margin-bottom: auto;}
.cp-ccard img {height: 30px; width: auto; margin-bottom: auto; align-self: flex-start;}
.cp-ccard b {font: 600 30px/1.1 var(--hm-display); letter-spacing: -.6px;}
.cp-ccard small {font-size: 15px; color: var(--mu);}
.cp-ccard > svg:last-child {position: absolute; right: 26px; top: 30px;}
.cp-ccard-k {background: radial-gradient(120% 80% at 100% 0%, rgba(123, 217, 87, .18), transparent 60%), #141414; color: #fff;}
.cp-ccard-k small {color: #ACACAC;}
.cp-filmgrid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 30px; margin-top: 90px;}
.cp-filmgrid figure {margin: 0;}
.cp-filmgrid .cp-film {box-shadow: rgba(22, 22, 22, .06) 0 0 0 1px, rgba(22, 22, 22, .35) 0 24px 50px -30px;}
.cp-filmgrid figcaption b {display: block; font: 600 28px/1.15 var(--hm-display); letter-spacing: -.5px; margin-top: 20px;}
.cp-filmgrid figcaption span {color: var(--mu); font-size: 17px;}
.cp-legalpage {padding-bottom: 20px;}
.cp-legalpage p + p {margin-top: 18px;}

/* SEO gameplan (2026-11-08): WebP <picture> wrappers take no box; questions are h3 headings; film watch pages */
.cp picture {display: contents;}
.cp-qt {margin: 0; font: inherit;}
.cp-faq-all {margin-top: 100px;}
.cp-faq-all + .cp-faq-all {margin-top: 80px;}
.cp-faq-all .cp-faq-l h2 {font-size: 44px; letter-spacing: -1.2px;}
.cp-filmgrid figcaption a {color: inherit;}
.cp-filmgrid figcaption a:hover b {text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;}
.cp-label a {color: inherit; text-decoration: underline; text-underline-offset: 3px;}
.cp-watchsec {margin-top: 60px;}
.cp-watchfilm {box-shadow: rgba(22, 22, 22, .06) 0 0 0 1px, rgba(22, 22, 22, .35) 0 24px 50px -30px; background: #161616;}
.cp-watchfilm video {object-fit: contain;}
.cp-watchnote {margin-top: 18px; color: var(--mu); font-size: 16px;}
.cp-h2s {font-size: 40px; line-height: 1.1; letter-spacing: -1px; margin: 70px 0 26px;}
.cp-tsteps {list-style: none; margin: 0; padding: 0; max-width: 900px; counter-reset: none;}
.cp-tsteps li {display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 18px; padding: 18px 0; border-top: 1.5px solid var(--ik);}
.cp-tsteps li:last-child {border-bottom: 1.5px solid var(--ik);}
.cp-tsteps time {font: 600 15px/1.9 var(--bo-mono); color: var(--vi);}
.cp-morefilms {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;}
.cp-morefilms a {display: block; color: inherit;}
.cp-morefilms img {display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; box-shadow: rgba(22, 22, 22, .06) 0 0 0 1px;}
.cp-morefilms b {display: block; font: 600 22px/1.2 var(--hm-display); margin-top: 12px;}

/* Indic scripts: Funnel has no glyphs for them */
.lang-pa, .lang-hi {--hm-display: "Funnel Display", var(--indic); --hm-body: "Funnel Sans", var(--indic);}
.lang-pa .cp-h1, .lang-hi .cp-h1 {line-height: 1.25;}

/* ---- 1360: tighten the 1440 layout ------------------------------------------------------------ */
@media (max-width: 1360px) {
  .cp-tile-a {left: 60px;} .cp-tile-b {right: 60px;}
  .cp-h1 {font-size: 100px; line-height: 112px;}
  .cp-facts {padding: 0 60px;}
  .cp-phead {padding-left: 60px;}
  .cp-phead > .cp-label {position: static; display: flex; margin-bottom: 20px;}
  .cp-story {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
  .cp-frow, .cp-frow.rev {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
  .cp-frow-v > * {transform: none;}
  .cp-gs {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px;}
  .cp-gs-l h1 {font-size: 76px;}
  .cp-hero-low {grid-template-columns: 140px minmax(0, 1fr) 160px 290px; gap: 30px;}
}

/* ---- 1100: tablets ----------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .cp-hero {height: auto; padding-bottom: 20px;}
  .cp-h1 {font-size: 80px; line-height: 1.08;}
  .cp-tile, .cp-peek {display: none;}
  .cp-hero-low {position: static; margin: 70px 40px 0; grid-template-columns: minmax(0, 1fr) 200px; gap: 30px;}
  .cp-spin {display: none;}
  .cp-launch {grid-column: 1 / -1; justify-self: start;}
  .cp-facts {grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 40px;}
  .cp-sec, .cp-faq {padding: 0 40px;}
  .cp-fgrid, .cp-lgrid {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .cp-langs-head {grid-template-columns: 1fr;}
  .cp-langs-head p {grid-column: 1; grid-row: auto;}
  .cp-pteaser, .cp-faq, .cp-never {grid-template-columns: 1fr; gap: 36px;}
  .cp-cta {grid-template-columns: 1fr;}
  .cp-foot {padding: 0 40px 140px;}
  .cp-foot-cards {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .cp-fwe {grid-column: 1 / -1;}
  .cp-menu {grid-template-columns: 1fr;}
  .cp-menu-right {display: none;}
  .cp-story {grid-template-columns: 1fr; height: auto;}
  .cp-story-r {min-height: 420px;}
  .cp-pcols, .cp-contact {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .cp-pcard-k {grid-column: 1 / -1;}
  .cp-gs {grid-template-columns: 1fr; height: auto; padding-bottom: 60px;}
  .cp-gs-r {order: -1;}
  .cp-gs-stage {min-height: 520px;}
  .cp-frow, .cp-frow.rev {grid-template-columns: 1fr; gap: 30px;}
  .cp-frow.rev .cp-frow-t {order: 0;}
  .cp-phead {padding-top: 70px;}
  .cp-h1.sm {font-size: 76px;}
  .cp-steps {gap: 16px;}
  .cp-step h3 {font-size: 28px;}
}

/* ---- 760: phones (designed at 390) ------------------------------------------------------------- */
@media (max-width: 760px) {
  .cp {font-size: 17px;}
  .cp-hdr {padding: 14px 16px 0;}
  .cp .cp-wm {height: 34px;}
  .cp-logo {gap: 10px;}
  .cp-by {padding-left: 10px; height: 24px; font-size: 12px; gap: 4px;}
  .cp .cp-by img {height: 12px;}
  .cp-hdr-r {gap: 8px;}
  .cp-hdr-go {display: none;}
  .cp-langpick summary {height: 44px; padding: 0 12px; font-size: 15px; border-width: 1.5px;}
  .cp-langpick summary span {display: none;}
  .cp-langlist {top: 52px;}
  .cp-burger {width: 44px; height: 44px; gap: 6px;}
  .cp-burger i {width: 20px; height: 2.5px;}
  .cp-btn {font-size: 18px; height: 48px; padding: 0 18px; gap: 10px;}
  .cp-btn-lg {height: 64px; font-size: 22px; padding: 0 26px;}
  .cp-btn svg {width: 18px; height: 18px;}

  .cp-sec, .cp-faq {padding: 0 16px; margin-top: 72px;}
  .cp-hero {padding-top: 30px;}
  .cp-badge {height: 34px; font-size: 13px; padding: 0 14px;}
  .cp-h1 {font-size: 46px; line-height: 1.1; letter-spacing: -1px; margin-top: 18px; padding: 0 12px;}
  .cp-hstar {display: none;}
  .cp-h1 {font-size: 42px;}
  .cp-launch {display: none;}
  .cp-mfilm {display: block; margin: 28px 16px 0; text-align: left;}
  .cp-herofilm {display: none;}
  .cp-sec-head h2 br {display: none;}
  .cp-fgrid .cp-ftile:nth-child(n+3) {display: none;}
  .cp-hero-cta {margin-top: 28px; gap: 12px;}
  .cp-round {display: none;}
  .cp-hero-low {margin: 44px 16px 0; padding-top: 28px; grid-template-columns: 1fr; gap: 20px;}
  .cp-hero-low p {font-size: 16px;}
  .cp-hero-low ul {display: flex; flex-wrap: wrap; gap: 4px 18px;}
  .cp-hero-low ul li {font-size: 16px; gap: 8px;}
  .cp-launch, .cp-launch-film {width: 100%;}
  .cp-launch .cp-watch-pill {right: 8px;}
  .cp-herofilm-head h2, .cp-sec-head h2, .cp-pt-l h2, .cp-never-l h2 {font-size: 34px; letter-spacing: -.8px;}
  .cp-herofilm-head {margin-bottom: 22px;}
  .cp-bigfilm {margin: 0;}
  .cp-film-big {border-radius: 24px;}
  .cp-float {display: none;}
  .cp-play {width: 56px; height: 56px;}
  .cp-facts {grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 16px; gap: 10px; margin-top: 40px;}
  .cp-fact {min-height: 128px; padding: 16px; border-radius: 18px;}
  .cp-fact b {font-size: 22px; letter-spacing: -.4px;}
  .cp-fact small {font-size: 13px; line-height: 1.35;}
  .cp-sec-head {grid-template-columns: 1fr; margin-bottom: 26px;}
  .cp-sec-head .cp-btn {grid-column: 1; grid-row: auto; justify-self: start;}
  .cp-steps {grid-template-columns: 1fr;}
  .cp-step-vis {height: auto; min-height: 200px; padding: 20px;}
  .cp-step h3 {font-size: 26px; margin: 0 8px;}
  .cp-marq {margin-top: 72px;}
  .cp-mw {font-size: 48px; gap: 18px; padding-right: 18px; letter-spacing: -1px;}
  .cp-mw i svg {width: 26px; height: 26px;}
  .cp-fgrid {grid-template-columns: 1fr; gap: 14px;}
  .cp-fvis {height: 270px;}
  .cp-fvis > * {transform: scale(.92);}
  .cp-langs {margin: 72px 8px 0; border-radius: 28px; padding: 48px 16px 28px;}
  .cp-langs-head {margin-bottom: 28px;}
  .cp-langs-head h2 {font-size: 40px; letter-spacing: -1px;}
  .cp-langs-head p {font-size: 16px;}
  .cp-lgrid {grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; scrollbar-width: none;}
  .cp-lgrid::-webkit-scrollbar {display: none;}
  .cp-lang {scroll-snap-align: start;}
  .cp-pt-r {grid-template-columns: 1fr;}
  .cp-faq-l h2 {font-size: 40px;}
  .cp-qh {font-size: 20px; padding: 18px 0;}
  .cp-qi {width: 36px; height: 36px;}
  .cp-q p {padding-right: 0; font-size: 16px;}
  .cp-cta {border-radius: 28px; min-height: 0;}
  .cp-cta-l {padding: 40px 24px;}
  .cp-cta-l h2 {font-size: 38px;}
  .cp-cta-l h2 img {height: 42px; vertical-align: -4px;}
  .cp-cta-r {padding: 20px;}
  .cp-foot {margin-top: 72px; padding: 0 16px 110px;}
  .cp-giant {margin-bottom: 36px;}
  .cp-foot-cards {grid-template-columns: 1fr; gap: 14px;}
  .cp-fwe {grid-column: auto;}
  .cp-fcol {gap: 14px;}
  .cp-fcard {padding: 28px 24px; border-radius: 22px;}
  .cp-fnav a {font-size: 30px;}
  .cp-fsm {padding: 20px 24px; font-size: 17px;}
  .cp-fnews h3 {font-size: 24px; margin-bottom: 24px;}
  .cp-email {font-size: 17px;}
  .cp-fwe h3 {font-size: 30px;}
  .cp-watch-fixed {right: 16px; bottom: 16px;}
  .cp-watch-pill {height: 48px; font-size: 16px; padding-right: 18px; gap: 10px;}
  .cp-watch-fixed .cp-rnd {width: 48px; height: 48px;}
  .cp-menu {margin: 8px; border-radius: 28px; height: calc(100dvh - 16px); min-height: 520px; padding: 22px 20px 20px;}
  .cp-menu-tag {width: auto; flex: 1; font-size: 14px;}
  .cp-menu-links a {font-size: 40px; line-height: 1.32;}
  .cp-menu-plus {margin-left: 24px;}
  .cp-menu-plus svg {width: 20px; height: 20px;}
  .cp-menu-top {gap: 12px; align-items: center;}
  .cp-menu-top .cp-btn-ow {height: 44px; font-size: 16px;}
  .cp-menu-foot {flex-direction: column; align-items: flex-start; gap: 8px; font-size: 13px;}
  .cp-phead {padding: 44px 16px 0;}
  .cp-h1.sm {font-size: 46px; letter-spacing: -1px; padding: 0;}
  .cp-phead > p {font-size: 17px; margin-top: 18px;}
  .cp-stepnav {flex-wrap: wrap; margin-top: 26px; gap: 8px;}
  .cp-stepnav span {font-size: 14px; padding: 10px 14px;}
  .cp-stories {margin-top: 44px; gap: 16px;}
  .cp-story {border-radius: 28px;}
  .cp-story-l {padding: 30px 22px;}
  .cp-story-l h2 {font-size: 34px; margin-top: 20px;}
  .cp-story-r {min-height: 0; padding: 18px;}
  .cp-story-go {display: none;}
  .cp-nrow b {font-size: 22px;}
  .cp-findex {margin-top: 24px; gap: 8px;}
  .cp-findex span {font-size: 14px; padding: 9px 13px;}
  .cp-frow {padding: 36px 0; gap: 22px;}
  .cp-frow-t h2 {font-size: 36px;}
  .cp-frow-v {height: 300px; border-radius: 26px;}
  .cp-frow-v > * {transform: scale(.9);}
  .cp-pcols, .cp-contact, .cp-filmgrid {grid-template-columns: 1fr; margin-top: 44px; gap: 16px;}
  .cp-pcols .cp-pcard {padding: 30px 22px;}
  .cp-pcols .cp-pcard h3 {font-size: 36px;}
  .cp-pfig b {font-size: 36px;}
  .cp-ccard {min-height: 190px;}
  .cp-gs {padding: 14px 16px 50px; gap: 24px;}
  .cp-gs-stage, .cp-gs-say {display: none;}
  .cp-gs-l h1 {font-size: 46px; letter-spacing: -1.2px;}
  .cp-gs-l > p {font-size: 17px;}
  .cp-gs-q {font-size: 26px;}
  .cp-gs-trades a {padding: 11px 15px; font-size: 16px;}
  .cp-gs-row {flex-wrap: wrap; gap: 14px;}
  .cp-gs-or {margin-left: 0;}
  .cp-gs-go {height: 60px; font-size: 21px; padding: 0 26px;}
  .cp-filmgrid figcaption b {font-size: 22px;}
}
@media (prefers-reduced-motion: reduce) {
  .cp-marq-in, .cp-spin svg {animation: none;}
  html {scroll-behavior: auto;}
}

/* hero pill: powered by WeReno, with the $1B+ proof */
.cp-badge-proof b {font: 700 16px/1 var(--hm-display); color: var(--v, #6A00F8); letter-spacing: -.01em;}
.cp-badge-sep {width: 1px; height: 18px; background: var(--ln); margin: 0 4px;}
/* proof band under the hero: a headline row, then three stats on one grid so their numbers share a line */
.cp-wrp {padding: 0 24px; margin: 72px auto 0; max-width: 1240px;}
.cp-wrp-in {position: relative; overflow: hidden; display: grid; gap: 40px; padding: 44px 48px 40px; border-radius: 32px;
  background: radial-gradient(120% 140% at 100% 0%, rgba(106,0,248,.38) 0%, rgba(106,0,248,0) 52%),
              radial-gradient(90% 120% at 0% 100%, rgba(221,241,96,.16) 0%, rgba(221,241,96,0) 55%), #121214;
  color: #faf7f6; box-shadow: 0 30px 60px -30px rgba(22,22,22,.45);}
.cp-wrp-in::before {content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(250,247,246,.14) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%);}
.cp-wrp-top, .cp-wrp-stats {position: relative;}
.cp-wrp-top {display: grid; gap: 16px; max-width: 760px;}
.cp-wrp-eye {display: inline-flex; align-items: center; gap: 10px; width: max-content; height: 34px; padding: 0 14px;
  border: 1px solid rgba(250,247,246,.18); border-radius: 999px; background: rgba(250,247,246,.06);
  font: 500 13px/1 var(--hm-body); letter-spacing: .02em; color: rgba(250,247,246,.78);}
.cp-wrp-eye img {height: 16px; width: auto; display: block;}
.cp-wrp-lede {margin: 0; font: 600 clamp(30px, 3.6vw, 48px)/1.06 var(--hm-display); letter-spacing: -.025em; text-wrap: balance;}
.cp-wrp-lede .cp-pill {font-size: inherit;}
.cp-wrp-stats {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(250,247,246,.14);}
.cp-wrp-n {display: grid; grid-template-rows: auto 1fr; align-content: start; gap: 12px; padding: 28px 28px 4px 0;}
.cp-wrp-n + .cp-wrp-n {padding-left: 28px; border-left: 1px solid rgba(250,247,246,.14);}
.cp-wrp-n b {display: block; font: 700 clamp(48px, 5.2vw, 76px)/1 var(--hm-display); letter-spacing: -.035em; white-space: nowrap; color: #faf7f6;}
.cp-wrp-n small {display: block; max-width: 24ch; font: 400 15px/1.4 var(--hm-body); color: rgba(250,247,246,.66);}
.cp-wrp-n::before {content: ""; display: block; width: 28px; height: 4px; border-radius: 4px; margin-bottom: 4px; background: var(--acc);}
.cp-wrp-n {grid-template-rows: auto auto 1fr;}
.cp-wrp-n.acc-lime {--acc: #DDF160;} .cp-wrp-n.acc-lime b {color: #DDF160;}
.cp-wrp-n.acc-lav {--acc: #b99bff;} .cp-wrp-n.acc-lav b {color: #c9b3ff;}
.cp-wrp-n.acc-vio {--acc: #7b2bff;}
@media (max-width: 900px) {
  .cp-wrp {margin-top: 56px;}
  .cp-wrp-in {padding: 32px 28px 28px; gap: 28px; border-radius: 26px;}
}
@media (max-width: 640px) {
  .cp-wrp {padding: 0 16px; margin-top: 44px;}
  .cp-wrp-in {padding: 26px 20px 8px; gap: 22px; border-radius: 22px;}
  .cp-wrp-lede {font-size: 28px;}
  .cp-wrp-stats {grid-template-columns: 1fr;}
  /* each stat is a row: number left on a fixed column, label right, so the three read as one table */
  .cp-wrp-n, .cp-wrp-n + .cp-wrp-n {grid-template-columns: 116px 1fr; grid-template-rows: auto; align-items: center; gap: 14px;
    padding: 18px 0; border-left: 0; border-top: 1px solid rgba(250,247,246,.12);}
  .cp-wrp-n:first-child {border-top: 0;}
  .cp-wrp-n::before {display: none;}
  .cp-wrp-n b {font-size: 34px;}
  .cp-wrp-n small {font-size: 14px; max-width: none;}
}

/* SEO gameplan: watch pages and the full FAQ on phones */
@media (max-width: 760px) {
  .cp-faq-all {margin-top: 56px;}
  .cp-faq-all + .cp-faq-all {margin-top: 48px;}
  .cp-faq-all .cp-faq-l h2 {font-size: 32px;}
  .cp-watchsec {margin-top: 32px;}
  .cp-h2s {font-size: 28px; margin: 44px 0 16px;}
  .cp-tsteps li {grid-template-columns: 48px minmax(0, 1fr); gap: 10px; font-size: 16px;}
  .cp-morefilms {grid-template-columns: minmax(0, 1fr); gap: 18px;}
}
/* ---- content pages: /for, /vs, /templates, /pa/for (new-site/content.py) ----------------------- */
.cp-xhead {padding: 90px 60px 0; max-width: 1280px;}
.cp-xcrumb {display: flex; flex-wrap: wrap; gap: 6px 10px; font: 500 15px/1.4 var(--hm-body), var(--indic); color: var(--mu);}
.cp-xcrumb a {text-decoration: underline; text-underline-offset: 3px;}
.cp-xcrumb a:hover {color: var(--vi);}
.cp-xcrumb [aria-hidden] {color: var(--mu2);}
.cp-xh1 {font-size: 72px; line-height: 1.06; letter-spacing: -1.8px; margin-top: 22px; max-width: 1180px;}
.lang-pa .cp-xh1 {line-height: 1.32; letter-spacing: 0;}
.cp-xhead > p {font-size: 21px; color: var(--ik2); margin-top: 26px; max-width: 840px;}
.cp-xchips {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px;}
.cp-xchips span {padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--ln); font-size: 15px; line-height: 1.2;}
.cp-xsec {padding: 0 60px; margin-top: 110px;}
.cp-xsec > h2 {font-size: 52px; line-height: 1.08; letter-spacing: -1.4px; max-width: 980px;}
.lang-pa .cp-xsec > h2 {line-height: 1.3; letter-spacing: 0;}
.cp-xsec > h2.cp-xh2s {font-size: 30px; letter-spacing: -.5px;}
.cp-xlede {font-size: 19px; color: var(--mu); margin-top: 14px; max-width: 820px;}
.cp-flow {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 40px;}
.cp-flow-step {background: #fff; border-radius: 26px; padding: 14px 14px 30px; box-shadow: rgba(127, 127, 127, .18) 0 0 0 1px; min-width: 0;}
.cp-flow-vis {border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 10px; min-height: 420px;}
.cp-flow-vis .cp-ui {margin-top: auto; width: 100%;}
.cp-flow-vis .cp-bub {max-width: 92%;}
.cp-flow-step h3 {font-size: 28px; line-height: 1.2; margin: 0 12px; letter-spacing: -.4px;}
.cp-flow-step p {margin: 10px 12px 0; color: var(--mu); font-size: 16.5px;}
.cp-xlead {display: block; font-size: 14px; margin: 4px 0 2px;}
.cp-xmini {display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap;}
.cp-xmini span {font-size: 11.5px; padding: 4px 9px; border-radius: 999px; background: #F4F1F0;}
.cp-xgrid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 60px; margin-top: 34px;}
.cp-xgrid .cp-nrow:nth-last-child(2) {border-bottom: 1.5px solid var(--ik);}
.cp-xgrid .cp-nrow b {font-size: 24px;}
.cp-xqas {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 34px;}
.cp-xqa {background: #fff; border-radius: 22px; padding: 24px; box-shadow: rgba(127, 127, 127, .18) 0 0 0 1px;}
.cp-xqa h3 {font-size: 22px; line-height: 1.25;}
.cp-xqa p {margin-top: 10px; color: var(--mu); font-size: 16.5px;}
.cp-xlinks {display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px;}
.cp-xcta .cp-cta-l .cp-xcta-go {display: flex; flex-direction: column; align-items: flex-start; gap: 18px;}
.cp-nw {white-space: nowrap;}
.cp-xalt {display: inline-flex; gap: 8px; align-items: center; color: #fff; font-size: 18px; text-decoration: underline; text-underline-offset: 4px; min-height: 44px;}
.cp-xthread {display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 440px;}
.cp-xcards {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px;}
.cp-xcard {position: relative; display: flex; flex-direction: column; gap: 6px; background: #fff; border-radius: 22px; padding: 24px 56px 24px 24px; box-shadow: rgba(127, 127, 127, .18) 0 0 0 1px; min-height: 130px;}
.cp-xcard b {font: 600 22px/1.2 var(--hm-display), var(--indic);}
.cp-xcard small {color: var(--mu); font-size: 15px; line-height: 1.4;}
.cp-xcard span {position: absolute; right: 20px; top: 22px; color: var(--vi);}
.cp-xcard:hover {box-shadow: var(--vi) 0 0 0 2px;}
.cp-xtable-w {margin-top: 30px; border-radius: 22px; background: #fff; box-shadow: rgba(127, 127, 127, .18) 0 0 0 1px; overflow: hidden;}
.cp-xtable {width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45;}
.cp-xtable th, .cp-xtable td {text-align: left; vertical-align: top; padding: 16px 20px; border-top: 1px solid var(--ln);}
.cp-xtable thead th {border-top: 0; font: 600 18px/1.2 var(--hm-display); background: #F7F4F3;}
.cp-xtable thead th:nth-child(2), .cp-xtable td:nth-of-type(1) {background: rgba(106, 0, 248, .045);}
.cp-xtable tbody th {font: 600 16px/1.35 var(--hm-display); width: 22%;}
.cp-xtable td {width: 39%; color: var(--ik2);}
.cp-vh {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);}
.cp-xfits {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 30px;}
.cp-xfit {border-radius: 22px; padding: 28px; background: #fff; box-shadow: rgba(127, 127, 127, .18) 0 0 0 1px;}
.cp-xfit-cp {background: linear-gradient(140deg, #EFE6FF, #F8F5FF);}
.cp-xfit h3 {font-size: 26px;}
.cp-xfit ul {margin-top: 14px; display: grid; gap: 10px;}
.cp-xfit li {padding-left: 22px; position: relative; font-size: 16.5px;}
.cp-xfit li::before {content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--vi);}
.cp-xsrc {margin: 16px 0 0; padding-left: 22px; display: grid; gap: 8px; font-size: 16px;}
.cp-xsrc a {text-decoration: underline; text-underline-offset: 3px; color: var(--vi);}
.cp-xsrc span {color: var(--mu); overflow-wrap: anywhere;}
.cp-xnote {margin-top: 14px; color: var(--mu); font-size: 14.5px; max-width: 900px;}
.cp-xnote a {text-decoration: underline;}
/* the estimate template */
.cp-tpl-tools {display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px;}
.cp-tpl {background: #fff; border-radius: 22px; padding: 40px; box-shadow: rgba(127, 127, 127, .18) 0 0 0 1px, rgba(22, 22, 22, .25) 0 30px 60px -40px; font-size: 15px;}
.cp-tpl input, .cp-tpl select {font: inherit; color: inherit; width: 100%; border: 0; border-bottom: 1.5px solid var(--ln); background: transparent; padding: 8px 2px; border-radius: 0; min-height: 40px;}
.cp-tpl input:focus, .cp-tpl select:focus {outline: none; border-bottom-color: var(--vi);}
.cp-tpl label {display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--mu); font-weight: 600; letter-spacing: .02em;}
.cp-tpl label input, .cp-tpl label select {font-size: 15px; color: var(--ik); font-weight: 400; letter-spacing: 0;}
.cp-tpl-top {display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px;}
.cp-tpl-top h2 {font-size: 40px; letter-spacing: -1px; margin-bottom: 6px;}
.cp-tpl-top input.big {font: 600 20px var(--hm-display);}
.cp-tpl-meta {display: grid; gap: 10px;}
.cp-tpl-to {display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; margin-top: 28px;}
.cp-tpl-to .w {grid-column: 1 / -1;}
.cp-tpl-tw {margin-top: 30px;}
.cp-tpl-lines {width: 100%; border-collapse: collapse;}
.cp-tpl-lines th {text-align: left; font-size: 12.5px; color: var(--mu); padding: 0 6px 6px; border-bottom: 1.5px solid var(--ik);}
.cp-tpl-lines td {padding: 0 6px;}
.cp-tpl-lines th:nth-child(1) {width: 18%;} .cp-tpl-lines th:nth-child(3), .cp-tpl-lines th:nth-child(4) {width: 9%;}
.cp-tpl-lines th:nth-child(5), .cp-tpl-lines th:nth-child(6) {width: 13%;}
.cp-tpl-lines .n, .cp-tpl-lines .amt {text-align: right;}
.cp-tpl-lines .amt {font-variant-numeric: tabular-nums; white-space: nowrap; border-bottom: 1.5px solid var(--ln);}
.cp-tpl-add {margin-top: 14px;}
.cp-tpl-sum {display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; margin-top: 26px; align-items: start;}
.cp-tpl-prov {max-width: 360px;}
.cp-tpl-tot > div {display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--ln); font-variant-numeric: tabular-nums;}
.cp-tpl-tot .all {border-bottom: 0; border-top: 2px solid var(--ik); font: 600 19px var(--hm-display); padding-top: 12px;}
.cp-tpl-sign {display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin-top: 56px;}
.cp-tpl-sign span {border-top: 1.5px solid var(--ik); padding-top: 6px; font-size: 12.5px; color: var(--mu);}
.cp-tpl-foot {margin-top: 30px; font-size: 12.5px; color: var(--mu);}
@media (max-width: 1100px) {
  .cp-xhead {padding: 60px 40px 0;}
  .cp-xh1 {font-size: 56px;}
  .cp-xsec {padding: 0 40px;}
  .cp-flow {grid-template-columns: 1fr; max-width: 640px;}
  .cp-flow-vis {min-height: 0;}
  .cp-xqas, .cp-xcards {grid-template-columns: 1fr 1fr;}
  .cp-xcta {grid-template-columns: minmax(0, 1fr);}
}
@media (max-width: 760px) {
  .cp-xhead {padding: 36px 16px 0;}
  .cp-xh1 {font-size: 38px; line-height: 1.1; letter-spacing: -.8px;}
  .lang-pa .cp-xh1 {font-size: 32px;}
  .cp-xhead > p {font-size: 17px; margin-top: 18px;}
  .cp-xsec {padding: 0 16px; margin-top: 72px;}
  .cp-xsec > h2 {font-size: 32px; letter-spacing: -.6px;}
  .lang-pa .cp-xsec > h2 {font-size: 28px;}
  .cp-xsec > h2.cp-xh2s {font-size: 24px;}
  .cp-xlede {font-size: 16px;}
  .cp-flow-vis {padding: 16px;}
  .cp-flow-step h3 {font-size: 24px;}
  .cp-xgrid, .cp-xqas, .cp-xcards, .cp-xfits {grid-template-columns: 1fr;}
  .cp-xgrid .cp-nrow:nth-last-child(2) {border-bottom: 0;}
  .cp-xgrid .cp-nrow b {font-size: 20px;}
  .cp-xtable, .cp-xtable tbody, .cp-xtable tr, .cp-xtable th, .cp-xtable td {display: block; width: 100%;}
  .cp-xtable thead {display: none;}
  .cp-xtable tbody tr {padding: 14px 16px; border-top: 1px solid var(--ln);}
  .cp-xtable tbody tr:first-child {border-top: 0;}
  .cp-xtable tbody th, .cp-xtable td {border: 0; padding: 4px 0; width: 100%;}
  .cp-xtable td:nth-of-type(1) {background: none;}
  .cp-xtable td::before {content: attr(data-h); display: block; font: 600 12px/1.4 var(--hm-body); color: var(--vi); text-transform: uppercase; letter-spacing: .06em; margin-top: 6px;}
  .cp-xtable td + td::before {color: var(--mu);}
  .cp-xalt {font-size: 16px;}
  .cp-xcta .cp-btn-lg {white-space: normal; height: auto; min-height: 64px; padding: 12px 22px; font-size: 19px; line-height: 1.2; text-align: left;}
  .cp-xcta .cp-btn-lg svg {flex: none;}
  .cp-tpl {padding: 22px 16px;}
  .cp-tpl-top, .cp-tpl-to, .cp-tpl-sum {grid-template-columns: 1fr; gap: 14px;}
  .cp-tpl-tw {overflow-x: auto;}
  .cp-tpl-lines {min-width: 620px;}
  .cp-tpl-sign {grid-template-columns: 1fr; gap: 40px;}
}
@media print {
  .cp {background: #fff;}
  .cp-hdr, .cp-foot, .cp-menu-ov, .cp-xhead, .cp-xsec:not(.cp-tpl-sec), .cp-sec, .cp-tpl-tools, .cp-tpl-add, .cp-tpl-sec > .cp-xnote {display: none !important;}
  .cp-xsec.cp-tpl-sec {margin: 0; padding: 0;}
  .cp-tpl {box-shadow: none; padding: 0; border-radius: 0;}
  .cp-tpl input, .cp-tpl select {border-bottom-color: #ccc;}
  .cp-tpl input::placeholder {color: transparent;}
}

/* the third stat is a chat, not a number */
.cp-wrp-bubs {display: grid; gap: 6px; justify-items: start; min-height: 76px; align-content: center;}
.cp-wrp-bub {display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 9px 14px; border-radius: 20px;
  font: 500 16px/1.25 var(--hm-body); letter-spacing: -.005em;}
.cp-wrp-bub.me {justify-self: end; background: #0a84ff; color: #fff; border-bottom-right-radius: 6px;}
.cp-wrp-bub.them {background: rgba(250,247,246,.12); color: #faf7f6; border-bottom-left-radius: 6px;}
.cp-wrp-bub img {width: 18px; height: 18px; border-radius: 50%; flex: none;}
@media (prefers-reduced-motion: no-preference) {
  .cp-wrp-bub {animation: cpWrpPop .5s cubic-bezier(.2,.9,.3,1.3) both;}
  .cp-wrp-bub.them {animation-delay: .9s;}
  @keyframes cpWrpPop {from {transform: translateY(6px) scale(.92); opacity: 0;} to {transform: none; opacity: 1;}}
}
@media (max-width: 640px) {
  .cp-wrp-n.cp-wrp-chat {grid-template-columns: 1fr; gap: 10px;}
  .cp-wrp-bubs {min-height: 0;}
  .cp-wrp-bub {font-size: 15px;}
}