:root {
  color-scheme: light;
  --ink: #13231a;
  --forest: #17382b;
  --forest-2: #24513e;
  --cream: #f2f0e8;
  --paper: #fbfaf5;
  --mint: #dce9df;
  --orange: #b94c22;
  --soft: #687269;
  --line: rgba(19,35,26,.15);
  --ease: cubic-bezier(.16,1,.3,1);
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.skip { position: fixed; z-index: 20; top: 8px; left: 8px; padding: 9px 13px; background: white; transform: translateY(-150%); }
.skip:focus { transform: translateY(0); }
a:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.campaign-header { position: absolute; z-index: 5; top: 0; left: 50%; display: grid; width: min(100% - 48px, 1280px); height: 82px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.2); color: white; grid-template-columns: 1fr auto 1fr; transform: translateX(-50%); }
.brand { display: inline-flex; align-items: center; gap: 9px; width: max-content; text-decoration: none; }
.brand img { width: 22px; filter: brightness(0) invert(1); }.brand b { font-size: 1.4rem; letter-spacing: -.08em; }
.campaign-header nav { display: flex; gap: 27px; }.campaign-header nav a { font-size: .72rem; font-weight: 700; text-decoration: none; }
.header-cta { justify-self: end; font-size: .73rem; font-weight: 750; text-decoration: none; }.header-cta span { margin-left: 8px; color: #bed7c6; }
.campaign-hero { display: grid; min-height: 820px; align-items: center; padding: 150px max(24px, calc((100vw - 1220px)/2)) 90px; overflow: hidden; background: radial-gradient(circle at 83% 23%, rgba(139,183,154,.24), transparent 30rem), linear-gradient(125deg,#102b20,#1b4131); color: white; gap: clamp(60px,9vw,135px); grid-template-columns: minmax(0,1fr) minmax(400px,.88fr); }
.campaign-hero.orange { background: radial-gradient(circle at 85% 20%, rgba(255,237,213,.18),transparent 28rem),linear-gradient(130deg,#7e3017,#b94c22); }
.campaign-hero.ink { background: radial-gradient(circle at 80% 20%, rgba(202,212,204,.12),transparent 28rem),linear-gradient(130deg,#121914,#26332a); }
.hero-copy { max-width: 720px; }.kicker { margin: 0 0 24px; color: #bed7c6; font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }.orange .kicker { color: #ffe2d2; }
.campaign-hero h1 { max-width: 10ch; margin: 0; font-size: clamp(3.8rem,6.7vw,7.4rem); font-weight: 510; letter-spacing: -.075em; line-height: .89; }
.campaign-hero h1 em { color: #a8c8b2; font-family: Georgia,serif; font-weight: 400; letter-spacing: -.045em; }.orange h1 em { color: #ffe0cf; }
.hero-copy > p:not(.kicker) { max-width: 50ch; margin: 32px 0 0; color: rgba(255,255,255,.7); font-size: 1.04rem; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; margin-top: 36px; gap: 24px; }.button { display: inline-flex; min-height: 54px; align-items: center; padding: 0 21px; border-radius: 3px; background: white; color: var(--forest); font-size: .79rem; font-weight: 780; text-decoration: none; transition: transform 180ms var(--ease); }.button:hover { transform: translateY(-2px); }.button span { margin-left: 24px; font-size: 1.1rem; }.quiet-link { color: rgba(255,255,255,.72); font-size: .78rem; text-underline-offset: 5px; }
.hero-art { position: relative; min-height: 520px; }
.metric-art { display: grid; height: 520px; place-content: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(255,255,255,.05); text-align: center; }.metric-art strong { font-family: Georgia,serif; font-size: clamp(8rem,14vw,13rem); font-weight: 400; letter-spacing: -.09em; line-height: .75; }.metric-art span { max-width: 18ch; margin: 30px auto 0; color: rgba(255,255,255,.68); font-size: .75rem; }
.stack-art { display: grid; align-content: center; height: 520px; padding: 30px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(255,255,255,.055); transform: rotate(1deg); }.stack-art span { display: flex; justify-content: space-between; padding: 17px 5px; border-bottom: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.7); font-size: .78rem; }.stack-art span b { color: white; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; }.stack-art strong { margin-top: 22px; padding: 18px; background: white; color: var(--forest); font-size: .88rem; text-align: center; }
.conversation-art { display: grid; height: 520px; align-content: center; gap: 14px; }.bubble { max-width: 82%; padding: 20px 22px; border-radius: 20px 20px 20px 3px; background: white; color: var(--ink); font-size: .86rem; box-shadow: 0 20px 50px rgba(0,0,0,.18); }.bubble:nth-child(2) { justify-self: end; border-radius: 20px 20px 3px 20px; background: #b7d1bf; }.bubble small { display: block; margin-top: 7px; color: var(--soft); font-size: .59rem; }
.database-art { display: grid; height: 520px; align-content: center; gap: 9px; }.database-art > span { display: grid; padding: 17px 18px; border: 1px solid rgba(255,255,255,.16); border-radius: 5px; background: rgba(255,255,255,.06); font-size: .76rem; gap: 4px; grid-template-columns: 1fr auto; }.database-art > span small { color: rgba(255,255,255,.55); grid-column: 1; }.database-art > span b { align-self: center; color: #bad5c2; font-size: .58rem; letter-spacing: .07em; text-transform: uppercase; grid-column: 2; grid-row: 1/3; }
.phone-art { display: grid; height: 570px; place-items: center; border-radius: 50% 50% 7px 7px; background: rgba(220,233,223,.14); }.mini-phone { width: 285px; overflow: hidden; border: 8px solid #101713; border-radius: 38px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 70px rgba(0,0,0,.32); }.mini-top { height: 31px; background: linear-gradient(90deg,transparent 39%,#101713 39% 61%,transparent 61%); }.mini-brand { display: flex; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--line); gap: 9px; }.mini-brand i { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: var(--forest); color: white; font-size: .54rem; font-style: normal; }.mini-brand span { display: grid; font-size: .59rem; }.mini-brand small { color: var(--soft); font-size: .44rem; }.mini-copy { padding: 24px 15px 15px; }.mini-copy small { color: var(--orange); font-size: .46rem; font-weight: 800; letter-spacing: .08em; }.mini-copy h3 { max-width: 9ch; margin: 5px 0 0; font-family: Georgia,serif; font-size: 1.6rem; font-weight: 500; line-height: 1.03; }.mini-phone > img { width: calc(100% - 24px); height: 210px; margin: 0 12px; border-radius: 6px; object-fit: cover; }.mini-listing { display: grid; padding: 10px 14px 20px; font-size: .61rem; }.mini-listing small { color: var(--soft); font-size: .48rem; }
.proof-bar { display: grid; padding: 0 max(24px, calc((100vw - 1220px)/2)); border-bottom: 1px solid var(--line); background: var(--cream); grid-template-columns: repeat(3,1fr); }.proof-bar div { padding: 31px 28px; border-left: 1px solid var(--line); }.proof-bar div:last-child { border-right: 1px solid var(--line); }.proof-bar span { color: var(--orange); font-family: Georgia,serif; font-size: .72rem; font-style: italic; }.proof-bar b { display: block; margin-top: 5px; font-size: .78rem; }
.argument { display: grid; padding: clamp(100px,13vw,180px) max(24px,calc((100vw - 1120px)/2)); gap: clamp(60px,9vw,130px); grid-template-columns: .75fr 1.25fr; }.section-label { margin: 5px 0 0; color: var(--orange); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.argument-copy h2,.feature-intro h2,.closing h2 { margin: 0; font-size: clamp(2.8rem,5.3vw,5.7rem); font-weight: 510; letter-spacing: -.067em; line-height: .97; }.argument-copy > p { max-width: 50ch; margin: 28px 0 0; color: var(--soft); line-height: 1.75; }.argument-copy blockquote { margin: 50px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); font-family: Georgia,serif; font-size: clamp(1.4rem,2.2vw,2rem); font-style: italic; line-height: 1.25; }
.feature-section { padding: clamp(90px,11vw,150px) max(24px,calc((100vw - 1220px)/2)); background: var(--cream); }.feature-intro { display: grid; align-items: end; margin-bottom: 65px; gap: 40px; grid-template-columns: 1fr 1fr; }.feature-intro p { max-width: 45ch; justify-self: end; margin: 0; color: var(--soft); line-height: 1.7; }.feature-grid { display: grid; gap: 1px; grid-template-columns: repeat(3,1fr); }.feature-grid article { min-height: 310px; padding: 28px; border: 1px solid var(--line); background: var(--paper); }.feature-grid article + article { border-left: 0; }.feature-grid span { color: var(--orange); font-family: Georgia,serif; font-size: .7rem; font-style: italic; }.feature-grid h3 { max-width: 14ch; margin: 90px 0 13px; font-size: 1.45rem; font-weight: 560; letter-spacing: -.035em; }.feature-grid p { margin: 0; color: var(--soft); font-size: .83rem; line-height: 1.65; }
.closing { padding: clamp(110px,14vw,190px) 24px; background: var(--forest); color: white; text-align: center; }.closing .section-label { color: #bcd5c3; }.closing h2 { max-width: 13ch; margin: 0 auto; }.closing h2 em { color: #a8c8b2; font-family: Georgia,serif; font-weight: 400; letter-spacing: -.04em; }.closing p { max-width: 45ch; margin: 30px auto 35px; color: rgba(255,255,255,.65); }.closing .button { margin: 0 auto; }
.campaign-footer { display: grid; min-height: 145px; align-items: center; padding: 30px max(24px,calc((100vw - 1280px)/2)); background: #10281e; color: rgba(255,255,255,.57); font-size: .68rem; grid-template-columns: 1fr auto 1fr; }.campaign-footer .brand { color: white; }.campaign-footer > p { margin: 0; }.campaign-footer div { display: flex; justify-self: end; gap: 20px; }
@media (prefers-reduced-motion:no-preference){.hero-copy{animation:enter 650ms var(--ease) both}.hero-art{animation:enter 800ms 100ms var(--ease) both}@keyframes enter{from{opacity:0;transform:translateY(24px)}}}
@media(max-width:900px){.campaign-hero{grid-template-columns:1fr}.hero-copy{padding-top:30px}.hero-art{width:min(100%,620px)}.argument{grid-template-columns:1fr}.feature-intro{align-items:start;grid-template-columns:1fr}.feature-intro p{justify-self:start}.campaign-header nav{display:none}.campaign-header{grid-template-columns:1fr auto}.proof-bar{grid-template-columns:1fr}.proof-bar div,.proof-bar div:last-child{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}}
@media(max-width:620px){.campaign-header{width:calc(100% - 32px);height:70px}.campaign-hero{min-height:auto;padding:125px 20px 70px;gap:50px}.campaign-hero h1{font-size:clamp(3.3rem,16.5vw,5rem)}.hero-actions{align-items:flex-start;flex-direction:column;gap:18px}.hero-art,.metric-art,.stack-art,.conversation-art,.database-art{min-height:0;height:430px}.metric-art strong{font-size:9rem}.stack-art{padding:18px}.phone-art{height:525px}.mini-phone{width:min(80vw,280px)}.argument-copy h2,.feature-intro h2,.closing h2{font-size:clamp(2.7rem,13vw,4.2rem)}.feature-grid{grid-template-columns:1fr}.feature-grid article+article{border-top:0;border-left:1px solid var(--line)}.feature-grid article{min-height:260px}.feature-grid h3{margin-top:55px}.campaign-footer{padding-top:45px;padding-bottom:45px;gap:22px;grid-template-columns:1fr}.campaign-footer div{justify-self:start}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}