:root {
  --bg:#f4f1e9;
  --deep:#e6e0d4;
  --surface:#ebe6dc;
  --raised:#dfd8ca;
  --text:#25241f;
  --muted:#625f56;
  --accent:#0c6b64;
  --bright:#26c9b8;
  --line:#d1cabd;
  --heading:'Space Grotesk',Arial,sans-serif;
  --body:'Outfit',Arial,sans-serif;
  --pad:clamp(22px,5vw,70px)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.65 var(--body);
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button,input,textarea {
  font:inherit
}
button,summary {
  cursor:pointer
}
[hidden] {
  display:none!important
}
::selection {
  background:var(--accent);
  color:var(--bg)
}
:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px
}
h1,h2,h3,p {
  margin:0
}
h1,h2 {
  font-family:var(--heading);
  font-weight:500;
  line-height:1.04;
  letter-spacing:-.055em
}
h1 {
  font-size:clamp(52px,5.6vw,84px)
}
h2 {
  font-size:clamp(36px,4vw,57px)
}
h3 {
  font-size:23px;
  font-weight:500;
  line-height:1.25;
  letter-spacing:-.025em
}
em {
  font-family:var(--heading);
  color:var(--accent);
  font-weight:500;
  font-style:normal
}
p {
  color:var(--muted)
}
.container {
  max-width:1280px;
  margin:auto;
  padding-inline:var(--pad)
}
.section {
  padding-block:100px
}
.eyebrow {
  font-size:10px;
  letter-spacing:.16em;
  font-weight:700;
  color:var(--accent);
  display:flex;
  gap:10px;
  align-items:center;
  line-height:1.6
}
.status-dot {
  width:6px;
  height:6px;
  display:inline-block;
  border-radius:50%;
  background:var(--bright);
  box-shadow:none;
  flex:none
}
.lede {
  font-size:18px;
  max-width:540px
}
.micro,.caption {
  font-size:12px
}
.caption {
  margin-top:27px
}
.actions {
  display:flex;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
  margin-top:30px
}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:25px;
  border:1px solid var(--accent);
  border-radius:2px;
  padding:14px 23px;
  background:var(--accent);
  color:var(--deep);
  font-size:13px;
  font-weight:700;
  line-height:1.5;
  transition:background .2s,transform .2s
}
.button:hover {
  background:var(--bright);
  transform:translateY(-2px)
}
.button:active {
  transform:none
}
.button-small {
  padding:10px 17px;
  font-size:12px
}
.button span,.text-link span {
  font-size:19px;
  font-weight:400
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:18px;
  font-size:13px;
  font-weight:500;
  border-bottom:1px solid var(--line);
  padding-block:7px
}
.text-link:hover {
  color:var(--accent);
  border-color:var(--accent)
}
.skip {
  position:absolute;
  top:12px;
  left:12px;
  padding:12px;
  background:var(--accent);
  color:var(--bg);
  z-index:200;
  transform:translateY(-200%)
}
.skip:focus {
  transform:none
}
.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(244,241,233,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px)
}
.nav {
  min-height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px
}
.brand {
  display:flex;
  gap:13px;
  align-items:center;
  font-size:22px;
  font-weight:600;
  letter-spacing:.03em;
  line-height:1.15
}
.brand-mark {
  font-size:38px;
  line-height:1;
  color:var(--accent)
}
.brand-sub {
  display:block;
  font-size:8px;
  letter-spacing:.2em;
  margin-top:6px;
  color:var(--muted)
}
.nav nav {
  display:flex;
  align-items:center;
  gap:28px
}
.nav nav>a:not(.button) {
  font-size:12px;
  color:var(--muted)
}
.nav nav>a:hover,.nav nav>a[aria-current] {
  color:var(--accent)
}
.nav nav>.button:hover {
  color:var(--bg)
}
.menu-toggle {
  display:none;
  background:none;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:5px;
  padding:8px 12px;
  font-size:13px
}
.hero {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  align-items:center;
  min-height:640px;
  padding-block:60px;
  gap:25px
}
.hero h1 {
  margin-top:23px
}
.hero .lede {
  margin-top:25px;
  max-width:480px
}
.hero .micro {
  margin-top:16px
}
.fact-strip {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding-block:30px;
  border-block:1px solid var(--line)
}
.fact-strip div {
  padding-left:28px;
  border-left:1px solid var(--line)
}
.fact-strip div:first-child {
  padding-left:0;
  border:0
}
.fact-strip strong {
  font-family:var(--heading);
  font-size:35px;
  font-weight:400;
  line-height:1.2
}
.fact-strip span {
  font-size:10px;
  color:var(--muted);
  display:block;
  margin-top:6px
}
.section-heading {
  display:flex;
  justify-content:space-between;
  gap:50px;
  align-items:flex-end;
  margin-bottom:45px
}
.section-heading h2 {
  margin-top:18px
}
.section-heading>p {
  max-width:340px;
  font-size:14px;
  line-height:1.75;
  margin-bottom:5px
}
.console {
  border:1px solid var(--line);
  border-radius:2px;
  overflow:hidden;
  background:var(--deep);
  box-shadow:0 25px 50px #3d332215
}
.console-top {
  padding:14px 20px;
  border-bottom:1px solid var(--line);
  display:flex;
  gap:25px;
  align-items:center;
  justify-content:space-between;
  font-size:8px;
  letter-spacing:.15em;
  color:var(--muted);
  background:var(--surface)
}
.console-top>span:first-child {
  display:flex;
  gap:5px
}
.console-top i {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#779589
}
.console-top i:first-child {
  background:var(--accent)
}
.example-tag {
  font-size:7px;
  border:1px solid var(--line);
  border-radius:3px;
  padding:3px 5px
}
.console-body {
  display:flex;
  min-height:385px
}
.console-sidebar {
  width:145px;
  border-right:1px solid var(--line);
  padding:22px 15px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:none
}
.mini-logo {
  font-size:27px;
  color:var(--accent);
  margin:0 0 15px 12px
}
.console-sidebar>span:not(.mini-logo) {
  font-size:10px;
  padding:7px 10px;
  color:var(--muted)
}
.console-sidebar>.selected {
  color:var(--accent)!important;
  background:var(--raised);
  border-radius:4px
}
.console-chat {
  width:100%;
  padding:30px 42px;
  display:flex;
  flex-direction:column;
  gap:24px
}
.message-user {
  align-self:flex-end;
  max-width:80%;
  background:var(--raised);
  padding:13px 20px;
  border-radius:10px 10px 0 10px;
  font-size:12px
}
.message-agent {
  max-width:650px
}
.message-agent h3 {
  font-size:19px;
  margin-top:10px
}
.message-agent>p {
  font-size:12px;
  line-height:1.8;
  margin-top:10px
}
.task-chips {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:17px
}
.task-chips span {
  font-size:9px;
  padding:4px 9px;
  border:1px solid var(--line);
  border-radius:4px;
  color:var(--accent)
}
.deliverable {
  margin-top:22px;
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--surface);
  padding:17px;
  display:flex;
  align-items:center;
  gap:16px
}
.document-icon {
  font-size:27px;
  color:var(--accent)
}
.deliverable strong {
  font-size:12px;
  font-weight:500
}
.deliverable small {
  display:block;
  font-size:9px;
  color:var(--muted);
  margin-top:3px
}
.deliverable>span:last-child {
  margin-left:auto;
  color:var(--accent)
}
.fake-composer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid var(--line);
  border-radius:3px;
  padding:12px 16px;
  font-size:11px;
  color:var(--muted);
  max-width:700px
}
.fake-composer>span {
  background:var(--accent);
  color:var(--bg);
  width:23px;
  height:23px;
  text-align:center;
  border-radius:3px
}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-top:35px
}
.steps>div {
  border-top:1px solid var(--line);
  padding-top:23px
}
.steps span {
  font-size:9px;
  letter-spacing:.13em;
  color:var(--accent)
}
.steps h3 {
  font-size:19px;
  margin-top:12px
}
.steps p {
  font-size:13px;
  margin-top:12px
}
.outcomes,.tinted {
  background:#e8e2d6;
  border-block:1px solid var(--line)
}
.outcome-layout {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:60px
}
.use-tabs {
  display:flex;
  flex-direction:column
}
.use-tabs button {
  position:relative;
  text-align:left;
  border:0;
  border-top:1px solid var(--line);
  padding:28px 32px 28px 45px;
  background:transparent;
  color:var(--muted)
}
.use-tabs button:last-child {
  border-bottom:1px solid var(--line)
}
.use-tabs button>span {
  position:absolute;
  top:31px;
  left:6px;
  font-size:10px
}
.use-tabs strong {
  display:block;
  font-size:20px;
  font-weight:500;
  letter-spacing:-.025em
}
.use-tabs small {
  display:block;
  font-size:12px;
  margin-top:8px
}
.use-tabs b {
  position:absolute;
  right:8px;
  top:30px;
  font-weight:400;
  font-size:21px
}
.use-tabs button[aria-selected="true"] {
  color:var(--accent);
  background:#ded6c8
}
.use-tabs button:hover {
  color:var(--text)
}
.use-tabs button[aria-selected="true"]:before {
  content:'';
  position:absolute;
  left:-13px;
  top:28px;
  width:3px;
  height:52px;
  background:var(--accent)
}
.use-panel {
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:2px;
  padding:32px
}
.use-panel h3 {
  font-family:var(--heading);
  font-size:30px;
  line-height:1.1;
  margin-top:16px;
  font-weight:400
}
.use-panel>p {
  font-size:13px;
  line-height:1.8;
  margin-top:17px
}
.output-preview {
  background:var(--surface);
  padding:20px;
  border-radius:3px;
  margin-block:25px
}
.preview-top {
  font-size:8px;
  letter-spacing:.12em;
  display:flex;
  justify-content:space-between;
  color:var(--muted)
}
.output-preview>p {
  font-family:var(--heading);
  font-size:21px;
  color:var(--text);
  line-height:1.35;
  margin-top:18px
}
.output-preview ul {
  padding:0;
  list-style:none;
  font-size:11px;
  color:var(--muted);
  margin:20px 0 0
}
.output-preview li {
  padding:7px 0;
  border-top:1px solid var(--line)
}
.output-preview li:before {
  content:'✓';
  color:var(--accent);
  margin-right:10px
}
.platform-teaser,.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center
}
.platform-teaser h2,.split h2 {
  margin-top:19px
}
.platform-teaser .lede,.split .lede {
  font-size:15px;
  margin-top:25px;
  max-width:470px
}
.platform-teaser .text-link {
  margin-top:25px
}
.workforce-visual {
  background:#e8e2d6;
  border:1px solid var(--line);
  padding:36px;
  border-radius:2px
}
.workforce-center {
  color:var(--accent);
  font-size:40px;
  display:flex;
  align-items:center;
  flex-direction:column;
  line-height:1
}
.workforce-center span {
  font-size:8px;
  letter-spacing:.16em;
  margin-top:15px
}
.division-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:25px
}
.division-grid span {
  font-size:12px;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:5px;
  color:var(--muted);
  background:#f4f1e9
}
.division-grid span:last-child {
  border-style:dashed;
  color:var(--accent)
}
.division-grid b {
  float:right;
  font-weight:400
}
.workforce-meta {
  font-size:9px;
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  margin-top:20px
}
.control {
  border-block:1px solid var(--line);
  background:#262520
}
.control-grid,.growth-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px
}
.feature-icon {
  font-size:28px;
  color:var(--accent);
  display:block;
  margin-bottom:25px
}
.control-grid h3,.growth-grid h3 {
  font-size:20px
}
.control-grid p,.growth-grid p {
  font-size:13px;
  margin-top:17px;
  line-height:1.8
}
.faq-layout {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:80px
}
.faq-layout h2 {
  margin-top:19px
}
.faq-layout>div>p {
  font-size:14px;
  max-width:310px;
  margin-top:25px
}
.faq-layout .text-link {
  margin-top:23px
}
.faq-list {
  border-top:1px solid var(--line)
}
details {
  border-bottom:1px solid var(--line)
}
summary {
  font-size:15px;
  padding:23px 30px 23px 0;
  list-style:none;
  position:relative;
  line-height:1.5
}
summary::-webkit-details-marker {
  display:none
}
summary:after {
  content:'+';
  position:absolute;
  right:0;
  color:var(--accent);
  font-size:20px;
  top:19px
}
details[open] summary:after {
  content:'−'
}
details p {
  font-size:13px;
  line-height:1.8;
  padding-bottom:25px;
  max-width:530px
}
summary:hover {
  color:var(--accent)
}
.final-cta {
  text-align:center;
  padding-block:75px 85px;
  background:#26c9b8;
  border-block:1px solid var(--line)
}
.final-cta>.eyebrow {
  justify-content:center
}
.final-cta h2 {
  font-size:clamp(43px,5.4vw,76px);
  margin-top:22px
}
.final-cta p {
  font-size:16px;
  margin-top:23px;
  line-height:1.8
}
.final-cta .button {
  margin-top:30px
}
.final-cta>small {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:15px
}
.cta-star {
  color:var(--accent);
  font-size:45px;
  line-height:1;
  margin-bottom:27px
}
.footer {
  padding-block:50px 35px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:35px;
  align-items:start
}
.footer>p {
  font-size:11px;
  line-height:1.9
}
.footer nav {
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
  font-size:11px
}
.footer a:hover {
  color:var(--accent)
}
.footer>small {
  grid-column:1/-1;
  padding-top:20px;
  border-top:1px solid var(--line);
  font-size:9px;
  color:var(--muted)
}
.feature-hero {
  padding-block:85px 65px
}
.feature-hero h1 {
  margin-top:25px;
  font-size:clamp(48px,5.4vw,78px)
}
.feature-hero .lede {
  margin-top:25px;
  max-width:610px;
  font-size:17px
}
.feature-index {
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  border-block:1px solid var(--line);
  padding-block:21px
}
.feature-index a {
  font-size:10px;
  color:var(--muted)
}
.feature-index a:hover {
  color:var(--accent)
}
.feature-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  margin-top:40px
}
.feature-pair article {
  border-top:1px solid var(--line);
  padding-top:25px
}
.feature-pair h3 {
  margin-top:12px;
  font-size:21px
}
.feature-pair p {
  font-size:13px;
  line-height:1.8;
  max-width:480px;
  margin-top:14px
}
.clean-list {
  list-style:none;
  padding:0;
  margin:30px 0 0
}
.clean-list li {
  border-top:1px solid var(--line);
  padding-block:17px;
  display:flex;
  flex-direction:column;
  gap:5px
}
.clean-list strong {
  font-size:14px;
  font-weight:500
}
.clean-list span {
  font-size:12px;
  color:var(--muted)
}
.creation-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px
}
.creation-card {
  background:var(--surface);
  padding:30px;
  border:1px solid var(--line);
  border-radius:2px
}
.creation-card h3 {
  font-family:var(--heading);
  font-weight:400;
  font-size:33px;
  margin-top:14px
}
.creation-card>p {
  font-size:13px;
  margin-top:22px
}
.editor-preview,.tracker-preview {
  margin-top:25px;
  border:1px solid var(--line);
  background:var(--bg);
  border-radius:3px;
  overflow:hidden;
  min-height:270px
}
.editor-preview>div {
  display:flex;
  border-bottom:1px solid var(--line);
  gap:20px;
  padding:13px 20px;
  font-size:8px;
  letter-spacing:.15em;
  color:var(--muted)
}
.editor-preview .active {
  color:var(--accent)
}
.editor-preview blockquote {
  font-family:var(--heading);
  font-size:35px;
  line-height:1.1;
  letter-spacing:-.03em;
  margin:25px;
  color:var(--text)
}
.editor-preview small {
  display:block;
  font-size:8px;
  color:var(--muted);
  margin:0 25px 20px
}
.tracker-preview {
  padding:20px
}
.tracker-preview>div {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:.1em;
  padding-bottom:25px
}
.tracker-preview>div>span {
  font-size:7px;
  color:var(--muted)
}
.tracker-preview p {
  display:grid;
  grid-template-columns:1fr .65fr 1fr;
  gap:10px;
  border-bottom:1px solid var(--line);
  font-size:10px;
  padding-block:15px;
  align-items:center
}
.tracker-preview strong {
  font-weight:500;
  color:var(--text)
}
.pill {
  font-size:8px;
  border:1px solid var(--line);
  border-radius:4px;
  padding:4px 6px;
  justify-self:start;
  color:var(--accent)
}
.collab-preview {
  border:1px solid var(--line);
  padding:35px;
  background:var(--bg);
  border-radius:2px
}
.collab-preview h3 {
  font-family:var(--heading);
  font-size:35px;
  font-weight:400;
  margin-top:22px
}
.collab-message {
  padding:16px 20px;
  margin-top:23px;
  background:var(--raised);
  border-radius:3px;
  margin-left:30px
}
.collab-message>span {
  font-size:8px;
  letter-spacing:.1em;
  color:var(--accent)
}
.collab-message p {
  font-size:12px;
  color:var(--text);
  margin-top:6px
}
.collab-message.guest {
  margin-left:0;
  margin-right:30px;
  background:var(--surface)
}
.collab-file {
  margin-top:25px;
  border:1px solid var(--line);
  padding:14px;
  border-radius:5px;
  color:var(--accent);
  font-size:17px
}
.collab-file strong {
  font-size:12px;
  font-weight:500;
  margin-left:7px
}
.collab-file>span {
  font-size:9px;
  float:right;
  margin-top:5px;
  color:var(--muted)
}
.collab-preview>small {
  display:block;
  font-size:9px;
  color:var(--muted);
  margin-top:20px
}
dialog {
  width:min(570px,calc(100% - 32px));
  border:1px solid var(--line);
  border-radius:2px;
  padding:38px;
  background:var(--surface);
  color:var(--text);
  max-height:calc(100dvh - 36px);
  overflow:auto;
  box-shadow:0 30px 100px #0009
}
dialog::backdrop {
  background:#27231ec9;
  backdrop-filter:blur(7px)
}
.dialog-open {
  overflow:hidden
}
.dialog-close {
  position:absolute;
  right:16px;
  top:13px;
  background:none;
  color:var(--muted);
  border:0;
  font-size:26px;
  line-height:1;
  padding:5px
}
.dialog-close:hover {
  color:var(--accent)
}
dialog h2 {
  font-size:46px;
  margin-top:15px
}
dialog>p {
  font-size:13px;
  margin-top:18px
}
form {
  margin-top:25px
}
label {
  display:block;
  font-size:11px;
  margin-bottom:16px
}
label>span {
  color:var(--muted);
  font-size:10px
}
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px
}
input,textarea {
  display:block;
  width:100%;
  color:var(--text);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:5px;
  padding:11px 12px;
  font-size:13px;
  margin-top:6px
}
textarea {
  resize:vertical
}
input::placeholder,textarea::placeholder {
  color:#747065
}
form .button {
  width:100%
}
form>small {
  display:block;
  color:var(--muted);
  font-size:9px;
  line-height:1.6;
  margin-top:12px
}
.form-note {
  font-size:12px;
  margin-top:12px
}
.form-note:empty {
  display:none
}
.form-note.success {
  color:var(--accent)
}
.form-note.error {
  color:#0c6b64
}
.honeypot {
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  opacity:0
}
button:disabled {
  cursor:wait;
  opacity:.65
}
@media(max-width:1050px) {
  .nav nav {
    gap:18px
  }
  .hero {
    min-height:580px
  }
  .hero h1 {
    font-size:61px
  }
  .hero .lede {
    font-size:16px
  }
  .core {
    width:125px;
    height:125px
  }
  .core small {
    font-size:5px
  }
  .agent {
    min-width:110px;
    font-size:10px;
    padding:11px 12px 11px 24px
  }
  .agent span {
    font-size:7px
  }
  .section-heading {
    gap:35px
  }
  .section-heading>p {
    max-width:290px
  }
  .outcome-layout {
    gap:30px
  }
  .platform-teaser,.split {
    gap:35px
  }
  .faq-layout {
    gap:45px
  }
  .fact-strip strong {
    font-size:30px
  }
}
@media(max-width:800px) {
  .nav {
    min-height:73px
  }
  .menu-toggle {
    display:block
  }
  .nav nav {
    display:none;
    position:absolute;
    top:73px;
    left:0;
    right:0;
    padding:22px var(--pad);
    background:var(--bg);
    border-bottom:1px solid var(--line);
    align-items:stretch;
    gap:16px
  }
  .nav nav.is-open {
    display:flex;
    flex-direction:column
  }
  .nav nav>a:not(.button) {
    font-size:14px;
    padding-block:7px
  }
  .nav .button {
    align-self:flex-start
  }
  .hero {
    gap:10px;
    min-height:530px
  }
  .hero h1 {
    font-size:50px
  }
  .hero .lede {
    font-size:14px
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:.1em
  }
  .hero .actions {
    gap:18px
  }
  .hero .micro {
    font-size:10px
  }
  .agent {
    padding:10px 9px 10px 20px;
    min-width:90px;
    font-size:9px
  }
  .agent i {
    left:9px;
    top:15px;
    width:4px;
    height:4px
  }
  .agent span {
    font-size:6px
  }
  .core {
    width:100px;
    height:100px
  }
  .core-icon {
    font-size:33px
  }
  .core strong {
    font-size:16px
  }
  .core small {
    font-size:4px
  }
  .orbit-caption {
    font-size:6px
  }
  .fact-strip strong {
    font-size:27px
  }
  .fact-strip div {
    padding-left:18px
  }
  .fact-strip span {
    font-size:9px
  }
  .section {
    padding-block:75px
  }
  .section-heading {
    display:block
  }
  .section-heading>p {
    max-width:530px;
    margin-top:23px
  }
  .steps {
    gap:25px
  }
  .outcome-layout {
    grid-template-columns:1fr;
    gap:25px
  }
  .use-tabs {
    display:grid;
    grid-template-columns:repeat(3,1fr)
  }
  .use-tabs button {
    padding:22px 16px 22px 26px;
    border-bottom:1px solid var(--line)
  }
  .use-tabs button>span {
    left:3px;
    top:25px;
    font-size:8px
  }
  .use-tabs strong {
    font-size:15px;
    line-height:1.35
  }
  .use-tabs small {
    font-size:10px
  }
  .use-tabs b {
    display:none
  }
  .use-tabs button[aria-selected="true"]:before {
    left:0;
    top:auto;
    bottom:-1px;
    width:100%;
    height:2px
  }
  .platform-teaser,.split {
    grid-template-columns:1fr;
    gap:35px
  }
  .platform-teaser>div:first-child {
    max-width:550px
  }
  .workforce-visual {
    max-width:570px;
    width:100%
  }
  .split .swarm-art {
    margin:auto;
    max-width:470px
  }
  .control-grid,.growth-grid {
    gap:27px
  }
  .control-grid h3,.growth-grid h3 {
    font-size:17px
  }
  .control-grid p,.growth-grid p {
    font-size:12px
  }
  .faq-layout {
    grid-template-columns:1fr;
    gap:35px
  }
  .faq-layout>div>p {
    max-width:480px
  }
  .footer {
    gap:25px
  }
  .feature-pair {
    gap:25px
  }
  .creation-card {
    padding:23px
  }
  .creation-card h3 {
    font-size:29px
  }
  .editor-preview blockquote {
    font-size:31px
  }
  .collab-preview {
    max-width:570px
  }
  .console-chat {
    padding:25px
  }
  .console-sidebar {
    width:115px
  }
  .feature-hero {
    padding-block:65px 50px
  }
}
@media(max-width:600px) {
  html {
    scroll-padding-top:95px
  }
  .hero {
    grid-template-columns:1fr;
    padding-top:48px;
    padding-bottom:40px;
    gap:5px;
    min-height:0
  }
  .hero h1 {
    font-size:clamp(48px,11vw,64px)
  }
  .hero .lede {
    font-size:16px;
    max-width:450px
  }
  .hero .eyebrow {
    font-size:9px
  }
  .hero .micro {
    font-size:11px
  }
  .swarm-art {
    max-width:440px;
    margin:5px auto 20px
  }
  .agent {
    min-width:105px;
    font-size:11px;
    padding:11px 13px 11px 25px
  }
  .agent i {
    left:11px;
    top:17px
  }
  .agent span {
    font-size:7px
  }
  .core {
    width:122px;
    height:122px
  }
  .core-icon {
    font-size:42px
  }
  .core strong {
    font-size:18px
  }
  .core small {
    font-size:5px
  }
  .orbit-caption {
    font-size:7px
  }
  .fact-strip {
    grid-template-columns:1fr 1fr;
    row-gap:25px;
    padding-block:25px
  }
  .fact-strip div:nth-child(3) {
    padding-left:0;
    border:0
  }
  .fact-strip strong {
    font-size:30px
  }
  .fact-strip span {
    font-size:10px
  }
  .section {
    padding-block:60px
  }
  h2 {
    font-size:39px
  }
  .section-heading {
    margin-bottom:30px
  }
  .section-heading>p {
    font-size:14px
  }
  .console-top {
    padding:12px;
    gap:10px;
    font-size:7px
  }
  .example-tag {
    font-size:6px
  }
  .console-sidebar {
    display:none
  }
  .console-chat {
    padding:20px 16px
  }
  .console-body {
    min-height:0
  }
  .message-user {
    max-width:94%;
    font-size:11px;
    padding:12px 16px
  }
  .message-agent h3 {
    font-size:18px
  }
  .message-agent>p {
    font-size:11px
  }
  .deliverable {
    padding:13px;
    gap:10px
  }
  .deliverable strong {
    font-size:11px
  }
  .deliverable small {
    font-size:8px
  }
  .fake-composer {
    font-size:10px
  }
  .steps {
    grid-template-columns:1fr;
    gap:25px
  }
  .steps p {
    max-width:420px
  }
  .steps>div {
    padding-top:18px
  }
  .caption {
    font-size:10px
  }
  .use-tabs {
    grid-template-columns:1fr
  }
  .use-tabs button {
    padding:18px 25px 18px 30px
  }
  .use-tabs button>span {
    top:20px
  }
  .use-tabs strong {
    font-size:18px
  }
  .use-tabs small {
    font-size:11px;
    margin-top:4px
  }
  .use-tabs b {
    display:block;
    top:20px;
    font-size:18px
  }
  .use-tabs button[aria-selected="true"]:before {
    width:2px;
    height:45px;
    top:18px;
    bottom:auto
  }
  .use-panel {
    padding:25px
  }
  .use-panel h3 {
    font-size:29px
  }
  .output-preview {
    padding:17px
  }
  .platform-teaser .lede,.split .lede {
    font-size:15px
  }
  .workforce-visual {
    padding:26px
  }
  .control-grid,.growth-grid {
    grid-template-columns:1fr;
    gap:30px
  }
  .control-grid article,.growth-grid article {
    border-top:1px solid var(--line);
    padding-top:22px
  }
  .feature-icon {
    font-size:25px;
    margin-bottom:16px
  }
  .control-grid h3,.growth-grid h3 {
    font-size:20px
  }
  .control-grid p,.growth-grid p {
    font-size:13px;
    margin-top:10px
  }
  .faq-layout {
    gap:30px
  }
  summary {
    font-size:14px;
    padding-block:20px
  }
  .final-cta {
    padding-block:55px
  }
  .final-cta h2 {
    font-size:46px
  }
  .final-cta p {
    font-size:14px
  }
  .final-cta p br {
    display:none
  }
  .final-cta>small {
    font-size:10px
  }
  .footer {
    grid-template-columns:1fr 1fr;
    padding-top:35px;
    gap:25px
  }
  .footer>p {
    grid-column:1
  }
  .footer nav {
    grid-column:2;
    grid-row:1/3;
    align-items:flex-start;
    font-size:11px;
    gap:15px
  }
  .footer>.brand {
    font-size:19px
  }
  .brand-mark {
    font-size:32px
  }
  .brand-sub {
    font-size:7px
  }
  .feature-hero h1 {
    font-size:49px
  }
  .feature-hero .lede {
    font-size:16px
  }
  .feature-index {
    gap:15px 20px
  }
  .feature-index a {
    font-size:9px
  }
  .feature-pair,.creation-grid {
    grid-template-columns:1fr;
    gap:25px
  }
  .creation-card {
    padding:25px
  }
  .creation-card h3 {
    font-size:32px
  }
  .editor-preview blockquote {
    font-size:38px
  }
  .collab-preview {
    padding:25px
  }
  .collab-file>span {
    float:none;
    display:block;
    margin-left:23px
  }
  dialog {
    padding:30px 23px
  }
  dialog h2 {
    font-size:41px
  }
  .form-row {
    grid-template-columns:1fr;
    gap:0
  }
}
.anchor-aliases {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.platform-teaser {
  position:relative
}
/* MSR: work in motion. Ivory, ink, teal, and an editorial rhythm. */
body {
  overflow-x:clip
}
h1,h2,h3 {
  text-wrap:balance
}
em {
  font-style:normal
}
.button {
  background:#26c9b8;
  color:#211f1b;
  border-color:#26c9b8;
  border-radius:2px;
  gap:24px;
  padding:15px 22px;
  font-size:13px;
  box-shadow:4px 4px 0 transparent
}
.button:hover {
  background:#5ce0cf;
  color:#211f1b;
  transform:translate(-2px,-2px);
  box-shadow:4px 4px 0 #25241f
}
.button span {
  transition:transform .25s
}
.button:hover span {
  transform:translate(2px,-2px)
}
.button-small {
  padding:11px 17px;
  font-size:12px
}
.nav nav>.button:hover {
  color:#211f1b
}
.text-link {
  border-color:currentColor;
  font-size:13px;
  font-weight:500
}
.brand {
  letter-spacing:-.065em;
  font-family:var(--heading);
  font-size:25px;
  font-weight:700;
  gap:10px
}
.brand-sub {
  font-family:var(--body);
  font-size:8px;
  font-weight:500;
  letter-spacing:.22em;
  margin-top:3px
}
.brand-mark {
  display:flex;
  width:34px;
  height:34px;
  color:var(--text)
}
.brand-mark svg {
  width:100%;
  height:100%
}
.nav {
  min-height:85px
}
.nav nav>a:not(.button) {
  font-size:13px;
  color:var(--text)
}
.nav nav>a:hover,.nav nav>a[aria-current] {
  color:var(--accent)
}
.eyebrow {
  color:var(--text);
  font-size:10px;
  letter-spacing:.13em;
  font-weight:600
}
.status-dot {
  background:var(--bright);
  border-radius:0;
  width:7px;
  height:7px
}
.hero {
  grid-template-columns:1.02fr 1fr;
  min-height:710px;
  gap:45px;
  padding-block:55px 60px
}
.hero h1 {
  font-size:clamp(65px,7.45vw,108px);
  line-height:.99;
  letter-spacing:-.07em;
  margin-top:29px
}
.hero h1 em {
  display:inline-block;
  position:relative;
  color:var(--bright)
}
.hero .lede {
  font-size:17px;
  line-height:1.65;
  max-width:420px;
  margin-top:24px
}
.hero .micro {
  font-size:11px
}
.hero .actions {
  gap:24px;
  margin-top:26px
}
.hero-copy {
  animation:rise-in .8s both
}
.hero-copy .lede {
  animation:rise-in 1s .1s both
}
.hero .motion-study {
  animation:rise-in 1.1s .12s both
}
.motion-study {
  width:100%;
  min-width:0;
  position:relative
}
.study-top {
  display:flex;
  justify-content:space-between;
  border-block:1px solid var(--line);
  padding-block:12px;
  font-size:9px;
  font-weight:500;
  letter-spacing:.11em
}
.engine-stage {
  position:relative;
  aspect-ratio:1;
  isolation:isolate
}
.kinetic-m {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  fill:none;
  stroke-linejoin:bevel;
  stroke-width:58;
  transform:rotate(-8deg);
  animation:machine-drift 8s ease-in-out infinite
}
.m-depth {
  stroke:#125e57
}
.m-body {
  stroke:#26c9b8
}
.m-edge {
  stroke:#5ce0cf;
  stroke-width:1;
  transform:translate(0,-26px)
}
.m-flow {
  stroke:#b1f1e7;
  stroke-width:5;
  stroke-dasharray:4 12;
  animation:work-flow 5s linear infinite;
  opacity:.85
}
.hero-art {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  mix-blend-mode:multiply;
  animation:machine-drift 8s ease-in-out infinite;
  will-change:transform
}
.brief-ticket,.result-ticket,.dispatch-label {
  position:absolute;
  z-index:2;
  box-shadow:5px 8px 24px #35221412
}
.brief-ticket {
  top:45%;
  left:-3%;
  width:44%;
  padding:19px;
  background:#fffdf7;
  border:1px solid #ddd4c4;
  transform:rotate(-8deg);
  animation:ticket-float 7s ease-in-out infinite
}
.brief-ticket span,.result-ticket>span {
  display:block;
  font-size:7px;
  letter-spacing:.12em;
  border-bottom:1px solid #d6cfc2;
  padding-bottom:10px;
  margin-bottom:10px
}
.brief-ticket strong {
  font-family:var(--heading);
  font-size:23px;
  line-height:1.1;
  font-weight:500;
  letter-spacing:-.04em;
  display:block
}
.brief-ticket>i {
  font-size:8px;
  font-style:normal;
  display:block;
  margin-top:13px;
  color:var(--muted)
}
.dispatch-label {
  top:5%;
  right:0;
  background:#354ecc;
  color:white;
  padding:15px 19px;
  width:145px;
  transform:rotate(7deg)
}
.dispatch-label>span {
  font-size:8px;
  letter-spacing:.16em
}
.dispatch-label strong {
  display:block;
  font-family:var(--heading);
  font-size:39px;
  letter-spacing:-.07em;
  font-weight:500;
  line-height:1.15
}
.dispatch-bars {
  display:flex;
  gap:3px;
  height:17px;
  align-items:end;
  margin-top:6px
}
.dispatch-bars i {
  width:6px;
  background:#bac5ff;
  animation:equalizer 1.3s ease-in-out infinite;
  transform-origin:bottom;
  height:90%
}
.dispatch-bars i:nth-child(2n) {
  animation-delay:-.3s;
  height:45%
}
.dispatch-bars i:nth-child(3n) {
  animation-delay:-.6s;
  height:70%
}
.result-ticket {
  right:-1%;
  bottom:3%;
  width:48%;
  padding:19px;
  background:#25241f;
  color:#f5f1e9;
  transform:rotate(4deg);
  transition:transform .6s,box-shadow .6s
}
.result-ticket>span {
  border-color:#605d52;
  color:#d2ccbf
}
.result-ticket strong {
  font-size:27px;
  font-family:var(--heading);
  line-height:1.1;
  font-weight:500;
  letter-spacing:-.05em;
  display:block
}
.result-ticket>div {
  font-size:9px;
  margin-top:12px;
  white-space:nowrap
}
.result-ticket i {
  font-style:normal;
  color:#8ae5d8;
  margin-right:4px
}
.result-ticket i:nth-child(2) {
  margin-left:7px
}
.engine-coordinate {
  position:absolute;
  left:0;
  bottom:4%;
  font-size:8px;
  line-height:1.8;
  letter-spacing:.08em;
  color:var(--muted)
}
.motion-study[data-phase="2"] .result-ticket {
  transform:rotate(0deg) translateY(-9px);
  box-shadow:7px 7px 0 #26c9b8
}
.study-bottom {
  border-block:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:54px;
  gap:8px
}
.study-bottom ol {
  padding:0;
  margin:0;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex:1
}
.study-bottom li {
  font-size:10px;
  position:relative;
  color:var(--muted);
  padding-block:14px
}
.study-bottom li:after {
  content:'';
  height:2px;
  width:100%;
  position:absolute;
  bottom:-5px;
  left:0;
  background:transparent;
  transition:background .3s
}
.study-bottom li.is-current {
  color:var(--accent)
}
.study-bottom li.is-current:after {
  background:var(--bright)
}
.motion-toggle {
  width:30px;
  height:30px;
  font-size:10px;
  background:transparent;
  border:1px solid var(--line);
  color:var(--text);
  margin-left:10px;
  flex:none
}
.motion-toggle:hover {
  background:#dfd8ca
}
.study-caption {
  font-size:8px;
  margin-top:10px
}
.fact-strip {
  padding-block:30px;
  gap:20px;
  grid-template-columns:1fr 1fr .8fr 1.3fr
}
.fact-strip strong {
  font-size:50px;
  font-family:var(--heading);
  font-weight:500;
  letter-spacing:-.06em
}
.fact-strip span {
  font-size:11px
}
.motion-strip {
  overflow:hidden;
  margin-top:35px;
  border-bottom:1px solid var(--line);
  padding:10px 0;
  color:#6b665c
}
.motion-strip>div {
  width:max-content;
  display:flex;
  animation:marquee 35s linear infinite
}
.motion-strip span {
  width:280px;
  font-size:12px;
  letter-spacing:.17em
}
.section {
  padding-block:100px
}
.section-heading h2 {
  margin-top:16px
}
.section-heading>p {
  font-size:15px;
  max-width:350px
}
.console {
  --text:#f5f1e8;
  --bg:#24231f;
  --deep:#24231f;
  --surface:#302e29;
  --muted:#c2bfb5;
  --accent:#8ae5d8;
  --line:#575246;
  --raised:#454139;
  color:var(--text);
  border:1px solid #3e3a31;
  border-radius:3px
}
.console .eyebrow {
  color:var(--accent)
}
.console-top {
  letter-spacing:.1em;
  font-size:9px
}
.console-sidebar {
  width:145px;
  padding-top:25px
}
.mini-logo {
  width:26px;
  height:30px;
  display:block
}
.mini-logo svg {
  width:100%
}
.console-chat {
  padding:35px 42px;
  gap:23px
}
.message-user {
  font-size:13px;
  border-radius:3px 3px 0 3px
}
.message-agent h3 {
  font-size:23px
}
.message-agent>p {
  font-size:13px;
  max-width:670px
}
.task-chips span {
  border-radius:0;
  position:relative;
  overflow:hidden;
  font-size:10px;
  padding:5px 13px
}
.task-chips span:after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  height:2px;
  width:100%;
  background:#8ae5d8;
  transform:scaleX(0);
  transform-origin:left;
  animation:task-highlight 9.6s linear infinite
}
.task-chips span:nth-child(2):after {
  animation-delay:2.4s
}
.task-chips span:nth-child(3):after {
  animation-delay:4.8s
}
.task-chips span:nth-child(4):after {
  animation-delay:7.2s
}
.deliverable {
  border-left:3px solid #8ae5d8;
  position:relative;
  overflow:hidden;
  animation:output-glow 9.6s ease-in-out infinite
}
.deliverable:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 35%,#8ae5d818 50%,transparent 65%);
  transform:translateX(-100%);
  animation:output-sheen 9.6s ease-in-out infinite;
  pointer-events:none
}
.deliverable strong {
  font-size:14px
}
.deliverable small {
  font-size:11px
}
.steps {
  gap:45px
}
.steps span {
  font-family:var(--heading);
  font-size:11px;
  color:var(--accent)
}
.steps h3 {
  font-size:21px
}
.steps p {
  font-size:14px
}
.outcomes {
  background:#e8e2d6
}
.use-tabs strong {
  font-family:var(--heading);
  font-size:22px
}
.use-tabs small {
  font-size:13px
}
.use-panel {
  background:#f9f6ef;
  border:0;
  border-top:4px solid var(--bright);
  padding:35px;
  border-radius:0;
  animation:panel-in .35s both
}
.use-panel h3 {
  font-weight:500;
  font-size:32px;
  letter-spacing:-.04em
}
.use-panel>p {
  font-size:14px
}
.output-preview {
  background:#eae4d9;
  border-radius:0
}
.output-preview>p {
  font-size:23px;
  letter-spacing:-.03em
}
.output-preview li {
  font-size:12px
}
.workflow-link {
  display:block;
  font-size:12px;
  color:var(--accent);
  margin:0 0 12px;
  text-decoration:underline;
  text-underline-offset:4px
}
.output-art {
  display:block;
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  margin-top:15px
}
.art-caption {
  font-size:9px;
  margin-top:8px
}
.workforce-visual {
  position:relative;
  padding:38px;
  background:#26c9b8;
  border:0;
  transform:rotate(2deg);
  color:#24221c
}
.workforce-center {
  color:#24221c;
  align-items:flex-start;
  flex-direction:row;
  gap:20px
}
.workforce-center>svg {
  width:64px;
  height:62px
}
.workforce-center span {
  font-size:10px;
  font-weight:500
}
.division-grid {
  margin-top:35px;
  gap:0;
  border-top:1px solid #25241f55
}
.division-grid span {
  border:0;
  border-bottom:1px solid #25241f55;
  border-radius:0;
  background:transparent;
  padding:15px 0;
  color:#25241f;
  font-size:13px
}
.division-grid span:last-child {
  color:#25241f
}
.workforce-meta {
  color:#25241f;
  font-size:10px;
  margin-top:25px
}
.division-grid span {
  transition:padding .3s,background .3s
}
.division-grid span:hover {
  background:#5ce0cf;
  padding-left:8px
}
.platform-teaser .lede,.split .lede {
  font-size:16px
}
.control {
  --text:#f4f1e9;
  --muted:#c9c5ba;
  --accent:#8ae5d8;
  --line:#5a564d;
  color:var(--text)
}
.control .eyebrow {
  color:var(--muted)
}
.feature-icon {
  font-size:34px;
  color:var(--accent);
  font-family:var(--heading)
}
.control-grid p,.growth-grid p {
  font-size:14px
}
.faq-layout {
  gap:85px
}
.faq-layout>div>p,details p {
  font-size:14px
}
summary {
  font-size:16px
}
.final-cta {
  max-width:none;
  --accent:#25241f;
  --muted:#153b34;
  --line:#188477;
  color:#25241f;
  background:#26c9b8;
  padding-block:65px 80px
}
.final-cta h2 {
  max-width:880px;
  margin:20px auto 0;
  font-size:clamp(43px,5.6vw,80px);
  font-weight:500
}
.final-cta .button {
  background:#25241f;
  color:#f4f1e9;
  border-color:#25241f
}
.final-cta .button:hover {
  box-shadow:4px 4px 0 #f4f1e9
}
.cta-star {
  display:flex;
  align-items:center;
  justify-content:center;
  width:60px;
  height:60px;
  margin:0 auto 20px;
  border:1px solid #25241f;
  border-radius:50%;
  font-size:40px;
  color:#25241f;
  animation:cta-nudge 4s ease-in-out infinite
}
.footer {
  padding-block:50px 30px
}
.footer>p,.footer nav {
  font-size:12px
}
.feature-hero {
  position:relative;
  padding-block:65px;
  overflow:hidden
}
.feature-hero h1 {
  max-width:960px;
  font-size:clamp(55px,7.2vw,98px);
  font-weight:500;
  letter-spacing:-.06em;
  line-height:1
}
.feature-hero .lede {
  max-width:620px
}
.feature-index {
  gap:30px
}
.feature-index a {
  font-size:11px
}
.feature-pair article {
  padding-top:28px
}
.feature-pair h3 {
  font-family:var(--heading);
  font-size:24px;
  font-weight:500
}
.feature-pair p {
  font-size:14px
}
.feature-pair p a {
  text-decoration:underline;
  text-underline-offset:3px
}
.tinted {
  background:#e8e2d6
}
.creation-card {
  background:#f9f6ef;
  border:0;
  border-top:4px solid #26c9b8;
  border-radius:0
}
.creation-card:nth-child(2) {
  border-color:#354ecc
}
.creation-card h3 {
  font-size:32px;
  font-weight:500;
  letter-spacing:-.04em
}
.creation-card>p {
  font-size:14px
}
.editor-preview,.tracker-preview {
  border-radius:0;
  background:#f4f1e9
}
.editor-preview blockquote {
  font-weight:500
}
.editor-preview .output-art {
  margin:0;
  aspect-ratio:2.6
}
.tracker-preview p {
  font-size:11px
}
.tracker-preview .pill {
  font-size:9px;
  color:#263ea7;
  border:1px solid #b8bfd9
}
.collab-preview {
  border:0;
  border-top:4px solid #354ecc;
  background:#f9f6ef
}
.collab-preview h3 {
  font-weight:500;
  letter-spacing:-.05em
}
.collab-message {
  background:#e1e5fa
}
.collab-message>span {
  color:#3044a0
}
.collab-message.guest {
  background:#e9e2d6
}
.collab-file {
  border-radius:0;
  border-color:#9b9586;
  color:#25241f
}
.aurora-controls {
  background:#dedfe8;
  border-block:1px solid #c0c2d0
}
.settings-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:#b8bac6;
  border:1px solid #b8bac6
}
.setting-card {
  background:#f5f4f0;
  padding:30px;
  display:flex;
  flex-direction:column
}
.setting-number {
  font-size:9px;
  letter-spacing:.12em;
  color:#5e6175;
  margin-bottom:34px
}
.setting-card h3 {
  font-family:var(--heading);
  font-size:28px;
  font-weight:500;
  letter-spacing:-.045em
}
.setting-card>p {
  font-size:14px;
  margin-top:16px
}
.setting-options {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-block:28px 22px;
  border:1px solid #b5b5bd
}
.setting-options button {
  border:0;
  border-right:1px solid #b5b5bd;
  background:transparent;
  font-size:11px;
  padding:9px 3px;
  color:#494954
}
.setting-options button:last-child {
  border:0
}
.setting-options button[aria-pressed=true] {
  background:#354ecc;
  color:white
}
.setting-options button:hover {
  background:#d8dcef;
  color:#1a276b
}
.setting-detail {
  border-left:2px solid #354ecc;
  padding-left:15px;
  min-height:135px
}
.setting-detail strong {
  font-size:13px;
  font-weight:500;
  color:#263da4
}
.setting-detail p {
  font-size:13px;
  margin-top:9px;
  color:#55545d
}
.setting-card>small {
  display:block;
  color:#686570;
  font-size:10px;
  line-height:1.7;
  margin-top:auto;
  padding-top:25px
}
.model-card {
  background:#303c8c;
  color:#f7f5ef
}
.model-card .setting-number {
  color:#c9ceef
}
.model-card>p,.model-card>small {
  color:#d5daf5
}
.model-list {
  margin-top:25px;
  border-top:1px solid #7e88bf
}
.model-list>span {
  display:block;
  font-family:var(--heading);
  font-size:19px;
  border-bottom:1px solid #7e88bf;
  padding-block:7px
}
.model-list i {
  float:right;
  font-style:normal;
  color:#b2bdf9
}
.settings-foot {
  display:flex;
  gap:30px;
  justify-content:space-between;
  align-items:center;
  margin-top:25px
}
.settings-foot>span {
  font-size:10px;
  color:#555763
}
.settings-foot .text-link {
  font-size:12px;
  color:#293a92
}
.settings-explained .feature-pair {
  row-gap:45px
}
.settings-explained p {
  max-width:none
}
.setting-detail.is-changing {
  animation:panel-in .3s both
}
dialog {
  background:#f4f1e9;
  border-radius:3px;
  box-shadow:10px 10px 0 #26c9b8
}
dialog h2 {
  font-weight:500;
  letter-spacing:-.055em;
  font-size:43px
}
dialog>p {
  font-size:14px
}
label {
  font-size:12px
}
.form-row {
  grid-template-columns:1fr
}
input,textarea {
  background:#fcfaf5;
  border-radius:0;
  border-color:#aaa293;
  font-size:14px
}
input:focus,textarea:focus {
  outline:2px solid #354ecc;
  outline-offset:2px
}
.dialog-close {
  color:#25241f
}
.form-note.success {
  color:#285326
}
.form-note.error {
  color:#0c6b64
}
.feature-hero {
  animation:rise-in .8s both
}
.reveal-ready {
  opacity:.15;
  transform:translateY(24px);
  transition:opacity .75s,transform .75s
}
.reveal-ready.is-visible {
  opacity:1;
  transform:none
}
.motion-paused *,.motion-paused *:before,.motion-paused *:after,.scene-asleep *,.scene-asleep *:before,.scene-asleep *:after {
  animation-play-state:paused!important
}
.motion-paused .reveal-ready {
  opacity:1;
  transform:none
}
.recipe {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:75px;
  border-top:1px solid var(--line)
}
.recipe h2 {
  margin-top:20px
}
.recipe .lede {
  font-size:16px;
  margin-top:24px
}
.recipe-body h3 {
  font-family:var(--heading);
  font-weight:500;
  font-size:24px;
  margin-block:25px 12px
}
.recipe-body h3:first-child {
  margin-top:0
}
.recipe-body p,.recipe-body li {
  font-size:15px;
  color:var(--muted)
}
.recipe-body ol {
  padding-left:22px
}
.recipe-body li {
  margin-block:12px;
  padding-left:8px
}
.brief-example {
  padding:26px;
  background:#e8e2d6;
  border-left:3px solid #26c9b8;
  margin:25px 0
}
.brief-example>span {
  font-size:9px;
  letter-spacing:.1em
}
.brief-example p {
  font-family:var(--heading);
  font-size:21px;
  letter-spacing:-.03em;
  color:var(--text);
  line-height:1.5;
  margin-top:12px
}
.recipe .actions {
  margin-top:20px
}
.demo-promise {
  max-width:800px;
  margin:0 auto 25px;
  display:flex;
  gap:25px;
  justify-content:center;
  flex-wrap:wrap;
  font-size:12px
}
.demo-promise span:before {
  content:'✓';
  margin-right:8px
}
@keyframes work-flow {
  to {
    stroke-dashoffset:-32
  }
}
@keyframes machine-drift {
  0%,100% {
    transform:translateY(0) rotate(-2deg)
  }
  50% {
    transform:translateY(-10px) rotate(1deg)
  }
}
@keyframes ticket-float {
  0%,100% {
    transform:rotate(-8deg) translateY(0)
  }
  50% {
    transform:rotate(-5deg) translateY(-8px)
  }
}
@keyframes equalizer {
  50% {
    transform:scaleY(.35)
  }
}
@keyframes marquee {
  to {
    transform:translateX(-50%)
  }
}
@keyframes rise-in {
  from {
    opacity:0;
    transform:translateY(22px)
  }
  to {
    opacity:1;
    transform:none
  }
}
@keyframes panel-in {
  from {
    opacity:.4;
    transform:translateY(7px)
  }
  to {
    opacity:1;
    transform:none
  }
}
@keyframes cta-nudge {
  45%,55% {
    transform:translate(3px,-3px)
  }
}
@keyframes task-highlight {
  0%,5% {
    transform:scaleX(0)
  }
  20%,90% {
    transform:scaleX(1)
  }
  100% {
    transform:scaleX(0)
  }
}
@keyframes output-glow {
  70%,90% {
    background:#444038;
    border-left-color:#b7f8ee
  }
  0%,55%,100% {
    background:#302e29
  }
}
@keyframes output-sheen {
  0%,70% {
    transform:translateX(-100%)
  }
  95%,100% {
    transform:translateX(100%)
  }
}
@media(min-width:1450px) {
  .container {
    max-width:1440px
  }
  .hero {
    min-height:780px
  }
  .hero h1 {
    font-size:112px
  }
}
@media(max-width:1100px) {
  .hero {
    gap:35px;
    min-height:645px
  }
  .hero h1 {
    font-size:79px
  }
  .hero .lede {
    font-size:16px
  }
  .hero .actions {
    gap:18px
  }
  .brief-ticket strong {
    font-size:21px
  }
  .dispatch-label {
    width:120px;
    padding:12px 15px
  }
  .dispatch-label strong {
    font-size:34px
  }
  .result-ticket strong {
    font-size:22px
  }
  .result-ticket>div {
    font-size:7px
  }
  .brief-ticket,.result-ticket {
    padding:15px
  }
  .setting-card {
    padding:24px
  }
  .setting-card h3 {
    font-size:25px
  }
  .setting-detail {
    min-height:165px
  }
  .fact-strip strong {
    font-size:43px
  }
  .console-chat {
    padding:28px
  }
  .recipe {
    gap:40px
  }
}
@media(max-width:800px) {
  .nav {
    min-height:73px
  }
  .hero {
    grid-template-columns:1fr 1fr;
    min-height:580px;
    gap:22px
  }
  .hero h1 {
    font-size:60px
  }
  .hero .lede {
    font-size:15px
  }
  .hero .eyebrow {
    font-size:8px
  }
  .hero .actions {
    gap:12px
  }
  .hero .button {
    font-size:11px;
    padding:13px 15px
  }
  .hero .text-link {
    font-size:11px
  }
  .hero .micro {
    font-size:10px
  }
  .study-top {
    font-size:7px
  }
  .study-bottom ol {
    gap:8px
  }
  .study-bottom li {
    font-size:8px
  }
  .study-caption {
    font-size:7px
  }
  .brief-ticket {
    left:-1%;
    padding:12px
  }
  .brief-ticket strong {
    font-size:17px
  }
  .brief-ticket>i {
    font-size:6px
  }
  .brief-ticket span,.result-ticket>span {
    font-size:6px;
    padding-bottom:7px;
    margin-bottom:7px
  }
  .dispatch-label {
    width:98px
  }
  .dispatch-label strong {
    font-size:27px
  }
  .dispatch-label>span {
    font-size:6px
  }
  .result-ticket {
    padding:12px
  }
  .result-ticket strong {
    font-size:19px
  }
  .result-ticket>div {
    font-size:6px
  }
  .engine-coordinate {
    font-size:6px
  }
  .fact-strip strong {
    font-size:34px
  }
  .fact-strip span {
    font-size:9px
  }
  .section {
    padding-block:75px
  }
  .section-heading>p {
    max-width:560px
  }
  .settings-grid {
    grid-template-columns:1fr 1fr
  }
  .model-card {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 35px
  }
  .model-card .setting-number {
    grid-column:1/-1;
    margin-bottom:20px
  }
  .model-card .model-list {
    grid-column:2;
    grid-row:2/5;
    margin:0
  }
  .model-card>p {
    font-size:13px
  }
  .model-card>small {
    padding-top:15px
  }
  .setting-detail {
    min-height:145px
  }
  .settings-foot {
    align-items:flex-start
  }
  .workforce-visual {
    max-width:600px;
    transform:rotate(1deg)
  }
  .split .motion-study {
    max-width:500px;
    margin:auto
  }
  .recipe {
    grid-template-columns:1fr;
    gap:35px
  }
  .recipe>div:first-child {
    max-width:580px
  }
  .feature-hero h1 {
    font-size:68px
  }
}
@media(max-width:600px) {
  .hero {
    grid-template-columns:1fr;
    padding-top:38px;
    padding-bottom:36px;
    gap:42px
  }
  .hero h1 {
    font-size:clamp(53px,15.2vw,82px);
    margin-top:20px
  }
  .hero .eyebrow {
    font-size:9px
  }
  .hero .lede {
    font-size:16px;
    max-width:390px
  }
  .hero .actions {
    gap:24px
  }
  .hero .button {
    font-size:12px;
    padding:14px 18px
  }
  .hero .text-link {
    font-size:12px
  }
  .hero .micro {
    font-size:10px
  }
  .motion-study {
    max-width:430px;
    margin:auto
  }
  .study-top {
    font-size:8px
  }
  .brief-ticket strong {
    font-size:21px
  }
  .brief-ticket>i {
    font-size:7px
  }
  .brief-ticket {
    padding:16px;
    left:0
  }
  .result-ticket {
    padding:16px
  }
  .result-ticket strong {
    font-size:23px
  }
  .result-ticket>div {
    font-size:7px
  }
  .dispatch-label {
    width:120px;
    padding:13px 17px
  }
  .dispatch-label strong {
    font-size:34px
  }
  .dispatch-label>span {
    font-size:7px
  }
  .study-bottom li {
    font-size:9px
  }
  .study-caption {
    font-size:8px
  }
  .engine-coordinate {
    font-size:7px
  }
  .fact-strip {
    grid-template-columns:1fr 1fr;
    gap:23px;
    padding-block:25px
  }
  .fact-strip strong {
    font-size:39px
  }
  .fact-strip span {
    font-size:10px
  }
  .motion-strip {
    margin-top:23px
  }
  .motion-strip span {
    width:215px;
    font-size:10px
  }
  .section {
    padding-block:60px
  }
  h2 {
    font-size:39px;
    letter-spacing:-.055em
  }
  .section-heading>p {
    font-size:14px
  }
  .console-chat {
    padding:22px 18px
  }
  .message-agent h3 {
    font-size:21px
  }
  .message-agent>p {
    font-size:12px
  }
  .message-user {
    font-size:12px
  }
  .deliverable strong {
    font-size:12px
  }
  .deliverable small {
    font-size:9px
  }
  .task-chips span {
    font-size:9px;
    padding:5px 9px
  }
  .console-top {
    font-size:7px
  }
  .example-tag {
    font-size:6px
  }
  .steps {
    gap:25px
  }
  .steps p {
    font-size:14px
  }
  .use-tabs strong {
    font-size:20px
  }
  .use-tabs small {
    font-size:12px
  }
  .use-panel {
    padding:27px
  }
  .use-panel h3 {
    font-size:31px
  }
  .output-preview>p {
    font-size:21px
  }
  .workforce-visual {
    padding:28px;
    transform:none
  }
  .workforce-center>svg {
    width:48px;
    height:48px
  }
  .division-grid span {
    font-size:12px
  }
  .settings-grid {
    grid-template-columns:1fr
  }
  .setting-card {
    padding:27px
  }
  .setting-number {
    margin-bottom:22px
  }
  .setting-card h3 {
    font-size:30px
  }
  .setting-detail {
    min-height:0;
    padding-bottom:5px
  }
  .setting-card>small {
    padding-top:23px;
    font-size:11px
  }
  .setting-options button {
    font-size:12px;
    padding-block:11px
  }
  .model-card {
    display:flex;
    grid-column:auto
  }
  .model-card .model-list {
    margin-top:25px
  }
  .model-card>p {
    font-size:14px
  }
  .settings-foot {
    flex-direction:column;
    gap:12px
  }
  .settings-foot>span {
    font-size:10px
  }
  .settings-foot .text-link {
    font-size:12px
  }
  .settings-explained .feature-pair {
    gap:30px
  }
  .final-cta h2 {
    font-size:43px
  }
  .final-cta {
    padding-block:55px
  }
  .final-cta p {
    font-size:15px
  }
  .final-cta .eyebrow {
    font-size:9px
  }
  .footer {
    grid-template-columns:1fr
  }
  .footer nav {
    grid-column:1;
    grid-row:auto
  }
  .footer>.brand {
    font-size:25px
  }
  .footer>p {
    grid-column:1
  }
  .feature-hero h1 {
    font-size:clamp(48px,12.5vw,69px)
  }
  .feature-hero {
    padding-block:48px
  }
  .feature-index {
    gap:14px 20px
  }
  .feature-index a {
    font-size:10px
  }
  .creation-card h3 {
    font-size:31px
  }
  .editor-preview blockquote {
    font-size:33px
  }
  .recipe-body h3 {
    font-size:23px
  }
  .demo-promise {
    gap:10px 20px;
    max-width:300px
  }
  .reveal-ready {
    transform:translateY(14px)
  }
  dialog h2 {
    font-size:39px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .reveal-ready {
    opacity:1;
    transform:none
  }
  .motion-toggle {
    display:none
  }
  .hero-art {
    transform:none
  }
}
/* Bring the response and the resulting artifact into focus. */
.response-highlight {
  background:linear-gradient(#83ddcf35,#83ddcf35) left bottom / 0% 90% no-repeat;
  animation:response-ink 9.6s ease-in-out infinite;
  padding:2px 0;
  color:#f3e6dc
}
.response-highlight:nth-child(2) {
  animation-delay:2.4s
}
.response-highlight:nth-child(3) {
  animation-delay:4.8s
}
.output-spread {
  background:#f3efe5;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  color:#25241f;
  overflow:hidden;
  border:1px solid #706a5e;
  box-shadow:5px 5px 0 #0b0b0b30;
  animation:artifact-lift 9.6s ease-in-out infinite
}
.output-spread>img {
  width:100%;
  height:100%;
  min-height:280px;
  object-fit:cover
}
.output-spread>div {
  padding:27px
}
.output-spread small {
  font-size:8px;
  letter-spacing:.11em;
  color:#625f56
}
.output-spread h4 {
  font:500 30px/1.06 var(--heading);
  letter-spacing:-.05em;
  margin:18px 0 12px;
  text-wrap:balance
}
.output-spread p {
  font-size:11px;
  line-height:1.6;
  color:#625f56
}
.output-spread ul {
  list-style:none;
  padding:0;
  margin:18px 0 0;
  font-size:10px
}
.output-spread li {
  border-top:1px solid #d1cabd;
  padding:5px 0
}
.output-spread li span {
  color:#0c6b64;
  margin-right:12px
}
.footer-motion {
  float:right;
  margin-top:-7px;
  color:var(--text)
}
.output-preview .art-caption {
  font:9px/1.5 var(--body);
  color:var(--muted);
  margin-top:7px
}
.recipe .output-art {
  margin-top:30px
}
.study-caption {
  letter-spacing:.015em
}
@keyframes response-ink {
  0%,10% {
    background-size:0% 90%
  }
  25%,75% {
    background-size:100% 90%
  }
  100% {
    background-size:0% 90%
  }
}
@keyframes artifact-lift {
  75%,92% {
    box-shadow:6px 6px 0 #26c9b8;
    transform:translateY(-3px)
  }
  0%,60%,100% {
    box-shadow:5px 5px 0 #0b0b0b30;
    transform:none
  }
}
@media(max-width:800px) {
  .output-spread>div {
    padding:20px
  }
  .output-spread h4 {
    font-size:25px
  }
  .output-spread>img {
    min-height:260px
  }
}
@media(max-width:600px) {
  .output-spread {
    grid-template-columns:1fr
  }
  .output-spread>img {
    min-height:0;
    aspect-ratio:2;
    object-fit:cover
  }
  .output-spread>div {
    padding:23px
  }
  .output-spread h4 {
    font-size:29px
  }
  .output-spread p {
    font-size:12px
  }
  .output-spread li {
    font-size:11px
  }
  .response-highlight {
    line-height:1.9
  }
}
/* Dark edition: warm charcoal with teal editorial artwork. */
:root {
  --bg:#181817;
  --deep:#111110;
  --surface:#222220;
  --raised:#30302c;
  --text:#f4f1e9;
  --muted:#b8b5ac;
  --accent:#8ae5d8;
  --bright:#26c9b8;
  --line:#45443e
}
body {
  background:var(--bg)
}
.site-header {
  background:rgba(24,24,23,.96)
}
.hero h1 em {
  color:#35d6c2
}
.button {
  background:#35d6c2;
  border-color:#35d6c2;
  color:#211f1b
}
.button:hover {
  background:#5ce0cf;
  box-shadow:4px 4px 0 #f4f1e9
}
.brand-mark {
  color:#35d6c2
}
.engine-stage {
  background:#f4f1e9;
  border-radius:3px;
  margin-block:18px;
  overflow:visible
}
.hero-art {
  mix-blend-mode:normal;
  border-radius:3px
}
.brief-ticket {
  color:#25241f;
  --muted:#625f56
}
.engine-coordinate {
  color:#655e52;
  left:13px;
  bottom:3%
}
.motion-toggle:hover {
  background:#393832
}
.fact-strip {
  border-color:#45443e
}
.motion-strip {
  color:#bcb7ab
}
.outcomes,.tinted {
  background:#22221f
}
.use-tabs button[aria-selected="true"] {
  background:#31302b
}
.use-tabs button:hover {
  color:#f4f1e9
}
.use-panel {
  --text:#25241f;
  --muted:#625f56;
  --accent:#0c6b64;
  --line:#d1cabd;
  color:#25241f;
  background:#f4f1e9
}
.use-panel .eyebrow {
  color:#25241f
}
.use-panel .output-preview {
  background:#e6dfd3
}
.use-panel .text-link {
  color:#0c6b64
}
.use-tabs button[aria-selected="true"]:before {
  background:#35d6c2
}
.control {
  background:#101010
}
.workforce-visual {
  background:#26c9b8
}
.workforce-visual .division-grid span {
  border-color:#25241f55
}
.workforce-center span {
  color:#25241f
}
.aurora-controls {
  background:#1c2030;
  border-color:#393e50
}
.settings-grid {
  border-color:#4a4d58;
  background:#4a4d58
}
.setting-card {
  background:#252936;
  color:#f4f1e9
}
.setting-number {
  color:#b8bed3
}
.setting-card>p,.setting-card>small {
  color:#bfc3cf
}
.setting-options {
  border-color:#616778
}
.setting-options button {
  color:#e1e3ec;
  border-color:#616778
}
.setting-options button[aria-pressed=true] {
  background:#7d91ff;
  color:#101633
}
.setting-options button:hover {
  background:#a6b2f3;
  color:#101633
}
.setting-detail {
  border-color:#9baaff
}
.setting-detail strong {
  color:#b0bdff
}
.setting-detail p {
  color:#c9cdd9
}
.model-card {
  background:#3549b4
}
.model-card .setting-number,.model-card>p,.model-card>small {
  color:#e0e5ff
}
.model-list>span {
  border-color:#8997da
}
.model-list {
  border-color:#8997da
}
.model-list i {
  color:#c2ccff
}
.settings-foot>span {
  color:#bbc2d8
}
.settings-foot .text-link {
  color:#c6cfff
}
.creation-card {
  --text:#25241f;
  --muted:#625f56;
  --accent:#0c6b64;
  --line:#cfc6b7;
  --bg:#f4f1e9;
  color:#25241f;
  background:#f4f1e9
}
.creation-card .eyebrow {
  color:#25241f
}
.tracker-preview>div>span {
  color:#625f56
}
.collab-preview {
  --text:#25241f;
  --muted:#625f56;
  --accent:#0c6b64;
  --line:#c8c0b3;
  color:#25241f;
  background:#f4f1e9
}
.collab-preview .eyebrow {
  color:#25241f
}
.collab-message p {
  color:#25241f
}
.collab-file {
  border-color:#a39b8d;
  color:#25241f
}
.recipe-body .brief-example {
  --text:#f4f1e9;
  --muted:#c6bfb0;
  background:#30302b;
  border-color:#35d6c2
}
.brief-example>span {
  color:#d3c9b8
}
.recipe .output-art {
  border:1px solid #607c79
}
.final-cta {
  background:#26c9b8;
  color:#25241f;
  --text:#25241f;
  --accent:#25241f;
  --muted:#153b34
}
.final-cta .eyebrow {
  color:#25241f
}
.final-cta .button {
  background:#25241f;
  color:#f4f1e9;
  border-color:#25241f
}
.footer a:hover {
  color:#8ae5d8
}
dialog {
  background:#222220;
  color:#f4f1e9;
  border-color:#656158;
  box-shadow:8px 8px 0 #26c9b8
}
.dialog-close {
  color:#f4f1e9
}
input,textarea {
  color:#f4f1e9;
  background:#171716;
  border-color:#69665d
}
input::placeholder,textarea::placeholder {
  color:#a29d92
}
input:focus,textarea:focus {
  outline-color:#9cabff
}
.form-note.success {
  color:#a8dba2
}
.form-note.error {
  color:#ffb09a
}
.skip {
  color:#181817
}
.output-spread h4 {
  color:#25241f
}
.menu-toggle {
  border-color:#656158
}
.feature-pair p a {
  color:#8ae5d8
}
.section-heading>p {
  color:var(--muted)
}
@media(max-width:600px) {
  .engine-stage {
    margin-block:15px
  }
  .hero {
    gap:34px
  }
  .brief-ticket {
    left:1%
  }
  .result-ticket {
    right:1%
  }
  .dispatch-label {
    right:2%;
    top:4%
  }
}
.motion-paused .hero-copy,.motion-paused .hero .motion-study,.motion-paused .hero-copy .lede,.motion-paused .feature-hero {
  animation:none;
  opacity:1;
  transform:none
}
@media(min-width:801px){
  .hero{padding-block:36px 45px;min-height:640px}
  .hero .engine-stage{aspect-ratio:1.15}
}

/* Webb: a guided brief, an illustrative page, and the controls available today. */
.webb-callout{display:flex;align-items:center;justify-content:space-between;gap:36px;padding-block:52px;border-block:1px solid var(--line)}
.webb-callout h2{font-size:clamp(32px,3.6vw,52px);margin:16px 0}
.webb-callout p{max-width:620px;color:var(--muted)}
.webb-callout>.button{flex-shrink:0}
.webb-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,76px);align-items:start}
.webb-process article{display:flex;gap:20px;margin-bottom:30px}
.webb-process article>span{font-family:var(--heading);color:#8ae5d8;font-size:16px;padding-top:4px}
.webb-process h3{font-size:23px;margin-bottom:8px}
.webb-process p{color:var(--muted);max-width:490px}
.webb-study{background:#252724;border:1px solid #525950;padding:22px;box-shadow:8px 8px 0 #0c6b64;transform:rotate(1deg)}
.webb-study-top{display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:.12em;color:#d3d8ce}
.webb-direction{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0}
.webb-direction span{font-size:11px;padding:4px 9px;border:1px solid #667267;color:#bcdfd4}
.webb-paper{padding:28px;background:#f4f1e9;color:#25241f;position:relative;overflow:hidden}
.webb-paper-label{font-size:10px;letter-spacing:.15em;color:#0c6b64;font-weight:600}
.webb-paper h3{font:500 clamp(29px,3vw,42px)/1.06 var(--heading);letter-spacing:-.05em;margin:20px 0;color:#25241f}
.webb-paper h3 em{color:#0c6b64;font-style:normal}
.webb-paper p{font-size:13px;color:#625f56;max-width:210px}
.webb-paper-cta{display:inline-flex;gap:25px;background:#0c6b64;color:#fff;padding:8px 14px;font-size:12px;margin-top:20px}
.webb-paper-lines{display:flex;gap:8px;margin-top:28px}
.webb-paper-lines i{height:8px;background:#d4ded5;flex:1;transform-origin:left;animation:webbLine 5s ease-in-out infinite}
.webb-paper-lines i:nth-child(2){animation-delay:.4s}.webb-paper-lines i:nth-child(3){animation-delay:.8s}
.webb-revision{font-size:13px;margin-top:20px;color:#8ae5d8}
.webb-options{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:55px;border-top:1px solid var(--line)}
.webb-options>div{padding:24px 24px 24px 0;border-bottom:1px solid var(--line)}
.webb-options h3{font-size:19px;margin-bottom:7px}.webb-options p{color:var(--muted);font-size:14px}
.webb-scope{font-size:13px;color:var(--muted);margin-top:22px;max-width:900px}
@keyframes webbLine{0%,100%{transform:scaleX(.82)}50%{transform:scaleX(1)}}
.motion-paused .webb-paper-lines i{animation-play-state:paused}
@media(max-width:800px){.webb-callout{align-items:flex-start;flex-direction:column}.webb-layout{grid-template-columns:1fr}.webb-options{grid-template-columns:repeat(2,1fr)}.webb-study{transform:none;margin-right:8px}}
@media(max-width:420px){.webb-study{padding:15px}.webb-paper{padding:23px}.webb-options{grid-template-columns:1fr}.webb-options>div{padding:18px 0}}
@media(prefers-reduced-motion:reduce){.webb-paper-lines i{animation:none}}

/* Photographs of the real interface, with motion around the capture. */
.capture-card{margin:0;background:#111817;border:1px solid #435d56;border-radius:14px;overflow:hidden;box-shadow:0 22px 65px #0003;min-width:0}
.capture-heading{display:flex;justify-content:space-between;gap:12px;padding:16px 20px;font:500 10px/1.4 var(--heading);letter-spacing:.12em;color:#b8d3ca;border-bottom:1px solid #34473f}
.capture-heading>span:last-child{color:#8ae5d8;white-space:nowrap}
.capture-link{position:relative;display:block;overflow:hidden;background:#08121a;isolation:isolate}
.capture-stage{position:relative;transform-origin:50% 50%;animation:captureBreathe 12s ease-in-out infinite}
.capture-stage img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:contain}
.capture-focus{position:absolute;left:20.7%;top:32.5%;width:42.8%;height:30%;border:2px solid #58e0cc;border-radius:10px;box-shadow:0 0 24px #35d6c22e;animation:captureFocus 5s ease-in-out infinite;pointer-events:none}
.capture-expand{position:absolute;right:14px;bottom:14px;padding:7px 12px;background:#112e27ed;border:1px solid #68bfa8;color:#d8fff4;font-size:11px;border-radius:30px;box-shadow:0 3px 16px #0008}
.capture-link:hover .capture-expand{background:#26c9b8;color:#08261f}
.capture-card figcaption{color:#b8c4bd;font-size:12px;line-height:1.5;padding:15px 20px}
.capture-choices{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 16px}
.capture-choices>button{font-size:11px;line-height:1.4;background:#202d26;color:#c7d7cc;border:1px solid #4c6858;border-radius:5px;padding:8px 10px}
.capture-choices>button[aria-pressed="true"]{background:#26c9b8;border-color:#26c9b8;color:#08261f}
.capture-choices>.motion-toggle{margin-left:auto;min-width:32px;min-height:32px}
.hero-capture{align-self:center;position:relative;box-shadow:12px 12px 0 #0d4942,0 35px 70px #0005;transform:rotate(-1deg)}
.hero .hero-capture{width:100%;margin-right:12px}
.response-capture{max-width:1120px;margin-inline:auto}
.controls-capture{max-width:900px;margin:0 auto 42px}
.creation-card .capture-card{margin:25px 0;background:#111817}
.creation-card .capture-card figcaption{color:#b8c4bd}
.use-panel .capture-card{margin:15px 0}
.webb-layout>.capture-card{align-self:center}
.recipe .capture-card{margin:24px 0}
#screenshot-dialog{width:min(1420px,96vw);max-width:96vw;max-height:96dvh;padding:16px;background:#101411;color:#f4f1e9;box-shadow:0 24px 90px #000b;border:1px solid #426958;border-radius:12px;overflow:auto}
#screenshot-dialog::backdrop{background:#060c0bea;backdrop-filter:blur(6px)}
.screenshot-dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:12px}
#screenshot-title{font:500 16px/1.4 var(--heading);letter-spacing:0}
.screenshot-close{color:#baffeb;background:#183c2f;border:1px solid #527962;padding:9px 14px;border-radius:6px}
#screenshot-image{display:block;width:100%;height:auto;border-radius:6px}
#screenshot-caption{font-size:13px;color:#c2c8c0;margin-top:12px}
@keyframes captureBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
@keyframes captureFocus{0%,100%{opacity:.35}45%,65%{opacity:1}}
.motion-paused .capture-stage,.motion-paused .capture-focus,.capture-card.scene-asleep .capture-stage,.capture-card.scene-asleep .capture-focus{animation-play-state:paused}
@media(min-width:801px){.hero{grid-template-columns:.9fr 1.1fr;gap:36px}.hero h1{font-size:clamp(58px,6.4vw,96px)}}
@media(max-width:800px){.hero{grid-template-columns:1fr;gap:34px;min-height:auto}.hero-capture{transform:none}.hero .hero-capture{width:calc(100% - 12px)}.capture-heading{padding:12px 14px;letter-spacing:.07em}.capture-card figcaption{padding:12px 14px}.capture-expand{right:8px;bottom:8px;font-size:10px;padding:5px 9px}}
@media(prefers-reduced-motion:reduce){.capture-stage,.capture-focus{animation:none!important}}