/* ============================================================ BEHAF: shared layer for every page except the homepage. Loaded LAST in , after the v2 and v3 inline sheets that inner pages still carry. It does two jobs: 1. Token bridge. Older page CSS and thousands of inline style="" attributes read the v2 tokens (--font-heading, --color-text-main, --space-*). Re-pointing those tokens at v3 values moves every page onto Cabinet Grotesk + Satoshi and the tinted palette without touching page markup. 2. One article system, scoped to .page-article (the
of every inner page): type scale, measure, lists, tables, callouts, FAQ, TOC, stats, CTA and the category hero card. Class names from all five old templates map onto the same few components. Tokens come from the v3 :root in each page; fallbacks are the same values so the sheet also works on its own. ============================================================ */ /* ---------- 1. token bridge ---------- */ :root{ --font-heading:"Cabinet Grotesk",ui-sans-serif,system-ui,sans-serif; --font-family:"Satoshi",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --color-primary:#008854; --color-primary-dark:#00754A; --color-secondary:#E8EDE8; --color-accent:#DAEEE2; --color-text-main:#0C1410; --color-text-muted:#4A5550; --color-text-light:#5F6963; --color-bg:#F3F5F2; --color-bg-alt:#FBFCFA; --color-border:#DAE1DA; --radius-lg:14px; --radius-xl:24px; --shadow-sm:0 1px 2px rgba(6,36,23,.06),0 1px 1px rgba(6,36,23,.04); --shadow-md:0 14px 34px -16px rgba(6,36,23,.18),0 3px 8px -4px rgba(6,36,23,.06); --shadow-lg:0 14px 34px -16px rgba(6,36,23,.18),0 3px 8px -4px rgba(6,36,23,.06); --shadow-xl:0 44px 90px -34px rgba(6,36,23,.38),0 14px 30px -14px rgba(6,36,23,.14); --pa-measure:720px; --pa-wide:1040px; } html body{background:var(--paper,#F3F5F2);color:var(--ink-2,#27312C);font-family:var(--f-body,"Satoshi",system-ui,sans-serif)} /* ---------- 2. page frame ---------- */ main.page-article{ display:block;box-sizing:border-box;width:100%;max-width:var(--pa-wide); margin:0 auto;padding:clamp(40px,6vw,88px) var(--gut,clamp(20px,4vw,40px)) clamp(72px,9vw,128px); background:transparent; } /* inner wrappers from old templates collapse into the one frame */ .page-article .container,.page-article article.wrap,.page-article .wrap,.page-article header.head, .page-article .blog-content,.page-article .content-body,.page-article .legal-card{ max-width:none;width:auto;margin-left:0;margin-right:0;padding-left:0;padding-right:0; background:transparent;border:0;box-shadow:none; } /* reading measure: prose is narrow, figures/tables may go wide */ .page-article > *, .page-article .blog-content > *,.page-article .content-body > *,.page-article article.wrap > *, .page-article .container > *,.page-article > div:not([class]){max-width:var(--pa-measure);margin-left:auto;margin-right:auto} .page-article .breadcrumb-bar > *,.page-article .blog-meta > *,.page-article .meta-row > *{margin:0!important;max-width:none} .page-article .pa-wide,.page-article table,.page-article .table-wrapper,.page-article .table-wrap, .page-article .comparison-table-wrapper,.page-article .stats-grid,.page-article .step-grid, .page-article .pa-hero,.page-article .chat-mockup,.page-article .toc-box,.page-article figure{max-width:var(--pa-measure)} /* ---------- 3. type ---------- */ .page-article h1,.page-article .blog-title,.page-article .hero-title{ font-family:var(--f-display,"Cabinet Grotesk",sans-serif)!important;font-weight:800!important; font-size:clamp(2.25rem,1.2rem + 3.4vw,3.5rem)!important;line-height:1.02!important; letter-spacing:-.035em!important;color:var(--ink,#0C1410)!important; margin:0 auto 20px!important;text-wrap:balance;text-align:left!important; } .page-article h2{ font-family:var(--f-display,"Cabinet Grotesk",sans-serif)!important;font-weight:800!important; font-size:clamp(1.65rem,1.2rem + 1.5vw,2.25rem)!important;line-height:1.08!important; letter-spacing:-.028em!important;color:var(--ink,#0C1410)!important; margin-top:clamp(48px,6vw,72px)!important;margin-bottom:16px!important;text-wrap:balance; scroll-margin-top:calc(var(--nav-h,68px) + 20px); } .page-article h3{ font-family:var(--f-display,"Cabinet Grotesk",sans-serif)!important;font-weight:700!important; font-size:clamp(1.2rem,1.05rem + .5vw,1.45rem)!important;line-height:1.2!important; letter-spacing:-.015em!important;color:var(--ink,#0C1410)!important; margin-top:32px!important;margin-bottom:10px!important; scroll-margin-top:calc(var(--nav-h,68px) + 20px); } .page-article h4{font-family:var(--f-body,"Satoshi",sans-serif)!important;font-weight:700!important;font-size:1.05rem!important;color:var(--ink,#0C1410)!important;margin:20px 0 6px!important} .page-article p,.page-article li,.page-article dd{ font-family:var(--f-body,"Satoshi",sans-serif);font-size:var(--t-body,1.0625rem);line-height:1.72;color:var(--ink-2,#27312C); } .page-article p{margin-top:0;margin-bottom:18px} .page-article .lead,.page-article .hero-lead,.page-article .blog-content > p:first-child{ font-size:var(--t-lead,1.2rem)!important;line-height:1.6!important;color:var(--ink-3,#4A5550)!important;font-weight:500; } .page-article strong,.page-article b{color:var(--ink,#0C1410);font-weight:700} .page-article a:not(.btn):not([class*="btn"]):not(.hover-scale){ color:var(--accent-text,#00754A);text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:3px;text-decoration-color:rgba(0,117,74,.35); transition:text-decoration-color var(--d-ui,200ms) var(--ease,ease); } .page-article a:not(.btn):not([class*="btn"]):not(.hover-scale):hover{text-decoration-color:currentColor} .page-article ul,.page-article ol{padding-left:1.35em;margin:0 auto 22px} .page-article li{margin-bottom:8px} .page-article li::marker{color:var(--accent,#008854)} .page-article hr{border:0;border-top:1px solid var(--line,#DAE1DA);margin:48px auto} .page-article blockquote{ margin:32px auto;padding:4px 0 4px 22px;border-left:3px solid var(--accent,#008854); font-family:var(--f-display,"Cabinet Grotesk",sans-serif);font-size:1.3rem;line-height:1.4;color:var(--ink,#0C1410); } .page-article img{max-width:100%;height:auto;border-radius:var(--r-in,14px)} .page-article code{font-size:.9em;background:var(--paper-2,#E8EDE8);padding:.1em .35em;border-radius:6px} /* meta row under the H1: author, dates, read time */ .page-article .blog-meta,.page-article .meta-row{ display:flex!important;flex-wrap:wrap;gap:8px!important;align-items:center; margin:0 auto 32px!important;padding:0!important;background:none!important;border:0!important; font-size:var(--t-xs,.8125rem)!important;color:var(--ink-3,#4A5550)!important; } .page-article .blog-meta > *,.page-article .meta-row > *{ background:var(--surface,#FBFCFA)!important;border:1px solid var(--line,#DAE1DA)!important; border-radius:var(--r-pill,999px)!important;padding:6px 12px!important;color:var(--ink-3,#4A5550)!important; font-size:var(--t-xs,.8125rem)!important;font-weight:500!important; } .page-article .breadcrumb-bar{font-size:var(--t-xs,.8125rem);color:var(--ink-4,#5F6963);margin-bottom:20px} .page-article .badge{ display:inline-flex;align-items:center;gap:6px;background:var(--g-50,#EDF6F0);color:var(--g-700,#005C39); border:1px solid var(--g-100,#DAEEE2);border-radius:var(--r-pill,999px);padding:5px 12px; font-size:var(--t-xs,.8125rem);font-weight:700;letter-spacing:0;text-transform:none; } /* "back to blog" links and similar */ .page-article a[href="/blog"]:first-child{font-size:var(--t-sm,.9375rem)} /* ---------- 4. buttons ---------- */ .page-article .btn,.page-article a[class*="btn-primary"],.page-article .cta-button{ display:inline-flex!important;align-items:center;justify-content:center;gap:10px; min-height:52px;padding:0 26px!important;border-radius:var(--r-pill,999px)!important; background:var(--accent,#008854)!important;color:#fff!important;border:0!important; font:600 1rem/1 var(--f-body,"Satoshi",sans-serif)!important;text-decoration:none!important; box-shadow:none;transition:background var(--d-ui,200ms) var(--ease,ease),box-shadow var(--d-ui,200ms) var(--ease,ease),scale var(--d-press,120ms) var(--ease-out,ease); } .page-article .btn:hover,.page-article a[class*="btn-primary"]:hover{background:var(--accent-hover,#00754A)!important;box-shadow:0 14px 30px -12px rgba(0,136,84,.55)} .page-article .btn:active{scale:.97} .page-article .btn-secondary,.page-article a.btn-secondary{ background:transparent!important;color:var(--ink,#0C1410)!important; box-shadow:inset 0 0 0 1.5px var(--line-2,#C5CEC6)!important; } .page-article .btn-secondary:hover{box-shadow:inset 0 0 0 1.5px var(--ink,#0C1410)!important;background:transparent!important} /* ---------- 5. tables: one style everywhere ---------- */ .page-article .table-wrapper,.page-article .table-wrap,.page-article .comparison-table-wrapper,.page-article .pa-table-scroll{ overflow-x:auto;margin:28px auto;border:1px solid var(--line,#DAE1DA);border-radius:var(--r,24px); background:var(--surface,#FBFCFA);box-shadow:var(--sh-1);padding:0!important; } .page-article table{width:100%;border-collapse:separate;border-spacing:0;margin:28px auto;font-size:var(--t-sm,.9375rem);background:var(--surface,#FBFCFA);border-radius:var(--r,24px)} .page-article .table-wrapper table,.page-article .table-wrap table,.page-article .comparison-table-wrapper table,.page-article .pa-table-scroll table{margin:0;border-radius:0;background:transparent} .page-article th,.page-article td{padding:12px 14px!important;text-align:left;vertical-align:top;border:0!important;border-bottom:1px solid var(--line,#DAE1DA)!important;line-height:1.5;color:var(--ink-2,#27312C);background:transparent} .page-article thead th,.page-article tr:first-child th{ font-family:var(--f-body,"Satoshi",sans-serif);font-weight:700;font-size:var(--t-xs,.8125rem); color:var(--ink-3,#4A5550)!important;background:var(--paper,#F3F5F2)!important;letter-spacing:.01em; } .page-article tr:last-child td{border-bottom:0!important} .page-article td:first-child{font-weight:600;color:var(--ink,#0C1410)} /* Behaf's column, marked by site.js */ .page-article .pa-behaf{background:var(--g-50,#EDF6F0)!important;color:var(--g-700,#005C39)!important} .page-article th.pa-behaf{color:var(--g-700,#005C39)!important;background:var(--g-100,#DAEEE2)!important} /* ---------- 6. callouts ---------- */ .page-article .callout,.page-article .callout-box,.page-article .highlight-box,.page-article .key-takeaway, .page-article .info-box,.page-article .tip-box,.page-article .note{ margin:28px auto!important;padding:20px 22px!important;border-radius:var(--r-in,14px)!important; background:var(--g-50,#EDF6F0)!important;border:1px solid var(--g-100,#DAEEE2)!important;border-left:3px solid var(--accent,#008854)!important; color:var(--ink-2,#27312C)!important;box-shadow:none!important; } .page-article .callout > :last-child,.page-article .callout-box > :last-child,.page-article .highlight-box > :last-child{margin-bottom:0} /* ---------- 7. stats ---------- */ .page-article .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:28px auto} .page-article .stat-card,.page-article .stat-pill{ background:var(--surface,#FBFCFA)!important;border:1px solid var(--line,#DAE1DA)!important;border-radius:var(--r-in,14px)!important; padding:18px!important;box-shadow:none!important; } .page-article .stat-number{font-family:var(--f-display,"Cabinet Grotesk",sans-serif)!important;font-weight:800;font-size:2rem;letter-spacing:-.03em;color:var(--ink,#0C1410)!important;line-height:1} .page-article .stat-label{font-size:var(--t-xs,.8125rem);color:var(--ink-3,#4A5550)!important;margin-top:6px} .page-article .stat-pill{display:inline-flex;padding:8px 14px!important;border-radius:var(--r-pill,999px)!important;font-size:var(--t-xs,.8125rem)} /* ---------- 8. cards and step grids ---------- */ .page-article .feature-card,.page-article .step-card,.page-article .card{ background:var(--surface,#FBFCFA)!important;border:1px solid var(--line,#DAE1DA)!important; border-radius:var(--r,24px)!important;box-shadow:none!important;padding:22px!important; } .page-article .step-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:28px auto} .page-article .num{font-family:var(--f-display,"Cabinet Grotesk",sans-serif);font-weight:800;color:var(--accent,#008854)} /* ---------- 9. TOC ---------- */ .page-article .toc-box,.page-article .pa-toc{ margin:32px auto!important;padding:20px 22px!important;border-radius:var(--r,24px)!important; background:var(--surface,#FBFCFA)!important;border:1px solid var(--line,#DAE1DA)!important;box-shadow:none!important; } .page-article .toc-title,.page-article .pa-toc-title{font-family:var(--f-body,"Satoshi",sans-serif)!important;font-weight:700!important;font-size:var(--t-sm,.9375rem)!important;color:var(--ink,#0C1410)!important;margin-bottom:10px!important;display:flex;gap:8px;align-items:center} .page-article .toc-list,.page-article .toc-grid,.page-article .pa-toc ol{display:grid;gap:2px;margin:0;padding:0;list-style:none} .page-article .toc-list a,.page-article .toc-grid a,.page-article .pa-toc a{ display:block;padding:7px 10px;border-radius:10px;color:var(--ink-2,#27312C)!important;text-decoration:none!important; font-size:var(--t-sm,.9375rem);line-height:1.4;transition:background var(--d-ui,200ms) var(--ease,ease),color var(--d-ui,200ms) var(--ease,ease); } .page-article .toc-list a:hover,.page-article .toc-grid a:hover,.page-article .pa-toc a:hover{background:var(--paper,#F3F5F2);color:var(--ink,#0C1410)!important} .page-article .pa-toc a.is-active{background:var(--g-50,#EDF6F0);color:var(--g-700,#005C39)!important;font-weight:600} /* on wide screens the generated TOC rides beside the article */ @media (min-width:1280px){ .page-article.pa-has-rail{max-width:calc(var(--pa-measure) + 560px);display:grid;grid-template-columns:260px minmax(0,var(--pa-measure)) 260px;column-gap:20px} .page-article.pa-has-rail > *{grid-column:2;margin-left:0;margin-right:0;justify-self:stretch;min-width:0} .page-article.pa-has-rail > .btn,.page-article.pa-has-rail > a[class*="btn"]{justify-self:start} .page-article.pa-has-rail > .pa-toc{grid-column:1;grid-row:1 / span 999;position:sticky;top:calc(var(--nav-h,68px) + 24px);align-self:start;margin:0!important;max-height:calc(100vh - var(--nav-h,68px) - 48px);overflow:auto} } /* ---------- 10. FAQ: every old variant looks like one component ---------- */ .page-article .faq-container,.page-article .faq-list{margin:24px auto} .page-article .faq,.page-article .faq-item,.page-article details{ background:var(--surface,#FBFCFA)!important;border:1px solid var(--line,#DAE1DA)!important; border-radius:var(--r-in,14px)!important;padding:18px 20px!important;margin:0 auto 10px!important;box-shadow:none!important; } .page-article .faq h3,.page-article .faq-item h3,.page-article .faq-question,.page-article summary{ font-family:var(--f-body,"Satoshi",sans-serif)!important;font-weight:700!important;font-size:1.05rem!important; letter-spacing:0!important;line-height:1.4!important;color:var(--ink,#0C1410)!important;margin:0!important; display:flex;gap:10px;align-items:flex-start;background:none!important;padding:0!important;border:0!important; } .page-article .faq-item p,.page-article .faq p,.page-article .faq-answer,.page-article details p{margin-top:10px;margin-bottom:0;color:var(--ink-3,#4A5550)} .page-article summary{cursor:pointer;list-style:none} .page-article summary::-webkit-details-marker{display:none} /* ---------- 11. CTA blocks: all become the forest card ---------- */ .page-article .cta-box,.page-article .cta-banner,.page-article .pa-cta{ margin:56px auto!important;padding:clamp(28px,4vw,44px)!important;border-radius:var(--r,24px)!important; background:var(--forest,#062417)!important;color:var(--on-forest,#EEF4F0)!important;border:0!important; box-shadow:var(--sh-3)!important;text-align:left!important; } .page-article .cta-box *,.page-article .cta-banner *,.page-article .pa-cta *{color:inherit} .page-article .cta-box h2,.page-article .cta-box h3,.page-article .cta-banner h2,.page-article .cta-banner h3,.page-article .pa-cta h2{color:var(--on-forest,#EEF4F0)!important;margin-top:0!important} .page-article .cta-box p,.page-article .cta-banner p,.page-article .pa-cta p{color:var(--on-forest-2,#A9BEB2)!important} .page-article .cta-box .btn,.page-article .cta-banner .btn,.page-article .pa-cta .btn{background:var(--paper,#F3F5F2)!important;color:var(--forest,#062417)!important} .page-article .cta-box .btn:hover,.page-article .cta-banner .btn:hover,.page-article .pa-cta .btn:hover{background:#fff!important;box-shadow:0 14px 30px -12px rgba(0,0,0,.5)} /* ---------- 12. category hero card (sell-on-WhatsApp pages) ---------- */ .pa-hero{ position:relative;margin:8px auto 40px;border-radius:var(--r,24px);overflow:hidden; background:var(--paper-2,#E8EDE8);aspect-ratio:16/9;box-shadow:var(--sh-2);isolation:isolate; } .pa-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0!important;margin:0!important} .pa-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,36,23,0) 45%,rgba(6,36,23,.45));z-index:1} .pa-chat{ position:absolute;z-index:2;right:clamp(12px,3vw,28px);left:auto;bottom:clamp(12px,3vw,28px); width:min(300px,62%);display:flex;flex-direction:column;gap:6px; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:13px;line-height:1.35; } .pa-chat-head{ display:flex;align-items:center;gap:8px;align-self:stretch;background:#075E54;color:#fff; border-radius:12px 12px 4px 4px;padding:8px 10px;font-weight:600;font-size:12.5px; } .pa-chat-head i{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:#075E54;font-style:normal;font-weight:800;font-size:11px} .pa-chat-head small{display:block;font-weight:400;opacity:.8;font-size:10.5px} .pa-msg{max-width:88%;padding:7px 10px;border-radius:10px;box-shadow:0 1px 1px rgba(0,0,0,.12);color:#111b21} .pa-msg.in{align-self:flex-start;background:#fff;border-top-left-radius:3px} .pa-msg.out{align-self:flex-end;background:#d9fdd3;border-top-right-radius:3px} .pa-msg b{font-weight:700;color:#111b21} .js .pa-chat .pa-msg{opacity:0;translate:0 8px;transition:opacity 420ms var(--ease-out,ease),translate 420ms var(--ease-out,ease)} .js .pa-chat.is-in .pa-msg{opacity:1;translate:0 0} .js .pa-chat.is-in .pa-msg:nth-child(3){transition-delay:.45s} .js .pa-chat.is-in .pa-msg:nth-child(4){transition-delay:.9s} .js .pa-chat.is-in .pa-msg:nth-child(5){transition-delay:1.35s} .pa-hero.chat-left .pa-chat{left:clamp(12px,3vw,28px);right:auto} @media (max-width:560px){.pa-hero{aspect-ratio:4/5}.pa-chat,.pa-hero.chat-left .pa-chat{width:auto;left:12px;right:12px}} /* ---------- 13. images inside articles ---------- */ .page-article figure{margin:32px auto} .page-article figure img,.page-article .blog-content > img,.page-article p > img:only-child{ display:block;width:100%;border-radius:var(--r,24px);box-shadow:var(--sh-2) } .page-article figcaption{font-size:var(--t-xs,.8125rem);color:var(--ink-4,#5F6963);margin-top:10px;text-align:center} /* ---------- 14. reveal-on-scroll (site.js adds .js) ---------- */ @media (prefers-reduced-motion:no-preference){ .js .page-article .pa-rv{opacity:0;translate:0 18px;transition:opacity 700ms var(--ease-out,ease),translate 700ms var(--ease-out,ease)} .js .page-article .pa-rv.is-in{opacity:1;translate:0 0} } /* ---------- 15. stray chrome from old templates ---------- */ #mobile-menu,.main-header,.navbar{display:none!important} .page-article nav.navbar{display:none!important} /* ---------- 16. header zone: one alignment ---------- */ .page-article{text-align:left} .page-article .breadcrumb-bar,.page-article .blog-meta,.page-article .meta-row{justify-content:flex-start!important;text-align:left!important} .page-article .breadcrumb-bar{display:flex;flex-wrap:wrap;gap:6px} .page-article > div:first-child:has(> a[href="/blog"]), .page-article .blog-content > div:first-child:has(> a[href="/blog"]){text-align:left!important;justify-content:flex-start!important} /* ---------- 17. index pages (blog, D2C landing) keep full width ---------- */ .page-article.page-index > *,.page-article.page-index > div:not([class]), .page-article.page-index .blog-content > *,.page-article.page-index .container > *{max-width:none} .page-article.page-index h1{text-align:center!important;margin-left:auto!important;margin-right:auto!important} .page-article.page-index > p,.page-article.page-index .blog-content > p{max-width:var(--pa-measure);margin-left:auto;margin-right:auto} /* ---------- 18. guard rails found by the per-page audit ---------- */ /* body copy is always Satoshi, whatever an old inline style says */ .page-article p,.page-article li{font-family:var(--f-body,"Satoshi",system-ui,sans-serif)!important} .page-article .cta-box p,.page-article .cta-banner p,.page-article .stat-number{font-family:inherit} /* decorative shapes in old hero cards may not push the page sideways; clip (not hidden) keeps position:sticky working */ main.page-article{overflow-x:clip} .page-article > *,.page-article .blog-content > *,.page-article .content-body > *{max-width:min(var(--pa-measure),100%)} .page-article .blog-content,.page-article .content-body{min-width:0} .page-article .mermaid,.page-article pre{max-width:100%;overflow-x:auto} @media (max-width:640px){ .page-article .btn,.page-article a[class*="btn"]{white-space:normal!important;max-width:100%;text-align:center;height:auto;padding-top:14px!important;padding-bottom:14px!important;line-height:1.25!important} .page-article .author-bio-card,.page-article [class*="author"]{flex-wrap:wrap} } .page-article .author-bio-card > div{min-width:0} .page-article .author-bio-card div{flex-wrap:wrap} @media (max-width:640px){.page-article .author-bio-card{padding:20px!important;align-items:flex-start!important}} /* generated TOC: a closed dropdown on phones, a card in the rail on desktop */ .page-article details.pa-toc{padding:14px 18px!important} .page-article details.pa-toc > summary{margin:0!important;cursor:pointer;justify-content:space-between} .page-article details.pa-toc > summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:45deg;translate:0 -2px;transition:rotate var(--d-ui,200ms) var(--ease-out,ease);flex-shrink:0;margin-top:6px} .page-article details.pa-toc[open] > summary::after{rotate:225deg;translate:0 2px} .page-article details.pa-toc[open] > summary{margin-bottom:8px!important} @media (min-width:1280px){.page-article details.pa-toc > summary{pointer-events:none}.page-article details.pa-toc > summary::after{display:none}} /* old templates pad
for their own fixed headers; one value for all */ main.page-article{padding-top:clamp(32px,5vw,72px)!important;padding-bottom:clamp(72px,9vw,128px)!important;margin-top:0!important} /* the homepage sets table{min-width:780px} for its own comparison table; in articles a table fits the column, and only scrolls sideways on phones */ .page-article table{min-width:0} @media (max-width:640px){.page-article table{min-width:540px}} /* meta pills line up with the H1, whatever the old inline style says */ main.page-article .blog-meta,main.page-article .meta-row{justify-content:flex-start!important;margin-left:0!important;margin-right:0!important}