:root { --morning: #f4f8f6; --mist: #dceae4; --teal: #0f4c4a; --teal-2: #136360; --leaf: #2f8f63; --sun: #f2c14e; --ink: #17302d; --muted: #4c615d;
  --head: "Outfit", system-ui, sans-serif; --body: "Atkinson Hyperlegible", system-ui, sans-serif; --chat-accent: #0f4c4a; --chat-on-accent: #fff; --chat-surface: #fff; --chat-ink: #17302d; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--morning); color: var(--ink); font: 400 18px/1.6 var(--body); }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1140px, 100% - 48px); margin-inline: auto; }
header { height: 78px; display: flex; align-items: center; }
header .wrap { display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--teal); font: 700 24px/1 var(--head); }
.logo svg { width: 40px; height: 40px; }
header nav a { font: 600 16px var(--head); color: var(--teal); text-decoration: none; margin-left: 24px; }
header nav a.cta { background: var(--teal); color: #fff; padding: 11px 20px; border-radius: 999px; }
.top { padding: 60px 0 30px; background: radial-gradient(700px 400px at 85% 0%, rgba(242, 193, 78, .25), transparent 70%), radial-gradient(600px 400px at 0% 100%, rgba(47, 143, 99, .14), transparent 70%); }
h1 { font: 800 clamp(44px, 6vw, 84px)/.98 var(--head); letter-spacing: -.04em; color: var(--teal); margin: 0 0 18px; max-width: 14ch; }
h2 { font: 800 clamp(30px, 3.6vw, 46px)/1.05 var(--head); letter-spacing: -.03em; color: var(--teal); margin: 0 0 10px; }
.lead { color: var(--muted); font-size: 20px; max-width: 56ch; margin: 0; }
section { padding: 50px 0; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tier { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 26px; padding: 30px 26px 26px; box-shadow: 0 0 0 1px var(--mist); transition: transform .3s, box-shadow .3s; }
.tier:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--mist), 0 30px 60px -36px rgba(15, 76, 74, .45); }
.tier.pop { box-shadow: 0 0 0 2px var(--teal), 0 40px 70px -40px rgba(15, 76, 74, .6); }
.badge { position: absolute; top: -13px; left: 26px; background: var(--sun); color: var(--teal); font: 700 13px var(--head); padding: 4px 12px; border-radius: 999px; }
.tier h3 { font: 700 26px var(--head); color: var(--teal); margin: 0; }
.blurb { color: var(--muted); font-size: 16px; margin: 6px 0 18px; min-height: 2.5em; }
.price { margin: 0 0 18px; display: flex; align-items: baseline; gap: 8px; }
.price b { font: 800 48px/1 var(--head); color: var(--ink); letter-spacing: -.03em; }
.price span { color: var(--muted); font-size: 15px; }
.tier ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; font-size: 16px; flex: 1; }
.tier li { padding-left: 26px; position: relative; }
.tier li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 7px; border-left: 2.5px solid var(--leaf); border-bottom: 2.5px solid var(--leaf); transform: rotate(-45deg); }
.choose, .btn { display: block; text-align: center; font: 600 17px var(--head); padding: 15px; border-radius: 999px; text-decoration: none; color: var(--teal); box-shadow: inset 0 0 0 2px var(--teal); transition: background .2s, color .2s; }
.choose:hover, .tier.pop .choose, .btn { background: var(--teal); color: #fff; }
.btn { display: inline-block; padding: 16px 28px; margin-top: 10px; }
.compare { background: #fff; }
.sub { color: var(--muted); margin: 0 0 26px; }
.tablewrap { overflow-x: auto; border-radius: 20px; box-shadow: 0 0 0 1px var(--mist); }
table { width: 100%; border-collapse: collapse; min-width: 620px; }
th, td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--mist); font-size: 16px; }
thead th { font: 700 15px var(--head); color: var(--muted); background: var(--morning); }
thead th.us { color: var(--teal); }
tbody th { font: 600 16px var(--head); color: var(--ink); }
tbody td:nth-child(2) { background: rgba(47, 143, 99, .07); font-weight: 700; color: var(--teal); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
.fine { font-size: 14px; color: var(--muted); margin: 16px 0 0; max-width: 80ch; }
.alc { list-style: none; padding: 0; margin: 24px 0 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 36px; }
.alc li { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--mist); }
.alc b { font-family: var(--head); color: var(--teal); white-space: nowrap; }
footer { padding: 40px 0 60px; color: var(--muted); font-size: 15px; border-top: 1px solid var(--mist); margin-top: 40px; }
@media (max-width: 960px) { .tiers { grid-template-columns: 1fr; } .alc { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .alc { grid-template-columns: 1fr; } header nav a:not(.cta) { display: none; } }