@import url('/base.css');
:root {
  --paper:#f4f2e9;
  --ink:#173b2f;
  --muted:#617065;
  --line:#d7d9cb;
  --lime:#d6e7ae
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:28px
}
body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font:18px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
a {
  color:inherit;
  text-decoration:none
}
a:hover {
  text-decoration:none;
  text-underline-offset:5px
}
a:focus-visible {
  outline:3px solid #a75c28;
  outline-offset:5px
}
.wrap {
  width:min(1320px,calc(100% - 104px));
  margin:auto
}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:26px 0;
  border-bottom:1px solid var(--line)
}
.brand {
  display:grid;
  grid-template-columns:auto auto;
  gap:13px;
  align-items:stretch;
  font-size:24px;
  font-weight:650;
  letter-spacing:-.6px
}
.mark {
  width:35px;
  height:35px
}
.brand .mark {
  width:auto;
  height:100%;
  aspect-ratio:1
}
.brand-copy {
  display:grid;
  grid-template-columns:max-content;
  gap:6px;
  line-height:1.2
}
.brand-name {
  display:block;
  line-height:0;
  white-space:nowrap
}
.agent-codex-wordmark {
  display:block;
  width:auto;
  height:1em;
  aspect-ratio:1088 / 100
}
.byline {
  display:flex;
  align-items:center;
  gap:4px;
  contain:inline-size;
  width:100%
}
.brand-by {
  flex-shrink:0;
  font:10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:0;
  color:var(--muted)
}
.arcology-wordmark {
  display:block;
  flex:1;
  min-width:0;
  width:0;
  height:auto;
  aspect-ratio:1461 / 100;
  color:var(--muted)
}
nav {
  display:flex;
  align-items:center;
  gap:30px;
  font-size:16px;
  font-weight:550
}
.nav-cta {
  border:1px solid var(--ink);
  padding:10px 15px;
  border-radius:4px
}
.nav-cta span {
  margin-left:15px
}
.hero {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  padding:75px 0 85px;
  align-items:center
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:8px;
  font:12px/1.5 ui-monospace,SFMono-Regular,monospace;
  letter-spacing:1.8px;
  font-weight:600;
  margin:0 0 28px
}
.status-dot {
  width:6px;
  height:6px;
  background:#49783d;
  border-radius:50%
}
h1,h2,.closing p {
  font-family:Georgia,"Times New Roman",serif;
  letter-spacing:-2.5px;
  font-weight:400;
  line-height:1.05
}
h1 {
  font-size:clamp(48px,5.25vw,77px);
  margin:0 0 25px
}
em {
  font-weight:400;
  color:#6a7a51
}
h2 {
  font-size:clamp(36px,3.65vw,50px);
  margin:0
}
.tagline {
  font-size:18px;
  line-height:1.55;
  max-width:370px;
  margin:0 0 16px;
  font-weight:550
}
.intro {
  font-size:17px;
  line-height:1.75;
  color:var(--muted);
  max-width:440px;
  margin:0
}
.hero-actions {
  display:flex;
  gap:20px;
  align-items:center;
  margin-top:28px;
  flex-wrap:wrap
}
.button {
  display:inline-flex;
  gap:30px;
  align-items:center;
  background:var(--ink);
  color:var(--paper);
  padding:14px 19px;
  font-size:16px;
  font-weight:550;
  border-radius:4px;
  text-decoration:none!important
}
.button:hover {
  background:#2a503e
}
.text-link {
  font-size:14px;
  font-weight:550
}
.text-link span {
  margin-left:8px
}
.preview-note {
  font-size:12px;
  color:var(--muted);
  margin-top:16px;
  max-width:400px
}
.hero-art {
  transform:translateY(12px)
}
.orbit-label,.carry-label {
  font:12px ui-monospace,SFMono-Regular,monospace;
  letter-spacing:1px
}
.orbit-label {
  display:flex;
  justify-content:space-between;
  margin:0 15px 15px
}
.orbit-label>span:last-child {
  font-size:22px;
  line-height:8px
}
.notebook-illustration {
  background:#183a30;
  color:#dce7d0;
  box-shadow:13px 18px 0 #e6e7dc,14px 19px 0 #d7dacb;
  border-radius:7px;
  transform:rotate(-2deg);
  padding:0 0 1px;
  overflow:hidden;
  border:1px solid #183a30
}
.notebook-top {
  height:62px;
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 22px;
  font:12px ui-monospace,SFMono-Regular,monospace;
  letter-spacing:1.7px;
  border-bottom:1px solid #3c574a
}
.tiny-mark {
  margin-right:3px
}
.private-pill {
  margin-left:auto;
  border:1px solid #54715a;
  border-radius:10px;
  font-size:12px;
  letter-spacing:1px;
  padding:4px 7px
}
.notebook-body {
  display:grid;
  grid-template-columns:31% 1fr;
  min-height:340px
}
.note-index {
  padding:25px 0 25px 17px;
  position:relative
}
.index-label {
  font:12px ui-monospace,monospace;
  letter-spacing:1.2px;
  color:#97b19a;
  display:block;
  margin-bottom:17px
}
.index-item {
  font-size:12px;
  display:block;
  padding:11px 7px;
  color:#b2c4b5;
  white-space:nowrap
}
.index-item.selected {
  background:#2e4f3a;
  border-radius:5px 0 0 5px;
  color:#ecf3dc
}
.index-bottom {
  font:italic 18px/1.3 Georgia;
  color:#a4ba99;
  position:absolute;
  bottom:25px
}
.paper-note {
  background:#eeeadd;
  margin:20px 20px 20px 0;
  padding:25px 25px 23px;
  color:var(--ink);
  border-radius:2px;
  box-shadow:0 3px 5px #10251a66
}
.note-label {
  font:12px ui-monospace,monospace;
  letter-spacing:.8px;
  color:#748064
}
.paper-note h2 {
  font-size:30px;
  letter-spacing:-1.2px;
  line-height:1.1;
  margin:14px 0 17px
}
.paper-note p {
  font:16px/1.7 Georgia;
  color:#52604e;
  margin:0 0 15px
}
.hand-drawn-line {
  width:75px;
  border-top:1px solid #718963;
  transform:rotate(-3deg);
  margin:20px 0
}
.paper-note .note-small {
  font-size:14px
}
.note-tags {
  display:flex;
  gap:6px
}
.note-tags span {
  font:12px ui-monospace,monospace;
  background:#dedfce;
  padding:4px 6px;
  border-radius:2px
}
.notebook-bottom {
  display:flex;
  justify-content:space-between;
  padding:12px 20px;
  border-top:1px solid #3c574a;
  font-size:12px;
  color:#a6bca8
}
.notebook-bottom i {
  display:inline-block;
  width:5px;
  height:5px;
  background:#bfda99;
  border-radius:50%;
  margin-right:3px
}
.carry-label {
  margin:40px 0 0;
  text-align:center;
  color:var(--muted);
  font-size:12px
}
.carry-label span {
  font-size:28px;
  vertical-align:middle;
  margin-right:15px
}
.idea-section {
  background:#e7eadd;
  padding:74px 0
}
.idea-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start
}
.idea-copy p {
  margin:0 0 18px;
  font-size:17px;
  line-height:1.8
}
.idea-copy .muted {
  font-size:14px;
  color:var(--muted);
  margin:25px 0 0
}
.principles {
  padding:85px 0 90px
}
.section-heading .eyebrow {
  margin-bottom:20px
}
.principle-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:50px;
  margin-top:50px
}
.feature-symbol {
  display:flex;
  width:43px;
  height:43px;
  align-items:center;
  justify-content:center;
  background:#e3e8d4;
  border-radius:50%;
  font-size:25px;
  margin-bottom:26px
}
h3 {
  font-size:18px;
  font-weight:550;
  letter-spacing:-.4px;
  margin:0 0 12px
}
.principle-grid p,.journey p {
  font-size:16px;
  color:var(--muted);
  line-height:1.8;
  margin:0;
  max-width:320px
}
.how-section {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:90px;
  padding:70px 0 85px;
  border-top:1px solid var(--line)
}
.section-intro {
  font-size:14px;
  color:var(--muted);
  max-width:260px;
  margin-top:24px
}
.journey {
  list-style:none;
  padding:0;
  margin:0
}
.journey li {
  position:relative;
  padding:0 0 28px 60px;
  margin-bottom:25px;
  border-bottom:1px solid var(--line)
}
.journey li:last-child {
  margin-bottom:0;
  padding-bottom:0;
  border:0
}
.step-number {
  position:absolute;
  left:0;
  top:0;
  width:32px;
  height:32px;
  border:1px solid #bbc3ad;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font:12px ui-monospace,monospace
}
.journey p {
  max-width:400px;
  font-size:16px
}
.status-section {
  background:var(--ink);
  color:var(--paper);
  border-radius:8px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  padding:54px 60px
}
.status-section h2 {
  font-size:44px
}
.status-section>div>p:not(.eyebrow) {
  font-size:16px;
  color:#bacbb9;
  max-width:340px;
  margin:23px 0 25px
}
.status-section .eyebrow {
  color:#c3d3ac
}
.button.light {
  background:var(--lime);
  color:var(--ink)
}
.button.light:hover {
  background:#e0efbb
}
.status-list>div {
  padding:0 0 20px;
  border-bottom:1px solid #496050;
  margin:0 0 20px
}
.status-list>div:last-child {
  border:0;
  padding:0;
  margin:0
}
.status-label {
  font:12px ui-monospace,monospace;
  letter-spacing:1.5px;
  color:#b2c4a7
}
.status-label.available {
  color:#d6e7ae
}
.status-list p {
  font-size:14px;
  line-height:1.8;
  margin:9px 0 0;
  color:#d1dacc
}
.closing {
  text-align:center;
  padding:80px 0 65px
}
.closing .mark {
  margin:0 auto 25px
}
.closing p {
  font-size:52px;
  margin:0 0 25px
}
.closing-caption {
  font:12px ui-monospace,monospace;
  letter-spacing:2px;
  color:var(--muted)
}
footer {
  border-top:1px solid var(--line);
  padding:25px 0 30px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:12px;
  color:var(--muted)
}
.skip {
  position:fixed;
  left:15px;
  top:-80px;
  background:var(--ink);
  color:white;
  padding:10px;
  z-index:10
}
.skip:focus {
  top:10px
}
@media(min-width:1550px) {
  .hero {
    padding-top:95px;
    padding-bottom:110px
  }
}
@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 64px)
  }
  .hero {
    gap:36px
  }
  .hero-actions {
    gap:15px
  }
  .paper-note {
    padding:22px 18px
  }
  .paper-note h2 {
    font-size:27px
  }
  .status-section {
    gap:50px;
    padding:45px
  }
  .principle-grid {
    gap:30px
  }
  .idea-grid,.how-section {
    gap:45px
  }
}
@media(max-width:800px) {
  .wrap {
    width:calc(100% - 40px)
  }
  .site-header {
    padding:20px 0
  }
  .brand {
    font-size:20px;
    gap:9px
  }
  .mark {
    width:30px;
    height:30px
  }
  nav {
    gap:15px
  }
  nav>a:not(.nav-cta) {
    display:none
  }
  .nav-cta {
    font-size:14px;
    padding:8px 10px
  }
  .nav-cta span {
    margin-left:6px
  }
  .hero {
    grid-template-columns:1fr;
    padding:45px 0 65px;
    gap:45px
  }
  .hero-copy {
    max-width:600px
  }
  h1 {
    font-size:clamp(48px,10vw,70px)
  }
  .hero-art {
    width:min(530px,100%);
    justify-self:center;
    transform:none
  }
  .hero-actions {
    margin-top:25px
  }
  .hero .eyebrow {
    margin-bottom:22px
  }
  .tagline {
    font-size:17px;
    max-width:100%
  }
  .intro {
    max-width:530px
  }
  .idea-section {
    padding:50px 0
  }
  .idea-grid {
    grid-template-columns:1fr;
    gap:26px
  }
  .idea-copy p {
    font-size:16px
  }
  .idea-grid h2 {
    font-size:39px
  }
  .principles {
    padding:55px 0
  }
  .principle-grid {
    grid-template-columns:1fr;
    gap:32px;
    margin-top:35px
  }
  .principle-grid article {
    padding-left:62px;
    position:relative
  }
  .feature-symbol {
    position:absolute;
    left:0;
    top:0
  }
  .principle-grid p {
    max-width:100%;
    font-size:16px
  }
  .how-section {
    grid-template-columns:1fr;
    padding:50px 0;
    gap:35px
  }
  .section-intro {
    max-width:none;
    margin-bottom:0
  }
  .journey li {
    padding-left:50px
  }
  .status-section {
    grid-template-columns:1fr;
    padding:33px 26px;
    gap:40px
  }
  .status-section h2 {
    font-size:40px
  }
  .status-section>div>p:not(.eyebrow) {
    max-width:100%
  }
  .closing {
    padding:60px 0 45px
  }
  .closing p {
    font-size:45px
  }
  footer {
    flex-wrap:wrap;
    font-size:12px;
    padding:20px 0
  }
  footer>span:nth-child(2) {
    display:none
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
}
@media(max-width:800px) {
  .nav-cta {
    min-height:44px;
    display:inline-flex;
    align-items:center;
    gap:4px
  }
}

/* Comfortable reading sizes across the public site. */
body { font-size: 18px; }
.brand { font-size: 24px; }
.byline { font-size: 12px; letter-spacing: 1px; }
nav { font-size: 16px; gap: 28px; }
.nav-cta { min-height: 46px; display: inline-flex; align-items: center; }
.eyebrow { font-size: 13px; letter-spacing: 1.4px; }
.tagline { font-size: 22px; max-width: 440px; line-height: 1.5; }
.intro { font-size: 18px; max-width: 500px; line-height: 1.8; }
.button { font-size: 16px; min-height: 50px; }
.text-link { font-size: 16px; }
.preview-note { font-size: 14px; line-height: 1.7; }
.orbit-label, .carry-label { font-size: 12px; line-height: 1.6; }
.notebook-top { font-size: 13px; letter-spacing: 1px; height: 72px; }
.private-pill { font-size: 10px; }
.notebook-body { grid-template-columns: 34% 1fr; }
.index-label, .note-label { font-size: 11px; letter-spacing: .5px; }
.index-item { font-size: 14px; padding: 12px 7px; }
.index-bottom { font-size: 20px; }
.paper-note { padding: 25px 22px; }
.paper-note h2 { font-size: 34px; }
.paper-note p { font-size: 17px; line-height: 1.7; }
.paper-note .note-small { font-size: 15px; }
.note-tags span { font-size: 12px; }
.notebook-bottom { font-size: 11px; gap: 15px; flex-wrap: wrap; }
.idea-copy p { font-size: 18px; }
.idea-copy .muted { font-size: 16px; }
h3 { font-size: 23px; }
.principle-grid p, .journey p { font-size: 18px; line-height: 1.8; }
.section-intro { font-size: 16px; max-width: 330px; }
.step-number { font-size: 14px; width: 36px; height: 36px; }
.status-section > div > p:not(.eyebrow) { font-size: 18px; max-width: 400px; }
.status-label { font-size: 13px; letter-spacing: 1px; }
.status-list p { font-size: 17px; line-height: 1.8; }
.closing-caption { font-size: 13px; letter-spacing: 1.4px; }
footer { font-size: 14px; flex-wrap: wrap; }
@media (max-width: 1100px) {
  .site-header { gap: 25px; }
  .hero { gap: 40px; }
  .hero-actions { align-items: flex-start; }
  .paper-note h2 { font-size: 30px; }
  .paper-note p { font-size: 16px; }
  .index-item { font-size: 13px; }
  .status-section { gap: 40px; }
}
@media (max-width: 800px) {
  .brand { font-size: 21px; }
  .nav-cta { font-size: 14px; padding: 10px 12px; }
  .eyebrow { font-size: 12px; letter-spacing: 1.1px; }
  .tagline { font-size: 22px; }
  .intro { font-size: 18px; }
  .button, .text-link { font-size: 16px; }
  .hero-actions { gap: 20px; }
  .preview-note { font-size: 14px; }
  .notebook-body { grid-template-columns: 1fr; }
  .note-index { display: none; }
  .paper-note { margin: 20px; padding: 26px; }
  .paper-note h2 { font-size: 34px; }
  .paper-note p { font-size: 18px; }
  .paper-note .note-small { font-size: 16px; }
  .note-label { font-size: 12px; }
  .notebook-bottom { font-size: 12px; }
  .carry-label { font-size: 11px; }
  .idea-copy p, .principle-grid p, .journey p { font-size: 18px; }
  .idea-copy .muted, .section-intro { font-size: 16px; }
  h3 { font-size: 23px; }
  .principle-grid article { padding-left: 0; padding-top: 65px; }
  .status-section > div > p:not(.eyebrow), .status-list p { font-size: 18px; }
  .status-label { font-size: 13px; }
  .closing-caption { font-size: 12px; }
  footer { font-size: 14px; gap: 14px; }
}
:root { --muted: #52634f; }
@media (max-width: 480px) {
  .site-header { flex-wrap: wrap; gap: 18px; }
  .site-header nav { margin-left: auto; }
}

.skip { --link-hover: #e6f4c8; }

/* Shared interaction treatment. Keep the focus outlines in each interface. */
:root {
  --link-hover: #2f6b4f;
}
a:any-link {
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
a:any-link:hover {
  text-decoration: none;
  color: var(--link-hover);
}
.sidebar {
  --link-hover: #f0f7dc;
}
.sidebar nav a:hover,
.sidebar nav a.active:hover {
  color: var(--link-hover);
}
a.button {
  --link-hover: #e6f4c8;
}
a.button.light {
  --link-hover: #254c36;
}
@media (prefers-reduced-motion: reduce) {
  a:any-link {
    transition: none;
  }
}

/* Font-independent SVG outlines and containers. Keep the approved CSS sizes. */
.mark {
  display: block;
  flex-shrink: 0;
  overflow: visible;
  background: none;
  border-radius: 0;
  padding-right: 0;
  letter-spacing: normal;
}
.mark-container {
  fill: var(--mark-surface);
}
.mark use {
  fill: currentColor;
}
.mark-variant {
  display: none;
  overflow: visible;
}
.mark-website-desktop,
.mark-app-desktop {
  display: block;
}
.tiny-mark {
  display: block;
  flex-shrink: 0;
  width: 1.1666666667em;
  height: 1em;
  overflow: visible;
  font-size: 26px;
  line-height: 1;
  letter-spacing: normal;
}
@media (max-width: 900px) {
  .mark-app-desktop { display: none; }
  .mark-app-tablet { display: block; }
}
@media (max-width: 800px) {
  .mark-website-desktop { display: none; }
  .mark-website-mobile { display: block; }
}
@media (max-width: 720px) {
  .mark-app-tablet { display: none; }
  .mark-app-mobile { display: block; }
}

/* Brand links stay unadorned on hover; keyboard focus keeps its visible outline. */
.brand:hover {
  text-decoration: none;
}