:root{
  --page-bg-image:
    radial-gradient(circle at 12% 0%, rgba(255,223,0,.18), transparent 58%),
    radial-gradient(circle at 88% 8%, rgba(255,223,0,.14), transparent 58%),
    radial-gradient(circle at 50% 96%, rgba(255,223,0,.10), transparent 62%);
}

#faq{
  --faq-accent:var(--ylw);
}

.ai-hero{
  position:relative;
  overflow:hidden;
  --hero-bg-image:
    radial-gradient(1200px 520px at 16% -120px, rgba(255,223,0,.14), transparent 60%),
    radial-gradient(820px 320px at 88% -140px, rgba(255,223,0,.10), transparent 60%),
    radial-gradient(680px 240px at 50% -80px, rgba(255,223,0,.08), transparent 55%);
}

.ai-hero__copy{
  display:block;
}

.ai-hero__copy h1{
  max-width:24ch;
}

.ai-timeline{
  margin-top:clamp(18px, 3vw, 26px);
  --marker-size:44px;
  --marker-gap:8px;
  --timeline-gap:12px;
  list-style:none;
  padding:0;
  display:grid;
  gap:var(--timeline-gap);
  position:relative;
}

.ai-timeline__item{
  display:grid;
  grid-template-columns:var(--marker-size) 1fr;
  gap:14px;
  align-items:center;
  position:relative;
}

.ai-timeline__marker{
  width:var(--marker-size);
  height:var(--marker-size);
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:700;
  color:var(--ylw);
  background:color-mix(in oklab, var(--bg-2), transparent 15%);
  border:2px solid var(--ylw);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--ylw), transparent 88%);
  z-index:1;
}

.ai-timeline__content{
  padding:14px 14px 12px;
  border-radius:14px;
  border:1px solid color-mix(in oklab, var(--line), var(--text) 12%);
  background:linear-gradient(160deg,
    color-mix(in oklab, var(--bg-2), transparent 8%),
    color-mix(in oklab, var(--bg-2), transparent 0%));
  box-shadow:0 18px 40px rgba(0,0,0,.38);
  display:flex;
  flex-direction:column;
  gap:6px;
  max-width:50rem;
}

.ai-timeline__content h3{
  margin:0;
  font-size:1.05rem;
  letter-spacing:.01em;
}

.ai-timeline__content p{
  margin:0;
  color:color-mix(in oklab, var(--text), var(--muted) 26%);
}

#ai-pricing .plan h3{
  color:var(--ylw);
}

#ai-pricing .plan{
  --accent-color:var(--ylw);
}

#ai-calculator{
  --calc-accent:var(--ylw);
}

#ai-calculator .calc-subgroup label:has(input[type="checkbox"]){
  display:flex;
  align-items:center;
  gap:10px;
}

#ai-calculator .calc-subgroup input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color:var(--ylw);
  flex:0 0 auto;
}

.calc-subgroup{
  grid-column:1/-1;
  margin-top:8px;
  padding-top:10px;
  display:grid;
  gap:10px;
  border-top:1px dashed color-mix(in oklab, var(--line), var(--text) 20%);
}

.calc-subgroup__title{
  margin:0;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--muted);
}

.calc-subgroup.is-disabled{
  opacity:.6;
}

.ai-section-split{
  display:grid;
  gap:clamp(14px, 3vw, 20px);
  align-items:center;
  grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.paperless-figure{
  margin:0;
}

.paperless-image-link{
  display:block;
  border-radius:14px;
  outline:none;
}

.paperless-image-link:hover .paperless-image{
  filter:brightness(1.04);
  transform:translateY(-1px);
}

.paperless-image-link:focus-visible{
  outline:2px solid color-mix(in oklab, var(--ylw), transparent 35%);
  outline-offset:6px;
}

.paperless-image{
  width:100%;
  display:block;
  border-radius:14px;
  border:0;
  box-shadow:none;
  cursor:zoom-in;
  transition:transform .18s ease, filter .18s ease;
}

.paperless-figure figcaption{
  margin-top:6px;
}

.ai-case-icon{
  width:44px;
  height:44px;
  margin-bottom:8px;
}

body::before{
  background:
    linear-gradient(135deg,
      rgba(255,223,0,.45),
      rgba(255,223,0,.04)),
    linear-gradient(150deg,
      rgba(255,223,0,.26),
      rgba(255,223,0,.02));
}

body::after{
  background:
    linear-gradient(165deg,
      rgba(255,223,0,.30),
      rgba(255,223,0,.04));
}

.ai-contact p{
  max-width:60ch;
}