:root { --forest:#0b2d23; --green:#14835b; --green-dark:#0d6445; --mint:#e3f3eb; --paper:#f4f8f6; --ink:#152033; --muted:#687487; --line:#dce6e1; --white:#fff; --sand:#e7d59b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
.showcase-wrap { width:min(1240px,calc(100% - 48px)); margin:auto; }
.showcase-eyebrow { margin:0 0 12px; color:#2a9f75; font-size:11px; font-weight:850; letter-spacing:.17em; text-transform:uppercase; }
.showcase-brand { display:inline-flex; align-items:center; gap:10px; color:#fff; font-size:16px; font-weight:800; }
.showcase-brand > span { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:#fff; background:var(--green); }
.showcase-header { position:relative; overflow:hidden; color:#fff; background:var(--forest); }
.showcase-header::after { content:""; position:absolute; width:520px; height:520px; right:-150px; top:-300px; border-radius:50%; background:#176d53; opacity:.48; }
.showcase-topbar { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; height:76px; border-bottom:1px solid rgba(255,255,255,.12); }
.showcase-session { display:flex; align-items:center; gap:16px; color:#c9d8d2; font-size:12px; }
.showcase-session form { margin:0; }
.showcase-session button { border:1px solid rgba(255,255,255,.2); border-radius:9px; padding:8px 11px; color:#fff; background:transparent; cursor:pointer; }
.showcase-hero { position:relative; z-index:1; padding:72px 0 78px; }
.showcase-hero h1 { max-width:900px; margin:0 0 20px; font-size:clamp(46px,7vw,84px); line-height:.98; letter-spacing:-.055em; }
.showcase-hero > p:not(.showcase-eyebrow) { max-width:720px; margin:0; color:#c6d8d1; font-size:17px; line-height:1.75; }
.showcase-how { display:flex; flex-wrap:wrap; gap:28px; margin-top:42px; color:#d7e3df; font-size:12px; }
.showcase-how span { display:flex; align-items:center; gap:9px; }
.showcase-how b { color:var(--sand); font-size:15px; }
.showcase-main { padding:64px 0 86px; }
.showcase-alert { margin:0 0 22px; border-radius:12px; padding:14px 16px; font-size:13px; }
.showcase-alert--success { color:#155f43; background:#ddf3e8; }
.showcase-alert--error { color:#9b3442; background:#fae8eb; }
.showcase-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:30px; }
.showcase-section-head h2 { margin:0; font-size:clamp(30px,4vw,48px); letter-spacing:-.04em; }
.showcase-section-head > p { max-width:450px; margin:0; color:var(--muted); font-size:13px; line-height:1.65; }
.showcase-visual-grid { display:grid; gap:24px; }
.showcase-visual { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(420px,.88fr); overflow:hidden; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 16px 50px rgba(18,55,41,.06); }
.showcase-browser { position:relative; min-height:590px; overflow:hidden; border-right:1px solid var(--line); background:#dfe8e3; }
.showcase-browser-bar { display:flex; align-items:center; gap:7px; height:40px; padding:0 15px; color:#839087; background:#f3f5f4; font-size:10px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.showcase-browser-bar i { width:7px; height:7px; border-radius:50%; background:#bec8c2; }
.showcase-browser-bar span { margin-left:auto; }
.showcase-browser iframe { display:block; width:100%; height:550px; border:0; background:#fff; }
.showcase-browser > a { position:absolute; right:18px; bottom:18px; border-radius:999px; padding:12px 16px; color:#fff; background:rgba(11,45,35,.92); font-size:11px; font-weight:800; backdrop-filter:blur(8px); }
.showcase-visual-copy { display:flex; flex-direction:column; padding:34px; }
.showcase-visual-title { display:grid; grid-template-columns:38px minmax(0,1fr); gap:14px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.showcase-visual-title > span { color:var(--green); font-size:12px; font-weight:900; letter-spacing:.12em; }
.showcase-visual-title h2 { margin:0 0 10px; font-size:26px; letter-spacing:-.035em; }
.showcase-visual-title p { margin:0; color:var(--muted); font-size:13px; line-height:1.65; }
.showcase-feedback-form { display:grid; gap:21px; margin-top:24px; }
.showcase-feedback-form fieldset { margin:0; border:0; padding:0; }
.showcase-feedback-form legend,.showcase-comment { color:#263246; font-size:12px; font-weight:800; }
.showcase-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.showcase-choices label { position:relative; }
.showcase-choices input { position:absolute; opacity:0; }
.showcase-choices span { display:grid; min-height:44px; place-items:center; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:#fbfcfc; cursor:pointer; font-size:11px; font-weight:750; text-align:center; }
.showcase-choices input:checked + span { border-color:var(--green); color:var(--green-dark); background:var(--mint); box-shadow:inset 0 0 0 1px var(--green); }
.showcase-choices input:focus-visible + span { outline:2px solid var(--green); outline-offset:2px; }
.showcase-comment { display:grid; gap:8px; }
.showcase-comment small { color:var(--muted); font-weight:500; }
.showcase-comment textarea { width:100%; min-height:108px; border:1px solid var(--line); border-radius:11px; padding:12px 13px; color:var(--ink); resize:vertical; outline:0; line-height:1.55; }
.showcase-comment textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(20,131,91,.1); }
.showcase-feedback-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.showcase-feedback-actions small { color:var(--muted); font-size:10px; }
.showcase-feedback-actions button,.showcase-login-form button { min-height:45px; border:0; border-radius:10px; padding:0 17px; color:#fff; background:var(--green); cursor:pointer; font-size:11px; font-weight:850; box-shadow:0 7px 18px rgba(20,131,91,.18); }
.showcase-empty { display:grid; min-height:360px; place-items:center; align-content:center; border:1px dashed #cbd9d2; border-radius:20px; padding:40px; text-align:center; background:#fff; }
.showcase-empty > span { color:var(--green); font-size:42px; }
.showcase-empty h2 { margin:14px 0 8px; }
.showcase-empty p { margin:0; color:var(--muted); }
.showcase-footer { border-top:1px solid var(--line); padding:25px 0 34px; color:var(--muted); font-size:11px; }
.showcase-footer > div { display:flex; justify-content:space-between; }
.showcase-login-page { background:var(--forest); }
.showcase-login-shell { display:grid; grid-template-columns:minmax(380px,46%) 1fr; min-height:100vh; }
.showcase-login-intro { display:flex; flex-direction:column; justify-content:space-between; padding:44px 9%; color:#fff; background:radial-gradient(circle at 85% 15%,#1b7258 0,transparent 36%),var(--forest); }
.showcase-login-intro h1 { margin:15px 0 20px; font-size:clamp(44px,6vw,74px); line-height:1; letter-spacing:-.05em; }
.showcase-login-intro div > p:last-child { max-width:580px; color:#c7d8d1; line-height:1.75; }
.showcase-login-intro small { color:#8faaa0; }
.showcase-login-panel { display:grid; place-items:center; padding:48px 8%; background:#fff; }
.showcase-login-form { width:min(100%,430px); }
.showcase-login-form h2 { margin:0 0 12px; font-size:34px; letter-spacing:-.04em; }
.showcase-login-form > p:not(.showcase-eyebrow) { margin:0 0 26px; color:var(--muted); line-height:1.6; }
.showcase-login-form form { display:grid; gap:16px; }
.showcase-login-form label { display:grid; gap:7px; font-size:12px; font-weight:750; }
.showcase-login-form input { height:49px; border:1px solid #d8dee7; border-radius:10px; padding:0 13px; outline:0; }
.showcase-login-form input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(20,131,91,.1); }
.showcase-login-form button { display:flex; align-items:center; justify-content:space-between; margin-top:4px; padding:0 18px; }
@media (max-width:960px) { .showcase-visual { grid-template-columns:1fr; } .showcase-browser { min-height:0; border-right:0; border-bottom:1px solid var(--line); } .showcase-browser iframe { height:480px; } .showcase-login-shell { grid-template-columns:1fr; } .showcase-login-intro { min-height:340px; padding:34px 7%; } .showcase-login-intro small { display:none; } .showcase-login-panel { min-height:560px; } }
@media (max-width:640px) { .showcase-wrap { width:calc(100% - 28px); } .showcase-topbar { height:66px; } .showcase-session > span { display:none; } .showcase-hero { padding:52px 0 58px; } .showcase-how { display:grid; gap:12px; } .showcase-main { padding:44px 0 60px; } .showcase-section-head { display:block; } .showcase-section-head > p { margin-top:16px; } .showcase-browser iframe { height:380px; } .showcase-visual-copy { padding:24px 18px; } .showcase-visual-title { grid-template-columns:1fr; } .showcase-choices { grid-template-columns:1fr; } .showcase-feedback-actions { align-items:stretch; flex-direction:column; } .showcase-feedback-actions button { width:100%; } .showcase-footer > div { display:grid; gap:5px; } .showcase-login-intro { min-height:300px; } .showcase-login-panel { min-height:auto; padding:48px 24px 70px; } }