/* ReplyJolt / JoltBot World: lighter, livelier, still fast & accessible. */
/* Intentionally isolated from existing input behavior, Netlify forms & private AI. */
:root{
  --jolt-ember:#ff914d;
  --jolt-pink:#ff68a6;
  --jolt-violet:#8e6dff;
  --jolt-tangerine:#ffc079;
}
body{
 background:
 radial-gradient(circle at 12% 9%,rgba(255,117,56,.075),transparent 26%),
 radial-gradient(circle at 95% 28%,rgba(135,65,212,.07),transparent 28%),
 radial-gradient(circle at 30% 65%,rgba(6,194,246,.04),transparent 30%),
 #06080e;
}
.site-header{
 border-bottom:1px solid rgba(255,139,79,.27);
 box-shadow:0 5px 30px rgba(5,11,20,.48),inset 0 -1px rgba(63,185,239,.1)
}
.nav-cta{border-radius:999px!important;background:linear-gradient(118deg,#fd9858,#f95a75)!important;color:#0b0c14!important;box-shadow:0 4px 21px rgba(255,124,64,.17)}
.btn{border-radius:999px;transition:box-shadow .22s,transform .22s,background-color .22s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(115deg,#ffb064,#ff7d49 48%,#fa6486)!important;color:#110b10!important;box-shadow:0 9px 33px rgba(251,123,67,.22)!important}
.btn-primary:hover{box-shadow:0 12px 35px rgba(255,111,60,.42)!important}
.btn-ghost{background:linear-gradient(120deg,rgba(22,36,52,.75),rgba(43,23,45,.32))!important}
.section-kicker{color:#ffae7c}
.section-kicker span{color:var(--electric)}
.hero{position:relative;isolation:isolate}
.hero::before{
 content:"";z-index:-1;position:absolute;inset:1% -10% 0 -6%;pointer-events:none;
 background:
 radial-gradient(ellipse 45% 60% at 72% 35%,rgba(255,102,54,.12),transparent 65%),
 radial-gradient(ellipse 48% 45% at 21% 51%,rgba(9,150,222,.09),transparent 67%);
}
.hero-copy{position:relative;z-index:2}
.hero h1 .text-hot{color:var(--jolt-ember);text-shadow:0 0 27px #f9866c32}
.hero-period{color:var(--jolt-pink)}
.hero-art{isolation:isolate}
.hero-glow{background:radial-gradient(ellipse,rgba(255,131,71,.2),rgba(21,149,207,.16) 44%,transparent 72%)!important}
.robot-image-wrap{
 border-radius:29px 75px 39px 74px;clip-path:none!important;
 border:1px solid rgba(255,152,88,.52);
 box-shadow:14px 16px 0 #112435,0 0 75px rgba(255,110,58,.12);
 background:linear-gradient(150deg,#142b39,#170f20);
 animation:jolt-art-breathe 8s ease-in-out infinite
}
.robot-image{animation:jolt-robot-bob 5.8s ease-in-out infinite;will-change:transform}
.robot-image-wrap::after{
 background:linear-gradient(133deg,rgba(255,162,90,.13),transparent 37%,rgba(34,161,249,.13) 75%,transparent)!important
}
.signal-card{border-radius:16px!important;background:rgba(12,16,29,.92)!important}
.signal-card-top{border-color:rgba(255,148,77,.67)!important}
.signal-card-bottom{border-color:rgba(252,89,152,.6)!important}
.signal-card-top .signal-head{color:var(--jolt-ember)}
.hero-detail .orange-bolt{color:var(--jolt-ember)}
.jolt-hero-banter{
 position:relative;display:flex;align-items:center;gap:12px;
 width:min(520px,100%);margin-top:21px;padding:16px 15px 15px 16px;
 border:1px solid rgba(255,143,84,.6);border-radius:22px 22px 22px 5px;
 background:radial-gradient(circle at 100% 0%,rgba(255,135,66,.15),transparent 45%),
 linear-gradient(115deg,rgba(29,24,37,.93),rgba(13,26,39,.97));
 box-shadow:0 13px 34px #0005,0 0 22px #fa855013;
}
.jolt-hero-banter::before{
 content:"";position:absolute;left:15px;top:-8px;width:43px;height:8px;border-radius:8px 8px 0 0;
 background:linear-gradient(90deg,var(--jolt-ember),var(--jolt-pink))
}
.jolt-hero-banter .jolt-banter-avatar{
 width:45px;height:45px;flex:none;border-radius:50%;object-fit:cover;
 box-shadow:0 0 0 2px #f39163,0 0 24px #ff904c4d;animation:jolt-nod 4.8s ease-in-out infinite
}
.jolt-banter-content{min-width:0;flex:1;display:grid;gap:6px}
.jolt-banter-label{color:#ffae7c;font-size:9px;font-weight:950;letter-spacing:1.7px}
.jolt-banter-text{font-size:13px;line-height:1.48;color:#f4f8ff;min-height:2.8em;font-weight:750}
.jolt-banter-text.is-changing{animation:jolt-quip-pop .35s ease}
.jolt-banter-next{
 align-self:center;display:grid;place-items:center;flex:none;width:43px;height:43px;
 border-radius:50%;background:linear-gradient(135deg,#ff9b57,#f86d75);color:#16121a;
 font-size:20px;font-weight:950;border:1px solid #ffa76b;transition:transform .2s;
}
.jolt-banter-next:hover{transform:rotate(18deg) scale(1.06)}
.jolt-banter-next:focus-visible{outline:3px solid #8be9ff;outline-offset:3px}
.ticker{background:linear-gradient(105deg,#2c1824,#0b2130 43%,#281425 94%);border-block:1px solid #634759}
.ticker b{color:#ff995c}
.pilot-announcement{border-radius:18px;background:linear-gradient(100deg,rgba(255,146,66,.08),rgba(70,174,255,.07));margin-top:15px;margin-bottom:2px;padding-left:20px;padding-right:20px}
.pilot-announcement>a{border-radius:999px;background:#241e29;color:#ffb485;border-color:#a45d52}
.brand-spotlight{position:relative}
.brand-spotlight:before{
 content:"";position:absolute;inset:10% -7% 9% 32%;pointer-events:none;z-index:-1;
 background:radial-gradient(ellipse,rgba(194,53,112,.11),transparent 72%);
}
.brand-token-row span{border-radius:999px;background:#281c2b;border-color:#704458;color:#ffc195}
.brand-token-row span:nth-child(even){background:#11293c;border-color:#356c88;color:#9ceaff}
.brand-spotlight-poster{border-radius:38px 13px 48px 18px!important;transform:rotate(1.7deg);background:
 radial-gradient(circle at 20% 80%,rgba(248,117,70,.36),transparent 57%),
 radial-gradient(circle at 90% 14%,rgba(111,55,199,.35),transparent 58%),
 linear-gradient(130deg,#19182e,#0b1725)!important;border-color:#ba655d!important;
 box-shadow:16px 20px 0 #24192a,0 0 70px #e77b4029!important
}
.brand-spotlight-poster:hover{transform:translateY(-6px) rotate(0deg)}
.brand-poster-message i{color:#ff9552}
.brand-case-link{border-radius:15px!important;background:linear-gradient(115deg,#1d1e2f,#112537)!important}
.brand-case-links .brand-case-link:nth-child(2){border-color:#784a6b;background:linear-gradient(110deg,#221b30,#132331)!important}
.demo-section{background:radial-gradient(ellipse at 16% 18%,rgba(250,103,74,.1),transparent 50%),
 radial-gradient(ellipse at 92% 83%,rgba(101,67,190,.09),transparent 50%),#090d16}
.demo-surface{border-radius:23px;border-color:#3c7590;box-shadow:0 19px 60px #0008,0 0 35px #803f591b}
.reply-card{border-radius:16px!important}
.reply-card:nth-child(odd){background:linear-gradient(135deg,rgba(38,28,42,.52),rgba(14,27,42,.7))}
.reply-card:nth-child(even){background:linear-gradient(135deg,rgba(16,37,50,.64),rgba(30,25,44,.6))}
.copy-button{border-radius:999px!important}
.feature-card{border-radius:24px 12px 30px 14px;border-color:#564354;background:linear-gradient(155deg,#251928,#101b29 72%);box-shadow:0 15px 28px #0003}
.feature-card:nth-child(2){background:linear-gradient(155deg,#1a2940,#191b30);border-color:#456a7b;transform:translateY(-7px)}
.feature-card:nth-child(2):hover{transform:translateY(-13px)}
.feature-card:nth-child(3){background:linear-gradient(145deg,#281c2b,#182131)}
.feature-card .feature-icon{color:#ff9255}
.jolt-quip-strip{border-radius:25px 12px 25px 12px!important;border-color:#a15a62!important;
 background:linear-gradient(105deg,#281a29,#0f2434 55%,#251b2c)!important}
.future-card{border-radius:25px 13px 29px 13px}
.future-card-kit{background:radial-gradient(circle at 95% 0%,#e96e4333,transparent 42%),linear-gradient(125deg,#2b202b,#131824);border-color:#995b63}
.future-card-stats{background:radial-gradient(circle at 90% 9%,#9c4ac540,transparent 50%),linear-gradient(125deg,#221830,#131b27);border-color:#715c8c}
.signup-section{background:radial-gradient(ellipse at 8% 45%,rgba(252,126,61,.16),transparent 58%),linear-gradient(115deg,#20151d,#101b28)}
.signup-panel{border-radius:25px 14px 30px 17px!important;overflow:hidden;border:1px solid #8d6068!important}
.signup-panel input:not([type=checkbox]),.signup-panel select{border-radius:11px!important}
.jolt-voice-station{
 border-radius:22px 22px 7px 22px;margin-block:30px 25px;padding:18px;
 border:1px solid #855c70;background:
 radial-gradient(circle at 90% 0%,#91395526,transparent 55%),
 linear-gradient(105deg,#251c29,#0c2030 55%,#1b1d2d);
 display:flex;gap:14px;align-items:center;box-shadow:0 13px 35px #0004
}
.jolt-voice-station img{width:56px;height:56px;object-fit:cover;border-radius:50%;border:2px solid var(--jolt-ember);animation:jolt-nod 5s ease-in-out infinite}
.jolt-voice-copy{flex:1;min-width:0}
.jolt-voice-copy span{display:block;font-size:10px;color:#ffab79;letter-spacing:1.2px;font-weight:950}
.jolt-voice-copy strong{display:block;color:#f3f8ff;font-size:15px;line-height:1.45;margin-top:6px}
.jolt-voice-station button{padding:12px 15px;min-height:44px;border:1px solid #ffa264;border-radius:999px;background:#312334;color:#ffd3a7;font-size:11px;font-weight:950;letter-spacing:.3px;white-space:normal}
.jolt-voice-station button:hover{background:#52304a}
.ck-sticker,.ck-preview-shell,.ck-social-card,.ck-identity-card,.ck-items>div,.fk-price-card,.fk-deliverables article,.fk-form-shell,.rc-system-grid article,.gc-principles>div,.gc-gallery-item{
 border-radius:18px!important;
}
.ck-sticker{background:radial-gradient(ellipse at 74% 20%,#a94a5a55,transparent 58%),linear-gradient(135deg,#2b1a28,#132539)!important;transform:rotate(1deg)}
.ck-option{border-radius:999px!important}
.ck-option.is-active{background:linear-gradient(90deg,#ffac69,#f66b75)!important;color:#170f16!important;border-color:#ffa57a!important}
.ck-identity-card:nth-child(2){border-color:#84536a!important;background:linear-gradient(130deg,#2c1d2c,#151d2d)}
.ck-items>div:nth-child(3n+1),.fk-deliverables article:nth-child(3n+1){background:linear-gradient(130deg,#29202e,#141c2a);border-color:#6d516c}
.ck-items>div:nth-child(3n+2),.fk-deliverables article:nth-child(3n+2){background:linear-gradient(130deg,#2a1d29,#121f2f);border-color:#7e515e}
.ck-proof,.fk-proof{background:radial-gradient(ellipse at 12% 24%,#ba4d5b33,transparent 55%),linear-gradient(110deg,#1b1520,#0b1722)!important}
.fk-price-card{background:radial-gradient(circle at 80% 5%,#fb915232,transparent 48%),linear-gradient(120deg,#281b2a,#102438)!important;border-color:#bf795d!important}
.fk-price-cta{border-radius:999px;background:linear-gradient(90deg,#ffb369,#f66f78)!important}
.fk-apply{background:radial-gradient(circle at 15% 10%,#ec8b4930,transparent 55%),#121922!important}
.rc-hero,.gc-hero{background:radial-gradient(circle at 75% 25%,rgba(255,136,57,.2),transparent 55%),linear-gradient(120deg,#15131e,#0a1824)!important}
.rc-art-grid figure,.rc-browser,.gc-hero-art{border-radius:24px 11px 24px 11px;overflow:hidden}
@keyframes jolt-robot-bob{0%,100%{transform:scale(1.05) rotate(2deg) translateY(0)}50%{transform:scale(1.075) rotate(1.3deg) translateY(-7px)}}
@keyframes jolt-art-breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.075)}}
@keyframes jolt-nod{0%,100%{transform:rotate(-5deg)}48%{transform:rotate(5deg)}}
@keyframes jolt-quip-pop{0%{opacity:.35;transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}}
@media(max-width:900px){
 .feature-card:nth-child(2){transform:none}
 .feature-card:nth-child(2):hover{transform:translateY(-5px)}
 .brand-spotlight-poster{transform:none}
}
@media(max-width:650px){
 .jolt-hero-banter{padding:13px;gap:10px;border-radius:19px 19px 19px 5px;margin-top:18px}
 .jolt-banter-label{font-size:8px}
 .jolt-banter-text{font-size:12px}
 .jolt-banter-next{width:44px;height:44px}
 .jolt-hero-banter .jolt-banter-avatar{width:38px;height:38px}
 .robot-image-wrap{border-radius:20px 43px 28px 45px}
 .jolt-voice-station{padding:15px;gap:11px;flex-wrap:wrap}
 .jolt-voice-station img{width:45px;height:45px}
 .jolt-voice-copy strong{font-size:13px}
 .jolt-voice-station button{width:100%}
 .brand-spotlight-poster{border-radius:25px 15px 28px 17px!important;box-shadow:8px 10px 0 #24192a!important}
 .hero-art{overflow:visible}
 .btn{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
 .robot-image-wrap,.robot-image,.jolt-banter-avatar,.jolt-voice-station img{animation:none!important}
 .jolt-banter-text.is-changing{animation:none!important}
 .btn,.jolt-banter-next,.brand-spotlight-poster{transition:none!important}
 .btn:hover,.brand-spotlight-poster:hover{transform:none!important}
}


/* V2.1 desktop geometry: readable dialogue and content cards stay parallel.
   Decorative character artwork retains its intentional rotated treatment. */
.ticker{
 transform:none!important;
}
.signal-card-top{
 transform:none!important;
 right:0;
}
.signal-card-bottom{
 transform:none!important;
}
.feature-card:nth-child(2){
 transform:none!important;
}
.feature-card:nth-child(2):hover{
 transform:translateY(-4px)!important;
}
@media(min-width:901px){
 /* Matched card borders, aligned headings, and consistent baselines. */
 #why .feature-grid{
  align-items:stretch;
  grid-auto-rows:1fr;
 }
 #why .feature-card{
  height:100%;
  display:flex;
  flex-direction:column;
  transform:none;
 }
 #why .feature-card:hover,
 #why .feature-card:nth-child(2):hover{
  transform:translateY(-4px)!important;
 }
 #why .feature-card .feature-icon{
  flex:none;
  margin-top:32px;
 }
 #why .feature-card h3{
  min-height:2.45em;
 }
 #why .feature-card p{
  flex:1;
 }
 /* Future panels align from top to bottom regardless of text length. */
 .future-grid{
  align-items:stretch;
  grid-auto-rows:1fr;
 }
 .future-grid .future-card{
  display:flex;
  flex-direction:column;
  height:100%;
 }
 .future-grid .future-card-bottom{
  margin-top:auto;
 }
 /* Every Quick Reply sample keeps its Copy action in the same column. */
 .demo-content .reply-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"index index" "reply copy";
  column-gap:16px;
  row-gap:10px;
  align-items:center;
  min-height:99px;
 }
 .demo-content .reply-index{
  grid-area:index;
 }
 .demo-content .reply-card p{
  grid-area:reply;
  min-width:0;
 }
 .demo-content .copy-button{
  grid-area:copy;
  justify-self:end;
 }
 /* Line up the Creator Kit identity tiles as real cards, not stickers. */
 .ck-identity-stack{
  align-items:stretch;
 }
 .ck-identity-card{
  height:100%;
 }
}
@media(min-width:901px) and (max-width:1120px){
 /* Avoid squeezed copy-action columns on small desktop windows. */
 .demo-content .reply-card{
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"index" "reply" "copy";
 }
 .demo-content .copy-button{
  justify-self:start;
 }
}