:root{
  --primary:#00c2bd; --secondary:#000; --lightGrey:whitesmoke; --midGrey:#cacaca; --darkGrey:#272727;
  --borderRadius:3px; --container:110rem;
}
*{box-sizing:border-box}
html{font-size:62.5%;min-height:100%;background:var(--lightGrey);scroll-behavior:smooth}
body{margin:0;font-family:'Inconsolata',monospace;background:#fff;color:var(--secondary);font-size:1.6em;font-weight:400;letter-spacing:.01em;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:rgba(0,194,189,.6)}
a{color:var(--primary)}
p{margin:0 0 1em}
h1,h2{margin:0 0 .5em;font-family:'Montserrat',sans-serif;font-weight:600;line-height:1.2}
h3,h4{font-family:'Inconsolata',monospace;font-weight:700;margin:0 0 .5em}
h2{font-size:2.6rem}
.container{max-width:var(--container);margin:0 auto;padding:0 2rem}
.taCenter{text-align:center}
.section{padding:5rem 0}
.section h2.emoji{text-align:center;margin-bottom:3rem}

/* nav */
.Nav{position:sticky;top:0;z-index:10;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.08)}
.Nav .container{display:flex;align-items:center;gap:2.4rem;height:5.2rem}
.Logo{display:block;width:3.2rem;height:3.2rem;background:url(/images/logo.png) center/contain no-repeat;flex:none}
.Nav--Links{display:flex;align-items:center;gap:1.8rem;margin-left:auto}
.NavLink{color:var(--secondary);text-decoration:none;font-size:1.5rem}
.NavLink:hover{color:var(--primary)}
.Nav--CTA{background:var(--primary);color:#fff;text-transform:uppercase;font-size:1.2rem;letter-spacing:.06em;padding:.7rem 1.2rem;border-radius:var(--borderRadius)}
.Nav--CTA:hover{color:#fff;background:#00a9a4}
@media (max-width:640px){.Nav--Links .NavLink:not(.Nav--CTA){display:none}}

/* hero */
.PageHeader{position:relative;background:var(--darkGrey);color:#fff;padding:9rem 0 20rem;overflow:hidden}
.PageHeader .BackgroundImage{position:absolute;inset:0;background:linear-gradient(90deg,rgba(39,39,39,.75),rgba(39,39,39,.4)),url(/images/hero.jpg) center/cover no-repeat;opacity:.9}
.PageHeader .container{position:relative;animation:fadeIn .5s ease-out}
.PageHeader--Title{font-size:4.6rem;margin-bottom:1.6rem;color:#fff;text-wrap:balance;max-width:24ch}
.PageHeader--Subtitle{font-weight:700;font-size:1.8rem;margin:0 0 .6em;color:#fff;max-width:56ch}
.PageHeader--Subtitle::before{content:">> "}
.PageHeader > svg{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:16rem;display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:600px){.PageHeader{padding:6rem 0 12rem}.PageHeader--Title{font-size:3rem}.PageHeader > svg{height:9rem}}
@media (prefers-reduced-motion:reduce){.PageHeader .container{animation:none}}

.Intro p{max-width:78ch}

/* offer ladder */
.Tiers--Lead{max-width:70ch;margin:0 auto 3rem;text-align:center;font-size:1.5rem}
.Tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(28rem,1fr));gap:2.4rem;align-items:stretch}
.Tier{background:#fff;border:1px solid var(--midGrey);border-radius:var(--borderRadius);padding:2.6rem 2.2rem;display:flex;flex-direction:column}
.Tier--Featured{border:2px solid var(--primary);box-shadow:0 2px 20px rgba(0,0,0,.12);position:relative}
.Tier--Badge{position:absolute;top:-1.2rem;left:2.2rem;background:var(--primary);color:#fff;text-transform:uppercase;font-size:1.1rem;letter-spacing:.06em;padding:.4rem 1rem;border-radius:var(--borderRadius)}
.Tier--Name{font-family:'Inconsolata',monospace;font-weight:700;font-size:1.7rem;margin:0 0 .4em}
.Tier--Price{font-family:'Montserrat',sans-serif;font-weight:600;font-size:3.4rem;margin:0 0 .6em;line-height:1}
.Tier--Price small{font-family:'Inconsolata',monospace;font-weight:400;font-size:1.4rem;display:block;color:#555;margin-top:.6rem;line-height:1.5}
.Tier--Access{font-size:1.4rem;font-weight:700;background:var(--lightGrey);padding:1rem 1.2rem;border-radius:var(--borderRadius);margin:0 0 1.4rem}
.Tier ul{padding-left:1.7rem;margin:0 0 1.4rem;font-size:1.45rem}
.Tier li{margin-bottom:.7rem}
.Tier--Limit{font-size:1.35rem;color:#555;margin:0 0 1.4rem}
.Tier--For{font-size:1.35rem;margin:auto 0 1.6rem;padding-top:1.2rem;border-top:1px solid var(--midGrey)}
.Tier--CTA{display:block;background:var(--primary);color:#fff;text-decoration:none;text-transform:uppercase;font-size:1.2rem;letter-spacing:.06em;padding:.9rem 1.4rem;border-radius:var(--borderRadius);text-align:center}
.Tier--CTA:hover{color:#fff;background:#00a9a4}
.Tier--CTA.alt{background:#fff;color:var(--secondary);border:1px solid var(--midGrey)}
.Tier--CTA.alt:hover{color:var(--secondary);border-color:var(--primary)}
.credit{background:#fff;border-left:3px solid var(--primary);padding:1.4rem 1.8rem;border-radius:var(--borderRadius);font-size:1.45rem;margin:3rem auto 0;max-width:78ch}

.Grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(26rem,1fr));gap:3rem}
.Card{background:#fff;border-radius:var(--borderRadius);box-shadow:0 2px 12px rgba(0,0,0,.08);overflow:hidden;display:flex;flex-direction:column}
.Card--Body{padding:2.4rem 2rem 2.2rem;display:flex;flex-direction:column;gap:.6rem}
.Card--Title{font-family:'Inconsolata',monospace;font-weight:700;font-size:1.7rem;margin:0}
.Card p{margin:0;font-size:1.45rem}

.Example{background:var(--lightGrey);border-left:3px solid var(--primary);padding:2rem 2.4rem;border-radius:var(--borderRadius);max-width:78ch}
.Example h4{margin-bottom:.6rem}

/* contact */
.Contact form{max-width:60rem;margin:0 auto;display:grid;gap:1.4rem}
.Contact label{display:grid;gap:.4rem;font-size:1.4rem;font-weight:700}
.Contact input,.Contact textarea,.Contact select{font:inherit;font-size:1.5rem;padding:1rem;border:1px solid var(--midGrey);border-radius:var(--borderRadius);width:100%;background:#fff}
.Contact input:focus,.Contact textarea:focus,.Contact select:focus{outline:2px solid var(--primary);border-color:var(--primary)}
.Contact button{font:inherit;background:var(--primary);color:#fff;border:0;text-transform:uppercase;letter-spacing:.06em;font-size:1.3rem;padding:1.1rem 1.6rem;border-radius:var(--borderRadius);cursor:pointer;justify-self:start}
.Contact .alt{text-align:center;font-size:1.4rem;margin-top:2rem}

/* footer */
.footer{padding:2.4rem 0;background:var(--lightGrey);font-size:1.2rem;line-height:1.9}
.footer a{color:#000;text-decoration:none;margin:0 .3rem}
.footer a:hover{color:var(--primary)}
/* paid-funnel pages */
.Button{display:inline-block;background:var(--primary);color:#fff;text-decoration:none;text-transform:uppercase;font-size:1.3rem;letter-spacing:.06em;padding:1rem 1.6rem;border-radius:var(--borderRadius);margin:.4rem 0}
.Button:hover{background:#00a9a4;color:#fff}
.Button.alt{background:#fff;color:var(--secondary);border:1px solid var(--midGrey)}
.Narrow{max-width:72ch}
.Narrow h2{margin-top:3rem}
.Price{font-family:'Montserrat',sans-serif;font-weight:600;font-size:3rem;margin:.4rem 0 1rem}
.Note{font-size:1.4rem;color:#555}
.Sample{background:var(--lightGrey);border-left:3px solid var(--primary);padding:1.4rem 1.8rem;border-radius:var(--borderRadius);font-size:1.45rem}
.Legal h2{font-size:2rem;margin-top:2.4rem}
.Legal p,.Legal li{max-width:78ch}