@font-face{font-family:'Gilroy';src:url('fonts/gilroy-extrabold.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('fonts/plus-jakarta-sans.woff2') format('woff2');font-weight:200 800;font-display:swap}
html,body,button,input,select,textarea{font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif!important}
/* ===== Crode layer (Oct 2026) ===== */
:root{--c-dark:#022E13;--c-lime:#94D04A;--c-yellow:#FCEF7A;--c-light:#F5FFE6;--c-muted:#50715A;--c-line:#E1EBD3;--m-green:#022E13;--m-ink:#022E13;--m-grey:#50715A;--m-mint:#94D04A;--m-cream:#F5FFE6}
body{color:#022E13}
h1,h2,.display,h1.display,h2.display{font-family:'Plus Jakarta Sans',sans-serif!important;font-weight:700!important;letter-spacing:-.03em!important}
h1.display,h2.display{line-height:.98!important}
h1 .font-bold,h2 .font-bold,h1 .font-semibold,h2 .font-semibold,h1 span,h2 span{font-weight:800!important}
h3{font-family:'Plus Jakarta Sans',system-ui,sans-serif!important;font-weight:700!important;letter-spacing:-.015em}
.font-bold{font-weight:700!important}
p.display,.display.text-5xl,.display.text-6xl{font-family:'Plus Jakarta Sans',sans-serif!important}
::selection{background:#94D04A;color:#022E13}
a.rounded-full[class*="px-"],a.rounded-full[class*="pl-"],.nav-cta,.hz-cta,button.rounded-full[class*="px-"][class*="bg-brand"]{border-radius:16px!important}
.bg-canvas{background-color:#F5FFE6!important}
summary{font-family:'Plus Jakarta Sans',system-ui,sans-serif!important;font-weight:600!important}
/* Icons: only plus, arrow and search. No icon tiles. */
.svc-ic,.dd-ic{display:none!important}
.dd-item{padding-left:16px!important}
.cmpm,.cmpm-card{background:#022E13!important;color:#F5FFE6!important;border-color:rgba(245,255,230,.12)!important}
.cmpm .cmp-week,.cmpm-card .cmp-week{color:rgba(245,255,230,.8)!important}
.cmpm .cmp-week b,.cmpm-card .cmp-week b{color:#94D04A!important}
.cmpm .cmp-badge{background:transparent!important;color:#94D04A!important;padding:0!important;border:0!important}
span.flex.h-11.w-11:has(>svg),span.flex.h-10.w-10:has(>svg),.fmt-ico{display:none!important}
.cmp3-n{background:transparent!important;border:1.5px solid rgba(2,46,19,.25)}
.cmp3-y{background:#94D04A!important;color:#022E13!important}
a span.flex.h-10.w-10,button span.flex.h-10.w-10,a span.flex.h-11.w-11,button span.flex.h-11.w-11{display:flex!important}
header a.nav-cta.rounded-full,a.nav-cta[class*="px-"]{border-radius:10px!important}
#detail-output > div{display:none!important}
#detail-list .dot{display:none!important}
@media (min-width:640px){.orig-label{margin-bottom:20px!important}}
a span.dd-ic.flex.h-11.w-11,a span.dd-ic.flex.h-10.w-10,a span.svc-ic.flex,button span.svc-ic.flex,a span.dd-ic.flex{display:none!important}
.soon-tag{color:#4C8A1F!important}
/* footer: light green, joined to the final CTA on every page */
footer{background:#F5FFE6!important;border-top:0!important}
body:has(main>section:last-of-type>.bg-brand) footer{margin-top:0!important}
main>section:last-of-type:has(>.bg-brand){padding-bottom:0!important;max-width:none!important;background:linear-gradient(to bottom,transparent 0,transparent 55%,#F5FFE6 55%,#F5FFE6 100%)}
main>section:last-of-type:has(>.bg-brand)>.bg-brand{max-width:1392px;margin-left:auto;margin-right:auto}
/* mobile tap targets */

/* model picker: name sits under the photo as plain text */
.mc-card{overflow:visible!important}
.mc-card .mc-tag{position:static!important;background:none!important;padding:8px 2px 0!important;border-radius:0!important;box-shadow:none!important;font-size:13px!important;color:#56685B!important}
.mc-card[aria-checked="true"] .mc-tag{color:#022E13!important}
.mc-card .mh-check{display:none!important}
/* section headings: same scale as the home page */
main h2.display{font-size:28px!important;line-height:1.08!important}
@media (min-width:640px){main h2.display{font-size:30px!important}}
@media (min-width:1024px){main h2.display{font-size:32px!important}}
main h2 .h-thin{font-family:"Plus Jakarta Sans",sans-serif!important;font-weight:400!important;letter-spacing:-.03em!important}
/* services mega menu */
.mg-panel{position:fixed!important;left:50%!important;top:52px!important;transform:translateX(-50%)!important;width:min(1040px,calc(100vw - 48px))!important;padding-top:12px;z-index:60;visibility:hidden;opacity:0;transition:opacity .2s,visibility .2s}
.group:hover>.mg-panel,.group:focus-within>.mg-panel{visibility:visible;opacity:1}
.mg-wrap{display:grid;grid-template-columns:1fr 1.5fr;gap:0;background:#fff;border:1px solid #E6EDDC;border-radius:24px;padding:28px;box-shadow:0 30px 70px -40px rgba(2,46,19,.35);white-space:normal}
.mg-left{display:grid;gap:12px;padding-right:28px;border-right:1px solid #E6EDDC}
.mg-card{display:block;border:1px solid #E6EDDC;border-radius:16px;padding:16px 20px;text-decoration:none;transition:border-color .2s,background .2s}
.mg-card:hover{border-color:#022E13;background:#F5FFE6}
.mg-right{padding-left:28px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.mg-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px}
.mg-item{display:block;padding:10px 12px;border-radius:12px;text-decoration:none;transition:background .2s}
.mg-item:hover{background:#F5FFE6}
.mg-t{display:block;font-size:16px;font-weight:600;color:#022E13;letter-spacing:-.01em}
.mg-d{display:block;margin-top:3px;font-size:13.5px;color:#56685B;line-height:1.4}
.mg-t .soon-tag{font-size:12px;margin-left:6px}
.mg-band{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#F5FFE6;border-radius:16px;padding:16px 16px 16px 22px}
.mg-band span{font-size:15px;font-weight:600;color:#022E13}
.mg-btn{display:inline-flex;align-items:center;gap:8px;background:#022E13;color:#fff!important;border-radius:10px;padding:10px 16px;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.mg-btn:hover{background:#0B3D1C}
body.hz-over header.sticky .mg-panel a.mg-btn{color:#fff!important}
body.hz-over header.sticky .mg-panel .mg-t{color:#022E13!important}
body.hz-over header.sticky .mg-panel .mg-d{color:#56685B!important}
body.hz-over header.sticky .mg-panel .soon-tag{color:#4C8A1F!important}
body.hz-over header.sticky .mg-panel svg{color:#fff!important}
body.hz-over header.sticky .mg-panel a.mg-card{border-color:#E6EDDC!important}
body.hz-over header.sticky .mg-panel a.mg-card:hover{border-color:#022E13!important}

/* buttons: 6px corners everywhere */
a[class*="rounded-full"][class*="px-"],button[class*="rounded-full"][class*="px-"],a[class*="rounded-xl"][class*="px-"],button[class*="rounded-xl"][class*="px-"],a[class*="rounded-2xl"][class*="px-"],button[class*="rounded-2xl"][class*="px-"],
#top#top a.rounded-full[class*="px-"],#top#top a.hz-cta,#top#top a[class*="rounded-full"][class*="py-"],#top#top a[class*="px-6"],#top#top a[class*="px-7"],#top#top a[class*="px-8"],.pr-note.pr-note a,
header a.nav-cta.nav-cta.rounded-full,a.nav-cta.nav-cta,.mg-btn.mg-btn,.wb-btn.wb-btn,.es-btn,button[type="submit"]{border-radius:6px!important}

/* end scene: final CTA and footer on one textured image */
.end-scene{background:#0B2416 url(img/end-scene.jpg) center bottom/cover no-repeat;padding:clamp(110px,14vw,190px) 24px 40px;margin-top:clamp(64px,8vw,120px)}
body:has(.end-scene) main>section:last-of-type{margin-bottom:0}
.es-cta{max-width:820px;margin:0 auto;text-align:center;padding-bottom:clamp(140px,18vw,260px)}
.es-h{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;color:#fff;font-size:clamp(34px,4.6vw,60px);line-height:1.05;letter-spacing:-.02em;margin:0}
.es-h .h-thin{font-family:"Plus Jakarta Sans",sans-serif;font-weight:400}
.es-lime{color:#94D04A}
.es-p{margin:22px auto 0;max-width:560px;color:rgba(255,255,255,.78);font-size:16px;line-height:1.6}
.es-btns{margin-top:36px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.es-btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;font-size:15px;font-weight:600;text-decoration:none;transition:background .2s,color .2s}
.es-btn-w{background:#fff;color:#022E13}
.es-btn-w:hover{background:#FCEF7A}
.es-btn-d{background:#06200F;color:#fff;border:1px solid rgba(255,255,255,.14)}
.es-btn-d:hover{background:#022E13}
footer.es-foot{max-width:1200px;margin:0 auto;background:#06200F!important;border:0!important;border-radius:24px;color:#fff;overflow:hidden}
.es-cols{display:grid;grid-template-columns:repeat(3,1fr)}
.es-cols>div{padding:44px 40px 52px;border-right:1px solid rgba(255,255,255,.12)}
.es-cols>div:last-child{border-right:0}
.es-k{font-size:13px;color:rgba(255,255,255,.55);margin:0 0 22px}
.es-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.es-foot a{color:#fff;text-decoration:none;font-size:15px;transition:color .2s}
.es-foot ul a:hover,.es-legal a:hover{color:#94D04A}
.es-base{display:grid;grid-template-columns:1fr 320px;border-top:1px solid rgba(255,255,255,.12)}
.es-logo{display:flex;align-items:center;padding:56px 40px}
.es-mark{width:100%;max-width:640px;height:auto;color:#F5FFE6}
.es-side{border-left:1px solid rgba(255,255,255,.12);padding:44px 32px;display:flex;flex-direction:column}
.es-small{font-size:14px;line-height:1.6;color:rgba(255,255,255,.75);margin:0}
.es-legal{margin-top:auto;padding-top:40px;font-size:13px;color:rgba(255,255,255,.55);display:grid;gap:6px}
.es-legal p{margin:0}.es-legal a{font-size:13px;color:rgba(255,255,255,.55)}


/* ===== subpages: neutral design language (matches the home page) ===== */
.end-scene.es-short{padding-top:64px}
html body.nd{background:#fff!important;color:#1D1D1F}
html body.nd main{background:#fff}
html body.nd main :is(section,div).bg-white{background-color:#fff}
html body.nd main :is(.text-ink,.text-brand,.text-brand2,[class*="text-[#022E13]"]):not(.pc-feat *,.keep-dark *){color:#1D1D1F!important}
html body.nd main :is(.text-body,.text-mute,[class*="text-[#50715A]"],[class*="text-[#56685B]"]):not(.pc-feat *){color:#6E6E73!important}
html body.nd main :is(h1,h2,h3):not(.text-white):not(.bg-brand *):not(.bg-ink *):not(.pc-feat *):not([class*='bg-[#022E13]'] *){color:#1D1D1F}
html body.nd main h2 .h-thin,html body.nd main h1 .h-thin{color:#86868B!important}
html body.nd main :is(.border-line,.border-brand,.border-ink,[class*="border-brand/"],[class*="border-ink/"]):not(.pc-feat){border-color:#E3E3E8!important}
html body.nd main .divide-line>*{border-color:#E3E3E8!important}
html body.nd main .bg-line{background-color:#E3E3E8!important}
/* surfaces */
html body.nd main :is(.bg-canvas,[class*="bg-[#F5FFE6]"],[class*="bg-[#EEF7E2]"],[class*="bg-brand/"],.ph,.ph-flat):not(.pc-feat *){background-color:#F5F5F7!important}
html body.nd main :is(article,details,figure,a,div)[class*="rounded-"][class*="border"][class*="bg-white"]:not(.pc-feat){background:#F5F5F7!important;border-color:transparent!important;box-shadow:none!important}
html body.nd main [class*="shadow-["]:not(.pc-feat):not(img){box-shadow:none!important}
/* dark tiles: neutral black; featured plans stay the one dark green */
html body.nd main :is(.bg-brand,.bg-ink,[class*="bg-[#022E13]"]):not(.pc-feat):not(.hb):not(.cmpm):not(.cmp3-card):not(.cmpm *):not(.cmp3-card *){background-color:#1D1D1F!important}
html body.nd main .pc-feat{background:#022E13!important}
html body.nd main .hb{background:#022E13!important}
html body.nd main :is(.bg-brand,.bg-ink) [class*="text-[#94D04A]"]:not(.pc-feat *){color:#fff!important}
html body.nd main [class*="text-[#94D04A]"]:not(.pc-feat *):not(.bg-brand *):not(.bg-ink *){color:#1D1D1F!important}
/* buttons */
html body.nd main :is(a,button):is(.bg-brand,.bg-ink,[class*="bg-[#022E13]"]):not(.pc-feat *):not(.cmpm *):not(.cmp3-card *){background:#1D1D1F!important;color:#fff!important;border-color:#1D1D1F!important}
html body.nd main .pc-feat :is(a,button)[class*="bg-white"]{color:#022E13!important}
html body.nd header a.nav-cta.nav-cta{background:#1D1D1F!important;color:#fff!important}
html body.nd .soon-tag{color:#4C8A1F!important}
/* round side of everything a bit softer */
html body.nd main :is(.rounded-\[28px\],.rounded-\[36px\]){border-radius:28px!important}

html body.nd main :is(.bg-brand,.bg-ink,.pc-feat,[class*="bg-[#022E13]"]) :is(h1,h2,h3,h4,p,span,li).text-white{color:#fff!important}
html body.nd main :is(.bg-brand,.bg-ink,.pc-feat) :is(h1,h2,h3){color:#fff}
html body.nd main :is(.price-tab,.bill-tab,.mc-chip,.mc-pill,[class*="chip"]).active{background:#1D1D1F!important;color:#fff!important;border-color:#1D1D1F!important}
html body.nd main [aria-pressed="true"]:is(button){background:#1D1D1F!important;color:#fff!important;border-color:#1D1D1F!important}
html body.nd main :is(div,li,article,details)[class*="rounded-"].border:not(.pc-feat):not(form *):not(.bg-brand):not(.bg-ink){background-color:#F5F5F7!important;border-color:transparent!important}
/* pricing compare: Crode column keeps brand green */
html body.nd main :is(.cmpm,.cmp3-card).keep-light{background-color:#022E13!important}
html body.nd main :is(.cmpm,.cmp3-card) span[class*="bg-[#022E13]"]{background-color:#94D04A!important;color:#022E13!important}
html body.nd main :is(.cmpm,.cmp3-card) a[class*="bg-"]{background:#fff!important;color:#022E13!important}
html body.nd main :is(.cmpm,.cmp3-card) :is(p,span,h3,h4):not([class*="94D04A"]):not([class*="bg-"]){color:#F5FFE6}

/* shared from home */
/* how it works: expanding cards */
.hx{display:flex;gap:16px;margin-top:48px;height:520px}
.hx-card{flex:1 1 0;min-width:0;background:#F5F5F7;border-radius:28px;padding:32px 32px 0;display:flex;flex-direction:column;overflow:hidden;cursor:pointer;transition:flex-grow .5s ease,background .3s;outline:none}
.hx-card.on{flex-grow:2.3;background:#EDEDF0;cursor:default}
html body .hx-t{margin:0;font-size:24px!important;font-weight:600;letter-spacing:-.02em;color:#1D1D1F!important;line-height:1.2}
html body .hx-d{margin:14px 0 0;font-size:16px!important;line-height:1.55!important;color:#6E6E73!important;max-width:520px;opacity:0;max-height:0;overflow:hidden;transition:opacity .35s ease .1s,max-height .4s}
html body .hx-card.on .hx-d{opacity:1;max-height:200px}
.hx-mock{margin-top:auto;padding-top:28px;margin-right:-32px}
.hx-win{background:#fff;border-radius:16px 0 0 0;border:1px solid #E3E3E8;border-right:0;border-bottom:0;min-height:250px;box-shadow:0 20px 50px -30px rgba(20,20,20,.25)}
.hx-bar{display:flex;gap:6px;padding:14px 16px}
.hx-bar i{width:8px;height:8px;border-radius:50%;background:#D2D2D7}
.hx-form{padding:0 0 18px 16px;display:grid;gap:8px}
.hx-row{display:flex;align-items:center;gap:8px;background:#F5F5F7;border-radius:10px 0 0 10px;padding:8px 10px;white-space:nowrap}
.hx-k{width:96px;flex:none;font-size:13px;color:#6E6E73}
.hx-chip{font-size:13px;color:#1D1D1F;background:#fff;border:1px solid #E3E3E8;border-radius:6px;padding:6px 12px}
.hx-chip.on{background:#1D1D1F;color:#fff;border-color:#1D1D1F}
.hx-tiles{display:flex;gap:10px;padding:0 0 18px 16px;overflow:hidden}
.hx-tiles figure{margin:0;flex:0 0 150px;position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/5}
.hx-tiles img{width:100%;height:100%;object-fit:cover;display:block}
.hx-tiles figcaption{position:absolute;left:8px;bottom:8px;background:rgba(255,255,255,.92);color:#1D1D1F;font-size:11px;font-weight:600;padding:4px 8px;border-radius:6px}
.hx-done{display:flex;gap:16px;padding:0 0 18px 16px}
.hx-done img{width:140px;aspect-ratio:4/5;object-fit:cover;border-radius:10px;flex:none}
.hx-list{flex:1;display:grid;align-content:start;gap:8px;min-width:0}
html body .hx-li{margin:0;background:#F5F5F7;border-radius:10px 0 0 10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;white-space:nowrap}
html body .hx-li b{font-size:13px;color:#1D1D1F;font-weight:600}
html body .hx-li span{font-size:12px!important;color:#6E6E73!important}


/* green call to action in How it works */
html body html body #how-it-works .hiw-side a[class*="bg-brand"]{background:#022E13!important;border-color:#022E13!important;color:#fff!important}
html body html body #how-it-works .hiw-side a[class*="bg-brand"]:hover{background:#0B3D1C!important}

html body html body #features [role=tablist] .soon-tag{color:#4C8A1F!important}
html body html body #features [role=tablist] .svc-card.active .soon-tag{color:#94D04A!important}
html body html body .why-s .why-link{color:#022E13!important;border-color:#022E13!important;text-decoration-color:#022E13}
html body html body .why-s .why-link *{color:#022E13!important}


/* small green accents */
.hx-chip.on{background:#022E13!important;border-color:#022E13!important;color:#fff!important}
.hx-tiles figcaption.ok{background:#F5FFE6;color:#022E13}
html body .hx-li span.ok{color:#2F6B12!important;display:inline-flex;align-items:center;gap:6px}
html body .hx-li span.ok::before{content:"";width:6px;height:6px;border-radius:50%;background:#94D04A}
.hx-card.on .hx-bar i:first-child{background:#94D04A}

/* ===== subpage templates ===== */
html body.nd main h1.display{font-size:clamp(40px,5.2vw,76px)!important;font-weight:600!important;letter-spacing:-.04em!important;line-height:1.02!important}
html body.nd main h2.display{font-size:clamp(30px,3.3vw,48px)!important;font-weight:600!important;letter-spacing:-.03em!important;line-height:1.1!important}
html body.nd main :is(h1,h2) .h-thin{font-weight:400!important;color:#86868B!important}
html body.nd main .lead{font-size:clamp(19px,1.7vw,24px)!important;line-height:1.45!important;font-weight:500;letter-spacing:-.015em;color:#86868B!important}
html body.nd main .lead b,html body.nd main .lead strong{color:#1D1D1F;font-weight:600}
html body.nd main .btn-dark{display:inline-flex;align-items:center;gap:8px;background:#022E13;color:#fff!important;font-size:15px;font-weight:600;padding:13px 20px;border-radius:6px;text-decoration:none}
html body.nd main .btn-line{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#1D1D1F!important;font-size:15px;font-weight:500;padding:12px 20px;border-radius:6px;border:1px solid #D2D2D7;text-decoration:none}
html body.nd main .tpl-sec{max-width:none!important;margin:0!important;padding:96px 72px 0!important}

/* quality cards */
html body.nd main .qc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px;list-style:none;padding:0}
html body.nd main .qc li{background:#F5F5F7;border-radius:28px;padding:32px}
html body.nd main .qc .ok{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#2F6B12!important;background:#F5FFE6;padding:6px 12px;border-radius:999px}
html body.nd main .qc .ok::before{content:"";width:6px;height:6px;border-radius:50%;background:#94D04A}
html body.nd main .qc h3{margin:22px 0 0;font-size:22px;font-weight:600;letter-spacing:-.02em}
html body.nd main .qc p{margin:10px 0 0;font-size:16px;line-height:1.55;color:#6E6E73}
/* timeline */
html body.nd main .tl{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:40px;border-top:1px solid #D2D2D7;list-style:none;padding:0}
html body.nd main .tl li{padding:24px 24px 0 0;position:relative}
html body.nd main .tl li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:#1D1D1F}
html body.nd main .tl li:first-child::before{background:#94D04A;box-shadow:0 0 0 4px #F5FFE6}
html body.nd main .tl .when{font-size:14px;font-weight:600;color:#2F6B12}
html body.nd main .tl h3{margin:10px 0 0;font-size:20px;font-weight:600;letter-spacing:-.02em}
html body.nd main .tl p{margin:8px 0 0;font-size:15px;line-height:1.55;color:#6E6E73;max-width:280px}
/* send / get */
html body.nd main .sg{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
html body.nd main .sg>div{background:#F5F5F7;border-radius:28px;padding:36px 40px}
html body.nd main .sg>div.get{background:#022E13}
html body.nd main .sg h3{margin:0;font-size:24px;font-weight:600;letter-spacing:-.02em}
html body.nd main .sg .get h3,html body.nd main .sg .get li{color:#fff!important}
html body.nd main .sg .sub{margin:6px 0 0;font-size:15px;color:#86868B}
html body.nd main .sg .get .sub{color:rgba(255,255,255,.65)}
html body.nd main .sg ul{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
html body.nd main .sg li{display:flex;gap:12px;font-size:16px;line-height:1.45;color:#1D1D1F}
html body.nd main .sg li::before{content:"+";color:#86868B;font-weight:500}
html body.nd main .sg .get li::before{color:#94D04A}
/* faq box like home */
html body.nd main .divide-y.divide-line:has(>details.faq-item){background:#F5F5F7!important;border:0!important;border-radius:28px!important}
html body.nd main details.faq-item{border-color:#E3E3E8!important;background:transparent!important}
html body.nd main details.faq-item summary .faq-icon{border-color:#D2D2D7!important;color:#1D1D1F!important}


/* model board: new template */
html body.nd main .mc .mc-copy{max-width:none!important;margin:0!important;text-align:left!important}
html body.nd main .mc .mc-copy p{font-size:clamp(19px,1.7vw,24px)!important;line-height:1.45;font-weight:500;color:#86868B!important;margin-top:18px}
html body.nd main .mc .mc-copy p .text-ink{color:#1D1D1F!important;font-weight:600}
html body.nd main .mc .mc-board{max-width:none!important;margin:40px 0 0!important;padding:40px!important;background:#F5F5F7!important;border:0!important;border-radius:32px!important;box-shadow:none!important}
html body.nd main .mc .mc-models{grid-template-columns:repeat(5,1fr)!important;gap:16px!important;align-items:start!important;padding:4px!important;margin:0!important;overflow:visible}
html body.nd main .mc .mc-card{background:transparent!important;border-radius:0!important;aspect-ratio:auto!important;overflow:visible!important;transform:none!important;box-shadow:none!important;display:flex;flex-direction:column;gap:12px;text-align:left}
html body.nd main .mc .mc-card img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:22px;display:block;transition:box-shadow .3s,opacity .3s;opacity:.8}
html body.nd main .mc .mc-card:hover img{opacity:1}
html body.nd main .mc .mc-card.mc-on img{opacity:1;box-shadow:0 0 0 3px #F5F5F7,0 0 0 5px #022E13}
html body.nd main .mc .mc-tag{position:static!important;background:none!important;padding:0 4px!important;border-radius:0!important;font-size:15px!important;color:#86868B!important;box-shadow:none!important}
html body.nd main .mc .mc-tag b{font-weight:500}
html body.nd main .mc .mc-tag .mh-check{display:none!important}
html body.nd main .mc .mc-card.mc-on .mc-tag{color:#1D1D1F!important}
html body.nd main .mc .mc-card.mc-on .mc-tag b{font-weight:600}
html body.nd main .mc .mc-rows{display:flex!important;justify-content:flex-start!important;gap:32px!important;margin-top:36px!important;flex-wrap:wrap}
html body.nd main .mc .mc-div{display:none!important}
html body.nd main .mc .mc-row{display:flex;align-items:center;gap:14px;flex-wrap:nowrap}
html body.nd main .mc .mc-label{width:auto!important;font-size:14px!important;color:#86868B!important;margin:0!important}
html body.nd main .mc .mc-row{background:transparent}
html body.nd main .mc .mc-row .mc-pill:first-of-type{margin-left:0}
html body.nd main .mc .mc-track{display:inline-flex;background:#E8E8ED;border-radius:999px;padding:4px;gap:2px}
html body.nd main .mc .mc-track>.mc-pill{border:0!important;background:transparent!important;color:#1D1D1F!important;border-radius:999px!important;padding:9px 18px!important;font-size:14px!important;font-weight:500!important;margin:0!important;box-shadow:none!important;transition:background .2s,color .2s}
html body.nd main .mc .mc-track>.mc-pill:hover{background:rgba(255,255,255,.6)!important}
html body.nd main .mc .mc-track>.mc-pill.mc-pill-on{background:#1D1D1F!important;color:#fff!important}
html body.nd main .mc .mc-sum{margin-top:32px!important;padding:16px 16px 16px 24px!important;border:0!important;background:#fff;border-radius:18px;flex-direction:row!important;justify-content:space-between!important;align-items:center}
html body.nd main .mc .mc-sum-t{font-size:16px!important;color:#86868B!important}
html body.nd main .mc .mc-sum-t b{color:#1D1D1F;font-weight:600}
html body.nd main .mc .mc-go{background:#022E13!important;color:#fff!important;border-radius:6px!important;padding:12px 20px!important}

/* quality cards: checks stack up across the three cards */
html body.nd main .qc .qbar{display:flex;gap:6px}
html body.nd main .qc .qbar i{flex:1;height:6px;border-radius:999px;background:#E3E3E8}
html body.nd main .qc .qbar i.on{background:#94D04A}
html body.nd main .qc li:last-child{background:#022E13}
html body.nd main .qc li:last-child h3{color:#fff!important}
html body.nd main .qc li:last-child p{color:rgba(255,255,255,.75)!important}
html body.nd main .qc li:last-child .qbar i{background:rgba(255,255,255,.18)}
html body.nd main .qc li:last-child .qbar i.on{background:#94D04A}
html body.nd main .qc h3{margin-top:28px!important}
/* model board without the grey panel */
html body.nd main .mc .mc-board.mc-board{background:transparent!important;padding:0!important;border-radius:0!important}
html body.nd main .mc .mc-card.mc-on img{box-shadow:0 0 0 3px #fff,0 0 0 5px #022E13}
html body.nd main .mc .mc-sum{background:#F5F5F7!important}

html body.nd main .sgt{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:32px;padding-top:28px;border-top:1px solid #E3E3E8}
html body.nd main .sgt .lead{margin:0}
html body.nd main .sgt .lead:last-child b{color:#022E13}


/* ===== pricing page template ===== */
html body.nd main #pricing.pv{max-width:none;margin:0;padding:72px 72px 0}
html body.nd main .pv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
html body.nd main .pv-note{align-self:center;font-size:14px;color:#86868B}
html body.nd main .pv-ctrl{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:56px -72px 0;padding:40px 72px 0;background:#F5F5F7;border-radius:0}
html body.nd main :is(#price-tabs,#bill-tabs){background:#E8E8ED!important;border:0!important;padding:4px!important;gap:2px;border-radius:999px!important}
html body.nd main :is(.price-tab,.bill-tab){background:transparent!important;color:#1D1D1F!important;border-radius:999px!important;padding:10px 20px!important;font-size:14px!important;font-weight:500;border:0!important}
html body.nd main :is(.price-tab,.bill-tab).active{background:#1D1D1F!important;color:#fff!important}
html body.nd main #pricing .price-group{margin:0 -72px!important;padding:28px 72px 72px;background:#F5F5F7;max-width:none!important}
html body.nd main #pricing .price-group[data-plan="design"]{grid-template-columns:repeat(3,1fr)!important}
html body.nd main #pricing>p.text-center{margin:0 -72px!important;padding:0 72px 24px;background:#F5F5F7}
/* cards */
html body.nd main #pricing .price-card{position:relative;background:#fff!important;border:0!important;border-radius:24px!important;padding:10px!important;box-shadow:none!important;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
html body.nd main #pricing .price-card.pc-feat{background:#022E13!important}
@media (hover:hover){html body.nd main #pricing .price-card:hover{transform:scale(1.02);box-shadow:0 30px 60px -36px rgba(20,20,20,.28)!important}}
html body.nd main #pricing .price-card img{transform:none!important}
html body.nd main #pricing .price-card>div:first-child{aspect-ratio:16/8!important;border-radius:16px!important}
html body.nd main #pricing .price-card>div:first-child::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.45),rgba(0,0,0,0) 55%)}
html body.nd main #pricing .price-card h3{position:absolute;top:28px;left:30px;right:30px;z-index:2;margin:0;color:#fff!important;font-size:24px!important;font-weight:500!important;letter-spacing:-.02em}
html body.nd main #pricing .price-card>div:last-child{padding:22px 18px 18px!important}
html body.nd main #pricing .price-card>div:last-child>p:first-of-type{order:2;min-height:0!important;margin-top:10px!important;font-size:15px!important}
html body.nd main #pricing .price-card>div:last-child>p:nth-of-type(2){order:1;margin-top:0!important;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
html body.nd main #pricing .price-card .text-5xl{font-size:38px!important;font-weight:600!important;letter-spacing:-.03em}
html body.nd main #pricing .price-card .per{font-size:14px!important}
html body.nd main #pricing .price-card ul{order:3;margin-top:18px!important;gap:10px!important}
html body.nd main #pricing .price-card ul li{font-size:15px!important;color:#1D1D1F!important;align-items:center!important}
html body.nd main #pricing .price-card.pc-feat ul li{color:#fff!important}
html body.nd main #pricing .price-card ul li>span:first-child{color:#86868B!important;margin-top:0!important}
html body.nd main #pricing .price-card.pc-feat ul li>span:first-child{color:#94D04A!important}
html body.nd main #pricing .price-card>div:last-child>p.rounded-xl{order:4;border:0!important;background:#F5F5F7!important;border-radius:12px!important;color:#1D1D1F!important}
html body.nd main #pricing .price-card.pc-feat>div:last-child>p.rounded-xl{background:rgba(255,255,255,.1)!important;color:#fff!important}
html body.nd main #pricing .price-card>div:last-child>a{order:5;margin-top:auto!important;align-self:flex-start;padding:12px 20px!important;border-radius:6px!important;background:#1D1D1F!important;color:#fff!important;font-size:14px!important;transform:none!important;box-shadow:none!important}
html body.nd main #pricing .price-card>div:last-child>ul+a,html body.nd main #pricing .price-card>div:last-child>p.rounded-xl~a{margin-top:28px!important}
html body.nd main #pricing .price-card>div:last-child{gap:0}
html body.nd main #pricing .price-card.pc-feat>div:last-child>a{background:#fff!important;color:#022E13!important}
html body.nd main #pricing .price-card .yr-note{display:block;width:100%;font-size:13px;color:#86868B}
html body.nd main #pricing .price-card.pc-feat .yr-note,html body.nd main #pricing .price-card.pc-feat .yr-strike{color:rgba(255,255,255,.6)!important}

html body.nd main #pricing .price-group:has(>.price-card:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)!important}
html body.nd main #pricing .price-group:has(>.price-card:nth-child(2):last-child) .price-card>div:first-child{aspect-ratio:16/6!important}
html body.nd main #pricing .price-card ul li:first-child{font-weight:600}

html body.nd main ul[aria-label="Every plan includes"] li{background:#F5F5F7!important;border-color:transparent!important}

html body.nd main #pricing .price-group.hidden{display:none!important}

/* ===== type scale for subpages: 1D1D1F primary, 6E6E73 secondary, 86868B tertiary ===== */
html body.nd main{--t1:#1D1D1F;--t2:#6E6E73;--t3:#86868B}
/* paragraph right under a section heading */
html body.nd main :is(h2.display)+p:not(.lead),html body.nd main section>div>h2.display+p,html body.nd main #compare p.max-w-md{font-size:19px!important;line-height:1.5!important;color:var(--t3)!important;font-weight:500}
/* FAQ */
html body.nd main details.faq-item summary{font-size:18px!important;font-weight:500!important;color:var(--t1)!important;letter-spacing:-.01em}
html body.nd main details.faq-item>p{font-size:16px!important;line-height:1.6!important;color:var(--t2)!important}
html body.nd main details.faq-item{padding:22px 28px!important}
/* pricing cards */
html body.nd main #pricing .price-card>div:last-child>p:first-of-type{font-size:16px!important;color:var(--t2)!important;line-height:1.5}
html body.nd main #pricing .price-card.pc-feat>div:last-child>p:first-of-type{color:rgba(255,255,255,.75)!important}
html body.nd main #pricing .price-card .text-5xl{font-size:40px!important}
html body.nd main #pricing .price-card :is(.per,.orig,.yr-strike){font-size:15px!important;color:var(--t3)!important}
html body.nd main #pricing .price-card.pc-feat :is(.per,.orig,.yr-strike){color:rgba(255,255,255,.6)!important}
html body.nd main #pricing .price-card p:nth-of-type(2) span[class*="font-bold"]:not(.text-5xl){font-size:13px!important;font-weight:600!important;color:#2F6B12!important;background:#F5FFE6;padding:3px 9px;border-radius:999px}
html body.nd main #pricing .price-card.pc-feat p:nth-of-type(2) span[class*="font-bold"]:not(.text-5xl){color:#022E13!important;background:#94D04A}
html body.nd main #pricing .price-card ul li{font-size:16px!important}
html body.nd main #pricing .price-card ul li:first-child{font-weight:500!important}
html body.nd main #pricing .price-card>div:last-child>p.rounded-xl{font-size:15px!important}
html body.nd main ul[aria-label="Every plan includes"] li{font-size:14px!important;color:var(--t1)!important}
html body.nd main ul[aria-label="Every plan includes"] li span{color:var(--t3)!important}
html body.nd main a[href="mailto:hello@getcrode.com?subject=Custom%20plan"],html body.nd main #pricing~section a.text-brand{color:var(--t1)!important}
/* good to know */
html body.nd main section .bg-canvas h3{font-size:19px!important;font-weight:600!important;color:var(--t1)!important;letter-spacing:-.01em}
html body.nd main section .bg-canvas h3+p{font-size:15px!important;line-height:1.55!important;color:var(--t2)!important}
html body.nd main section .bg-canvas h2+p{font-size:17px!important;color:var(--t3)!important}
/* compare */
html body.nd main #compare :is(.cmp3-card,[class*="cmp"]) span.text-\[15px\]{font-size:16px!important}
html body.nd main #compare p.text-\[13px\],html body.nd main #compare span.text-\[13px\]{font-size:14px!important}
html body.nd main #compare [class*="text-[26px]"]{font-size:28px!important;letter-spacing:-.02em}
html body.nd main #compare .text-\[15px\].text-mute,html body.nd main #compare [class*="text-[15px]"][class*="text-mute"]{font-size:16px!important;color:var(--t1)!important}
html body.nd main #compare .text-\[12px\]{font-size:13px!important;color:var(--t3)!important}

/* ===== spacing and alignment (subpages) ===== */
html body.nd main .tpl-sec{padding-top:120px!important}
html body.nd main .tpl-sec>h2.display+*:not(p),html body.nd main .tpl-sec>h2.display+p+*{margin-top:40px!important}
html body.nd main .tpl-sec>div.mt-10,html body.nd main .tpl-sec>.mt-10{margin-top:40px!important}

/* pricing: chips and the custom plan box live inside the grey band, left aligned */
html body.nd main #pricing .price-group{padding-bottom:32px!important}
html body.nd main #pricing>ul[aria-label="Every plan includes"]{margin:0 -72px!important;padding:8px 72px 20px!important;background:#F5F5F7;justify-content:flex-start!important;max-width:none!important}
html body.nd main #pricing>ul[aria-label="Every plan includes"] li{background:#fff!important}
html body.nd main #pricing>.pv-more{margin:0 -72px;padding:0 72px 72px;background:#F5F5F7}
html body.nd main .pv-more-in{background:#fff;border-radius:20px;padding:20px 20px 20px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}
html body.nd main .pv-more-in p{margin:0;font-size:17px;color:var(--t2)}
html body.nd main .pv-more-in b{color:var(--t1);font-weight:600}
/* good to know box */
html body.nd main .tpl-sec>.bg-canvas{border-radius:32px!important;padding:56px!important}

html body.nd main #pricing .price-card>div:last-child>ul{margin-bottom:28px!important}
html body.nd main #pricing .price-card>div:last-child>p.rounded-xl{margin:-8px 0 24px!important}
html body.nd main #pricing .price-card ul li{align-items:flex-start!important;line-height:1.45}
html body.nd main #pricing .price-card ul li>span:first-child{margin-top:4px!important}
html body.nd main #pricing>.pv-inc{margin:0 -72px;padding:4px 72px 24px;background:#F5F5F7;font-size:17px;line-height:1.5;color:var(--t2)}
html body.nd main #pricing>.pv-inc b{color:var(--t1);font-weight:600}

html body.nd main .gk{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:40px}
html body.nd main .gk>div{border-top:1px solid #D2D2D7;padding-top:20px}
html body.nd main .gk>div:first-child{border-top-color:#022E13}
html body.nd main .gk h3{margin:0;font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--t1)}
html body.nd main .gk p{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--t2)}
html body.nd main .gk p a{color:var(--t1);text-decoration:underline}


/* Crode vs agency */
html body.nd main .ag{margin-top:40px;border-top:1px solid #1D1D1F}
html body.nd main .ag-head,html body.nd main .ag-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;align-items:center}
html body.nd main .ag-head{padding:28px 0 24px}
html body.nd main .ag-row{border-top:1px solid #E3E3E8;padding:18px 0}
html body.nd main .ag-foot{border-top:0;padding-top:28px}
html body.nd main .ag-n{margin:0;font-size:15px;font-weight:600;color:var(--t3)}
html body.nd main .ag-crode .ag-n{color:#022E13}
html body.nd main .ag-p{margin:8px 0 0;font-size:32px;font-weight:600;letter-spacing:-.03em;color:var(--t1)}
html body.nd main .ag-crode .ag-p{color:#022E13}
html body.nd main .ag-s{margin:4px 0 0;font-size:14px;color:var(--t3)}
html body.nd main .ag-l{font-size:17px;color:var(--t1)}
html body.nd main .ag-v{font-size:16px;color:var(--t3);display:inline-flex;align-items:center;gap:10px}
html body.nd main .ag-v::before{content:"";width:8px;height:8px;border-radius:50%;background:#D2D2D7}

html body.nd main span.ag-v.ag-y{color:var(--t1)}
html body.nd main span.ag-v.ag-y::before{background:#1D1D1F}
html body.nd main span.ag-v.ag-pt::before{background:transparent;border:1.5px solid #86868B;width:7px;height:7px}
html body.nd main span.ag-v.ag-c{color:#022E13;font-weight:600}
html body.nd main span.ag-v.ag-c::before{background:#94D04A}
html body.nd main .ag-note{margin-top:24px;font-size:13px;color:var(--t3)}



/* ===== service page template ===== */
html body.nd main .fg-tabs{display:flex;gap:0;margin-top:36px;border-bottom:1px solid #D2D2D7;overflow-x:auto;scrollbar-width:none}
html body.nd main .fg-tabs .cat-tab{flex:0 0 auto;background:none!important;border:0!important;border-bottom:1.5px solid transparent!important;margin-bottom:-1px;padding:0 18px 14px!important;font-size:17px!important;color:var(--t2)!important;border-radius:0!important;cursor:pointer}
html body.nd main .fg-tabs .cat-tab:first-child{padding-left:4px!important}
html body.nd main .fg-tabs .cat-tab.active{color:var(--t1)!important;border-bottom-color:var(--t1)!important;background:none!important}
html body.nd main .fg-grid{display:none;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:16px;margin-top:32px;height:min(64vw,760px)}
html body.nd main .fg-grid.on{display:grid}
html body.nd main .fg-grid figure{margin:0;border-radius:24px;overflow:hidden;background:#F5F5F7}
html body.nd main .fg-grid figure:first-child{grid-row:1/3}
html body.nd main .fg-grid img{width:100%;height:100%;object-fit:cover;display:block}
html body.nd main .gk.gk3{grid-template-columns:repeat(3,1fr);row-gap:40px}
html body.nd main .gk3>div:first-child{border-top-color:#D2D2D7}
html body.nd main .gk3>div:nth-child(-n+3){border-top-color:#022E13}
/* plan cards */
html body.nd main .sp-band{margin:40px -72px 0;padding:40px 72px;background:#F5F5F7}
html body.nd main .sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
html body.nd main .sp-card{background:#fff;border-radius:24px;padding:10px;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
@media (hover:hover){html body.nd main .sp-card:hover{transform:scale(1.02);box-shadow:0 30px 60px -36px rgba(20,20,20,.28)}}
html body.nd main .sp-feat{background:#022E13}
html body.nd main .sp-img{position:relative;aspect-ratio:16/6;border-radius:16px;overflow:hidden;background:#E8E8ED}
html body.nd main .sp-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html body.nd main .sp-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.42),rgba(0,0,0,0) 55%)}
html body.nd main .sp-name{position:absolute;top:18px;left:20px;z-index:1;margin:0;color:#fff!important;font-size:24px;font-weight:500;letter-spacing:-.02em}
html body.nd main .sp-body{padding:22px 18px 18px;display:flex;flex-direction:column;flex:1}
html body.nd main .sp-price{margin:0;display:flex;align-items:baseline;gap:6px}
html body.nd main .sp-amt{font-size:40px;font-weight:600;letter-spacing:-.03em;color:var(--t1)}
html body.nd main .sp-per{font-size:15px;color:var(--t3)}
html body.nd main .sp-desc{margin:10px 0 0;font-size:16px;color:var(--t2)}
html body.nd main .sp-card ul{list-style:none;margin:18px 0 28px;padding:0;display:grid;gap:10px}
html body.nd main .sp-card li{display:flex;gap:10px;font-size:16px;line-height:1.45;color:var(--t1)}
html body.nd main .sp-card li:first-child{font-weight:500}
html body.nd main .sp-card li span{color:var(--t3);margin-top:3px;display:flex}
html body.nd main .sp-btn{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:#1D1D1F;color:#fff!important;font-size:14px;font-weight:600;padding:12px 20px;border-radius:6px;text-decoration:none}
html body.nd main .sp-feat .sp-amt,html body.nd main .sp-feat li{color:#fff}
html body.nd main .sp-feat :is(.sp-per,.sp-desc){color:rgba(255,255,255,.7)}
html body.nd main .sp-feat li span{color:#94D04A}
html body.nd main .sp-feat .sp-btn{background:#fff;color:#022E13!important}
html body.nd main .sp-inc{margin:24px 0 0;font-size:17px;line-height:1.5;color:var(--t2)}
html body.nd main .sp-inc b{color:var(--t1);font-weight:600}
html body.nd main .sp-inc a{color:var(--t1);text-decoration:underline}
/* explore other services cards */
html body.nd main .m-swipe>a.pc-card{background:#F5F5F7!important;border:0!important;border-radius:24px!important;padding:10px;box-shadow:none!important;transform:none!important}
html body.nd main .m-swipe>a.pc-card>div:first-child{border-radius:16px;aspect-ratio:16/9!important}
html body.nd main .m-swipe>a.pc-card img{transform:none!important}
html body.nd main .m-swipe>a.pc-card>div:last-child{padding:18px 14px 14px!important}
html body.nd main .m-swipe>a.pc-card>div:last-child>span:first-child{font-size:20px!important;font-weight:600!important;color:var(--t1)!important}
html body.nd main .m-swipe>a.pc-card>div:last-child>span:nth-child(2){font-size:15px!important;color:var(--t2)!important}
html body.nd main .m-swipe>a.pc-card>div:last-child>span:nth-child(3){font-size:14px!important;color:var(--t3)!important}
html body.nd main .m-swipe>a.pc-card>div:last-child>span:last-child{color:var(--t1)!important;font-size:15px!important}
@media (hover:hover){html body.nd main .m-swipe>a.pc-card{transition:transform .35s}html body.nd main .m-swipe>a.pc-card:hover{transform:scale(1.02)!important}}

html body.nd main .fg-grid{height:auto!important;grid-template-rows:auto auto}
html body.nd main .fg-grid figure:not(:first-child){aspect-ratio:3/4}
/* what you get: split list */
html body.nd main .wg{display:grid;grid-template-columns:1fr 1.15fr;gap:72px;align-items:start}
html body.nd main .wg-l{position:static}
html body.nd main .wg-list{list-style:none;margin:0;padding:0;border-top:1px solid #1D1D1F}
html body.nd main .wg-list li{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:22px 0;border-bottom:1px solid #E3E3E8}
html body.nd main .wg-list h3{margin:0;font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--t1)}
html body.nd main .wg-list p{margin:0;font-size:16px;line-height:1.5;color:var(--t2)}
html body.nd main .wg-list li:first-child h3{color:#022E13}


/* design gallery */
html body.nd main .dg{display:none;gap:16px;margin-top:32px;align-items:start}
html body.nd main .dg.on{display:grid}
html body.nd main .dg3{grid-template-columns:repeat(3,1fr)}
html body.nd main .dg2{grid-template-columns:repeat(2,1fr)}
html body.nd main .dg figure{margin:0}
html body.nd main .dg figcaption{font-size:15px;font-weight:500;color:var(--t2);margin:0 0 12px 4px}
html body.nd main .dg figure>div{border-radius:24px;overflow:hidden;background:#F5F5F7}
html body.nd main .dg3 figure>div{aspect-ratio:4/5}
html body.nd main .dg2 figure>div{aspect-ratio:16/10}
html body.nd main .dg img{width:100%;height:100%;object-fit:cover;display:block}

/* product photography: phone photo vs scenes */
html body.nd main .ps{display:grid;grid-template-columns:1fr 2.2fr;gap:16px;margin-top:32px;align-items:end}
html body.nd main .ps figure{margin:0}
html body.nd main .ps figcaption{font-size:15px;font-weight:500;color:var(--t2);margin:0 0 12px 4px}
html body.nd main .ps-out figcaption{color:#022E13}
html body.nd main .ps figure>div{border-radius:24px;overflow:hidden;background:#F5F5F7;position:relative}
html body.nd main .ps-in>div{aspect-ratio:3/4}
html body.nd main .ps-in img{width:100%;height:100%;object-fit:cover;display:block}
html body.nd main .ps-out>div{aspect-ratio:3/2}
html body.nd main .ps-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
html body.nd main .ps-img.on{opacity:1}
html body.nd main .dg6{grid-template-columns:repeat(6,1fr)}
html body.nd main .dg6 figure>div{aspect-ratio:3/4}
html body.nd main .sp-grid.sp-3{grid-template-columns:repeat(3,1fr)}
html body.nd main .sp-3 .sp-img{aspect-ratio:16/8}

/* key facts (answer first, for search and AI answers) */
html body.nd main .kf-sec{padding-top:72px!important}
html body.nd main .kf-sec .lead{color:var(--t2)!important}
html body.nd main .kf{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin:36px 0 0}
html body.nd main .kf>div{border-top:1px solid #D2D2D7;padding-top:16px}
html body.nd main .kf>div:first-child{border-top-color:#022E13}
html body.nd main .kf dt{font-size:14px;color:var(--t3)}
html body.nd main .kf dd{margin:6px 0 0;font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.35;color:var(--t1)}
html body.nd main .kf>div:first-child dd{color:#022E13}
/* related guide */
html body.nd main .rg-card{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"k t a" "k d a";column-gap:28px;row-gap:6px;align-items:center;background:#F5FFE6;border-radius:24px;padding:28px 32px;text-decoration:none;transition:transform .35s}
@media (hover:hover){html body.nd main .rg-card:hover{transform:scale(1.01)}}
html body.nd main .rg-k{grid-area:k;font-size:13px;font-weight:600;color:#2F6B12;background:#fff;padding:6px 12px;border-radius:999px}
html body.nd main .rg-t{grid-area:t;font-size:22px;font-weight:600;letter-spacing:-.02em;color:#022E13}
html body.nd main .rg-d{grid-area:d;font-size:15px;color:#3F5A47}
html body.nd main .rg-a{grid-area:a;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#022E13}

/* resources index: featured guide */
html body.nd main .rf{display:grid;grid-template-columns:1.1fr 1fr;gap:0;background:#F5F5F7;border-radius:32px;overflow:hidden;text-decoration:none;transition:transform .35s}
@media (hover:hover){html body.nd main .rf:hover{transform:scale(1.01)}}
html body.nd main .rf-img{min-height:460px;background:#E8E8ED}
html body.nd main .rf-img img{width:100%;height:100%;object-fit:cover;display:block}
html body.nd main .rf-body{padding:48px;display:flex;flex-direction:column;justify-content:center}
html body.nd main .rf-k{margin:0;font-size:14px;color:var(--t3);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
html body.nd main .rf-k span{font-size:13px;font-weight:600;color:#2F6B12;background:#F5FFE6;padding:5px 11px;border-radius:999px}
html body.nd main .rf-t{margin:18px 0 0;font-size:clamp(26px,2.6vw,38px);font-weight:600;letter-spacing:-.03em;line-height:1.12;color:var(--t1)}
html body.nd main .rf-d{margin:16px 0 0;font-size:17px;line-height:1.55;color:var(--t2)}
html body.nd main .rf-a{margin-top:28px;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:#022E13;color:#fff;font-size:15px;font-weight:600;padding:13px 20px;border-radius:6px}


/* article template */
html body.nd main>article{max-width:none!important;padding:56px 72px 0!important}
html body.nd main>article>header,html body.nd main>article .rs-main{max-width:1296px!important}
html body.nd main>article h1.display{font-size:clamp(38px,4.6vw,68px)!important}
html body.nd main>article h1 .text-brand{color:var(--t1)!important}
html body.nd main>article h1{color:var(--t3)!important}
html body.nd main>article h1 span{color:var(--t1)!important}
html body.nd main>article .rs-main{grid-template-columns:minmax(0,1fr) 340px!important;gap:64px!important}
html body.nd main>article figure.rv{border-radius:28px!important}
html body.nd main>article .rs-k{font-size:14px!important;font-weight:600!important;color:var(--t3)!important;margin-bottom:8px!important}
html body.nd main>article .rs-dek{font-size:20px!important;line-height:1.5!important;color:var(--t2)!important;font-weight:500}
html body.nd main>article .rv.border-y{border:0!important;background:#F5FFE6;border-radius:24px;padding:28px 32px!important}
html body.nd main>article .rv.border-y>p:first-child{color:#2F6B12!important;font-size:14px!important}
html body.nd main>article .rv.border-y>p:last-child{font-size:21px!important;line-height:1.55!important;color:#022E13!important}
html body.nd main>article .rv.border-y strong{color:#022E13}
html body.nd main>article h2.display{font-size:clamp(26px,2.4vw,34px)!important;margin-top:72px!important}
html body.nd main>article h3{font-size:20px!important;color:var(--t1)!important}
html body.nd main>article .min-w-0 p:not([class*="text-[13px]"]):not(.rs-k):not(.rs-dek),html body.nd main>article .min-w-0 li{font-size:17px!important;line-height:1.7!important;color:var(--t2)!important}
html body.nd main>article .min-w-0 p strong,html body.nd main>article .min-w-0 li strong{color:var(--t1)!important}
html body.nd main>article table{background:#F5F5F7;border-radius:20px;overflow:hidden;border-collapse:separate!important;border-spacing:0}
html body.nd main>article table th,html body.nd main>article table td{padding:16px 20px!important}
html body.nd main>article table thead th{color:var(--t3)!important;font-size:13px!important;padding-top:18px!important}
html body.nd main>article table tr{border-color:#E3E3E8!important}
html body.nd main>article tbody tr>*{border-top:1px solid #E3E3E8}
html body.nd main>article blockquote,html body.nd main>article .border-l-2,html body.nd main>article [class*="border-l"]{border-left-color:#022E13!important}
html body.nd main>article .rs-card{background:#F5F5F7!important;border-radius:28px!important;padding:28px!important}
html body.nd main>article .rs-meta,html body.nd main>article .rs-grid{border-color:#E3E3E8!important}
html body.nd main>article .rs-meta li,html body.nd main>article .rs-grid div{color:var(--t1)!important}
html body.nd main>article .rs-meta span,html body.nd main>article .rs-grid span{color:var(--t3)!important}
html body.nd main>article .rs-price{color:var(--t2)!important}
html body.nd main>article .rs-price b{color:#022E13!important;font-weight:600!important}
html body.nd main>article .rs-btn{background:#022E13!important;border-radius:6px!important}
html body.nd main>article .rs-sq{display:none!important}
html body.nd main>article .rs-toc-wrap{display:block!important;margin-top:28px}
html body.nd main>article .rg-toc a{color:var(--t3)!important;font-size:14px!important}
html body.nd main>article .rg-toc a.on{color:var(--t1)!important}
html body.nd main>article .rg-toc a.on .rg-bar{background:#022E13!important}
@media (max-width:1023px){html body.nd main>article{padding:40px 16px 0!important}html body.nd main>article .rs-main{grid-template-columns:1fr!important;gap:32px!important}}
html body.nd main>article .min-w-0 .rv.border-y>p:last-child{font-size:21px!important;line-height:1.55!important;color:#022E13!important}
html body.nd main>article .min-w-0 .rv.border-y>p:first-child{color:#2F6B12!important;font-size:14px!important;font-weight:600}


html body.nd main .sp-3 .sp-name{font-size:clamp(18px,1.5vw,22px)}
/* article: smaller, quieter type */
html body.nd main>article h1.display{font-size:clamp(34px,3.6vw,52px)!important;line-height:1.08!important;max-width:900px}
html body.nd main>article header .mt-8{margin-top:24px!important}
html body.nd main>article figure.rv{border-radius:20px!important;background:#F5F5F7!important}
html body.nd main>article .rs-ov{margin-top:28px!important;padding-bottom:20px!important}
html body.nd main>article .rs-dek{font-size:18px!important;line-height:1.55!important}
html body.nd main>article .min-w-0 .rv.border-y{background:transparent!important;border-radius:0!important;border-left:2px solid #022E13!important;padding:4px 0 4px 20px!important}
html body.nd main>article .min-w-0 .rv.border-y>p:last-child{font-size:18px!important;line-height:1.6!important;color:var(--t1)!important}
html body.nd main>article .min-w-0 .rv.border-y strong{color:#022E13!important}
html body.nd main>article h2.display{font-size:clamp(22px,1.9vw,28px)!important;margin-top:56px!important;letter-spacing:-.02em!important}
html body.nd main>article h3{font-size:18px!important}
html body.nd main>article .min-w-0 p:not([class*="text-[13px]"]):not(.rs-k):not(.rs-dek),html body.nd main>article .min-w-0 li{font-size:16px!important;line-height:1.7!important}
html body.nd main>article table th,html body.nd main>article table td{font-size:15px!important;padding:13px 18px!important}
html body.nd main>article table{border-radius:16px}
html body.nd main>article hr,html body.nd main>article .border-t.border-line{border-color:#EDEDF0!important}
html body.nd main>article .rs-card{padding:24px!important;border-radius:20px!important}
html body.nd main>article .rs-grid{display:none!important}
html body.nd main>article .rs-meta li{font-size:14px!important}
html body.nd main>article .rs-price{font-size:15px!important;margin:16px 0 14px!important}
html body.nd main>article .rs-price b{font-size:26px!important}
html body.nd main>article .rs-btn{font-size:14px!important;padding:12px 16px!important}
html body.nd main>article .rs-main{grid-template-columns:minmax(0,1fr) 300px!important}
html body.nd main>article .min-w-0{max-width:760px}
/* services index cards */
html body.nd main .sv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
html body.nd main .sv-card{background:#F5F5F7;border-radius:24px;padding:10px;text-decoration:none;display:flex;flex-direction:column;transition:transform .35s}
@media (hover:hover){html body.nd main .sv-card:hover{transform:scale(1.02)}}
html body.nd main .sv-card:nth-child(-n+2){grid-column:span 1}
html body.nd main .sv-feat{background:#022E13}
html body.nd main .sv-img{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#E8E8ED}
html body.nd main .sv-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html body.nd main .sv-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.42),rgba(0,0,0,0) 50%)}
html body.nd main .sv-n{position:absolute;top:18px;left:20px;z-index:1;margin:0;color:#fff;font-size:24px;font-weight:500;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
html body.nd main .sv-n .soon-tag{font-size:12px;font-weight:600;background:#F5FFE6;color:#2F6B12!important;padding:4px 9px;border-radius:999px}
html body.nd main .sv-b{padding:18px 14px 12px;display:flex;flex-direction:column;flex:1}
html body.nd main .sv-d{margin:0;font-size:16px;line-height:1.5;color:var(--t2)}
html body.nd main .sv-p{margin:16px 0 0;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--t1);margin-top:auto;padding-top:16px}
html body.nd main .sv-feat .sv-d{color:rgba(255,255,255,.75)}
html body.nd main .sv-feat .sv-p{color:#fff}
/* coming soon media */
html body.nd main .soon-media{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:16/7;background:#F5F5F7}
html body.nd main .soon-media :is(video,img){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html body.nd main .soon-badge{position:absolute;left:24px;bottom:24px;background:rgba(255,255,255,.92);color:#022E13;font-size:14px;font-weight:600;padding:9px 16px;border-radius:999px}
/* about */
html body.nd main .ab-img{border-radius:28px;overflow:hidden;aspect-ratio:16/7;background:#F5F5F7}
html body.nd main .ab-img img{width:100%;height:100%;object-fit:cover;display:block}
html body.nd main .wg-1 li{grid-template-columns:1fr}
html body.nd main .wg-1 li p{margin-top:8px}

/* mobile: 320px fixes */


/* ============ Forms (start / try) — new design language, Oct 2026 ============ */
html body.frm{background:#fff}
html body.frm main{background:#fff}

/* Panel: flat white card with a hairline, not a grey blob */
html body.frm .bg-canvas.rounded-\[28px\],
html body.frm form.rounded-\[28px\],
html body.frm div.rounded-\[28px\]{background:#fff!important;border:1px solid #E3E3E8!important;border-radius:14px!important;box-shadow:none!important}
html body.frm .bg-canvas{background:#fff!important}

/* Headings */
html body.frm h1.display{font-size:clamp(38px,4vw,56px)!important;font-weight:600;letter-spacing:-.035em;line-height:1.04}
html body.frm h2{font-size:20px!important;font-weight:600;letter-spacing:-.02em;color:#1D1D1F}
html body.frm label,html body.frm .fld-label{font-size:13px!important;font-weight:500;color:#6E6E73;letter-spacing:0}

/* Inputs */
html body.frm input[type="text"],html body.frm input[type="email"],html body.frm input[type="url"],
html body.frm input[type="tel"],html body.frm select,html body.frm textarea{
  border-radius:6px!important;border:1px solid #E3E3E8!important;background:#fff!important;
  padding:12px 14px!important;font-size:15px!important;color:#1D1D1F!important;box-shadow:none!important;transition:border-color .2s}
html body.frm input::placeholder,html body.frm textarea::placeholder{color:#B0B0B6!important}
html body.frm input:focus,html body.frm select:focus,html body.frm textarea:focus{
  outline:none!important;border-color:#1D1D1F!important;box-shadow:none!important}

/* Choice pills become minimal rectangles */
html body.frm .pill span{border-radius:6px!important;border:1px solid #E3E3E8!important;background:#fff!important;
  color:#1D1D1F!important;font-size:14px!important;font-weight:400!important;padding:9px 14px!important}
html body.frm .pill:hover span{border-color:#1D1D1F!important;color:#1D1D1F!important}
html body.frm .pill input:checked + span{background:#022E13!important;border-color:#022E13!important;color:#fff!important;font-weight:500!important}
html body.frm .scene-row .pill span{padding:8px 12px!important;font-size:13px!important}

/* Buttons: 6px, never pill */
html body.frm button.rounded-full,html body.frm a.rounded-full,
html body.frm .rounded-full.bg-brand,html body.frm button[type="submit"]{border-radius:6px!important}
html body.frm button[type="submit"],html body.frm #next-btn{
  background:#022E13!important;color:#fff!important;border:0!important;font-weight:600!important;
  padding:13px 24px!important;font-size:15px!important;box-shadow:none!important;transform:none!important}
html body.frm button[type="submit"]:hover,html body.frm #next-btn:hover{background:#0B3D1C!important;transform:none!important;box-shadow:none!important}
html body.frm #back-btn,html body.frm #success a{
  border-radius:6px!important;border:1px solid #D2D2D7!important;color:#1D1D1F!important;
  padding:13px 22px!important;font-size:15px!important;font-weight:500!important}
html body.frm #back-btn:hover,html body.frm #success a:hover{border-color:#1D1D1F!important}
/* nav + footer CTAs keep their own shape rules, just square them off */
html body.frm .nav-cta{border-radius:6px!important}

/* Dropzones */
html body.frm .dropzone,html body.frm [class*="border-dashed"]{
  border-radius:8px!important;border:1px dashed #D2D2D7!important;background:#FAFAFB!important;padding:22px!important}
html body.frm .dropzone:hover{border-color:#1D1D1F!important}
html body.frm .dropzone.drag{border-color:#022E13!important;background:#F5FFE6!important}

/* Step indicator: small, quiet */
html body.frm .step-dot{border-radius:50%!important;border:1px solid #D2D2D7!important;font-size:12px!important;color:#86868B!important;background:#fff!important;height:24px!important;width:24px!important}
html body.frm .step-dot.active,html body.frm li.active .step-dot{background:#022E13!important;border-color:#022E13!important;color:#fff!important}
html body.frm .step-label{font-size:13px!important;color:#86868B!important}
html body.frm .step-line{background:#E3E3E8!important}

/* Side column copy */
html body.frm main p{color:#6E6E73}
html body.frm main p strong,html body.frm main p b{color:#1D1D1F;font-weight:600}

/* Plan summary card on start.html */
html body.frm #plan-card,html body.frm .plan-summary{background:#FAFAFB!important;border:1px solid #E3E3E8!important;border-radius:14px!important;box-shadow:none!important}

/* Icon circles become quiet squares */
html body.frm span.rounded-full.bg-canvas{border-radius:8px!important;background:#F5F5F7!important}

/* Success state */
html body.frm #success span.rounded-full{border-radius:50%!important;background:#022E13!important}

/* Forms: force flat white surfaces (bg-white resolves to canvas on these pages) */
html body.frm [class*="rounded-[28px]"],
html body.frm [class*="rounded-[24px]"],
html body.frm [class*="rounded-[18px]"]{
  background:#fff!important;border:1px solid #E3E3E8!important;border-radius:14px!important;box-shadow:none!important}
html body.frm [class*="rounded-[18px]"]{border:0!important;border-radius:12px!important}
html body.frm .dropzone{border-radius:8px!important;border:1px dashed #D2D2D7!important;background:#FAFAFB!important}
html body.frm .step-dot{height:24px!important;width:24px!important}
html body.frm .step-dot.current{background:#022E13!important;border-color:#022E13!important;color:#fff!important}
html body.frm .step-dot.current ~ *,html body.frm li:has(.step-dot.current) .step-label{color:#1D1D1F!important}
/* Billing toggle: squared, not a pill */
html body.frm .bill-tab,html body.frm [class*="rounded-full"].border.border-line.bg-white{border-radius:6px!important}
html body.frm .bill-tab.active{background:#022E13!important;color:#fff!important;border-radius:6px!important}

/* Forms: beat the generic nd card-flattening rule (line ~144) */
html body.frm.nd main :is(article,details,figure,a,div,section,form)[class*="rounded-"][class*="bg-white"]:not(.pc-feat),
html body.frm.nd main :is(article,details,figure,a,div,section,form)[class*="rounded-"][class*="border"][class*="bg-white"]:not(.pc-feat){
  background:#fff!important;border:1px solid #E3E3E8!important;border-color:#E3E3E8!important;border-radius:14px!important;box-shadow:none!important}
html body.frm.nd main :is(div,section)[class*="rounded-"][class*="bg-canvas"]{
  background:#fff!important;border:1px solid #E3E3E8!important;border-radius:14px!important}
html body.frm.nd main [class*="rounded-[18px]"]{border:0!important;border-radius:12px!important;background:#FAFAFB!important}

/* Forms: card surfaces (class repeated for specificity over the nd flattening rules) */
html body.frm main .frm-card.frm-card.frm-card{
  background:#fff!important;border:1px solid #E3E3E8!important;border-color:#E3E3E8!important;
  border-radius:14px!important;box-shadow:none!important}
html body.frm main .frm-card.frm-card.frm-card [class*="rounded-"]:not(.pill span):not(input):not(select):not(textarea):not(button){border-color:#E3E3E8}

/* Forms: win over every nd flattening rule */
html body.frm main .frm-card.frm-card.frm-card.frm-card.frm-card.frm-card.frm-card.frm-card{
  background:#fff!important;border:1px solid #E3E3E8!important;border-color:#E3E3E8!important;
  border-radius:14px!important;box-shadow:none!important}
html body.frm main [class*="rounded-[18px]"].frm-card.frm-card.frm-card.frm-card.frm-card.frm-card.frm-card.frm-card{
  background:#FAFAFB!important;border:1px solid #E3E3E8!important;border-radius:12px!important}

/* Forms: no double frame, squared billing toggle */
html body.frm main [class*="rounded-[18px]"].frm-card.frm-card.frm-card.frm-card.frm-card.frm-card.frm-card.frm-card{
  background:transparent!important;border:0!important;border-radius:0!important;padding:0!important}
html body.frm main [class*="rounded-full"][class*="border-line"][class*="bg-white"][class*="p-1"]{border-radius:6px!important}
html body.frm main [class*="rounded-full"][class*="border-line"][class*="bg-white"][class*="p-1"] > *{border-radius:4px!important}

/* ===== 320px fixes (Oct 2026) ===== */

/* Belt and braces: the article sidebar is fluid on every small screen */
@media (max-width:1023px){
  html body.nd main>article .rs-aside,html body.nd main>article .rs-card{width:auto!important;max-width:100%!important;min-width:0!important}
}

/* Section top spacing that used to be inline (desktop values) */
html body.nd main .tpl-sec.tpl-pt72{padding-top:72px!important}
html body.nd main .tpl-sec.tpl-pt56{padding-top:56px!important}
html body.nd main .tpl-sec.tpl-pt48{padding-top:48px!important}
html body.nd main .tpl-sec.tpl-pt24{padding-top:24px!important}

/* Green accents: how it works cards and the counting numbers */
html body .hx-card{background:#F5FFE6!important}
html body .hx-card.on{background:#ECF9D6!important}
html body .hx-card .hx-row{background:#fff!important}
html body .hx-card .hx-chip{background:#fff!important}
html body .hx-card .hx-chip.on{background:#022E13!important;border-color:#022E13!important;color:#fff!important}
html body #numbers .display,html body #numbers .display span{color:#022E13!important}

/* FAQ: the plus turns white when the row is open (was lost on the dark green) */
html body.nd main details.faq-item[open] summary .faq-icon{
  background:#022E13!important;border-color:#022E13!important;color:#fff!important}
html[data-mode="dark"] body.nd main details.faq-item[open] summary .faq-icon{
  background:#94D04A!important;border-color:#94D04A!important;color:#022E13!important}