.examples-showcase{padding:96px 0;border-bottom:1px solid var(--line)}
.examples-showcase .examples-head{display:grid;grid-template-columns:1fr .72fr;gap:60px;align-items:end;margin-bottom:46px}
.examples-showcase .examples-head h2{font-family:var(--font-display);font-size:clamp(38px,5vw,58px);line-height:1.02;letter-spacing:-.045em;margin:14px 0 0;max-width:760px}
.examples-showcase .examples-head p{color:var(--soft);font-size:16px;line-height:1.75;margin:0}
.examples-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.example-card{display:block;color:inherit;text-decoration:none;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.52);overflow:hidden;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.example-card:hover{transform:translateY(-5px);border-color:oklch(.71 .24 55/.38);box-shadow:0 26px 55px -30px oklch(.32 .04 45/.24)}
.example-preview{height:350px;position:relative;overflow:hidden;background:#e9e3d8;border-bottom:1px solid var(--line)}
.example-preview:after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(to bottom,transparent 72%,rgba(34,27,24,.08));pointer-events:none}
.example-preview iframe{position:absolute;left:0;top:0;width:1200px;height:900px;border:0;transform:scale(.475);transform-origin:top left;pointer-events:none;background:white}
.example-browser{height:34px;position:absolute;left:0;right:0;top:0;z-index:4;background:rgba(250,247,241,.96);border-bottom:1px solid rgba(61,50,44,.1);display:flex;align-items:center;gap:5px;padding:0 11px;pointer-events:none}
.example-browser i{width:7px;height:7px;border-radius:50%;background:rgba(61,50,44,.16)}
.example-browser span{margin-left:7px;font-family:var(--font-mono);font-style:normal;font-size:8px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.example-body{padding:26px 27px 28px}
.example-meta{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--brand-ink)}
.example-body h3{font-family:var(--font-display);font-size:25px;letter-spacing:-.03em;margin:10px 0 8px}
.example-body p{color:var(--soft);font-size:13px;line-height:1.65;margin:0;min-height:44px}
.example-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:13px;font-weight:700;color:var(--ink)}
.example-link:after{content:"↗";color:var(--brand);font-size:16px;transition:transform .2s ease}.example-card:hover .example-link:after{transform:translate(2px,-2px)}
.examples-note{margin-top:22px;color:var(--soft);font-size:11px;line-height:1.6;text-align:center}
@media(max-width:900px){.examples-showcase .examples-head{grid-template-columns:1fr;gap:18px}.example-preview{height:320px}.example-preview iframe{transform:scale(.42)}}
@media(max-width:720px){.examples-showcase{padding:72px 0}.examples-grid{grid-template-columns:1fr}.example-preview{height:300px}.example-preview iframe{transform:scale(.39)}.example-body p{min-height:0}}
@media(max-width:420px){.example-preview{height:260px}.example-preview iframe{transform:scale(.33)}}