/* A geometric voice with a small, editorial counterpoint. Both fonts are self-hosted. */
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme:light;
  --bg:#f5f4f0;
  --surface:#fffefa;
  --text:#232321;
  --muted:#62645d;
  --line:#dcdcd4;
  --accent:#ed6245;
  --accent-hover:#d94f34;
  --on-accent:#241c16;
  --lavender:#e5e0f2;
  --mint:#dce7d5;
  --peach:#f6dec7;
  --stage:#e8e3f1;
  --grid:#bcb4d133;
  --app:#fffefa;
  --panel:#f8f7f3;
  --green:#40684a;
  --shadow:0 24px 60px #3a325315
}
:root[data-theme=dark] {
  color-scheme:dark;
  --bg:#171916;
  --surface:#20231e;
  --text:#f0f0e6;
  --muted:#a3a69b;
  --line:#3c4037;
  --accent:#fa896b;
  --accent-hover:#ff9e85;
  --on-accent:#231c16;
  --lavender:#3c354d;
  --mint:#344632;
  --peach:#57402d;
  --stage:#302c3c;
  --grid:#8e829933;
  --app:#23261f;
  --panel:#292c25;
  --green:#a4c794;
  --shadow:0 24px 60px #0003
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme=light]) {
    color-scheme:dark;
    --bg:#171916;
    --surface:#20231e;
    --text:#f0f0e6;
    --muted:#a3a69b;
    --line:#3c4037;
    --accent:#fa896b;
    --accent-hover:#ff9e85;
    --on-accent:#231c16;
    --lavender:#3c354d;
    --mint:#344632;
    --peach:#57402d;
    --stage:#302c3c;
    --grid:#8e829933;
    --app:#23261f;
    --panel:#292c25;
    --green:#a4c794;
    --shadow:0 24px 60px #0003
  }
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px;
  -webkit-text-size-adjust:100%
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased
}
body,button,a {
  -webkit-tap-highlight-color:transparent
}
button,input {
  font:inherit
}
button,a {
  touch-action:manipulation
}
button {
  color:inherit;
  cursor:pointer
}
a {
  color:inherit
}
button:disabled {
  cursor:default
}
svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
svg use {
  pointer-events:none
}
button {
  border:0
}
img {
  max-width:100%;
  display:block
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px
}
[hidden] {
  display:none!important
}
.symbols {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.wrap {
  width:min(1280px,calc(100% - 96px));
  margin-inline:auto
}
.icon {
  width:22px;
  height:22px;
  flex:none
}
.skip {
  position:fixed;
  top:-80px;
  left:20px;
  background:var(--text);
  color:var(--bg);
  padding:12px 20px;
  z-index:20
}
.skip:focus {
  top:12px
}
::selection {
  background:var(--accent);
  color:var(--on-accent)
}
.site-header {
  position:relative;
  z-index:10
}
.nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:88px;
  gap:25px;
  border-bottom:1px solid var(--line)
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
  text-decoration:none;
  font-size:21px;
  font-weight:650;
  letter-spacing:-.8px
}
.brand img {
  border-radius:7px
}
.brand>span {
  font-weight:400;
  color:var(--muted);
  letter-spacing:-.5px
}
.desktop-nav {
  display:flex;
  gap:32px;
  font-size:14px
}
.desktop-nav a {
  text-decoration:none;
  position:relative
}
.desktop-nav a:after {
  content:"";
  position:absolute;
  height:1px;
  background:var(--text);
  left:0;
  right:100%;
  bottom:-4px;
  transition:right .2s
}
.desktop-nav a:hover:after {
  right:0
}
.nav-end {
  display:flex;
  align-items:center;
  gap:18px
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  min-height:52px;
  padding:13px 22px;
  border-radius:7px;
  background:var(--accent);
  color:var(--on-accent);
  font-size:15px;
  font-weight:550;
  text-decoration:none;
  border:1px solid transparent;
  transition:background .2s,transform .2s,box-shadow .2s
}
.btn svg {
  width:20px;
  height:20px;
  transition:transform .2s
}
.btn:hover {
  background:var(--accent-hover);
  box-shadow:0 5px 16px #b75c3a18
}
.btn:hover svg {
  transform:translateX(3px)
}
.btn:active {
  transform:translateY(1px)
}
.btn.small {
  min-height:40px;
  padding:8px 15px;
  font-size:13px;
  gap:14px
}
.btn.line {
  color:var(--text);
  background:transparent;
  border-color:var(--line)
}
.btn.line:hover {
  border-color:var(--text);
  background:var(--panel)
}
.theme-toggle {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  background:transparent;
  border-radius:50%
}
.theme-toggle:hover {
  background:var(--line)
}
.theme-toggle svg {
  width:19px;
  height:19px
}
.menu-toggle {
  display:none;
  background:transparent;
  width:30px;
  height:36px;
  padding:6px
}
.menu-toggle span {
  display:block;
  height:1.5px;
  background:var(--text);
  margin-block:6px;
  transition:transform .2s
}
.menu-toggle[aria-expanded=true] span:first-child {
  transform:translateY(3.75px) rotate(45deg)
}
.menu-toggle[aria-expanded=true] span:last-child {
  transform:translateY(-3.75px) rotate(-45deg)
}
.mobile-nav {
  padding:10px 24px 24px;
  border-bottom:1px solid var(--line);
  background:var(--bg);
  position:absolute;
  top:100%;
  left:0;
  right:0
}
.mobile-nav a {
  display:block;
  padding:12px 0;
  text-decoration:none
}
.hero {
  position:relative;
  overflow:clip;
  padding:48px 0 35px;
  text-align:center
}
.hero-copy {
  position:relative;
  z-index:2
}
h1,h2,h3,h4,p {
  margin:0
}
h1 {
  font-size:clamp(58px,6.7vw,94px);
  font-weight:500;
  line-height:1.01;
  letter-spacing:-.068em;
  text-wrap:balance
}
h1>span {
  color:var(--accent)
}
.hero-copy>p {
  margin:25px 0 25px;
  font-size:20px;
  line-height:1.5;
  letter-spacing:-.45px
}
.availability {
  display:block;
  color:var(--muted);
  font-size:12px;
  margin:13px 0 28px
}
.prompt-demo {
  width:min(626px,100%);
  padding:22px 23px 16px;
  margin-inline:auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:13px;
  text-align:left;
  box-shadow:0 5px 18px #33331106
}
.prompt-line {
  display:flex;
  gap:13px;
  align-items:center;
  font-size:16px;
  letter-spacing:-.3px;
  min-height:28px
}
.prompt-line>.icon {
  color:var(--accent);
  width:20px;
  height:20px
}
.prompt-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:22px;
  gap:10px
}
.provider-picker {
  display:flex;
  padding:3px;
  gap:2px;
  background:var(--panel);
  border-radius:6px
}
.provider-picker button {
  background:none;
  font-size:11px;
  padding:6px 10px;
  border-radius:4px;
  color:var(--muted)
}
.provider-picker button.selected {
  background:var(--surface);
  box-shadow:0 1px 4px #2221;
  color:var(--text)
}
.demo-start {
  display:inline-flex;
  align-items:center;
  gap:13px;
  text-decoration:none;
  font-size:12px
}
.demo-start svg {
  width:16px;
  height:16px
}
.demo-start:hover {
  color:var(--accent)
}
.prompt-options {
  display:flex;
  justify-content:center;
  gap:9px;
  flex-wrap:wrap;
  margin-top:16px
}
.prompt-options button {
  font-size:12px;
  padding:6px 12px;
  border:1px solid transparent;
  border-radius:24px;
  background:transparent;
  color:var(--muted);
  transition:background .2s,border .2s
}
.prompt-options button:hover,.prompt-options button.active {
  border-color:var(--line);
  background:var(--surface);
  color:var(--text)
}
.orbit {
  position:absolute;
  width:510px;
  z-index:0;
  pointer-events:none;
  animation:orbit-drift 12s ease-in-out infinite alternate
}
.orbit-left {
  left:calc(50% - 970px);
  bottom:-105px;
  transform:rotate(-25deg)
}
.orbit-right {
  right:calc(50% - 970px);
  bottom:-85px;
  transform:rotate(42deg);
  animation-delay:-5s
}
.orbit img {
  width:100%;
  height:auto;
  filter:saturate(.88)
}
@keyframes orbit-drift {
  to {
    translate:0 -20px;
    rotate:6deg
  }
}
.product-section {
  position:relative;
  z-index:3
}
.product-stage {
  background-color:var(--stage);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:32px 32px;
  border:1px solid var(--grid);
  border-radius:16px;
  padding:25px 42px 18px;
  overflow:hidden
}
.stage-top,.stage-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:11px;
  letter-spacing:.03em;
  color:var(--muted)
}
.stage-top {
  margin-bottom:24px
}
.stage-top>span:first-child {
  color:var(--text);
  display:flex;
  align-items:center;
  gap:8px
}
.stage-top i {
  width:7px;
  height:7px;
  background:var(--accent);
  border-radius:50%
}
.stage-bottom {
  margin-top:20px
}
.stage-bottom>span:first-child {
  display:flex;
  gap:6px;
  align-items:center
}
.stage-bottom .icon {
  width:14px;
  height:14px
}
.app-window {
  border-radius:10px;
  background:var(--app);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:hidden
}
.window-bar {
  height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 17px;
  border-bottom:1px solid var(--line);
  font-size:10px;
  color:var(--muted);
  position:relative
}
.window-dots {
  display:flex;
  gap:5px
}
.window-dots i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--line)
}
.window-bar>span {
  position:absolute;
  left:50%;
  transform:translateX(-50%)
}
.local-state {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:9px
}
.local-state>span {
  width:5px;
  height:5px;
  background:var(--green);
  border-radius:50%
}
.app-layout {
  display:grid;
  grid-template-columns:210px minmax(0,1fr)
}
.app-sidebar {
  border-right:1px solid var(--line);
  padding:24px 14px;
  position:relative;
  font-size:11px;
  background:var(--panel)
}
.sidebar-name {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:550
}
.sidebar-name img {
  border-radius:5px
}
.sidebar-chat {
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:5px;
  margin:24px 0;
  padding:9px;
  font-size:10px
}
.sidebar-chat .icon {
  width:14px;
  height:14px
}
.sidebar-chat>span {
  margin-left:auto
}
.sidebar-label {
  font-size:8px;
  letter-spacing:1px;
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  padding:0 8px 12px
}
.sidebar-label>span {
  letter-spacing:0
}
.site-item {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  white-space:nowrap;
  border-radius:5px;
  padding:9px 7px;
  color:var(--muted)
}
.site-item.selected {
  background:var(--app);
  box-shadow:0 0 0 1px var(--line);
  color:var(--text)
}
.site-item>span {
  margin-left:auto
}
.site-item.child {
  padding-left:25px
}
.site-favicon {
  display:grid;
  place-items:center;
  width:21px;
  height:21px;
  border:1px solid #5551;
  border-radius:5px;
  font:italic 600 14px Georgia,serif;
  color:var(--text);
  flex:none
}
.mint {
  background:var(--mint)
}
.peach {
  background:var(--peach)
}
.lavender {
  background:var(--lavender)
}
.sidebar-bottom {
  position:absolute;
  bottom:23px;
  left:22px;
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
  font-size:9px
}
.sidebar-bottom .icon {
  width:13px;
  height:13px
}
.app-content {
  padding:26px 30px 24px;
  min-width:0
}
.app-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px
}
.breadcrumb {
  font-size:8px;
  letter-spacing:1px;
  color:var(--muted)
}
.app-heading h2 {
  font-size:27px;
  font-weight:500;
  letter-spacing:-1px;
  margin-top:4px;
  line-height:1.3
}
.checked {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:9px;
  color:var(--muted)
}
.checked i {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--green)
}
.app-tabs {
  display:flex;
  gap:20px;
  border-bottom:1px solid var(--line);
  margin-top:21px
}
.app-tabs button {
  font-size:10px;
  color:var(--muted);
  padding:0 0 10px;
  background:none;
  position:relative;
  white-space:nowrap
}
.app-tabs button[aria-selected=true] {
  color:var(--text)
}
.app-tabs button[aria-selected=true]:after {
  content:"";
  height:2px;
  background:var(--accent);
  position:absolute;
  bottom:-1px;
  left:0;
  right:0
}
.app-tabs button>span {
  font-size:8px;
  background:var(--peach);
  color:var(--text);
  padding:1px 4px;
  margin-left:3px;
  border-radius:3px
}
.scene {
  min-height:320px;
  animation:scene-in .35s ease both
}
.stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:24px 0 27px;
  gap:16px
}
.stats>div>span {
  font-size:10px;
  color:var(--muted);
  display:block;
  margin-bottom:5px
}
.stats strong {
  display:block;
  font-size:26px;
  letter-spacing:-.8px;
  font-weight:500;
  white-space:nowrap
}
.stats small {
  font-size:9px;
  color:var(--green);
  background:var(--mint);
  padding:3px 5px;
  border-radius:4px;
  vertical-align:middle;
  margin-left:5px;
  letter-spacing:0
}
.stats em {
  font-style:normal;
  font-size:12px;
  letter-spacing:0;
  color:var(--muted);
  margin-left:5px
}
.chart-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:9px
}
.chart-head b {
  font-weight:500
}
.chart-head>span {
  color:var(--muted)
}
.visibility-chart {
  display:block;
  width:100%;
  height:128px;
  overflow:visible;
  margin-top:15px
}
.chart-grid {
  stroke:var(--line);
  stroke-width:1;
  stroke-dasharray:3 5
}
.chart-area {
  fill:url(#chart-fill);
  stroke:none
}
.chart-line {
  stroke:#9885bc;
  stroke-width:2;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1100;
  stroke-dashoffset:0;
  animation:draw-chart 2s ease both
}
.next-move {
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px 0 0;
  border-top:1px solid var(--line);
  margin-top:9px
}
.move-mark {
  background:var(--peach);
  border-radius:5px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center
}
.move-mark .icon {
  width:16px;
  height:16px
}
.next-move>div {
  display:grid;
  gap:2px
}
.next-move b {
  font-size:11px;
  font-weight:550
}
.next-move span:not(.move-mark) {
  font-size:9px;
  color:var(--muted)
}
.next-move button {
  margin-left:auto;
  width:29px;
  height:29px;
  border-radius:50%;
  background:var(--panel);
  display:grid;
  place-items:center
}
.next-move button:hover {
  background:var(--peach)
}
.next-move button .icon {
  width:14px;
  height:14px
}
.research-intro {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  margin:22px 0 10px;
  color:var(--muted)
}
.signal-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 3px var(--mint)
}
.keyword-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--line);
  padding:16px 0
}
.keyword-row small {
  font-size:7px;
  letter-spacing:1px;
  color:var(--muted)
}
.keyword-row h3 {
  font-size:14px;
  font-weight:550;
  letter-spacing:-.3px;
  margin:4px 0
}
.keyword-row div>span {
  font-size:9px;
  color:var(--muted)
}
.keyword-status {
  background:var(--mint);
  font-size:8px;
  padding:4px 7px;
  border-radius:4px;
  white-space:nowrap
}
.keyword-status.lavender {
  background:var(--lavender)
}
.keyword-status.peach {
  background:var(--peach)
}
.panel-note {
  display:flex;
  gap:6px;
  align-items:center;
  font-size:9px;
  color:var(--muted);
  margin-top:16px
}
.panel-note .icon {
  width:13px;
  height:13px
}
.change-header {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  padding:25px 0 22px
}
.change-header .icon {
  width:18px;
  height:18px;
  color:var(--accent)
}
.change-header b {
  font-weight:500
}
.change-header>span {
  font-size:9px;
  color:var(--muted);
  margin-left:auto
}
.code-file {
  font-size:9px;
  padding:11px 13px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:5px 5px 0 0
}
.code-diff {
  border:1px solid var(--line);
  border-top:0;
  border-radius:0 0 5px 5px;
  overflow:hidden
}
.code-diff>div {
  display:flex;
  font-size:10px;
  line-height:1.7;
  padding:8px 12px;
  gap:12px
}
.code-diff>div:first-child {
  background:var(--peach)
}
.code-diff>div:last-child {
  background:var(--mint)
}
.code-diff code {
  font:inherit;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  overflow-wrap:anywhere
}
.change-explanation {
  margin:21px 0
}
.change-explanation b {
  font-size:12px;
  font-weight:500
}
.change-explanation p {
  font-size:10px;
  color:var(--muted);
  margin-top:5px;
  max-width:43em
}
.review-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.review-bottom>span {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:9px;
  color:var(--muted)
}
.review-bottom .icon {
  width:13px;
  height:13px
}
.review-bottom .btn {
  font-size:10px;
  padding:7px 11px;
  min-height:30px;
  gap:9px
}
.review-bottom .btn svg {
  width:13px;
  height:13px
}
.approval-result {
  background:var(--mint);
  font-size:10px;
  padding:12px;
  border-radius:5px;
  margin-top:10px
}
.connections-strip {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  padding:39px 0 10px;
  border-bottom:1px solid var(--line);
  padding-bottom:38px;
  flex-wrap:wrap
}
.connections-strip>span {
  font-size:11px;
  color:var(--muted)
}
.connection {
  font-size:15px;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  letter-spacing:-.4px
}
.connection .icon {
  width:20px;
  height:20px
}
.google-mark {
  font-weight:650;
  font-size:23px;
  letter-spacing:-2px
}
.anthropic-mark {
  font-family:Georgia,serif;
  font-size:22px;
  letter-spacing:-3px;
  margin-right:3px
}
.how-section {
  padding:120px 0
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px;
  margin-bottom:54px
}
h2 {
  font-size:clamp(36px,4vw,58px);
  line-height:1.08;
  font-weight:500;
  letter-spacing:-.055em;
  text-wrap:balance
}
.section-heading>p {
  font-size:16px;
  color:var(--muted);
  letter-spacing:-.2px;
  line-height:1.6;
  margin-bottom:4px
}
.feature-story {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px
}
.story-panel {
  min-width:0
}
.story-visual {
  height:350px;
  border-radius:10px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line)
}
.map-visual {
  background:var(--mint);
  display:flex;
  align-items:center;
  justify-content:center
}
.map-grid {
  position:absolute;
  inset:0;
  background-image:radial-gradient(var(--green) .6px,transparent .8px);
  background-size:18px 18px;
  opacity:.16
}
.map-lines {
  position:absolute;
  width:520px;
  height:310px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:var(--green);
  stroke-width:1.3;
  stroke-dasharray:4 4
}
.map-node {
  position:absolute;
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 17px;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 5px 14px #2230150a;
  border-radius:6px;
  font-size:12px;
  white-space:nowrap;
  z-index:1
}
.map-node .site-favicon {
  width:27px;
  height:27px;
  font-size:18px
}
.root-node {
  top:65px;
  left:50%;
  transform:translateX(-50%)
}
.node-dot {
  width:5px;
  height:5px;
  background:var(--green);
  border-radius:50%;
  margin-left:15px
}
.child-a {
  top:218px;
  left:calc(50% - 222px);
  animation:node-float 7s ease-in-out infinite alternate
}
.child-b {
  top:218px;
  left:calc(50% + 67px);
  animation:node-float 7s ease-in-out infinite alternate;
  animation-delay:-3s
}
.map-node>div>span {
  display:block;
  font-size:9px;
  color:var(--muted);
  margin-top:2px
}
.map-caption {
  position:absolute;
  bottom:22px;
  font-size:10px;
  color:var(--green);
  display:flex;
  align-items:center;
  gap:7px
}
.map-caption>span {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--green)
}
.story-copy {
  padding:27px 8px 0 0
}
.story-number {
  font-size:9px;
  letter-spacing:1.2px;
  color:var(--muted)
}
.story-copy h3 {
  font-size:33px;
  line-height:1.12;
  letter-spacing:-1.25px;
  font-weight:500;
  margin:16px 0
}
.story-copy p {
  font-size:15px;
  line-height:1.65;
  color:var(--muted);
  max-width:31em
}
.draft-visual {
  background:var(--lavender);
  display:flex;
  justify-content:center
}
.article-paper {
  width:290px;
  margin-top:44px;
  background:var(--surface);
  padding:25px 25px 30px;
  transform:rotate(-6deg);
  box-shadow:4px 10px 20px #302a4510
}
.paper-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  font-size:6px;
  letter-spacing:1px
}
.paper-meta>span {
  font-size:7px;
  letter-spacing:0;
  background:var(--mint);
  padding:3px 5px;
  border-radius:3px
}
.article-paper h4 {
  font-family:Georgia,serif;
  font-size:29px;
  font-weight:400;
  line-height:1.1;
  letter-spacing:-1.1px;
  margin:22px 0 16px
}
.paper-image {
  height:100px;
  background:var(--mint);
  display:flex;
  gap:8px;
  align-items:end;
  justify-content:center;
  padding:18px;
  overflow:hidden
}
.paper-image span {
  background:#8f9b76;
  width:25px;
  height:55px;
  border-radius:40px 40px 0 0;
  transform:rotate(-17deg)
}
.paper-image span:nth-child(2) {
  height:80px;
  width:45px;
  background:#bac4a6;
  transform:rotate(20deg)
}
.paper-image span:nth-child(3) {
  height:60px;
  width:55px;
  background:#6c7a59;
  transform:rotate(-30deg)
}
.paper-image span:nth-child(4) {
  height:85px;
  width:25px;
  background:#9ea47b;
  transform:rotate(17deg)
}
.paper-lines {
  display:grid;
  gap:7px;
  margin-top:19px
}
.paper-lines i {
  height:3px;
  background:var(--line)
}
.paper-lines i:last-child {
  width:70%
}
.floating-tag {
  position:absolute;
  right:32px;
  top:38px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  background:var(--surface);
  padding:10px 14px;
  box-shadow:0 5px 16px #302a4510;
  border-radius:6px;
  font-size:11px;
  transform:rotate(5deg);
  animation:node-float 7s ease-in-out infinite alternate
}
.floating-tag .icon {
  color:var(--accent);
  width:17px;
  height:17px
}
.draft-pencil {
  position:absolute;
  right:70px;
  bottom:35px;
  height:160px;
  width:13px;
  background:repeating-linear-gradient(90deg,#efb164 0 4px,#e7a04d 4px 9px,#f4c289 9px 13px);
  transform:rotate(32deg);
  border-top:17px solid #d68576;
  border-radius:3px 3px 0 0
}
.draft-pencil:after {
  content:"";
  position:absolute;
  bottom:-21px;
  left:0;
  border-top:21px solid #b7a17d;
  border-left:6.5px solid transparent;
  border-right:6.5px solid transparent
}
.control-section {
  background:var(--peach);
  padding:100px 0;
  overflow:clip
}
.control-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center
}
.control-icon {
  width:33px;
  height:33px;
  margin-bottom:29px;
  stroke-width:1.2
}
.control-copy p {
  font-size:16px;
  margin-top:24px;
  line-height:1.6;
  color:var(--muted)
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:16px;
  font-size:14px;
  text-decoration:none;
  border-bottom:1px solid var(--text);
  padding-bottom:6px;
  margin-top:27px
}
.text-link:hover {
  gap:22px
}
.text-link .icon {
  width:18px;
  height:18px
}
.approval-visual {
  position:relative;
  padding:18px 28px 22px 0
}
.approval-route {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:10px;
  margin-bottom:32px;
  color:var(--muted)
}
.route-line {
  height:1px;
  flex:1;
  background:var(--muted);
  opacity:.4
}
.route-gate {
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--text);
  font-size:10px;
  white-space:nowrap
}
.route-gate .icon {
  width:15px;
  height:15px
}
.approval-sheet {
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:4px 8px 0 #5032130c;
  border-radius:4px;
  padding:35px 33px;
  transform:rotate(-2deg)
}
.sheet-label {
  font-size:8px;
  letter-spacing:1.5px;
  color:var(--muted)
}
.approval-sheet h3 {
  font-size:31px;
  font-weight:500;
  letter-spacing:-1.3px;
  line-height:1.12;
  margin:17px 0 25px
}
.sheet-row {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  margin-top:13px
}
.sheet-row .icon {
  width:14px;
  height:14px;
  color:var(--green)
}
.approval-sheet .btn {
  width:100%;
  margin-top:28px;
  justify-content:space-between;
  min-height:40px;
  font-size:12px
}
.approval-stamp {
  position:absolute;
  bottom:-5px;
  right:-13px;
  font-family:ui-monospace,monospace;
  font-size:13px;
  line-height:1.1;
  font-weight:600;
  width:85px;
  height:85px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transform:rotate(12deg);
  background:var(--mint);
  border:1px solid var(--text);
  border-radius:50%;
  outline:4px solid var(--mint);
  text-align:center;
  box-shadow:0 5px 10px #3322
}
.approval-stamp>span {
  font-size:22px;
  line-height:1;
  margin-top:3px
}
.ownership {
  padding:120px 0
}
.ownership-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px
}
.ownership-heading h2>span {
  color:var(--muted)
}
.ownership-seal {
  height:100px;
  width:100px;
  background:var(--lavender);
  border-radius:25px;
  transform:rotate(12deg);
  display:grid;
  place-items:center
}
.ownership-seal svg {
  width:44px;
  height:44px;
  stroke-width:1.2;
  transform:rotate(-12deg)
}
.ownership-facts {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px;
  margin-top:65px
}
.ownership-facts>div {
  border-top:1px solid var(--line);
  padding-top:20px
}
.ownership-facts>div>span {
  font-size:10px;
  color:var(--muted);
  font-variant-numeric:tabular-nums
}
.ownership-facts h3 {
  font-size:20px;
  letter-spacing:-.6px;
  font-weight:500;
  margin:17px 0 11px
}
.ownership-facts p {
  color:var(--muted);
  font-size:14px;
  max-width:25em;
  line-height:1.65
}
.pricing-section {
  padding:100px 0;
  background:var(--mint)
}
.pricing-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px;
  margin-bottom:56px
}
.pricing-heading>p {
  color:var(--muted);
  font-size:16px;
  line-height:1.6
}
.prices {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:19px
}
.price {
  position:relative;
  padding:33px 28px 27px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--bg)
}
.price.featured {
  background:var(--surface);
  border-color:var(--text)
}
.plan-label {
  position:absolute;
  left:28px;
  top:-11px;
  background:var(--text);
  color:var(--bg);
  font-size:8px;
  letter-spacing:1px;
  padding:5px 10px;
  border-radius:3px
}
.price h3 {
  font-size:22px;
  letter-spacing:-.7px;
  font-weight:500
}
.plan-for {
  font-size:12px;
  color:var(--muted);
  margin-top:6px
}
.amount {
  font-size:60px;
  font-weight:500;
  letter-spacing:-3px;
  line-height:1.2;
  margin-top:31px
}
.amount>span {
  font-size:12px;
  font-weight:400;
  color:var(--muted);
  letter-spacing:0;
  margin-left:8px
}
.plan-capacity {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:13px;
  margin:24px 0 27px;
  padding-block:15px;
  border-block:1px solid var(--line)
}
.plan-capacity b {
  font-weight:600
}
.plan-capacity>span {
  margin-left:auto;
  color:var(--muted);
  font-size:11px
}
.price .btn {
  width:100%;
  justify-content:space-between;
  font-size:13px;
  min-height:44px;
  padding:10px 15px
}
.pricing-foot {
  display:flex;
  justify-content:space-between;
  gap:30px;
  margin-top:23px;
  font-size:11px;
  color:var(--muted)
}
.pricing-foot>p {
  max-width:35em
}
.faq-section {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:80px;
  padding:120px 0
}
.faq details {
  border-bottom:1px solid var(--line)
}
.faq details:first-child {
  border-top:1px solid var(--line)
}
.faq summary {
  padding:22px 0;
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
  cursor:pointer;
  list-style:none;
  font-size:15px;
  letter-spacing:-.25px
}
.faq summary::-webkit-details-marker {
  display:none
}
.faq summary>span {
  font-size:20px;
  font-weight:300;
  color:var(--muted);
  transition:transform .2s
}
.faq details[open] summary>span {
  transform:rotate(45deg)
}
.faq details>div {
  padding:0 25px 23px 0
}
.faq p {
  font-size:14px;
  line-height:1.7;
  color:var(--muted)
}
.closing {
  text-align:center;
  padding:80px 0 100px;
  border-top:1px solid var(--line);
  position:relative
}
.closing h2 {
  font-size:clamp(40px,5.1vw,73px)
}
.closing .btn {
  margin-top:30px
}
.closing-art {
  height:110px;
  overflow:hidden;
  margin:0 auto 30px;
  width:180px
}
.closing-art>img {
  width:180px;
  max-width:none;
  transform:translateY(-35px)
}
footer {
  border-top:1px solid var(--line);
  padding:40px 0 26px
}
.footer-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-bottom:40px
}
.footer-top>span {
  font-size:13px;
  color:var(--muted)
}
.back-top {
  font-size:12px;
  text-decoration:none
}
.foot {
  border-top:1px solid var(--line);
  padding-top:23px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  font-size:11px;
  color:var(--muted)
}
.foot nav {
  display:flex;
  flex-wrap:wrap;
  gap:24px
}
.foot a {
  text-decoration:none
}
.foot a:hover {
  text-decoration:underline
}
.legal {
  max-width:760px;
  padding:70px 0 100px
}
.legal h1 {
  font-size:58px;
  letter-spacing:-3px
}
.legal h2 {
  font-size:24px;
  letter-spacing:-.7px;
  margin:34px 0 12px
}
.legal p,.legal li {
  font-size:16px;
  line-height:1.7;
  color:var(--muted);
  margin:14px 0
}
.legal ul {
  padding-left:20px
}
.legal .muted {
  font-size:12px
}
.legal a {
  text-underline-offset:3px
}
.legal .legal-toc {
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  margin:28px 0;
  padding:18px 0;
  border-block:1px solid var(--line);
  font-size:14px
}
.legal h2[id] {
  scroll-margin-top:110px
}
.legal code {
  overflow-wrap:anywhere;
  font-size:.9em
}
.legal+.nav {
  margin-top:40px
}
@keyframes draw-chart {
  from {
    stroke-dashoffset:1100
  }
}
@keyframes scene-in {
  from {
    opacity:.3;
    transform:translateY(5px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@keyframes node-float {
  to {
    translate:0 -7px
  }
}
.reveal {
  transition:opacity .65s ease,translate .65s cubic-bezier(.2,.65,.25,1)
}
.will-reveal {
  opacity:0;
  translate:0 26px
}
.revealed {
  opacity:1;
  translate:0 0
}
@media(min-width:1600px) {
  .orbit-left {
    left:calc(50% - 1040px)
  }
  .orbit-right {
    right:calc(50% - 1040px)
  }
}
@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 64px)
  }
  .desktop-nav {
    gap:22px
  }
  .product-stage {
    padding:22px 25px 18px
  }
  .app-layout {
    grid-template-columns:180px minmax(0,1fr)
  }
  .app-content {
    padding:22px
  }
  .site-item {
    font-size:9px;
    gap:5px
  }
  .app-sidebar {
    padding-inline:10px
  }
  .sidebar-name {
    font-size:11px
  }
  .sidebar-chat {
    font-size:9px
  }
  .connections-strip {
    gap:25px
  }
  .connection {
    font-size:13px
  }
  .section-heading>p {
    font-size:14px
  }
  .control-layout {
    gap:50px
  }
  .price {
    padding:30px 22px 22px
  }
  .plan-for {
    font-size:11px
  }
  .faq-section {
    gap:50px
  }
  .orbit-left {
    left:-345px
  }
  .orbit-right {
    right:-345px
  }
  .map-lines {
    width:440px
  }
  .child-a {
    left:calc(50% - 190px)
  }
  .child-b {
    left:calc(50% + 40px)
  }
  .map-node {
    font-size:11px;
    padding:12px
  }
  .draft-pencil {
    right:45px
  }
  .app-heading h2 {
    font-size:24px
  }
  .stats strong {
    font-size:24px
  }
}
@media(max-width:850px) {
  .nav {
    height:74px
  }
  .desktop-nav {
    display:none
  }
  .menu-toggle {
    display:block
  }
  .nav-end {
    gap:13px
  }
  .hero {
    padding-top:64px
  }
  h1 {
    font-size:76px
  }
  .hero-copy>p {
    font-size:18px
  }
  .app-sidebar {
    display:none
  }
  .app-layout {
    grid-template-columns:1fr
  }
  .app-content {
    padding:25px 30px
  }
  .product-stage {
    padding:22px 22px 17px
  }
  .scene {
    min-height:320px
  }
  .app-heading h2 {
    font-size:28px
  }
  .stats strong {
    font-size:29px
  }
  .connections-strip {
    column-gap:26px;
    row-gap:20px;
    padding-block:30px
  }
  .connections-strip>span {
    flex-basis:100%;
    text-align:center
  }
  .section-heading {
    display:block
  }
  .section-heading>p {
    margin-top:24px;
    font-size:16px
  }
  .how-section {
    padding:85px 0
  }
  .story-visual {
    height:300px
  }
  .story-copy h3 {
    font-size:29px
  }
  .map-node {
    font-size:10px;
    padding:10px;
    gap:7px
  }
  .root-node {
    top:55px
  }
  .map-lines {
    width:360px;
    height:280px;
    top:48%
  }
  .child-a {
    left:calc(50% - 153px);
    top:192px
  }
  .child-b {
    left:calc(50% + 30px);
    top:192px
  }
  .map-node .site-favicon {
    width:22px;
    height:22px;
    font-size:14px
  }
  .map-node>div>span {
    font-size:8px
  }
  .node-dot {
    margin-left:3px
  }
  .map-caption {
    font-size:8px
  }
  .article-paper {
    width:240px;
    padding:22px
  }
  .article-paper h4 {
    font-size:26px
  }
  .floating-tag {
    right:15px;
    top:24px;
    font-size:9px;
    padding:8px 10px
  }
  .draft-pencil {
    right:18px;
    bottom:30px;
    height:130px
  }
  .control-section {
    padding:85px 0
  }
  .control-layout {
    gap:35px
  }
  .control-layout h2 {
    font-size:42px
  }
  .approval-visual {
    padding-right:10px
  }
  .approval-sheet {
    padding:27px 24px
  }
  .approval-sheet h3 {
    font-size:27px
  }
  .sheet-row {
    font-size:10px
  }
  .approval-route {
    font-size:8px;
    gap:6px
  }
  .route-gate {
    font-size:8px
  }
  .approval-stamp {
    right:-13px;
    width:72px;
    height:72px;
    font-size:11px
  }
  .ownership {
    padding:85px 0
  }
  .ownership-facts {
    gap:26px;
    margin-top:45px
  }
  .ownership-facts p {
    font-size:13px
  }
  .ownership-seal {
    width:80px;
    height:80px;
    border-radius:20px
  }
  .pricing-section {
    padding:85px 0
  }
  .pricing-heading p {
    font-size:14px
  }
  .prices {
    gap:12px
  }
  .price {
    padding:26px 16px 20px
  }
  .price h3 {
    font-size:20px
  }
  .plan-for {
    font-size:10px;
    min-height:30px
  }
  .amount {
    font-size:49px
  }
  .price .btn {
    font-size:11px;
    padding:10px;
    gap:8px
  }
  .plan-capacity {
    font-size:11px;
    gap:4px
  }
  .plan-capacity>span {
    font-size:9px
  }
  .faq-section {
    grid-template-columns:1fr;
    gap:35px;
    padding:85px 0
  }
  .faq summary {
    font-size:16px
  }
  .footer-top>span {
    display:none
  }
}
@media(max-width:600px) {
  .wrap {
    width:calc(100% - 40px)
  }
  html {
    scroll-padding-top:24px
  }
  .nav {
    height:72px;
    gap:10px
  }
  .brand {
    font-size:19px;
    gap:7px
  }
  .brand img {
    width:26px;
    height:26px
  }
  .nav-end {
    gap:8px
  }
  .theme-toggle {
    width:28px;
    height:30px
  }
  .nav-end>.btn {
    font-size:11px;
    min-height:36px;
    padding:7px 10px;
    gap:7px
  }
  .nav-end>.btn svg {
    width:14px;
    height:14px
  }
  .menu-toggle {
    width:25px;
    padding:3px
  }
  .hero {
    padding:50px 0 32px
  }
  h1 {
    font-size:clamp(44px,9.7vw,58px);
    line-height:1.045;
    letter-spacing:-.064em
  }
  .hero-copy>p {
    font-size:16px;
    line-height:1.55;
    margin:23px 0
  }
  .hero-cta {
    font-size:13px;
    min-height:47px;
    padding:11px 18px;
    gap:20px
  }
  .availability {
    font-size:10px;
    margin:12px 0 28px
  }
  .prompt-demo {
    padding:17px 14px 12px;
    border-radius:10px
  }
  .prompt-line {
    font-size:13px;
    gap:9px;
    min-height:25px
  }
  .prompt-line>.icon {
    width:17px;
    height:17px
  }
  .prompt-bottom {
    margin-top:22px
  }
  .provider-picker button {
    font-size:9px;
    padding:6px 7px
  }
  .demo-start {
    font-size:10px;
    gap:5px
  }
  .demo-start svg {
    width:13px;
    height:13px
  }
  .prompt-options {
    gap:4px;
    margin-top:12px
  }
  .prompt-options button {
    font-size:10px;
    padding:5px 7px
  }
  .orbit {
    width:290px;
    opacity:.8
  }
  .orbit-left {
    left:-215px;
    bottom:30px
  }
  .orbit-right {
    right:-220px;
    bottom:-65px
  }
  .product-stage {
    border-radius:10px;
    padding:14px 11px 12px
  }
  .stage-top {
    font-size:8px;
    gap:6px;
    margin-bottom:15px;
    letter-spacing:0
  }
  .stage-top>span:first-child {
    gap:5px
  }
  .stage-top i {
    height:5px;
    width:5px
  }
  .stage-top>span:last-child {
    max-width:91px;
    text-align:right;
    line-height:1.4
  }
  .window-bar {
    height:33px;
    padding:0 12px;
    font-size:8px
  }
  .window-dots {
    gap:3px
  }
  .window-dots i {
    width:5px;
    height:5px
  }
  .local-state {
    font-size:0
  }
  .local-state>span {
    width:4px;
    height:4px
  }
  .app-content {
    padding:19px 14px 17px
  }
  .app-heading {
    gap:7px
  }
  .breadcrumb {
    font-size:6px;
    letter-spacing:.7px
  }
  .app-heading h2 {
    font-size:21px;
    letter-spacing:-.7px;
    line-height:1.15;
    margin-top:7px
  }
  .checked {
    font-size:7px;
    gap:4px
  }
  .app-tabs {
    margin-top:20px;
    gap:19px
  }
  .app-tabs button {
    font-size:9px;
    padding-bottom:9px
  }
  .app-tabs button>span {
    font-size:7px
  }
  .scene {
    min-height:290px
  }
  .stats {
    padding:20px 0 22px;
    gap:8px
  }
  .stats>div>span {
    font-size:8px;
    margin-bottom:5px
  }
  .stats strong {
    font-size:22px;
    letter-spacing:-.7px
  }
  .stats small {
    font-size:7px;
    display:block;
    width:fit-content;
    margin:5px 0 0;
    padding:2px 4px
  }
  .stats em {
    font-size:9px;
    margin-left:3px
  }
  .chart-head {
    font-size:8px
  }
  .visibility-chart {
    height:110px;
    margin-top:7px
  }
  .next-move {
    margin-top:6px;
    padding-top:11px;
    gap:7px
  }
  .next-move b {
    font-size:9px
  }
  .next-move span:not(.move-mark) {
    font-size:7px
  }
  .move-mark {
    width:25px;
    height:25px;
    border-radius:4px
  }
  .move-mark .icon {
    width:13px;
    height:13px
  }
  .next-move button {
    width:23px;
    height:23px
  }
  .stage-bottom {
    font-size:7px;
    letter-spacing:0;
    margin-top:12px;
    gap:6px
  }
  .stage-bottom .icon {
    width:10px;
    height:10px
  }
  .stage-bottom>span:first-child {
    gap:3px
  }
  .research-intro {
    font-size:8px;
    margin-top:19px
  }
  .keyword-row {
    gap:7px;
    padding:14px 0
  }
  .keyword-row small {
    font-size:6px
  }
  .keyword-row h3 {
    font-size:11px;
    max-width:20em
  }
  .keyword-row div>span {
    font-size:8px
  }
  .keyword-status {
    font-size:7px;
    padding:4px;
    align-self:start;
    margin-top:22px
  }
  .panel-note {
    font-size:7px
  }
  .change-header {
    font-size:10px;
    padding:20px 0 18px;
    gap:6px
  }
  .change-header .icon {
    width:14px;
    height:14px
  }
  .change-header>span {
    font-size:8px;
    white-space:nowrap
  }
  .code-file {
    font-size:8px;
    padding:8px 10px
  }
  .code-diff>div {
    font-size:8px;
    gap:7px;
    padding:8px
  }
  .change-explanation {
    margin:15px 0
  }
  .change-explanation b {
    font-size:10px
  }
  .change-explanation p {
    font-size:9px
  }
  .review-bottom {
    align-items:start;
    gap:5px
  }
  .review-bottom>span {
    font-size:8px;
    gap:4px;
    max-width:11em
  }
  .review-bottom .btn {
    font-size:8px;
    padding:6px 8px;
    gap:4px
  }
  .review-bottom .btn svg {
    width:11px;
    height:11px
  }
  .approval-result {
    font-size:9px
  }
  .connections-strip {
    column-gap:22px;
    row-gap:18px;
    padding:26px 0
  }
  .connections-strip>span {
    font-size:10px
  }
  .connection {
    font-size:12px;
    gap:6px
  }
  .connection .icon {
    width:17px;
    height:17px
  }
  .google-mark {
    font-size:20px
  }
  .anthropic-mark {
    font-size:19px
  }
  .how-section {
    padding:65px 0
  }
  h2 {
    font-size:36px;
    line-height:1.11
  }
  .section-heading {
    margin-bottom:32px
  }
  .section-heading>p {
    font-size:14px;
    line-height:1.7;
    margin-top:19px
  }
  .section-heading>p br {
    display:none
  }
  .feature-story {
    grid-template-columns:1fr;
    gap:43px
  }
  .story-visual {
    height:325px
  }
  .map-lines {
    width:400px;
    height:310px
  }
  .map-node {
    font-size:11px;
    padding:11px 12px
  }
  .root-node {
    top:60px
  }
  .child-a {
    top:211px;
    left:calc(50% - 170px)
  }
  .child-b {
    top:211px;
    left:calc(50% + 25px)
  }
  .map-node .site-favicon {
    width:24px;
    height:24px;
    font-size:16px
  }
  .map-caption {
    font-size:9px
  }
  .story-copy {
    padding-top:22px
  }
  .story-number {
    font-size:8px;
    letter-spacing:1px
  }
  .story-copy h3 {
    font-size:30px;
    margin:13px 0
  }
  .story-copy p {
    font-size:14px
  }
  .article-paper {
    width:270px
  }
  .article-paper h4 {
    font-size:30px
  }
  .floating-tag {
    top:27px;
    right:20px;
    font-size:10px
  }
  .draft-pencil {
    right:38px;
    bottom:30px;
    height:145px
  }
  .control-section {
    padding:65px 0
  }
  .control-layout {
    grid-template-columns:1fr;
    gap:37px
  }
  .control-layout h2 {
    font-size:39px
  }
  .control-icon {
    width:29px;
    height:29px;
    margin-bottom:23px
  }
  .control-copy p {
    font-size:14px;
    margin-top:18px
  }
  .text-link {
    font-size:13px;
    margin-top:22px
  }
  .approval-visual {
    padding:10px 22px 15px 0;
    max-width:410px;
    width:100%
  }
  .approval-route {
    font-size:9px;
    gap:9px;
    margin-bottom:22px
  }
  .route-gate {
    font-size:9px
  }
  .approval-sheet {
    padding:27px 25px
  }
  .approval-sheet h3 {
    font-size:30px
  }
  .sheet-row {
    font-size:12px
  }
  .approval-stamp {
    right:0;
    bottom:0
  }
  .ownership {
    padding:65px 0
  }
  .ownership-heading h2 {
    font-size:32px
  }
  .ownership-heading {
    gap:15px
  }
  .ownership-seal {
    width:56px;
    height:56px;
    border-radius:14px;
    flex:none
  }
  .ownership-seal svg {
    width:30px;
    height:30px
  }
  .ownership-facts {
    grid-template-columns:1fr;
    gap:26px;
    margin-top:35px
  }
  .ownership-facts>div {
    position:relative;
    padding:20px 0 0 34px
  }
  .ownership-facts>div>span {
    position:absolute;
    left:0;
    top:23px
  }
  .ownership-facts h3 {
    margin:0 0 8px;
    font-size:20px
  }
  .ownership-facts p {
    font-size:14px;
    max-width:100%
  }
  .pricing-section {
    padding:65px 0
  }
  .pricing-heading {
    display:block;
    margin-bottom:38px
  }
  .pricing-heading p {
    margin-top:20px
  }
  .prices {
    grid-template-columns:1fr;
    gap:24px
  }
  .price {
    padding:27px 26px 24px
  }
  .price h3 {
    font-size:24px
  }
  .plan-for {
    font-size:13px;
    min-height:0
  }
  .amount {
    font-size:57px;
    margin-top:20px
  }
  .plan-capacity {
    font-size:14px;
    margin:20px 0
  }
  .plan-capacity>span {
    font-size:12px
  }
  .price .btn {
    font-size:13px;
    padding:12px 17px
  }
  .pricing-foot {
    display:block;
    font-size:10px;
    line-height:1.6;
    margin-top:25px
  }
  .pricing-foot>p {
    margin-top:7px
  }
  .faq-section {
    gap:28px;
    padding:65px 0
  }
  .faq summary {
    font-size:14px;
    padding:20px 0;
    gap:12px
  }
  .faq p {
    font-size:13px
  }
  .closing {
    padding:50px 0 65px
  }
  .closing h2 {
    font-size:39px
  }
  .closing-art {
    margin-bottom:20px
  }
  .closing .btn {
    font-size:13px;
    min-height:47px;
    margin-top:25px
  }
  .footer-top {
    padding-bottom:27px
  }
  .back-top {
    font-size:10px
  }
  .foot {
    flex-wrap:wrap;
    font-size:10px;
    gap:18px;
    padding-top:22px
  }
  .foot nav {
    gap:17px;
    order:3;
    flex-basis:100%
  }
  footer {
    padding-top:30px
  }
  .legal {
    padding:45px 0 65px
  }
  .legal h1 {
    font-size:44px
  }
  .legal h2 {
    font-size:23px
  }
  .legal p,.legal li {
    font-size:14px
  }
}
@media(max-width:360px) {
  .wrap {
    width:calc(100% - 32px)
  }
  .nav-end {
    gap:3px
  }
  .brand {
    font-size:17px
  }
  .brand img {
    width:24px;
    height:24px
  }
  .hero-copy>p {
    font-size:15px
  }
  .prompt-line {
    font-size:12px
  }
  .prompt-options button {
    font-size:9px
  }
  .app-content {
    padding:17px 11px
  }
  .app-heading h2 {
    font-size:19px
  }
  .checked {
    font-size:6px
  }
  .next-move span:not(.move-mark) {
    font-size:6px
  }
  .stage-bottom {
    font-size:6px
  }
  .child-a {
    left:calc(50% - 147px)
  }
  .child-b {
    left:calc(50% + 18px)
  }
  .map-lines {
    width:350px
  }
  .article-paper {
    width:245px
  }
  .draft-pencil {
    right:23px
  }
  .ownership-heading h2 {
    font-size:29px
  }
  .closing h2 {
    font-size:35px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .will-reveal {
    opacity:1;
    translate:none
  }
}
html[data-motion=paused] {
  scroll-behavior:auto
}
html[data-motion=paused] *,html[data-motion=paused] *:before,html[data-motion=paused] *:after {
  animation:none!important;
  transition:none!important
}
html[data-motion=paused] .will-reveal {
  opacity:1;
  translate:none
}
.motion-toggle {
  background:none;
  color:var(--muted);
  font-size:11px;
  padding:0;
  display:inline-flex;
  align-items:center;
  gap:6px
}
.motion-toggle:hover {
  color:var(--text)
}
@media(max-width:600px) {
  .motion-toggle {
    font-size:10px
  }
}
/* The demo is a real touch surface, not a scaled screenshot. */
.scene {
  min-height:350px
}
@media(max-width:600px) {
  .stage-top {
    font-size:9px
  }
  .stage-top>span:last-child {
    max-width:112px
  }
  .breadcrumb {
    font-size:8px
  }
  .app-tabs button {
    font-size:11px;
    min-height:38px
  }
  .scene {
    min-height:370px
  }
  .stats>div>span {
    font-size:10px
  }
  .chart-head {
    font-size:10px
  }
  .stats small {
    font-size:8px
  }
  .stats em {
    font-size:10px
  }
  .next-move b {
    font-size:11px
  }
  .next-move span:not(.move-mark) {
    font-size:8px
  }
  .next-move button {
    width:30px;
    height:30px
  }
  .research-intro {
    font-size:10px
  }
  .keyword-row {
    padding:16px 0
  }
  .keyword-row small {
    font-size:8px
  }
  .keyword-row h3 {
    font-size:13px
  }
  .keyword-row div>span {
    font-size:10px
  }
  .keyword-status {
    font-size:8px
  }
  .panel-note {
    font-size:9px
  }
  .change-header {
    font-size:11px
  }
  .code-file {
    font-size:10px
  }
  .code-diff>div {
    font-size:10px
  }
  .change-explanation b {
    font-size:12px
  }
  .change-explanation p {
    font-size:11px
  }
  .review-bottom {
    align-items:center
  }
  .review-bottom>span {
    font-size:9px
  }
  .review-bottom .btn {
    font-size:10px;
    min-height:36px
  }
  .stage-bottom {
    font-size:8px
  }
  .app-heading .checked {
    font-size:8px
  }
}
@media(max-width:360px) {
  .app-heading h2 {
    font-size:19px
  }
  .checked {
    max-width:40px
  }
  .app-heading .checked {
    font-size:7px
  }
  .next-move b {
    font-size:10px
  }
  .next-move span:not(.move-mark) {
    font-size:7px
  }
  .stage-bottom {
    font-size:7px
  }
  .stats>div>span {
    font-size:9px
  }
}

/* Shared refinements: rounded controls, sharper hierarchy, quieter surfaces. */
:root { --font-sans: 'Manrope', sans-serif; --font-editorial: 'Instrument Serif', Georgia, serif; }
body { font-family: var(--font-sans); font-weight:400; }
h1,h2,h3,h4 { font-weight:500; }
h1 { font-weight:500; letter-spacing:-.065em; line-height:1.07; }
h1 em, .visibility-heading h2 em { font-family:var(--font-editorial); font-weight:400; letter-spacing:-.045em; }
h1 em { font-size:1.18em; line-height:.8; margin-left:.055em; }
h2 { font-weight:500; letter-spacing:-.055em; }
.brand { font-weight:650; letter-spacing:-1px; font-size:20px; }
.brand > span { font-size:15px; letter-spacing:-.4px; padding-left:3px; }
.desktop-nav { font-size:12px; gap:29px; }
.btn { border-radius:999px; font-weight:600; letter-spacing:-.3px; gap:26px; padding-inline:23px; }
.btn.small { border-radius:999px; padding-inline:17px; }
.btn svg { width:18px; height:18px; }
.btn.line:hover { box-shadow:0 0 0 3px var(--line); }
.hero-copy > p { font-size:18px; line-height:1.65; letter-spacing:-.5px; }
.availability { font-size:11px; }
.prompt-demo { border-radius:18px; border-color:var(--line); box-shadow:0 4px 0 var(--panel),0 8px 28px #22222205; }
.prompt-line { font-size:15px; font-weight:500; }
.prompt-line > .icon { width:18px; height:18px; }
.provider-picker { border-radius:99px; padding:4px; }
.provider-picker button { border-radius:99px; padding-inline:12px; }
.prompt-options button { font-size:11px; border-radius:7px; }
.prompt-options button.active { border-color:var(--text); }
.app-window { border-radius:12px; }
.product-stage { border-radius:22px; }
.product-stage .app-heading h2 { font-weight:500; }
.app-tabs button { font-weight:500; }
.app-tabs button[aria-selected=true]:after { height:3px; border-radius:2px 2px 0 0; }
.price { border-radius:18px; transition:border-color .25s,box-shadow .25s; }
.price.recommended { box-shadow:0 0 0 3px var(--text); }
.price.featured { background:var(--surface); }
.price .btn { border-radius:99px; }
.amount { font-weight:500; letter-spacing:-3.5px; }
.story-copy h3 { letter-spacing:-1.35px; line-height:1.18; }
.story-copy p { line-height:1.8; font-size:14px; }
.story-visual { border-radius:16px; }
.story-number,.breadcrumb,.sheet-label,.sidebar-label,.plan-label { letter-spacing:1.6px; }
.text-link { transition:gap .2s; font-weight:500; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* A dark observatory for the what-if experiment. No invented customer results. */
.visibility-section { padding:105px 0 15px; }
.visibility-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:38px; }
.visibility-heading h2 { font-size:clamp(44px,4.6vw,66px); line-height:.99; letter-spacing:-.06em; }
.visibility-heading h2 em { font-size:1.16em; line-height:.85; }
.visibility-intro { padding-bottom:4px; }
.visibility-intro .eyebrow { font-size:9px; letter-spacing:1.7px; color:var(--muted); }
.visibility-intro p { font-size:15px; line-height:1.7; color:var(--muted); margin-top:12px; }
.growth-lab { color:#edf2e5; background:#20281f; border:1px solid #4f5b4544; border-radius:23px; padding:30px 45px 25px; position:relative; overflow:hidden; isolation:isolate; }
.growth-lab:before { content:''; position:absolute; width:460px; height:460px; border-radius:50%; border:1px solid #e4f7bf0a; right:-190px; top:-230px; box-shadow:0 0 0 36px #e4f7bf04,0 0 0 72px #e4f7bf03,0 0 0 108px #e4f7bf02; z-index:-1; }
.growth-topline { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:25px; border-bottom:1px solid #d7f4ac21; }
.growth-live { font-size:9px; letter-spacing:1.8px; display:flex; align-items:center; gap:10px; }
.growth-live > span { width:5px; height:5px; border-radius:50%; background:#d7f4ac; box-shadow:0 0 0 4px #d7f4ac0c; }
.growth-example { font-size:10px; color:#bac5b2; border:1px solid #d7f4ac33; border-radius:99px; padding:5px 10px; white-space:nowrap; }
.growth-main { display:grid; grid-template-columns:.95fr 1.2fr; gap:45px; align-items:center; padding:38px 0 20px; }
.growth-measure { padding-bottom:16px; }
.growth-number { display:flex; align-items:baseline; color:#d7f4ac; font-weight:400; letter-spacing:-.095em; line-height:1; font-size:clamp(110px,12.3vw,176px); font-variant-numeric:tabular-nums; font-feature-settings:'tnum'; }
.growth-plus { font-size:.34em; align-self:flex-start; padding-top:.3em; padding-right:.1em; font-weight:300; letter-spacing:-.06em; }
#growth-value { min-width:0; text-align:left; }
.growth-percent { font-size:.35em; letter-spacing:-.065em; padding-left:.18em; }
.growth-label { display:block; font-size:12px; color:#bac5b2; margin-top:15px; letter-spacing:.05em; }
.growth-comparison { display:flex; align-items:center; gap:24px; margin-top:31px; }
.growth-comparison > div { display:grid; gap:6px; }
.growth-comparison span { color:#b7c0b0; font-size:9px; }
.growth-comparison b { color:#edf2e5; font-size:23px; font-weight:400; letter-spacing:-.8px; font-variant-numeric:tabular-nums; }
.growth-comparison .icon { width:19px; height:19px; color:#79886f; margin-top:15px; }
.growth-plot { min-width:0; position:relative; }
#growth-chart { display:block; width:100%; height:auto; overflow:visible; touch-action:pan-y; }
.growth-grid { stroke:#edf2e51a; stroke-width:1; stroke-dasharray:2 5; }
.growth-area { fill:url(#growth-wash); stroke:none; }
.growth-line { stroke:url(#growth-stroke); stroke-width:3; vector-effect:non-scaling-stroke; filter:drop-shadow(0 2px 5px #d7f4ac24); }
.endpoint-halo { fill:#d7f4ac0e; stroke:#d7f4ac55; stroke-width:1; }
.endpoint-dot { fill:#d7f4ac; stroke:#20281f; stroke-width:3; }
.endpoint-cross { stroke:#d7f4ac66; stroke-width:.8; }
.growth-axis { fill:#a5b69a; font-family:var(--font-sans); font-size:9px; stroke:none; letter-spacing:1.2px; }
#growth-cursor path { stroke:#d7f4ac55; stroke-width:1; stroke-dasharray:3 4; }
#growth-cursor circle { fill:#d7f4ac; stroke:#20281f; stroke-width:2; }
#growth-cursor rect { fill:#d7f4ac; stroke:none; }
#growth-cursor text { fill:#20281f; stroke:none; font:500 12px var(--font-sans); }
.plot-hint { display:flex; justify-content:flex-end; align-items:center; gap:9px; font-size:8px; letter-spacing:1.2px; color:#a5b69a; margin-top:9px; }
.plot-hint .icon { width:13px; height:13px; rotate:-35deg; }
.growth-controls { display:flex; justify-content:space-between; align-items:center; gap:15px; border-top:1px solid #d7f4ac21; padding-top:23px; margin-top:12px; }
.growth-scenarios { display:flex; flex-wrap:wrap; gap:6px; }
.growth-scenarios button { border:1px solid #d7f4ac33; border-radius:99px; background:transparent; color:#bac5b2; padding:9px 15px; font-size:11px; transition:background .2s,color .2s,border-color .2s; }
.growth-scenarios button:hover { color:#edf2e5; border-color:#d7f4ac88; }
.growth-scenarios button.selected { color:#20281f; background:#d7f4ac; border-color:#d7f4ac; }
.growth-replay { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:transparent; color:#d7f4ac; font-size:10px; padding:9px 0 9px 10px; }
.growth-replay svg { width:15px; height:15px; transition:rotate .35s; }
.growth-replay:hover svg { rotate:-70deg; }
.growth-timeline { display:flex; align-items:center; gap:13px; margin-top:24px; }
.growth-timeline > span { color:#a5b69a; font-size:9px; }
#growth-progress { width:100%; margin:0; appearance:none; -webkit-appearance:none; height:26px; background:transparent; cursor:ew-resize; --range-progress:100%; }
#growth-progress::-webkit-slider-runnable-track { height:2px; background:linear-gradient(to right,#d7f4ac var(--range-progress),#67785a66 var(--range-progress)); border-radius:2px; }
#growth-progress::-moz-range-track { height:2px; background:#67785a66; }
#growth-progress::-moz-range-progress { background:#d7f4ac; height:2px; }
#growth-progress::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:16px; height:16px; background:#20281f; border:3px solid #d7f4ac; border-radius:50%; margin-top:-7px; box-shadow:0 0 0 5px #d7f4ac09; }
#growth-progress::-moz-range-thumb { width:11px; height:11px; background:#20281f; border:3px solid #d7f4ac; border-radius:50%; }
#growth-progress:focus-visible { outline:2px solid #d7f4ac; outline-offset:7px; border-radius:2px; }
.growth-disclaimer { font-size:10px; color:#aebda3; margin-top:15px; line-height:1.7; }

/* Assets that respond to curiosity, with full keyboard alternatives. */
.map-node { text-align:left; font-family:var(--font-sans); color:var(--text); cursor:pointer; transition:box-shadow .2s,border-color .2s; }
.map-node:hover { box-shadow:0 7px 20px #22301517; border-color:var(--green); }
.map-node.selected { outline:2px solid var(--green); outline-offset:4px; }
.map-node-copy { line-height:1.4; }
.map-node-copy small { display:block; font-size:9px; color:var(--muted); margin-top:3px; }
.map-caption { width:100%; padding-inline:15px; justify-content:center; min-height:20px; }
.map-caption > span:last-child { width:auto; height:auto; border-radius:0; background:none; }
.map-caption > span:first-child { flex:none; }
.article-paper { transition:rotate .35s,translate .35s; }
.draft-visual:hover .article-paper,.draft-visual:focus-within .article-paper { rotate:3deg; translate:0 -4px; }
.draft-visual[data-idea='1'] .paper-image { background:var(--peach); }
.draft-visual[data-idea='2'] .paper-image { background:var(--lavender); }
.article-paper h4 { font:italic 34px/.95 var(--font-editorial); letter-spacing:-.9px; }
.idea-refresh { position:absolute; bottom:16px; left:17px; z-index:3; display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:99px; padding:8px 12px; font-size:10px; box-shadow:0 3px 9px #302a4510; }
.idea-refresh .icon { width:13px; height:13px; color:var(--accent); }
.idea-refresh > span { font-size:15px; transition:rotate .35s; }
.idea-refresh:hover > span { rotate:90deg; }
.ownership-seal { transition:transform .4s,background .4s; }
.ownership-seal:hover { transform:rotate(-8deg) scale(1.06); background:var(--peach); }
.plan-selector { display:flex; align-items:center; gap:10px; margin:-12px 0 31px; font-size:13px; }
.site-stepper { display:flex; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:99px; overflow:hidden; }
.site-stepper button { background:none; width:32px; height:35px; font-size:16px; }
.site-stepper button:hover { background:var(--panel); }
.site-stepper input { width:47px; height:35px; background:none; color:var(--text); border:0; text-align:center; font-size:12px; font-weight:600; padding:0; appearance:textfield; -moz-appearance:textfield; }
.site-stepper input::-webkit-inner-spin-button,.site-stepper input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.site-stepper input:focus-visible { outline:2px solid var(--green); outline-offset:-3px; border-radius:6px; }
.plan-selector > output { margin-left:8px; font-size:11px; color:var(--green); }
@media(max-width:1100px) {
  .growth-main { gap:25px; }
  .growth-lab { padding-inline:32px; }
  .growth-number { font-size:136px; }
  .growth-comparison { gap:20px; }
}
@media(max-width:850px) {
  .visibility-section { padding-top:80px; }
  .growth-main { grid-template-columns:1fr; gap:8px; }
  .growth-number { font-size:158px; justify-content:center; }
  .growth-label { text-align:center; }
  .growth-comparison { justify-content:center; margin-top:23px; }
  .growth-measure { padding-bottom:0; }
  .growth-plot { max-width:620px; width:100%; margin-inline:auto; }
  .growth-lab { padding:27px 32px 24px; }
  .growth-main { padding:25px 0 15px; }
  .growth-heading h2 { font-size:54px; }
  .growth-controls { padding-top:19px; }
  .growth-scenarios button { font-size:10px; padding:8px 12px; }
  .map-node-copy small { font-size:8px; }
  .article-paper h4 { font-size:31px; }
  .story-copy h3 { font-size:27px; }
}
@media(max-width:600px) {
  h1 { font-size:clamp(40px,10.1vw,59px); letter-spacing:-.065em; line-height:1.1; }
  h1 em { font-size:1.23em; }
  .brand { font-size:17px; gap:6px; }
  .brand > span { font-size:12px; padding-left:0; }
  .hero-copy > p { font-size:15px; line-height:1.7; letter-spacing:-.4px; }
  .availability { font-size:9px; }
  .prompt-line { font-size:12px; }
  .provider-picker button { padding-inline:9px; }
  .prompt-options button { font-size:9px; }
  .product-stage { border-radius:15px; }
  .story-copy h3 { font-size:29px; }
  .story-copy p { font-size:13px; }
  .visibility-section { padding:65px 0 0; }
  .visibility-heading { gap:20px; margin-bottom:27px; }
  .visibility-heading h2 { font-size:44px; }
  .visibility-intro { max-width:125px; }
  .visibility-intro .eyebrow { font-size:7px; letter-spacing:1.1px; }
  .visibility-intro p { font-size:11px; margin-top:8px; }
  .growth-lab { padding:21px 22px 22px; border-radius:17px; }
  .growth-topline { gap:12px; padding-bottom:20px; }
  .growth-live { font-size:7px; letter-spacing:1px; gap:7px; max-width:150px; }
  .growth-example { font-size:8px; padding:4px 7px; }
  .growth-main { padding:25px 0 13px; gap:5px; }
  .growth-number { font-size:clamp(84px,27vw,132px); letter-spacing:-.095em; }
  .growth-label { font-size:10px; margin-top:12px; }
  .growth-comparison { margin-top:22px; gap:25px; }
  .growth-comparison b { font-size:21px; }
  .growth-comparison span { font-size:8px; }
  .growth-comparison .icon { width:17px; }
  .growth-plot { margin-top:8px; }
  .growth-axis { font-size:12px; }
  .growth-line { stroke-width:2; }
  .plot-hint { font-size:7px; margin-top:6px; }
  .growth-controls { flex-wrap:wrap; gap:12px 8px; padding-top:19px; margin-top:13px; }
  .growth-scenarios { gap:5px; flex-basis:100%; }
  .growth-scenarios button { flex:1; padding:8px 7px; font-size:9px; white-space:nowrap; }
  .growth-replay { margin-left:auto; font-size:9px; padding:4px 0; }
  .growth-replay svg { width:13px; height:13px; }
  .growth-timeline { margin-top:13px; gap:10px; }
  .growth-timeline > span { font-size:8px; }
  .growth-disclaimer { font-size:9px; line-height:1.8; margin-top:16px; }
  .growth-example { line-height:1.3; white-space:normal; max-width:83px; text-align:center; }
  .map-caption { font-size:8px; }
  .map-node-copy small { font-size:9px; }
  .article-paper h4 { font-size:33px; }
  .idea-refresh { font-size:9px; padding:7px 11px; }
  .plan-selector { gap:8px; flex-wrap:wrap; margin:0 0 31px; font-size:12px; }
  .plan-selector > output { font-size:10px; margin-left:3px; }
  .site-stepper input { width:36px; font-size:11px; }
  .site-stepper button { width:28px; }
}
@media(max-width:360px) {
  .growth-lab { padding-inline:17px; }
  .growth-number { font-size:86px; }
  .growth-live { font-size:6px; }
  .growth-example { font-size:7px; }
  .growth-scenarios { gap:4px; }
  .growth-scenarios button { font-size:8px; padding-inline:5px; }
  .visibility-heading h2 { font-size:39px; }
  .visibility-intro { max-width:103px; }
  .visibility-intro p { font-size:10px; }
  .plan-selector > output { flex-basis:100%; margin-left:0; }
  .brand { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after { animation:none!important; transition:none!important; }
  .will-reveal { opacity:1; translate:none; }
}

/* FIELD NOTES — open paper, loose ink, marks that follow the reader. */
@font-face { font-family:'Caveat'; src:url('/fonts/caveat-latin.woff2') format('woff2'); font-style:normal; font-weight:400 700; font-display:swap; }
:root { --font-note:'Caveat',cursive; --paper:#f5f2e9; --bg:var(--paper); --surface:#faf7ee; --line:#b9b4a566; --text:#302e28; --muted:#676255; --accent:#bb593e; --accent-hover:#a84b34; --on-accent:#fbf7eb; --mint:#dde3ce; --lavender:#e6deeb; --peach:#eed7bd; }
:root[data-theme=dark] { --paper:#1e211b; --bg:var(--paper); --surface:#262a22; --text:#efede1; --muted:#b3b1a1; --line:#c4c1ad44; --accent:#eead8a; --accent-hover:#f5bd9f; --on-accent:#25281f; --mint:#3d4931; --peach:#50432f; --lavender:#413b4c; }
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#1e211b;--bg:var(--paper);--surface:#262a22;--text:#efede1;--muted:#b3b1a1;--line:#c4c1ad44;--accent:#eead8a;--accent-hover:#f5bd9f;--on-accent:#25281f;--mint:#3d4931;--peach:#50432f;--lavender:#413b4c;}}
body { background:var(--paper); }
body:before { content:''; position:fixed; inset:0; pointer-events:none; z-index:20; opacity:.12; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23746750' filter='url(%23n)' opacity='.2' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.nav { border-bottom:1px solid var(--line); }
.btn,.btn.small { border-radius:0; position:relative; z-index:0; background:none; box-shadow:none; border:0; color:var(--on-accent); }
.btn:before { content:''; position:absolute; inset:0; z-index:-1; background:var(--text); clip-path:polygon(1% 5%,98% 1%,100% 91%,3% 100%,0 18%); transition:background .2s; }
.btn:hover { background:none; box-shadow:none; }
.btn:hover:before { background:var(--accent); }
.btn.line { color:var(--text); border:0; box-shadow:none; }
.btn.line:before { background:none; clip-path:none; border-bottom:1.5px solid var(--text); border-top:1px solid var(--line); transform:rotate(-1deg); }
.btn.line:hover { background:none; box-shadow:none; }
.btn.line:hover:before { background:var(--peach); }
.hero { padding-top:56px; }
h1 { letter-spacing:-.06em; }
h1 em { font-size:1.19em; }
.hero-copy > p { font-size:17px; }
.prompt-demo { background:transparent; border:0; border-radius:0; box-shadow:none; padding:22px 16px 18px; position:relative; }
.prompt-demo:before,.prompt-demo:after { content:''; position:absolute; inset:0; pointer-events:none; border:1.2px solid var(--text); border-radius:2% 1% 3% 1% / 5% 2% 5% 3%; transform:rotate(-.65deg); }
.prompt-demo:after { inset:3px -2px -2px 3px; border-width:.55px; opacity:.32; transform:rotate(.35deg); }
.provider-picker,.provider-picker button,.provider-picker button.selected { background:transparent; box-shadow:none; }
.provider-picker button.selected { text-decoration:underline wavy; text-underline-offset:5px; text-decoration-color:var(--accent); }
.prompt-options button,.prompt-options button.active,.prompt-options button:hover { background:none; border:0; border-radius:0; }
.prompt-options button.active { text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1.4px; }
.availability { margin-bottom:37px; }
.orbit { width:355px; animation:none!important; color:var(--text); }
.orbit-left { left:calc(50% - 785px); bottom:-8px; transform:rotate(-9deg); }
.orbit-right { right:calc(50% - 785px); bottom:4px; transform:rotate(7deg); }
.ink-illustration { width:100%; height:auto; display:block; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.ink-wash { opacity:.7; }
.ink-speck { stroke-width:1; opacity:.7; }
.sketch-note { position:absolute; font:22px/1 var(--font-note); color:var(--muted); transform:rotate(-7deg); }
.orbit-left .sketch-note { bottom:23px; left:80px; }
.orbit-right .sketch-note { top:43px; right:28px; transform:rotate(9deg); }
.product-stage { background:none; background-image:none; border:0; border-radius:0; padding:28px 25px 15px; overflow:visible; }
.stage-top,.stage-bottom { font-family:var(--font-note); font-size:17px; color:var(--muted); letter-spacing:0; }
.stage-top { margin-bottom:18px; }
.stage-top > span:first-child { color:var(--text); }
.stage-top i { width:5px; height:5px; background:var(--accent); }
.app-window { border:1.2px solid var(--text); border-radius:3px 6px 2px 4px; box-shadow:4px 5px 0 var(--line); transform-origin:center bottom; }
.window-dots i { background:none; border:1px solid var(--muted); }
.app-sidebar { background:transparent; }
.app-window,.app-content { background:var(--surface); }
.sidebar-chat,.site-item.selected { background:none; box-shadow:none; border-color:var(--line); }
.sidebar-chat { border-style:dashed; }
.site-item.selected { outline:1px solid var(--line); }
.site-favicon { border-radius:3px 7px 4px 2px; border:1px solid var(--line); }
.connections-strip { border:0; padding-top:34px; }
.connections-strip > span { font-family:var(--font-note); font-size:18px; }
.visibility-section { padding-top:82px; }
.visibility-heading { align-items:center; }
.visibility-heading h2 { font-size:clamp(44px,4.6vw,66px); }
.visibility-intro p { font:24px/1.1 var(--font-note); color:var(--muted); transform:rotate(-5deg); }
.growth-lab { color:var(--text); background:transparent; border:0; border-radius:0; padding:25px 15px 15px; overflow:visible; }
.growth-lab:before { display:none; }
.growth-topline { border-bottom:1px dashed var(--line); }
.growth-live { color:var(--muted); font-size:9px; }
.growth-live > span { background:var(--text); box-shadow:none; }
.growth-example { color:var(--muted); border:0; border-radius:0; font:22px/1 var(--font-note); padding:0; transform:rotate(2deg); }
.growth-main { gap:60px; padding:25px 0; }
.growth-number { color:var(--text); font-family:var(--font-note); font-size:210px; font-weight:500; letter-spacing:-.07em; position:relative; width:fit-content; }
.growth-number:after { content:''; position:absolute; bottom:12%; left:7%; width:88%; height:20%; background:var(--peach); clip-path:polygon(1% 16%,95% 2%,100% 80%,3% 96%); rotate:-3deg; z-index:-1; }
.growth-plus { font-size:.32em; padding-top:.45em; }
.growth-percent { font-size:.42em; }
.growth-label { color:var(--muted); letter-spacing:0; font-size:12px; margin-top:4px; }
.growth-comparison { margin-top:27px; }
.growth-comparison b { color:var(--text); font-size:23px; }
.growth-comparison span { color:var(--muted); font-family:var(--font-note); font-size:19px; }
.growth-comparison .icon { color:var(--muted); }
.growth-grid { stroke:var(--line); stroke-dasharray:2 7; stroke-width:.7; }
.growth-area { fill:var(--mint); opacity:.25; }
.growth-line { stroke:var(--text); stroke-width:2; filter:none; }
.endpoint-halo { stroke:var(--text); stroke-width:.7; fill:none; }
.endpoint-dot { fill:var(--text); stroke:var(--paper); stroke-width:2; }
.endpoint-cross { stroke:var(--text); }
.growth-axis { fill:var(--muted); font-family:var(--font-note); font-size:18px; letter-spacing:.5px; }
#growth-cursor path { stroke:var(--muted); }
#growth-cursor circle { fill:var(--accent); stroke:var(--paper); }
#growth-cursor rect { fill:var(--text); }
#growth-cursor text { fill:var(--paper); }
.plot-hint { color:var(--muted); font-family:var(--font-note); font-size:16px; letter-spacing:0; }
.growth-controls { border-top:1px dashed var(--line); padding-top:15px; }
.growth-scenarios button { color:var(--muted); border:0; border-radius:0; font-family:var(--font-note); font-size:22px; background:none; padding:7px 14px; position:relative; }
.growth-scenarios button:hover { color:var(--text); }
.growth-scenarios button.selected { background:none; color:var(--text); }
.growth-scenarios button.selected:before { content:''; position:absolute; inset:1px 0; border:1px solid var(--text); border-radius:45% 51% 48% 52% / 51% 42% 57% 44%; transform:rotate(-4deg); pointer-events:none; }
.growth-replay { color:var(--text); font:20px var(--font-note); }
.growth-timeline > span { color:var(--muted); font:19px var(--font-note); }
.growth-disclaimer { color:var(--muted); font-size:10px; }
#growth-progress::-webkit-slider-runnable-track { background:linear-gradient(to right,var(--text) var(--range-progress),var(--line) var(--range-progress)); height:1.5px; rotate:-.2deg; }
#growth-progress::-moz-range-track { background:var(--line); }
#growth-progress::-moz-range-progress { background:var(--text); }
#growth-progress::-webkit-slider-thumb { background:var(--paper); border:2px solid var(--text); border-radius:43% 51% 42% 52%; box-shadow:none; }
#growth-progress::-moz-range-thumb { background:var(--paper); border:2px solid var(--text); border-radius:43% 51% 42% 52%; }
#growth-progress:focus-visible { outline-color:var(--accent); }
.how-section { padding-top:95px; }
.section-heading { margin-bottom:50px; }
.story-visual { border:0; border-radius:0; background:transparent; overflow:visible; }
.map-grid { opacity:.06; background-size:22px 22px; }
.map-visual:before { content:''; position:absolute; inset:10% 5%; background:var(--mint); opacity:.45; clip-path:polygon(7% 6%,95% 0,100% 86%,3% 100%,0 12%); transform:rotate(-2deg); }
.map-lines { color:var(--text); stroke-width:1.2; stroke-dasharray:none; }
.map-node,.map-node:hover { background:var(--paper); border:0; border-radius:0; box-shadow:none; }
.map-node:before,.map-node:after { content:''; position:absolute; inset:0; border:1px solid var(--text); border-radius:3% 2% 4% 1% / 5% 2% 5% 3%; transform:rotate(-1deg); pointer-events:none; }
.map-node:after { inset:2px -2px -2px 2px; opacity:.27; border-width:.6px; transform:rotate(1deg); }
.map-node.selected { outline:0; }
.map-node.selected:before { border-width:1.7px; border-color:var(--accent); }
.map-node.selected:after { border-color:var(--accent); }
.map-node:hover:before { border-color:var(--accent); }
.map-caption { color:var(--muted); font:19px var(--font-note); bottom:8px; }
.map-caption > span:first-child { display:none; }
.map-caption > span:last-child { background:none; }
.story-number { font:19px/1.2 var(--font-note); letter-spacing:.5px; color:var(--muted); }
.story-copy { padding-top:27px; }
.draft-visual { background:none; }
.article-paper { background:var(--surface); box-shadow:none; position:relative; border:1px solid var(--text); border-radius:2px 4px 1px 2px; width:290px; }
.article-paper:before { content:''; position:absolute; inset:4px -4px -4px 3px; border:1px solid var(--line); z-index:-1; rotate:1deg; }
.article-paper:after { content:''; position:absolute; left:18px; top:16px; bottom:10px; border-left:1px solid var(--line); }
.article-paper h4 { font-size:35px; line-height:1.02; }
.paper-image { height:112px; padding:0; background:none!important; overflow:visible; color:var(--text); }
.paper-image > .ink-illustration { height:112px; }
.paper-lines i { height:1px; background:var(--muted); opacity:.6; transform:rotate(-.4deg); }
.paper-lines i:nth-child(2) { transform:rotate(.6deg); }
.paper-meta > span { background:none; border-bottom:1px solid var(--line); border-radius:0; }
.floating-tag { background:var(--paper); border:0; border-bottom:1px solid var(--text); border-radius:0; box-shadow:none; font:22px/1 var(--font-note); right:9px; top:25px; padding:5px 8px; animation:none!important; }
.draft-pencil { background:none; border:1px solid var(--text); border-top:10px double var(--text); border-radius:0; width:11px; right:28px; bottom:39px; }
.draft-pencil:after { border-top-color:var(--text); border-left-width:5px; border-right-width:5px; }
.idea-refresh { border:0; border-bottom:1px solid var(--text); border-radius:0; background:var(--paper); box-shadow:none; font:20px var(--font-note); padding:3px 8px; left:10px; bottom:5px; }
.idea-refresh .icon { width:15px; height:15px; }
.idea-refresh > span { font-size:20px; }
.control-section { background:none; border:0; padding:100px 0; }
.control-layout { position:relative; }
.control-layout:before { content:''; position:absolute; inset:0 -20px; pointer-events:none; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); transform:rotate(-.4deg); }
.control-icon { width:39px; height:39px; stroke-width:1; transform:rotate(-8deg); }
.control-copy { padding:35px 0; }
.approval-route { font:19px var(--font-note); }
.route-gate { font:20px var(--font-note); }
.route-line { height:0; border-top:1px dashed var(--muted); background:none; }
.approval-sheet { background:transparent; border:0; border-radius:0; box-shadow:none; position:relative; }
.approval-sheet:before,.approval-sheet:after { content:''; position:absolute; inset:0; border:1px solid var(--text); border-radius:1px 5px 2px 4px; z-index:-1; transform:rotate(1deg); }
.approval-sheet:after { inset:5px -4px -3px 4px; border-color:var(--line); transform:rotate(-1deg); }
.sheet-label { font:18px var(--font-note); letter-spacing:.5px; }
.sheet-row .icon { color:var(--text); }
.approval-stamp { background:var(--paper); outline:0; box-shadow:none; border:2px double var(--text); border-radius:44% 53% 46% 52%; font:19px/.9 var(--font-note); width:90px; height:83px; transform:rotate(11deg); }
.ownership { position:relative; padding-top:85px; padding-bottom:100px; }
.ownership-heading { position:relative; }
.ownership-seal,.ownership-seal:hover { background:none; transform:none; border-radius:0; width:230px; height:190px; color:var(--text); }
.ownership-seal .ink-illustration { width:230px; height:auto; transform:none; stroke-width:1.5; }
.ownership-facts { gap:50px; }
.ownership-facts > div { border:0; position:relative; padding-top:16px; }
.ownership-facts > div:before { content:''; position:absolute; top:0; left:0; width:100%; height:2px; border-top:1px solid var(--text); border-bottom:1px solid var(--line); transform:rotate(-.6deg); }
.ownership-facts > div > span { font:20px var(--font-note); }
.pricing-section { background:none; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); padding:95px 0; }
.prices { gap:45px; }
.price,.price.featured,.price.recommended { background:none; border:0; border-radius:0; box-shadow:none; padding:24px 0 0; }
.price h3 { width:fit-content; position:relative; font-size:25px; }
.price.recommended h3:before { content:''; position:absolute; inset:-7px -15px; border:1.2px solid var(--accent); border-radius:47% 53% 48% 45%; transform:rotate(-7deg); }
.plan-label { background:none; color:var(--muted); font:21px var(--font-note); letter-spacing:0; top:-12px; left:auto; right:0; transform:rotate(8deg); padding:0; }
.plan-for { padding-top:3px; }
.amount { font-family:var(--font-note); font-weight:500; font-size:78px; letter-spacing:-3px; }
.amount > span { font-family:var(--font-note); font-size:21px; }
.plan-capacity { border:0; border-block:1px dashed var(--line); }
.price .btn { border-radius:0; }
.price .btn.line { color:var(--text); }
.site-stepper { background:none; border:0; border-bottom:1px solid var(--text); border-radius:0; }
.site-stepper button:hover { background:var(--peach); }
.faq details,.faq details:first-child { border-color:var(--line); }
.faq summary > span { font-family:var(--font-note); font-size:32px; color:var(--text); }
.closing { border:0; padding-top:45px; }
.closing-art { width:280px; height:170px; overflow:visible; margin-bottom:25px; color:var(--text); }
.closing-art .ink-illustration { width:280px; height:auto; transform:none; }
footer { border-top:1px dashed var(--line); }
.reveal,.will-reveal,.revealed { opacity:1!important; translate:none!important; transition:none!important; }
.orbit,.child-a,.child-b,.floating-tag { animation:none!important; }
.draft-visual:hover .article-paper,.draft-visual:focus-within .article-paper { rotate:none; translate:none; }
/* Each story has a distinct scroll movement. Content stays visible and readable. */
.sketch-motion [data-scroll-story] { --draw-progress:1; --story-drift:0; }
.sketch-motion .ink-line path { stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--draw-progress)); }
.sketch-motion .orbit-left { translate:calc(var(--story-drift) * -18px) calc(var(--story-drift) * 14px); rotate:calc(var(--story-drift) * -3deg); }
.sketch-motion .orbit-right { translate:calc(var(--story-drift) * 18px) calc(var(--story-drift) * -12px); rotate:calc(var(--story-drift) * 4deg); }
.sketch-motion [data-scroll-story=product] .app-window { transform:perspective(1400px) rotateX(calc((1 - var(--draw-progress)) * 7deg)); }
.sketch-motion .map-lines path { stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--draw-progress)); }
.sketch-motion .map-node.child-a { translate:0 calc((1 - var(--draw-progress)) * 28px); }
.sketch-motion .map-node.child-b { translate:0 calc((1 - var(--draw-progress)) * 48px); }
.sketch-motion .article-paper { transform:translateY(calc((1 - var(--draw-progress)) * 42px)) rotate(calc(-8deg + var(--draw-progress) * 4deg)); }
.sketch-motion .draft-pencil { translate:calc((1 - var(--draw-progress)) * 22px) calc((1 - var(--draw-progress)) * -45px); }
.sketch-motion .approval-sheet { transform:rotate(calc(4deg - var(--draw-progress) * 5deg)); }
.sketch-motion .approval-stamp { scale:calc(.82 + var(--draw-progress) * .18); }
.sketch-motion .ownership-seal { rotate:calc((1 - var(--draw-progress)) * -8deg); }
.sketch-motion .price:nth-child(2) { translate:0 calc((1 - var(--draw-progress)) * 23px); }
.sketch-motion .price:nth-child(3) { translate:0 calc((1 - var(--draw-progress)) * 44px); }
.sketch-motion .closing-art { translate:calc((var(--draw-progress) - .5) * 105px) calc((1 - var(--draw-progress)) * 15px); rotate:calc((1 - var(--draw-progress)) * -9deg); }
@media(max-width:1100px){.orbit{width:280px}.orbit-left{left:-112px}.orbit-right{right:-112px}.growth-number{font-size:175px}.growth-main{gap:35px}.prices{gap:30px}.growth-example{font-size:19px}.growth-scenarios button{font-size:20px}.map-caption{font-size:17px}}
@media(max-width:850px){.orbit-left{left:-140px}.orbit-right{right:-140px}.growth-measure{display:flex;flex-direction:column;align-items:center}.growth-number{font-size:190px;justify-content:center}.growth-main{gap:17px}.growth-example{font-size:19px}.growth-plot{max-width:650px}.ownership-seal,.ownership-seal .ink-illustration{width:170px}.ownership-seal{height:150px}.story-copy h3{font-size:28px}.prices{gap:24px}.plan-label{font-size:17px}.price .amount{font-size:64px}.approval-route,.route-gate{font-size:16px}}
@media(max-width:600px){
.hero{padding-top:47px}.hero-copy>p{font-size:15px}.orbit{width:215px;opacity:.75}.orbit-left{left:-157px;bottom:-14px}.orbit-right{right:-160px;bottom:25px}.sketch-note{display:none}.prompt-demo{padding:17px 12px 14px}.prompt-options button{font-size:9px}.product-stage{padding:20px 1px 15px}.app-window{border-radius:2px;box-shadow:2px 3px 0 var(--line)}.stage-top,.stage-bottom{font-size:12px}.stage-top>span:last-child{max-width:130px}.connections-strip{padding-top:25px}.connections-strip>span{font-size:17px}.visibility-section{padding-top:57px}.visibility-heading h2{font-size:43px}.visibility-intro p{font-size:18px;line-height:1.1}.growth-lab{padding:13px 1px 12px}.growth-topline{gap:14px;padding-bottom:15px}.growth-live{font-size:7px;letter-spacing:.7px;max-width:145px}.growth-example{font-size:16px;white-space:normal;max-width:132px;text-align:right}.growth-main{padding:20px 0 18px;gap:20px}.growth-number{font-size:145px}.growth-label{font-size:10px;margin-top:-1px}.growth-comparison{margin-top:21px;gap:28px}.growth-comparison b{font-size:22px}.growth-comparison span{font-size:18px}.growth-axis{font-size:20px}.plot-hint{font-size:15px;margin-top:8px}.growth-controls{padding-top:13px;margin-top:10px;gap:7px}.growth-scenarios{flex-basis:100%;gap:3px}.growth-scenarios button{font-size:19px;padding:7px 8px}.growth-replay{font-size:18px}.growth-timeline{margin-top:12px}.growth-timeline>span{font-size:17px}.growth-disclaimer{font-size:9px}.how-section{padding-top:65px}.story-visual{height:335px}.story-copy{padding-top:28px}.story-number{font-size:18px}.map-node.child-a{left:16px}.map-node.child-b{left:auto;right:16px}.map-caption{font-size:16px;padding-inline:6px;bottom:2px}.floating-tag{font-size:20px;right:0;top:22px}.article-paper{width:270px}.article-paper h4{font-size:33px}.idea-refresh{font-size:18px;left:0;bottom:0}.draft-pencil{right:17px;bottom:32px;height:145px}.control-section{padding:70px 0}.control-layout:before{inset:0}.control-copy{padding:25px 0 0}.control-layout{gap:30px}.approval-sheet{padding:28px 25px}.approval-route,.route-gate{font-size:17px}.sheet-label{font-size:17px}.approval-stamp{width:76px;height:73px;font-size:17px;right:0}.ownership{padding-top:65px;padding-bottom:70px}.ownership-heading{gap:20px}.ownership-heading h2{font-size:31px}.ownership-seal,.ownership-seal .ink-illustration{width:103px}.ownership-seal{height:115px;flex:none}.ownership-facts{gap:27px}.ownership-facts>div{padding-left:34px}.ownership-facts>div>span{top:21px}.pricing-section{padding:65px 0}.prices{gap:40px}.price,.price.featured{padding-top:9px}.price h3{font-size:24px}.price .amount{font-size:78px;margin-top:15px}.plan-label{font-size:23px;top:8px}.plan-for{font-size:12px}.plan-capacity{margin:15px 0 20px}.plan-selector{margin-bottom:39px}.closing{padding-top:30px}.closing-art{width:230px;height:145px}.closing-art .ink-illustration{width:230px}.closing h2{font-size:38px}.faq summary{font-size:14px}.growth-number:after{height:19%;bottom:11%}
}
@media(max-width:360px){.growth-number{font-size:125px}.growth-scenarios button{font-size:17px;padding-inline:6px}.growth-example{font-size:15px;max-width:112px}.growth-live{font-size:6px}.visibility-heading h2{font-size:39px}.visibility-intro p{font-size:16px}.map-caption{font-size:14px}.article-paper{width:245px}.article-paper h4{font-size:31px}.draft-pencil{right:4px}.ownership-heading h2{font-size:28px}.ownership-seal,.ownership-seal .ink-illustration{width:85px}.ownership-seal{height:100px}}
@media(prefers-reduced-motion:reduce){.sketch-motion .ink-line path,.sketch-motion .map-lines path{stroke-dashoffset:0!important}.sketch-motion .orbit,.sketch-motion .article-paper,.sketch-motion .draft-pencil,.sketch-motion .map-node,.sketch-motion .price,.sketch-motion .closing-art,.sketch-motion .app-window,.sketch-motion .approval-sheet,.sketch-motion .ownership-seal{translate:none!important;rotate:none!important;transform:none!important}.sketch-motion .approval-stamp{scale:1!important}}

.map-node:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
:root[data-theme=dark] .ink-wash{opacity:.13}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ink-wash{opacity:.13}}

.map-lines{max-width:100%}
@media(max-width:600px){.map-lines{width:100%}.draft-pencil{right:48px}}

h1 em{margin-left:.1em}
@media(max-width:360px){h1{font-size:37px}}

/* A guided, readable demo on the same open sketchbook surface. */
.ownership-promise{display:grid;justify-items:center;gap:8px;margin:22px 0 30px}
.ownership-promise>a{display:inline-flex;align-items:baseline;gap:9px;font-size:24px;font-weight:550;text-decoration:none;letter-spacing:-.7px}
.ownership-promise em{position:relative;font:italic 34px/.95 var(--font-editorial);letter-spacing:-.7px;z-index:0}
.ownership-promise em:after{content:'';position:absolute;inset:auto -4px -3px;height:10px;background:var(--peach);clip-path:polygon(0 22%,97% 0,100% 79%,2% 100%);z-index:-1;rotate:-1deg}
.ownership-promise .icon{width:19px;height:19px;align-self:center;margin-left:3px}
.ownership-promise>span{font-size:11px;color:var(--muted)}
.prompt-line{align-items:flex-start}.prompt-line>.icon{margin-top:4px}
.typing-line{min-height:2.9em;line-height:1.55;min-width:0;flex:1;font-weight:500;text-wrap:pretty}
.typing-caret{display:inline-block;height:1.04em;border-right:1.6px solid var(--accent);margin-left:3px;vertical-align:-.12em}
.is-typing .typing-caret{animation:typing-blink 1s steps(1,end) infinite}
@keyframes typing-blink{0%,48%{opacity:1}49%,100%{opacity:0}}
.hero-demo-note{font-size:11px;color:var(--muted);margin:18px 0 0;line-height:1.7}
.hero-demo-note a{text-underline-offset:3px;color:var(--text)}
.hero-demo-note>span{margin-left:3px}.prompt-options{margin-top:9px}
.app-sidebar{font-size:12px}.site-item{font-size:11px}.sidebar-name{font-size:12px}
.app-content{padding:25px 30px 27px}.app-heading>div:first-child{min-width:0}
.app-heading h2{font-size:29px;line-height:1.2;letter-spacing:-1.1px}.breadcrumb{font-size:9px}
.checked{font-size:10px;max-width:110px}.app-tabs{gap:24px;margin-top:19px}
.app-tabs button{font-size:12px;padding:10px 0;min-height:40px}
.demo-context{display:flex;align-items:baseline;gap:12px;border-bottom:1px dashed var(--line);padding:17px 0 16px}
.demo-context-label{font:17px var(--font-note);color:var(--accent);white-space:nowrap}
.demo-context p{font-size:13px;line-height:1.6;font-weight:500}
.stats{padding:20px 0}.stats>div>span{font-size:11px}.stats strong{font-size:28px}
.chart-head{font-size:10px}.visibility-chart{height:105px;margin-top:12px}
.finding-choices{display:flex;flex-wrap:wrap;gap:18px;margin:18px 0 20px;border-bottom:1px solid var(--line)}
.finding-choices button{position:relative;background:none;border:0;padding:10px 0 11px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.finding-choices button b{font-size:16px;font-weight:500;color:var(--text)}
.finding-choices button.selected{color:var(--text)}
.finding-choices button.selected:after{content:'';position:absolute;bottom:-2px;height:2px;left:0;right:0;background:var(--accent);rotate:-1deg}
.demo-explainer{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.demo-mini-label{display:block;font:17px/1.1 var(--font-note);color:var(--accent);letter-spacing:.3px;margin-bottom:7px}
.demo-explainer p,.demo-impact p{font-size:12px;line-height:1.75;color:var(--muted)}
.demo-impact{display:flex;gap:11px;align-items:flex-start;margin-top:16px}.demo-impact .icon{width:17px;height:17px;rotate:-16deg;color:var(--accent);margin-top:3px}
.demo-next{display:flex;align-items:center;justify-content:space-between;gap:17px;margin-top:20px;flex-wrap:wrap}
.demo-next .text-link,.sample-draft .text-link,.demo-publish-status .text-link{margin-top:0;font-size:12px}
.quiet-action{background:none;color:var(--muted);font-size:11px;text-decoration:underline;text-underline-offset:4px;padding:7px 0}
.quiet-action:hover{color:var(--text)}
.scene-lead{font-size:12px;line-height:1.7;color:var(--muted);margin:18px 0 5px}
.demo-topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin-bottom:21px}
.demo-topics button{position:relative;display:grid;align-content:start;gap:7px;background:none;text-align:left;border-bottom:1px solid var(--line);padding:14px 0 15px}
.demo-topics button.selected{border-bottom:2px solid var(--accent)}
.demo-topics button>span{font:15px var(--font-note);color:var(--muted)}
.demo-topics button>b{font-size:13px;font-weight:550;line-height:1.45;letter-spacing:-.2px}
.demo-topics button>small{font-size:10px;line-height:1.65;color:var(--muted)}
.demo-brief-label{display:flex;align-items:baseline;justify-content:space-between;gap:15px;font-size:12px;font-weight:500;margin-bottom:9px}
.demo-brief-label>span{font:17px var(--font-note);font-weight:400;color:var(--muted);rotate:-3deg}
#demo-brief{width:100%;font:12px/1.7 var(--font-sans);background:transparent;color:var(--text);border:1px solid var(--line);border-radius:2px 4px 1px 3px;padding:11px 12px;min-height:70px;resize:vertical;max-height:160px}
#demo-brief:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.demo-draft-actions{display:flex;align-items:center;gap:15px;margin-top:12px;flex-wrap:wrap}
.demo-draft-actions>span{font-size:10px;color:var(--muted)}
.demo-draft-actions .btn,.review-bottom .btn{font-size:11px;min-height:39px;padding:9px 14px;gap:13px}
.sample-draft{border-top:1px dashed var(--line);margin-top:25px;padding-top:22px}
.sample-draft h3{font:italic 28px/1.1 var(--font-editorial);letter-spacing:-.4px;margin:10px 0}
.sample-draft>p{font-size:12px;line-height:1.75;color:var(--muted)}
.sample-draft .draft-instructions{margin-top:12px;font-size:11px;overflow-wrap:anywhere}
.sample-draft .text-link{margin-top:18px}
.review-kinds{display:flex;gap:20px;margin-top:17px}
.review-kinds button{font:19px var(--font-note);background:none;padding:4px 2px;border-bottom:1px solid transparent;color:var(--muted)}
.review-kinds button.selected{border-color:var(--accent);color:var(--text)}
.change-header{padding:20px 0 16px;font-size:13px}.change-header>span{font-size:10px}
.code-file{font-size:11px;padding:11px 12px;overflow-wrap:anywhere;background:none}
.code-diff>div{font-size:11px;padding:10px 12px;gap:10px;align-items:baseline}
.code-diff code{white-space:pre-wrap;line-height:1.8;min-width:0;overflow-wrap:anywhere}
.change-explanation{margin:19px 0}.change-explanation b{font-size:13px}.change-explanation p{font-size:12px;line-height:1.7;max-width:none}
.publish-route{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;margin:22px 0;padding:0;gap:14px}
.publish-route li{border-top:1px dashed var(--line);display:flex;align-items:center;gap:7px;padding-top:10px;font-size:10px;line-height:1.4;color:var(--muted)}
.publish-route li>span{font:23px var(--font-note);line-height:1}
.publish-route li.current{color:var(--text);border-color:var(--accent)}
.publish-route li.done{color:var(--green);border-color:var(--green)}
.review-bottom{gap:20px}.review-bottom>span{font-size:10px;max-width:none;align-items:center}
.review-demo:disabled{opacity:.65;cursor:default}.review-demo:disabled:hover:before{background:var(--text)}
.demo-publish-status{border-top:1px dashed var(--line);padding-top:16px;margin-top:19px}
.demo-publish-status p{font-size:12px;line-height:1.75;color:var(--muted);margin-bottom:13px}
.stage-bottom{align-items:flex-start;gap:25px}.stage-bottom>span:last-child{max-width:290px;text-align:right;font-size:15px}
.api-heading{display:flex;align-items:center;justify-content:space-between;gap:40px}
.api-heading h2{font-size:clamp(40px,4.7vw,66px);line-height:1.05}
.api-heading h2 em,.pricing-heading h2 em,.closing h2 em{font:italic 1.12em/.9 var(--font-editorial);letter-spacing:-.04em}
.api-heading>p{font:26px/1.1 var(--font-note);color:var(--muted);rotate:-4deg}
.api-provider-row{display:flex;align-items:center;gap:20px;margin:33px 0 36px}
.api-provider-row>span{font-size:12px;color:var(--muted)}
.api-provider-picker{display:flex;gap:18px}.api-provider-picker button{font:23px var(--font-note);background:none;padding:5px 9px;position:relative;color:var(--muted)}
.api-provider-picker button.selected{color:var(--text)}
.api-provider-picker button.selected:before{content:'';position:absolute;inset:0;border:1px solid var(--text);border-radius:47% 53% 46% 51%;rotate:-5deg;pointer-events:none}
.api-setup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:50px;margin:0;padding:0;list-style:none}
.api-setup li{min-width:0;border-top:1px dashed var(--line);padding-top:20px}
.api-step-number{font:27px var(--font-note);color:var(--accent)}
.api-setup h3{font-size:20px;line-height:1.25;letter-spacing:-.7px;margin:15px 0 12px}
.api-setup p{font-size:13px;color:var(--muted);line-height:1.8;max-width:29em}
.api-setup .text-link{font-size:12px;margin-top:18px}
.api-key-sketch{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--text);padding:5px 0 9px;max-width:270px;margin:0 0 13px;rotate:-1deg}
.api-key-sketch .icon{width:17px;height:17px}.api-key-sketch>span{font-family:ui-monospace,monospace;font-size:14px;letter-spacing:1px}
.api-key-sketch>small{flex-basis:100%;font:17px var(--font-note);color:var(--muted);padding-left:25px}
.api-cost-note,.api-data-note{display:flex;align-items:flex-start;gap:13px;margin-top:35px;padding-top:23px;border-top:1px dashed var(--line)}
.api-cost-note p{font-size:13px;color:var(--muted);line-height:1.8}.api-cost-note strong{font-weight:550;color:var(--text)}
.api-cost-note .icon,.api-data-note .icon{width:20px;height:20px;color:var(--accent);margin-top:3px}
.api-data-note{margin-top:13px;padding-top:0;border:0}.api-data-note p{font-size:12px;line-height:1.8;color:var(--muted)}
.lifetime-in-plan{font:21px var(--font-note);color:var(--accent);margin:5px 0 0}.price .plan-capacity{margin-top:16px}
@media(max-width:1100px){.app-layout{grid-template-columns:185px minmax(0,1fr)}.site-item{font-size:10px}.app-content{padding-inline:24px}.api-setup{gap:30px}.demo-topics{gap:12px}.desktop-nav{gap:19px}}
@media(max-width:850px){.app-layout{grid-template-columns:1fr}.app-sidebar{display:none}.app-content{padding:26px}.demo-topics button>b{font-size:13px}.api-setup{gap:25px}.api-setup h3{font-size:18px}.api-setup p{font-size:12px}.api-key-sketch>span{font-size:12px;letter-spacing:0}}
@media(max-width:600px){
.ownership-promise{margin:20px 0 27px;gap:10px}.ownership-promise>a{font-size:19px;gap:7px;letter-spacing:-.5px}.ownership-promise em{font-size:27px}.ownership-promise .icon{width:15px;height:15px;margin-left:0}.ownership-promise>span{font-size:9px}
.typing-line{font-size:12px;min-height:3.15em;line-height:1.6}.prompt-line>.icon{margin-top:3px}.prompt-bottom{margin-top:16px}.hero-demo-note{font-size:10px;margin-top:17px}.hero-demo-note>span{display:block;margin:1px 0 0}.prompt-options{margin-top:11px}
.app-content{padding:22px 15px}.app-heading h2{font-size:24px;line-height:1.15}.breadcrumb{font-size:8px;letter-spacing:.7px}.checked{font-size:8px;max-width:69px}.app-tabs{gap:22px;margin-top:14px}.app-tabs button{font-size:11px;min-height:42px;padding:10px 0}
.demo-context{display:block;padding:15px 0}.demo-context-label{font-size:16px}.demo-context p{font-size:12px;margin-top:5px}.stats{padding:19px 0}.stats>div>span{font-size:10px}.stats strong{font-size:24px}.chart-head{font-size:9px}.visibility-chart{height:92px}
.finding-choices{gap:9px 14px;margin:16px 0}.finding-choices button{font-size:11px;padding:8px 0 9px;gap:5px}.finding-choices button b{font-size:15px}.demo-explainer{grid-template-columns:1fr;gap:15px}.demo-mini-label{font-size:17px;margin-bottom:5px}.demo-explainer p,.demo-impact p{font-size:12px;line-height:1.8}.demo-impact{gap:8px;margin-top:16px}.demo-next{margin-top:19px;gap:12px}.demo-next .text-link{font-size:12px}.quiet-action{font-size:11px}
.scene-lead{font-size:12px;margin:17px 0 4px}.demo-topics{grid-template-columns:1fr;gap:0;margin-bottom:19px}.demo-topics button{gap:5px;padding:13px 0}.demo-topics button>b{font-size:14px}.demo-topics button>small{font-size:11px}.demo-topics button>span{font-size:16px}.demo-brief-label{display:block;font-size:12px}.demo-brief-label>span{display:block;font-size:16px;rotate:0;margin-top:3px}.demo-draft-actions{gap:11px}.demo-draft-actions .btn,.review-bottom .btn{font-size:11px;min-height:41px;padding:9px 12px}.demo-draft-actions>span{font-size:10px}#demo-brief{font-size:12px;min-height:101px}.sample-draft h3{font-size:27px}
.review-kinds{gap:23px;margin-top:14px}.review-kinds button{font-size:20px}.change-header{font-size:12px;padding:16px 0;gap:8px;align-items:flex-start}.change-header>span{white-space:nowrap;font-size:9px}.code-file{font-size:10px;padding:10px}.code-diff>div{font-size:10px;padding:9px;gap:8px}.change-explanation b{font-size:12px}.change-explanation p{font-size:12px;line-height:1.75}.publish-route{gap:11px;margin:20px 0}.publish-route li{font-size:9px;align-items:flex-start;gap:6px;flex-wrap:wrap}.publish-route li>span{font-size:22px;flex-basis:100%}.review-bottom{flex-wrap:wrap;gap:15px}.review-bottom>span{font-size:11px;max-width:100%}.demo-publish-status p{font-size:12px}.stage-bottom{font-size:12px;gap:16px}.stage-bottom>span:last-child{font-size:12px;max-width:165px}
.api-heading{gap:22px;align-items:center}.api-heading h2{font-size:41px}.api-heading>p{font-size:20px;max-width:110px}.api-provider-row{gap:19px;margin:25px 0 27px}.api-provider-row>span{font-size:11px}.api-provider-picker{gap:12px}.api-provider-picker button{font-size:21px;padding:5px 7px}.api-setup{grid-template-columns:1fr;gap:29px}.api-setup li{padding:17px 0 0 38px;position:relative}.api-step-number{position:absolute;left:0;top:14px;font-size:25px}.api-setup h3{font-size:21px;margin:0 0 11px}.api-setup p{font-size:13px;max-width:none}.api-setup .text-link{font-size:12px;margin-top:15px}.api-key-sketch{margin-top:15px}.api-key-sketch>span{font-size:14px;letter-spacing:.5px}.api-key-sketch>small{font-size:17px}.api-cost-note{padding-top:21px;margin-top:29px}.api-cost-note p{font-size:12px}.api-data-note p{font-size:12px}.api-cost-note .icon,.api-data-note .icon{width:17px;height:17px}.lifetime-in-plan{font-size:22px}
}
@media(max-width:360px){.ownership-promise>a{font-size:17px;gap:6px}.ownership-promise em{font-size:25px}.ownership-promise>span{font-size:8px}.typing-line{font-size:11px;min-height:3.2em}.demo-start{font-size:9px}.hero-demo-note{font-size:9px}.app-content{padding-inline:12px}.app-heading h2{font-size:22px}.checked{max-width:57px;font-size:7px}.app-tabs{gap:17px}.app-tabs button{font-size:10px}.stats strong{font-size:22px}.stats>div>span{font-size:9px}.chart-head{font-size:8px}.finding-choices{gap:11px}.finding-choices button{font-size:10px}.code-diff>div{font-size:9px}.api-heading h2{font-size:36px}.api-heading>p{font-size:18px;max-width:97px}.api-provider-row{gap:13px}.api-provider-picker{gap:8px}.api-provider-picker button{font-size:19px}.api-provider-row>span{font-size:10px}.stage-bottom>span:last-child{max-width:130px}}
@media(prefers-reduced-motion:reduce){.typing-caret{animation:none!important}}

.hero-copy>p.hero-demo-note{font-size:12px;line-height:1.7;margin:17px 0 0}
@media(max-width:600px){.hero-copy>p.hero-demo-note{font-size:10px;margin-top:17px}}
@media(max-width:360px){.hero-copy>p.hero-demo-note{font-size:9px}}

button.text-link{background:none;border-radius:0;padding-inline:0}

.demo-setup{margin:0 0 22px;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);padding:0 0 2px}
.demo-setup summary{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:12px;list-style:none;padding:12px 0}
.demo-setup summary::-webkit-details-marker{display:none}.demo-setup summary>span:first-child{font:22px var(--font-note);color:var(--accent)}.setup-plus{margin-left:auto;font:25px var(--font-note);transition:rotate .2s}.demo-setup[open] .setup-plus{rotate:45deg}
.demo-setup ol{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;list-style:none;padding:7px 0 15px;margin:0}.demo-setup b{font:20px var(--font-note);font-weight:400}.demo-setup p{font-size:12px;color:var(--muted);line-height:1.8;margin-top:7px}.demo-setup p.setup-note{margin:0 0 15px;font-size:10px}
@media(max-width:600px){.demo-setup{margin-bottom:20px}.demo-setup summary{font-size:11px;gap:7px}.demo-setup summary>span:first-child{font-size:20px}.demo-setup ol{grid-template-columns:1fr;gap:17px;padding-top:5px}.demo-setup b{font-size:21px}.demo-setup p{font-size:12px}.demo-setup .setup-note{font-size:10px}}

.story-copy p.site-example-note{font-size:11px;line-height:1.6;margin-top:12px;color:var(--muted)}
.map-node-copy small{white-space:nowrap}

@media(max-width:360px){.service-domain-map .map-node-copy small{font-size:8px}}

.service-domain-map .brand-mark{width:28px;height:28px;background:none;border:0;border-radius:0;flex:none}
.service-domain-map .brand-mark img{display:block;width:26px;height:26px;object-fit:contain}
@media(max-width:360px){.service-domain-map .brand-mark{width:24px;height:24px}.service-domain-map .brand-mark img{width:23px;height:23px}}

/* A small AI selector in the prompt; a handwritten provider shelf in setup. */
.provider-select{display:inline-flex;align-items:center;position:relative;min-width:0;color:var(--text)}
.provider-native select{appearance:none;background:transparent;color:inherit;border:0;font:inherit;font-size:11px;padding:8px 18px 8px 0;cursor:pointer}
.provider-native[hidden],.provider-trigger[hidden],.provider-menu[hidden]{display:none}
.provider-trigger{display:inline-flex;align-items:center;gap:9px;min-height:38px;padding:5px 8px 5px 0;background:none;color:var(--text);font:500 11px var(--font-sans);cursor:pointer;text-align:left}
.provider-trigger:focus-visible{outline:1px solid var(--accent);outline-offset:4px;border-radius:45% 7% 38% 9% / 6% 40% 8% 30%}
.provider-dot{width:5px;height:5px;background:var(--green);border-radius:50%;flex-shrink:0}
.provider-chevron{width:9px;height:7px;margin-left:5px;fill:none;stroke:currentColor;stroke-width:1.2;transition:transform .18s;pointer-events:none}
.provider-trigger[aria-expanded=true] .provider-chevron{transform:rotate(180deg)}
.provider-menu{position:fixed;z-index:100;display:flex;flex-direction:column;background:var(--surface);color:var(--text);border:1px solid var(--text);border-radius:3px 5px 4px 2px / 5px 3px 5px 4px;padding:0 8px;box-shadow:3px 4px 0 -1px var(--paper),3px 4px 0 0 var(--line);overflow:hidden;animation:provider-unfold .16s ease-out;transform-origin:top left}
.provider-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 9px 9px;flex:none;border-bottom:1px dashed var(--line)}
.provider-menu-heading>span{font:21px/1 var(--font-note);transform:rotate(-2deg)}
.provider-menu-heading>small{font:9px var(--font-sans);letter-spacing:1.2px;color:var(--muted)}
.provider-list{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding:5px 0;flex-shrink:1;min-height:0}
.provider-option{display:flex;align-items:center;gap:11px;min-height:38px;padding:5px 10px;cursor:pointer;position:relative;border-radius:2px 6px 3px 4px;color:var(--muted)}
.provider-option.is-active{background:var(--mint);color:var(--text)}
.provider-logo{width:21px;height:21px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text)}
.provider-logo img{display:block;width:20px;height:20px;object-fit:contain}
.provider-current-logo{display:inline-flex;flex-shrink:0}
.provider-current-logo .provider-logo,.provider-current-logo img{width:16px;height:16px}
.provider-endpoint svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;fill:none}
:root[data-theme=dark] .provider-logo-mono img{filter:invert(1)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .provider-logo-mono img{filter:invert(1)}}
.provider-option-copy{display:flex;align-items:baseline;justify-content:space-between;gap:9px;flex:1;min-width:0}
.provider-option-copy>span{font:500 11px var(--font-sans);white-space:nowrap}
.provider-option-copy>small{font:9px var(--font-sans);color:var(--muted);white-space:nowrap}
.provider-tick{width:16px;height:15px;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;fill:none;visibility:hidden;flex-shrink:0;transform:rotate(-6deg)}
.provider-option[aria-selected=true]{color:var(--text)}
.provider-option[aria-selected=true] .provider-tick{visibility:visible}
.provider-menu-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px dashed var(--line);padding:9px 10px 10px;font:16px/1 var(--font-note);color:var(--muted);flex:none}
.provider-menu-foot>small{font:9px var(--font-sans);color:var(--muted)}
@keyframes provider-unfold{from{opacity:0;transform:translateY(3px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:640px){.provider-trigger{font-size:10px;min-height:42px;gap:7px}.provider-option{min-height:44px}.provider-menu-heading{padding-top:11px;padding-bottom:10px}}
@media(prefers-reduced-motion:reduce){.provider-menu{animation:none}.provider-chevron{transition:none}}
.api-provider-row{align-items:flex-start;margin-bottom:15px;gap:30px}
.api-provider-row>span{padding-top:10px;white-space:nowrap}
.api-provider-choices{min-width:0}
.api-provider-picker{flex-wrap:wrap;gap:10px 21px}
.api-provider-picker button{min-height:40px}
.api-provider-more{gap:6px 18px;margin-top:12px}
.api-provider-more button{font-size:19px;padding:4px 7px;min-height:40px}
.api-provider-more button>span{font-family:var(--font-sans);font-size:12px}
.api-provider-detail{font-size:12px;line-height:1.8;color:var(--muted);min-height:44px;max-width:720px;margin:0 0 26px 112px}
.api-connections{border-bottom:1px dashed var(--line);margin-top:33px;padding:0 0 17px}
.api-connections summary{display:flex;align-items:center;justify-content:space-between;gap:15px;cursor:pointer;list-style:none;font-size:13px;padding:10px 0}
.api-connections summary::-webkit-details-marker{display:none}
.api-connections summary>span{font:25px var(--font-note)}
.api-connections[open] summary>span{rotate:45deg}
.api-connections dl{display:grid;grid-template-columns:1fr 1fr;gap:22px 45px;margin:22px 0}
.api-connections dt{font-size:13px;font-weight:600;margin-bottom:8px}
.api-connections dd,.api-connections>div>p{font-size:12px;line-height:1.8;color:var(--muted);margin:0;max-width:44em}
.api-capability-note p{font-size:11px;line-height:1.8;color:var(--muted);max-width:76em;margin:20px 0 0}
#api-key-link[hidden]{display:none}
@media(max-width:640px){

.api-provider-row{display:block;margin-top:24px}
.api-provider-row>span{display:block;padding:0;margin-bottom:12px}
.api-provider-picker{gap:8px 23px}
.api-provider-picker button{font-size:23px;min-height:44px}
.api-provider-more{gap:4px 17px;margin-top:8px}
.api-provider-more button{font-size:19px;min-height:44px}
.api-provider-detail{margin:15px 0 26px;min-height:65px;font-size:12px}
.api-connections dl{grid-template-columns:1fr;gap:20px}
.api-connections summary{font-size:12px;line-height:1.6}
.api-capability-note p{font-size:11px}
}
@media(max-width:360px){.provider-trigger{font-size:9px;gap:6px}.api-provider-picker{gap:6px 13px}.api-provider-more{gap:4px 10px}}

/* Searchbop: outlined wordmark with a single copper beat. */
.brand{gap:0;color:var(--text);letter-spacing:0;flex-shrink:0}
.brand .brand-lockup{display:block;width:175px;height:auto;overflow:visible}
.footer-top .brand-lockup{width:210px}
.powered-by{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:11px;text-decoration:none;white-space:nowrap}
.powered-by>span{color:var(--text);font-weight:650;letter-spacing:-.4px}
.powered-by>.icon{width:13px;height:13px;transition:transform .2s}
.powered-by:hover>.icon{transform:translate(2px,-2px)}
.powered-by:hover>span{text-decoration:underline;text-underline-offset:4px}
:root[data-theme=dark]{--brand-dot:#e8a580}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--brand-dot:#e8a580}}
@media(max-width:1100px){.brand .brand-lockup{width:151px}.footer-top .brand-lockup{width:190px}}
@media(max-width:640px){.brand .brand-lockup{width:131px}.footer-top .brand-lockup{width:175px}.powered-by{font-size:10px}.footer-top{flex-wrap:wrap;gap:20px}.footer-top .powered-by{order:3;flex-basis:100%;justify-content:flex-start}}
@media(max-width:360px){.brand .brand-lockup{width:114px}.footer-top .brand-lockup{width:163px}}

@media(max-width:360px){.nav-end .btn.small{white-space:nowrap;padding-inline:11px;font-size:10px;gap:6px}}