:root {
  --paper:#f5f4ee;
  --ink:#202822;
  --muted:#5f685e;
  --line:#d8dcd1;
  --green:#dce8c7;
  --deep:#213d31;
  --serif:Georgia,'Times New Roman',serif;
  --sans:Inter,'Helvetica Neue',Helvetica,Arial,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:30px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
a:focus-visible,summary:focus-visible {
  outline:3px solid #568465;
  outline-offset:6px
}
a:hover {
  text-decoration:underline;
  text-underline-offset:5px
}
img {
  max-width:100%;
  display:block
}
.wrap {
  width:min(1240px,calc(100% - 112px));
  margin-inline:auto
}
.skip {
  position:absolute;
  top:-100px;
  left:16px;
  z-index:10;
  padding:10px;
  background:white
}
.skip:focus {
  top:12px
}
.header {
  min-height:110px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  border-bottom:1px solid var(--line)
}
.wordmark {
  display:flex;
  align-items:center;
  gap:11px;
  line-height:1.1;
  font-size:24px;
  font-weight:650;
  letter-spacing:-1px
}
.wordmark:hover {
  text-decoration:none
}
.byline {
  display:block;
  font-size:10px;
  letter-spacing:1.1px;
  font-weight:400;
  margin-top:7px;
  color:var(--muted)
}
nav {
  display:flex;
  gap:28px;
  font-size:13px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  min-height:54px;
  padding:12px 23px;
  border:1px solid var(--ink);
  border-radius:5px;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  transition:background .15s,color .15s
}
.button:hover {
  text-decoration:none;
  background:#34473a;
  color:white
}
.button.primary {
  background:var(--ink);
  color:#fff
}
.button.primary:hover {
  background:var(--deep)
}
.button.small {
  min-height:43px;
  padding:10px 17px;
  font-size:12px;
  gap:23px
}
.hero {
  display:grid;
  grid-template-columns:1.03fr 1fr;
  gap:70px;
  align-items:center;
  padding-top:78px;
  padding-bottom:75px
}
.eyebrow {
  font-size:10px;
  line-height:1.7;
  letter-spacing:1.7px;
  font-weight:600;
  margin:0 0 26px
}
.status-dot,.live-dot {
  display:inline-block;
  width:6px;
  height:6px;
  background:#517150;
  border-radius:50%;
  margin-right:8px;
  vertical-align:middle
}
.hero h1 {
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(56px,5.4vw,78px);
  letter-spacing:-3.4px;
  line-height:1.03;
  margin:0 0 28px
}
em {
  font-weight:400;
  color:#50664d
}
.hero-description {
  max-width:440px;
  font-size:16px;
  line-height:1.85;
  color:var(--muted);
  margin:0 0 29px
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:27px
}
.text-link {
  font-size:12px;
  font-weight:600;
  line-height:1.6
}
.text-link span {
  margin-left:10px
}
.approval-note {
  display:flex;
  align-items:flex-start;
  gap:7px;
  font-size:10px;
  color:var(--muted);
  margin-top:23px;
  max-width:430px
}
.approval-note svg {
  width:14px;
  height:14px;
  flex-shrink:0;
  margin-top:1px;
  stroke:var(--deep);
  stroke-width:1.5;
  fill:none
}
.plan-visual {
  padding:24px;
  background:#e9ecdf;
  border:1px solid #dce1d2;
  border-radius:10px;
  box-shadow:0 12px 40px #2c442108;
  transform:rotate(1deg)
}
.visual-top {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:8px;
  letter-spacing:1px;
  font-weight:600;
  margin-bottom:22px
}
.example-label {
  color:#677160;
  font-weight:400;
  font-size:7px;
  letter-spacing:.5px
}
.brief-card {
  padding:25px 25px 22px;
  background:#fffef9;
  border:1px solid #d7ddcd;
  border-radius:5px
}
.card-eyebrow {
  font-size:8px;
  letter-spacing:1.4px;
  font-weight:600;
  margin:0 0 15px;
  color:#64725d
}
.brief-card h2 {
  font-family:var(--serif);
  font-size:28px;
  font-weight:400;
  letter-spacing:-.7px;
  line-height:1.15;
  margin:0 0 12px
}
.brief-card>p:not(.card-eyebrow) {
  font-size:11px;
  line-height:1.8;
  color:var(--muted);
  max-width:310px;
  margin:0 0 16px
}
.brief-tags {
  display:flex;
  gap:7px;
  flex-wrap:wrap
}
.brief-tags span {
  border:1px solid #d8ddcd;
  background:#f3f5ec;
  border-radius:4px;
  font-size:8px;
  padding:4px 8px;
  color:#59674f
}
.connector {
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#778968
}
.connector span {
  height:1px;
  width:21px;
  background:#bec9b2
}
.connector b {
  font-weight:400;
  font-size:18px
}
.plan-card {
  padding:23px 22px 0;
  background:white;
  border:1px solid #cfd8c3;
  border-radius:5px
}
.plan-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:7px
}
.plan-title .card-eyebrow {
  margin:0
}
.draft-badge {
  font-size:7px;
  color:#586847;
  background:#e8eedc;
  padding:4px 7px;
  border-radius:3px;
  white-space:nowrap
}
.plan-card h3 {
  font-size:14px;
  letter-spacing:-.3px;
  font-weight:500;
  margin:14px 0 12px
}
.sample-post {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 0;
  border-top:1px solid #e9ece3
}
.platform {
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #d7ddcf;
  width:29px;
  height:29px;
  font-size:12px;
  border-radius:50%;
  flex-shrink:0
}
.platform.rounded {
  font-size:9px;
  letter-spacing:-.5px;
  border-radius:7px
}
.sample-post>div {
  flex:1;
  min-width:0
}
.sample-post strong {
  font-size:10px;
  line-height:1.5;
  display:block;
  font-weight:500
}
.sample-post div>span {
  font-size:8px;
  display:block;
  color:#707769;
  margin-top:2px
}
.post-day {
  font-size:7px;
  letter-spacing:1px;
  color:#758068;
  flex-shrink:0
}
.plan-footer {
  display:flex;
  align-items:center;
  gap:7px;
  border-top:1px solid #e9ece3;
  font-size:8px;
  color:#637357;
  padding:15px 0
}
.check-circle {
  width:13px;
  height:13px;
  background:#dfe9d3;
  color:#4b6645;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  flex-shrink:0
}
.visual-caption {
  font-size:8px;
  line-height:1.6;
  text-align:center;
  color:#65725a;
  margin:14px 0 0
}
.principles {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding-block:25px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.principles>p {
  font-size:12px;
  color:var(--muted);
  margin:0
}
.principles>div {
  display:flex;
  align-items:center;
  gap:20px;
  font-size:8px;
  letter-spacing:1px
}
.principles i {
  font-style:normal;
  color:#a0ac97
}
.section {
  padding-block:100px
}
.section-heading {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 80px
}
.section-heading>.eyebrow {
  grid-column:1/-1;
  margin-bottom:20px
}
h2 {
  font-family:var(--serif);
  font-size:46px;
  line-height:1.12;
  letter-spacing:-1.6px;
  font-weight:400;
  margin:0
}
.section-heading>p:last-child {
  align-self:end;
  font-size:14px;
  line-height:1.9;
  color:var(--muted);
  max-width:360px;
  margin:0 0 3px
}
.steps {
  list-style:none;
  padding:0;
  margin:55px 0 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px
}
.steps li {
  border-top:1px solid #aebba3;
  padding-top:20px
}
.step-number {
  font-family:var(--serif);
  font-size:25px;
  line-height:1;
  color:#8a9a7d
}
.steps h3 {
  font-size:14px;
  font-weight:550;
  letter-spacing:-.2px;
  margin:29px 0 12px
}
.steps p {
  font-size:12px;
  color:var(--muted);
  line-height:1.9;
  margin:0
}
.research-section {
  background:#e9eddf;
  border-top:1px solid #e0e5d6;
  border-bottom:1px solid #e0e5d6;
  padding-block:80px
}
.research-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:95px
}
.research-intro {
  font-size:14px;
  line-height:1.9;
  color:var(--muted);
  max-width:390px;
  margin:25px 0 18px
}
.research-note {
  font-size:11px;
  line-height:1.9;
  color:#65725c;
  max-width:390px;
  margin:0
}
.research-list article {
  display:flex;
  gap:22px;
  border-bottom:1px solid #ccd5bf;
  padding:26px 0
}
.research-list article:first-child {
  padding-top:0
}
.research-list article:last-child {
  border-bottom:0;
  padding-bottom:0
}
.research-icon {
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f5f7ef;
  border:1px solid #d2dcc5;
  font-size:23px;
  border-radius:6px;
  flex-shrink:0
}
.research-list h3 {
  font-size:15px;
  font-weight:500;
  letter-spacing:-.2px;
  margin:0 0 7px
}
.research-list p {
  font-size:12px;
  color:var(--muted);
  line-height:1.85;
  margin:0
}
.review-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:95px
}
.review-copy>p:not(.eyebrow) {
  font-size:14px;
  line-height:1.9;
  color:var(--muted);
  max-width:380px;
  margin:25px 0 22px
}
.review-details {
  padding-top:5px
}
.review-details>div {
  display:flex;
  gap:18px;
  border-bottom:1px solid var(--line);
  padding:21px 0
}
.review-details>div:first-child {
  padding-top:0
}
.review-details>div:last-child {
  border-bottom:0
}
.review-details>div>span {
  font-size:13px;
  color:#566f49;
  padding-top:1px
}
.review-details p {
  font-size:12px;
  color:var(--muted);
  line-height:1.85;
  margin:0
}
.review-details strong {
  font-size:14px;
  color:var(--ink);
  font-weight:500;
  display:block;
  margin-bottom:7px
}
.faq {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:80px;
  border-top:1px solid var(--line);
  padding-top:80px
}
.faq details {
  border-bottom:1px solid var(--line);
  padding:20px 0
}
.faq details:first-child {
  padding-top:0
}
.faq summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  list-style:none
}
.faq summary::-webkit-details-marker {
  display:none
}
.faq summary span {
  font-size:22px;
  font-weight:300;
  color:var(--muted)
}
.faq details[open] summary span {
  transform:rotate(45deg)
}
.faq details p {
  font-size:12px;
  color:var(--muted);
  line-height:1.9;
  margin:15px 30px 2px 0
}
.final-cta {
  background:#e5eacd;
  text-align:center;
  padding:63px 30px 55px;
  border-radius:8px;
  margin-bottom:65px
}
.final-cta h2 {
  font-size:56px;
  letter-spacing:-2px
}
.final-cta>p:not(.eyebrow) {
  font-size:13px;
  color:#57664e;
  margin:23px 0
}
.final-cta .eyebrow {
  color:#55684b;
  margin-bottom:20px
}
.pilot-note {
  font-size:10px;
  color:#65725a;
  display:block;
  margin-top:16px
}
.footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  border-top:1px solid var(--line);
  padding-block:27px 35px
}
.footer-brand {
  font-size:17px;
  letter-spacing:-.6px;
  font-weight:600;
  line-height:1.2
}
.footer-brand span {
  display:block;
  font-size:9px;
  font-weight:400;
  letter-spacing:.3px;
  margin-top:6px;
  color:var(--muted)
}
.footer>p {
  font-size:10px;
  color:var(--muted)
}
.footer nav {
  font-size:11px;
  gap:22px
}
@media(min-width:1600px) {
  .hero {
    padding-top:100px;
    padding-bottom:95px
  }

}
@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 72px)
  }
  .hero {
    gap:38px
  }
  .hero h1 {
    font-size:62px
  }
  .hero-description {
    font-size:14px
  }
  .hero-actions {
    gap:20px;
    flex-wrap:wrap
  }
  .visual-top {
    font-size:7px;
    letter-spacing:.6px
  }
  .plan-visual {
    padding:18px
  }
  .plan-card {
    padding:20px 16px 0
  }
  .brief-card {
    padding:22px
  }
  .draft-badge {
    font-size:6px
  }
  .sample-post {
    gap:9px
  }
  .sample-post div>span {
    font-size:7px
  }
  .principles>div {
    gap:13px;
    font-size:7px
  }
  .research-grid,.review-section {
    gap:55px
  }
  .steps {
    gap:23px
  }
  .faq {
    gap:45px
  }
  .header nav {
    gap:20px
  }

}
@media(max-width:780px) {
  .wrap {
    width:calc(100% - 40px)
  }
  .header {
    min-height:88px;
    gap:15px
  }
  .wordmark {
    font-size:21px
  }
  .wordmark img {
    width:30px;
    height:30px
  }
  .byline {
    font-size:8px
  }
  .header nav {
    display:none
  }
  .header-cta {
    font-size:10px!important;
    padding:9px 12px!important;
    gap:12px!important;
    min-height:38px!important
  }
  .hero {
    grid-template-columns:1fr;
    padding-top:48px;
    padding-bottom:43px;
    gap:43px
  }
  .hero h1 {
    font-size:clamp(55px,10vw,74px);
    letter-spacing:-2.7px;
    margin-bottom:23px
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:1.1px;
    margin-bottom:22px
  }
  .hero-description {
    font-size:14px;
    max-width:490px;
    line-height:1.85
  }
  .hero-actions {
    gap:22px
  }
  .button {
    font-size:12px;
    padding:12px 18px;
    min-height:50px;
    gap:20px
  }
  .approval-note {
    font-size:9px;
    margin-top:20px;
    max-width:350px
  }
  .plan-visual {
    width:100%;
    max-width:510px;
    justify-self:center;
    transform:none;
    padding:21px
  }
  .visual-top {
    font-size:8px
  }
  .example-label {
    font-size:7px
  }
  .brief-card {
    padding:23px
  }
  .brief-card h2 {
    font-size:28px
  }
  .brief-card>p:not(.card-eyebrow) {
    font-size:11px;
    max-width:none
  }
  .plan-card {
    padding:22px 20px 0
  }
  .plan-title .card-eyebrow {
    font-size:7px;
    letter-spacing:1px
  }
  .draft-badge {
    font-size:7px
  }
  .sample-post {
    gap:12px
  }
  .sample-post strong {
    font-size:10px
  }
  .sample-post div>span {
    font-size:8px
  }
  .principles {
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
    padding-block:22px
  }
  .principles>p {
    font-size:12px
  }
  .principles>div {
    gap:12px;
    flex-wrap:wrap;
    font-size:7px;
    line-height:1.8;
    letter-spacing:.65px
  }
  .section {
    padding-block:65px
  }
  .section-heading {
    display:block
  }
  .section-heading>.eyebrow {
    margin-bottom:20px
  }
  h2 {
    font-size:39px;
    letter-spacing:-1.35px
  }
  .section-heading>p:last-child {
    margin:23px 0 0;
    font-size:13px;
    max-width:450px
  }
  .steps {
    grid-template-columns:1fr 1fr;
    gap:30px 24px;
    margin-top:35px
  }
  .steps h3 {
    font-size:13px;
    margin-top:22px
  }
  .steps p {
    font-size:11px
  }
  .research-section {
    padding-block:58px
  }
  .research-grid,.review-section {
    grid-template-columns:1fr;
    gap:38px
  }
  .research-intro {
    font-size:13px;
    max-width:none
  }
  .research-note {
    font-size:11px;
    max-width:none
  }
  .research-list article {
    padding:22px 0;
    gap:17px
  }
  .research-list h3 {
    font-size:14px
  }
  .research-list p {
    font-size:12px
  }
  .review-copy>p:not(.eyebrow) {
    font-size:13px;
    max-width:none
  }
  .review-details {
    padding:0
  }
  .faq {
    grid-template-columns:1fr;
    gap:34px
  }
  .faq summary {
    font-size:12px
  }
  .faq details p {
    font-size:12px;
    margin-right:15px
  }
  .final-cta {
    padding:43px 22px 40px;
    margin-bottom:40px
  }
  .final-cta h2 {
    font-size:43px;
    letter-spacing:-1.6px
  }
  .final-cta .eyebrow {
    font-size:8px;
    letter-spacing:1.1px
  }
  .final-cta>p:not(.eyebrow) {
    font-size:12px;
    max-width:260px;
    margin:20px auto
  }
  .pilot-note {
    font-size:9px
  }
  .footer {
    flex-wrap:wrap;
    gap:23px;
    padding-block:24px 32px
  }
  .footer>p {
    font-size:10px;
    margin:0;
    flex-basis:calc(100% - 150px)
  }
  .footer nav {
    flex-basis:100%;
    justify-content:flex-start;
    font-size:11px
  }

}
@media(max-width:370px) {
  .wrap {
    width:calc(100% - 32px)
  }
  .hero h1 {
    font-size:52px
  }
  .plan-visual {
    padding:15px
  }
  .plan-title {
    flex-wrap:wrap;
    gap:7px
  }
  .sample-post {
    gap:8px
  }
  .post-day {
    font-size:6px
  }
  .plan-footer {
    font-size:7px
  }
  .hero-actions {
    gap:17px
  }
  .hero-actions .text-link {
    font-size:11px
  }
  .steps {
    gap:26px 18px
  }
  .principles>div {
    gap:9px
  }
  .header-cta {
    gap:7px!important
  }

}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .button {
    transition:none
  }

}
