/* Tinwell content pages (page.php, single.php, home.php, archive.php, search.php, 404.php): ordinary WordPress pages and
 * posts in the site's look, on top of landing.css (fonts, nav, footer, buttons, FAQ) and shop.css (basket count, crumbs). */

/* Page header: dark band with breadcrumb, kicker, H1 and lede */
.tw-article-head{padding-block:clamp(36px,3.5vw,56px) clamp(64px,6.5vw,104px)}
.tw-article-head .tw-crumbs{margin:0 0 clamp(32px,3.5vw,56px);color:rgba(245,242,234,.6)}
.tw-article-head .tw-crumbs a{color:rgba(245,242,234,.6)}
.tw-article-head .tw-crumbs a:hover{color:#f5f2ea}
.tw-article-head .tw-crumbs li+li::before{color:rgba(245,242,234,.35)}
.tw-article-head .tw-crumbs [aria-current]{color:#f5f2ea}
.tw-article-head .tw-kick{margin:0}
.tw-article-head h1{margin-top:24px;max-width:1000px;font-family:var(--tw-display);font-weight:700;font-size:clamp(44px,4.375vw,84px);line-height:.94;letter-spacing:-.04em;text-wrap:balance}
.tw-article-head .tw-lede{margin:28px 0 0;max-width:680px;font-size:clamp(17px,1.4vw,19px);line-height:1.5;color:#fff;text-wrap:pretty} /* scoped: shop.css (loaded after) has its own .tw-lede */
.tw-article-meta{margin-top:22px;font-size:14px;color:rgba(245,242,234,.6)}

/* Article column */
.tw-article{background:#f7f7f7}
.tw-article-in{max-width:1100px;margin:0 auto;padding-block:clamp(56px,6.5vw,96px) clamp(64px,7.5vw,120px)}
.tw-article-in>p,.tw-article-in>ul,.tw-article-in>ol,.tw-article-in>h2,.tw-article-in>h3,.tw-article-in>h4,.tw-article-in>blockquote,.tw-article-in>.tw-callout,.tw-article-in>.wp-block-group,.tw-article-in>.tw-faqs,.tw-article-in>.tw-docsteps{max-width:760px}
.tw-article-in>p:first-child{max-width:860px;font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:#1c2b26}
.tw-article-in>*{margin:0 0 22px}
.tw-article-in>*:last-child{margin-bottom:0}
.tw-article-in p,.tw-article-in li{font-size:17px;line-height:1.65;color:#3a4842;text-wrap:pretty}
.tw-article-in h2{margin-top:64px;padding-top:56px;border-top:1px solid #dddddd;font-family:var(--tw-display);font-weight:600;font-size:clamp(30px,3vw,44px);line-height:1.1;letter-spacing:-.03em;color:#1c2b26;text-wrap:balance}
.tw-article-in h3{margin-top:36px;font-family:var(--tw-display);font-weight:600;font-size:21px;line-height:1.25;letter-spacing:-.015em;color:#1c2b26}
.tw-article-in h4{margin-top:28px;font-size:17px;font-weight:600;color:#1c2b26}
.tw-article-in h2+p,.tw-article-in h3+p,.tw-article-in h4+p{margin-top:0}
.tw-article-in>*:first-child{margin-top:0}
.tw-article-in a{text-decoration:underline;text-underline-offset:2px}
.tw-article-in ul,.tw-article-in ol{padding-left:24px}
.tw-article-in li{margin-bottom:8px}
.tw-article-in li::marker{color:#1f7d6a}
.tw-article-in strong{color:#1c2b26}
.tw-article-in blockquote{margin:28px 0;padding:4px 0 4px 24px;border-left:3px solid #2ca58d;font-size:19px;line-height:1.5;color:#1c2b26}
.tw-article-in blockquote p{font-size:inherit;color:inherit}
.tw-article-in blockquote cite{display:block;margin-top:10px;font-size:14px;font-style:normal;color:#5f6f67}
.tw-article-in img,.tw-article-in video{max-width:100%;height:auto;border-radius:14px}
.tw-article-in figure{margin:28px 0}
.tw-article-in figcaption{margin-top:10px;font-size:14px;color:#5f6f67}
.tw-article-in hr{border:0;border-top:1px solid #dddddd;margin:40px 0}
.tw-article-in code{font-size:.92em;padding:2px 6px;border-radius:6px;background:#eceeec;color:#1c2b26}
.tw-article-in pre{padding:18px 20px;border-radius:12px;background:#141a17;color:#f5f2ea;overflow:auto;font-size:14px;line-height:1.55}
.tw-article-in pre code{padding:0;background:transparent;color:inherit}
.tw-article-in kbd{font:500 .9em/1 "Poppins",system-ui,sans-serif;padding:3px 7px;border:1px solid #dddddd;border-bottom-width:2px;border-radius:6px;background:#fff}

/* Tables: the "Tinwell Tables" design (claude.ai/design project db42214a…, Tinwell Tables.dc.html, 15 Oct 2026).
 * Every table: a white card (1px #ddd, 16px corners); a header row over a 1.5px ink rule, 13px grey column labels;
 * 1px #eee row rules; 15px cells padded 20px × 28px, row labels 600; uppercase group rows (.tw-grp); a .tw-sub line
 * (13px grey) for a plan name under a product or the working under a figure; totals (.tw-total) over a 1.5px ink rule;
 * ticks and dashes (.tw-tick / .tw-dash, with an optional label in .tw-ck); greyed "As Pro" cells (.tw-na).
 * [data-tw]: the last column is Tinwell (#f3faf6 fill, #d6eadf rules, #1a6357 figures, solid ticks) and the header
 * holds product names at 17px. The patterns:
 *   [data-h2h]      head-to-head: 232px row labels, the Tinwell column lifted on a green-bordered card (::before)
 *   [data-num]      worked breakdown: right-aligned tabular figures, the saving row (.tw-save) in green
 *   [data-features] feature matrix: sticky header, 16px rows, 26px ticks
 * Ranked figures are the Compare and Pricing templates (vs.css, pricing.css); Free vs Pro is free-vs-pro.css. */
.tw-article-in .wp-block-table{background:#fff;border:1px solid #dddddd;border-radius:16px;overflow:clip}
.tw-article-in table,.tw-article-in .wp-block-table table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55;color:#1c2b26}
/* border:0 first: the core table block gives every cell `border:1px solid` and thead a 3px rule, which would draw grid lines through the design */
.tw-article-in thead,.tw-article-in tfoot{border:0}
.tw-article-in th,.tw-article-in td{padding:20px 28px;border:0;border-top:1px solid #eeeeee;text-align:left;vertical-align:top}
.tw-article-in tbody td{color:#3a4842;text-wrap:pretty}
.tw-article-in thead th{padding:22px 28px 18px;border-top:0;background:#fff;box-shadow:inset 0 -1.5px 0 #1c2b26;font-size:13px;font-weight:600;line-height:1.35;color:#5f6f67;vertical-align:bottom}
.tw-article-in [data-tw] thead th:not(:first-child){padding-top:26px;padding-bottom:20px;font-size:17px;color:#1c2b26}
.tw-article-in tbody th{font-weight:600;color:#1c2b26;text-wrap:pretty}
.tw-article-in thead+tbody tr:first-child>*{border-top:0}
.tw-article-in td strong{font-weight:600;color:#1c2b26}
.tw-sub{display:block;margin-top:2px;font-size:13px;font-weight:400;line-height:1.45;letter-spacing:0;color:#5f6f67;white-space:normal}
.tw-article-in .wp-block-table figcaption{margin:0;padding:14px 28px;border-top:1px solid #dddddd;text-align:left;font-size:13px;color:#5f6f67}
.tw-article-in .tw-grp th{padding:14px 28px;border-top-color:#dddddd;background:#f7f7f7;font-size:13px;font-weight:600;letter-spacing:.06em;line-height:1.4;text-transform:uppercase;color:#52615a}
.tw-article-in .tw-total>*{border-top:1.5px solid #1c2b26;vertical-align:middle}
.tw-article-in .tw-total+.tw-total>*{border-top:1px solid #eeeeee}
.tw-article-in .tw-total th{font-weight:700}
.tw-article-in .tw-total td strong{font-weight:700}
.tw-article-in [data-num] .tw-total td strong{font-size:22px;letter-spacing:-.01em}
.tw-article-in .tw-save>*{border-top:1px solid #d6eadf;background:#e6f3ec;vertical-align:middle}
.tw-article-in .tw-save th{color:#1a6357}
.tw-article-in .tw-save td strong{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
/* the Tinwell column */
.tw-article-in [data-tw] tr>:last-child:not(:first-child){background:#f3faf6}
.tw-article-in [data-tw] td:last-child{border-top-color:#d6eadf;color:#1c2b26}
.tw-article-in [data-tw] .tw-total>td:last-child{border-top-color:#1c2b26}
.tw-article-in [data-tw] .tw-total+.tw-total>td:last-child{border-top-color:#d6eadf}
.tw-article-in [data-tw] thead th:last-child,.tw-article-in [data-tw] td:last-child strong{color:#1a6357}
.tw-article-in [data-tw] :is(thead th,td):last-child .tw-sub{color:#3f6f63}
.tw-article-in [data-tw] .tw-grp th{background:#f7f7f7}
.tw-article-in [data-tw] tr.tw-save>:last-child:not(:first-child){background:#e6f3ec}
/* worked breakdown */
.tw-article-in [data-num] th,.tw-article-in [data-num] td{padding-top:18px;padding-bottom:18px}
.tw-article-in [data-num] td{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tw-article-in [data-num] thead th:not(:first-child){box-sizing:border-box;width:260px;text-align:right}
/* head-to-head: the Tinwell column is 1.2 shares of what the 232px labels leave, drawn as a lifted card behind the cells */
.tw-article-in .wp-block-table:has(>[data-h2h]){position:relative;overflow:visible;margin-block:clamp(36px,4vw,50px)}
.tw-article-in .wp-block-table:has(>[data-h2h])::before{content:"";box-sizing:border-box;position:absolute;top:-14px;bottom:-14px;right:-1px;width:calc((100% - 232px) * 1.2 / 2.2 + 1px);background:#f3faf6;border:1.5px solid #1f7d6a;border-radius:16px;box-shadow:0 36px 64px -40px rgba(20,26,23,.5);pointer-events:none}
.tw-article-in .wp-block-table:has(>[data-h2h] thead th:nth-child(4))::before{width:calc((100% - 232px) * 1.2 / 3.2 + 1px)}
.tw-article-in [data-h2h]{position:relative;z-index:1;table-layout:fixed}
.tw-article-in [data-h2h] thead th{box-sizing:border-box;background:transparent} /* widths include padding, so the card behind matches the column */
.tw-article-in [data-h2h] thead th:first-child{width:232px}
.tw-article-in [data-h2h] thead th:last-child{width:calc((100% - 232px) * 1.2 / 2.2);box-shadow:inset 0 -1.5px 0 #1f7d6a}
.tw-article-in [data-h2h]:has(thead th:nth-child(4)) thead th:last-child{width:calc((100% - 232px) * 1.2 / 3.2)}
.tw-article-in [data-h2h] thead th:last-child::before{content:"";display:inline-block;width:24px;height:24px;margin-right:10px;vertical-align:-6px;background:url(assets/tinwell-mark-ink.svg) center/contain no-repeat}
.tw-article-in [data-h2h][data-tw] tr>:last-child:not(:first-child){padding-left:32px;padding-right:32px;background:transparent}
.tw-article-in [data-h2h] tbody tr:last-child>*{padding-bottom:24px}
/* feature matrix */
.tw-article-in [data-features]{table-layout:fixed}
.tw-article-in [data-features] thead th{position:sticky;top:0;z-index:2}
.tw-article-in [data-features] thead th:first-child{width:22%}
.tw-article-in [data-features] tbody>tr:not(.tw-grp)>*{padding-top:16px;padding-bottom:16px}
.tw-ck{display:flex;align-items:flex-start;gap:10px}
.tw-ck>span:last-child:not(:first-child){padding-top:1px}
.tw-tick{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#e6f3ec;color:#1f7d6a;font-size:12px;font-weight:700;line-height:1}
.tw-article-in [data-features] .tw-tick{width:26px;height:26px;font-size:13px}
.tw-article-in [data-tw] td:last-child .tw-tick{background:#2ca58d;color:#fff}
.tw-dash{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;font-size:18px;line-height:1;color:#a4afa8}
.tw-na{color:#7d8a83}
@media (max-width:759px){
  .tw-article-in .wp-block-table,.tw-article-in .wp-block-table:has(>[data-h2h]){overflow:visible;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tw-article-in table{min-width:520px}
  .tw-article-in [data-features]{min-width:640px}
  .tw-article-in [data-features] thead th{position:static}
  .tw-article-in th,.tw-article-in td,.tw-article-in thead th,.tw-article-in .tw-grp th,.tw-article-in [data-h2h][data-tw] tr>:last-child:not(:first-child){padding-left:16px;padding-right:16px}
  .tw-article-in [data-num] thead th:not(:first-child){width:auto}
  /* no lifted card inside a scroller: the Tinwell column is tinted instead */
  .tw-article-in .wp-block-table:has(>[data-h2h])::before{content:none}
  .tw-article-in [data-h2h]{table-layout:auto}
  .tw-article-in [data-h2h] thead th:first-child,.tw-article-in [data-h2h] thead th:last-child{width:auto}
  .tw-article-in [data-h2h][data-tw] tr>:last-child:not(:first-child){background:#f3faf6}
}

/* Callouts: example data, notes, tips */
.tw-callout{margin:32px 0;padding:24px 28px;border:1px solid #e2dccd;border-radius:14px;background:#f5f2ea}
.tw-callout>*:first-child{margin-top:0}
.tw-callout>*:last-child{margin-bottom:0}
.tw-callout p,.tw-callout li{font-size:15px;line-height:1.6;color:#2d3c36}
.tw-callout-l{display:block;margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#1a6357}
.tw-callout.is-example{border-color:#c9dcd3;background:#e6f3ec}
.tw-callout.is-verify{border-color:#e8d9a8;background:#fbf5df}

/* Feature and link cards */
.tw-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:32px 0;padding:0;list-style:none}
.tw-cards li{margin:0}
.tw-cards>li,.tw-cards>div{padding:22px 24px;border:1px solid #dddddd;border-radius:14px;background:#fff}
.tw-cards h3{margin:0 0 8px;font-size:17px}
.tw-cards p{margin:0;font-size:15px;line-height:1.55;color:#52615a}
.tw-cards a{text-decoration:none;font-weight:600}
.tw-cards a:hover{text-decoration:underline}
@media (max-width:599px){.tw-cards{grid-template-columns:minmax(0,1fr)}}

/* Buttons inside content */
.tw-article-in .wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0}
.tw-article-in .wp-block-button__link,.tw-article-in a.tw-b{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 24px;border-radius:10px;background:#1f7d6a;color:#f5f2ea;font-weight:600;font-size:16px;text-decoration:none}
.tw-article-in .wp-block-button__link:hover,.tw-article-in a.tw-b:hover{background:#1a6357;color:#f5f2ea}
.tw-article-in .is-style-outline .wp-block-button__link,.tw-article-in a.tw-b-line{background:transparent;border:1px solid #1c2b26;color:#1c2b26}
.tw-article-in .is-style-outline .wp-block-button__link:hover,.tw-article-in a.tw-b-line:hover{background:#1c2b26;color:#f5f2ea}

/* FAQ inside content: landing.css rules apply; just the spacing */
.tw-article-in .tw-faqs{margin:28px 0 40px}
.tw-article-in .tw-faq>button{font-size:17px}
.tw-article-in .tw-faq-a p{padding-right:0}

/* Steps list for docs */
.tw-docsteps{counter-reset:step;list-style:none;padding:0;margin:28px 0}
.tw-docsteps>li{position:relative;padding:0 0 28px 56px;margin:0}
.tw-docsteps>li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:-2px;width:38px;height:38px;border-radius:50%;background:#141a17;color:#f5f2ea;font:700 16px/38px "Poppins",system-ui,sans-serif;text-align:center}
.tw-docsteps>li+li{border-top:1px solid #dddddd;padding-top:28px}
.tw-docsteps>li+li::before{top:26px}
.tw-docsteps h3{margin-top:0}

/* Blog list */
.tw-posts-sec{background:#f7f7f7;padding-block:clamp(48px,6vw,88px)}
.tw-posts-intro{max-width:760px;margin:0 auto 48px}
.tw-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1240px;margin:0 auto}
.tw-card{display:flex;flex-direction:column;padding:28px;border:1px solid #dddddd;border-radius:16px;background:#fff}
.tw-card time{font-size:13px;font-weight:500;color:#5f6f67}
.tw-card h2{margin:12px 0 0;font-family:var(--tw-display);font-weight:600;font-size:21px;line-height:1.25;letter-spacing:-.015em}
.tw-card h2 a{color:#1c2b26}
.tw-card h2 a:hover{color:#1f7d6a}
.tw-card p{margin:12px 0 0;font-size:15px;line-height:1.6;color:#52615a}
.tw-card-more{margin-top:auto;padding-top:20px;font-weight:600;font-size:15px}
.tw-posts-empty{max-width:760px;margin:0 auto}
@media (max-width:959px){.tw-posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.tw-posts{grid-template-columns:minmax(0,1fr)}}
.tw-pagination{max-width:1240px;margin:40px auto 0}
.tw-pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px}
.tw-pagination .page-numbers{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid #dddddd;border-radius:10px;background:#fff;color:#1c2b26;font-weight:500;font-size:15px}
.tw-pagination .page-numbers.current{background:#141a17;border-color:#141a17;color:#f5f2ea}
.tw-pagination a.page-numbers:hover{border-color:#1c2b26}

/* Search form (search results, 404) */
.tw-search{display:flex;gap:10px;margin:24px 0}
.tw-search input[type="search"],.tw-search input[type="text"]{flex:1;min-width:0;height:52px;padding:0 16px;border:1px solid #cfd5d1;border-radius:10px;background:#fff;font:inherit;color:#1c2b26}
.tw-search input:focus-visible{outline:3px solid #1f7d6a;outline-offset:2px}
.tw-search button,.tw-search input[type="submit"]{height:52px;padding:0 22px;border:0;border-radius:10px;background:#141a17;color:#f5f2ea;font:600 15px "Poppins",system-ui,sans-serif;cursor:pointer}

/* Closing call to action (landing.css .tw-cta rules apply) */
/* (the full-size band from landing.css, as the design uses on every page) */

/* Reset the block editor's flow margins inside the column so the rules above win */
.tw-article-in :where(.is-layout-flow)>*{margin-block-start:0}
.tw-article-in .wp-block-group{margin-bottom:22px}

/* Visually hidden labels (main.css is not loaded on Tinwell pages) */
.screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);border:0;white-space:nowrap}