/** Shopify CDN: Minification failed

Line 196:5 Unexpected "'+CSS+'"
Line 198:5 Unexpected bad string token
Line 198:7 Unterminated string token
Line 199:28 Unterminated string token
Line 201:5 Unexpected bad string token
Line 201:7 Unterminated string token
Line 202:178 Unterminated string token
Line 203:7 Unterminated string token
Line 204:160 Unterminated string token
Line 205:7 Unterminated string token
... and 12 more hidden warnings

**/
/* Blog post templates (how-to, comparison, guide). Every rule is scoped to .bph. */
.bph{background:#fff;color:#212121;font-family:'Instrument Sans',sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.bph *,.bph *::before,.bph *::after{box-sizing:border-box}
.bph img{max-width:100%;height:auto;display:block}
.bph a{color:inherit;text-decoration:none}
.bph h1,.bph h2,.bph h3,.bph h4{font-size:inherit;font-weight:inherit;margin:0;line-height:inherit;letter-spacing:normal;text-transform:none;font-family:inherit;color:inherit}
.bph p{margin:0}
.bph ul,.bph ol{margin:0}
.bph p,.bph li,.bph figcaption,.bph summary,.bph .ans{text-wrap:pretty}
.bph img{max-width:100%;height:auto;display:block}
.bph a{color:inherit;text-decoration:none}
.bph p{margin:0}
.bph .wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 clamp(16px,3.4vw,48px)}
.bph .display,.bph .eyebrow,.bph h1,.bph h2,.bph h3{text-wrap:balance}
.bph .eyebrow{display:block;font-family:'Fraunces',serif;font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#86692A;line-height:1.45}
.bph .display{font-family:'Fraunces',serif;font-weight:500;color:#0F3521;letter-spacing:-.01em;line-height:1.14}
.bph .btn-hex{display:inline-flex;align-items:center;justify-content:center;gap:8px;clip-path:polygon(3% 50%, 10% 0%, 90% 0%, 97% 50%, 90% 100%, 10% 100%);background:#C9A94E;color:#0F3521;
  font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;
  min-height:46px;padding:0 30px;transition:background .18s,color .18s}
.bph .btn-hex:hover{background:#0F3521;color:#fff}
.bph .hexbadge{display:grid;place-items:center;clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);background:#0F3521;color:#C9A94E;font-family:'Fraunces',serif;font-weight:600}
.bph .jbar{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid #E6E1D6;box-shadow:0 10px 24px rgba(15,53,33,.07);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.bph .jb-in{display:flex;align-items:center;gap:16px;min-height:58px}
.bph .jb-lbl{flex:none;font-family:'Fraunces',serif;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#86692A}
.bph .jbar ol{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.bph .jbar ol::-webkit-scrollbar{display:none}
.bph .jbar a{display:flex;align-items:center;gap:8px;padding:7px 14px 7px 7px;border-radius:9999px;font-size:14px;font-weight:500;color:#5A5A53;
  white-space:nowrap;line-height:1.2;min-height:40px;transition:background .14s,color .14s}
.bph .jbar a:hover{background:#FAF8F4;color:#0F3521}
.bph .jbar a[aria-current="true"]{background:#0F3521;color:#fff}
.bph .jbar .n{flex:none;width:24px;height:26px;display:grid;place-items:center;clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);background:#EDEAE2;color:#0F3521;font-size:11px;font-weight:700;
  font-variant-numeric:tabular-nums}
.bph .jbar a[aria-current="true"] .n{background:#C9A94E;color:#0F3521}
.bph .jbar .n.dot{background:none}
.bph .jbar .n.dot::before{content:"";width:7px;height:8px;clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);background:currentColor}
.bph .jb-line{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:#C9A94E}
@media(max-width:1180px){.bph .jb-lbl{display:none}}
@media(max-width:1079px){.bph .jb-in{min-height:52px}}
.bph .hero{background:#FAF8F4;border-bottom:1px solid #E6E1D6}
.bph .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center;padding:clamp(28px,4vw,64px) 0}
@media(min-width:960px){.bph .hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(40px,5vw,80px)}}
.bph .hero-grid > *{min-width:0}
.bph .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:'Instrument Sans',sans-serif;font-size:13px;color:#7a7a72;margin-bottom:22px}
.bph .crumbs a{display:inline-flex;align-items:center;min-height:32px}
.bph .crumbs a:hover{color:#0F3521}
.bph .crumbs .cur{color:#212121;font-weight:600}
.bph .crumbs svg{width:12px;height:12px;opacity:.6}
.bph .hero .display{font-size:clamp(34px,3.5vw,54px);margin-top:12px;max-width:15.5em}
.bph .hero .lead{margin-top:20px;font-size:clamp(16px,1.35vw,18.5px);line-height:1.65;color:#5A5A53;max-width:52ch}
.bph .byline{display:flex;align-items:center;gap:14px;margin-top:26px}
.bph .byline .hexbadge{width:46px;height:52px;font-size:16px}
.bph .byline .who{font-weight:700;color:#0F3521;font-size:15px;line-height:1.3}
.bph .byline .when{font-size:14px;color:#5A5A53}
.bph .vps{list-style:none;margin:30px 0 0;padding:22px 0 0;border-top:1px solid #E6E1D6;display:grid;gap:16px 22px;grid-template-columns:repeat(2,minmax(0,1fr))}
.bph .vps li{display:flex;gap:12px;align-items:center;min-width:0}
.bph .vps .vi{flex:none;width:40px;height:46px;display:grid;place-items:center;clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);background:#0F3521;color:#C9A94E}
.bph .vps .vi svg{width:19px;height:19px}
.bph .vps b{display:block;font-size:14.5px;font-weight:700;color:#0F3521;line-height:1.3}
.bph .vps span{display:block;font-size:13.5px;color:#5A5A53;line-height:1.35}
.bph .hero-media{display:flex;justify-content:flex-end}
@media(max-width:479px){.bph .vps{grid-template-columns:minmax(0,1fr);gap:14px}}
.bph .hero-media .ph{position:relative;width:min(100%,460px);aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:#eee}
.bph .hero-media .ph img{width:100%;height:100%;object-fit:cover}
@media(max-width:959px){.bph .hero-media{justify-content:flex-start}.bph .hero-media .ph{width:100%;aspect-ratio:4/3}}
.bph .layout{display:grid;gap:32px;grid-template-columns:minmax(0,1fr);padding:clamp(36px,4.6vw,76px) 0 clamp(56px,6vw,96px)}
.bph .layout > *{min-width:0}
@media(min-width:1080px){.bph .layout{grid-template-columns:minmax(0,270px) minmax(0,1fr);gap:clamp(44px,4.8vw,80px)}}
.bph .rail{display:none}
@media(min-width:1080px){.bph .rail{display:flex;flex-direction:column;justify-content:safe center;gap:26px;position:sticky;top:var(--rail-top,200px);align-self:start;
    max-height:calc(100vh - var(--rail-top,200px) - 16px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#D9D3C4 transparent;padding-right:6px}
  .bph .rail::-webkit-scrollbar{width:6px}.bph .rail::-webkit-scrollbar-thumb{background:#D9D3C4;border-radius:6px}.bph .rail::-webkit-scrollbar-track{background:transparent}}
.bph .prod{min-width:0}
.bph .prod .well{display:block;position:relative;background:#fff;border:1px solid #E6E1D6;border-radius:8px;aspect-ratio:1/1;overflow:hidden}
.bph .prod .well img{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);object-fit:contain;transition:transform .3s ease}
.bph .prod .well:hover img{transform:scale(1.04)}
.bph .prod .pn{font-family:'Fraunces',serif;font-weight:500;font-size:17px;line-height:1.3;color:#0F3521;margin-top:12px}
.bph .prod .pn a:hover{color:#27893A}
.bph .prod .pp{font-size:15px;font-weight:600;color:#86692A;margin-top:3px}
.bph .prod .pa{display:flex;align-items:center;gap:14px;margin-top:12px}
.bph .prod .pa .btn-hex{flex:1;min-height:44px;padding:0 18px}
.bph .prod .pa .det{font-size:14px;font-weight:600;color:#0F3521;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
@media(min-width:1080px) and (max-height:980px){.bph .prod .well{aspect-ratio:auto;height:180px}}
@media(min-width:1080px) and (max-height:860px){.bph .prod .well{height:150px}.bph .prod .pn{font-size:16px;margin-top:9px}.bph .prod .pa{margin-top:9px}.bph .rail{gap:20px}}
@media(min-width:1080px) and (max-height:760px){.bph .prod .well{height:112px}}
.bph .inprods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:8px 0 44px;padding:20px;background:#FAF8F4;border-radius:8px}
.bph .inprods .eyebrow{grid-column:1/-1}
.bph .inprods .prod{display:flex;flex-direction:column}
.bph .inprods .pa{margin-top:auto;padding-top:12px;flex-wrap:wrap}
.bph .inprods .pa .det{display:none}
.bph .inprods .well{aspect-ratio:1/1}
@media(min-width:1080px){.bph .inprods{display:none}}
.bph .art{font-size:17px;line-height:1.75;color:#5A5A53}
.bph .art p{margin:0 0 18px}
.bph .art section,.bph .art [id]{scroll-margin-top:var(--anchor-top,200px)}
.bph .art a{color:#1D5C32;text-decoration:underline;text-underline-offset:3px}
.bph .art a.btn-hex,.bph .art .prod a{text-decoration:none}
.bph .art .prod .pn a{color:#0F3521}
.bph .art a.btn-hex{color:#0F3521}
.bph .art a.btn-hex:hover{color:#fff}
.bph .art .eyebrow{margin-bottom:8px}
.bph .art .display{font-size:clamp(27px,2.6vw,36px);margin:0 0 18px}
.bph .intro p:first-child{font-size:19px;color:#212121}
.bph .need{margin:36px 0 54px;background:#FAF8F4;border:1px solid #E6E1D6;border-radius:8px;padding:clamp(22px,3vw,34px)}
.bph .need .display{font-size:clamp(23px,2.2vw,29px)}
.bph .need ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.bph .need ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bph .need li{display:flex;gap:12px;background:#fff;border-radius:8px;padding:16px}
.bph .need li .ck{flex:none;width:26px;height:30px;display:grid;place-items:center;clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);background:#27893A;color:#fff}
.bph .need li .ck svg{width:14px;height:14px}
.bph .need b{display:block;font-weight:700;color:#0F3521;font-size:15.5px;line-height:1.35}
.bph .need span{display:block;font-size:14.5px;line-height:1.5}
.bph .callout{display:flex;gap:14px;border-radius:8px;padding:18px 20px;margin:6px 0 18px;font-size:15.5px;line-height:1.6}
.bph .callout svg{flex:none;width:22px;height:22px;margin-top:2px}
.bph .callout b{display:block;font-weight:700;margin-bottom:2px}
.bph .callout.tip{background:#EEF5EE;color:#1E3A27;border-left:3px solid #27893A}
.bph .callout.tip svg{color:#27893A}
.bph .callout.warn{background:#FBF4E4;color:#4A3A12;border-left:3px solid #C9A94E}
.bph .callout.warn svg{color:#86692A}
.bph .art figure{margin:8px 0 24px;max-width:560px}
.bph .art figure img{width:100%;height:auto;border-radius:8px;border:1px solid #E6E1D6}
.bph .art figcaption{font-size:13.5px;color:#65655e;margin-top:10px}
.bph .art ul.dots{margin:0 0 18px;padding-left:0;list-style:none}
.bph .art ul.dots li{position:relative;padding-left:22px;margin-bottom:8px}
.bph .art ul.dots li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:9px;clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);background:#27893A}
.bph .outro{margin-top:52px}
.bph .pfaq{margin-top:64px}
.bph .pfaq .display{margin-bottom:22px}
.bph .pfaq details{border-top:1px solid #E6E1D6}
.bph .pfaq details:last-of-type{border-bottom:1px solid #E6E1D6}
.bph .pfaq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:44px;
  padding:20px 0;font-family:'Fraunces',serif;font-weight:500;font-size:clamp(17px,1.6vw,19.5px);line-height:1.4;color:#0F3521}
.bph .pfaq summary::-webkit-details-marker{display:none}
.bph .pfaq .pm{flex:none;width:30px;height:34px;clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);background:#F4F1EA;position:relative;transition:background .18s}
.bph .pfaq .pm::before,.bph .pfaq .pm::after{content:"";position:absolute;left:50%;top:50%;background:#0F3521;transform:translate(-50%,-50%)}
.bph .pfaq .pm::before{width:11px;height:1.6px}
.bph .pfaq .pm::after{width:1.6px;height:11px;transition:transform .18s}
.bph .pfaq details[open] .pm{background:#C9A94E}
.bph .pfaq details[open] .pm::after{transform:translate(-50%,-50%) scaleY(0)}
.bph .pfaq .ans{padding:0 48px 22px 0;font-size:16px}
.bph .fposts{margin-top:72px}
.bph .fposts .head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px}
.bph .fposts .head .display{margin:0}
.bph .fposts .head a.all{font-size:14.5px;font-weight:600;color:#0F3521;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.bph .fposts .grid{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.bph .fposts .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bph .art a.pc{display:flex;flex-direction:column;background:#fff;border:1px solid #E6E1D6;border-radius:8px;overflow:hidden;color:#212121;text-decoration:none;
  transition:box-shadow .2s,transform .2s}
.bph .art a.pc:hover{box-shadow:0 12px 28px rgba(15,53,33,.1);transform:translateY(-2px)}
.bph .pc .im{aspect-ratio:16/10;overflow:hidden;background:#F4F1EA}
.bph .pc .im img{width:100%;height:100%;object-fit:cover}
.bph .pc .bd{padding:16px 16px 18px;display:flex;flex-direction:column;gap:12px;flex:1}
.bph .pc h3{font-family:'Fraunces',serif;font-weight:500;font-size:17px;line-height:1.32;color:#0F3521;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bph .pc .by{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid #E6E1D6}
.bph .pc .by .hexbadge{width:30px;height:34px;font-size:11px}
.bph .pc .by b{display:block;font-size:13.5px;font-weight:700;color:#0F3521;line-height:1.25}
.bph .pc .by span{display:block;font-size:12.5px;color:#7a7a72;line-height:1.25}
@media(max-width:639px){.bph .crumbs a{min-height:44px;min-width:44px;justify-content:center}.bph .vps span,.bph .art figcaption,.bph .need span,.bph .byline .when,.bph .pc .by span{font-size:15.5px}.bph .pfaq details + details{margin-top:8px}}
.bph .spine{position:relative;padding-left:84px}
.bph .spine::before{content:"";position:absolute;left:27px;top:10px;bottom:10px;width:2px;background:#E6E1D6}
.bph .spine-fill{position:absolute;left:27px;top:10px;width:2px;height:0;background:linear-gradient(#27893A,#C9A94E)}
.bph .sstep{position:relative;padding:0 0 50px}
.bph .sstep:last-child{padding-bottom:6px}
.bph .sstep + .sstep{border-top:1px solid #E6E1D6;padding-top:44px}
.bph .snode{position:absolute;left:-84px;top:0;width:56px;height:62px;display:grid;place-items:center;clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);background:#E6E1D6;transition:background .25s}
.bph .snode i{width:52px;height:58px;display:grid;place-items:center;clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);background:#fff;color:#0F3521;font-style:normal;
  font-family:'Fraunces',serif;font-weight:600;font-size:20px;transition:background .25s,color .25s}
.bph .sstep + .sstep .snode{top:44px}
.bph .sstep.passed .snode,.bph .sstep.passed .snode i{background:#0F3521;color:#C9A94E}
.bph .sstep.now .snode{background:#C9A94E}
.bph .sstep.now .snode i{background:#C9A94E;color:#0F3521}
@media(max-width:640px){.bph .spine{padding-left:56px}.bph .spine::before,.bph .spine-fill{left:18px}.bph .snode{left:-56px;width:38px;height:42px}.bph .snode i{width:34px;height:38px;font-size:15px}}
.bph .srcs{margin-top:28px;padding-top:18px;border-top:1px solid #E6E1D6}
.bph .srcs-k{font-family:'Fraunces',serif;font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#86692A;margin:0 0 8px!important}
.bph .srcs ol{margin:0;padding-left:20px;font-size:15px;line-height:1.6}
.bph .srcs li{margin-bottom:8px}
@media(max-width:639px){.bph .srcs ol{font-size:16px}.bph .srcs li a{display:inline-flex;align-items:center;min-height:44px}}
.bph .inprods .pn a{display:flex;align-items:center;min-height:44px}
.bph .sstep figure,.bph .ch figure{max-width:440px}
.bph '+CSS+'
:host{all:initial}
.bph '+
    '.box{position:relative}
.bph .dev{position:absolute;left:0;top:0;transform-origin:0 0;display:flex;flex-direction:column}
.bph '+
    '.dev.m{width:426px;height:897px;padding:12px;border-radius:62px;background:#15181d;box-shadow:0 18px 40px rgba(10,15,22,.28),inset 0 0 0 2px #2c323b,inset 0 0 0 4px #0b0d10}
.bph '+
    '.dev.t{width:856px;height:1228px;padding:24px 18px;border-radius:30px;background:#14181e;box-shadow:0 18px 40px rgba(10,15,22,.28),inset 0 0 0 2px #2a3038}
.bph '+
    '.sb{flex:none;height:54px;display:none;align-items:center;justify-content:space-between;padding:0 30px;background:#fff;color:#000;border-radius:50px 50px 0 0;font:600 16px -apple-system,BlinkMacSystemFont,sans-serif;position:relative}
.bph '+
    '.m .sb{display:flex}
.bph .isl{position:absolute;left:50%;top:12px;transform:translateX(-50%);width:76px;height:34px;border-radius:999px;background:#000}
.bph '+
    '.ic{display:flex;gap:5px;align-items:center}
.bph .ic svg{height:12px;width:auto;fill:#000}
.bph '+
    '.cam{display:none;position:absolute;top:9px;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;background:#2c333c}
.bph .t .cam{display:block}
.bph '+
    'iframe{flex:1;min-height:0;width:100%;border:0;display:block;background:#fff}
.bph .m iframe{border-radius:0 0 50px 50px}
.bph .t iframe{border-radius:8px}
.bph .tldr{margin:36px 0 8px;scroll-margin-top:var(--anchor-top,200px)}
.bph .ch{margin-top:60px}
.bph .ch .eyebrow{margin-bottom:8px}
.bph .ch .display{font-size:clamp(27px,2.6vw,36px);margin:0 0 18px}
.bph .ch > p:last-child{margin-bottom:0}
.bph .take{display:flex;gap:14px;margin:8px 0 0;padding:18px 20px;border-radius:8px;background:#FAF8F4;border-left:3px solid #C9A94E;font-size:16px;line-height:1.6;color:#212121}
.bph .take .ti{flex:none;width:30px;height:34px;display:grid;place-items:center;clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);background:#0F3521;color:#C9A94E}
.bph .take .ti svg{width:16px;height:16px}
.bph .take b{display:block;font-family:'Fraunces',serif;font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#86692A;margin-bottom:2px}
.bph .deflist{display:grid;gap:12px;margin:4px 0 22px;grid-template-columns:minmax(0,1fr)}
@media(min-width:720px){.bph .deflist{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bph .deflist div{border:1px solid #E6E1D6;border-radius:8px;padding:16px;background:#fff;min-width:0}
.bph .deflist h3{font-family:'Fraunces',serif;font-weight:500;font-size:18px;color:#0F3521;line-height:1.3;margin-bottom:6px}
.bph .deflist p{margin:0;font-size:15.5px;line-height:1.55}
.bph .bigstat{display:flex;align-items:center;gap:20px;margin:6px 0 22px;padding:20px 22px;border-radius:8px;background:#0F3521;color:#fff}
.bph .bigstat b{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(40px,4vw,54px);line-height:1;color:#C9A94E}
.bph .bigstat span{font-size:16px;line-height:1.5;color:rgba(255,255,255,.88)}
.bph .callout.warn{margin-top:0}
.bph .outro{margin-top:64px}
@media(max-width:639px){.bph .mc span:not(.hexbadge){font-size:15.5px}}
.bph .ch figure{max-width:420px}
.bph .tldr-p{background:#FAF8F4;border:1px solid #E6E1D6;border-radius:8px;padding:clamp(22px,3vw,34px)}
.bph .tldr-p .display{font-size:clamp(23px,2.2vw,29px);margin:0 0 16px}
.bph .tldr-p ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bph .tldr-p li{display:flex;gap:12px;font-size:16.5px;line-height:1.55;color:#212121}
.bph .tldr-p li .ck{flex:none;width:24px;height:27px;display:grid;place-items:center;clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);background:#27893A;color:#fff;margin-top:1px}
.bph .tldr-p li .ck svg{width:13px;height:13px}
.bph .ch{padding-top:44px;border-top:1px solid #E6E1D6}
.bph .ch .take{margin-top:6px}
.bph .blk{margin-top:64px}
.bph .blk > .display{margin-bottom:22px}
.bph .win{display:inline-flex;align-items:center;gap:6px;border-radius:9999px;padding:5px 12px;font-size:12.5px;font-weight:700;
  white-space:nowrap;background:#0F3521;color:#fff}
.bph .win.b{background:#EDEAE2;color:#212121}
.bph .display-s{font-family:'Fraunces',serif;font-weight:500;color:#0F3521;font-size:clamp(21px,2vw,25px);line-height:1.25;margin:0}
.bph .face{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.bph .face{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bph .fc{border:1px solid #E6E1D6;border-radius:8px;overflow:hidden;background:#fff;min-width:0}
.bph .fc.a{border:2px solid #0F3521}
.bph .fc .im{height:210px;background:#fff;position:relative;border-bottom:1px solid #E6E1D6}
.bph .fc .im img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:contain}
.bph .fc .ph{position:absolute;inset:0;display:grid;place-items:center;background:repeating-linear-gradient(135deg,#FAF8F4 0 14px,#F4F1EA 14px 28px)}
.bph .fc .ph span{width:64px;height:72px;display:grid;place-items:center;clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);background:#B9B5AA;color:#fff;
  font-family:'Fraunces',serif;font-size:26px;font-weight:600}
.bph .fc .tag{position:absolute;top:14px;left:14px;z-index:1;clip-path:polygon(3% 50%, 10% 0%, 90% 0%, 97% 50%, 90% 100%, 10% 100%);background:#C9A94E;color:#0F3521;padding:6px 18px;
  font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
.bph .fc .bd{padding:18px 20px 20px}
.bph .fc .nm{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.bph .fc .nm b{font-family:'Fraunces',serif;font-size:20px;font-weight:500;color:#0F3521}
.bph .fc .nm span{color:#5A5A53;font-size:15px}
.bph .fc dl{margin:14px 0 0}
.bph .fc dl div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid #E6E1D6;font-size:15px}
.bph .fc dt{color:#5A5A53}
.bph .fc dd{margin:0;color:#212121;text-align:right}
.bph .fc .sc{margin-top:14px;display:flex;align-items:center;justify-content:space-between;font-size:14.5px;color:#5A5A53}
.bph .fc .sc b{font-family:'Fraunces',serif;font-size:30px;font-weight:500;color:#212121}
.bph .fc.a .sc b{color:#0F3521}
.bph .tbl-wrap{border:1px solid #E6E1D6;border-radius:8px}
@media(min-width:640px) and (max-width:1023px){.bph .tbl-wrap{overflow-x:auto}.bph .cmp{min-width:560px}}
.bph .cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:15.5px}
.bph .cmp th,.bph .cmp td{padding:14px 18px;text-align:left;vertical-align:middle;border-top:1px solid #E6E1D6}
.bph .cmp thead th{border-top:0;font-family:'Fraunces',serif;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#86692A;background:#fff}
.bph .cmp thead th:first-child{border-top-left-radius:8px}
.bph .cmp thead th:last-child{border-top-right-radius:8px}
.bph .cmp thead th.a{color:#0F3521}
.bph .cmp tbody th{font-weight:400;color:#5A5A53;width:34%}
.bph .cmp td{color:#212121}
.bph .cmp td.a{background:#EEF5EE}
.bph .cmp .cell{display:flex;align-items:center;gap:9px}
.bph .mk{width:18px;height:18px;flex:none}
.bph .mk.y{color:#27893A}
.bph .mk.n{color:#B9B5AA}
.bph .best{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.bph .best{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
.bph .bf{border-radius:8px;padding:24px;min-width:0}
.bph .bf.a{background:#0F3521;color:#fff}
.bph .bf.b{background:#FAF8F4;border:1px solid #E6E1D6}
.bph .bf .k{font-family:'Fraunces',serif;font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin-bottom:6px}
.bph .bf.a .k{color:#C9A94E}
.bph .bf.b .k{color:#86692A}
.bph .bf .t{font-family:'Fraunces',serif;font-weight:500;font-size:23px;line-height:1.25}
.bph .bf.a .t{color:#fff}
.bph .bf.b .t{color:#0F3521}
.bph .bf ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.bph .bf li{display:flex;gap:10px;font-size:16px;line-height:1.55}
.bph .bf li svg{flex:none;width:18px;height:18px;margin-top:4px;color:#C9A94E}
.bph .bf.b p.x{font-size:16px;line-height:1.6;color:#5A5A53;margin:12px 0 0}
.bph .pcs{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.bph .pcs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bph .pcl{border:1px solid #E6E1D6;border-radius:8px;padding:22px 24px;min-width:0}
.bph .pcl.a{border:2px solid #0F3521}
.bph .pcl .ph3{display:flex;justify-content:space-between;align-items:center;gap:10px}
.bph .pcl .ph3 .eyebrow{margin:0}
.bph .pcl .grp{margin-top:14px}
.bph .pcl .gk{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5A5A53;margin-bottom:6px}
.bph .pcl ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bph .pcl li{display:flex;gap:10px;font-size:16px;line-height:1.55}
.bph .pcl li svg{flex:none;width:16px;height:16px;margin-top:5px;color:#27893A}
.bph .pcl li.con svg{color:#A39F94}
@media(max-width:639px){.bph .r-k{font-size:15.5px}}
.bph .verdict{margin-top:40px;border:1px solid #E6E1D6;border-radius:8px;background:#FAF8F4;padding:clamp(22px,3vw,34px)}
.bph .v-top{display:grid;gap:24px;grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:720px){.bph .v-top{grid-template-columns:auto minmax(0,1fr)}}
.bph .rings{display:flex;gap:18px}
.bph .ring{--p:0;width:122px;height:122px;border-radius:50%;display:grid;place-items:center;position:relative;
  background:conic-gradient(#0F3521 calc(var(--p)*1%),#EDEAE2 0)}
.bph .ring.b{background:conic-gradient(#B9B5AA calc(var(--p)*1%),#EDEAE2 0)}
.bph .ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:#FAF8F4}
.bph .ring div{position:relative;text-align:center;line-height:1.1}
.bph .ring b{display:block;font-family:'Fraunces',serif;font-weight:500;font-size:34px;color:#0F3521}
.bph .ring.b b{color:#212121}
.bph .ring span{font-size:13px;color:#5A5A53}
.bph .verdict .display{font-size:clamp(25px,2.4vw,32px);margin:0 0 10px}
.bph .verdict p:not(.display):not(.eyebrow){margin:0;font-size:16px}
.bph .tally{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding-top:20px;border-top:1px solid #E6E1D6}
.bph .tally .t{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #E6E1D6;border-radius:9999px;padding:5px 13px 5px 5px;font-size:14px;color:#5A5A53}
.bph .tally .t i{width:24px;height:27px;display:grid;place-items:center;clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);font-style:normal;font-size:11px;font-weight:700;color:#fff;background:#0F3521}
.bph .tally .t.b i{background:#A39F94}
.bph .crit{border-top:1px solid #E6E1D6;padding:30px 0 6px}
.bph .crit:first-of-type{border-top:0;padding-top:4px}
.bph .crit-h{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}
.bph .crit-h .eyebrow{margin-bottom:4px}
.bph .bars{display:grid;gap:9px;margin-bottom:18px}
.bph .bar{display:grid;grid-template-columns:132px minmax(0,1fr) 40px;align-items:center;gap:12px;font-size:14.5px}
.bph .bar .lb{color:#5A5A53;white-space:nowrap}
.bph .bar .tr{height:12px;border-radius:9999px;background:#F4F1EA;overflow:hidden}
.bph .bar .tr i{display:block;height:100%;border-radius:9999px;background:linear-gradient(90deg,#1D5C32,#27893A)}
.bph .bar.b .tr i{background:#B9B5AA}
.bph .bar .vl{text-align:right;font-variant-numeric:tabular-nums;color:#212121;font-weight:700}
@media(max-width:560px){.bph .crit-h{flex-direction:column;gap:10px}.bph .bar{grid-template-columns:minmax(0,1fr) 40px;row-gap:4px}.bph .bar .lb{grid-column:1/-1;font-size:15.5px}.bph .rings{gap:12px}.bph .ring{width:104px;height:104px}.bph .ring b{font-size:28px}}
.bph .verdict .vtx{margin:0;font-size:16.5px}
.bph .tally .t.b i{background:#C9A94E;color:#0F3521}
.bph .tally .t.tie i{background:#A39F94}
.bph .win.b{background:#C9A94E;color:#0F3521}
.bph .win.tie{background:#EDEAE2;color:#212121}
.bph .fc .ph.a{background:repeating-linear-gradient(135deg,#EEF5EE 0 14px,#E3EEE4 14px 28px)}
.bph .fc .ph.a span{background:#0F3521;color:#C9A94E}
.bph .fc .ph span{width:92px;height:104px;font-size:21px}
.bph .fc .ph.b span{background:#C9A94E;color:#0F3521}
.bph .cmp .cell.plain{display:block}
.bph .nw{white-space:nowrap}
.bph .cmp tbody td{vertical-align:top}
@media(max-width:639px){.bph .cmp{font-size:15.5px}.bph .cmp thead{display:none}.bph .cmp tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.bph .cmp tbody th{grid-column:1/-1;width:auto;padding:14px 14px 4px;color:#0F3521;font-weight:600}.bph .cmp td{border-top:0;padding:8px 14px 14px;min-width:0}.bph .cmp td::before{content:attr(data-l);display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5A5A53;margin-bottom:4px}.bph .cmp td.a::before{color:#0F3521}.bph .cmp .cell{align-items:flex-start;gap:6px}.bph .cmp .mk{width:15px;height:15px;margin-top:4px}}
/* Shopify adaptations */
.bph .jbar{position:fixed;left:0;right:0;top:var(--bph-hdr,0px);z-index:40}
.bph .jbar.jb-on{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease}
.bph .jbar .wrap{position:relative}
.bph .art h2:not(.eyebrow):not(.display){display:block;font-family:'Fraunces',serif;font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#86692A;line-height:1.45;margin-bottom:8px}
.bph .art h3{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(20px,1.9vw,23px);line-height:1.3;color:#0F3521;margin:26px 0 10px}
.bph .art .deflist h3{font-size:18px;margin:0 0 6px}
/* Lists written in the post body (not the template's own lists) */
.bph .intro ul,.bph .intro ol,.bph .sstep ul,.bph .sstep ol,.bph .ch > ul,.bph .ch > ol,.bph .crit ul,.bph .crit ol,.bph .outro > ul,.bph .outro > ol{margin:0 0 18px;padding-left:22px}
.bph .intro li,.bph .sstep li,.bph .ch > ul li,.bph .ch > ol li,.bph .crit li,.bph .outro > ul li,.bph .outro > ol li{margin-bottom:8px}
.bph .sstep ul,.bph .ch > ul,.bph .crit ul,.bph .intro ul{padding-left:0;list-style:none}
.bph .sstep ul li,.bph .ch > ul li,.bph .crit ul li,.bph .intro ul li{position:relative;padding-left:22px}
.bph .sstep ul li::before,.bph .ch > ul li::before,.bph .crit ul li::before,.bph .intro ul li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:9px;clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);background:#27893A}
.bph .art blockquote{margin:6px 0 18px;padding:18px 20px;border-radius:8px;background:#EEF5EE;color:#1E3A27;border-left:3px solid #27893A;font-size:15.5px;line-height:1.6}
.bph .art blockquote p:last-child{margin-bottom:0}
.bph .art p > img{border-radius:8px;border:1px solid #E6E1D6;max-width:440px;width:100%}
.bph .crit-h .display-s{margin-top:2px}
.bph .vps{padding-left:0}
.bph .pfaq .ans p:last-child{margin-bottom:0}
.bph .fposts .grid .pc .im{display:block}
@media(max-width:639px){.bph .vps span,.bph .art figcaption,.bph .need span,.bph .byline .when,.bph .pc .by span{font-size:15.5px}}
.bph .callout strong,.bph .take strong{display:block;font-weight:700;margin-bottom:2px}
.bph .take strong{font-family:'Fraunces',serif;font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#86692A}
.bph .bigstat strong{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(40px,4vw,54px);line-height:1;color:#C9A94E;flex:none}
.bph .cmp,.bph .cmp th,.bph .cmp td{white-space:normal}
.bph .art h3.eyebrow{font-family:'Fraunces',serif;font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#86692A;line-height:1.45;margin:0 0 4px}
.bph .pcl .ph3 h3.eyebrow{margin:0}
.bph .btn-hex{white-space:nowrap}
.bph .inprods .pa .btn-hex{flex:1 1 auto;padding:0 12px;letter-spacing:1px;font-size:12px}
.bph .fc dt{white-space:nowrap}