:root{
  --brand:#0798e8;
  --brand-deep:#28212f;
  --brand-cyan:#0acdd4;
  --soft:#e9f8fd;
  --ink:#28212f;
  --muted:#625b6a;
}

body{
  background:
    radial-gradient(circle at 12% 22%,rgba(10,205,212,.08),transparent 28rem),
    linear-gradient(180deg,#eefbfe 0,#f7f8fb 34rem);
}

.top{
  position:relative;
  isolation:isolate;
  min-height:360px;
  padding:1.5rem max(1.5rem,calc((100vw - 1320px)/2)) 3.25rem;
  display:block;
  overflow:hidden;
  color:var(--brand-deep);
  background:linear-gradient(125deg,#ffffff 0%,#ecfbfd 52%,#e8f3ff 100%);
  border-bottom:4px solid transparent;
  border-image:linear-gradient(90deg,var(--brand-cyan),var(--brand)) 1;
}

.top::before,
.top::after{
  content:"";
  position:absolute;
  z-index:-1;
  border-radius:999px;
  filter:blur(1px);
}

.top::before{
  width:26rem;
  height:26rem;
  right:-10rem;
  top:-14rem;
  background:radial-gradient(circle,rgba(7,152,232,.18),transparent 67%);
}

.top::after{
  width:18rem;
  height:18rem;
  left:-9rem;
  bottom:-12rem;
  background:radial-gradient(circle,rgba(10,205,212,.16),transparent 68%);
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  width:100%;
  padding-bottom:2.25rem;
  border-bottom:1px solid rgba(7,152,232,.16);
}

.brand-logo{
  display:block;
  width:min(310px,34vw);
  height:auto;
  padding:.45rem 0;
}

.hero-copy{
  width:min(920px,100%);
  margin:2.65rem auto 0;
  text-align:center;
}

.hero-copy h1{
  max-width:none;
  margin:.35rem auto .8rem;
  font-size:clamp(2.6rem,5vw,4.8rem);
  line-height:.98;
  letter-spacing:-.045em;
  white-space:nowrap;
}

.hero-copy p:not(.eyebrow){
  max-width:48ch;
  margin:0 auto;
  color:#595363;
  font-size:1.08rem;
}

.eyebrow{
  margin:0;
  color:#087fbf!important;
  letter-spacing:.16em;
}

.top-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:.7rem;
}

.top-actions button{
  min-height:48px;
  white-space:nowrap;
  color:var(--brand-deep);
  border-color:#b9d5e2;
  background:#fff;
}

.top-actions #authButton,
.top-actions .auth-user{
  grid-column:auto;
}

.auth-user{
  min-width:0;
  height:auto;
  padding:.15rem .25rem;
  color:#27617d;
  text-align:left;
  overflow-wrap:anywhere;
}

.auth-user:empty{display:none}

#savedCount{
  display:inline-grid;
  place-items:center;
  min-width:1.5rem;
  height:1.5rem;
  margin-left:.3rem;
  padding:0 .35rem;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(110deg,var(--brand-cyan),var(--brand));
}

.top-actions #authButton:not(:disabled){
  color:#fff;
  border-color:var(--brand);
  background:linear-gradient(110deg,var(--brand-cyan),var(--brand));
}

.top-actions #authButton:disabled{
  color:#696371;
  background:#eef3f6;
  border-color:#cedbe1;
  cursor:not-allowed;
}

.shell{
  max-width:980px;
  padding-top:1.5rem;
}

.progress{
  border-color:#d8e7ee;
  box-shadow:0 8px 24px rgba(40,33,47,.05);
}

.track span{background:linear-gradient(90deg,var(--brand-cyan),var(--brand))}

.step{
  border-color:#d8e7ee;
  box-shadow:0 18px 48px rgba(35,57,82,.07);
}

.step h2{font-size:clamp(1.45rem,3vw,2rem);letter-spacing:-.025em}

.option:has(input:checked),
.check:has(input:checked){
  border-color:var(--brand);
  background:linear-gradient(135deg,#edfcfd,#edf6ff);
}

.primary{
  background:linear-gradient(110deg,#08bfcf,var(--brand));
  border-color:var(--brand);
  box-shadow:0 6px 16px rgba(7,152,232,.22);
}

.primary:hover{filter:brightness(.96)}

.integration-group{border-color:#d8e7ee;background:#fbfdfe}
.integration-group legend{color:var(--brand-deep)}

.saved-dialog{width:min(760px,calc(100vw - 2rem));max-width:none}
.saved-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.saved-heading h2{margin:.15rem 0}
.eyebrow.dark{color:var(--brand)!important;margin:0}
.saved-list{display:grid;gap:.75rem;max-height:60vh;overflow:auto}
.saved-card{border:1px solid #d8e7ee;border-radius:14px;padding:1rem;background:#fbfdfe}
.saved-card h3{margin:0}
.saved-card p{margin:.25rem 0;color:var(--muted)}
.saved-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.empty-saved{padding:2rem;text-align:center;border:1px dashed #b9cbd4;border-radius:14px;color:var(--muted)}
.project-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:1.25rem 0}
.summary-item{margin:0;padding:.85rem 1rem;border:1px solid #d8e7ee;border-radius:12px;background:#fbfdfe}
.summary-item dt{margin:0 0 .25rem;color:var(--muted);font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.summary-item dd{margin:0;color:var(--ink);font-weight:650;white-space:pre-wrap;overflow-wrap:anywhere}
.summary-item.wide{grid-column:1/-1}
.prompt-summary{margin:1rem 0;border:1px solid #d8e7ee;border-radius:12px;background:#fbfdfe}
.prompt-summary summary{padding:1rem;font-weight:800;cursor:pointer}
#summaryPrompt{width:calc(100% - 2rem);margin:0 1rem 1rem;min-height:18rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.summary-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}

@media(max-width:700px){
  .top{padding-top:1.5rem;padding-bottom:2rem}
  .topbar{align-items:flex-start;flex-direction:column;padding-bottom:1.5rem}
  .brand-logo{width:min(100%,300px)}
  .top-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .top-actions #authButton{grid-column:1/-1}
  .hero-copy{margin-top:2rem;text-align:left}
  .hero-copy h1{max-width:12ch;margin-left:0;font-size:clamp(2.35rem,12vw,3.6rem);white-space:normal}
  .hero-copy p:not(.eyebrow){margin-left:0}
  .saved-actions button{flex:1}
  .project-summary{grid-template-columns:1fr}
  .summary-item.wide{grid-column:auto}
  .summary-actions button{width:100%}
}

@media(max-width:440px){
  .top-actions{grid-template-columns:1fr}
  .top-actions #authButton{grid-column:auto}
}