@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('./assets/fonts/bricolage-grotesque-latin-500-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('./assets/fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Sans';
  src: url('./assets/fonts/geist-sans-latin-400-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Sans';
  src: url('./assets/fonts/geist-sans-latin-500-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Sans';
  src: url('./assets/fonts/geist-sans-latin-600-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('./assets/fonts/geist-mono-latin-400-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('./assets/fonts/geist-mono-latin-500-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --ink: #14213d;
  --muted: #5a6478;
  --line: #d8dde6;
  --accent: #f2a007;
  --accent-ink: #8a5300;
  --on-accent: #14213d;
  --accent-soft: #fdf1d8;
  --good: #1d7a4c;
  --good-soft: #e1f2e8;
  --navy: #14213d;
  --on-navy: #f6f7f9;
  --on-navy-muted: #b7c0d0;
  --display: 'Bricolage Grotesque', 'Avenir Next', ui-sans-serif, system-ui, sans-serif;
  --body: 'Geist Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --max: 1200px;
  --shadow: 0 1px 2px rgba(20,33,61,.06), 0 6px 20px rgba(20,33,61,.06);
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.55 var(--body);
  -webkit-font-smoothing:antialiased;
}
button,a {
  font:inherit;
}
button {
  color:inherit;
}
a {
  color:inherit;
  text-decoration:none;
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:4px;
}
::selection {
  background:var(--accent-soft);
  color:var(--navy);
}
.section-shell {
  width:min(var(--max),calc(100% - 64px));
  margin-inline:auto;
}
.skip-link {
  position:absolute;
  top:-60px;
  left:16px;
  z-index:100;
  background:var(--surface);
  padding:12px 18px;
  border:2px solid var(--navy);
}
.skip-link:focus {
  top:12px;
}
[hidden] {
  display:none!important;
}
.site-header {
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(246,247,249,.94);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(20,33,61,.08);
}
.nav-wrap {
  height:78px;
  width:min(1320px,calc(100% - 64px));
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand {
  color:inherit;
  text-decoration:none;
}
.lockup {
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-mark {
  width:40px;
  height:40px;
  flex:none;
  overflow:visible;
  --mark-sun: var(--accent);
  --mark-bar: var(--ink);
}
.mark-sun {
  fill:none;
  stroke:var(--mark-sun,var(--accent));
  stroke-width:4;
  stroke-linecap:round;
}
.mark-bar {
  fill:var(--mark-bar,var(--ink));
}
.wordmark {
  display:grid;
  line-height:1.05;
}
.wordmark b {
  color:var(--ink);
  font:700 22px var(--display);
  letter-spacing:-.015em;
}
.wordmark b span {
  color:var(--accent-ink);
}
.wordmark small {
  color:var(--muted);
  font:400 12px/1.3 var(--body);
  letter-spacing:.02em;
}
.primary-nav {
  display:flex;
  align-items:center;
  gap:38px;
  font-size:13px;
  font-weight:600;
}
.primary-nav>a {
  color:#5a6478;
  transition:color .2s;
}
.primary-nav>a:hover {
  color:var(--navy);
}
.menu-toggle {
  display:none;
}
.button {
  min-height:52px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  border:1px solid transparent;
  border-radius:3px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.005em;
  cursor:pointer;
  transition:transform .2s,background .2s,color .2s,border-color .2s;
}
.button span {
  font-size:16px;
  line-height:1;
  transition:transform .2s;
}
.button:hover {
  transform:translateY(-2px);
}
.button:hover span {
  transform:translate(2px,-2px);
}
.button-small {
  min-height:40px;
  padding:0 16px;
  font-size:12px;
}
.button-dark {
  background:var(--navy);
  color:var(--surface);
}
.button-dark:hover {
  background:var(--navy);
}
.button-accent {
  background:var(--accent);
  color:var(--navy);
}
.button-accent:hover {
  filter:brightness(1.05);
}
.button-outline {
  border-color:var(--navy);
  background:transparent;
  color:var(--navy);
}
.button-outline:hover {
  background:var(--navy);
  color:var(--surface);
}
.hero {
  min-height:682px;
  padding-top:88px;
  display:grid;
  grid-template-columns:.93fr 1.07fr;
  position:relative;
  align-items:center;
  column-gap:20px;
}
.hero-copy {
  align-self:center;
  padding-bottom:66px;
  position:relative;
  z-index:2;
}
.eyebrow {
  margin:0 0 21px;
  color:#5a6478;
  font:500 10px/1.2 var(--mono);
  letter-spacing:.105em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow-dot {
  width:7px;
  height:7px;
  background:var(--accent);
  border-radius:50%;
}
.hero h1,.workflow-heading h2,.showcase h2,.pricing-heading h2,.faq-layout h2,.closing-inner h2 {
  font:600 clamp(54px,6.35vw,83px)/.98 var(--display);
  letter-spacing:-.064em;
  color:var(--navy);
  margin:0;
}
.hero h1 em,.workflow-heading h2 em,.showcase h2 em,.pricing-heading h2 em,.faq-layout h2 em,.closing-inner h2 em {
  font-style:normal;
  color:#8a5300;
}
.hero-intro {
  max-width:450px;
  margin:25px 0 28px;
  font-size:16px;
  line-height:1.7;
  color:#5a6478;
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:24px;
}
.text-link {
  font-size:12px;
  font-weight:600;
  color:#5a6478;
}
.text-link span {
  padding-left:4px;
  color:#8a5300;
}
.hero-note {
  margin-top:50px;
  display:flex;
  align-items:center;
  gap:13px;
  max-width:365px;
}
.note-rule {
  height:1px;
  width:31px;
  background:var(--accent);
  flex:none;
}
.hero-note p {
  margin:0;
  color:#5a6478;
  font:400 10px/1.5 var(--mono);
  letter-spacing:.025em;
  text-transform:uppercase;
}
.hero-art {
  min-height:530px;
  position:relative;
  display:grid;
  place-items:center;
}
.art-glow {
  position:absolute;
  width:83%;
  height:84%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(242,160,7,.18),rgba(242,160,7,0) 67%);
}
.proposal-window {
  width:min(100%,565px);
  background:var(--surface);
  border:1px solid rgba(20,33,61,.16);
  box-shadow:var(--shadow);
  position:relative;
  z-index:1;
  transform:rotate(1.2deg);
}
.window-top {
  height:43px;
  background:#eef1f5;
  border-bottom:1px solid #d8dde6;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 17px;
}
.window-brand {
  display:flex;
  align-items:center;
  gap:6px;
}
.mini-mark {
  width:22px;
  height:22px;
  flex:none;
  --mark-sun: var(--accent);
  --mark-bar: var(--ink);
}
.window-wordmark {
  display:flex;
  align-items:baseline;
  gap:5px;
  color:var(--ink);
  font:600 9px var(--display);
}
.window-wordmark b {
  font-weight:700;
}
.window-wordmark b span {
  color:var(--accent-ink);
}
.window-wordmark small {
  color:var(--muted);
  font:400 6px var(--body);
}
.preview-label {
  font:400 8px var(--mono);
  letter-spacing:.02em;
  color:#5a6478;
}
.preview-label i {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#5a6478;
  margin:0 5px 1px 0;
}
.workspace {
  min-height:394px;
  display:grid;
  grid-template-columns:43px minmax(0,1fr);
}
.workspace-rail {
  background:var(--navy);
  display:flex;
  align-items:center;
  flex-direction:column;
  padding:12px 0;
  gap:14px;
  color:#f6f7f9;
}
.rail-logo {
  width:23px;
  height:23px;
  margin-bottom:11px;
  --mark-sun: var(--accent);
  --mark-bar: var(--on-navy);
}
.mark-on-navy .mark-bar {
  fill:var(--on-navy);
}
.rail-icon {
  font:16px var(--body);
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  color:#b7c0d0;
}
.rail-icon.active {
  background:var(--accent-soft);
  color:var(--accent);
  border-radius:4px;
}
.rail-bottom {
  margin-top:auto;
  color:#b7c0d0;
}
.workspace-main {
  min-width:0;
  padding:22px 20px 18px;
}
.workspace-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:22px;
}
.overline {
  display:block;
  font:400 7px var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#5a6478;
  margin-bottom:4px;
}
.workspace-heading h2 {
  font:600 17px/1.1 var(--display);
  letter-spacing:-.03em;
  color:var(--navy);
}
.preview-share {
  border:0;
  border-radius:2px;
  background:var(--navy);
  color:white;
  font:500 8px var(--body);
  padding:8px 10px;
}
.preview-share span {
  color:var(--accent);
  padding-left:5px;
}
.project-title {
  height:47px;
  display:flex;
  align-items:center;
  border-top:1px solid #d8dde6;
  border-bottom:1px solid #d8dde6;
  gap:10px;
}
.project-icon {
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  background:#fdf1d8;
  color:#8a5300;
  font-size:14px;
}
.project-title div:nth-child(2) {
  display:grid;
  gap:2px;
}
.project-title div span {
  font:400 6px var(--mono);
  letter-spacing:.07em;
  color:#5a6478;
}
.project-title strong {
  font:600 10px var(--display);
  color:var(--navy);
}
.draft-pill {
  margin-left:auto;
  border:1px solid var(--line);
  border-radius:12px;
  padding:2px 8px;
  color:#8a5300;
  font:400 7px var(--mono);
}
.workspace-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
  margin:13px 0;
  min-width:0;
}
.work-panel {
  min-width:0;
  height:188px;
  background:var(--surface);
  border:1px solid #eef1f5;
  padding:11px;
  position:relative;
}
.panel-head {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:8px;
}
.panel-head>span:first-child {
  font:400 7px var(--mono);
  color:#5a6478;
}
.panel-head b {
  font:600 9px var(--display);
  color:#14213d;
}
.check-mark {
  margin-left:auto;
  width:13px;
  height:13px;
  border-radius:50%;
  background:#e1f2e8;
  color:#1d7a4c;
  display:grid;
  place-items:center;
  font-size:8px;
}
.roof-illustration {
  height:111px;
  margin:7px 2px 0;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,var(--surface-2),#f6f7f9 70%);
}
.sun {
  position:absolute;
  right:22px;
  top:15px;
  width:21px;
  height:21px;
  background:#f2a007;
  border-radius:50%;
  opacity:.75;
}
.roof-grid {
  position:absolute;
  left:35px;
  top:32px;
  width:111px;
  height:62px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:3px;
  transform:skewY(-16deg);
  background:#14213d;
  padding:4px;
  box-shadow:7px 8px 0 #b7c0d0;
}
.roof-grid span {
  background:linear-gradient(140deg,#5a6478,#14213d);
  border:1px solid rgba(255,255,255,.18);
}
.roof-line {
  position:absolute;
  bottom:13px;
  left:0;
  right:0;
  border-top:1px solid #b7c0d0;
}
.panel-footer {
  position:absolute;
  bottom:9px;
  left:11px;
  right:11px;
  display:flex;
  justify-content:space-between;
  color:#5a6478;
  font:400 7px var(--mono);
}
.dots {
  letter-spacing:2px;
}
.value-visual {
  height:114px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 5px 4px;
}
.value-big {
  color:#14213d;
  font:600 18px/.92 var(--display);
  letter-spacing:-.035em;
}
.value-big em {
  font-style:normal;
  color:#8a5300;
}
.bar-chart {
  height:68px;
  display:flex;
  align-items:end;
  gap:4px;
  padding:0 2px;
}
.bar-chart i {
  display:block;
  width:9px;
  height:var(--height);
  background:#f2a007;
  opacity:.86;
}
.bar-chart i:nth-child(odd) {
  background:#eef1f5;
}
.document-strip {
  height:46px;
  background:#eef1f5;
  display:flex;
  align-items:center;
  padding:0 10px;
  gap:9px;
}
.doc-icon {
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  background:var(--surface);
  color:#8a5300;
  font-size:13px;
}
.document-strip>div:nth-child(2) {
  display:grid;
  gap:1px;
}
.document-strip b {
  font:600 8px var(--display);
  color:#14213d;
}
.document-strip span {
  font:400 6px var(--mono);
  color:#5a6478;
}
.strip-arrow {
  margin-left:auto;
  color:#8a5300;
  font-size:14px;
}
.floating-note {
  position:absolute;
  right:-9px;
  bottom:66px;
  width:104px;
  height:104px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  text-align:center;
  background:var(--accent);
  color:var(--navy);
  z-index:2;
  transform:rotate(8deg);
  font:500 9px/1.28 var(--mono);
  text-transform:uppercase;
  letter-spacing:.04em;
  box-shadow:0 7px 20px rgba(20,33,61,.1);
}
.floating-star {
  font:19px/1 var(--body);
  margin-bottom:5px;
}
.hero-bottom {
  position:absolute;
  left:0;
  right:0;
  bottom:27px;
  display:flex;
  align-items:center;
  gap:16px;
  color:#5a6478;
  font:400 8px var(--mono);
  letter-spacing:.08em;
}
.hero-bottom-line {
  height:1px;
  flex:1;
  background:#d8dde6;
}
.section-kicker {
  display:flex;
  align-items:center;
  gap:12px;
  font:400 9px var(--mono);
  letter-spacing:.065em;
  text-transform:uppercase;
  color:#5a6478;
}
.section-kicker>span:first-child {
  color:#8a5300;
}
.kicker-line {
  height:1px;
  width:38px;
  background:#d8dde6;
}
.intro {
  padding-top:97px;
  padding-bottom:96px;
}
.intro-content {
  display:grid;
  grid-template-columns:1.1fr .7fr;
  gap:100px;
  padding:49px 4% 51px;
}
.intro-content h2 {
  margin:0;
  max-width:590px;
  font:600 clamp(36px,4.35vw,56px)/1.04 var(--display);
  letter-spacing:-.055em;
  color:var(--navy);
}
.intro-aside {
  align-self:end;
  padding-bottom:4px;
}
.intro-aside p {
  font-size:13px;
  color:#5a6478;
  line-height:1.75;
  margin:0 0 14px;
}
.problem-line {
  display:flex;
  align-items:center;
  gap:16px;
  padding-top:20px;
  border-top:1px solid #d8dde6;
  color:var(--muted);
  font:400 9px var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.problem-symbol {
  color:#8a5300;
  font-size:18px;
}
.problem-line-fill {
  height:1px;
  background:#d8dde6;
  flex:1;
}
.problem-end {
  font-size:8px;
  color:#5a6478;
}
.workflow-section {
  background:var(--navy);
  color:var(--surface);
  position:relative;
  overflow:hidden;
}
.workflow-section:before {
  content:"";
  position:absolute;
  top:-230px;
  right:-100px;
  width:540px;
  height:540px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  box-shadow:0 0 0 45px rgba(255,255,255,.015),0 0 0 90px rgba(255,255,255,.015);
}
.workflow-inner {
  padding-top:89px;
  padding-bottom:94px;
  position:relative;
  z-index:1;
}
.workflow-section .section-kicker {
  color:#b7c0d0;
}
.workflow-section .section-kicker>span:first-child {
  color:var(--accent);
}
.workflow-section .kicker-line {
  background:var(--on-navy-muted);
}
.workflow-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin:43px 0 54px;
}
.workflow-heading h2 {
  color:var(--surface);
  font-size:clamp(45px,5.3vw,68px);
}
.workflow-heading h2 em {
  color:var(--on-navy-muted);
}
.workflow-heading>p {
  max-width:250px;
  margin:0 5% 5px 32px;
  font-size:12px;
  color:#b7c0d0;
}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(183,192,208,.32);
  border-bottom:1px solid rgba(183,192,208,.32);
}
.step {
  min-height:228px;
  padding:22px 24px 17px 0;
  position:relative;
}
.step+.step {
  border-left:1px solid rgba(183,192,208,.32);
  padding-left:25px;
}
.step-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#f2a007;
  font:400 10px var(--mono);
}
.step-glyph {
  font-size:24px;
  color:#f2a007;
}
.step h3 {
  font:600 24px/1.1 var(--display);
  letter-spacing:-.035em;
  margin:23px 0 8px;
  color:var(--on-navy);
}
.step p {
  max-width:260px;
  margin:0;
  color:#b7c0d0;
  font-size:12px;
  line-height:1.7;
}
.step-line {
  position:absolute;
  bottom:0;
  left:0;
  right:23px;
  border-top:1px solid rgba(183,192,208,.32);
  padding:10px 0;
  display:flex;
  justify-content:space-between;
  color:#b7c0d0;
  font:400 8px var(--mono);
  letter-spacing:.07em;
}
.step+.step .step-line {
  left:25px;
}
.showcase {
  padding-top:97px;
  padding-bottom:107px;
}
.showcase-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:72px;
  align-items:center;
  padding:54px 3% 0;
}
.showcase-copy .eyebrow {
  color:#8a5300;
  margin-bottom:18px;
}
.showcase h2 {
  font-size:clamp(49px,5.8vw,74px);
}
.showcase-copy>p:not(.eyebrow) {
  max-width:390px;
  margin:21px 0 24px;
  color:#5a6478;
  font-size:13px;
  line-height:1.75;
}
.showcase-footnote {
  margin-top:17px;
  color:#5a6478;
  font:400 8px var(--mono);
}
.proposal-sheet {
  min-height:446px;
  background:var(--surface);
  position:relative;
  padding:24px 29px 18px;
  box-shadow:0 17px 40px rgba(20,33,61,.11);
  border:1px solid #d8dde6;
  transform:rotate(-1deg);
}
.sheet-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#5a6478;
  font:400 7px var(--mono);
  letter-spacing:.09em;
}
.sheet-brand {
  display:flex;
  align-items:center;
  gap:7px;
}
.sheet-mark {
  width:28px;
  height:28px;
  flex:none;
  --mark-sun: var(--accent);
  --mark-bar: var(--ink);
}
.sheet-wordmark {
  display:grid;
  line-height:1.05;
}
.sheet-wordmark b {
  color:var(--ink);
  font:700 12px var(--display);
  letter-spacing:-.015em;
}
.sheet-wordmark b span {
  color:var(--accent-ink);
}
.sheet-wordmark small {
  color:var(--muted);
  font:400 6px var(--body);
  letter-spacing:.02em;
}
.sheet-art {
  height:240px;
  margin-top:19px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#eef1f5 0%,#d8dde6 67%,#b7c0d0 68%,#5a6478 100%);
}
.sheet-sun {
  position:absolute;
  top:40px;
  right:90px;
  width:45px;
  height:45px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 13px rgba(242,160,7,.15);
}
.sheet-horizon {
  position:absolute;
  bottom:73px;
  width:100%;
  height:35px;
  background:#5a6478;
  clip-path:polygon(0 100%,0 62%,17% 25%,38% 76%,58% 30%,72% 62%,88% 21%,100% 57%,100% 100%);
}
.sheet-building {
  position:absolute;
  bottom:40px;
  left:35%;
  width:31%;
  height:105px;
  background:var(--surface);
  border-top:7px solid var(--navy);
  box-shadow:0 4px 0 rgba(20,33,61,.12);
}
.sheet-building span {
  display:inline-block;
  margin:22px 0 0 13px;
  width:18px;
  height:20px;
  border:2px solid var(--line);
  background:var(--surface-2);
}
.sheet-roof {
  position:absolute;
  left:31%;
  bottom:144px;
  width:39%;
  height:23px;
  background:var(--navy);
  transform:skewY(-8deg);
  z-index:1;
}
.sheet-panels {
  position:absolute;
  left:36%;
  bottom:152px;
  width:29%;
  height:10px;
  display:flex;
  gap:3px;
  z-index:2;
  transform:skewY(-8deg);
}
.sheet-panels i {
  flex:1;
  border:1px solid var(--on-navy-muted);
  background:#5a6478;
}
.sheet-hill {
  position:absolute;
  bottom:-25px;
  left:-4%;
  width:108%;
  height:86px;
  border-radius:50% 50% 0 0;
  background:#5a6478;
  opacity:.55;
}
.sheet-body {
  padding:19px 2px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.sheet-body>div {
  display:grid;
  gap:3px;
}
.sheet-label {
  font:400 7px var(--mono);
  letter-spacing:.09em;
  color:#8a5300;
}
.sheet-body strong {
  font:600 21px/1.1 var(--display);
  letter-spacing:-.04em;
  color:var(--navy);
}
.sheet-sub {
  font-size:9px;
  color:#5a6478;
}
.sheet-seal {
  height:52px;
  width:52px;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  text-align:center;
  color:#8a5300;
  font:500 8px/1.1 var(--mono);
  text-transform:uppercase;
  transform:rotate(9deg);
}
.sheet-bottom {
  display:flex;
  align-items:center;
  gap:18px;
  border-top:1px solid #d8dde6;
  padding-top:11px;
  color:#5a6478;
  font:400 7px var(--mono);
  letter-spacing:.03em;
}
.sheet-bottom span:last-child {
  margin-left:auto;
  text-transform:none;
  color:#5a6478;
}
.sheet-caption {
  position:absolute;
  bottom:-26px;
  right:0;
  color:#5a6478;
  font:400 8px var(--mono);
}
.pricing-section {
  background:#eef1f5;
}
.pricing-inner {
  padding-top:91px;
  padding-bottom:91px;
}
.pricing-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  padding:45px 3% 34px;
}
.pricing-heading h2 {
  font-size:clamp(53px,6vw,75px);
}
.pricing-heading p {
  margin:15px 0 0;
  color:#5a6478;
  font-size:13px;
}
.pricing-note {
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 4% 7px 0;
  color:#5a6478;
  font:400 9px/1.55 var(--mono);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.pricing-spark {
  font-size:27px;
  color:var(--accent-ink);
}
.price-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:19px;
  max-width:930px;
  margin:0 auto;
}
.price-card {
  position:relative;
  padding:28px 32px 29px;
  border:1px solid #d8dde6;
  background:var(--surface);
}
.price-featured {
  border:1px solid var(--navy);
  box-shadow:0 8px 24px rgba(20,33,61,.07);
}
.price-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#5a6478;
  font:400 8px var(--mono);
  letter-spacing:.075em;
}
.price-badge {
  background:var(--accent);
  color:var(--navy);
  padding:5px 7px;
  font:500 7px var(--mono);
  letter-spacing:.03em;
}
.price-badge-quiet {
  background:#eef1f5;
  color:#5a6478;
}
.price-card h3 {
  margin:21px 0 3px;
  font:600 30px/1 var(--display);
  letter-spacing:-.04em;
  color:var(--navy);
}
.price-context {
  margin:0;
  color:#5a6478;
  font-size:12px;
}
.price-amount {
  display:flex;
  align-items:baseline;
  margin:19px 0 0;
  color:var(--navy);
}
.currency {
  align-self:flex-start;
  margin:12px 4px 0 0;
  font:500 19px var(--display);
}
.price-amount strong {
  font:600 58px/.95 var(--display);
  letter-spacing:-.07em;
}
.price-period {
  padding-left:9px;
  color:#5a6478;
  font:400 11px var(--mono);
}
.price-seats {
  margin-top:13px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#5a6478;
  font-size:11px;
}
.seat-icon {
  color:#8a5300;
  font-size:14px;
}
.price-divider {
  border-top:1px solid #d8dde6;
  margin:22px 0 13px;
}
.price-detail {
  min-height:38px;
  margin:0 0 18px;
  color:#5a6478;
  font-size:11px;
  line-height:1.6;
}
.button-full {
  width:100%;
  min-height:47px;
}
.pricing-footnote {
  text-align:center;
  color:#5a6478;
  font:400 9px var(--mono);
  margin:19px 0 0;
  letter-spacing:.025em;
}
.faq-section {
  padding-top:94px;
  padding-bottom:103px;
}
.faq-layout {
  display:grid;
  grid-template-columns:.65fr 1fr;
  gap:110px;
  padding:46px 3% 0;
}
.faq-layout h2 {
  font-size:clamp(43px,4.7vw,60px);
}
.faq-layout>div:first-child>p {
  max-width:300px;
  margin:20px 0;
  color:#5a6478;
  font-size:12px;
  line-height:1.7;
}
.faq-list details {
  border-top:1px solid #d8dde6;
  padding:0 1px;
}
.faq-list details:last-child {
  border-bottom:1px solid #d8dde6;
}
.faq-list summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:17px 0;
  color:var(--navy);
  font:600 14px var(--display);
}
.faq-list summary::-webkit-details-marker {
  display:none;
}
.faq-plus {
  width:17px;
  height:17px;
  position:relative;
  flex:none;
  margin-left:15px;
}
.faq-plus:before,.faq-plus:after {
  content:"";
  position:absolute;
  background:#8a5300;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  transition:transform .2s;
}
.faq-plus:before {
  height:1px;
  width:12px;
}
.faq-plus:after {
  height:12px;
  width:1px;
}
.faq-list details[open] .faq-plus:after {
  transform:translate(-50%,-50%) rotate(90deg);
}
.faq-list details p {
  max-width:490px;
  margin:-3px 30px 17px 0;
  color:#5a6478;
  font-size:12px;
  line-height:1.7;
}
.closing-section {
  position:relative;
  background:var(--navy);
  color:var(--surface);
  overflow:hidden;
  text-align:center;
}
.closing-inner {
  position:relative;
  z-index:1;
  padding-top:84px;
  padding-bottom:87px;
}
.closing-inner .eyebrow {
  justify-content:center;
  color:#b7c0d0;
  margin-bottom:20px;
}
.closing-inner h2 {
  max-width:780px;
  margin:0 auto;
  color:var(--on-navy);
  font-size:clamp(48px,6vw,76px);
}
.closing-inner h2 em {
  color:var(--on-navy-muted);
}
.closing-inner>p:not(.eyebrow) {
  margin:17px 0 23px;
  color:#b7c0d0;
  font-size:13px;
}
.closing-orbit {
  position:absolute;
  border:1px solid rgba(255,255,255,.09);
  border-radius:50%;
  width:420px;
  height:420px;
  top:50%;
  transform:translateY(-50%);
}
.orbit-one {
  left:-155px;
}
.orbit-two {
  right:-155px;
  width:550px;
  height:550px;
}
.site-footer {
  background:#14213d;
  color:#b7c0d0;
}
.footer-inner {
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.footer-brand {
  color:var(--on-navy);
}
.footer-brand .brand-mark {
  width:36px;
  height:36px;
  --mark-sun: var(--accent);
  --mark-bar: var(--on-navy);
}
.footer-brand .wordmark b {
  color:var(--on-navy);
}
.footer-brand .wordmark b span {
  color:var(--accent);
}
.footer-brand .wordmark small {
  color:var(--on-navy-muted);
}
.footer-tag {
  font:400 8px var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#b7c0d0;
}
.footer-right {
  display:flex;
  align-items:center;
  gap:21px;
  color:#b7c0d0;
  font:400 9px var(--mono);
}
.footer-link {
  cursor:pointer;
  border:0;
  background:none;
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
  font:inherit;
}
.footer-link:hover {
  color:white;
}
.demo-dialog {
  width:min(475px,calc(100% - 32px));
  padding:0;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--navy);
  box-shadow:0 20px 80px rgba(20,33,61,.35);
}
.demo-dialog::backdrop {
  background:rgba(20,33,61,.68);
  backdrop-filter:blur(3px);
}
.dialog-inner {
  position:relative;
  padding:47px 47px 42px;
}
.dialog-close {
  position:absolute;
  right:16px;
  top:14px;
  width:34px;
  height:34px;
  border:1px solid #d8dde6;
  border-radius:50%;
  background:transparent;
  color:#5a6478;
  font-size:23px;
  line-height:1;
  cursor:pointer;
}
.dialog-mark {
  display:block;
  width:40px;
  height:40px;
  --mark-sun: var(--accent);
  --mark-bar: var(--ink);
}
.dialog-lockup {
  margin-bottom:29px;
}
.dialog-inner .eyebrow {
  margin-bottom:11px;
}
.dialog-inner h2 {
  max-width:330px;
  margin:0;
  font:600 39px/.99 var(--display);
  letter-spacing:-.055em;
}
.dialog-copy {
  margin:17px 0 20px;
  color:#5a6478;
  font-size:13px;
  line-height:1.7;
}
.dialog-plan {
  border-top:1px solid #d8dde6;
  padding-top:14px;
  margin:0 0 19px;
  color:#5a6478;
  font:400 10px var(--mono);
}
.dialog-done {
  min-width:126px;
  min-height:45px;
}
@media(min-width:1440px) {
  .hero {
    min-height:735px;
  }
}
@media(max-width:980px) {
  .section-shell {
    width:calc(100% - 48px);
  }
  .nav-wrap {
    width:calc(100% - 48px);
  }
  .hero {
    grid-template-columns:.95fr 1.05fr;
    column-gap:0;
    padding-top:63px;
    min-height:625px;
  }
  .hero h1 {
    font-size:65px;
  }
  .proposal-window {
    transform:scale(.96) rotate(1deg);
    transform-origin:center;
  }
  .hero-art {
    min-height:440px;
  }
  .workspace-main {
    padding:18px 13px 14px;
  }
  .workspace {
    min-height:362px;
  }
  .work-panel {
    height:171px;
  }
  .roof-illustration {
    height:95px;
  }
  .value-visual {
    height:98px;
  }
  .floating-note {
    right:-2px;
    bottom:41px;
    width:88px;
    height:88px;
    font-size:8px;
  }
  .intro-content {
    gap:50px;
    padding-inline:2%;
  }
  .showcase-grid {
    gap:43px;
    padding-inline:1%;
  }
  .proposal-sheet {
    min-height:410px;
    padding-inline:22px;
  }
  .sheet-art {
    height:211px;
  }
  .faq-layout {
    gap:60px;
  }
  .hero-bottom {
    bottom:20px;
  }
}
@media(max-width:720px) {
  html {
    scroll-padding-top:76px;
  }
  .section-shell {
    width:calc(100% - 40px);
  }
  .nav-wrap {
    height:68px;
    width:calc(100% - 40px);
  }
  .brand {
    font-size:21px;
  }
  .brand-mark {
    width:31px;
    height:31px;
  }
  .menu-toggle {
    display:flex;
    width:40px;
    height:40px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    background:transparent;
    border:1px solid #d8dde6;
    border-radius:2px;
    cursor:pointer;
  }
  .menu-toggle span {
    width:16px;
    height:1px;
    background:var(--navy);
    transition:transform .2s;
  }
  .menu-toggle[aria-expanded="true"] span:first-child {
    transform:translateY(3px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] span:last-child {
    transform:translateY(-3px) rotate(-45deg);
  }
  .primary-nav {
    display:none;
    position:absolute;
    top:68px;
    left:0;
    right:0;
    padding:19px 20px 24px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    align-items:stretch;
    gap:0;
    box-shadow:0 14px 22px rgba(20,33,61,.07);
  }
  .primary-nav.open {
    display:flex;
    flex-direction:column;
  }
  .primary-nav>a {
    padding:13px 0;
    border-bottom:1px solid #d8dde6;
  }
  .primary-nav .button {
    margin-top:14px;
  }
  .hero {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding-top:55px;
    min-height:0;
  }
  .hero-copy {
    padding-bottom:0;
  }
  .hero h1 {
    max-width:560px;
    font-size:clamp(58px,13vw,78px);
  }
  .hero-intro {
    font-size:15px;
    max-width:500px;
  }
  .hero-note {
    margin-top:27px;
  }
  .hero-art {
    min-height:400px;
    margin:10px -8px 28px;
  }
  .proposal-window {
    width:100%;
    transform:none;
  }
  .workspace {
    min-height:350px;
    grid-template-columns:38px minmax(0,1fr);
  }
  .workspace-main {
    padding:16px 13px;
  }
  .work-panel {
    height:163px;
  }
  .roof-illustration {
    height:88px;
  }
  .value-visual {
    height:91px;
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
    padding:5px 0;
  }
  .value-big {
    font-size:14px;
  }
  .bar-chart {
    width:100%;
    min-width:0;
    height:32px;
    gap:3px;
    padding:0;
  }
  .bar-chart i {
    flex:1;
    min-width:0;
    max-width:9px;
  }
  .document-strip {
    height:43px;
  }
  .floating-note {
    right:0;
    bottom:20px;
  }
  .hero-bottom {
    position:static;
    margin:0 0 43px;
    font-size:7px;
  }
  .intro {
    padding-top:58px;
    padding-bottom:61px;
  }
  .intro-content {
    display:block;
    padding:31px 0 30px;
  }
  .intro-content h2 {
    font-size:clamp(38px,9vw,55px);
  }
  .intro-aside {
    margin-top:23px;
  }
  .intro-aside p {
    font-size:13px;
  }
  .problem-line {
    gap:10px;
    font-size:8px;
    flex-wrap:wrap;
  }
  .problem-line-fill {
    display:none;
  }
  .problem-end {
    margin-left:auto;
  }
  .workflow-inner {
    padding-top:60px;
    padding-bottom:64px;
  }
  .workflow-heading {
    display:block;
    margin:35px 0 37px;
  }
  .workflow-heading h2 {
    font-size:clamp(46px,10vw,63px);
  }
  .workflow-heading>p {
    margin:18px 0 0;
    max-width:320px;
  }
  .steps {
    grid-template-columns:1fr;
  }
  .step {
    min-height:185px;
    padding:18px 0 41px;
  }
  .step+.step {
    border-left:0;
    border-top:1px solid rgba(183,192,208,.32);
    padding-left:0;
  }
  .step h3 {
    margin-top:16px;
    font-size:22px;
  }
  .step p {
    font-size:12px;
  }
  .step-line {
    right:0;
  }
  .step+.step .step-line {
    left:0;
  }
  .showcase {
    padding-top:62px;
    padding-bottom:70px;
  }
  .showcase-grid {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:38px;
    padding:34px 0 0;
  }
  .showcase h2 {
    font-size:clamp(53px,11vw,70px);
  }
  .showcase-copy>p:not(.eyebrow) {
    font-size:13px;
  }
  .proposal-sheet {
    min-height:0;
    padding:20px 17px 15px;
    transform:rotate(-.5deg);
  }
  .sheet-art {
    height:clamp(190px,55vw,260px);
    margin-top:14px;
  }
  .sheet-bottom {
    gap:8px;
    font-size:6px;
  }
  .sheet-caption {
    font-size:7px;
    bottom:-21px;
  }
  .pricing-inner {
    padding-top:62px;
    padding-bottom:64px;
  }
  .pricing-heading {
    padding:32px 0 27px;
    align-items:flex-start;
  }
  .pricing-heading h2 {
    font-size:clamp(55px,12vw,70px);
  }
  .pricing-heading p {
    max-width:260px;
  }
  .pricing-note {
    margin:3px 0 0 8px;
    font-size:7px;
  }
  .pricing-spark {
    font-size:21px;
  }
  .price-grid {
    grid-template-columns:1fr;
    gap:12px;
  }
  .price-card {
    padding:24px 23px;
  }
  .price-card h3 {
    font-size:28px;
  }
  .price-amount strong {
    font-size:54px;
  }
  .pricing-footnote {
    font-size:8px;
    line-height:1.7;
  }
  .faq-section {
    padding-top:63px;
    padding-bottom:72px;
  }
  .faq-layout {
    grid-template-columns:1fr;
    gap:23px;
    padding:34px 0 0;
  }
  .faq-layout h2 {
    font-size:clamp(46px,10vw,60px);
  }
  .faq-layout>div:first-child>p {
    margin:14px 0 0;
  }
  .faq-list summary {
    padding:15px 0;
    font-size:13px;
  }
  .faq-list details p {
    font-size:12px;
  }
  .closing-inner {
    padding-top:62px;
    padding-bottom:66px;
  }
  .closing-inner h2 {
    font-size:clamp(49px,11vw,66px);
  }
  .closing-inner>p:not(.eyebrow) {
    font-size:12px;
    max-width:300px;
    margin:16px auto 21px;
  }
  .closing-orbit {
    width:250px;
    height:250px;
  }
  .orbit-one {
    left:-175px;
  }
  .orbit-two {
    right:-190px;
    width:310px;
    height:310px;
  }
  .footer-inner {
    padding-top:19px;
    padding-bottom:19px;
    min-height:100px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .footer-brand {
    font-size:18px;
  }
  .footer-tag {
    text-align:right;
    font-size:7px;
  }
  .footer-right {
    grid-column:1/-1;
    justify-content:space-between;
    border-top:1px solid rgba(183,192,208,.2);
    padding-top:11px;
  }
  .dialog-inner {
    padding:39px 26px 29px;
  }
  .dialog-inner h2 {
    font-size:35px;
  }
}
@media(max-width:380px) {
  .section-shell,.nav-wrap {
    width:calc(100% - 32px);
  }
  .hero h1 {
    font-size:53px;
  }
  .hero-actions {
    align-items:flex-start;
    flex-direction:column;
    gap:15px;
  }
  .workspace-main {
    padding:13px 9px;
  }
  .workspace-grid {
    gap:6px;
  }
  .work-panel {
    padding:8px 6px;
  }
  .panel-footer {
    left:7px;
    right:7px;
  }
  .value-big {
    font-size:16px;
  }
  .bar-chart {
    gap:2px;
  }
  .bar-chart i {
    width:7px;
  }
  .roof-grid {
    left:18px;
  }
  .floating-note {
    width:75px;
    height:75px;
    font-size:7px;
  }
  .pricing-heading {
    display:block;
  }
  .pricing-note {
    margin:14px 0 0;
  }
  .sheet-bottom {
    gap:5px;
    font-size:5px;
  }
  .sheet-body strong {
    font-size:18px;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* Short page: real product shot, facts, real proposal pages */
.hero-real { min-height:0; padding-top:72px; padding-bottom:56px; grid-template-columns:.8fr 1.2fr; column-gap:48px; }
.shot { margin:0; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 2px 4px rgba(20,33,61,.06), 0 24px 60px rgba(20,33,61,.14); overflow:hidden; }
.shot-bar { display:flex; gap:6px; padding:10px 12px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.shot-bar i { width:9px; height:9px; border-radius:50%; background:var(--line); }
.shot img { display:block; width:100%; height:auto; }
.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; padding:28px 0 64px; border-top:1px solid var(--line); }
.facts strong { display:block; font-family:var(--display); font-size:22px; letter-spacing:-.02em; color:var(--ink); margin-bottom:6px; }
.facts span { color:var(--muted); font-size:15px; line-height:1.55; }
.proof { background:var(--navy); color:var(--on-navy); padding:72px 0 80px; }
.proof-head { display:flex; justify-content:space-between; align-items:end; gap:32px; margin-bottom:40px; }
.proof-head h2 { font-family:var(--display); font-size:clamp(32px,4.2vw,52px); line-height:1.02; letter-spacing:-.035em; margin:0; color:var(--on-navy); }
.proof-head h2 em { font-style:normal; color:var(--accent); }
.proof-head p { margin:0; max-width:300px; color:var(--on-navy-muted); font-size:15px; line-height:1.55; }
.pages { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pages img { display:block; width:100%; height:auto; border-radius:6px; background:#fff; box-shadow:0 12px 40px rgba(0,0,0,.35); }
@media(max-width:980px) {
  .hero-real { grid-template-columns:1fr; row-gap:36px; padding-top:48px; }
  .proof-head { flex-direction:column; align-items:start; }
}
@media(max-width:720px) {
  .facts { grid-template-columns:1fr; gap:20px; padding-bottom:48px; }
  .pages { grid-template-columns:1fr; max-width:420px; margin-inline:auto; }
  .proof { padding:56px 0; }
}
.hero-real { grid-template-columns:.95fr 1.05fr; }
.hero-real h1 { font-size:clamp(38px,4.3vw,58px); }

/* Demo request page */
@media(max-width:720px) {
  .pages { display:flex; max-width:none; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; margin-inline:-16px; padding:0 16px 12px; }
  .pages img { flex:0 0 82%; width:82%; scroll-snap-align:center; }
}