/* Product page, inherits the living Web1trang tokens. */
.clone-page{border-inline:1px solid var(--color-border)}
.clone-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:var(--space-7);padding-block:var(--space-8)}
.clone-hero-copy,.clone-visual{position:relative}
.breadcrumb-back{display:block;width:fit-content;margin-bottom:var(--space-6);font-size:13px;color:var(--color-muted)}
.clone-hero .hero-title{font-size:clamp(36px,4.1vw,56px);margin-inline:0;line-height:1.12}
.clone-hero .hero-sub{font-size:16px;margin-inline:0}
.clone-page .heat{color:var(--color-heat-ink)}
.clone-hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.clone-small{font-size:12px;color:var(--color-muted);margin-top:var(--space-4);max-width:34rem}
.clone-visual{border:1px solid var(--color-border-strong);border-radius:var(--radius-2xl);background:var(--color-surface);box-shadow:var(--shadow-float);overflow:hidden}
.clone-visual-head{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-4);border-bottom:1px solid var(--color-border);font:10px var(--font-mono);color:var(--color-muted)}
.clone-visual-head>span:last-child{margin-left:auto;font-size:9px}
.clone-led{width:8px;height:8px;background:var(--color-primary);border-radius:50%}
.clone-visual-body{padding:var(--space-5)}
.clone-source{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-5);border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);background:var(--color-background)}
.clone-source strong{font-size:20px;font-weight:500;color:var(--color-foreground)}
.clone-source>span:last-child{font:11px var(--font-mono);color:var(--color-muted)}
.clone-kicker,.clone-number{font:11px var(--font-mono);color:var(--color-heat-ink)}
.clone-line{text-align:center;color:var(--color-muted);padding:var(--space-3)}
.clone-measure{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}
.clone-measure span{text-align:center;padding:var(--space-3) var(--space-1);border:1px solid var(--color-heat-border);background:var(--color-heat-soft);border-radius:var(--radius-md);font:10px var(--font-mono);color:var(--color-heat-ink)}
.clone-outputs{display:grid;gap:var(--space-3)}
.clone-outputs>div{display:grid;grid-template-columns:1fr auto;gap:var(--space-2);padding:var(--space-4);border:1px solid var(--color-border-strong);border-radius:var(--radius-lg)}
.clone-outputs strong{grid-column:1;grid-row:2;font:13px var(--font-mono);color:var(--color-foreground)}
.clone-outputs small{grid-column:2;grid-row:2;font-size:11px;color:var(--color-muted)}
.clone-section,.clone-final{border-top:1px solid var(--color-border);padding-block:var(--space-8);scroll-margin-top:var(--space-8)}
.clone-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--space-6);border:1px solid var(--color-border-strong);border-radius:var(--radius-xl);overflow:hidden;background:var(--color-surface)}
.clone-feature{padding:var(--space-5)}
.clone-feature+.clone-feature{border-left:1px solid var(--color-border)}
.clone-feature h3,.clone-steps h3{font-size:18px;font-weight:500;color:var(--color-foreground);margin-block:var(--space-3) var(--space-2)}
.clone-feature p,.clone-steps p,.clone-boundary>p{font-size:14px;color:var(--color-muted);line-height:1.8}
.clone-steps{margin-top:var(--space-6)}
.clone-steps li{display:flex;gap:var(--space-5);padding-block:var(--space-5);border-bottom:1px solid var(--color-border)}
.clone-steps li>span{flex-shrink:0;font:13px var(--font-mono);color:var(--color-heat-ink);padding-top:var(--space-1)}
.clone-steps h3{margin-top:0}
.clone-page code{overflow-wrap:anywhere;font-size:.9em}
.clone-prompt{max-width:none;margin-top:var(--space-6);box-shadow:var(--shadow-card)}
.clone-prompt .install-note{color:var(--color-muted)}
.clone-boundary>p{max-width:48rem;margin-top:var(--space-5)}
.clone-final{text-align:center;background:radial-gradient(ellipse at bottom,var(--color-heat-soft),transparent 70%)}
.clone-final .clone-hero-actions{justify-content:center}
.clone-page a:focus-visible,.clone-page button:focus-visible,.clone-page summary:focus-visible,.site-header a:focus-visible,.site-header button:focus-visible{outline:2px solid var(--color-heat-ink);outline-offset:4px}
@media(max-width:800px){.clone-hero{grid-template-columns:1fr}.clone-hero-copy{max-width:38rem}.clone-visual{max-width:34rem;width:100%}.clone-feature-grid{grid-template-columns:1fr}.clone-feature+.clone-feature{border-left:0;border-top:1px solid var(--color-border)}}
@media(max-width:400px){.clone-visual-body{padding:var(--space-4)}.clone-outputs>div{grid-template-columns:1fr}.clone-outputs small{grid-column:1;grid-row:3}.clone-hero-actions .btn{width:100%}.clone-visual-head{flex-wrap:wrap}.clone-visual-head>span:last-child{display:none}}