/* ============================================================================
   landing-preview.css — the "type a sentence, watch a site build" section.

   Sits immediately under the hero. It is the proof, so it gets the width and
   the weight of a proof section, not the styling of a form.
   ========================================================================== */



/* Landing "try it" describe box — reuses .pv-ask from preview.css (the same
   describe box the build form uses in its Preview step) so the two never look
   like two different products. Constrained to a readable width; the base
   component is designed for a 250px side rail, not a full-bleed section. */
.ltry-ask{max-width:640px}
.ltry-ask textarea{min-height:64px}

/* ============================================================================
   AI visibility section.

   The stat row is the hook, the card grid is what we actually build, and
   .lai-honest is the part that must never be deleted for being "negative" —
   saying plainly that nobody can guarantee an AI recommendation is what
   separates this from the SEO pitches the same buyer has already been burned
   by twice.
   ========================================================================== */

.lai-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(16px,2vw,28px);margin-bottom:14px;
}
.lai-stat{
  padding:clamp(18px,2vw,26px);border-radius:var(--radius-lg);
  background:var(--bg-elev);border:1px solid var(--border-soft);
}
.lai-stat b{
  display:block;font-family:var(--font-display);
  font-size:clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem);line-height:1;
  color:var(--accent);margin-bottom:10px;letter-spacing:-.02em;
}
.lai-stat span{display:block;color:var(--fg-muted);font-size:.94rem;line-height:1.55}

.lai-src{
  font-size:.8rem;color:var(--fg-muted);margin-bottom:clamp(30px,4vw,48px);
}
.lai-src a{color:var(--fg-muted);text-decoration:underline;text-underline-offset:3px}
.lai-src a:hover{color:var(--accent)}

.lai-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(16px,2vw,24px);
}
.lai-card{
  padding:clamp(20px,2.2vw,28px);border-radius:var(--radius-lg);
  border:1px solid var(--border-soft);
}
.lai-card h4{margin-bottom:10px;font-size:1.06rem}
.lai-card p{color:var(--fg-muted);font-size:.94rem;line-height:1.65;margin:0}
.lai-card code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;
  padding:2px 6px;border-radius:4px;
  background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--fg);
}

.lai-honest{
  margin-top:clamp(24px,3vw,40px);
  padding:clamp(20px,2.4vw,30px);border-radius:var(--radius-lg);
  border:1px dashed var(--border-soft);background:var(--bg-elev);
  max-width:78ch;
}
.lai-honest h4{margin-bottom:10px;font-size:1.02rem}
.lai-honest p{color:var(--fg-muted);font-size:.94rem;line-height:1.7;margin:0}

/* ============================================================================
   Ownership section. Two plain lists, deliberately not "feature cards" — the
   point is the specificity of each line, and a card grid would tempt the eye
   to skim past exactly the details that land with someone this happened to.
   ========================================================================== */

.lown-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(24px,3.5vw,56px);
}
.lown-col h4{
  margin-bottom:16px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-muted);font-weight:600;
}
.lown-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.lown-list li{
  position:relative;padding-left:28px;
  color:var(--fg);font-size:1rem;line-height:1.6;
}
.lown-list li::before{
  content:'';position:absolute;left:0;top:.55em;
  width:12px;height:2px;background:var(--accent);
}
.lown-list em{color:var(--accent);font-style:normal;font-weight:600}

.lown-note{
  margin-top:clamp(26px,3vw,42px);padding-top:22px;
  border-top:1px solid var(--border-soft);
  color:var(--fg-muted);font-size:.94rem;line-height:1.65;max-width:70ch;
}

/* ============================================================================
   Process loop in the "how it works" section. Decorative and secondary, so it
   is capped well below full-bleed — a 5-second loop that dominates the section
   competes with the four steps it is supposed to introduce.
   ========================================================================== */

.lprocess-video{
  margin:0 0 clamp(30px,4vw,52px);
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--border-soft);background:var(--bg-elev);
  max-width:820px;
}
.lprocess-video video{
  display:block;width:100%;height:auto;aspect-ratio:16/9;
  object-fit:cover;background:var(--bg-elev);
  /* The generated final frame garbles the last partial line of text at the very
     bottom edge. A 3% overscan crops it off. Everything the frame needs to show
     — headline, sub, both buttons, the trust row — sits well inside this. */
  transform:scale(1.03);transform-origin:center;
}

/* ============================================================================
   Feature peek — the popup on comparison-table rows.
   ========================================================================== */

.lc-peek{
  display:inline-flex;align-items:center;gap:7px;
  padding:0;border:0;background:none;cursor:pointer;
  font:inherit;color:inherit;text-align:left;
  border-bottom:1px dashed var(--border-accent);
  transition:color var(--transition-interactive);
}
.lc-peek:hover{color:var(--accent)}
.lc-peek:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.lc-peek svg{flex:none;opacity:.55;transition:opacity var(--transition-interactive)}
.lc-peek:hover svg{opacity:1;color:var(--accent)}

.peek{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,48px);
  background:color-mix(in srgb, #000 72%, transparent);
  backdrop-filter:blur(4px);
  animation:peek-in .18s var(--ease-out);
}
@keyframes peek-in{from{opacity:0}to{opacity:1}}

.peek-card{
  position:relative;max-width:960px;width:100%;max-height:90vh;overflow:auto;
  border-radius:var(--radius-lg);background:var(--bg-elev);
  border:1px solid var(--border-soft);
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.peek-card img{display:block;width:100%;height:auto;background:#fff}
.peek-body{padding:clamp(18px,2.4vw,28px)}
.peek-body h4{margin-bottom:8px;font-size:1.14rem}
.peek-body p{margin:0 0 12px;color:var(--fg-muted);line-height:1.65}
.peek-src{font-size:.78rem;color:var(--fg-muted);opacity:.75}

.peek-x{
  position:absolute;top:12px;right:12px;z-index:1;
  width:36px;height:36px;display:grid;place-items:center;
  border-radius:50%;cursor:pointer;
  background:color-mix(in srgb, #000 55%, transparent);
  border:1px solid rgba(255,255,255,.22);color:#fff;
}
.peek-x:hover{background:color-mix(in srgb, #000 75%, transparent)}
.peek-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media (prefers-reduced-motion: reduce){ .peek{animation:none} }

/* Summary answer — a lead paragraph, not a callout. Same reasoning as on the
   generated client sites: a bordered box tells a human to skip it and changes
   nothing for a parser. */
.lanswer{padding-block:clamp(26px,3vw,44px)!important}
.lanswer-text{
  max-width:70ch;margin:0;
  font-size:clamp(1.02rem,.96rem + .4vw,1.24rem);
  line-height:1.7;color:var(--fg-muted);
}
.lanswer-text::first-line{color:var(--fg)}

/* ============================================================================
   Styles rail — real catalog screenshots in a swipeable strip on the landing
   page. Bleeds to the viewport edge on purpose: a rail that ends mid-card
   says "there is more" better than any arrow.
   ========================================================================== */
.lstyles-rail{
  display:flex;gap:clamp(14px,1.6vw,22px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding:4px var(--space-gutter) 18px;
  scrollbar-width:thin;
}
.lstyles-card{
  flex:0 0 clamp(240px,26vw,340px);scroll-snap-align:start;
  text-decoration:none;color:inherit;
}
.lstyles-card img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;
  border:1px solid var(--border-soft);background:var(--bg-elev);
  transition:border-color var(--transition-interactive);
}
.lstyles-card:hover img{border-color:var(--accent)}
.lstyles-card figcaption{
  display:flex;gap:10px;align-items:baseline;margin-top:10px;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted);
}
.lstyles-card figcaption b{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--accent);font-weight:600;
}
.lstyles-more{margin-top:10px}