:root{--ink:#0D1F1B;--muted:#56675F;--green:#00795F;--lime:#A6F5EC;--offer-soft:#0A211E;--offer-line:#A6F5EC;--paper:#FAFBFA;--line:#DBE4E0;--white:#FFFFFF;--surface:#FFFFFF;--card:#FFFFFF;--sunk:#F1F5F3;--good-soft:#E9F6F1;--bad-soft:#FBEDEA;--bad:#B23B25;--bad-line:#B23B25;--deep:#0D1F1B;--button-bg:#00A887;--button-ink:#05201A;font-family:Archivo,Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);min-height:100vh}
a{color:inherit}
html{scroll-behavior:smooth;scroll-padding-top:100px}
p{line-height:1.65}
.shell{width:min(1200px,calc(100% - 80px));margin:auto}
.site-header{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.nav-row{min-height:88px;display:flex;align-items:center;gap:36px}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--ink)}
/* The same drawn wordmark the rest of the site uses, inlined once per page and
   referenced here, so the colour follows the page instead of the visitor's system. */
.brand .mark{display:block;width:200px;height:auto}


nav{display:flex;align-items:center;gap:27px;margin-left:auto}
nav a,.login{font-size:13px;font-weight:500;text-decoration:none}
nav a:hover,nav a[aria-current],.text-link:hover{color:var(--green)}
.login{border-left:1px solid var(--line);padding-left:26px}
.skip{position:absolute;top:-100px;background:var(--surface);color:var(--ink);padding:12px;z-index:20}
.skip:focus{top:10px}
a:focus-visible,summary:focus-visible,video:focus-visible{outline:3px solid #0ba582;outline-offset:6px}
.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:58px;align-items:center;padding:92px 0 86px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.8px;margin:0 0 23px;line-height:1.5}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:8px}
h1{font-size:clamp(38px,4.05vw,56px);line-height:1.12;letter-spacing:-2.5px;margin:0 0 25px;font-weight:600}
h1 em{font-style:normal;color:var(--green)}
.lead{font-size:18px;line-height:1.65;color:var(--muted);max-width:670px}
.hero .lead{max-width:520px}
.actions{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:31px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;padding:17px 22px;background:var(--button-bg);color:var(--button-ink);border:1px solid transparent;border-radius:5px;text-decoration:none;font-size:13px;font-weight:600;line-height:1.4}
.button:hover{filter:brightness(1.12)}
.text-link{font-size:13px;font-weight:600;text-decoration:none;line-height:1.6}
.hero-note{font-size:11px;color:var(--muted);margin-top:24px}
.hero-visual{background:var(--card);border:1px solid var(--line);border-radius:13px;box-shadow:0 25px 60px -35px #194b414d;padding:25px}
.visual-heading{display:flex;justify-content:space-between;gap:12px;font-size:9px;font-weight:600;letter-spacing:1px;color:var(--muted)}
.live-label{letter-spacing:0;font-weight:400}
.flow-line{display:flex;justify-content:space-between;align-items:center;margin:28px 0;gap:9px}
.flow-line span{border:1px solid var(--line);border-radius:5px;padding:12px 16px;font-size:12px;background:var(--deep)}
.flow-line i{font-style:normal;color:#9bafa7}
.validation-result{display:flex;align-items:center;gap:20px;background:var(--good-soft);padding:24px;border-radius:7px;margin-bottom:14px}
.bad-text{color:var(--bad)}
.validation-result.bad{background:var(--bad-soft)}
.validation-result.bad small{color:var(--bad)}
.check-icon.bad{background:transparent;border:2px solid var(--bad-line);color:var(--bad-line)}
.check-icon{width:48px;height:48px;background:var(--button-bg);color:var(--button-ink);border-radius:50%;display:grid;place-items:center;font-size:26px}
.validation-result small{font-size:9px;letter-spacing:1.2px;color:var(--green)}
.validation-result strong{display:block;font-size:24px;letter-spacing:-.6px;line-height:1.15;margin-top:9px}
.record{display:flex;justify-content:space-between;font-size:12px;border-bottom:1px solid var(--line);padding:15px 3px}
.record span{color:var(--muted)}
.green{color:var(--green)}
.evidence-strip{display:flex;justify-content:space-between;gap:6px;font-size:8px;letter-spacing:.8px;color:var(--muted);margin-top:24px}
.audience-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--sunk)}
.audience-strip .shell{display:flex;justify-content:flex-start;align-items:center;gap:14px 46px;padding:25px 0;flex-wrap:wrap}
.audience-strip span{margin-right:8px}
.audience-strip span{font-size:10px;letter-spacing:1.5px;color:var(--muted)}
.audience-strip strong{font-size:13px;font-weight:500}
.section{padding-top:88px;padding-bottom:88px}
h2{font-size:clamp(29px,3vw,40px);font-weight:500;line-height:1.16;letter-spacing:-1.4px;margin:0}
h3{font-size:22px;line-height:1.25;letter-spacing:-.6px;font-weight:600}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:56px;margin-bottom:36px}
.section-heading>:first-child{flex:1 1 0;min-width:0;max-width:640px}
.section-heading>p{flex:1 1 0;min-width:0;max-width:620px}
.section-heading p:last-child{font-size:14px;color:var(--muted)}
.section-heading .eyebrow{margin-bottom:14px}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.product-card{border:1px solid var(--line);background:var(--card);border-radius:9px;padding:28px;display:flex;flex-direction:column}
.card-top{display:flex;justify-content:space-between;margin-bottom:24px}
.number{color:var(--green);font-size:11px;letter-spacing:1px}
.card-mark{color:var(--green)}
.product-card h3{margin:0 0 12px}
.product-card p{font-size:13px;color:var(--muted);margin:0 0 20px}
.product-card .card-tag{font-weight:500;color:var(--ink);margin-bottom:12px}
.deliverable{margin-top:auto;padding-top:24px;border-top:1px solid var(--line)}
.deliverable span{font-size:9px;font-weight:600;letter-spacing:1px}
.deliverable p{margin-top:10px}
.product-card .engagement{font-size:10px;margin-bottom:18px}
.product-card .text-link{color:var(--green)}
.overview-section{background:var(--deep);color:#eef7f0;padding:72px 0}
.overview-grid{display:grid;grid-template-columns:.85fr 1.3fr;gap:70px;align-items:center}
.overview-grid .eyebrow{color:var(--lime)}
.overview-grid p{color:#b8ccc4;font-size:15px}
.overview-grid .text-link{color:var(--lime);display:inline-block;margin-top:16px}
video{width:100%;display:block;background:var(--deep);border:1px solid #36584c;border-radius:9px;aspect-ratio:16/9}
.transcript{font-size:12px;margin-top:15px;color:#b8ccc4}
.transcript summary{cursor:pointer;padding:6px 0}
.transcript p{font-size:13px}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:45px}
.steps-grid article{border-top:1px solid var(--line);padding-top:24px}
.steps-grid h3{font-size:20px;margin:18px 0 10px}
.steps-grid p{font-size:14px;color:var(--muted)}
.proof-section{background:var(--sunk);padding:74px 0}
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:95px;align-items:center}
.proof-grid p{font-size:15px;color:var(--muted)}
/* Six rows of text with an arrow did not read as six things you could open. They
   become cards like everything else on the page, and say so on hover: the border
   takes the accent, the surface lifts, the arrow moves the way it points. No new
   colour — a second accent used in one place is what makes a site look assembled. */
.proof-links{display:grid;gap:10px}
.proof-links a{display:flex;align-items:center;gap:22px;padding:18px 20px;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:9px;
  transition:border-color .15s,background .15s,transform .15s}
.proof-links a:hover{border-color:var(--green);background:var(--sunk);transform:translateX(3px)}
.proof-links a>span{font-size:11px;color:var(--green);font-weight:600;letter-spacing:.06em}
.proof-links strong{font-size:15.5px;font-weight:600;display:block;letter-spacing:-.01em}
.proof-links small{font-size:12.5px;display:block;margin-top:5px;color:var(--muted)}
.proof-links b{margin-left:auto;font-weight:400;color:var(--green);font-size:17px;
  transition:transform .15s}
.proof-links a:hover b{transform:translate(3px,-3px)}
/* The first row is the one thing a stranger can do right now, so it carries the
   colour the rest of the site reserves for the offer. */
.proof-links a:first-child{border-color:var(--offer-line);background:var(--offer-soft)}
.proof-links a:first-child>span,.proof-links a:first-child b{color:var(--offer-line)}
.proof-links a:first-child:hover{border-color:var(--offer-line);background:#0E2B27}
.compare-wrap{overflow-x:auto;margin-top:44px}
.compare{width:100%;border-collapse:collapse;min-width:820px;font-size:15px}
.compare th,.compare td{padding:18px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.compare td:not(:first-child),.compare thead th:not(:first-child){text-align:center;width:20%}
.compare thead th{background:var(--card);border-bottom:1px solid var(--offer-line);padding:26px 20px}
.compare thead th:first-child{width:40%;background:transparent;border-bottom:1px solid var(--offer-line)}
.compare .plan-name{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:4px}
.compare .plan-volume{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-bottom:16px}
.compare .plan-figure{display:block;font-size:31px;font-weight:600;letter-spacing:-.04em;line-height:1.1}
.compare .plan-was{display:block;font-size:12px;font-weight:400;color:var(--muted);margin:5px 0 18px}
.compare thead .button{width:100%;padding:11px 14px;font-size:14px;gap:9px}
.compare tbody th{font-weight:600;color:var(--ink);font-size:15px}
.compare tbody th span{display:block;font-weight:400;font-size:13.5px;color:var(--muted);margin-top:5px;line-height:1.5}
.compare .group th{padding-top:34px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--offer-line);font-weight:700}
.compare .group td{padding-top:34px}
.compare .yes{color:var(--green);font-size:19px;font-weight:700}
.compare .no{color:#3E4F49}
.compare .value{font-size:14px}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.plan{border:1px solid var(--line);background:var(--card);border-radius:9px;padding:30px;display:flex;flex-direction:column}
.plan.featured{border-color:var(--offer-line)}
.plan h3{font-size:19px;margin:0 0 6px}
.plan .volume{font-size:14px;color:var(--muted);margin:0}
.plan .figure{font-size:38px;letter-spacing:-.05em;line-height:1.15;margin:22px 0 2px;font-weight:600}
.plan .figure small{font-size:15px;letter-spacing:0;color:var(--muted);font-weight:400}
.plan .was{font-size:13px;color:var(--muted);margin:0 0 18px}
.plan ul{padding-left:18px;margin:14px 0 0;color:var(--muted);font-size:15px}
.plan li{margin:9px 0}
.day-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:36px}
.day{border-top:2px solid var(--green);padding-top:20px}
.day h3{font-size:16px;margin:10px 0 8px}
.day p{font-size:14px;margin:0;color:var(--muted)}
.limits{border:1px solid var(--line);border-radius:9px;padding:28px 30px;margin-top:40px;background:var(--sunk)}
.limits p{max-width:78ch}
.limits h3{max-width:78ch;margin:0 0 14px;font-size:18px}
.limits li{max-width:78ch;margin:10px 0;color:var(--muted);font-size:15px}
.trial-band{background:var(--offer-soft);border-top:1px solid var(--offer-line);border-bottom:1px solid var(--offer-line)}
.trial-inner{display:flex;align-items:center;justify-content:space-between;gap:34px;padding:34px 0;flex-wrap:wrap}
.trial-inner h2{font-size:clamp(23px,2.2vw,31px);margin:0 0 8px}
.trial-inner p{margin:0;max-width:620px}
.trial-inner .eyebrow{color:var(--offer-line);margin-bottom:14px}
.trial-note{font-size:13px;color:var(--muted);margin-top:12px!important}
.contact-section{padding:80px 0;background:var(--sunk)}
.contact-inner{display:flex;justify-content:space-between;align-items:center;gap:60px}
.contact-inner p:not(.eyebrow){max-width:580px;font-size:14px}
.button.light{background:var(--button-bg);color:var(--button-ink);white-space:nowrap}
.site-footer{padding:40px 0;background:var(--paper)}
.footer-top,.footer-bottom{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.footer-top{padding-bottom:30px;border-bottom:1px solid var(--line)}
.footer-top p{font-size:12px;color:var(--muted)}
.footer-top>a:last-child{font-size:12px;margin-left:auto}
.footer-bottom{margin-top:25px;font-size:10px;color:var(--muted)}
.footer-bottom span{margin-right:auto}
.product-hero{padding:85px 0 65px}
.product-hero h1{font-size:clamp(40px,5vw,68px)}
.product-jumps{display:flex;gap:28px;flex-wrap:wrap;margin-top:35px}
.product-jumps a{font-size:13px;text-decoration:none;border-bottom:1px solid var(--green);padding-bottom:8px}
.product-detail{border-top:1px solid var(--line);padding:80px 0}
.product-detail:nth-child(odd){background:var(--surface)}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}
.detail-grid .button{margin-top:20px}
.detail-spec dl{margin:0}
.detail-spec dt{font-size:10px;color:var(--green);font-weight:700;letter-spacing:1px}
.detail-spec dd{font-size:14px;color:var(--muted);line-height:1.65;margin:9px 0 24px}
.scope-note{max-width:78ch;font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px}
@media(max-width:1050px){.day-grid{grid-template-columns:1fr 1fr 1fr}.shell{width:calc(100% - 48px)}
.nav-row{gap:22px;flex-wrap:wrap;padding:18px 0}
nav{gap:18px}
.hero{gap:28px}
.hero-visual{padding:20px}
h1{font-size:40px}
.flow-line span{padding:10px}
.product-card{padding:22px}
.product-card h3{font-size:20px}
.overview-grid,.proof-grid{gap:40px}
.detail-grid{gap:50px}
.login{padding-left:14px}
}
@media(max-width:760px){.plan-grid{grid-template-columns:1fr}.day-grid{grid-template-columns:1fr}.shell{width:calc(100% - 36px)}
.nav-row{gap:17px}
.brand .mark{width:178px}
.nav-row nav{order:3;width:100%;justify-content:space-between;gap:12px}
.login{margin-left:auto;border:0;padding:0}
nav a{font-size:11px}
.hero{grid-template-columns:1fr;padding:48px 0;gap:36px}
h1{font-size:clamp(31px,7.5vw,46px);letter-spacing:-1.5px}
.hero .lead{font-size:16px}
.hero-visual{transform:none;max-width:520px;width:100%}
.hero-note{font-size:10px}
.actions{gap:22px}
.audience-strip .shell{gap:16px 22px}
.audience-strip span{width:100%}
.audience-strip strong{font-size:11px}
.section{padding:55px 0}
.section-heading{display:block}
.product-grid,.steps-grid,.overview-grid,.proof-grid,.detail-grid{grid-template-columns:1fr}
.product-grid{gap:15px}
.product-card{padding:26px}
.product-card h3{font-size:24px}
.deliverable{padding-top:20px}
.overview-section,.proof-section,.contact-section{padding:52px 0}
.overview-grid{gap:30px}
.steps-grid{gap:25px}
.contact-inner{display:block}
.contact-inner .button{margin-top:20px}
.footer-top>a:last-child{margin-left:0}
.footer-bottom{gap:18px}
.footer-bottom span{width:100%}
.product-hero{padding:48px 0}
.product-detail{padding:50px 0}
.detail-grid{gap:40px}
.product-jumps{gap:20px}
.product-hero h1{font-size:43px}
h2{font-size:31px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}


/* Match the original site palette and system theme preference. */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink:#EAF1ED;--paper:#121A18;--surface:#1E2927;--card:#1E2927;--sunk:#182220;--line:#31403C;--muted:#9FB3AC;--green:#4ACFAB;--deep:#18211F;--good-soft:rgba(0,168,135,.13);--bad-soft:rgba(229,72,77,.09);--bad:#FF8A8A;--bad-line:#FF6B6B;color-scheme:dark;}}
:root[data-theme="dark"]{--ink:#EAF1ED;--paper:#121A18;--surface:#1E2927;--card:#1E2927;--sunk:#182220;--line:#31403C;--muted:#9FB3AC;--green:#4ACFAB;--deep:#18211F;--good-soft:rgba(0,168,135,.13);--bad-soft:rgba(229,72,77,.09);--bad:#FF8A8A;--bad-line:#FF6B6B;color-scheme:dark;}

/* The site's layout: dense cards on a lifted ground. Tried on the home first,
   then adopted everywhere so a visitor crossing between pages sees one product. */
.section{padding:54px 0}
.section-heading{display:block;margin-bottom:26px}
.section-heading>:first-child{max-width:none}
.section-heading h2{font-size:clamp(24px,2.1vw,30px);margin:0 0 8px;letter-spacing:-.03em}
.section-heading h2 br{display:none}
.section-heading p{max-width:74ch;font-size:15px;margin:0}
.eyebrow{margin-bottom:10px;font-size:11px}
.hero{padding:48px 0 30px;align-items:start}
.hero h1{font-size:clamp(34px,3.4vw,50px);margin-bottom:18px}
.lead{font-size:17px}
.actions{margin-top:22px}
.audience-strip .shell{padding:16px 0}

.card-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:22px 24px;display:flex;flex-direction:column;gap:9px}
.card h3{font-size:16.5px;margin:0;letter-spacing:-.01em}
.card p{font-size:14.5px;margin:0;color:var(--muted);max-width:60ch}
.card .text-link{margin-top:auto;padding-top:12px;font-size:14px}
.chip{width:34px;height:34px;border-radius:9px;background:var(--sunk);border:1px solid var(--line);display:grid;place-items:center;font-size:15px;color:var(--green);margin-bottom:3px}
.badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.09em;padding:3px 7px;border-radius:4px;background:var(--sunk);color:var(--green);margin-right:8px;vertical-align:2px}
.card-note{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:11px;margin:4px 0 0}
.card-note strong{color:var(--ink);font-weight:600}

/* The two prose blocks become cards as well, so nothing on the page floats loose. */
.prose-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:26px 28px}
.prose-card p{max-width:74ch;font-size:15px}
.prose-card p:last-of-type{margin-bottom:0}
.prose-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:860px){.prose-grid{grid-template-columns:1fr}}

/* Elevation the right way up, on the page that opts in.
   The cards were darker than the ground they sat on, so nothing read as raised and
   the whole page went flat. Here the ground is lifted off pure black and given a
   blue-green cast, and every card sits a step above it. */

/* Painted on the section itself: a pseudo-element behind it disappeared under the
   page background, which has no stacking context of its own to sit above. */
/* On the page rather than the section: .hero carries .shell, so a background there
   stopped at the 1200px column and drew a visible rectangle across the top. */
body{background:
  radial-gradient(1200px 520px at 22% -80px,rgba(0,168,135,.20),transparent 70%) no-repeat,
  radial-gradient(900px 420px at 86% -140px,rgba(74,207,171,.10),transparent 68%) no-repeat,
  var(--paper)}
.card,.prose-card,.product-card,.hero-visual{
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -30px #000}
.site-header{background:var(--card);border-bottom-color:var(--line)}
.audience-strip{background:var(--sunk)}
.trial-band{background:linear-gradient(90deg,rgba(0,168,135,.16),rgba(0,168,135,.05))}
.text-link{color:var(--green)}
.chip{background:rgba(0,168,135,.14);border-color:rgba(0,168,135,.32);color:#6FE3C4}
.number{color:var(--green)}