/* Quiet, editorial surfaces. All visuals are code-native and use the Studio palette. */
.ex-connection { display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:740px; margin:0 auto 12px; padding:15px 18px; border:1px solid var(--border); border-radius:14px; background:var(--accent-soft); text-align:left; }
.ex-connection strong { font-size:13px; font-weight:550; color:var(--accent); }
.ex-connection p { font-size:12px; line-height:1.6; margin:5px 0 0; color:var(--text-dim); overflow-wrap:anywhere; }
.ex-connection .btn-ghost { width:auto; margin:0; flex-shrink:0; font-size:12px; }
@media(max-width:640px) { .ex-connection { flex-direction:column; align-items:flex-start; gap:10px; } }
.lp-nav { background:color-mix(in srgb,var(--bg-base) 92%,transparent); backdrop-filter:blur(18px); }
.lp-nav-inner { max-width:1200px; }
.lp-hero { max-width:1200px; margin:auto; padding:94px 32px 72px; gap:66px; align-items:center; }
.lp-hero h1 { font-size:clamp(42px,4.8vw,68px); line-height:1.07; letter-spacing:-.065em; font-weight:550; }
.lp-hero .lp-sub { max-width:470px; font-size:16px; line-height:1.85; }
.lp-badge { border:0; background:none; padding:0; color:var(--accent); font-size:10px; letter-spacing:.15em; text-transform:uppercase; }
.lp-cta { border-radius:12px; padding:15px 23px; }
.ex-demo { min-width:0; background:var(--panel); border:1px solid var(--border); border-radius:22px; box-shadow:0 28px 90px #0003; text-align:left; position:relative; }
.ex-demo-top { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--border-soft); font-size:11px; color:var(--text-faint); }
.ex-demo-brand { color:var(--text); font-weight:600; letter-spacing:.03em; }
.ex-demo-tabs { display:flex; gap:6px; padding:18px 22px 0; }
.ex-demo-tabs button { border:1px solid transparent; background:transparent; color:var(--text-dim); border-radius:8px; padding:9px 12px; font:inherit; font-size:11px; cursor:pointer; }
.ex-demo-tabs button[aria-pressed=true] { color:var(--accent); background:var(--accent-soft); border-color:var(--border); }
.ex-demo-prompt { margin:18px 24px; padding:13px 16px; border-radius:12px 12px 3px 12px; background:var(--panel-3); font-size:12px; color:var(--text-dim); line-height:1.6; }
.ex-demo-paper { background:var(--panel-2); border:1px solid var(--border-soft); border-radius:12px; margin:0 24px; padding:22px; min-height:270px; }
.ex-demo-paper .studio-eyebrow { font-size:9px; }
#exDemoResult { white-space:pre-wrap; line-height:1.8; font-size:13px; color:var(--text); }
.ex-demo-bottom { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 24px 22px; }
.ex-demo-bottom small { color:var(--text-faint); font-size:10px; }
.ex-text-button { border:0; background:transparent; color:var(--accent); padding:6px 0; cursor:pointer; font:inherit; font-size:12px; text-align:left; line-height:1.5; }
.ex-text-button:hover { text-decoration:underline; text-underline-offset:4px; }
.ex-process { max-width:1136px; margin:30px auto 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--border); border-radius:18px; overflow:hidden; text-align:left; }
.ex-process article { padding:28px; border-right:1px solid var(--border); }
.ex-process article:last-child { border:0; }
.ex-process span { display:block; font-size:11px; color:var(--accent); margin-bottom:16px; letter-spacing:.08em; }
.ex-process h3 { font-size:17px; font-weight:550; margin-bottom:9px; }
.ex-process p { color:var(--text-dim); font-size:13px; line-height:1.8; }
.ex-product-note { max-width:720px; margin:24px auto 0; color:var(--text-faint); font-size:12px; line-height:1.8; text-align:center; }
.lp-section { scroll-margin-top:84px; }
.lp-section h2,.lp-final h2 { letter-spacing:-.045em; font-weight:550; }
.lp-price-row>div { line-height:1.6; }
.ex-home { width:100%; margin:6px 0 24px; text-align:left; }
.ex-section-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:16px; }
.ex-section-heading h2 { margin:0; font-weight:500; letter-spacing:-.035em; font-size:25px; }
.ex-section-heading .studio-eyebrow { display:block; font-size:9px; margin-bottom:8px; }
.ex-home-grid,.ex-task-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.ex-home-task { position:relative; display:flex; flex-direction:column; gap:12px; text-align:left; padding:22px; border:1px solid var(--border); border-radius:16px; color:var(--text); background:linear-gradient(145deg,var(--accent-soft),transparent 65%),var(--panel); font:inherit; cursor:pointer; }
.ex-home-task:hover,.ex-task-card:hover { border-color:var(--accent); }
.ex-home-task strong { font-weight:550; font-size:14px; line-height:1.5; }
.ex-home-task>span:not(.ex-task-icon) { color:var(--text-dim); font-size:12px; line-height:1.7; }
.ex-home-task b { position:absolute; right:20px; top:24px; color:var(--accent); font-weight:400; }
.ex-task-icon { font-size:23px; color:var(--accent); line-height:1; }
.ex-home-footer { display:flex; justify-content:space-between; gap:14px; align-items:center; margin-top:12px; font-size:11px; color:var(--text-faint); }
#experienceDialog { margin:auto; width:min(800px,calc(100vw - 28px)); max-height:calc(100dvh - 32px); overflow-y:auto; padding:32px; border:1px solid var(--border); border-radius:24px; background:var(--panel); color:var(--text); box-shadow:0 30px 100px #0006; }
#experienceDialog::backdrop { background:#000b; backdrop-filter:blur(10px); }
.ex-dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.ex-dialog-header .studio-eyebrow { display:block; font-size:9px; }
.ex-dialog-header h2 { font-size:28px; line-height:1.2; letter-spacing:-.045em; font-weight:550; margin:0; }
.ex-close { border:1px solid var(--border); width:34px; height:34px; flex-shrink:0; border-radius:50%; color:var(--text-dim); background:transparent; font-size:23px; cursor:pointer; }
.ex-dialog-sub { color:var(--text-dim); line-height:1.8; font-size:13px; margin:16px 0 24px; }
.ex-task-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ex-task-card { padding:22px; border:1px solid var(--border); border-radius:15px; background:var(--panel-2); }
.ex-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.ex-star { color:var(--text-faint); background:transparent; border:0; font-size:22px; padding:4px 8px; cursor:pointer; }
.ex-star[aria-pressed=true] { color:var(--accent); }
.ex-task-card h3 { font-size:17px; font-weight:500; line-height:1.45; margin:8px 0; }
.ex-task-card p { color:var(--text-dim); font-size:12px; line-height:1.8; min-height:44px; }
.ex-task-card .studio-eyebrow { font-size:9px; }
.ex-notice { color:var(--accent); font-size:12px; line-height:1.6; margin:12px 0 0; }
.ex-notice:empty { display:none; }
.ex-dialog-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:20px; }
#experienceDialog .btn-primary,#experienceDialog .btn-ghost { width:auto; margin:0; }
.recent-section button.recent-item { width:100%; background:transparent; color:var(--text-dim); border:0; text-align:left; font:inherit; font-size:13px; }
.ex-dialog-actions .ex-search { flex:1; min-width:170px; margin:0; }
.ex-fineprint { margin-top:15px; color:var(--text-faint); font-size:11px; line-height:1.7; }
.ex-preview { padding:20px; border:1px solid var(--border); border-radius:12px; margin:20px 0; background:var(--accent-soft); }
.ex-preview p { margin:8px 0 0; color:var(--text-dim); font-size:13px; line-height:1.8; }
.ex-library-item { padding:22px; border:1px solid var(--border); border-radius:14px; margin-top:14px; }
.ex-library-item h3 { font-size:16px; font-weight:500; overflow-wrap:anywhere; }
.ex-library-item p { font-size:12px; line-height:1.8; white-space:pre-wrap; color:var(--text-dim); overflow-wrap:anywhere; }
#experienceDialog textarea.ex-result-text { min-height:300px; }
.ex-pro-note { margin:12px 0; font-size:12px; line-height:1.7; color:var(--text-dim); }
@media(max-width:900px) { .lp-hero { padding:60px 24px; gap:36px; } .lp-hero h1 { font-size:46px; } .ex-home-task { padding:18px; } }
@media(max-width:640px) {
  .lp-hero { padding:42px 22px; display:flex; flex-direction:column; text-align:left; gap:34px; }
  .lp-hero h1 { font-size:43px; } .lp-hero-copy { width:100%; } .ex-demo { width:100%; }
  .lp-hero .lp-sub { font-size:14px; } .lp-hero .lp-cta-row { justify-content:flex-start; }
  .ex-demo-tabs { padding-inline:16px; } .ex-demo-prompt { margin-inline:16px; } .ex-demo-paper { margin-inline:16px; padding:18px; }
  .ex-demo-bottom { padding-inline:18px; } .ex-process { grid-template-columns:1fr; margin-top:24px; }
  .ex-process article { padding:24px; border-right:0; border-bottom:1px solid var(--border); }
  .ex-home-grid,.ex-task-grid { grid-template-columns:1fr; }
  .ex-home-task { padding:18px 48px 18px 54px; gap:4px; }
  .ex-home-task .ex-task-icon { position:absolute; left:18px; top:23px; }
  .ex-section-heading { align-items:flex-end; }.ex-section-heading h2 { font-size:23px; }
  .ex-section-heading .studio-eyebrow { max-width:200px; line-height:1.7; }
  .ex-home-footer { align-items:flex-start; }.ex-home-footer>span { max-width:180px; line-height:1.7; }
  #experienceDialog { padding:24px 20px; border-radius:20px; }.ex-dialog-header h2 { font-size:25px; }
  .ex-dialog-actions>* { flex-grow:1; }.ex-task-card p { min-height:0; }
  .ex-dialog-actions button { min-height:44px; }.ex-demo-top { padding:18px; }
}
@media(prefers-reduced-motion:reduce) { .ex-home-task { transition:none; } }