/* ReplyJolt Creator Kit / Brand Transformation Studio V2.
   Original lightweight vector art, responsive preview and a distinct before/after. */
.ck-hero{position:relative;isolation:isolate;min-height:650px;gap:clamp(28px,4vw,58px)}
.ck-hero:before{content:"";position:absolute;inset:-8% -12% 0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 81% 41%,rgba(255,145,78,.13),transparent 40%),radial-gradient(ellipse at 15% 75%,rgba(150,68,219,.08),transparent 52%)}
.ck-hero h1 em{background:linear-gradient(105deg,#ffb36f,#ff7b70 60%,#fd83c6);background-clip:text;-webkit-background-clip:text;color:transparent}
.ck-hero-showcase{position:relative;isolation:isolate;height:490px;min-width:0;perspective:1100px}
.ck-hero-glow{position:absolute;inset:7% -8%;z-index:-1;filter:blur(27px);background:radial-gradient(ellipse at 45% 49%,rgba(245,101,157,.20),transparent 55%),radial-gradient(ellipse at 88% 62%,rgba(64,193,238,.13),transparent 55%)}
.ck-hero-sample{position:absolute;border:1px solid rgba(255,255,255,.40);border-radius:16px;overflow:hidden;background:#11192b;box-shadow:0 21px 55px #0009,0 4px 0 #ffffff11;transform-style:preserve-3d}
.ck-hero-sample>img{display:block;width:100%;height:100%;object-fit:cover}
.ck-hero-sample>span{position:absolute;inset:auto 0 0;display:flex;gap:12px;align-items:center;padding:29px 16px 15px;background:linear-gradient(transparent,#071019ef 55%);font-size:11px;letter-spacing:1.2px;font-weight:950;color:#fff;text-shadow:0 2px 10px #000}
.ck-hero-sample>span img{display:block;width:39px;height:39px;object-fit:cover;border:2px solid #fff9;border-radius:10px;box-shadow:0 4px 16px #0009}
.ck-hero-sample-tech{right:1%;top:6px;width:70%;height:193px;transform:rotate(7deg)}
.ck-hero-sample-life{left:0%;bottom:10px;width:72%;height:198px;transform:rotate(-8deg);z-index:1}
.ck-hero-sample-gaming{left:8%;top:31%;width:84%;height:227px;z-index:2;transform:rotate(-3deg);border-color:#80ddfc;box-shadow:0 30px 75px #000b,0 0 40px #17b2e839}
.ck-hero-speech{position:absolute;bottom:11px;right:0;max-width:250px;display:flex;gap:10px;align-items:center;padding:12px 13px;border:1px solid #ffab75;border-radius:19px 19px 6px 19px;background:#191b2df1;box-shadow:0 13px 33px #0009;z-index:4;transform:rotate(3deg)}
.ck-hero-speech img{width:36px;height:36px;border-radius:50%;flex:none;box-shadow:0 0 0 1px #ffae7a}
.ck-hero-speech span{color:#f6f2ff;font-size:10px;font-weight:850;line-height:1.5;letter-spacing:.2px}
.ck-hero-stamp{position:absolute;top:6px;left:0;color:#ffb887;z-index:3;font-size:9px;line-height:1.5;font-weight:950;letter-spacing:1.5px}
.ck-samples{position:relative;isolation:isolate}
.ck-samples:before{content:"";position:absolute;inset:11% -10% 0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 14% 24%,#ff865811,transparent 44%),radial-gradient(ellipse at 91% 72%,#8d54d511,transparent 47%)}
.ck-studio-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:1010px;margin-bottom:22px}
.ck-studio-picker .ck-option{display:flex;align-items:center;gap:11px;min-width:0;min-height:68px;padding:12px 17px;border:1px solid #5b5571;border-radius:19px;background:linear-gradient(132deg,#1c1b2b,#101e2d);color:#e8f1fa;text-align:left}
.ck-studio-picker .ck-option:hover{border-color:#ffa870}
.ck-studio-picker .ck-option img{display:block;width:39px;height:39px;flex:none;border-radius:11px;box-shadow:0 0 0 1px #90aac544}
.ck-studio-picker .ck-option span{display:block;min-width:0;font-size:12px;line-height:1.3;letter-spacing:.6px}
.ck-studio-picker .ck-option small{display:block;color:#a5b6c6;font-size:10px;line-height:1.5;margin-top:4px;font-weight:600;letter-spacing:0}
.ck-studio-picker .ck-option.is-active{color:#fff;background:linear-gradient(115deg,#2e2442,#182c40);border-color:#ffae6b;box-shadow:inset 0 0 0 1px #fda76b3d,0 11px 28px #0005}
.ck-studio-picker .ck-option.is-active small{color:#efd2bb}
.ck-preview-shell{position:relative;border:1px solid #745b81;border-radius:27px;overflow:hidden;background:linear-gradient(135deg,#110f21,#0e1b2b);box-shadow:0 21px 80px #0008,0 0 50px #7f437b15}
.ck-windowbar{background:#171629;min-height:48px}
.ck-transform-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px 24px;background:linear-gradient(105deg,#221a2d,#112233);border-bottom:1px solid #5a4d62}
.ck-transform-copy strong{display:block;font-size:12px;font-weight:950;color:#ffb97e;letter-spacing:1.2px}
.ck-transform-copy small{display:block;font-size:11px;color:#a9bacb;margin-top:5px;line-height:1.5}
.ck-state-picker{display:flex;flex:none;gap:4px;border:1px solid #596478;background:#0d1624;border-radius:999px;padding:4px}
.ck-state-picker button{min-height:43px;border:0;border-radius:999px;background:transparent;color:#b8cedd;padding:10px 23px;font-size:11px;letter-spacing:1px;font-weight:950;transition:background .2s,color .2s}
.ck-state-picker button.is-active{background:linear-gradient(100deg,#ffb77e,#ff785b);color:#1a0e14;box-shadow:0 4px 14px #0005}
.ck-state-picker button:focus-visible{outline:3px solid #9aebff;outline-offset:2px}
.ck-preview-grid{grid-template-columns:1.07fr .93fr;gap:17px;padding:21px}
.ck-social-card{position:relative;overflow:hidden;background:#0b101b;border:1px solid #45617a;border-radius:19px;box-shadow:0 10px 26px #0004}
.ck-banner{height:236px;padding:20px;isolation:isolate;background:#141e35;overflow:hidden}
.ck-banner-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:opacity .25s,filter .25s}
.ck-banner:before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:linear-gradient(90deg,#070c19bd,#070c196d 56%,#070c1920)}
.ck-banner small{z-index:1;font-size:9px;letter-spacing:1.5px;color:#e6e8f5}
.ck-banner>span:nth-of-type(1){font-size:clamp(25px,3.15vw,41px);max-width:340px;text-wrap:balance;letter-spacing:-.8px;color:#fff}
.ck-banner-spark{color:#ffb378;z-index:1;opacity:.65}
.ck-avatar{width:95px;height:95px;border-radius:24px;background:#0d1626;overflow:hidden;border:5px solid #0b101b;box-shadow:0 11px 23px #0008}
.ck-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.ck-default-avatar{display:none}
.ck-profile-content{position:relative;padding:0 24px 25px}
.ck-profile-meta{padding-top:5px}
.ck-profile-meta h3{font-size:26px;line-height:1.15;margin:11px 0 5px;letter-spacing:-.7px}
.ck-profile-meta span{font-size:12px;line-height:1.45}
.ck-profile-pill{position:absolute;top:20px;right:22px;border:1px solid #667b8b;border-radius:999px;padding:9px 14px;color:#e0effb;font-size:10px;font-weight:950;letter-spacing:.6px}
.ck-profile-content>p{font-size:14px;line-height:1.65;min-height:68px;margin-top:19px}
.ck-profile-stats{color:#a5dced;min-height:31px}
.ck-identity-stack{gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.ck-identity-card{border-radius:18px;padding:19px;background:linear-gradient(150deg,#211d32,#101d2b);border:1px solid #514663;min-height:130px;gap:13px}
.ck-identity-card:nth-child(2){background:linear-gradient(150deg,#191c32,#10273a);border-color:#40657d}
.ck-identity-card:nth-child(3){background:linear-gradient(145deg,#201b30,#151c30);border-color:#6c4f79}
.ck-identity-card:nth-child(4){background:linear-gradient(155deg,#291f2c,#192133);border-color:#7b535f}
.ck-identity-card h3{font-size:clamp(19px,2.2vw,26px);line-height:1.1}
.ck-identity-card p{font-size:13px;line-height:1.58}
.ck-label{color:#ffb080;letter-spacing:1.2px;font-size:10px;line-height:1.4}
.ck-identity-card:nth-child(4){gap:12px}
.ck-swatches span{width:30px;height:30px}
.ck-preview-shell.is-before .ck-banner{background:#515967}
.ck-preview-shell.is-before .ck-banner-art{opacity:.04;filter:grayscale(1)}
.ck-preview-shell.is-before .ck-banner:before{background:linear-gradient(120deg,#545b66,#707989 65%,#535b68)}
.ck-preview-shell.is-before .ck-banner>span:nth-of-type(1){color:#e7e9ec;font-family:var(--font);font-weight:700;letter-spacing:0;font-size:25px;text-shadow:none}
.ck-preview-shell.is-before .ck-banner-spark{display:none}
.ck-preview-shell.is-before .ck-avatar{background:linear-gradient(140deg,#8a949c,#414a58);display:grid;place-items:center;border-radius:50%}
.ck-preview-shell.is-before .ck-avatar img{display:none}
.ck-preview-shell.is-before .ck-default-avatar{display:block;color:#d6d9df;font-size:50px;line-height:1}
.ck-preview-shell.is-before .ck-social-card{border-color:#707780}
.ck-preview-shell.is-before .ck-identity-card{background:#171f29;border-color:#354351}
.ck-preview-shell.is-before .ck-label{color:#9caaba}
.ck-preview-shell.is-before .ck-identity-card h3{font-weight:700;color:#c5cbd0}
.ck-preview-shell.is-before .ck-identity-card p{color:#a2adb9}
.ck-after-caption{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:22px;padding:23px 24px;background:linear-gradient(95deg,#251b2e,#11293a);border:1px solid #7d5c6b;border-radius:18px}
.ck-after-caption>span{color:#ffac78;font-size:10px;font-weight:950;letter-spacing:1.4px;white-space:nowrap}
.ck-after-caption p{flex:1 1 280px;margin:0;line-height:1.65;color:#c9d9e3;font-size:13px}
.ck-after-caption a{color:#ffb57b;font-size:11px;letter-spacing:.5px;font-weight:950;text-decoration:underline;text-underline-offset:4px}
.ck-sample-note{max-width:990px}
@media(max-width:1000px){
 .ck-hero{min-height:0}
 .ck-hero-showcase{height:440px}
 .ck-preview-grid{grid-template-columns:1fr}
 .ck-banner{height:235px}
 .ck-identity-stack{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
 .ck-hero-showcase{max-width:680px;width:100%;height:410px;margin:0 auto 6px}
 .ck-hero-sample-tech{width:68%}
 .ck-hero-sample-gaming{width:80%;left:7%}
 .ck-hero-sample-life{width:71%}
}
@media(max-width:600px){
 .ck-hero-showcase{height:295px;margin:10px auto 4px;max-width:450px}
 .ck-hero-sample-tech{height:119px;top:6px}
 .ck-hero-sample-life{height:120px;bottom:4px}
 .ck-hero-sample-gaming{height:145px;top:27%;left:7%;width:84%}
 .ck-hero-sample>span{padding:19px 9px 9px;gap:6px;font-size:8px;letter-spacing:.5px}
 .ck-hero-sample>span img{width:26px;height:26px;border-radius:7px}
 .ck-hero-speech{max-width:190px;bottom:-11px;padding:8px 9px;transform:rotate(2deg)}
 .ck-hero-speech img{width:28px;height:28px}
 .ck-hero-speech span{font-size:8px}
 .ck-hero-stamp{font-size:7px;top:-4px}
 .ck-studio-picker{gap:7px}
 .ck-studio-picker .ck-option{padding:11px 6px;min-height:75px;display:grid;justify-items:center;text-align:center;gap:5px;border-radius:15px}
 .ck-studio-picker .ck-option img{width:29px;height:29px;border-radius:8px}
 .ck-studio-picker .ck-option span{font-size:10px}
 .ck-studio-picker .ck-option small{display:none}
 .ck-transform-toolbar{flex-wrap:wrap;padding:13px 12px;gap:13px}
 .ck-transform-copy strong{font-size:10px}
 .ck-transform-copy small{font-size:10px}
 .ck-state-picker{width:100%}.ck-state-picker button{flex:1}
 .ck-preview-grid{padding:11px;gap:12px}
 .ck-banner{height:160px;padding:14px}
 .ck-banner>span:nth-of-type(1){font-size:clamp(22px,6.1vw,31px)}
 .ck-banner small{font-size:8px}
 .ck-profile-content{padding:0 16px 19px}
 .ck-avatar{width:74px;height:74px;border-width:4px;margin-top:-34px;border-radius:17px}
 .ck-default-avatar{font-size:39px}
 .ck-profile-meta h3{font-size:22px}
 .ck-profile-content>p{font-size:13px;min-height:0}
 .ck-profile-pill{padding:7px 10px;font-size:9px;top:14px;right:14px}
 .ck-identity-stack{grid-template-columns:1fr;gap:9px}
 .ck-identity-card,.ck-identity-card:nth-child(3),.ck-identity-card:nth-child(4){grid-column:auto;min-height:0;padding:15px}
 .ck-identity-card h3{font-size:21px}
 .ck-identity-card p{font-size:12px}
 .ck-after-caption{padding:18px;gap:11px}
}
@media(prefers-reduced-motion:reduce){
 .ck-hero-showcase .ck-hero-sample,.ck-banner-art,.ck-state-picker button{transition:none!important}
}


/* Override the older global concept-picker treatment while keeping the brand tiles tasteful. */
.ck-studio-picker .ck-option.is-active{
 background:linear-gradient(115deg,#2e2442,#182c40)!important;
 color:#fff!important;
 border-color:#ffae6b!important;
}
.ck-studio-picker .ck-option:focus-visible{outline:3px solid #88e9ff;outline-offset:3px}