@font-face {
  font-family: 'Host Grotesk';
  src: url('/assets/fonts/host-grotesk.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
:root {
  --paper: #f7f7f1;
  --ink: #17221c;
  --pine: #176440;
  --lime: #b6f394;
  --quiet: #525e55;
  --rule: #d5dace;
  --display: 'Host Grotesk', 'Helvetica Neue', sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  color-scheme: light;
  font-family: Arial, 'Helvetica Neue', sans-serif;
  background: var(--paper);
  color: var(--ink);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  color: inherit;
  font: inherit;
  cursor: pointer;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
:focus-visible {
  outline: 3px solid #258e58;
  outline-offset: 4px;
}
.symbols,
.sr-only,
.skip:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip:focus {
  position: fixed;
  z-index: 9;
  top: 8px;
  left: 8px;
  padding: 12px 16px;
  background: white;
}
svg:not(.symbols) {
  display: block;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
  flex: none;
}
.wrap {
  width: min(1408px, 100%);
  padding-inline: clamp(20px, 5.5vw, 78px);
  margin-inline: auto;
}
h1,
h2,
h3,
.brand {
  font-family: var(--display);
  font-weight: 500;
}
h1,
h2,
h3,
p,
figure {
  margin: 0;
}
.mast {
  min-height: 79px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
}
.mast::after {
  content: '';
  height: 1px;
  background: var(--rule);
  position: absolute;
  bottom: 0;
  inset-inline: clamp(20px, 5.5vw, 78px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 27px;
  letter-spacing: -0.055em;
}
.brand img {
  display: block;
}
.mast nav,
.hero-actions,
.button,
.text-link,
.inbox-link,
.kicker,
.reviewer-note,
.caption-label,
.author,
.resolve,
.snippet button,
.snippet-bar,
.footer {
  display: flex;
  align-items: center;
}
.mast nav {
  gap: clamp(19px, 2.8vw, 42px);
  font-size: 14px;
  font-weight: 600;
}
.nav-link:hover,
.text-link:hover,
.footer > a:not(.brand):hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.inbox-link {
  gap: 14px;
  min-height: 40px;
  padding: 0 16px;
  background: var(--ink);
  color: white;
  border-radius: 9px;
}
.inbox-link:hover {
  background: var(--pine);
}
.inbox-link svg {
  width: 16px;
  height: 16px;
}
.hero {
  display: grid;
  grid-template-columns: 0.96fr 1.04fr;
  gap: clamp(30px, 4.8vw, 74px);
  padding-block: clamp(58px, 6.1vw, 88px) clamp(56px, 6vw, 88px);
  align-items: center;
}
.hero-copy,
.preview,
.snippet,
.steps article {
  min-width: 0;
}
.kicker {
  gap: 8px;
  font: 600 11px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.085em;
  color: var(--pine);
}
.kicker svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.9;
}
h1 {
  font-size: clamp(4.8rem, 7.3vw, 7.15rem);
  letter-spacing: -0.073em;
  line-height: 0.9;
  margin: 23px 0 24px;
}
h1 span {
  color: var(--pine);
}
.intro {
  font-size: clamp(17px, 1.46vw, 21px);
  line-height: 1.5;
  color: #405046;
  max-width: 410px;
  letter-spacing: -0.021em;
  text-wrap: pretty;
}
.hero-actions {
  gap: 20px;
  margin-top: 27px;
  flex-wrap: wrap;
}
.button {
  gap: 10px;
  justify-content: center;
  width: fit-content;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 10px;
  font-weight: 650;
  font-size: 15px;
}
.primary {
  color: white;
  background: var(--pine);
  box-shadow: 0 4px 11px -7px #062f16;
}
.primary:hover {
  background: #0b5132;
}
.text-link {
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 0;
}
.text-link svg {
  width: 15px;
  height: 15px;
}
.reviewer-note {
  margin-top: 14px;
  gap: 6px;
  color: var(--quiet);
  font: 12px/1.4 var(--mono);
}
.reviewer-note svg {
  width: 14px;
  height: 14px;
  stroke: var(--pine);
  stroke-width: 2.2;
}
.preview {
  position: relative;
  padding: 0;
}
.preview-shell {
  position: relative;
  background: #c8dbb7;
  padding: clamp(17px, 2.4vw, 37px);
  padding-bottom: clamp(34px, 4.8vw, 68px);
  border: 1px solid #bcccae;
  border-radius: 19px;
  box-shadow: inset 0 0 0 5px #cfe0c0;
  background-image: radial-gradient(#76946955 0.75px, transparent 0.75px);
  background-size: 9px 9px;
}
.chrome {
  height: 28px;
  border-radius: 8px 8px 0 0;
  border: 1px solid #57795744;
  background: #fafbf6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: #425148;
}
.dots {
  display: inline-flex;
  gap: 4px;
}
.dots i {
  width: 5px;
  height: 5px;
  background: #c7cdc2;
  border-radius: 50%;
}
.dots i:nth-child(1) {
  background: #a4b29e;
}
.address {
  display: flex;
  align-items: center;
  gap: 4px;
  font: 9px/1 var(--mono);
  letter-spacing: 0.01em;
}
.address svg {
  width: 10px;
  height: 10px;
}
.chrome-spacer {
  width: 23px;
}
.scene {
  position: relative;
  isolation: isolate;
  height: clamp(258px, 24vw, 350px);
  overflow: hidden;
  border-radius: 0 0 8px 8px;
  color: white;
  background: #765942;
  box-shadow: 0 9px 19px -11px #324c31;
}
.photo {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
  z-index: -2;
}
.scene::before {
  content: '';
  inset: 0;
  position: absolute;
  z-index: -1;
  background:
    linear-gradient(95deg, #1f2a2199, transparent 80%), linear-gradient(#16251b45, transparent 34%);
}
.scene-site {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 5%;
  padding-block: 13px 9px;
  border-bottom: 1px solid #fff5;
}
.scene-site b {
  font: 500 15px/0.9 var(--display);
  letter-spacing: -0.06em;
}
.scene-site sup {
  font: 6px Arial;
  vertical-align: top;
}
.scene-site > span {
  font: 7px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.scene-title {
  position: absolute;
  top: 28%;
  left: 6%;
  font:
    500 clamp(38px, 4.5vw, 69px) / 0.88 Georgia,
    serif;
  letter-spacing: -0.075em;
  text-shadow: 0 1px 10px #1d261d55;
}
.pin,
.sample-pin {
  color: #0c321e;
  border: 2px solid #20472b;
  font: 700 14px/1 var(--mono);
  box-shadow: 0 2px 0 #15331b88;
  background: var(--lime);
  border-radius: 50% 50% 50% 3px;
}
.pin {
  position: absolute;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  z-index: 1;
}
.pin::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
}
.pin[aria-pressed='true'] {
  outline: 2px solid #ffffffd9;
  outline-offset: 2px;
}
.pin:focus-visible {
  outline: 4px solid white;
  outline-offset: 4px;
}
.pin-one {
  left: 49%;
  top: 28%;
}
.pin-two {
  left: 21%;
  top: 73%;
  background: #ffdc9d;
  border-color: #66502c;
}
.comment-card {
  position: absolute;
  width: clamp(192px, 48%, 259px);
  right: clamp(12px, 2vw, 29px);
  bottom: clamp(18px, 2.25vw, 32px);
  background: #fffef9;
  color: var(--ink);
  border: 1px solid #aab8a4;
  border-radius: 11px;
  box-shadow: 0 9px 24px -10px #293d2a62;
  padding: 13px 14px 10px;
}
.comment-head,
.comment-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pin-label {
  color: var(--pine);
  font: 600 10px/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.kind {
  background: #edf4df;
  color: #3e5736;
  border-radius: 4px;
  padding: 3px 5px;
  font: 10px/1.2 var(--mono);
}
.comment-card > p {
  padding-block: 10px 12px;
  font-size: clamp(13px, 1.14vw, 16px);
  line-height: 1.33;
  letter-spacing: -0.015em;
}
.comment-foot {
  border-top: 1px solid #e1e4d9;
  padding-top: 7px;
  font-size: 10px;
}
.author {
  gap: 5px;
  font-weight: 650;
}
.avatar {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf1af;
  color: #424528;
  font: 600 10px var(--mono);
}
.resolve {
  gap: 2px;
  background: none;
  border: 0;
  padding: 3px 0 3px 4px;
  color: #47634b;
  min-height: 26px;
}
.resolve:hover {
  text-decoration: underline;
}
.resolve svg {
  width: 13px;
  height: 13px;
}
.comment-card.resolved > p {
  text-decoration: line-through;
  color: var(--quiet);
}
figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 11px 1px 0;
  color: #576258;
  font: 10px/1.4 var(--mono);
}
.caption-label {
  gap: 6px;
  color: #3a5541;
}
.caption-label i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #41884f;
}
.how {
  border-block: 1px solid var(--rule);
  background: #edeee5;
  padding: clamp(42px, 5.8vw, 84px) 0;
}
h2 {
  font-size: clamp(43px, 5.1vw, 74px);
  letter-spacing: -0.065em;
  line-height: 0.98;
  margin: 16px 0 32px;
  text-wrap: balance;
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 48px);
}
.step-art {
  height: clamp(78px, 7.3vw, 105px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  color: #29432d;
}
.art-share {
  background: #dce7d2;
}
.art-pin {
  background: #e9e3d2;
}
.art-done {
  background: #dce4d7;
}
.url-chip,
.mini-note,
.mini-task {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 9px 11px;
  border-radius: 6px;
  background: #fbfcf7;
  border: 1px solid #aab9a8;
  font: 10px var(--mono);
}
.url-chip {
  transform: rotate(-3deg);
}
.url-chip svg,
.mini-note svg {
  width: 14px;
  height: 14px;
}
.tiny-pointer {
  position: absolute;
  top: 56%;
  left: 72%;
  color: #244e30;
  transform: rotate(6deg);
}
.tiny-pointer svg {
  fill: #b5e591;
  stroke-width: 1.9;
  width: 22px;
  height: 22px;
}
.ghost-lines {
  position: absolute;
  width: 82px;
  height: 28px;
  left: 19%;
  top: 33%;
  background: repeating-linear-gradient(0deg, transparent 0 5px, #8e8b7042 6px 7px);
}
.sample-pin {
  padding: 6px 8px;
  position: relative;
  z-index: 1;
  transform: translate(3px, -8px);
}
.mini-note {
  transform: translate(1px, 8px) rotate(2deg);
}
.mini-task {
  transform: rotate(-2deg);
  text-decoration: line-through;
  color: #59695a;
}
.mini-task i {
  display: grid;
  place-items: center;
  background: #28613f;
  color: white;
  width: 15px;
  height: 15px;
  border-radius: 3px;
}
.mini-task svg {
  width: 12px;
  height: 12px;
}
h3 {
  font-size: clamp(22px, 2.25vw, 33px);
  letter-spacing: -0.055em;
  margin: 16px 0 8px;
  line-height: 1.12;
}
.steps article > p,
.install-copy > p:not(.kicker) {
  font-size: 16px;
  color: var(--quiet);
  line-height: 1.55;
  max-width: 37ch;
  text-wrap: pretty;
}
.install {
  padding-block: clamp(42px, 5.8vw, 84px);
}
.install-panel {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: clamp(26px, 5vw, 72px);
  border-radius: 17px;
  background: #183c2c;
  color: white;
  padding: clamp(25px, 4.2vw, 65px);
}
.install .kicker {
  color: #b8e5b2;
}
.install h2 {
  margin-bottom: 16px;
}
.install-copy > p:not(.kicker) {
  color: #caddcb;
  margin-bottom: 18px;
}
.install-copy code {
  font-size: 0.86em;
}
.soft {
  background: var(--lime);
  color: #123b24;
}
.soft:hover {
  background: #c7ffa8;
}
.snippet {
  background: #10291d;
  border: 1px solid #48674e;
  border-radius: 10px;
  overflow: hidden;
}
.snippet-bar {
  justify-content: space-between;
  padding: 9px 15px;
  border-bottom: 1px solid #385340;
  font: 11px var(--mono);
  color: #c6dec6;
}
.snippet button {
  border: 1px solid #526b57;
  padding: 4px 7px;
  border-radius: 4px;
  background: transparent;
  gap: 5px;
  color: #d6e9d6;
  font-size: 11px;
  min-height: 28px;
}
.snippet button svg {
  width: 13px;
  height: 13px;
}
.snippet pre {
  margin: 0;
  padding: 20px 16px;
  overflow-x: auto;
  color: #d9f4b8;
  font: clamp(11px, 1.1vw, 15px) / 1.75 var(--mono);
}
.snippet p {
  color: #bccfbd;
  font:
    12px/1.5 Arial,
    sans-serif;
  padding: 0 16px 15px;
}
.snippet p code {
  color: #e3f3dc;
}
.footer {
  gap: 24px;
  border-top: 1px solid var(--rule);
  min-height: 83px;
  font-size: 13px;
  color: #4b5c50;
}
.footer .brand {
  margin-right: auto;
  color: var(--ink);
  font-size: 21px;
}
@media (max-width: 900px) and (min-width: 761px) {
  .hero {
    gap: 20px;
  }
  .hero-actions {
    gap: 10px;
  }
  .hero-actions .text-link {
    font-size: 12px;
  }
  .button {
    font-size: 14px;
    padding: 0 12px;
  }
  figcaption {
    align-items: start;
    flex-direction: column;
  }
}
@media (max-width: 760px) {
  .mast {
    min-height: 64px;
  }
  .brand {
    font-size: 24px;
  }
  .brand img {
    width: 30px;
    height: 30px;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 31px;
    padding-block: 39px 37px;
  }
  h1 {
    font-size: clamp(70px, 12vw, 95px);
    margin-block: 19px;
  }
  .hero-copy {
    max-width: 560px;
  }
  .intro {
    max-width: 43ch;
  }
  .hero-actions {
    margin-top: 20px;
  }
  .preview-shell {
    padding: 24px 24px 43px;
  }
  .scene {
    height: clamp(234px, 43vw, 300px);
  }
  .scene-title {
    font-size: clamp(42px, 8vw, 60px);
  }
  .comment-card {
    width: min(49%, 238px);
    right: 17px;
    bottom: 17px;
  }
  .steps {
    gap: 26px;
    grid-template-columns: 1fr;
  }
  .step-art {
    width: 100%;
    height: 76px;
  }
  .steps article > p {
    max-width: 48ch;
  }
  .install-panel {
    grid-template-columns: 1fr;
  }
  .install h2 br {
    display: none;
  }
  .snippet pre {
    font-size: 12px;
  }
}
@media (max-width: 500px) {
  .mast .nav-link {
    display: none;
  }
  .hero-actions {
    gap: 15px;
  }
  .reviewer-note {
    font-size: 10.5px;
  }
  .hero-actions .button {
    font-size: 14px;
  }
  .preview-shell {
    padding: 14px 14px 48px;
    border-radius: 13px;
  }
  .scene {
    height: 220px;
  }
  .comment-card {
    width: min(56%, 206px);
    padding: 10px;
    right: 9px;
    bottom: 11px;
  }
  .comment-card > p {
    font-size: 13px;
  }
  .pin {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  .pin-one {
    left: 53%;
  }
  .pin-two {
    top: 74%;
  }
  figcaption {
    font-size: 9px;
  }
  .caption-label {
    gap: 4px;
  }
  .install-panel {
    padding: 23px 17px;
  }
  .snippet pre {
    font-size: 11px;
  }
  .footer {
    gap: 15px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  .button,
  .pin,
  .inbox-link {
    transition:
      transform 0.17s,
      background 0.17s;
  }
  .button:hover,
  .pin:hover,
  .inbox-link:hover {
    transform: translateY(-2px);
  }
}
.service-feedback{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:36px;border-top:1px solid var(--line)}.service-feedback h2{font-size:clamp(26px,3.2vw,44px);letter-spacing:-.055em;margin:0 0 6px}.service-feedback p{font-size:15px;max-width:55ch;margin:0}.service-feedback .button{white-space:nowrap}.footer button{cursor:pointer;padding:0;border:0;background:none;font:inherit;color:inherit}.footer{flex-wrap:wrap}
#live-playground{border:1px solid #aab9a0;border-radius:15px;padding:0;width:min(1140px,96vw);max-width:96vw;color:var(--ink);background:#f9faf5;box-shadow:0 20px 70px #10250b44}#live-playground::backdrop{background:#162417a6}#live-playground header,#live-playground nav{display:flex;align-items:center;gap:10px;padding:10px 16px}#live-playground header{justify-content:space-between}#live-playground header small{display:block;font-size:12px;color:#586453}#live-playground button{cursor:pointer;padding:7px 10px;border:1px solid #c3ceba;border-radius:6px;background:#fff;color:#294027;font:600 12px inherit;font-family:inherit;font-weight:600}#live-playground nav{padding-top:0}#live-playground button[aria-pressed=true]{background:#d4edb5;border-color:#a7cc8c}#playground-frame{display:block;width:100%;height:min(68dvh,690px);border:0;border-top:1px solid #c3ceba;background:white}
@media(max-width:620px){.service-feedback{display:grid}.service-feedback .button{justify-self:start}#live-playground{width:98vw;max-width:98vw}#playground-frame{height:67dvh}}

/* Product overview and owner handoffs */
.hero {
  color: #f7fbf2;
  background: #153326;
  box-shadow: 0 0 0 100vmax #153326;
  clip-path: inset(0 -100vmax);
}
.hero h1 {font-size: clamp(4.1rem, 6.35vw, 6.9rem); line-height: .94; letter-spacing: -.073em;}
.hero h1 span {color: #c4f4a1;}
.hero .kicker,.hero .reviewer-note,.hero figcaption,.hero .caption-label,.hero figcaption a {color: #cee3c6;}
.hero .intro {color: #e3eadd; max-width: 43ch;}
.hero .primary {background: #c4f4a1; color: #192e20; border-color: #c4f4a1;}
.hero .primary:hover {background: #ddffbe;}
.hero .text-link {color: #f5f9ee;}
.hero .preview-shell {background-color: #8da683; border-color: #9cb590; box-shadow: inset 0 0 0 4px #b2c7a266;}
.hero .comment-card,.hero .chrome {color: #15261c;}
.hero figcaption a {text-underline-offset: 3px; text-decoration: underline;}
.hero .caption-label i {background: #c4f4a1;}
.handoffs {
  border-block: 1px solid #d1ddc9;
  padding-block: clamp(58px, 7vw, 105px);
  background: #e2ecd9;
}
.handoff-intro, .plans-intro {max-width: 780px;}
.handoff-intro h2,.plans h2 {
  margin: 16px 0 13px;
  color: #1f3828;
  font-size: clamp(48px, 5.5vw, 82px);
  letter-spacing: -.068em;
  line-height: .99;
}
.handoff-intro > p:not(.kicker),.plans-intro > p:not(.kicker) {
  max-width: 55ch; color: #405143; font-size: clamp(16px,1.25vw,19px); line-height: 1.5;
}
.brief-desk {
  display: grid;
  grid-template-columns: minmax(230px,.7fr) minmax(300px,1.3fr);
  margin-top: clamp(24px,3vw,44px);
  overflow: hidden;
  border-radius: 17px;
  border: 1px solid #82937b;
  background: #f9fbf5;
}
.source-side,.brief-side {padding: clamp(18px,2.7vw,40px);min-width:0;}
.source-side {display:flex; flex-direction:column; align-items:flex-start; gap:12px;}
.source-side > label,.brief-paper strong {
  font: 600 10px/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.source-side select {
  width: 100%; max-width: 270px; border: 1px solid #b4c1ae; border-radius: 6px; background: #fff;
  color: var(--ink); font: 14px/1.3 var(--display); padding: 8px 6px;
}
.source-photo {
  position:relative; width:100%; min-height:110px; aspect-ratio:2.85;
  background: #84715b url('/assets/fieldwork.webp') 50% 54% / cover;
  border-radius:7px;
}
.source-photo span {
  position:absolute;top:37%;left:57%;display:grid;place-items:center;width:26px;height:26px;
  background:var(--lime);border:2px solid #fff;border-radius:50% 50% 50% 4px;color:#223321;font:bold 12px var(--mono);
}
.source-side blockquote {margin:0; max-width:29ch; color:#213325;font:clamp(19px,2vw,30px)/1.18 var(--display);letter-spacing:-.045em;}
#brief-location {margin-top:auto; font:11px/1.5 var(--mono);color:#526152;}
.brief-side {background:#203d2d;color:#f5faef;}
.brief-side h3,.plan-card h3 {font:500 clamp(25px,2.7vw,36px)/1.06 var(--display);letter-spacing:-.05em;}
.brief-top,.destinations {display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.brief-top {justify-content:space-between;gap:15px;}
.brief-top button,.destinations button {
  border:1px solid #78927b; border-radius:6px; background:transparent; color:#edf5e6;
  font:600 12px/1.3 Arial,sans-serif; padding:7px 11px;
}
.destinations {margin:20px 0 13px;}
.destinations button[aria-pressed=true] {background:#c4f4a1;border-color:#c4f4a1;color:#183021;}
.brief-top button:hover,.destinations button:hover {border-color:#d8efc5;}
.brief-paper {
  padding:clamp(17px,2vw,29px); border-left:4px solid #bbea9f;
  border-radius:0 8px 8px 0; background:#f5f7ec; color:#24352a;
}
.brief-paper h4 {font:500 clamp(20px,2.1vw,31px)/1.13 var(--display);letter-spacing:-.045em;margin:0 0 8px;}
.brief-paper p,.brief-route,.handoff-foot,.plan-onboarding {font-size:14px;line-height:1.5;}
.brief-paper strong {display:block;margin:17px 0 4px;color:#496746;}
.brief-route {min-height:3em;margin-top:14px;color:#dfedd8;}
.handoff-foot {max-width:86ch;margin:14px 0 0;color:#475b45;}
.handoff-foot a,.plan-onboarding a {color:#24563e;text-decoration:underline;text-underline-offset:3px;}
.manual-copy {width:100%;min-height:130px;margin-top:10px;}
.plans {padding-block:clamp(58px,7vw,108px) 28px;}
.plan-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:25px 0 12px;}
.plan-card {display:flex;align-items:flex-start;flex-direction:column;gap:15px;padding:clamp(19px,3vw,40px);border:1px solid #c8d3c0;border-radius:14px;background:#fff;}
.plan-card.pro-card {background:#e3f0d7;border-color:#9cb58b;}
.plan-card p {font-size:16px;line-height:1.45;color:#4a584b;max-width:40ch;}
.plan-card ul {display:grid;gap:9px;width:100%;margin:2px 0 6px;list-style:none;padding:17px 0 0;border-top:1px solid #becab6;}
.plan-card li {font-size:14px;line-height:1.45;padding-left:21px;position:relative;}
.plan-card li::before {content:'✓';position:absolute;left:0;color:#37623d;font-weight:700;}
.plan-card .button {margin-top:auto;}
.plan-onboarding {max-width:83ch;color:#506051;}
.owner-access {max-width:46rem;margin-top:16px;padding:15px 18px;border:1px solid #becab9;border-radius:12px;}
.owner-access summary {cursor:pointer;font-weight:650;color:#24563e;}
.owner-access p {margin:12px 0 0;color:#425948;line-height:1.5;}
.owner-access form {display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin:16px 0 0;}
.owner-access form[hidden],.owner-access [role=status]:empty {display:none;}
.owner-access label {display:grid;gap:5px;flex:1;min-width:min(100%,155px);font-size:14px;font-weight:600;}
.owner-access input {width:100%;min-width:0;padding:10px 12px;border:1px solid #9eae9e;border-radius:7px;background:#fff;color:#183021;font:inherit;font-size:16px;}
.owner-access button {font-size:14px;}
.owner-access [role=status] {font-weight:600;}
@media(max-width:800px){
  .hero h1{font-size:clamp(3.9rem,9vw,5.8rem);}
  .mast nav{gap:12px;}
}
@media(max-width:680px){
  .mast .plan-link{display:inline-flex;}
  .brief-desk,.plan-grid{grid-template-columns:minmax(0,1fr);}
  .source-side{display:grid;grid-template-columns:1fr minmax(70px,100px);gap:8px 10px;}
  .source-side label,.source-side select,.source-side blockquote,#brief-location{grid-column:1;}
  .source-photo{grid-column:2;grid-row:1/5;height:100%;min-height:0;aspect-ratio:auto;}
  .source-side blockquote{font-size:19px;}
  .hero h1{font-size:clamp(3.6rem,12.1vw,5.9rem);}
  .plan-card{gap:11px;}
  .destinations{gap:5px;}
  .destinations button,.brief-top button{min-height:40px;}
  .brief-route{min-height:0;}
}
@media(max-width:370px){
  .mast.wrap{padding-inline:12px;gap:8px;}
  .mast nav{gap:8px;}
  .mast .inbox-link{padding-inline:10px;gap:6px;}
  .mast .brand{font-size:22px;gap:4px;}
}