/* Stitch homepage — cloned companies as RL environments. */
@font-face {font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/instrument-serif-regular.woff2") format("woff2");}
@font-face {font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/instrument-serif-italic.woff2") format("woff2");}
@font-face {font-family: "ABC Diatype"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/abc-diatype-regular.woff2") format("woff2");}
@font-face {font-family: "ABC Diatype"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/abc-diatype-medium.woff2") format("woff2");}
@font-face {font-family: "Fragment Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fragment-mono.woff2") format("woff2");}

:root {
  --blue: #3A82DA;
  --blue-text: #2A65BD;
  --ink: #1E2226;
  --muted: #5B6470;
  --body-muted: #4A525C;
  --rule: #DCE3EA;
  --red: #D52B1E;
  --red-text: #B3241A;
  --panel: #F4F6F9;
  --font-heading: "Instrument Serif", Georgia, serif;
  --font-body: "ABC Diatype", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, Menlo, monospace;
}

*, *::before, *::after {box-sizing: border-box;}
* {margin: 0; padding: 0;}
html {scroll-behavior: smooth; -webkit-text-size-adjust: 100%;}
body {background: #fff; color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
img, svg {display: block;}
a {color: inherit; text-decoration: none;}
button {font: inherit; background: none; border: 0; color: inherit;}
ol, ul {list-style: none;}
h1, h2, h3, h4 {font-weight: 400;}

.wrap {width: min(1328px, calc(100% - 112px)); margin-inline: auto;}
.skip-link {position: absolute; left: -9999px;}
.skip-link:focus {position: fixed; left: 16px; top: 16px; z-index: 100; padding: 8px 16px; background: #fff; color: var(--ink); font-size: 14px;}
:focus-visible {outline: 2px solid currentColor; outline-offset: 3px;}

/* Buttons and links */
.button {display: inline-flex; align-items: center; justify-content: center; padding: 15px 24px; border-radius: 999px; font-size: 16px; font-weight: 500; line-height: 20px; white-space: nowrap; transition: opacity .15s;}
.button:hover {opacity: .88;}
.button-light {background: #fff; color: var(--ink);}
.button-blue {background: var(--blue); color: #fff;}
.button-small {padding: 10px 18px; font-size: 14px; line-height: 18px;}
.text-link {font-size: 16px; font-weight: 500; color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;}
.text-link-dark {color: var(--ink);}
.actions {display: flex; align-items: center; gap: 24px;}

/* Header */
.site-header {position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; height: 88px; color: #fff;}
.logo {font-size: 22px; font-weight: 500; letter-spacing: -.02em;}
.nav-links {display: flex; justify-content: center; gap: 40px; font-size: 15px;}
.nav-links a:hover {text-decoration: underline; text-underline-offset: 4px;}
.site-header .button {justify-self: end;}

/* Hero */
/* Front page is the hero alone: it fills the viewport, the mountain sits at the bottom, nothing scrolls. */
.front .hero {position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;}
.front .hero-copy {flex: 0 0 auto; gap: 20px; padding-top: 20px;}
.front .hero h1 {font-size: clamp(56px, 7.2vw, 104px);}
.front .deck {font-size: clamp(20px, 2vw, 28px);}
.front .panorama {position: absolute; left: 0; right: 0; top: 0; bottom: 0; height: auto; margin-top: 0; aspect-ratio: auto; background-size: 100% auto; background-position: center calc(100% + 8vw); pointer-events: none; z-index: 0;}
.front .pano-label {display: none;}
@media (max-width: 760px) {
  .front .panorama {top: auto; height: 46vh; background-size: 200% auto; background-position: 40% bottom;}
}
.hero {background: var(--blue); color: #fff; padding-top: 88px; overflow: hidden;}
.hero-copy {position: relative; z-index: 1; display: flex; flex-direction: column; gap: 28px; padding-top: 32px;}
.yc-pill {display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 20px;}
.yc-mark {display: grid; place-items: center; width: 22px; height: 22px; border-radius: 3px; background: #F26522; color: #fff; font-weight: 500; font-size: 14px; line-height: 1;}
.hero h1 {font-family: var(--font-heading); font-size: clamp(64px, 8.9vw, 128px); line-height: .875; letter-spacing: -.02em;}
.hero h1 em, .hero h1 span {display: block;}
.deck {font-size: clamp(24px, 2.5vw, 36px); line-height: 1.22; font-weight: 500; letter-spacing: -.015em;}
.hero .actions {padding-top: 4px;}
.panorama {position: relative; width: 100%; aspect-ratio: 1440 / 900; margin-top: -23.75vw; background: url("assets/panorama.png") center bottom / cover no-repeat;}
.pano-label {position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; border-radius: 999px; background: #fff;}
.pano-label i {width: 10px; height: 10px; border: 2px solid var(--blue); flex-shrink: 0;}
.pano-label b {display: block; font-family: var(--font-mono); font-weight: 400; font-size: 13px; line-height: 18px; letter-spacing: .08em; color: var(--blue-text);}
.pano-label small {display: block; font-size: 13px; line-height: 16px; color: var(--ink);}
.pano-label-data {left: 6.67%; top: 71.1%;}
.pano-label-rl {right: 6.8%; top: 85.6%; background: var(--blue);}
.pano-label-rl i {border: 0; background: #fff;}
.pano-label-rl b, .pano-label-rl small {color: #fff;}

.hero-caption {display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;}
.hero-caption span {display: flex; align-items: center; gap: 12px;}
.hero-caption .muted {color: var(--muted);}
.sq {width: 10px; height: 10px; border: 1.5px solid var(--blue); flex-shrink: 0;}
.sq-filled {background: var(--blue);}

/* Section heads */
.section-head {display: flex; justify-content: space-between; align-items: flex-end; gap: 48px;}
.section-head h2, .task h2, .contact h2 {font-family: var(--font-heading); font-size: 76px; line-height: 72px; letter-spacing: -.015em; color: var(--ink);}
.section-head p {width: 430px; flex-shrink: 0; font-size: 18px; line-height: 27px;}

/* Apps */
.apps {padding: 128px 0;}
.apps .section-head {padding-bottom: 56px;}
.app-grid {display: grid; grid-template-columns: repeat(7, 1fr); column-gap: 16px; row-gap: 40px;}
.app-grid li {display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 1px solid var(--rule);}
.app-grid img, .app-grid svg {width: 32px; height: 32px;}
.app-grid span {display: flex; flex-direction: column; gap: 4px;}
.app-grid b {font-weight: 400; font-size: 20px; line-height: 24px; letter-spacing: -.01em;}
.app-grid small {font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);}

/* Task */
.task {padding: 128px 0; border-top: 1px solid var(--rule);}
.task-head {display: flex; justify-content: space-between; align-items: flex-start; gap: 48px;}
.task-head h2 {width: 560px; flex-shrink: 0;}
.how-to-read {width: 600px; padding-top: 6px;}
.how-to-read li {display: flex; gap: 20px; padding: 18px 0; border-top: 1px solid var(--rule); font-size: 16px; line-height: 24px; color: var(--body-muted);}
.how-to-read li:first-child {border-top-color: var(--ink);}
.how-to-read li:last-child {border-bottom: 1px solid var(--rule);}
.how-to-read b {display: block; margin-bottom: 4px; font-weight: 500; font-size: 18px; line-height: 22px; color: var(--ink);}
.num {width: 28px; flex-shrink: 0; padding-top: 3px; font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--blue-text);}
.num-red {color: var(--red);}

.diagram-panel {display: flex; justify-content: center; margin-top: 64px; padding: 40px 0; background: var(--panel); border-radius: 4px;}
.diagram {position: relative; width: 1246px; height: 840px; flex-shrink: 0;}
.diagram-lines {position: absolute; left: 0; top: 0;}
.dcard {position: absolute; display: flex; flex-direction: column; gap: 8px; width: 330px; padding: 22px; background: #fff; border: 1px solid #DDD; border-radius: 10px;}
.dapp {display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 16px; line-height: 22px; color: #555;}
.dapp img, .dapp svg {width: 22px; height: 22px; flex-shrink: 0;}
.dapp-docusign {color: #5135A7;}
.dtitle {font-size: 23px; line-height: 28px; letter-spacing: -.02em; color: #000;}
.ddetail {font-size: 15px; line-height: 22px; color: #555;}
.derror {color: #B42C25;}
.dcard .derror {margin-top: -2px;}
.dcheck {position: absolute; display: flex; flex-direction: column; gap: 12px; width: 788px; padding: 22px 0; border-top: 1px solid #C9C9C9;}
.dcheck-head {display: flex; justify-content: space-between; align-items: center; font-size: 23px; line-height: 28px; color: #000;}
.dcheck-head .derror {font-size: 15px; line-height: 22px;}
.dcheck-values {display: flex; align-items: center; gap: 16px; font-size: 20px; line-height: 28px; color: #000;}
.dcheck .ddetail {font-size: 16px; line-height: 23px;}
.flow {display: none;}

/* Long-horizon */
.long {padding: 128px 0; background: var(--blue); color: #fff;}
.section-head-blue h2 {color: #fff;}
.section-head-blue h2 {max-width: 700px;}
.section-head-blue p {width: 500px; color: #fff;}
.close-panel {display: flex; flex-direction: column; gap: 24px; margin-top: 56px; padding: 32px; background: #fff; color: var(--ink); border-radius: 4px;}
.close-head {display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--rule);}
.close-head h3 {font-size: 20px; font-weight: 500; line-height: 26px;}
.close-head p {font-size: 15px; color: var(--muted);}
.legend {display: flex; gap: 28px; font-size: 14px; line-height: 20px;}
.legend > span {display: flex; align-items: center; gap: 10px;}
.legend-short {display: none;}
.tick {display: block; flex-shrink: 0;}
.tick-agent {width: 2px; height: 14px; background: var(--blue);}
.tick-world {width: 3px; height: 18px; background: #9AA4B1;}
.trace {display: grid; grid-template-columns: 160px 1fr;}
.lanes {display: flex; flex-direction: column;}
.lanes li {flex: 1; display: flex; align-items: center; gap: 10px; font-size: 14px;}
.lanes img, .lanes svg {width: 16px; height: 16px; flex-shrink: 0;}
.trace-img {width: 100%; height: auto;}
.days, .phases {display: grid; grid-template-columns: repeat(6, 1fr); padding-left: 160px;}
.days {margin-top: -14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);}
.phases {margin-top: -12px;}
.phases p {padding-right: 20px; font-size: 14px; line-height: 20px; color: var(--body-muted);}
.phases .phase-wide {grid-column: 3 / 6;}
.phases .phase-end {font-weight: 500; color: var(--ink);}
.checks {padding-top: 8px;}
.checks h4 {padding-bottom: 12px; border-bottom: 1px solid var(--ink); font-size: 16px; font-weight: 500;}
.checks li {display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule);}
.checks li:last-child {border-bottom: 0; padding-bottom: 0;}
.checks svg {width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;}
.check-name {width: 420px; flex-shrink: 0; font-size: 15px; line-height: 22px;}
.check-value {display: flex; flex-direction: column; gap: 2px; font-family: var(--font-mono); font-size: 13px; line-height: 22px; color: var(--body-muted);}
.check-count {color: var(--red-text);}
.check-note {font-family: var(--font-body); font-size: 14px; line-height: 20px;}

/* Contact */
.contact {display: flex; justify-content: space-between; align-items: center; gap: 48px; padding: 128px 0;}
.contact-copy {display: flex; flex-direction: column; gap: 24px; width: 560px;}
.contact-copy p {max-width: 460px; font-size: 18px; line-height: 27px;}
.contact-copy .actions {padding-top: 8px;}
.snowglobe {width: min(620px, 46%); height: auto;}

/* Footer */
.site-footer {display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 0 36px; border-top: 1px solid var(--rule);}
.site-footer .logo {font-size: 20px;}
.footer-tagline, .footer-copy {font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;}
.footer-backed {display: flex; align-items: center; gap: 8px; font-size: 13px;}
.footer-backed img {width: auto; height: 20px;}

/* Contact dialog, unchanged from the previous homepage. */
.contact-modal-open {overflow: hidden;}
.contact-dialog {margin: auto; width: min(500px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 44px 36px 36px; overflow-y: auto; background: #fff; color: #151515; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 24px 90px #0004; font-family: var(--font-body);}
.contact-dialog::backdrop {background: #0009; backdrop-filter: blur(3px);}
.contact-close {position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; font-size: 26px; color: #666; cursor: pointer; border-radius: 4px;}
.contact-close:hover {color: #111; background: #f0f0f0;}
.contact-dialog h2 {font-family: var(--font-heading); font-size: 38px; line-height: 1.15; letter-spacing: -.025em; padding-right: 20px;}
.contact-dialog > p {margin-top: 12px; font-size: 15px; color: #666;}
.contact-options {margin-top: 30px; border-top: 1px solid #ddd;}
.contact-option {display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 10px; border-bottom: 1px solid #ddd; transition: background .15s;}
.contact-option:hover {background: #f5f5f5;}
.contact-option strong {display: block; font-size: 16px; font-weight: 500;}
.contact-option small {display: block; margin-top: 6px; font-size: 13px; color: #666;}
.contact-email-option {display: block;}
.contact-email-action {display: flex; align-items: center; justify-content: space-between; gap: 16px;}
.contact-email-address {display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 13px; color: #666;}
.contact-email-address > a:hover {color: #151515; text-decoration: underline;}
.copy-email-control {display: inline-flex; position: relative; flex-shrink: 0;}
.copy-email {display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #ddd; border-radius: 4px; color: #777; cursor: pointer;}
.copy-email:hover {border-color: #999; color: #151515; background: #fff;}
.copy-email-check, .copy-email.is-copied .copy-email-icon {display: none;}
.copy-email.is-copied .copy-email-check {display: block;}
.copy-email.is-copied {color: #151515; border-color: #aaa;}
.copy-email-feedback:not(:empty) {position: absolute; right: 0; bottom: calc(100% + 7px); width: max-content; max-width: 200px; padding: 5px 8px; background: #151515; color: #fff; font-size: 11px; line-height: 1.4; border-radius: 4px; pointer-events: none;}

/* The wide task diagram needs 1246px; below that, show the stacked flow. */
@media (max-width: 1400px) {
  .diagram {display: none;}
  .flow {display: block; width: min(560px, 100%);}
  .diagram-panel {padding: 32px 24px;}
}

@media (max-width: 1180px) {
  .app-grid {grid-template-columns: repeat(4, 1fr);}
  .section-head {flex-direction: column; align-items: flex-start; gap: 24px;}
  .section-head p {width: auto; max-width: 560px;}
  .task-head {flex-direction: column; gap: 40px;}
  .task-head h2 {width: auto;}
  .how-to-read {width: 100%; max-width: 640px;}
  .contact-copy {width: auto;}
  .check-name {width: 300px;}
}

/* Stacked task flow (tablet and mobile) */
.flow > li {position: relative; display: flex; flex-direction: column; gap: 6px;}
.flow > li + li {margin-top: 22px;}
.flow > li + li::before {content: ""; position: absolute; left: 50%; top: -21px; width: 1.2px; height: 19px; background: #9AA4B1;}
.flow > li + li::after {content: ""; position: absolute; left: calc(50% - 3.5px); top: -8px; width: 7px; height: 7px; border-right: 1.2px solid #9AA4B1; border-bottom: 1.2px solid #9AA4B1; transform: rotate(45deg);}
.fcard {padding: 14px 16px; background: #fff; border: 1px solid #E3E8EE; border-radius: 6px;}
.fcard .dapp {gap: 8px; margin: 0; font-size: 12px; line-height: 16px; color: var(--muted);}
.fcard .dapp img, .fcard .dapp svg {width: 16px; height: 16px;}
.fcard .dtitle {font-size: 16px; line-height: 22px; font-weight: 500; letter-spacing: 0; color: var(--ink);}
.fcard .ddetail {font-size: 13px; line-height: 19px; color: var(--muted);}
.fcard .derror {color: var(--red-text);}
.fcard-error {background: #FFF6F5; border-color: #F2C9C5;}
.fcheck {gap: 10px; padding: 16px; background: #fff; border-top: 2px solid var(--ink); border-radius: 0 0 6px 6px;}
.fcheck-head {display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 500;}
.pill-red {padding: 3px 9px; border-radius: 999px; background: var(--red); color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase;}
.fcheck-value {font-size: 18px; line-height: 24px;}
.fcheck .derror {color: var(--red);}
.fcheck .ddetail {font-size: 13px; line-height: 19px; color: var(--muted);}

@media (max-width: 760px) {
  .wrap {width: calc(100% - 48px);}
  .site-header {height: 64px;}
  .logo {font-size: 21px;}
  .nav-links {display: none;}

  .hero {padding-top: 64px;}
  .hero-copy {gap: 20px; padding-top: 28px;}
  .yc-pill {gap: 8px; padding: 5px 12px 5px 5px; font-size: 13px;}
  .yc-mark {width: 20px; height: 20px; font-size: 13px;}
  .hero h1 {font-size: 48px; line-height: 46px;}
  .deck {font-size: 21px; line-height: 28px; letter-spacing: -.01em;}
  .hero .actions {flex-direction: column; align-items: stretch; gap: 16px; padding-top: 8px;}
  .hero .text-link {align-self: center;}
  .panorama {aspect-ratio: auto; height: 350px; margin-top: -24px; background-size: 752px 470px;}
  .pano-label {gap: 8px; padding: 8px 12px 8px 10px;}
  .pano-label i {width: 8px; height: 8px; border-width: 1.5px;}
  .pano-label b {font-size: 11px; line-height: 14px;}
  .pano-label small {display: none;}
  .pano-label-data {left: 16px; top: 132px;}
  .pano-label-rl {left: auto; right: 16px; top: 282px;}

  .hero-caption {flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 0; font-size: 11px;}
  .hero-caption .sq {display: none;}
  .hero-caption .muted {font-size: 0;}
  .hero-caption .muted::before {content: "↓ Seeded into"; font-size: 11px;}

  .section-head {gap: 20px;}
  .section-head h2, .task h2, .contact h2 {font-size: 44px; line-height: 42px;}
  .section-head h2 br {display: none;}
  .section-head p {font-size: 16px; line-height: 24px;}

  .apps {padding: 72px 0;}
  .apps .section-head {padding-bottom: 28px;}
  .app-grid {grid-template-columns: repeat(2, 1fr); row-gap: 0;}
  .app-grid li {flex-direction: row; align-items: center; gap: 12px; padding: 16px 0;}
  .app-grid img, .app-grid svg {width: 26px; height: 26px; flex-shrink: 0;}
  .app-grid span {gap: 2px;}
  .app-grid b {font-size: 16px; line-height: 20px;}
  .app-grid small {font-size: 10px; line-height: 13px;}

  .task {padding: 72px 0;}
  .task-head {gap: 28px;}
  .br-wide {display: none;}
  .how-to-read li {gap: 14px; padding: 16px 0; font-size: 15px; line-height: 22px;}
  .how-to-read b {font-size: 16px; line-height: 21px;}
  .num {width: 22px; font-size: 11px;}
  .diagram-panel {margin-top: 32px; padding: 20px 16px;}
  .flow {width: 100%;}

  .long {padding: 72px 0;}
  .long .wrap {width: calc(100% - 32px);}
  .section-head-blue {padding: 0 8px;}
  .section-head-blue p {width: auto;}
  .close-panel {gap: 16px; margin-top: 28px; padding: 18px 16px 20px;}
  .close-head {flex-direction: column; gap: 4px; padding-bottom: 14px;}
  .close-head h3 {font-size: 17px; line-height: 22px;}
  .close-head p {font-size: 13px;}
  .legend {flex-direction: column; gap: 6px; font-size: 12px; line-height: 16px;}
  .legend-long {display: none;}
  .legend-short {display: inline;}
  .trace {grid-template-columns: 16px 1fr; column-gap: 8px;}
  .lanes span {display: none;}
  .lanes li {height: 26px; flex: none;}
  .trace-img {height: 182px;}
  .lanes img, .lanes svg {width: 14px; height: 14px;}
  .days {display: flex; justify-content: space-between; margin-top: -6px; padding-left: 24px; font-size: 10px;}
  .days span:not(:first-child):not(:last-child) {display: none;}
  .phases {display: flex; flex-direction: column; gap: 4px; margin-top: 0; padding-left: 0;}
  .phases p {padding-right: 0; font-size: 13px; line-height: 19px;}
  .checks h4 {padding-bottom: 10px; font-size: 14px;}
  .checks li {gap: 10px; padding: 12px 0; flex-wrap: wrap;}
  .checks svg {width: 16px; height: 16px;}
  .check-name {width: calc(100% - 26px); font-size: 14px; line-height: 20px;}
  .check-value {width: 100%; padding-left: 26px; font-size: 11px; line-height: 17px;}
  .check-note {font-size: 13px; line-height: 19px;}

  .contact {flex-direction: column; align-items: stretch; gap: 20px; padding: 72px 0 56px;}
  .snowglobe {order: -1; align-self: center; width: 300px; margin-bottom: 16px;}
  .contact-copy {gap: 20px;}
  .contact-copy p {font-size: 16px; line-height: 24px;}
  .contact-copy .actions {flex-direction: column; align-items: stretch; gap: 16px;}
  .contact-copy .text-link {align-self: center;}

  .site-footer {display: grid; grid-template-columns: 1fr auto; row-gap: 14px; padding: 24px 0 40px;}
  .footer-tagline {grid-row: 2; font-size: 10px; letter-spacing: .08em;}
  .footer-copy {grid-row: 2; font-size: 10px; letter-spacing: .08em;}
  .footer-backed img {height: 18px;}

  .contact-dialog {padding: 40px 22px 24px;}
}