:root {
  --paper: #f5f1e8;
  --paper-deep: #e9e2d2;
  --card: #fcfaf4;
  --ink: #1b2c24;
  --ink-soft: #506057;
  --faint: #7c877d;
  --line: #d8d0c0;
  --forest: #23513b;
  --forest-deep: #173b2a;
  --clay: #b35b40;
  --mint: #8ab99a;
  --ivory: #fbf8f0;
  --serif: "DM Serif Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
::selection { background: #c7dcc8; color: var(--forest-deep); }

.site-shell { width: 100%; max-width: 100%; overflow: hidden; }
.site-nav { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: min(1440px, calc(100% - 64px)); min-height: 92px; margin: 0 auto; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; width: fit-content; gap: 10px; color: var(--forest-deep); font-size: 17px; font-weight: 700; letter-spacing: -.06em; }
.brand-mark { position: relative; display: inline-block; width: 27px; height: 27px; overflow: hidden; border-radius: 50%; background: var(--forest); }
.brand-mark i { position: absolute; display: block; width: 11px; height: 23px; background: var(--ivory); transform: skewX(-27deg); }
.brand-mark i:first-child { top: 2px; left: 6px; }
.brand-mark i:last-child { right: 6px; bottom: 2px; transform: skewX(-27deg) rotate(180deg); }
.nav-links { display: flex; align-items: center; gap: 30px; color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.nav-links a { transition: color .2s ease; }.nav-links a:hover { color: var(--forest); }
.nav-cta { justify-self: end; display: inline-flex; align-items: center; gap: 10px; color: var(--forest); font-size: 12px; font-weight: 700; }.nav-cta span { font-size: 17px; line-height: 0; transition: transform .2s ease; }.nav-cta:hover span { transform: translate(2px, -2px); }

.hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr); align-items: center; gap: clamp(44px, 8vw, 140px); width: min(1440px, calc(100% - 64px)); min-height: calc(100vh - 92px); margin: 0 auto; padding: 80px 0 112px; }
.kicker { margin: 0 0 19px; color: var(--clay); font-size: 10px; font-weight: 700; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; }
.hero h1, .section-heading h2, .workflow-side h2, .principles-intro h2, .waitlist-copy h2 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -.07em; }
.hero h1 { max-width: 980px; font-size: clamp(3.15rem, 7.2vw, 7.5rem); line-height: .85; }
h1 em, h2 em { color: var(--forest); font-style: italic; }
.hero-description { max-width: 530px; margin: 29px 0 0; color: var(--ink-soft); font-family: var(--serif); font-size: clamp(18px, 1.8vw, 24px); line-height: 1.4; letter-spacing: -.025em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 42px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 52px; padding: 0 19px; border: 1px solid transparent; font-size: 11px; font-weight: 700; letter-spacing: .01em; transition: transform .25s ease, background .25s ease, color .25s ease; }
.button:hover { transform: translateY(-3px); }.button span:last-child { font-size: 18px; }.button-forest { background: var(--forest); color: var(--ivory); }.button-forest:hover { background: var(--forest-deep); }.button-ivory { width: 100%; border-color: var(--ivory); background: var(--ivory); color: var(--forest-deep); }.button-ivory:hover { background: #e7efe5; }
.text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--forest); font-size: 12px; font-weight: 700; }.text-link span { font-size: 16px; transition: transform .2s ease; }.text-link:hover span { transform: translateY(3px); }

.hero-art { position: relative; isolation: isolate; min-height: 540px; padding: 50px; overflow: hidden; border: 1px solid #315f49; background: var(--forest-deep); box-shadow: 14px 14px 0 rgba(32, 91, 66, .10); }
.hero-art::after { position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 75% 18%, rgba(138, 185, 154, .30), transparent 28%), radial-gradient(circle at 12% 88%, rgba(179, 91, 64, .25), transparent 38%); content: ""; }
.art-status { display: inline-flex; align-items: center; gap: 8px; color: rgba(251, 248, 240, .75); font: 10px var(--mono); letter-spacing: .04em; }.art-status span, .count-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(138, 185, 154, .12); }
.art-card { position: absolute; border: 1px solid rgba(251, 248, 240, .26); background: rgba(246, 242, 233, .95); color: var(--ink); box-shadow: 10px 12px 30px rgba(0, 0, 0, .16); }.art-card-main { z-index: 2; top: 125px; right: 40px; left: 70px; padding: 22px; transform: rotate(-2.5deg); }.card-header, .card-source { display: flex; justify-content: space-between; gap: 10px; color: var(--faint); font: 9px var(--mono); letter-spacing: .03em; text-transform: uppercase; }.signal-live { color: var(--forest); }.art-card-main strong { display: block; max-width: 360px; margin: 30px 0 23px; font: 400 27px/1.04 var(--serif); letter-spacing: -.045em; }.evidence-bars { display: grid; gap: 8px; }.evidence-bars i { display: block; width: var(--bar); height: 5px; background: var(--forest); }.evidence-bars i:nth-child(2) { background: var(--clay); }.evidence-bars i:nth-child(3) { background: #8d9c8c; }.card-source { margin-top: 24px; padding-top: 13px; border-top: 1px solid var(--line); }.card-source b { color: var(--forest); font-weight: 500; }.art-card-note { z-index: 3; right: 14px; bottom: 62px; width: 195px; padding: 17px; background: var(--clay); color: var(--ivory); transform: rotate(5deg); }.art-card-note span { color: rgba(255,255,255,.68); font: 9px var(--mono); text-transform: uppercase; }.art-card-note p { margin: 12px 0 0; font: 19px/1.12 var(--serif); letter-spacing: -.03em; }.art-path { position: absolute; top: 100px; right: 0; bottom: 0; left: 0; z-index: 0; }.art-path::before, .art-path::after { position: absolute; width: 150%; height: 220px; border: 1px dashed rgba(251,248,240,.28); border-radius: 50%; content: ""; }.art-path::before { top: 135px; left: -28%; transform: rotate(-25deg); }.art-path::after { top: 270px; left: 18%; transform: rotate(30deg); }.art-node { position: absolute; z-index: 1; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(251,248,240,.5); border-radius: 50%; color: var(--ivory); font: 10px var(--mono); background: var(--forest-deep); }.art-node-one { top: 152px; left: 39px; }.art-node-two { right: 78px; bottom: 155px; }.art-node-three { bottom: 43px; left: 72px; }

.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-deep); }.marquee-track { display: flex; width: max-content; align-items: center; gap: 30px; padding: 17px 0; color: var(--forest); font-family: var(--serif); font-size: 22px; letter-spacing: -.03em; animation: marquee 34s linear infinite; }.marquee-track b { color: var(--clay); font-size: 15px; }@keyframes marquee { to { transform: translateX(-50%); } }

.system-section, .workflow-section, .principles-section, .waitlist-section { width: min(1440px, calc(100% - 64px)); margin: 0 auto; }.system-section { padding: clamp(130px, 16vw, 250px) 0; }.section-heading { max-width: 850px; }.section-heading h2, .workflow-side h2, .principles-intro h2, .waitlist-copy h2 { font-size: clamp(48px, 5.3vw, 82px); line-height: .91; }.section-heading > p:last-child { max-width: 540px; margin: 26px 0 0; color: var(--ink-soft); font: 18px/1.55 var(--serif); letter-spacing: -.02em; }
.signal-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: minmax(290px, 1fr) minmax(250px, .85fr); grid-auto-flow: dense; margin-top: 75px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.signal-card { position: relative; min-width: 0; overflow: hidden; padding: 27px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.23); transition: background .35s ease, transform .35s ease; }.signal-card:hover { z-index: 2; background: var(--card); transform: translateY(-5px); }.signal-card-primary { grid-row: span 2; grid-column: span 2; display: flex; flex-direction: column; min-height: 545px; background: var(--forest-deep); color: var(--ivory); }.signal-card-proof, .signal-card-decision { grid-column: span 1; }.signal-card-loop { grid-column: span 2; display: grid; grid-template-columns: 1fr minmax(230px, 1.2fr); gap: 30px; align-items: end; }.card-number { color: var(--clay); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }.signal-card-primary .card-number { color: #e9c4a1; }.signal-card h3 { max-width: 430px; margin: 27px 0 13px; font: 400 clamp(24px, 2.4vw, 36px)/1.02 var(--serif); letter-spacing: -.045em; }.signal-card p { max-width: 360px; margin: 0; color: var(--ink-soft); font: 14px/1.5 var(--serif); }.signal-card-primary p { color: rgba(251,248,240,.72); }.map-visual { position: relative; flex: 1; min-height: 210px; margin: 30px -12px -13px; background-image: radial-gradient(rgba(251,248,240,.18) 1px, transparent 1px); background-size: 18px 18px; }.map-dot { position: absolute; display: block; width: 13px; height: 13px; border: 3px solid var(--forest-deep); border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 1px var(--mint), 0 0 20px rgba(138,185,154,.7); }.dot-a { top: 24%; left: 14%; }.dot-b { top: 58%; left: 49%; background: #e9c4a1; box-shadow: 0 0 0 1px #e9c4a1, 0 0 20px rgba(233,196,161,.7); }.dot-c { top: 17%; right: 17%; background: var(--clay); box-shadow: 0 0 0 1px var(--clay), 0 0 20px rgba(179,91,64,.7); }.dot-d { right: 9%; bottom: 17%; }.map-visual i { position: absolute; height: 1px; transform-origin: left center; background: rgba(251,248,240,.5); }.map-visual i:nth-of-type(1) { top: 29%; left: 17%; width: 37%; transform: rotate(21deg); }.map-visual i:nth-of-type(2) { top: 58%; left: 53%; width: 34%; transform: rotate(-38deg); }.map-visual i:nth-of-type(3) { top: 23%; left: 18%; width: 64%; transform: rotate(-4deg); }.proof-lines { display: grid; gap: 12px; margin-top: 37px; }.proof-lines i { display: block; width: 100%; height: 7px; background: var(--line); }.proof-lines i:nth-child(1) { width: 78%; background: var(--forest); }.proof-lines i:nth-child(2) { width: 54%; background: var(--clay); }.decision-pulse { display: flex; gap: 8px; align-items: end; height: 70px; margin-top: 30px; }.decision-pulse span { display: block; width: 28px; height: 28px; border-radius: 50%; background: #bad1b7; animation: pulse 2.7s ease-in-out infinite; }.decision-pulse span:nth-child(2) { width: 44px; height: 44px; background: var(--forest); animation-delay: .25s; }.decision-pulse span:nth-child(3) { width: 17px; height: 17px; background: var(--clay); animation-delay: .5s; }@keyframes pulse { 50% { transform: translateY(-11px); } }.loop-track { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 11px; color: var(--forest); font: 12px var(--mono); }.loop-track span { padding: 9px; border: 1px solid #a9beaa; }.loop-track i { color: var(--clay); font-style: normal; }

.workflow-section { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); gap: clamp(45px, 10vw, 190px); padding: clamp(130px, 16vw, 250px) 0; border-top: 1px solid var(--line); }.workflow-side { align-self: start; }.workflow-side h2 { font-size: clamp(48px, 4.7vw, 73px); }.workflow-side > p:last-child { max-width: 350px; margin: 25px 0 0; color: var(--ink-soft); font: 17px/1.52 var(--serif); }.workflow-steps { border-top: 1px solid var(--line); }.workflow-step { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 22px; padding: 35px 0; border-bottom: 1px solid var(--line); transition: padding .35s ease; }.workflow-step:hover { padding-right: 13px; padding-left: 13px; background: #eee9dd; }.workflow-step > span { color: var(--clay); font: 11px var(--mono); }.workflow-step h3 { margin: 0; font: 400 clamp(26px, 2.7vw, 39px)/1.04 var(--serif); letter-spacing: -.05em; }.workflow-step p { max-width: 500px; margin: 10px 0 0; color: var(--ink-soft); font: 14px/1.5 var(--serif); }.workflow-step b { color: var(--forest); font-size: 24px; font-weight: 400; transition: transform .25s ease; }.workflow-step:hover b { transform: translate(4px, 4px); }

.principles-section { display: grid; grid-template-columns: minmax(290px, .78fr) minmax(0, 1.22fr); gap: clamp(45px, 10vw, 170px); padding: clamp(130px, 16vw, 250px) 0; }.principles-intro { display: flex; flex-direction: column; align-items: flex-start; }.principles-intro h2 { font-size: clamp(47px, 4.7vw, 72px); }.carousel-controls { display: flex; gap: 7px; margin-top: 37px; }.carousel-button { display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid #a9beaa; background: transparent; color: var(--forest); font-size: 18px; transition: background .2s, color .2s; }.carousel-button:hover { background: var(--forest); color: var(--ivory); }.principle-carousel { position: relative; min-height: 405px; overflow: hidden; border: 1px solid #315f49; background: var(--forest-deep); }.principle { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: end; padding: clamp(30px, 5vw, 66px); color: var(--ivory); opacity: 0; pointer-events: none; transform: translateX(45px); transition: opacity .5s ease, transform .55s cubic-bezier(.2,.7,.2,1); }.principle::before { position: absolute; top: 25px; right: 34px; color: rgba(251,248,240,.08); font: 190px/.7 var(--serif); content: "“"; }.principle.active { opacity: 1; pointer-events: auto; transform: translateX(0); }.principle > span { position: relative; color: #e9c4a1; font: 10px var(--mono); letter-spacing: .09em; text-transform: uppercase; }.principle p { position: relative; max-width: 600px; margin: 27px 0 28px; font: clamp(32px, 4.2vw, 58px)/1.01 var(--serif); letter-spacing: -.055em; }.principle small { position: relative; color: rgba(251,248,240,.65); font-size: 11px; }

.waitlist-section { display: grid; grid-template-columns: minmax(0, .9fr) minmax(390px, 1.1fr); gap: clamp(44px, 10vw, 170px); margin-bottom: 100px; padding: clamp(60px, 8vw, 120px); background: var(--forest-deep); color: var(--ivory); }.waitlist-copy h2 { font-size: clamp(48px, 5vw, 78px); }.waitlist-copy .kicker { color: #e9c4a1; }.waitlist-copy > p:not(.kicker):not(.signup-count) { max-width: 455px; margin: 26px 0 0; color: rgba(251,248,240,.72); font: 17px/1.52 var(--serif); }.signup-count { display: flex; align-items: center; gap: 11px; margin: 37px 0 0; color: #cbdacb; font: 10px var(--mono); letter-spacing: .04em; }.count-dot { flex: 0 0 auto; }
.waitlist-form { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 24px 20px; }.form-field { min-width: 0; }.form-field label { display: block; margin-bottom: 9px; color: #cfdbcc; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.form-field label span { color: #e9c4a1; }.form-field input, .form-field select { width: 100%; border: 0; border-bottom: 1px solid rgba(251,248,240,.46); border-radius: 0; padding: 0 0 11px; outline: none; background: transparent; color: var(--ivory); font-size: 14px; transition: border-color .2s ease; }.form-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #e9c4a1 50%), linear-gradient(135deg, #e9c4a1 50%, transparent 50%); background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50%; background-repeat: no-repeat; background-size: 4px 4px, 4px 4px; }.form-field input::placeholder { color: rgba(251,248,240,.40); }.form-field input:focus, .form-field select:focus { border-bottom-color: #e9c4a1; }.form-field select option { color: var(--ink); }.waitlist-form .button { grid-column: 1 / -1; margin-top: 5px; }.form-note, .form-status { grid-column: 1 / -1; margin: -7px 0 0; color: rgba(251,248,240,.58); font-size: 11px; line-height: 1.5; }.form-status { min-height: 17px; margin: -13px 0 0; color: #e9c4a1; }.form-status.error { color: #ffc6b7; }.form-status.success { color: #cbe6c9; }

.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: min(1440px, calc(100% - 64px)); min-height: 105px; margin: 0 auto; border-top: 1px solid var(--line); color: var(--faint); font-size: 11px; }.site-footer > p { margin: 0; }.site-footer > div { justify-self: end; display: flex; gap: 22px; }.site-footer a:not(.brand) { color: var(--forest); font-weight: 600; }

.reveal { opacity: 1; transform: none; }.js .reveal { opacity: 0; transform: translateY(30px); }.js .reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }

@media (max-width: 920px) {
  .site-nav, .hero, .system-section, .workflow-section, .principles-section, .waitlist-section, .site-footer { width: min(100% - 40px, 720px); }
  .site-nav { grid-template-columns: 1fr auto; }.nav-links { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding: 110px 0 120px; }.hero-art { min-height: 460px; }.art-card-main { left: 56px; }.signal-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }.signal-card-primary { grid-row: span 1; min-height: 510px; }.signal-card-loop { grid-column: span 2; }.workflow-section, .principles-section, .waitlist-section { grid-template-columns: 1fr; }.workflow-section { gap: 58px; }.principles-section { gap: 48px; }.waitlist-section { width: 100%; margin-bottom: 55px; padding: 68px max(20px, calc((100vw - 680px) / 2)); }.site-footer { grid-template-columns: 1fr auto; gap: 15px; padding: 22px 0; }.site-footer > p { display: none; }.site-footer > div { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 560px) {
  .site-nav, .hero, .system-section, .workflow-section, .principles-section, .site-footer { width: calc(100% - 32px); }.site-nav { min-height: 76px; }.nav-cta { font-size: 11px; }.hero { gap: 55px; padding: 72px 0 85px; }.hero h1 { font-size: clamp(3.2rem, 15vw, 4.6rem); }.hero-description { font-size: 18px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 22px; margin-top: 35px; }.hero-art { min-height: 390px; padding: 26px; }.art-card-main { top: 92px; right: 23px; left: 23px; padding: 17px; }.art-card-main strong { margin: 20px 0; font-size: 23px; }.art-card-note { right: 13px; bottom: 35px; width: 165px; }.art-node-one { top: 118px; left: 16px; }.art-node-two { right: 32px; bottom: 130px; }.art-node-three { bottom: 24px; left: 38px; }.marquee-track { font-size: 18px; }.system-section, .workflow-section, .principles-section { padding: 100px 0; }.section-heading h2, .workflow-side h2, .principles-intro h2, .waitlist-copy h2 { font-size: 48px; }.signal-grid { display: block; margin-top: 52px; border-right: 1px solid var(--line); }.signal-card, .signal-card-primary { min-height: 0; border-right: 0; }.signal-card-primary { min-height: 470px; }.signal-card-loop { display: block; }.loop-track { justify-content: flex-start; margin-top: 35px; }.workflow-step { grid-template-columns: 35px 1fr; gap: 14px; }.workflow-step b { display: none; }.workflow-step h3 { font-size: 29px; }.principle-carousel { min-height: 430px; }.principle { padding: 32px 26px; }.principle p { font-size: 37px; }.waitlist-section { padding: 57px 20px; }.waitlist-form { grid-template-columns: 1fr; gap: 21px; }.site-footer > div { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.marquee-track, .decision-pulse span { animation: none; }.button, .signal-card, .workflow-step, .workflow-step b, .principle { transition: none; } }

/* Local brand assets and hover-safe contrast for the signal map. */
.brand { gap: 0; }
.brand-logo { display: block; width: 104px; height: 44px; object-fit: contain; object-position: left center; }
.art-status img { width: 64px; height: 29px; object-fit: contain; object-position: left center; }
.signal-card-primary:hover { background: var(--forest-deep); color: var(--ivory); }