:root {
  --white: #ffffff;
  --ink: #17211d;
  --green: #0f4434;
  --green-deep: #0a3529;
  --rust: #c84b18;
  --rust-dark: #aa3c11;
  --rose: #efd8d6;
  --line: #d9dfdc;
  --muted: #626a66;
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --shadow: 0 24px 60px rgb(13 42 33 / 18%);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
body:has(dialog[open]) { overflow: hidden; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
a { color: inherit; }

.skip-link { position: fixed; z-index: 100; left: 1rem; top: -5rem; padding: .75rem 1rem; color: var(--white); background: var(--green); }
.skip-link:focus { top: 1rem; }

.site-header { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 96px; padding: 0 var(--gutter); border-bottom: 1px solid transparent; background: rgb(255 255 255 / 94%); transition: min-height .2s ease, border-color .2s ease, box-shadow .2s ease; }
.site-header.is-scrolled { position: sticky; top: 0; min-height: 76px; border-color: var(--line); box-shadow: 0 8px 28px rgb(16 45 36 / 7%); backdrop-filter: blur(14px); }
.wordmark { width: max-content; color: var(--green); font-family: var(--display); font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1; text-decoration: none; letter-spacing: -.035em; }
.site-nav { display: flex; gap: clamp(1.4rem, 3vw, 3.1rem); }
.site-nav a, .site-footer a { font-size: .92rem; font-weight: 650; text-decoration: none; }
.site-nav a { position: relative; }
.site-nav a::after { position: absolute; bottom: -.5rem; left: 0; width: 100%; height: 2px; content: ""; background: var(--rust); transform: scaleX(0); transform-origin: right; transition: transform .2s ease; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.header-cta { justify-self: end; }
.cart-button { gap: .65rem; }
.cart-button__count { display: grid; min-width: 24px; height: 24px; place-items: center; border-radius: 50%; color: var(--rust); background: var(--white); font-size: .75rem; font-weight: 850; }

.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 3px; padding: .85rem 1.45rem; cursor: pointer; font-family: var(--sans); font-size: .94rem; font-weight: 750; line-height: 1.1; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #e8a080; outline-offset: 3px; }
.button--green { color: var(--white); background: var(--green); }
.button--green:hover { box-shadow: 0 10px 24px rgb(15 68 52 / 20%); background: var(--green-deep); }
.button--rust { color: var(--white); background: var(--rust); }
.button--rust:hover { box-shadow: 0 10px 24px rgb(200 75 24 / 22%); background: var(--rust-dark); }
.button--outline { color: var(--green); border-color: var(--green); background: var(--white); }
.button--rust-outline { color: #ff7040; border-color: #e65b2d; background: transparent; }
.button--wide { min-width: 220px; }
.button-row { display: flex; flex-wrap: wrap; gap: .9rem; }

.hero { display: grid; grid-template-columns: minmax(0, 45%) minmax(0, 55%); min-height: 770px; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero__copy { min-width: 0; align-self: center; padding: clamp(4rem, 8vw, 8rem) clamp(2rem, 3vw, 3.5rem) clamp(4rem, 8vw, 7rem) var(--gutter); }
.hero h1 { max-width: 640px; margin: 0; color: var(--green); font-family: var(--display); font-size: clamp(3.2rem, 5.6vw, 6.3rem); font-weight: 500; letter-spacing: -.055em; line-height: .9; }
.hero__lead { max-width: min(500px, 90%); margin: 2rem 0 2.1rem; font-size: clamp(1.08rem, 1.55vw, 1.35rem); line-height: 1.55; }
.scope-line { display: flex; max-width: min(540px, 90%); flex-wrap: wrap; gap: .25rem 0; margin: 2.5rem 0 0; color: var(--muted); font-size: .9rem; }
.scope-line span:not(:last-child)::after { margin: 0 .7rem; content: "·"; color: var(--rust); }
.purchase-trust { max-width: 100%; margin: 1rem 0 0; color: var(--muted); font-size: .78rem; font-weight: 650; line-height: 1.5; }
.hero__visual { position: relative; min-height: 770px; background: var(--green); }
.hero__photo { width: 100%; height: 100%; object-fit: cover; object-position: 56% center; }

.browser { overflow: hidden; border: 1px solid rgb(15 68 52 / 24%); border-radius: 13px; background: var(--white); box-shadow: var(--shadow); }
.browser__bar { display: flex; height: 30px; align-items: center; gap: 5px; padding: 0 13px; background: #f2f3f2; }
.browser__bar i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #e14f3b; }
.browser__bar i:nth-child(2) { background: #ecb83f; }
.browser__bar i:nth-child(3) { background: #42ae64; }
.browser--hero { position: absolute; bottom: 8%; left: -12%; width: min(660px, 83%); }
.mock-site__nav { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem; min-height: 68px; padding: 0 1.3rem; font-size: .52rem; text-transform: uppercase; }
.mock-site__nav strong { color: #0c1210; font-size: .68rem; line-height: 1; }
.mock-site__nav b, .mock-site__body em { border-radius: 2px; padding: .55rem .75rem; color: var(--white); background: var(--rust); font-style: normal; }
.mock-site__body { display: grid; grid-template-columns: 48% 52%; min-height: 270px; background: #f6f3ee; }
.mock-site__body > div { align-self: center; padding: 1.7rem; }
.mock-site__body h2 { margin: 0 0 1rem; color: #161d19; font-family: var(--display); font-size: clamp(1.4rem, 2.1vw, 2.2rem); font-weight: 500; letter-spacing: -.04em; line-height: .95; }
.mock-site__body p { margin: 0 0 1.2rem; font-size: .68rem; }
.mock-site__body em { display: inline-block; font-size: .55rem; font-weight: 700; text-transform: uppercase; }
.mock-site__body img { width: 100%; height: 100%; object-fit: cover; }
.mock-site__footer { padding: .85rem; color: var(--white); background: var(--green); font-size: .55rem; font-weight: 700; text-align: center; letter-spacing: .06em; }

.section { padding: clamp(5rem, 9vw, 9rem) var(--gutter); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.section-heading h2, .package h2, .process h2, .closing h2, .intake h2 { margin: 0; color: var(--green); font-family: var(--display); font-size: clamp(2.8rem, 4.7vw, 5.2rem); font-weight: 500; letter-spacing: -.05em; line-height: .98; }
.section-heading p { max-width: 470px; margin: 0 0 .45rem; color: var(--muted); }
.section-heading--tight { margin-bottom: 4rem; }

.work { overflow: hidden; }
.customer-example { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .7fr); align-items: stretch; margin-bottom: clamp(4rem, 7vw, 6.5rem); background: var(--green); box-shadow: var(--shadow); }
.customer-example__browser { align-self: center; margin: clamp(1.1rem, 2.2vw, 2rem) 0 clamp(1.1rem, 2.2vw, 2rem) clamp(1.1rem, 2.2vw, 2rem); border-color: rgb(255 255 255 / 22%); border-radius: 8px; box-shadow: 0 24px 70px rgb(1 20 14 / 35%); }
.customer-example__preview { position: relative; display: block; overflow: hidden; background: var(--white); }
.customer-example__preview::after { position: absolute; top: 0; left: 0; width: 175px; height: 25px; content: ""; pointer-events: none; background: var(--white); }
.customer-example__preview img { width: 100%; height: auto; aspect-ratio: 16 / 8.2; object-fit: cover; object-position: center top; transition: transform .35s ease; }
.customer-example__preview:hover img { transform: scale(1.012); }
.customer-example__copy { display: flex; align-items: flex-start; justify-content: center; flex-direction: column; padding: clamp(2rem, 4vw, 4.5rem); color: var(--white); }
.customer-example__copy .concept__label { margin-top: 0; color: #f39a74; }
.customer-example__copy h3 { max-width: 420px; margin: 0; font-family: var(--display); font-size: clamp(2.2rem, 3.5vw, 4rem); font-weight: 500; letter-spacing: -.045em; line-height: .95; }
.customer-example__copy > p:not(.concept__label) { max-width: 440px; margin: 1.4rem 0; color: rgb(255 255 255 / 78%); }
.customer-example__features { display: grid; gap: .55rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.customer-example__features li { position: relative; padding-left: 1.4rem; font-size: .88rem; font-weight: 650; }
.customer-example__features li::before { position: absolute; top: .55em; left: 0; width: 6px; height: 6px; border-radius: 50%; content: ""; background: #f39a74; }
.concepts-heading { margin: 0 0 2.5rem; color: var(--green); font-family: var(--display); font-size: clamp(1.9rem, 3vw, 3rem); font-weight: 500; letter-spacing: -.04em; }
.concepts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.6vw, 2.7rem); }
.concept { min-width: 0; }
.concept--raised { transform: translateY(-2rem); }
.browser--concept { border-radius: 8px; box-shadow: 0 18px 44px rgb(20 42 34 / 12%); }
.concept__screen { padding: 1.15rem; background: #f4f1ec; }
.concept__mini-nav { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 1rem; }
.concept__mini-nav strong { color: var(--green); font-family: var(--display); font-size: .82rem; line-height: .9; }
.concept__mini-nav span { border-radius: 2px; padding: .45rem .55rem; color: var(--white); background: var(--green); font-size: .45rem; font-weight: 700; text-transform: uppercase; }
.concept__screen--pet { background: #f7efef; }
.concept__screen--pet .concept__mini-nav span { background: #b74f69; }
.concept__screen--bike { background: #f4f3ef; }
.concept__screen--bike .concept__mini-nav span { background: var(--rust); }
.concept__content { display: grid; grid-template-columns: 43% 57%; min-height: 260px; overflow: hidden; }
.concept__content > div { z-index: 1; align-self: center; padding: 1.2rem .8rem; }
.concept__content h3 { margin: 0 0 .75rem; color: var(--green); font-family: var(--display); font-size: clamp(1.2rem, 1.8vw, 2rem); font-weight: 500; letter-spacing: -.035em; line-height: .98; }
.concept__content small { color: var(--muted); font-size: .56rem; }
.concept__content img { width: 100%; height: 100%; object-fit: cover; }
.concept__label { margin: 1.5rem 0 .3rem; color: var(--rust); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.concept > h3 { margin: 0; color: var(--green); font-family: var(--display); font-size: clamp(1.4rem, 2.1vw, 2rem); font-weight: 500; }

.package { display: grid; grid-template-columns: 58% 42%; border-block: 1px solid var(--line); }
.package > * { min-width: 0; }
.package__details { align-self: center; padding: clamp(4rem, 7vw, 7rem) clamp(2rem, 5vw, 5.5rem) clamp(4rem, 7vw, 7rem) var(--gutter); }
.package h2::after, .section-heading--tight h2::after { display: block; width: 44px; height: 4px; margin-top: 1.2rem; content: ""; background: var(--rust); }
.package__columns { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; margin-top: 3rem; }
.package h3 { margin: 0 0 1.2rem; color: var(--green); font-size: .75rem; letter-spacing: .13em; text-transform: uppercase; }
.package h3.rust { color: var(--rust); }
.feature-list { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.feature-list li { position: relative; padding-left: 2rem; font-size: .94rem; }
.feature-list li::before { position: absolute; top: .05rem; left: 0; display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: var(--white); font-size: .75rem; font-weight: 900; }
.feature-list--included li::before { content: "✓"; background: var(--green); }
.feature-list--excluded li::before { content: "×"; background: var(--rust); }
.package__note { max-width: 720px; margin: 2.5rem 0 0; color: var(--muted); font-size: .82rem; }
.package__photo { width: 100%; height: 100%; min-height: 680px; object-fit: cover; }

.add-ons { overflow: hidden; background: #f5f2ec; }
.base-tier { display: grid; grid-template-columns: minmax(190px, .7fr) minmax(170px, .45fr) minmax(280px, 1.1fr) minmax(250px, .85fr); align-items: center; border-block: 1px solid var(--green); background: rgb(255 255 255 / 38%); }
.base-tier > * { min-height: 150px; padding: 2rem clamp(1.4rem, 2.8vw, 2.8rem); }
.base-tier > * + * { border-left: 1px solid rgb(15 68 52 / 28%); }
.offer-label { margin: 0 0 1rem; color: var(--rust); font-size: .72rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.base-tier h3, .offer-subheading h3, .hosting-plan h4 { margin: 0; color: var(--green); font-family: var(--display); font-weight: 500; letter-spacing: -.04em; line-height: .98; }
.base-tier h3 { font-size: clamp(2.2rem, 3.8vw, 4rem); }
.base-tier__price { color: var(--green); font-family: var(--display); font-size: clamp(3.8rem, 6vw, 6.8rem); letter-spacing: -.065em; line-height: .8; }
.base-tier__price span { vertical-align: top; font-family: var(--sans); font-size: 1rem; font-weight: 800; letter-spacing: 0; }
.base-tier__description { display: flex; align-items: center; margin: 0; color: var(--ink); font-size: .95rem; }
.base-tier__action { display: flex; align-items: stretch; justify-content: center; flex-direction: column; gap: 1rem; }
.base-tier__action p { margin: 0; font-size: .95rem; }
.base-tier__action .button { width: 100%; }
.base-tier__action .text-action { align-self: flex-start; font-size: .82rem; }
.base-tier__action .purchase-trust { color: var(--muted); font-size: .72rem; font-weight: 600; }
.offer-subheading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin: clamp(4rem, 7vw, 7rem) 0 1.5rem; }
.offer-subheading h3 { font-size: clamp(2.4rem, 4.2vw, 4.4rem); }
.offer-subheading p { max-width: 500px; margin: 0 0 .35rem; color: var(--muted); text-align: right; }
.start-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--green); }
.start-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .35rem 2rem; padding: clamp(2rem, 4vw, 3.5rem); }
.start-option + .start-option { border-left: 1px solid var(--green); }
.start-option__eyebrow { grid-column: 1 / -1; margin: 0 0 .7rem; color: var(--rust); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.start-option__price { grid-row: 2 / span 2; grid-column: 2; color: var(--green); font-family: var(--display); font-size: clamp(3rem, 5vw, 5.8rem); letter-spacing: -.06em; line-height: .85; }
.start-option__price span { vertical-align: top; font-family: var(--sans); font-size: .9rem; font-weight: 800; letter-spacing: 0; }
.start-option__price--included { font-family: var(--sans); font-size: clamp(1.15rem, 2vw, 1.65rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.start-option h3 { margin: 0; color: var(--green); font-family: var(--display); font-size: clamp(1.7rem, 2.7vw, 2.8rem); font-weight: 500; letter-spacing: -.035em; line-height: 1; }
.start-option p:not(.start-option__eyebrow) { max-width: 420px; margin: .5rem 0 1.3rem; color: var(--muted); }
.start-option .button, .start-option .text-action { grid-column: 1 / -1; justify-self: start; }
.start-option .start-option__aside { grid-column: 1 / -1; margin: 0; color: var(--green); font-size: .78rem; font-weight: 800; }
.text-action { border: 0; padding: .25rem 0; cursor: pointer; color: var(--green); background: transparent; font-weight: 800; text-decoration: underline; text-decoration-color: var(--rust); text-decoration-thickness: 2px; text-underline-offset: .35rem; }
.text-action:hover { color: var(--rust); }
.add-on-list { border-top: 1px solid var(--line); }
.site-bundles { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:1.5rem; margin:2rem 0 1rem; }
.site-bundles article { padding:1.5rem; border:1px solid var(--line); background:#fff; }
.site-bundles h3 { color:var(--green); margin-top:0; }
.site-bundles .site-bundle--featured { border:2px solid var(--green); background:#eef5f1; }
.add-on { display: grid; grid-template-columns: minmax(0, .8fr) 132px minmax(0, 1fr) 192px; align-items: center; gap: 2rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.add-on > div { display: flex; align-items: baseline; gap: 1rem; }
.add-on span { color: var(--rust); font-size: .7rem; font-weight: 850; }
.add-on h3 { margin: 0; color: var(--green); font-family: var(--display); font-size: clamp(1.45rem, 2.2vw, 2.15rem); font-weight: 500; line-height: 1; }
.add-on strong { color: var(--green); font-size: .95rem; }
.add-on p { margin: 0; color: var(--muted); font-size: .86rem; }
.add-on__action { min-width: 0; width: 100%; min-height: 50px; padding-inline: .75rem; text-align: center; }
.booking-terms { grid-column: 1 / -1; padding: 1.1rem 1.3rem; border-left: 3px solid var(--green); background: rgba(255, 255, 255, .55); }
.booking-terms p + p { margin-top: .55rem; }
.booking-terms details { margin-top: .8rem; }
.booking-terms summary { color: var(--green); font-size: .86rem; font-weight: 650; cursor: pointer; }
.booking-terms summary:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.booking-terms details[open] summary { margin-bottom: .75rem; }
.booking-terms details p { max-width: 85ch; }
.hosting-section { margin-top: clamp(4rem, 7vw, 7rem); border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.offer-subheading--hosting { align-items: center; flex-direction: column; margin-top: 0; padding-top: clamp(2.5rem, 4vw, 4rem); text-align: center; }
.offer-subheading--hosting p { max-width: 700px; margin: 0; text-align: center; }
.hosting-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1200px; margin: clamp(2rem, 4vw, 3.5rem) auto 0; }
.hosting-plan { position: relative; min-height: 390px; padding: clamp(1.5rem, 2.5vw, 2.5rem); text-align: center; }
.hosting-plan + .hosting-plan { border-left: 1px solid rgb(15 68 52 / 28%); }
.hosting-plan--annual { background: rgb(255 255 255 / 24%); }
.hosting-plan__kind { margin: 0 0 1rem; color: var(--rust); font-size: .68rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.hosting-plan h4 { font-size: clamp(1.7rem, 2.4vw, 2.7rem); }
.hosting-plan__price { display: flex; align-items: baseline; justify-content: center; gap: .55rem; margin: 1.25rem 0; padding-bottom: 1rem; border-bottom: 2px solid var(--rust); color: var(--green); }
.hosting-plan__price strong { font-family: var(--display); font-size: clamp(2.8rem, 4vw, 4.5rem); font-weight: 500; letter-spacing: -.06em; line-height: .9; }
.hosting-plan__price span { font-size: .9rem; }
.hosting-plan > p:not(.hosting-plan__price, .hosting-plan__flag, .hosting-plan__limit, .hosting-plan__kind) { max-width: 320px; margin: 0 auto; }
.hosting-plan__limit { margin: 1rem auto 0; color: var(--muted); font-size: .76rem; }
.hosting-plan__action { margin-top: 1.5rem; }
.hosting-plan--featured { border-top: 3px solid var(--rust); background: rgb(255 255 255 / 45%); }
.hosting-plan__flag { position: absolute; top: 0; left: 50%; margin: 0; padding: .35rem .8rem; color: var(--white); background: var(--rust); font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; transform: translate(-50%, -50%); }
.portability-note { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(360px, 1.35fr) auto; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); margin-top: 1.5rem; padding: clamp(1.8rem, 3.5vw, 3.25rem); border-block: 1px solid rgb(15 68 52 / 30%); background: rgb(255 255 255 / 48%); }
.portability-note .offer-label { margin-bottom: .7rem; }
.portability-note h4 { margin: 0; color: var(--green); font-family: var(--display); font-size: clamp(1.8rem, 2.8vw, 3rem); font-weight: 500; letter-spacing: -.04em; line-height: .98; }
.portability-note > p { max-width: 780px; margin: 0; color: var(--ink); font-size: .94rem; }
.portability-note .text-action { white-space: nowrap; }
.commerce-note { max-width: 880px; margin: 2rem auto 0; color: var(--muted); font-size: .8rem; text-align: center; }

.process__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.process__steps li { position: relative; padding: 0 clamp(1rem, 2.5vw, 2.5rem); text-align: center; }
.process__steps li:not(:last-child)::after { position: absolute; top: 68px; right: -12%; width: 24%; height: 1px; content: ""; background: var(--line); }
.process__steps span { display: block; margin-bottom: .5rem; color: var(--green); font-size: .72rem; font-weight: 800; }
.step-icon { display: grid; width: 72px; height: 72px; margin: 0 auto 1.5rem; place-items: center; border-radius: 50%; color: var(--white); background: var(--green); }
.step-icon svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.process__steps h3 { min-height: 3.2rem; margin: 0 0 .65rem; color: var(--green); font-family: var(--display); font-size: clamp(1.25rem, 1.8vw, 1.8rem); font-weight: 500; line-height: 1; }
.process__steps p { max-width: 210px; margin: 0 auto; color: var(--muted); font-size: .85rem; }
.rights-note { margin: 4rem auto 0; color: var(--muted); font-size: .8rem; text-align: center; }

.closing { display: flex; align-items: center; justify-content: space-between; gap: 3rem; padding: clamp(3rem, 5vw, 4.5rem) var(--gutter); color: var(--white); background: var(--green); }
.closing h2 { max-width: 650px; color: var(--white); }
.site-footer { display: flex; min-height: 150px; align-items: center; justify-content: space-between; gap: 2rem; padding: 2.5rem var(--gutter); color: var(--white); background: #17201d; }
.wordmark--light { color: var(--white); }
.site-footer p { margin: .65rem 0 0; color: #d0d6d3; font-size: .82rem; }
.site-footer nav { display: flex; gap: 3rem; }
.site-footer nav a { color: #e5e9e7; }

.intake { width: min(650px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; border: 0; border-radius: 8px; padding: clamp(1.5rem, 5vw, 3.5rem); color: var(--ink); box-shadow: 0 30px 100px rgb(0 0 0 / 34%); }
.intake::backdrop { background: rgb(8 32 24 / 76%); backdrop-filter: blur(5px); }
.intake__close { position: absolute; top: 1rem; right: 1rem; width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer; color: var(--green); background: #edf1ef; font-size: 1.6rem; }
.intake__step { margin: 0 0 .8rem; color: var(--rust); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.intake h2 { padding-right: 2rem; font-size: clamp(2.5rem, 6vw, 4rem); }
.intake__choice { margin: .7rem 0 0; color: var(--muted); font-size: .82rem; }
.intake__choice a { color: var(--green); font-weight: 800; text-underline-offset: .2rem; }
.intake form { display: grid; gap: 1rem; margin-top: 2rem; }
.intake label { display: grid; gap: .4rem; color: var(--green); font-size: .78rem; font-weight: 800; }
.intake input, .intake textarea { width: 100%; border: 1px solid #aeb9b4; border-radius: 3px; padding: .8rem .9rem; color: var(--ink); background: var(--white); font-weight: 450; }
.intake .field-hint { color: var(--muted); font-size: .7rem; font-weight: 500; line-height: 1.45; }
.intake textarea { resize: vertical; }
.intake .consent-check { display: flex; grid-template-columns: auto 1fr; align-items: start; gap: .7rem; color: var(--muted); font-weight: 500; }
.intake .consent-check input { width: 18px; margin-top: .25rem; }
.intake__result textarea { margin: 1.5rem 0; }
.copy-status { min-height: 1.5rem; color: var(--green); font-size: .85rem; font-weight: 700; }

.cart { width: min(540px, 100%); max-width: none; height: 100dvh; max-height: none; margin: 0 0 0 auto; overflow: auto; border: 0; padding: 0; color: var(--ink); background: var(--white); box-shadow: -24px 0 80px rgb(5 28 21 / 28%); }
.cart::backdrop { background: rgb(8 32 24 / 72%); backdrop-filter: blur(4px); }
.cart__close { position: sticky; z-index: 2; top: 1rem; display: grid; width: 42px; height: 42px; margin: 1rem 1rem -58px auto; place-items: center; border: 0; border-radius: 50%; cursor: pointer; color: var(--green); background: #edf1ef; font-size: 1.6rem; }
.cart__header { padding: 3.5rem clamp(1.4rem, 5vw, 3.5rem) 2rem; border-bottom: 1px solid var(--line); }
.cart__eyebrow { margin: 0 0 .75rem; color: var(--rust); font-size: .7rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.cart__header h2 { margin: 0; color: var(--green); font-family: var(--display); font-size: clamp(2.8rem, 7vw, 4.5rem); font-weight: 500; letter-spacing: -.05em; line-height: .92; }
.cart__header > p:not(.cart__eyebrow) { max-width: 410px; margin: 1.1rem 0 0; color: var(--muted); font-size: .9rem; }
.cart__policy-link { display: inline-block; padding: .8rem 0; color: var(--rust-dark); font-size: .85rem; font-weight: 750; text-decoration: underline; text-underline-offset: .2rem; }
.cart__policy-link:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.cart__empty { padding: 3rem clamp(1.4rem, 5vw, 3.5rem); }
.cart__empty h3 { margin: 0; color: var(--green); font-family: var(--display); font-size: 2rem; font-weight: 500; }
.cart__empty p { margin: .6rem 0 1.5rem; color: var(--muted); }
.cart__contents { padding: 0 clamp(1.4rem, 5vw, 3.5rem) 3rem; }
.cart__lines { border-bottom: 1px solid var(--line); }
.cart__account { display: grid; gap: .85rem; padding: 1.35rem 0; border: 0; border-bottom: 1px solid var(--line); margin: 0; }
.cart__account legend { padding: 0; color: var(--green); font-family: var(--display); font-size: 1.55rem; font-weight: 500; }
.cart__account > p { margin: -.25rem 0 .15rem; color: var(--muted); font-size: .75rem; line-height: 1.55; }
.cart__account label { display: grid; gap: .35rem; color: var(--green); font-size: .72rem; font-weight: 800; }
.cart__account input { width: 100%; min-height: 46px; border: 1px solid #aeb9b4; border-radius: 3px; padding: .7rem .8rem; color: var(--ink); background: var(--white); font: 650 .85rem/1.3 var(--sans); }
.cart__account input[aria-invalid="true"] { border-color: var(--rust); }
.cart__account .consent-check { display: flex; align-items: flex-start; gap: .7rem; font-weight: 600; line-height: 1.5; }
.cart__account .consent-check input { flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; margin: .1rem 0 0; padding: 0; accent-color: var(--green); }
.cart__account select { width: 100%; min-height: 44px; padding: .6rem; border: 1px solid #aeb9b4; border-radius: 3px; background: var(--white); color: var(--ink); font: inherit; }
.cart-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1.25rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.cart-line:last-child { border-bottom: 0; }
.cart-line__name { margin: 0; color: var(--green); font-size: .95rem; font-weight: 800; }
.cart-line__cadence { display: block; margin-top: .2rem; color: var(--muted); font-size: .72rem; font-weight: 550; }
.cart-line__price { color: var(--green); font-weight: 800; white-space: nowrap; }
.cart-line__controls { display: flex; align-items: center; gap: .9rem; grid-column: 1 / -1; }
.cart-line__quantity { display: flex; align-items: center; gap: .55rem; color: var(--muted); font-size: .75rem; font-weight: 750; }
.cart-line__quantity select { min-width: 58px; border: 1px solid #aeb9b4; border-radius: 3px; padding: .45rem .6rem; color: var(--green); background: var(--white); font-weight: 750; }
.cart-line__remove { border: 0; padding: .25rem 0; cursor: pointer; color: var(--rust); background: transparent; font-size: .76rem; font-weight: 800; text-decoration: underline; text-underline-offset: .2rem; }
.cart__totals { display: grid; gap: .8rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.cart__totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; }
.cart__totals span { color: var(--muted); font-size: .82rem; font-weight: 700; }
.cart__totals strong { color: var(--green); font-family: var(--display); font-size: 1.75rem; font-weight: 500; }
.cart__sequence { margin: 1.2rem 0; padding: 1rem; border-left: 3px solid var(--rust); color: var(--green); background: #f5f2ec; font-size: .8rem; font-weight: 650; }
.cart__checkout { width: 100%; }
.cart__checkout[disabled] { cursor: not-allowed; opacity: .58; transform: none; box-shadow: none; }
.cart__clear { display: block; margin: 1rem auto 0; }
.cart__status { min-height: 1.5rem; margin: 1rem 0 0; color: var(--rust-dark); font-size: .8rem; font-weight: 750; text-align: center; }
.cart__fine-print { margin: 1.4rem 0 0; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.is-added { border-color: var(--green); color: var(--white); background: var(--green); }

.reveal { opacity: 1; transform: none; }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; }
  .hero__copy { padding-right: var(--gutter); }
  .hero__visual { min-height: 670px; }
  .browser--hero { left: var(--gutter); width: min(670px, calc(100% - var(--gutter) * 2)); }
  .concepts { grid-template-columns: 1fr 1fr; }
  .customer-example { grid-template-columns: 1fr; }
  .customer-example__browser { margin-right: clamp(1.1rem, 2.2vw, 2rem); }
  .customer-example__copy { padding-top: 2rem; }
  .concept--raised { transform: none; }
  .package { grid-template-columns: 1fr; }
  .package__details { padding-right: var(--gutter); }
  .package__photo { height: 520px; min-height: 0; object-position: center 64%; }
  .base-tier { grid-template-columns: 1fr 1fr; }
  .base-tier > *:nth-child(3) { border-top: 1px solid rgb(15 68 52 / 28%); border-left: 0; }
  .base-tier > *:nth-child(4) { border-top: 1px solid rgb(15 68 52 / 28%); }
  .add-on { grid-template-columns: minmax(0, .8fr) 120px minmax(0, 1fr) 176px; gap: 1.5rem; }
  .portability-note { grid-template-columns: 1fr; }
  .portability-note .text-action { justify-self: start; }
  .closing { align-items: flex-start; flex-direction: column; }
}

@media (min-width: 821px) and (max-width: 1000px) {
  .hero__copy .button { min-height: 46px; padding-inline: 1rem; font-size: .8rem; }
  .hero__copy .button-row { gap: .6rem; }
  .base-tier { grid-template-columns: 1fr 1fr; }
  .base-tier > *:nth-child(3) { border-top: 1px solid rgb(15 68 52 / 28%); border-left: 0; }
  .base-tier > *:nth-child(4) { border-top: 1px solid rgb(15 68 52 / 28%); }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .hosting-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hosting-plan:nth-child(3) { border-top: 1px solid rgb(15 68 52 / 28%); border-left: 0; }
  .hosting-plan:nth-child(4) { border-top: 1px solid rgb(15 68 52 / 28%); }
}

@media (max-width: 760px) {
  .site-header { grid-template-columns: 1fr auto; min-height: 78px; }
  .site-nav { display: none; }
  .header-cta { min-height: 44px; padding-inline: 1rem; }
  .hero { min-height: 0; }
  .hero__copy { padding-block: 4.5rem; }
  .hero h1 { font-size: clamp(3.6rem, 15vw, 5.5rem); }
  .hero__visual { min-height: 580px; }
  .hero__photo { object-position: 63% center; }
  .browser--hero { bottom: 7%; }
  .mock-site__nav span { display: none; }
  .mock-site__body { min-height: 220px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 1.25rem; }
  .offer-subheading { align-items: flex-start; flex-direction: column; gap: .75rem; }
  .offer-subheading p { text-align: left; }
  .offer-subheading--hosting { align-items: center; }
  .offer-subheading--hosting p { text-align: center; }
  .concepts { grid-template-columns: 1fr; gap: 3rem; }
  .concept__content { min-height: 300px; }
  .package__columns { grid-template-columns: 1fr; }
  .start-options { grid-template-columns: 1fr; }
  .start-option + .start-option { border-top: 1px solid var(--green); border-left: 0; }
  .add-on { grid-template-columns: 1fr auto; gap: .7rem 1.5rem; }
  .add-on p { grid-column: 1 / -1; }
  .add-on__action { grid-column: 1 / -1; width: 100%; }
  .hosting-plans { grid-template-columns: 1fr; }
  .hosting-plan { min-height: 0; padding-block: 2.5rem; }
  .hosting-plan + .hosting-plan { border-top: 1px solid rgb(15 68 52 / 28%); border-left: 0; }
  .hosting-plan--featured { border-top: 3px solid var(--rust); }
  .process__steps { grid-template-columns: 1fr 1fr; gap: 3.5rem 0; }
  .process__steps li:nth-child(2)::after { display: none; }
  .site-footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 500px) {
  .wordmark { font-size: 1.3rem; }
  .header-cta { font-size: .8rem; }
  .hero__copy .button { flex: 1; }
  .hero__visual { min-height: 470px; }
  .browser--hero { bottom: 5%; left: 1rem; width: calc(100% - 2rem); }
  .browser--hero .browser__bar { height: 22px; }
  .mock-site__nav { min-height: 50px; padding: 0 .7rem; }
  .mock-site__body { min-height: 170px; }
  .mock-site__body > div { padding: .8rem; }
  .mock-site__body h2 { font-size: 1.1rem; }
  .mock-site__body p { display: none; }
  .mock-site__footer { display: none; }
  .concept__content { min-height: 250px; }
  .customer-example__copy { padding: 1.75rem; }
  .customer-example__copy h3 { font-size: 2.3rem; }
  .customer-example__preview img { min-height: 250px; object-position: 48% top; }
  .base-tier { grid-template-columns: 1fr; }
  .base-tier > * { min-height: 0; padding: 1.5rem; }
  .base-tier > * + *, .base-tier > *:nth-child(3), .base-tier > *:nth-child(4) { border-top: 1px solid rgb(15 68 52 / 28%); border-left: 0; }
  .base-tier__price { padding-block: 2rem; }
  .start-option { grid-template-columns: 1fr; }
  .start-option__price { grid-row: auto; grid-column: 1; margin: .5rem 0; }
  .start-option .button, .start-option .text-action { width: 100%; justify-self: stretch; }
  .add-on { grid-template-columns: 1fr; }
  .add-on > div { align-items: flex-start; }
  .add-on p { grid-column: auto; }
  .add-on__action { grid-column: auto; }
  .commerce-note { text-align: center; }
  .process__steps { grid-template-columns: 1fr; }
  .process__steps li::after { display: none; }
  .process__steps h3 { min-height: auto; }
  .closing .button-row { width: 100%; }
  .closing .button { width: 100%; }
}

.care-cadence { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; border: 0; margin: 0 auto 1rem; padding: 0; }
.care-cadence legend { text-align: center; margin-bottom: .75rem; font-weight: 700; }
.care-cadence label { display: flex; align-items: center; gap: .5rem; padding: .75rem 1.25rem; border: 1px solid #b7c9c1; border-radius: 6px; cursor: pointer; }
.care-cadence label:has(input:checked) { background: #104b3b; color: white; }
.care-cadence input { accent-color: #cc4b17; }
.care-pricing-note { max-width: 760px; margin: 0 auto 2rem; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; }
}
