.builder-page { background: #f7f7f5; }

.builder-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  padding: 0 5vw;
  background: rgba(247,247,245,.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.builder-header nav { display: flex; align-items: center; gap: 2rem; font-size: .72rem; }
.header-action { padding: 11px 14px; border-radius: 7px; color: white; background: var(--dark); }

.builder-hero {
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  min-height: 650px;
  margin: 0 5vw 5vw;
  overflow: hidden;
  background-color: #edeef0;
  background-image: linear-gradient(rgba(17,18,20,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(17,18,20,.05) 1px, transparent 1px);
  background-size: 25% 25%;
  border-radius: 22px;
}

.builder-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem,7vw,8rem); }
.resource-kicker { margin: 0 0 1.5rem; color: #777a7d; font-size: .65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

.builder-hero h1 {
  max-width: 1000px;
  margin: 0;
  font-size: clamp(4.5rem,8vw,9.5rem);
  font-weight: 600;
  letter-spacing: -.09em;
  line-height: .8;
}

.builder-hero h1 span { color: #a1a4a7; }
.builder-lead { max-width: 670px; margin: 2.2rem 0 0; color: #595c60; font-size: 1rem; line-height: 1.6; }
.hero-actions { display: flex; align-items: center; gap: 1.2rem; margin-top: 2rem; }
.hero-actions small { color: #7a7d80; font-size: .67rem; }

.hero-flow { display: flex; flex-direction: column; justify-content: center; border-left: 1px solid rgba(17,18,20,.1); }
.hero-flow div { padding: 2rem; }
.hero-flow div + div { border-top: 1px solid rgba(17,18,20,.1); }
.hero-flow span { color: #7f8285; font-size: .65rem; }
.hero-flow strong { display: block; margin-top: 2.8rem; font-size: 2rem; font-weight: 500; letter-spacing: -.06em; }
.hero-flow p { margin: .5rem 0 0; color: #707377; font-size: .75rem; }
.hero-flow i { display: none; }

.principle-strip { display: grid; grid-template-columns: .35fr 1.65fr; gap: 5vw; padding: clamp(6rem,10vw,10rem) 7vw; background: white; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.side-label { font-size: .7rem; font-weight: 600; }
.principle-strip h2 { max-width: 1100px; margin: 0; font-size: clamp(3.2rem,6vw,7rem); font-weight: 500; letter-spacing: -.08em; line-height: .9; }

.builder { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 5vw; padding: clamp(6rem,9vw,9rem) 7vw; }
.builder-progress { position: sticky; top: 105px; align-self: start; padding: 22px; background: white; border: 1px solid var(--line); }
.progress-value { font-size: 3.4rem; font-weight: 500; letter-spacing: -.075em; }
.progress-track { height: 3px; margin: 1rem 0 1.8rem; background: #dedfdf; }
.progress-track i { display: block; width: 0; height: 100%; background: var(--dark); transition: width 220ms ease; }
.builder-progress nav { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.builder-progress nav a { display: flex; gap: .7rem; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .7rem; }
.builder-progress nav span { color: var(--muted); }
.privacy-note { margin: 1.5rem 0 0; color: #777a7d; font-size: .67rem; line-height: 1.5; }
.builder-content { min-width: 0; }

.step { scroll-margin-top: 100px; }
.step-heading { display: grid; grid-template-columns: .3fr 1.7fr; gap: 2rem; }
.step-heading > span { color: var(--muted); font-size: .7rem; }
.step-heading h2, .bridge-step h2, .quality-heading h2 { max-width: 950px; margin: 0; font-size: clamp(3.2rem,5.8vw,6.5rem); font-weight: 500; letter-spacing: -.08em; line-height: .88; }
.step-heading div > p:last-child { max-width: 700px; margin: 1.6rem 0 0; color: #64676a; font-size: .83rem; line-height: 1.6; }

.brief-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 4rem 0 0 30%; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.brief-form label { display: flex; flex-direction: column; gap: .8rem; min-height: 150px; padding: 17px; background: white; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.brief-form label span, .bridge-step label > span { font-size: .68rem; font-weight: 600; }
.brief-form input, .brief-form textarea, .bridge-step textarea {
  width: 100%;
  border: 0;
  outline: 0;
  resize: vertical;
  color: var(--ink);
  background: transparent;
  font: 400 .85rem/1.5 var(--font);
}
.brief-form textarea { min-height: 75px; }
.brief-form input::placeholder, .brief-form textarea::placeholder, .bridge-step textarea::placeholder { color: #a3a5a7; }
.brief-form label:focus-within { background: #f0f1f1; box-shadow: inset 0 0 0 1px var(--dark); }

.output-step { scroll-margin-top: 100px; margin-top: 7rem; color: white; background: var(--dark); }
.output-heading { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 20px; border-bottom: 1px solid rgba(255,255,255,.16); }
.output-heading span { color: rgba(255,255,255,.45); font-size: .65rem; }
.output-heading h3 { margin: .5rem 0 0; font-size: 1.5rem; font-weight: 500; letter-spacing: -.04em; }
.copy-button { flex: 0 0 auto; border: 0; padding: 11px 14px; border-radius: 7px; color: var(--dark); background: white; font: 500 .68rem var(--font); cursor: pointer; }
.copy-button.copied { background: #c8f4d5; }
.prompt-output { max-height: 640px; margin: 0; padding: 24px; overflow: auto; white-space: pre-wrap; color: rgba(255,255,255,.78); font: 400 .78rem/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; }
.action-note { display: grid; grid-template-columns: 100px 1fr; gap: 1rem; padding: 18px 20px; border-top: 1px solid rgba(255,255,255,.16); }
.action-note span { color: rgba(255,255,255,.4); font-size: .65rem; }
.action-note p { margin: 0; color: rgba(255,255,255,.65); font-size: .72rem; line-height: 1.5; }

.bridge-step { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; margin-top: 8rem; padding: 4rem; background: #e9eaeb; }
.bridge-step h2 { font-size: clamp(2.8rem,4.8vw,5.5rem); }
.bridge-step label { padding: 18px; background: white; border: 1px solid var(--line); }
.bridge-step textarea { min-height: 300px; margin-top: 1rem; }

.design-step { margin-top: 8rem; }
.design-form { grid-template-columns: 1fr 1fr; }
.lovable-output { margin-top: 7rem; }
.missing-content { display: none; padding: 16px 20px; color: #1f2022; background: #ffdf8f; font-size: .75rem; }
.missing-content.visible { display: block; }

.quality-check { margin-top: 8rem; }
.quality-heading { display: grid; grid-template-columns: .3fr 1.7fr; gap: 2rem; }
.quality-heading .resource-kicker { margin-top: .5rem; }
.check-grid { display: grid; grid-template-columns: repeat(2,1fr); margin: 3rem 0 0 30%; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.check-grid label { display: flex; align-items: center; gap: .8rem; min-height: 90px; padding: 16px; background: white; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .75rem; cursor: pointer; }
.check-grid input { width: 17px; height: 17px; accent-color: var(--dark); }

.final-cta { margin: 0 5vw 5vw; padding: clamp(4rem,8vw,8rem); color: white; background: var(--dark); border-radius: 22px; }
.final-cta h2 { max-width: 1100px; margin: 0; font-size: clamp(3.8rem,7vw,8rem); font-weight: 500; letter-spacing: -.085em; line-height: .85; }
.final-cta > p:not(.resource-kicker) { max-width: 620px; margin: 2rem 0; color: rgba(255,255,255,.6); font-size: .9rem; line-height: 1.6; }
.button-light { color: var(--dark); background: white; }
.builder-footer { display: flex; align-items: end; justify-content: space-between; padding: 3rem 5vw; border-top: 1px solid var(--line); }
.builder-footer p { margin: 0; color: var(--muted); font-size: .7rem; }

@media (max-width: 1050px) {
  .builder { grid-template-columns: 1fr; }
  .builder-progress { position: static; }
  .builder-progress nav { display: none; }
}

@media (max-width: 760px) {
  .builder-header { height: 68px; padding: 0 20px; }
  .builder-header nav > a:first-child { display: none; }
  .builder-hero { grid-template-columns: 1fr; margin: 0 14px 3rem; border-radius: 18px; }
  .builder-hero-copy { padding: 4rem 22px; }
  .builder-hero h1 { font-size: 4.15rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-flow { border-top: 1px solid rgba(17,18,20,.1); border-left: 0; }
  .principle-strip { grid-template-columns: 1fr; gap: 2.5rem; padding: 5rem 20px; }
  .builder { padding: 5rem 20px; }
  .step-heading, .quality-heading { grid-template-columns: 1fr; }
  .step-heading h2, .quality-heading h2 { font-size: 3.6rem; }
  .brief-form, .check-grid { grid-template-columns: 1fr; margin-left: 0; }
  .output-heading { align-items: flex-start; flex-direction: column; }
  .prompt-output { font-size: .7rem; }
  .bridge-step { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 20px; }
  .action-note { grid-template-columns: 1fr; }
  .final-cta { margin: 0 14px 3rem; padding: 4rem 22px; border-radius: 18px; }
  .final-cta h2 { font-size: 3.75rem; }
  .builder-footer { padding: 2.5rem 20px; }
}