/* ColdDart page components. Tokens and shared parts live in site.css. */
.hero{position:relative; isolation:isolate; overflow:hidden; background:var(--d0); color:#fff; padding:120px 0 64px;}
@media(min-width:900px){ .hero{padding:152px 0 96px;} }
.hero::before{content:""; position:absolute; inset:0; z-index:-2; background:radial-gradient(70% 46% at 50% -4%,rgba(3,105,161,.7),rgba(3,105,161,.2) 50%,transparent 74%), radial-gradient(40% 30% at 85% 30%,rgba(56,189,248,.12),transparent 70%);}
.hero::after{content:""; position:absolute; inset:0; z-index:-1; background:repeating-linear-gradient(90deg,rgba(3,105,161,0) 0,rgba(3,105,161,0) 14px,rgba(14,116,184,.3) 44px,rgba(125,211,252,.16) 49px,rgba(3,105,161,.05) 78px,rgba(3,105,161,0) 96px); -webkit-mask:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 40%,transparent 80%); mask:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 40%,transparent 80%);}
.hero .copy{max-width:920px; margin:0 auto; text-align:center;}
.hero h1{font-size:clamp(34px,9vw,58px); line-height:1.12; letter-spacing:-.03em; font-weight:800; color:#fff; text-wrap:balance;}
.hero .lead{margin:24px auto 0; max-width:62ch; font-size:17px; line-height:1.6; color:var(--dtext2);}
@media(min-width:900px){ .hero .lead{font-size:19px;} }
.actions{margin-top:32px; display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
.hero .actions,.final .actions{justify-content:center;}
.hero .btn-line{color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.04);}

/* inline UI objects inside the h1: decorative, their text comes from CSS */
.ob{display:inline-flex; align-items:center; gap:.28em; vertical-align:.08em; margin:0 .08em; padding:.1em .42em; border-radius:.42em; font-family:var(--mono); font-size:.4em; font-weight:600; letter-spacing:0; line-height:1.2; white-space:nowrap; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.07); color:#fff;}
.ob-file::before{content:"leads.csv"; }
.ob-file::after{content:"500 rows"; color:var(--accent-on-dark);}
.ob-line{border-color:rgba(125,211,252,.5); background:rgba(56,189,248,.12);}
.ob-line::before{content:""; width:.6em; height:.6em; border-radius:50%; background:#12b76a; box-shadow:0 0 0 .2em rgba(18,183,106,.25); animation:blink 2.4s ease-in-out infinite;}
.ob-line::after{content:"line written"; color:#fff;}
@keyframes blink{50%{opacity:.35;}}
.kw{display:inline-block; padding:0 .38em; border-radius:6px; font-weight:600; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);}
.kw-b{background:rgba(56,189,248,.18); border-color:rgba(125,211,252,.4);}
.kw-g{background:rgba(18,183,106,.18); border-color:rgba(52,211,153,.4);}
.kw-v{background:rgba(167,139,250,.18); border-color:rgba(196,181,253,.4);}
.hero .pills{margin-top:28px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px;}

/* demo 1: the campaign table */
.hframe{margin:56px auto 0; max-width:1040px; border-radius:22px; padding:10px; background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.14); box-shadow:0 40px 90px -30px rgba(3,105,161,.6);}
.hframe-in{border-radius:14px; background:#0e121c; overflow:hidden;}
.hframe-bar{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:12px 16px; border-bottom:1px solid var(--dline);}
.hframe-bar .caption{font-size:12.5px; color:rgba(255,255,255,.66);}
.tbl{padding:6px 8px 12px;}
.trow{display:grid; grid-template-columns:1fr; gap:6px; padding:14px 10px; border-bottom:1px solid var(--dline); text-align:left;}
.trow:last-child{border-bottom:0;}
.trow.th{display:none; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.62); padding-bottom:8px;}
.who b{display:block; font-size:15px; color:#fff;}
.who span{font-size:13px; color:rgba(255,255,255,.66);}
.ln{position:relative; font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.92); min-height:3em;}
.ln .ph{position:absolute; inset:0; display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.55);}
.ln .tx{opacity:0;}
.st{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.8); width:max-content;}
.st i{width:7px; height:7px; border-radius:50%; background:#9aa3b5;}
.st.done{background:rgba(18,183,106,.16); color:#6ee7b7;}
.st.done i{background:#12b76a;}
@media(min-width:820px){
  .trow{grid-template-columns:200px 1fr 112px; gap:18px; align-items:center;}
  .trow.th{display:grid;}
}
/* each row shows a waiting state, then the line, on a 14 s loop; rows are offset */
.trow .tx{animation:showline 14s var(--ease) infinite; animation-delay:var(--d);}
.trow .ph{animation:hideph 14s var(--ease) infinite; animation-delay:var(--d);}
.trow .st.wait{animation:hideph 14s infinite; animation-delay:var(--d);}
.trow .st.done{position:absolute; left:0; top:0; opacity:0; animation:showline 14s infinite; animation-delay:var(--d);}
.stcell{position:relative; min-height:26px;}
@keyframes showline{0%,10%{opacity:0; transform:translateY(4px);} 18%,88%{opacity:1; transform:none;} 96%,100%{opacity:0;}}
@keyframes hideph{0%,5%{opacity:1;} 9%,90%{opacity:0;} 97%,100%{opacity:1;}}
.spin{width:12px; height:12px; border-radius:50%; border:2px solid rgba(255,255,255,.25); border-top-color:var(--accent-on-dark); animation:rot 1s linear infinite;}
@keyframes rot{to{transform:rotate(360deg);}}
.tfoot{display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between; padding:12px 18px 14px; border-top:1px solid var(--dline); font-size:12.5px; color:rgba(255,255,255,.7);}

/* section helpers */
.title2{font-size:clamp(26px,3.4vw,36px); line-height:1.12; letter-spacing:-.03em; font-weight:800; max-width:24ch; text-wrap:balance;}
.cols{display:grid; gap:40px;}
.cols h2.title{margin-bottom:24px;}
@media(min-width:900px){ .cols{grid-template-columns:1fr 1fr; gap:64px; align-items:start;} .cols.wide-l{grid-template-columns:1.1fr .9fr;} }
.prose p{margin:0 0 14px; color:var(--body); font-size:17px; line-height:1.65; max-width:60ch;}
.prose p:last-child{margin-bottom:0;}
.compare{display:grid; gap:14px;}
.cmp{border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px 22px; background:var(--surface);}
.cmp .k{display:block; font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px;}
.cmp p{font-size:16px; line-height:1.6; color:var(--ink);}
.cmp.good{border-color:var(--soft-line); background:var(--soft); border-left:4px solid var(--accent);}
.cmp.good .k{color:var(--accent-dk);}
.cmp small{display:block; margin-top:10px; font-size:13px; color:var(--muted);}
.mark{background:linear-gradient(transparent 62%,rgba(56,189,248,.35) 62%);}
.steps{display:grid; gap:0; counter-reset:s;}
.step{display:grid; grid-template-columns:44px 1fr; gap:18px; padding:26px 0; border-top:1px solid var(--line);}
.step:first-child{border-top:0; padding-top:0;}
.step::before{counter-increment:s; content:counter(s); display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--ink); color:#fff; font-family:var(--mono); font-weight:600;}
.step h3{font-size:20px; letter-spacing:-.02em; margin-bottom:6px;}
.step p{color:var(--body); max-width:58ch;}
.step code,.facts code,.rd code{font-family:var(--mono); font-size:.9em; background:var(--tint); border:1px solid var(--line); border-radius:6px; padding:1px 6px;}
.facts{display:grid; gap:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface);}
.fact{display:grid; gap:4px; padding:20px 22px; border-top:1px solid var(--line);}
.fact:first-child{border-top:0;}
@media(min-width:760px){ .fact{grid-template-columns:230px 1fr; gap:24px;} }
.fact dt{font-family:var(--display); font-weight:700; color:var(--ink);}
.fact dd{margin:0; color:var(--body);}
.facts dl{margin:0;}
.not{border:1px solid var(--warn-line); background:var(--warn-bg); color:var(--warn-ink); border-radius:var(--radius-lg); padding:22px 24px;}
.not h3{font-size:18px; margin-bottom:8px; color:var(--warn-ink);}
.not li{margin:6px 0; padding-left:2px; list-style:disc; margin-left:20px;}

/* demo 2: tone presets with a live preview */
.pv{border-radius:20px; background:var(--d1); color:#fff; border:1px solid var(--dline); overflow:hidden;}
.pv-bar{display:flex; flex-wrap:wrap; gap:8px; padding:14px 16px; border-bottom:1px solid var(--dline);}
.pv-chip{position:relative; font-size:13px; font-weight:600; padding:6px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.85);}
.pv-chip::after{content:""; position:absolute; inset:0; border-radius:inherit; background:rgba(56,189,248,.28); border:1px solid #7dd3fc; opacity:0; animation:chipon 15s infinite; animation-delay:var(--d);}
@keyframes chipon{0%,2%{opacity:0;} 5%,18%{opacity:1;} 22%,100%{opacity:0;}}
.pv-body{position:relative; padding:20px 20px 22px; min-height:178px;}
.pv-body .k{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.62);}
.pv-line{position:absolute; left:20px; right:20px; top:48px; opacity:0; font-size:16px; line-height:1.55; color:#fff; animation:chipon 15s infinite; animation-delay:var(--d);}
.pv-line small{display:block; margin-top:12px; font-size:12.5px; color:rgba(255,255,255,.62);}
.pv-note{padding:12px 20px; border-top:1px solid var(--dline); font-size:12.5px; color:rgba(255,255,255,.7);}

/* pricing and credits */
.cred{display:grid; gap:16px;}
@media(min-width:760px){ .cred{grid-template-columns:1fr 1fr;} }
.cbox{border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; background:var(--surface);}
.cbox.dk{background:var(--d0); color:#fff; border-color:var(--d0);}
.cbox .big{font-family:var(--display); font-size:44px; font-weight:800; letter-spacing:-.03em; line-height:1;}
.cbox .big small{font-size:16px; font-weight:600; letter-spacing:0; margin-left:6px; color:var(--muted);}
.cbox.dk .big small{color:rgba(255,255,255,.7);}
.cbox p{margin-top:12px; color:var(--body);}
.cbox.dk p{color:var(--dtext2);}

/* faq */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:64px; padding:14px 0; cursor:pointer; list-style:none; font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-.015em;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; flex:none; font-size:26px; font-weight:400; color:var(--accent-dk);}
.faq details[open] summary::after{content:"\2212";}
.faq .a{padding:0 0 22px; max-width:68ch; color:var(--body); line-height:1.65;}
.faq .a p+p{margin-top:10px;}

/* closing band */
.final{padding:88px 0; text-align:center; position:relative; isolation:isolate; overflow:hidden; background:var(--d0); color:#fff;}
.final::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 80% at 50% 120%,rgba(3,105,161,.65),transparent 70%);}
.final h2{font-size:clamp(28px,5vw,44px); line-height:1.1; letter-spacing:-.03em; font-weight:800; max-width:20ch; margin:0 auto; text-wrap:balance;}
.final p{margin:18px auto 0; max-width:54ch; color:var(--dtext2); font-size:17px;}
.final .btn-line{color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.04);}
.ft b.wm,.brand-text{font-family:var(--display); font-weight:800; letter-spacing:-.03em;}
.ft b.wm{font-size:20px; color:#fff;}
.brand-text{font-size:22px;}
.list-plain{margin:0; padding:0;}
.list-plain li{padding:10px 0; border-top:1px solid var(--line);}
.list-plain li:first-child{border-top:0;}
.integ{display:grid; gap:14px;}
@media(min-width:760px){ .integ{grid-template-columns:1fr 1fr;} }
.integ .cmp h3{font-size:18px; margin-bottom:6px;}

@media(prefers-reduced-motion:reduce){
  .trow .tx,.trow .st.done{animation:none; opacity:1; transform:none;}
  .trow .ph,.trow .st.wait{animation:none; opacity:0;}
  .spin,.ob-line::before{animation:none;}
  .pv-chip::after,.pv-line{animation:none;}
  .pv-line{opacity:0;}
  .pv-line.f{opacity:1;}
  .pv-chip:first-child::after{opacity:1;}
}