/* Match the workspace palette in components.css and studio.css. */
:root {
  --ink: #232620;
  --muted: #676e60;
  --accent: #cf4933;
  --accent-dark: #bd3d28;
  --accent-bg: #fff0eb;
  --paper: #f6f7f3;
  --line: #e8e8e3;
  --sage-ink: #626d58;
  --sage-surface: #eeefe5;
  --sage-border: #e3e5d8;
  --sage-highlight: #dfe4c5;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65}
a{color:inherit;text-underline-offset:4px}
a:hover{color:var(--accent)}
a:focus-visible,summary:focus-visible,video:focus-visible{outline:3px solid #dd503880;outline-offset:5px}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{line-height:1.1;letter-spacing:-.045em}
h1{font-size:clamp(2.65rem,5.7vw,5.2rem);font-weight:650;margin:22px 0}
h2{font-size:clamp(2rem,3.5vw,3.2rem);font-weight:600;margin:16px 0 22px}
h3{font-size:1.4rem;letter-spacing:-.025em}
p{color:var(--muted)}
.wrap{width:min(1160px,calc(100% - 64px));margin-inline:auto}
.site-header{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:22px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;font-weight:700;letter-spacing:-.04em;font-size:1.15rem;text-decoration:none;white-space:nowrap}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--accent);color:#fff;font-size:13px;margin-right:10px}
.site-header nav{display:flex;gap:26px;font-size:.85rem}
.site-header nav a,.sign-in{text-decoration:none}
.sign-in{font-size:.85rem;font-weight:600}
.accent{color:var(--accent)}
.hero{text-align:center;padding-block:80px 48px}
.eyebrow{font-size:.68rem;letter-spacing:.17em;font-weight:700;color:var(--sage-ink)}
.status-dot{display:inline-block;width:7px;height:7px;background:#809873;border-radius:50%;margin-right:7px}
.hero-copy{max-width:690px;margin:0 auto 28px;font-size:1.1rem;line-height:1.8}
.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;background:var(--accent);color:#fff;border-radius:8px;padding:14px 23px;font-size:.9rem;font-weight:600;text-decoration:none;box-shadow:0 3px 9px #dd50381a}
.button:hover{color:#fff;background:var(--accent-dark)}
.access-note{font-size:.76rem;margin:12px auto 0;max-width:460px}
.hero-details{display:flex;flex-wrap:wrap;justify-content:center;gap:25px;margin-top:26px;font-size:.72rem;color:var(--muted)}
.hero-details span:before{content:'✓';color:var(--sage-ink);margin-right:6px}
.example-section{padding-top:32px;padding-bottom:60px}
.section-heading{max-width:750px;margin-bottom:36px}
.example-section .section-heading{max-width:650px}
.example-section h2{font-size:clamp(1.8rem,3vw,2.7rem)}
.workflow-visual{display:flex;align-items:center;gap:24px;padding:32px;border:1px solid var(--line);border-radius:16px;background:var(--sage-surface)}
.source-illustration{flex:1.1;background:#363d2d;color:#f6f7f3;border-radius:10px;padding:24px;min-width:0}
.visual-top{display:flex;justify-content:space-between;gap:10px;font-size:.6rem;letter-spacing:.1em}
.waveform{font-size:clamp(1rem,2.4vw,2rem);white-space:nowrap;overflow:hidden;color:var(--sage-highlight);padding-block:25px}
.timeline{display:flex;justify-content:space-around;gap:18px;height:12px;background:var(--sage-ink);border-radius:4px}
.timeline i{width:15%;background:var(--sage-highlight);border-radius:3px}
.source-illustration p{color:#dce0d0;font-size:.73rem;margin:16px 0 0}
.flow-arrow{font-size:25px;color:var(--sage-ink)}
.short-illustrations{display:flex;flex:1.5;gap:12px;min-width:0}
.short-illustrations>div{flex:1;aspect-ratio:9/16;min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px 14px;background:var(--sage-highlight);border-radius:10px}
.short-illustrations>div:nth-child(2){background:#eef0e8}
.short-illustrations>div:nth-child(3){background:#eee6dd}
.short-illustrations span{font-size:.5rem;letter-spacing:.07em}
.short-illustrations strong{font-size:clamp(1rem,1.8vw,1.5rem);line-height:1.1;letter-spacing:-.05em}
.short-illustrations em{font-style:normal;color:var(--sage-ink)}
.short-illustrations small{font-size:.5rem;line-height:1.4}
.illustration-note{font-size:.72rem;margin:12px 0 0}
.section{padding-block:72px}
.three-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px}
.three-col p{font-size:.92rem;margin-bottom:0}
.step{display:inline-flex;align-items:center;justify-content:center;background:var(--accent-bg);color:var(--accent);width:40px;height:40px;border-radius:50%;font-size:.75rem;margin-bottom:26px}
.feature-band{background:var(--sage-surface);border-block:1px solid var(--line)}
.feature-layout{display:grid;grid-template-columns:1fr 1fr;gap:90px}
.feature-layout>div>p{max-width:380px}
.feature-list article{padding-block:22px;border-bottom:1px solid var(--sage-border)}
.feature-list article:first-child{padding-top:0}
.feature-list article:last-child{border-bottom:0;padding-bottom:0}
.feature-list h3{font-size:1.2rem;margin-bottom:10px}
.feature-list p{font-size:.9rem;margin:0}
.use-cases article{padding:28px 24px;border:1px solid var(--line);border-radius:10px;background:#ffffff}
.category{font-size:.62rem;letter-spacing:.09em;color:var(--sage-ink)}
.use-cases h3{margin-top:26px}
.use-cases a{display:inline-block;font-size:.8rem;font-weight:600;margin-top:24px}
.faq{display:grid;grid-template-columns:1fr 1.6fr;gap:72px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line);padding:20px 0}
details:first-child{padding-top:0}
summary{cursor:pointer;font-size:.95rem;font-weight:600;padding-right:16px}
details p{font-size:.9rem;margin:14px 0 0}
.closing{text-align:center;border-radius:16px;background:var(--sage-surface);padding:54px 24px;margin-block:28px 70px}
.closing h2{margin-bottom:28px}
.broader-link{font-size:.84rem;margin:26px 0 0}
.site-footer{border-top:1px solid var(--line);padding-block:28px;display:flex;align-items:center;gap:22px;font-size:.75rem}
.site-footer p{margin:0}
.site-footer nav{margin-left:auto;display:flex;gap:20px}
.skip-link{position:absolute;top:-100px;left:20px;background:white;padding:12px;z-index:10}
.skip-link:focus{top:12px}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.demo-grid figure{margin:0}
.demo-grid video{width:100%;background:#363d2d;border-radius:10px}
.source-demo video{aspect-ratio:16/9}
.clip-demos{display:flex;gap:16px}
.clip-demos figure{flex:1;min-width:0}
.clip-demos video{aspect-ratio:9/16}
.demo-grid figcaption{font-size:.75rem;color:var(--muted);margin-top:10px}
@media(max-width:900px){.site-header nav{gap:14px}
.brand{font-size:1rem}
.feature-layout{gap:36px}
.three-col{gap:18px}
.workflow-visual{gap:16px;padding:20px}
.short-illustrations{gap:8px}
.short-illustrations>div{padding:12px 9px}
.site-footer{flex-wrap:wrap}
.site-footer nav{margin-left:0}
.faq{gap:30px}
}
@media(max-width:680px){.wrap{width:calc(100% - 36px)}
.site-header{flex-wrap:wrap;padding-block:20px;gap:18px}
.site-header nav{order:3;width:100%;justify-content:space-between;font-size:.75rem}
.hero{padding-top:52px}
.hero-copy{font-size:1rem}
.hero-details{gap:10px 18px}
.workflow-visual{flex-direction:column;align-items:stretch}
.flow-arrow{text-align:center;transform:rotate(90deg)}
.source-illustration{padding:20px}
.waveform{font-size:1.6rem}
.short-illustrations>div{padding:14px 10px}
.short-illustrations strong{font-size:clamp(1rem,4.5vw,1.5rem)}
.short-illustrations span,.short-illustrations small{font-size:.5rem}
.section{padding-block:48px}
.three-col,.feature-layout,.faq,.demo-grid{grid-template-columns:1fr;gap:28px}
.step{margin-bottom:15px}
.steps article{border-bottom:1px solid var(--line);padding-bottom:24px}
.section-heading{margin-bottom:26px}
.faq h2 br{display:none}
.closing{margin-block:10px 40px}
.site-footer nav{flex-wrap:wrap;gap:12px}
.site-footer{gap:12px}
.example-section{padding-bottom:30px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}