:root {
  --paper:#f4f2eb;
  --ink:#20211e;
  --orange:#ff5b2c;
  --muted:#65655e;
  --line:#d7d6cc;
  --dark:#22231f;
  --mono:Consolas,"Courier New",monospace;
  color-scheme:light
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:30px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit
}

button {
  font:inherit;
  cursor:pointer
}

a,button,summary {
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid #2468cc;
  outline-offset:5px
}

::selection {
  background:var(--orange);
  color:var(--ink)
}

.wrap {
  width:min(1240px,calc(100% - 96px));
  margin-inline:auto
}

.nav {
  height:106px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}

.brand {
  display:flex;
  gap:7px;
  align-items:center;
  text-decoration:none;
  font-size:33px;
  letter-spacing:-2px;
  font-weight:800
}

.brand-mark {
  font-size:43px;
  color:var(--orange);
  margin-right:6px;
  /* The mark is an inline SVG sized in em, so the font-size rules above (and
     the narrow-width override further down) still drive it. display:block
     keeps it off the text baseline inside the flex row. */
  display:block;
  flex:0 0 auto
}

.brand-period {
  margin-left:-7px;
  color:var(--orange)
}

.nav nav {
  display:flex;
  align-items:center;
  gap:35px;
  font-size:13px;
  font-weight:600
}

.nav nav a {
  text-decoration:none
}

.nav nav a:hover {
  color:#b1320e
}

.nav-cta {
  border:1px solid var(--ink);
  padding:12px 21px;
  border-radius:5px;
  display:flex;
  gap:26px
}

.hero {
  padding-top:42px
}

.hero-top {
  display:flex;
  align-items:center;
  justify-content:space-between
}

.mono,.eyebrow {
  font:11px/1.5 var(--mono);
  letter-spacing:1px
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:9px
}

.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--orange);
  border-radius:50%;
  flex:none
}

.hero-version {
  color:var(--muted)
}

h1 {
  position:relative;
  font-size:clamp(72px,9.9vw,144px);
  line-height:.98;
  letter-spacing:-.075em;
  font-weight:800;
  margin:43px 0 30px
}

.serif {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-style:italic;
  letter-spacing:-.07em
}

.hero h1 .serif {
  color:var(--orange)
}

.hero-star {
  position:absolute;
  right:7%;
  top:12px;
  color:var(--orange);
  /* The mark is an inline SVG sized in em, so this still drives its scale and
     the narrow-width override below still moves it. The -12deg tilt the
     asterisk carried is gone: a rotated horizon reads as a mistake, not as
     motion. */
  font-size:190px;
  display:block
}

.hero-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:28px 0 55px
}

.hero-bottom p {
  font-size:18px;
  line-height:1.6;
  color:var(--muted);
  max-width:62ch
}

.hero-bottom>div {
  display:flex;
  gap:25px;
  align-items:center;
  flex:none
}

.button {
  display:inline-flex;
  gap:42px;
  align-items:center;
  justify-content:space-between;
  border-radius:4px;
  padding:19px 24px;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  transition:transform .2s,background .2s
}

.button:hover {
  transform:translateY(-3px);
  background:#e84a1c
}

.primary {
  background:var(--orange);
  color:#171815
}

.button span {
  font-size:23px;
  line-height:1
}

.text-link {
  font-size:13px;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding:8px 0
}

.text-link:hover {
  color:#ac330e
}

.demo {
  border:1px solid #383932;
  border-radius:11px;
  background:var(--dark);
  overflow:hidden;
  box-shadow:0 17px 0 -9px #dedcd2,0 32px 55px -32px #2226
}

.browser-bar {
  display:flex;
  align-items:center;
  gap:18px;
  height:45px;
  padding:0 20px;
  color:#c3c3b8;
  font:10px var(--mono)
}

.window-dots {
  display:flex;
  gap:5px
}

.window-dots i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#73746a
}

.window-dots i:first-child {
  background:var(--orange)
}

.browser-tab {
  padding:11px 45px 11px 15px;
  background:#363730;
  border-radius:6px 6px 0 0;
  align-self:end
}

.demo-badge {
  margin-left:auto;
  font-size:9px;
  letter-spacing:1px
}

.address-bar {
  height:42px;
  padding:0 20px;
  display:flex;
  align-items:center;
  gap:25px;
  background:#363730;
  color:#b0b1a5;
  font:12px var(--mono)
}

.address {
  flex:1;
  background:#292a25;
  border-radius:5px;
  padding:6px 13px;
  font-size:10px
}

.demo-content {
  display:grid;
  grid-template-columns:1.13fr 1fr;
  padding:10px;
  gap:10px
}

.demo-page {
  background:#dfe4d3;
  padding:40px;
  border-radius:4px;
  position:relative;
  overflow:hidden
}

.demo-page>.mono {
  font-size:9px
}

.demo-page h2 {
  font-size:clamp(30px,4vw,55px);
  line-height:1.08;
  letter-spacing:-3px;
  margin:35px 0 28px
}

.demo-page h2 em {
  font-family:Georgia,serif;
  font-weight:400
}

.page-bottom {
  display:flex;
  align-items:center;
  gap:25px
}

.abstract-mark {
  font-size:100px;
  line-height:1
}

.page-bottom p {
  font:11px/1.7 var(--mono);
  margin:0
}

.assistant {
  padding:24px;
  background:#faf9f5;
  border-radius:4px;
  display:flex;
  flex-direction:column;
  min-width:0
}

.assistant-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  font-weight:700
}

.local-badge {
  font:9px var(--mono);
  color:#48633d;
  background:#e5ebdd;
  border-radius:3px;
  padding:5px 7px
}

.demo-options {
  display:flex;
  gap:6px;
  margin:25px 0 22px
}

.demo-options button {
  font-size:10px;
  background:transparent;
  border:1px solid #d6d5ce;
  border-radius:20px;
  padding:8px 12px;
  color:#55564d
}

.demo-options button.selected {
  background:var(--ink);
  border-color:var(--ink);
  color:white
}

.user-message {
  background:#edece5;
  border-radius:8px 8px 0 8px;
  padding:14px 16px;
  margin:0 0 22px 22px;
  font-size:12px
}

.agent-message {
  display:flex;
  gap:11px;
  min-height:95px
}

.agent-icon {
  color:var(--orange);
  font-size:26px;
  line-height:1
}

.agent-message .mono {
  font-size:8px;
  color:#717267
}

.agent-message p {
  font-size:12px;
  line-height:1.7;
  margin:8px 0 16px
}

.activity {
  border:1px solid #ddded5;
  border-radius:4px;
  padding:11px;
  display:flex;
  gap:8px;
  align-items:center;
  font:9px var(--mono);
  margin-bottom:22px
}

.activity>span:last-child {
  margin-left:auto
}

.demo-input {
  border:1px solid #d7d8cf;
  border-radius:5px;
  margin-top:auto;
  padding:12px;
  font-size:11px;
  color:#74766c;
  display:flex;
  justify-content:space-between;
  align-items:center
}

.demo-input span {
  background:var(--orange);
  color:var(--ink);
  padding:4px 8px;
  border-radius:3px;
  font-size:16px
}

.demo-disclaimer {
  font-size:9px;
  color:#73756b;
  margin:9px 0 0
}

.hero-caption {
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:9px;
  margin:25px 0 50px
}

.ticker {
  background:var(--orange);
  display:flex;
  justify-content:space-evenly;
  align-items:center;
  gap:20px;
  padding:23px 30px;
  font-weight:800;
  font-size:clamp(12px,1.4vw,19px);
  letter-spacing:-.3px
}

.ticker b {
  font-size:28px;
  font-weight:400
}

.section {
  padding-top:110px;
  padding-bottom:110px
}

.section-heading {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:24px 90px;
  align-items:end;
  margin-bottom:48px
}

.section-heading>.eyebrow {
  grid-column:1/-1
}

.section-heading h2,h2 {
  font-size:clamp(38px,4.5vw,64px);
  line-height:1.05;
  letter-spacing:-.055em;
  margin:0;
  font-weight:750
}

.section-heading p,.section-copy {
  font-size:16px;
  line-height:1.8;
  color:var(--muted);
  max-width:380px;
  margin:0
}

.features {
  display:grid;
  /* Four cards, so they pair up rather than leaving one stranded in a row of
     three. Below 1050px they go single-column with the rest of the layout. */
  grid-template-columns:repeat(2,1fr);
  gap:16px
}

.feature {
  border-radius:5px;
  padding:28px;
  min-width:0
}

.feature-orange {
  background:var(--orange)
}

.feature-light {
  background:#e8e7df
}

.feature-dark {
  background:var(--dark);
  color:var(--paper)
}

.feature-top {
  display:flex;
  align-items:center;
  justify-content:space-between
}

.feature-top .mono {
  font-size:9px
}

.feature-top>span:last-child {
  font-size:23px
}

.feature h3 {
  font-size:29px;
  line-height:1.08;
  letter-spacing:-1px;
  margin:25px 0 18px
}

.feature p {
  font-size:13px;
  line-height:1.85;
  margin:0
}

.feature-dark p {
  color:#bfc0b5
}

.local-art {
  height:175px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:15px
}

.local-art>span {
  writing-mode:vertical-rl;
  font:8px var(--mono);
  letter-spacing:1px
}

.local-art>div {
  border:1px solid #2227;
  border-radius:50%;
  width:112px;
  height:112px;
  display:grid;
  place-items:center;
  font-size:85px;
  outline:1px solid #2223;
  outline-offset:10px
}

.approval-art {
  margin:32px 0 0;
  height:143px;
  border:1px solid #cdcec3;
  background:#f5f4ed;
  border-radius:6px;
  padding:20px 16px;
  box-shadow:0 6px 0 -2px #d6d7cc
}

.approval-art>span {
  font:9px var(--mono);
  color:#68695f
}

.approval-art strong {
  display:block;
  font-size:16px;
  margin:12px 0 20px
}

.approval-art>div {
  display:flex;
  align-items:center;
  gap:10px;
  font:8px var(--mono)
}

.allow {
  background:var(--ink);
  color:white;
  padding:8px;
  border-radius:3px
}

.bridge-art {
  height:175px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  font:12px var(--mono)
}

.bridge-art>span {
  border:1px solid #6a6b5f;
  padding:17px 12px;
  border-radius:6px
}

.bridge-art i {
  font-size:28px;
  color:var(--orange);
  font-style:normal
}

.workflow {
  background:#eae9e1;
  border-block:1px solid var(--line)
}

.workflow-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px
}

.workflow h2 {
  margin:26px 0
}

.workflow .section-copy {
  margin-bottom:25px
}

.steps article {
  display:flex;
  gap:24px;
  border-bottom:1px solid #cecec2;
  padding:26px 0
}

.steps article:first-child {
  padding-top:0
}

.steps article>span {
  color:#72756a;
  font:11px var(--mono);
  padding-top:6px
}

.steps h3 {
  font-size:24px;
  letter-spacing:-.7px;
  margin:0 0 10px
}

.steps p {
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
  margin:0
}

.model-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  border-radius:5px;
  overflow:hidden
}

.model {
  padding:26px 23px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:flex-start
}

.model:last-child {
  border:0
}

.featured-model {
  background:#e0e6d5
}

.model>.mono {
  font-size:8px;
  color:#5e6255
}

.model h3 {
  font-size:22px;
  line-height:1.2;
  letter-spacing:-.8px;
  margin:30px 0 18px
}

.model h3>span {
  color:#4b6440
}

.model p {
  font-size:13px;
  line-height:1.8;
  color:#606458;
  margin:0 0 28px
}

.model-tag {
  font:8px var(--mono);
  letter-spacing:.6px;
  border:1px solid #bfc3b5;
  padding:6px 9px;
  border-radius:3px;
  margin-top:auto
}

.model-note {
  font:11px/1.8 var(--mono);
  color:var(--muted);
  margin:20px 0 0
}

.browser-features {
  padding-top:72px;
  padding-bottom:90px
}

.browser-features>div {
  display:flex;
  justify-content:space-between;
  gap:25px;
  flex-wrap:wrap;
  border-block:1px solid var(--line);
  padding:25px 0;
  margin-top:18px;
  font-size:14px;
  font-weight:600
}

.start {
  background:var(--dark);
  color:var(--paper)
}

.start-grid {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:75px;
  align-items:center
}

.start .eyebrow {
  color:#b1b4a5
}

.start h2 {
  margin:30px 0;
  font-size:clamp(40px,4.4vw,62px)
}

.start h2 .serif {
  color:var(--orange)
}

.start p {
  font-size:14px;
  line-height:1.8;
  color:#bfc1b4
}

.start .button {
  margin-top:20px
}

.terminal {
  border:1px solid #525449;
  border-radius:6px;
  overflow:hidden;
  background:#1a1b17
}

.terminal-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:18px;
  border-bottom:1px solid #42453a;
  font:9px var(--mono);
  color:#bfc1b4
}

.terminal-head button {
  border:0;
  background:transparent;
  color:var(--orange);
  font:10px var(--mono);
  padding:5px
}

.terminal pre {
  margin:0;
  padding:26px 20px;
  overflow:auto;
  font:12px/2.3 var(--mono);
  color:#dae5c9
}

.terminal code {
  font:inherit
}

.terminal-foot {
  padding:18px;
  border-top:1px solid #42453a;
  font:10px/1.7 var(--mono);
  display:flex;
  align-items:center;
  gap:9px;
  color:#bfc1b4
}

.start .setup-note {
  font-size:11px;
  margin-top:18px
}

.terminal-wrap {
  min-width:0
}

#copy-status {
  font:11px var(--mono);
  color:#dce6cd
}

.preview {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:90px;
  align-items:start;
  padding-block:70px
}

.preview h2 {
  font-size:30px;
  margin:16px 0
}

.preview p,.preview li {
  color:var(--muted);
  font-size:12px;
  line-height:1.9
}

.preview details {
  border-block:1px solid var(--line);
  margin-top:6px
}

.preview summary {
  cursor:pointer;
  padding:21px 0;
  font-size:14px;
  list-style:none;
  display:flex;
  justify-content:space-between
}

.preview summary::-webkit-details-marker {
  display:none
}

.preview summary span {
  font-size:23px;
  line-height:16px;
  transition:transform .2s
}

.preview details[open] summary span {
  transform:rotate(45deg)
}

.preview ul {
  padding:0 0 10px 18px
}

footer {
  background:#dedfd2;
  overflow:hidden;
  padding-top:55px
}

.footer-top {
  display:grid;
  grid-template-columns:1fr 1fr 1.3fr;
  align-items:center;
  gap:25px
}

.footer-top p {
  font-size:13px;
  line-height:1.7;
  color:#5f6355
}

.creator {
  text-decoration:none;
  justify-self:end
}

.creator .mono {
  font-size:9px;
  color:#5c6152
}

.creator strong {
  display:block;
  font-size:23px;
  letter-spacing:-.8px;
  margin-top:10px
}

.creator:hover strong {
  color:#ac330e
}

.footer-bottom {
  border-top:1px solid #bfc3b3;
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:40px;
  padding-top:24px;
  font-size:10px;
  color:#575e4e
}

.footer-bottom nav {
  display:flex;
  gap:18px
}

.footer-bottom a {
  text-decoration:none
}

.footer-bottom a:hover {
  text-decoration:underline
}

.footer-word {
  font-weight:800;
  letter-spacing:-.09em;
  font-size:clamp(90px,19.6vw,280px);
  line-height:1.1;
  margin-top:30px;
  margin-bottom:-.14em;
  display:flex;
  justify-content:space-between
}

.footer-word span {
  color:var(--orange);
  font-size:.8em;
  line-height:1.4
}

.skip {
  position:absolute;
  top:-60px;
  left:20px;
  background:var(--ink);
  color:white;
  padding:12px;
  z-index:10
}

.skip:focus {
  top:10px
}

@media(min-width:1600px) {
  .hero-star {
  right:11%
}


}

@media(max-width:1050px) {
  .wrap {
  width:calc(100% - 56px)
}

.hero-star {
  font-size:150px;
  right:2%
}

.hero-bottom>div {
  gap:16px
}

.hero-bottom p {
  font-size:16px
}

.hero-bottom .text-link {
  display:none
}

.feature {
  padding:22px
}

.feature h3 {
  font-size:25px
}

.bridge-art {
  font-size:10px
}

.bridge-art>span {
  padding:13px 8px
}

.workflow-grid {
  gap:50px
}

.section-heading {
  gap:24px 45px
}

.model-grid {
  grid-template-columns:repeat(2,1fr)
}

.model:nth-child(2) {
  border-right:0
}

.model:nth-child(-n+2) {
  border-bottom:1px solid var(--line)
}

.start-grid {
  gap:40px
}

.preview {
  gap:40px
}

.footer-bottom {
  flex-wrap:wrap
}


}

@media(max-width:740px) {
  .wrap {
  width:calc(100% - 40px)
}

.nav {
  height:80px
}

.brand {
  font-size:28px
}

.brand-mark {
  font-size:35px
}

.nav nav {
  gap:15px
}

.nav nav>a:not(.nav-cta) {
  display:none
}

.nav-cta {
  padding:10px 15px
}

.hero {
  padding-top:28px
}

.hero-version {
  display:none
}

h1 {
  font-size:clamp(57px,12.5vw,91px);
  margin-top:32px
}

.hero-star {
  display:none
}

.hero-bottom {
  align-items:flex-start;
  gap:10px;
  flex-direction:column;
  margin-bottom:32px
}

.hero-bottom p {
  font-size:16px
}

.button {
  padding:16px 20px
}

.demo-content {
  grid-template-columns:1fr
}

.demo-page {
  display:none
}

.assistant {
  padding:22px
}

.browser-bar {
  gap:10px;
  padding:0 12px
}

.browser-tab {
  padding-right:14px;
  font-size:9px
}

.demo-badge {
  font-size:7px
}

.address-bar {
  padding-inline:12px;
  gap:13px
}

.hero-caption {
  font-size:8px;
  margin-bottom:30px
}

.hero-caption>span:last-child {
  display:none
}

.ticker {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  padding:20px;
  text-align:center;
  gap:15px;
  font-size:12px
}

.ticker>b:nth-of-type(2) {
  display:none
}

.ticker>b {
  font-size:22px
}

.section {
  padding-block:65px
}

.section-heading {
  grid-template-columns:1fr;
  gap:20px
}

.section-heading p {
  max-width:none
}

.section-heading>.eyebrow {
  grid-column:auto
}

.features {
  grid-template-columns:1fr
}

.feature {
  padding:28px
}

.feature h3 {
  font-size:32px
}

.feature p {
  max-width:450px;
  font-size:14px
}

.local-art,.bridge-art {
  height:150px
}

.approval-art {
  max-width:360px;
  margin-inline:auto
}

.bridge-art {
  font-size:14px
}

.workflow-grid,.start-grid {
  grid-template-columns:1fr;
  gap:40px
}

.steps article {
  padding-block:23px
}

.model {
  padding:22px 18px
}

.model h3 {
  font-size:21px
}

.browser-features {
  padding-top:48px;
  padding-bottom:60px
}

.browser-features>div {
  display:grid;
  grid-template-columns:1fr;
  gap:22px
}

.preview {
  grid-template-columns:1fr;
  gap:20px;
  padding-block:50px
}

.footer-top {
  grid-template-columns:1fr 1fr
}

.footer-top p {
  justify-self:end
}

.creator {
  grid-column:1/-1;
  justify-self:start;
  margin-top:10px
}

.footer-bottom {
  line-height:1.6;
  margin-top:30px
}

.footer-bottom nav {
  flex-wrap:wrap
}

.footer-word {
  font-size:20vw
}

.demo-options button {
  min-height:35px
}

.text-link {
  display:inline-block
}


}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}

*,*::before,*::after {
  transition:none!important;
  animation:none!important
}


}


.faq { border-top: 1px solid var(--line); }
.faq-list { max-width: 900px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; padding: 24px 0; font-size: 18px; font-weight: 600; line-height: 1.5; }
.faq-list p { max-width: 760px; margin: 0 0 24px; color: var(--muted); font-size: 15px; line-height: 1.85; }