/* Playgrounds — shared styles for SEO/content pages. Landing page keeps its own inline CSS. */
:root{--bone:#F7F2E9; --linen:#F4EEE1; --sand:#ECE3D2; --stone:#7E7361; --ink2:#6F6557; --bark:#2C2A22;
--forest:#182D09; --moss:#3D5E24; --leaf:#5C8A3A; --sage:#A9C195; --wash:rgba(61,94,36,.10);
--hair:rgba(44,42,34,.12); --char:#1E1F1B}
/* --ink2 is the AA-safe secondary for body-adjacent text on light; --stone stays for large/decorative only */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Hanken Grotesk',system-ui,sans-serif; background:var(--bone); color:var(--bark); line-height:1.6}
.wrap{max-width:1180px; margin:0 auto; padding:0 40px}
.mono{font-family:'Geist Mono',ui-monospace,monospace}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--moss); outline-offset:3px; border-radius:4px}

nav{position:sticky; top:0; z-index:40; background:rgba(247,242,233,.88); -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%); border-bottom:1px solid var(--hair)}
nav .wrap{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:64px; gap:26px}
nav img{height:28px; display:block}
nav a{font-size:13.5px; color:var(--bark); opacity:.85; text-decoration:none; transition:opacity .3s}
nav a:hover{opacity:1}
nav .logo{justify-self:start}
nav .navlinks{display:flex; align-items:center; justify-content:center; gap:26px}
nav .navcta{display:inline-flex; align-items:center; justify-content:flex-end; gap:8px; justify-self:end}
.btn{display:inline-flex; align-items:center; gap:.5em; font-size:14px; font-weight:500; border-radius:999px;
padding:.6em 1.35em; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:transform .3s, box-shadow .3s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--forest); color:var(--bone); box-shadow:0 4px 16px rgba(24,45,9,.18)}
.btn.ghost{border-color:var(--hair); color:var(--bark); background:transparent}

.page{padding:72px 0 96px}
.page .wrap{max-width:820px}
.crumbs{font-family:'Geist Mono',ui-monospace,monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink2); margin-bottom:34px}
.crumbs a{color:var(--moss); text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.eyebrow{font-family:'Geist Mono',ui-monospace,monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--moss); margin-bottom:16px; display:flex; align-items:center; gap:12px}
.eyebrow::after{content:''; flex:0 0 44px; height:1px; background:var(--hair)}
h1{font-weight:600; font-size:clamp(30px,4.2vw,42px); letter-spacing:-.03em; line-height:1.12}
h1 em{font-style:normal; color:var(--forest)}
.lead{margin-top:16px; font-size:16.5px; color:var(--ink2); max-width:58ch}
article h2{font-weight:600; font-size:clamp(21px,2.6vw,27px); letter-spacing:-.02em; margin:52px 0 14px}
article h3{font-weight:600; font-size:16.5px; margin:26px 0 8px}
article p{font-size:15.5px; max-width:68ch; margin-bottom:14px}
article ul{margin:0 0 14px 1.2em; max-width:66ch}
article li{font-size:15.5px; margin-bottom:8px}
article li b{font-weight:600}
article a{color:var(--moss); text-decoration:underline; text-decoration-color:rgba(61,94,36,.35); text-underline-offset:3px}
article a:hover{text-decoration-color:var(--moss)}

.steps{counter-reset:step; display:grid; gap:0; margin:22px 0 8px; border-top:1px solid var(--hair)}
.step{counter-increment:step; display:grid; grid-template-columns:64px 1fr; gap:18px; padding:22px 0; border-bottom:1px solid var(--hair)}
.step::before{content:'0' counter(step); font-family:'Geist Mono',ui-monospace,monospace; font-size:12px; letter-spacing:.14em; color:var(--moss); padding-top:4px}
.step b{display:block; font-size:16.5px; font-weight:600; margin-bottom:4px}
.step p{margin:0}

.callout{background:var(--linen); border:1px solid var(--hair); border-radius:14px; padding:22px 26px; margin:22px 0}
.callout p{margin:0}
.callout .punch{font-weight:600; color:var(--forest)}

figure.mock{background:rgba(255,255,255,.45); border:1px solid var(--hair); border-radius:16px; padding:22px; margin:30px 0}
.mockbar{display:flex; gap:5px; margin-bottom:16px}
.mockbar i{width:7px; height:7px; border-radius:99px; background:var(--sand)}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.kpi{background:var(--linen); border:1px solid var(--hair); border-radius:10px; padding:12px 14px}
.kpi .kl{font-family:'Geist Mono',ui-monospace,monospace; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink2)}
.kpi .kv{font-size:19px; font-weight:600; letter-spacing:-.02em; margin-top:3px}
.mrows{margin-top:14px; display:grid; gap:8px}
.mrow{display:grid; grid-template-columns:130px 1fr; align-items:center; gap:12px}
.mrow .ml{font-family:'Geist Mono',ui-monospace,monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2)}
.mrow .mb{height:8px; border-radius:99px; background:var(--wash); overflow:hidden}
.mrow .mb i{display:block; height:100%; border-radius:99px; background:var(--leaf)}
figcaption{font-family:'Geist Mono',ui-monospace,monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink2); margin-top:14px}

.faq{margin-top:10px; border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair); padding:2px 0}
.faq summary{font-size:15.5px; font-weight:600; padding:16px 0; cursor:pointer; list-style-position:outside}
.faq p{font-size:15px; max-width:66ch; margin:0 0 16px; color:var(--bark)}

/* why not just chatgpt (about page) */
.vs{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:22px 0 8px}
.vscard{border:1px solid var(--hair); border-radius:16px; background:rgba(255,255,255,.65); padding:26px}
.vscard .sh{font-family:'Geist Mono',ui-monospace,monospace; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); margin-bottom:12px}
.vscard .sh img{height:16px; display:block}
.vscard p{font-size:14px; color:var(--stone); line-height:1.65; margin:0}
.vscard.hot{background:var(--wash); border-color:var(--moss)}
.vscard.hot .sh{color:var(--moss)}
.vscard.hot p{color:var(--bark)}

/* tiles (agent automation page) */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:22px 0 8px}
.tile{border:1px solid var(--hair); border-radius:14px; background:rgba(255,255,255,.65); padding:20px; transition:transform .3s, box-shadow .3s}
.tile:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(24,45,9,.08)}
.tile .cat{font-family:'Geist Mono',ui-monospace,monospace; font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--moss); margin-bottom:8px}
.tile h3{font-weight:600; font-size:16.5px; margin-bottom:4px}
.tile p{font-size:13px; color:var(--stone); margin:0}
.tilesfoot{margin-top:10px; font-size:16.5px; font-weight:500; color:var(--bark); max-width:64ch}

.ctaband{background:var(--forest); color:#F0EADD; border-radius:18px; padding:38px 40px; margin:56px 0 8px}
.ctaband p{font-size:16px; max-width:56ch; margin:8px 0 22px; color:rgba(240,234,221,.8)}
.ctaband b{font-size:21px; font-weight:600; letter-spacing:-.02em}
.ctaband .btn.primary{background:var(--sage); color:var(--char); box-shadow:none}
.ctaband .btn.ghost{border-color:rgba(240,234,221,.3); color:#F0EADD}
.related{margin-top:34px}
.related .rt{font-family:'Geist Mono',ui-monospace,monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink2); margin-bottom:10px}
.related a{display:block; width:fit-content; font-size:14.5px; color:var(--moss); text-decoration:none; padding:4px 0}
.related a:hover{text-decoration:underline}

footer{background:var(--char); margin-top:80px; padding:44px 0 34px; font-family:'Geist Mono',ui-monospace,monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase}
footer .fcols{display:flex; flex-wrap:wrap; gap:56px}
footer .fcol{display:grid; gap:9px; align-content:start}
footer .fcol b{color:rgba(247,242,233,.85); font-weight:500; margin-bottom:3px}
footer .fcol a{color:rgba(240,234,221,.68); text-decoration:none}
footer .fcol a:hover{color:var(--bone)}
footer .fbar{display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:36px; padding-top:24px; border-top:1px solid rgba(247,242,233,.15); color:rgba(247,242,233,.55)}
footer .fbar img{height:15px}
footer .fbar a{color:inherit; text-decoration:none}
footer .fbar a:hover{color:var(--bone)}

@media(max-width:960px){nav .wrap{gap:18px} nav .navlinks{gap:18px} .tiles{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
nav .navlinks{display:none}
.wrap{padding:0 22px}
.page{padding:48px 0 72px}
.kpis{grid-template-columns:1fr 1fr}
.step{grid-template-columns:44px 1fr; gap:12px}
.ctaband{padding:28px 24px}
footer .fcols{gap:32px}
footer .fbar{flex-direction:column; align-items:flex-start; gap:12px}
.vs,.tiles{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}

/* condensed nav — Platform dropdown (2026-08 restructure) */
nav .navdrop{position:relative; display:inline-flex}
nav .drophost{position:absolute; left:50%; transform:translateX(-50%); top:100%; padding-top:12px; display:none}
nav .navdrop:hover .drophost,nav .navdrop:focus-within .drophost{display:block}
nav .dropmenu{min-width:210px; display:flex; flex-direction:column; padding:8px; background:rgba(247,242,233,.97);
border:1px solid var(--hair); border-radius:14px; box-shadow:0 16px 36px rgba(44,42,34,.14)}
nav .dropmenu a{padding:9px 12px; border-radius:8px; font-size:13.5px}
nav .dropmenu a:hover{background:var(--wash); opacity:1}

/* visible placeholder blocks — draft-only content slots, never publish filled-in */
.placeholder{border:1.5px dashed rgba(44,42,34,.4); border-radius:14px; padding:22px 24px; margin:18px 0;
background:repeating-linear-gradient(-45deg, rgba(44,42,34,.035) 0 12px, transparent 12px 24px)}
.placeholder .ph-tag{display:inline-block; font-family:'Geist Mono',ui-monospace,monospace; font-size:9px; letter-spacing:.16em;
text-transform:uppercase; color:#8A5A1E; background:rgba(196,138,53,.14); border:1px solid rgba(196,138,53,.4);
border-radius:99px; padding:3px 10px; margin-bottom:10px}
.placeholder p{font-size:13.5px; color:var(--ink2); margin:0; max-width:62ch}

/* stat panels — big number, small caption underneath */
.statrow{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:22px 0 8px}
.stat{background:var(--char); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:22px 20px}
.stat b{display:block; font-size:clamp(24px,3vw,32px); font-weight:600; letter-spacing:-.02em; color:var(--sage)}
.stat span{display:block; font-family:'Geist Mono',ui-monospace,monospace; font-size:9.5px; letter-spacing:.12em;
text-transform:uppercase; color:rgba(240,234,221,.65); margin-top:6px}
@media(max-width:640px){.statrow{grid-template-columns:1fr}}

/* pricing cards (services & plans page) — mirrors the homepage: one light treatment for
   every card, the dark green arrives on hover */
.price{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:26px 0 8px}
.pcard{border:1px solid var(--hair); border-radius:16px; background:rgba(255,255,255,.7); padding:24px; display:flex; flex-direction:column;
transition:background .32s ease, border-color .32s ease, color .32s ease, box-shadow .32s ease, transform .32s ease}
.pcard:hover{background:var(--forest); color:var(--bone); border-color:var(--forest); box-shadow:0 22px 50px rgba(24,45,9,.22); transform:translateY(-3px)}
.pcard .t{font-family:'Geist Mono',ui-monospace,monospace; font-size:14px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px; color:var(--moss)}
.pcard:hover .t{color:var(--sage)}
.pcard .who{font-size:12px; color:var(--stone); margin-bottom:12px}
.pcard:hover .who{color:var(--sage)}
.pcard .n{font-weight:600; font-size:27px; letter-spacing:-.02em}
.pcard .n small{font-size:12px; font-weight:400; color:var(--stone); letter-spacing:0}
.pcard:hover .n small{color:var(--sage)}
.pcard .d{font-size:13px; color:var(--stone); margin:8px 0 14px}
.pcard:hover .d{color:var(--sage)}
.pcard ul{list-style:none; border-top:1px solid var(--hair); padding-top:12px; margin:auto 0 0}
.pcard:hover ul{border-color:rgba(247,242,233,.15)}
.pcard:hover .btn.ghost{border-color:rgba(247,242,233,.4); color:var(--bone)}
.pcard:hover .btn.ghost:hover{border-color:var(--bone)}
.pcard:hover .btn.primary{background:var(--sage); color:var(--char); box-shadow:none}
.pcard li{font-size:12px; color:var(--stone); padding:3.5px 0 3.5px 16px; position:relative; margin:0}
.pcard:hover li{color:var(--sage)}
.pcard li::before{content:'·'; position:absolute; left:2px; color:var(--leaf); font-weight:700}
.pcard:hover li::before{color:var(--sage)}
.pcard .n s{font-size:19px; font-weight:500; color:var(--stone); margin-right:8px; text-decoration:line-through; text-decoration-thickness:2.5px; text-decoration-color:var(--bark)}
.pcard:hover .n s{color:var(--sage); text-decoration-color:rgba(247,242,233,.9)}
.ltc{display:inline-block; margin-top:10px; font-family:'Geist Mono',ui-monospace,monospace; font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--moss); border:1px solid var(--hair); border-radius:99px; padding:3px 9px}
.pcard:hover .ltc{color:var(--sage); border-color:rgba(247,242,233,.25)}
.pcard .btn{margin-top:14px; justify-content:center; font-size:13px}
/* touch devices have no hover — keep the recommended plan visibly marked there */
@media(hover:none){
.pcard.hot{background:var(--forest); color:var(--bone); border-color:var(--forest); box-shadow:0 22px 50px rgba(24,45,9,.22)}
.pcard.hot .t,.pcard.hot .who,.pcard.hot .d,.pcard.hot li,.pcard.hot .n small,.pcard.hot .n s,.pcard.hot .ltc{color:var(--sage)}
.pcard.hot ul{border-color:rgba(247,242,233,.15)}
.pcard.hot .btn.ghost{border-color:rgba(247,242,233,.4); color:var(--bone)}
.pcard.hot .btn.primary{background:var(--sage); color:var(--char); box-shadow:none}
}
@media(max-width:960px){.price{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.price{grid-template-columns:1fr}}

/* security feature cards (security page) — mirrors the homepage security styles */
.seccards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:26px 0 8px}
.scard{border:1px solid var(--hair); border-radius:14px; background:rgba(255,255,255,.65); padding:20px}
.scard .sh{font-family:'Geist Mono',ui-monospace,monospace; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--moss); margin-bottom:10px}
.scard b{display:block; font-size:14.5px; font-weight:600; margin-bottom:4px}
.scard p{font-size:13px; color:var(--stone); margin:0}
@media(max-width:960px){.seccards{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.seccards{grid-template-columns:1fr}}

/* plain-english data-layer diagram (data page) */
.diagram{margin:26px 0 8px; text-align:center}
.dg-row{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.dg-chip{border:1px solid var(--hair); border-radius:99px; background:rgba(255,255,255,.65); padding:.45em 1em;
font-family:'Geist Mono',ui-monospace,monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2)}
.dg-arrow{font-family:'Geist Mono',ui-monospace,monospace; color:var(--moss); font-size:15px; margin:8px 0}
.dg-core{display:inline-block; background:var(--forest); color:var(--bone); border-radius:14px; padding:16px 30px; font-weight:600; font-size:16px}
.dg-core span{display:block; font-family:'Geist Mono',ui-monospace,monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--sage); margin-top:5px; font-weight:400}
.dg-cap{font-family:'Geist Mono',ui-monospace,monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink2); margin-top:14px}

/* numbered how-it-works blocks with animation slots */
.hiw{margin:36px 0 0}
.hiw .n{font-family:'Geist Mono',ui-monospace,monospace; font-size:10px; letter-spacing:.16em; color:var(--moss); text-transform:uppercase; margin-bottom:8px}

/* footer: hide the Learn column on content pages (requested 2026-08-26).
   Matched by the links it contains, not by position — the column sits third on
   some pages and second on others. Links stay in the markup so crawlers still
   reach the glossary pages; they are just not shown. */
footer .fcol:has(a[href^="/learn/"]){display:none}

/* mobile navigation — burger + drop panel, matching the homepage (2026-08-26).
   Content pages always sit on the cream nav, so this is the homepage's "lit" palette. */
nav .navburger{display:none; flex-direction:column; justify-content:center; align-items:center; gap:4px;
width:34px; height:34px; flex:0 0 auto; border:1px solid var(--hair); border-radius:8px; background:transparent; cursor:pointer; padding:0}
nav .navburger span{display:block; height:2px; width:16px; background:var(--bark); border-radius:2px; transition:transform .25s ease, opacity .25s ease}
nav .navburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
nav .navburger[aria-expanded="true"] span:nth-child(2){opacity:0}
nav .navburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav{display:none; position:absolute; top:calc(100% + 10px); right:24px; left:auto; width:220px;
flex-direction:column; gap:2px; padding:8px 16px 16px; background:rgba(247,242,233,.97);
-webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
border:1px solid var(--hair); border-radius:14px; box-shadow:0 16px 36px rgba(44,42,34,.14)}
.mnav.open{display:flex}
.mnav a{color:var(--bark); font-size:14px; text-decoration:none; padding:11px 2px; border-bottom:1px solid rgba(44,42,34,.1); opacity:.9}
.mnav a:last-child{border-bottom:0}
.mnav a:hover{color:var(--forest); opacity:1}
/* homepage switches to the burger at 760px — match it here rather than at 640px */
@media(max-width:760px){
nav .navlinks{display:none}
nav .navburger{display:flex}
nav .navcta{gap:6px}
nav .navcta .btn{padding:.5em 1.1em; font-size:12.5px}
}

/* ============================================================
   Editorial theme alignment (2026-09-16): content pages now match the
   redesigned homepage — Playfair Display headlines, the same cream/ink
   palette, squared buttons, and the light footer. Overrides only; the
   original rules above are untouched. */
:root{--bone:#FBFAF7; --linen:#F3F2ED; --bark:#1B1A17; --hair:rgba(27,26,23,.12)}
body{line-height:1.65}
h1,article h2{font-family:'Playfair Display',Georgia,'Times New Roman',serif; font-weight:400; font-optical-sizing:auto; font-synthesis:none}
h1{font-size:clamp(36px,4.8vw,54px); line-height:1.12; letter-spacing:-.025em}
h1 em{font-style:normal; color:var(--forest)}
article h2{font-size:clamp(26px,3.2vw,36px); letter-spacing:-.02em; line-height:1.2}
.lead{font-size:17px; line-height:1.75; color:#4A4841}
nav{background:rgba(248,245,238,.97)}
nav .wrap{height:76px}
nav a{color:var(--bark)}
.btn{border-radius:6px}
.btn:hover{transform:none}
.callout,.vscard,.tile,figure.mock,.scard,.pcard,.kpi,.stat,.ctaband{border-radius:10px}
.ctaband b{font-family:'Playfair Display',Georgia,serif; font-weight:400; font-size:25px; letter-spacing:-.01em}
.pcard .t{font-family:'Playfair Display',Georgia,serif; font-size:22px; font-weight:400; letter-spacing:-.01em; text-transform:capitalize}
.pcard .n{font-family:'Playfair Display',Georgia,serif; font-weight:400; font-size:30px}
/* Light footer, matching the homepage close band */
footer{background:#F4F2EE; border-top:1px solid rgba(27,26,23,.14); padding:48px 0 32px; font-family:'Hanken Grotesk',system-ui,sans-serif; font-size:13px; letter-spacing:0; text-transform:none; color:#4A4841}
footer .fcols{gap:40px 56px}
footer .fcol{gap:10px}
footer .fcol b{color:#1B1A17; font-family:'Playfair Display',Georgia,serif; font-weight:400; font-size:16px; letter-spacing:0; text-transform:none}
footer .fcol a{color:#4A4841}
footer .fcol a:hover{color:#1B1A17}
footer .fbar{border-top:1px solid rgba(27,26,23,.14); color:#8A867C}
footer .fbar img{filter:brightness(0)}
footer .fbar a:hover{color:#1B1A17}
@media(max-width:640px){h1{font-size:clamp(32px,9vw,42px)}}

/* ============================================================
   Homepage system alignment (2026-09-17). The homepage sets the system:
   light tan base, darker tan for closing/footer bands, white cards,
   Playfair for h1/h2 only, Hanken Grotesk 500 for every smaller heading,
   Geist Mono labels in warm grey, and 4px squared buttons.
   Overrides only — nothing above is removed. */

/* Palette */
:root{
  --bone:#F4F2EE;        /* page base — the homepage light tan */
  --tan:#E8E6DD;         /* darker tan: closing band, footer, pricing */
  --linen:#F7F6F3;       /* inner panels */
  --card:#FFFFFF;
  --bark:#1B1A17;        /* ink */
  --ink2:#4A4841;        /* secondary copy */
  --mute:#8A867C;        /* labels, captions */
  --hair:rgba(27,26,23,.12);
  --char:#151614;        /* dark bands, matching the homepage */
  --moss:#3D5E24;
}
body{background:var(--bone); color:var(--bark); font-size:16px; line-height:1.65}

/* Type hierarchy: serif for the page title and section heads, sans for the rest */
h1{font-size:clamp(36px,4.6vw,52px); line-height:1.12; letter-spacing:-.03em}
article h2{font-size:clamp(28px,3.4vw,40px); line-height:1.18; letter-spacing:-.025em; margin:56px 0 16px}
article h3,.step b,.tile h3,.scard b,.vscard b,.faq summary,.sechead,.osband h2,.ctaband b,.pcard .t{
  font-family:'Hanken Grotesk',system-ui,sans-serif; font-weight:500; letter-spacing:-.01em}
article h3{font-size:19px; margin:30px 0 8px}
.sechead{font-size:26px; line-height:1.25; margin:56px 0 6px}
.lead,.sechead + .sub{font-size:18px; line-height:1.75; color:var(--ink2); max-width:60ch}
article p,article li,.faq p{font-size:16px; line-height:1.7; color:var(--ink2)}
article li b,.step b{color:var(--bark)}
article a{color:var(--moss); text-decoration-color:rgba(61,94,36,.4)}

/* Labels: one mono treatment in warm grey */
.crumbs,.eyebrow,figcaption,.related .rt,.tile .cat,.kpi .kl,.mrow .ml,.dg-chip,.dg-cap,.vscard .sh,.scard .sh{
  color:var(--mute); letter-spacing:.14em}
.crumbs a{color:var(--bark); text-decoration:none}
.eyebrow{font-size:11px}
.eyebrow::after{display:none}

/* Buttons: the homepage's squared 4px button, at one size */
.btn{min-height:46px; padding:12px 23px; border-radius:4px; font:500 14px/1.35 'Hanken Grotesk',system-ui,sans-serif;
  box-shadow:none; gap:.5em}
.btn.primary{background:var(--bark); color:#FBFAF7; border-color:var(--bark); box-shadow:none}
.btn.primary:hover{background:#000}
.btn.ghost{border-color:var(--bark); color:var(--bark); background:transparent}
.btn.ghost:hover{background:rgba(27,26,23,.04)}
nav .navcta .btn{min-height:38px; padding:8px 16px; font-size:12px}

/* Chrome */
nav{background:rgba(244,242,238,.97); border-bottom:1px solid var(--hair);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
nav a{opacity:1}
nav .dropmenu,.mnav{background:var(--bone); border-radius:6px; box-shadow:0 12px 26px rgba(27,26,23,.08);
  -webkit-backdrop-filter:none; backdrop-filter:none}
.page{padding:88px 0 96px}

/* Surfaces: white cards on tan, hairline borders, no lift */
.callout,figure.mock,.vscard,.tile,.scard,.pcard,.dg-chip{background:var(--card); border-color:var(--hair)}
.kpi,.pcard ul{background:var(--linen); border-color:var(--hair)}
.tile:hover{transform:none; box-shadow:none; border-color:rgba(27,26,23,.3)}
.pcard:hover{transform:none}

/* Plan cards: sans plan names, serif price, as on the homepage */
.pcard .t{font-size:24px; text-transform:capitalize; color:var(--bark)}
.pcard:hover .t{color:#FBFAF7}
.pcard .n{font-family:'Playfair Display',Georgia,serif; font-weight:400; font-size:30px}

/* Closing CTA band: the homepage's darker tan, ink copy, dark button */
.ctaband{background:var(--tan); color:var(--bark); border:1px solid rgba(27,26,23,.14); padding:40px}
.ctaband b{font-family:'Playfair Display',Georgia,serif; font-weight:400; font-size:28px; letter-spacing:-.02em; color:var(--bark)}
.ctaband p{color:var(--ink2)}
.ctaband .btn.primary{background:var(--bark); color:#FBFAF7; border-color:var(--bark)}
.ctaband .btn.ghost{border-color:var(--bark); color:var(--bark)}

/* Dark bands (services OS band, stat panels) follow the homepage's near-black */
.osband,.stat{background:var(--char); border-color:rgba(255,255,255,.14)}
.osband .btn.primary,.osband .ospunch .btn.primary{background:#FFFFFF; color:var(--char); border-color:#FFFFFF}
.osband .btn.primary:hover,.osband .ospunch .btn.primary:hover{background:rgba(255,255,255,.86)}

/* Footer: darker tan, sans column heads, Compare hidden as on the homepage */
footer{background:var(--tan); border-top:1px solid rgba(27,26,23,.14); color:var(--ink2)}
footer .fcol b{font-family:'Hanken Grotesk',system-ui,sans-serif; font-weight:500; font-size:14px; color:var(--bark)}
footer .fcol:has(a[href^="/compare/"]){display:none}
@media(max-width:640px){.page{padding:56px 0 72px} .ctaband{padding:28px 24px} article h2{margin-top:44px}}

/* Ink headings, green as an accent only — the homepage rule. This also re-tints
   the sections ported from the homepage (how-it-works, data, agent-automation),
   which colour their headings and dark blocks from these two variables. */
:root{--forest:#1B1A17; --stone:#4A4841; --accent:#3D5E24}
h1 em{color:var(--accent)}
article a{color:var(--accent)}
.callout .punch{color:var(--bark)}

/* Plan cards stay light — the homepage marks the recommended plan with a dark
   button, not by inverting the whole card. */
.pcard:hover{background:var(--card); color:var(--bark); border-color:rgba(27,26,23,.3); box-shadow:none}
.pcard:hover .t,.pcard:hover .n,.pcard:hover .n small,.pcard:hover .n s,.pcard:hover .ltc{color:var(--bark)}
.pcard:hover .who,.pcard:hover .d,.pcard:hover li{color:var(--ink2)}
.pcard:hover ul{background:var(--linen); border-color:var(--hair)}
.pcard:hover li::before,.pcard .ltc{color:var(--accent)}
.pcard:hover .btn.ghost{border-color:var(--bark); color:var(--bark)}
.pcard.hot .btn{background:var(--bark); color:#FBFAF7; border-color:var(--bark)}
@media(hover:none){
.pcard.hot{background:var(--card); color:var(--bark); border-color:rgba(27,26,23,.3); box-shadow:none}
.pcard.hot .t,.pcard.hot .n small,.pcard.hot .n s,.pcard.hot .ltc{color:var(--bark)}
.pcard.hot .who,.pcard.hot .d,.pcard.hot li{color:var(--ink2)}
.pcard.hot ul{border-color:var(--hair)}
}

/* Learn pages: the page title stays serif; every sub-head below it is sans,
   so the article reads as one serif headline over sans section heads. */
body.learn article h2{font-family:'Hanken Grotesk',system-ui,sans-serif; font-weight:500; font-size:26px;
  line-height:1.3; letter-spacing:-.01em}
@media(max-width:640px){body.learn article h2{font-size:23px}}