/* Articles host: additions on top of the main site's tokens.css and page.css (synced into brand/).
   Layout patterns only (Stripe and Vercel article pages, Anthropic and OpenAI newsrooms, seen on Mobbin); every
   color, font, logo and word is Wagenberg Technology Group's own. Restraint: white space, type hierarchy, no boxes. */
/* Article page: the reading surface is white inside the page body; the main-site header and footer keep sitting on
   the off-white page, as on the main site's inner pages (chrome-visual-check compares the backdrop). */
body.t-article main.a-page{background:#fff}
main.a-page,main.h-hub{max-width:none;padding:0 0 clamp(64px,8vw,120px)}
.wrap{max-width:1180px;margin-left:auto;margin-right:auto;padding-left:clamp(20px,3.4vw,52px);padding-right:clamp(20px,3.4vw,52px)}
article{overflow-wrap:break-word}
[id]{scroll-margin-top:24px}
/* The header logo link: a 44px tall tap target at every width (on the main site the link is only as tall as the
   logo image, 11 px at 390 px). The image keeps its main-site box: the header centres it either way. */
.p-head>a:first-child{display:flex;align-items:center;min-height:44px}
.a-crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:2px 8px;font-size:14px;color:var(--wtg-on-light-muted)}
.a-crumbs li{margin:0;max-width:none}
.a-crumbs li+li::before{content:"/";margin-right:8px}
.a-crumbs a,.a-crumbs [aria-current]{display:inline-block;min-height:24px;line-height:24px}
main .a-crumbs a{color:var(--wtg-on-light-muted);text-decoration:none}
main .a-crumbs a:hover{color:var(--wtg-charcoal);text-decoration:underline}

/* ---- article: one centered column; a quiet left margin at >= 1200px ---- */
.a-grid{max-width:680px;padding-top:clamp(28px,4vw,48px)}
.a-head{padding:clamp(28px,4vw,40px) 0 clamp(28px,3.5vw,40px);border-bottom:1px solid var(--wtg-hairline)}
.a-date{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font-size:14px;color:var(--wtg-on-light-muted);max-width:none}
/* the middle dot belongs to the item after it and sits in the gap before it. Each item has a 24px left margin and
   the row is shifted 24px left and clipped there, so a dot that would start a wrapped line on a narrow phone is
   clipped instead of left dangling at the end or start of a line */
.a-date{column-gap:0;margin-left:-24px;clip-path:inset(-8px -8px -8px 20px)}
.a-date>*{margin-left:24px}
.a-date .a-read,.a-date .a-upd{position:relative;white-space:nowrap}
.a-date .a-read::before,.a-date .a-upd::before{content:"\00B7";position:absolute;left:-15px}
main .a-pill{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border:1px solid var(--wtg-hairline);border-radius:999px;background:var(--wtg-off-white);font-size:13px;font-weight:600;color:var(--wtg-charcoal);text-decoration:none}
main .a-pill:hover{border-color:var(--wtg-charcoal)}
.a-head h1{margin:22px 0 0;font-size:clamp(34px,calc(22px + 2.2vw),52px);font-weight:700;line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
.a-dek{margin:20px 0 0;max-width:none;font-size:clamp(19px,calc(16.5px + .55vw),23px);line-height:1.5;color:var(--wtg-on-light-muted)}
.a-dek a{color:var(--wtg-blue-text)}
.a-hero-wrap{background:#fff}
.a-hero{margin:clamp(32px,4vw,48px) 0 0}
.a-hero img{border-radius:12px}
.a-fig-phone{display:none}
@media (max-width:640px){.a-hero-wide{display:none}.a-fig-phone{display:block}}
.a-who{display:flex;align-items:center;gap:12px;margin:32px 0 28px}
.a-avatar{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--wtg-charcoal);color:var(--wtg-off-white);font-size:14px;font-weight:700;letter-spacing:.04em}
.a-who p{margin:0;max-width:none;line-height:1.4}
.a-byline{font-size:15px;font-weight:600}
main .a-byline a{display:inline-block;min-height:24px;line-height:24px;color:var(--wtg-charcoal);text-decoration:none}
main .a-byline a:hover{text-decoration:underline}
.a-role{font-size:14px;color:var(--wtg-on-light-muted)}
.a-left{display:none}
.a-toc-m{margin:0 0 36px}
@media (min-width:1200px){
  /* faint column rules behind the article (Stripe-like) */
  main.a-page{background:linear-gradient(90deg,transparent calc(50% - 365px),#EEF0F2 calc(50% - 365px),#EEF0F2 calc(50% - 364px),transparent calc(50% - 364px),transparent calc(50% + 364px),#EEF0F2 calc(50% + 364px),#EEF0F2 calc(50% + 365px),transparent calc(50% + 365px)),
    linear-gradient(90deg,transparent calc(50% - 621px),#F3F4F5 calc(50% - 621px),#F3F4F5 calc(50% - 620px),transparent calc(50% - 620px),transparent calc(50% + 620px),#F3F4F5 calc(50% + 620px),#F3F4F5 calc(50% + 621px),transparent calc(50% + 621px))}
  .a-grid{max-width:1180px;display:grid;grid-template-columns:minmax(0,1fr) 680px minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:clamp(40px,4.5vw,64px);align-items:start;padding-top:0}
  .a-grid>.a-crumbs{grid-column:1;grid-row:1;padding-top:clamp(48px,5vw,64px);padding-left:20px}
  .a-head{grid-column:2;grid-row:1;padding-top:clamp(48px,5vw,64px)}
  .a-hero-wrap{grid-column:1 / -1;grid-row:2;justify-self:center;width:min(100%,1000px)}
  .a-who{grid-column:1;grid-row:3;margin:48px 0 0;padding-left:20px;align-items:flex-start;flex-direction:column;gap:10px}
  .a-left{display:block;grid-column:1;grid-row:4;position:sticky;top:32px;max-height:calc(100vh - 64px);overflow:auto;margin-top:40px;padding-left:20px}
  .a-main{grid-column:2;grid-row:3 / span 2;padding-top:48px}
  .a-toc-m,.a-share-end{display:none}
}
/* Contents: quiet small-text list; the :target entry gets a blue bar via the generated toc-<slug>.css */
.a-toc-h,.a-share-h,.h-sec{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--wtg-on-light-muted);line-height:1.4}
.a-toc ol,.a-toc-m ol{list-style:none;padding:0;margin:0}
.a-toc li,.a-toc-m li{margin:0;max-width:none}
main .a-toc a{display:block;padding:5px 0 5px 12px;margin-left:-14px;border-left:2px solid transparent;font-size:13.5px;line-height:1.4;color:var(--wtg-on-light-muted);text-decoration:none}
main .a-toc a:hover{color:var(--wtg-charcoal)}
.a-share{margin-top:28px}
.a-share-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px 16px}
.a-share-list li{margin:0}
main .a-share-list a{display:inline-block;min-height:24px;line-height:24px;font-size:14px;font-weight:600;color:var(--wtg-charcoal);text-decoration:none}
main .a-share-list a:hover{color:var(--wtg-blue-text);text-decoration:underline}
.a-share-end{margin-top:40px}
.a-toc-m details{border-top:1px solid var(--wtg-hairline);border-bottom:1px solid var(--wtg-hairline)}
.a-toc-m summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;font-size:15px;font-weight:700;cursor:pointer;list-style:none}
.a-toc-m summary::-webkit-details-marker,.a-qa summary::-webkit-details-marker{display:none}
.a-toc-m summary::after,.a-qa summary::after{content:"";flex:none;width:8px;height:8px;margin-left:16px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.a-toc-m details[open] summary::after,.a-qa[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.a-toc-m ol{padding:0 0 12px}
main .a-toc-m a{display:block;padding:8px 0;font-size:16px;line-height:1.4;color:var(--wtg-charcoal);text-decoration:none}
main .a-toc-m a:hover{color:var(--wtg-blue-text);text-decoration:underline}

/* ---- body ---- */
.a-takeaways{margin:0 0 44px;padding:22px 26px 10px;border:1px solid var(--wtg-hairline);border-radius:10px}
.a-takeaways h2{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--wtg-on-light-muted);line-height:1.4}
.a-takeaways ul{padding-left:1.1em;margin:0}
.a-takeaways li{margin:0 0 12px;max-width:none;font-size:17px;line-height:1.6}
.a-takeaways li em:first-child{font-weight:700}
.a-body{font-size:clamp(17px,calc(16px + .25vw),18px);line-height:1.7}
.a-body p,.a-body li{max-width:none}
.a-body h2{margin:60px 0 14px;font-size:clamp(24px,calc(20px + .7vw),29px);line-height:1.2;font-weight:700;letter-spacing:-.025em}
.a-body h2:first-child{margin-top:0}
.a-body h3{font-size:19px;margin:32px 0 8px}
.a-body blockquote{margin:24px 0;padding-left:18px;border-left:2px solid var(--wtg-hairline)}
/* Citations are inline links on the words a source supports: no markers. */
.a-body a,.a-faq a,.a-takeaways a,.a-dek a,.a-author a,.h-empty a,.h-info p a{color:var(--wtg-blue-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.a-body a:hover,.a-faq a:hover,.a-takeaways a:hover,.a-dek a:hover{text-decoration-thickness:2px}
.a-fig{margin:36px 0}
.a-fig img{display:block;width:100%;height:auto;border:1px solid var(--wtg-hairline);background:var(--wtg-surface);border-radius:10px}
.a-fig figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--wtg-on-light-muted);max-width:68ch}
.a-fig picture{display:block}
.a-fig-open{display:table;margin-top:6px;min-height:24px;line-height:24px;color:var(--wtg-blue-text);font-weight:600}

/* ---- end of article ---- */
.a-cta{margin:56px 0 0;padding:28px 0;border-top:1px solid var(--wtg-hairline);border-bottom:1px solid var(--wtg-hairline)}
.a-cta p{margin:0 0 16px;max-width:none;font-size:19px;font-weight:600;line-height:1.45}
main .a-cta-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--wtg-blue);color:#fff;font-size:15px;font-weight:700;text-decoration:none}
main .a-cta-btn:hover{background:var(--wtg-blue-hover)}
.a-faq{margin-top:56px}
.a-faq h2,.a-sources h2,.a-relcards h2{margin:0 0 12px;font-size:clamp(22px,calc(19px + .5vw),26px);line-height:1.25;letter-spacing:-.02em}
.a-qa{border-bottom:1px solid var(--wtg-hairline)}
.a-qa:first-of-type{border-top:1px solid var(--wtg-hairline)}
.a-qa summary{display:flex;align-items:center;justify-content:space-between;min-height:24px;padding:18px 0;cursor:pointer;list-style:none}
.a-qa summary h3{margin:0;font-size:17px;font-weight:600;line-height:1.45}
.a-qa summary:hover h3{color:var(--wtg-blue-text)}
.a-qa p{margin:0 0 20px;max-width:none;font-size:17px;line-height:1.65}
.a-sources{margin-top:56px}
.a-sources .a-note{margin:0 0 14px;max-width:none;font-size:16px;color:var(--wtg-on-light-muted)}
.a-sources ul{list-style:none;padding:0;margin:0}
.a-sources li{margin:0;padding:11px 0;border-top:1px solid var(--wtg-hairline);overflow-wrap:anywhere;font-size:14.5px;color:var(--wtg-on-light-muted);max-width:none}
.a-sources li a{color:var(--wtg-blue-text);font-weight:600}
.a-author{display:flex;gap:18px;align-items:flex-start;margin-top:56px;padding-top:28px;border-top:1px solid var(--wtg-hairline)}
.a-avatar-lg{width:52px;height:52px;font-size:17px}
@media (max-width:520px){.a-author{flex-direction:column;gap:12px}}
.a-author-text{min-width:0}
.a-author h2{margin:0 0 2px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--wtg-on-light-muted);line-height:1.4}
.a-author-name{margin:0 0 8px;font-size:17px;font-weight:700}
.a-author p{max-width:none;font-size:16px;line-height:1.6}
.a-author p:last-child{margin:0}
.a-after{padding-top:clamp(56px,7vw,96px)}
.a-pn{display:grid;grid-template-columns:1fr;gap:0 48px;border-top:1px solid var(--wtg-hairline)}
@media (min-width:640px){.a-pn{grid-template-columns:1fr 1fr}}
.a-pn a{display:block;padding:22px 0;text-decoration:none}
main .a-pn a{color:var(--wtg-charcoal)}
.a-pn a:hover .a-pn-t{text-decoration:underline}
.a-pn-next{text-align:right}
@media (max-width:639px){.a-pn-next{text-align:left;border-top:1px solid var(--wtg-hairline)}.a-pn-none{display:none}}
.a-pn-k{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--wtg-on-light-muted)}
.a-pn-t{display:block;margin-top:6px;font-size:17px;font-weight:600;line-height:1.4}
.a-relcards{margin-top:clamp(40px,5vw,64px)}
.a-relcards h2{margin-bottom:24px}
.r-grid{list-style:none;padding:0;margin:0;display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:640px){.r-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.r-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.r-card{margin:0;max-width:none}
.r-link,.h-feat-link{display:flex;flex-direction:column;height:100%;border-radius:18px;overflow:hidden;background:var(--wtg-off-white);text-decoration:none}
main .r-link,main .h-feat-link{color:var(--wtg-charcoal)}
.t-hub .r-link,.t-hub .h-feat-link{background:var(--wtg-surface)}
.r-art,.h-art{position:relative;display:block;line-height:0;aspect-ratio:5/3;overflow:hidden}
.h-art{aspect-ratio:21/9}
.r-art svg,.h-art svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.art-p0{background:#DCE6F7}.art-p1{background:#E6E8E1}.art-p2{background:#0F1419}.art-p3{background:#0066FF}
.r-body,.h-text{display:flex;flex-direction:column;gap:8px;padding:20px 22px 24px}
.r-cat{font-size:13px;font-weight:600;color:var(--wtg-on-light-muted)}
.r-title{font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.01em;text-wrap:balance}
.r-date{font-size:14px;color:var(--wtg-on-light-muted)}
.r-link:hover .r-title,.h-feat-link:hover .h-feat-title,.h-list a:hover .h-l-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* ---- hub: warm canvas, featured card plus an info card, then a list per category ---- */
.h-intro{padding-top:clamp(40px,5vw,72px)}
.h-intro h1{margin:20px 0 0;font-size:clamp(38px,calc(24px + 2.8vw),64px);font-weight:700;line-height:1.05;letter-spacing:-.04em;max-width:20ch;text-wrap:balance}
.h-desc{margin:18px 0 0;font-size:clamp(18px,calc(16px + .4vw),21px);line-height:1.5;color:var(--wtg-on-light-muted);max-width:56ch}
.h-featured{padding-top:clamp(40px,5vw,72px)}
.h-feat-row{display:grid;gap:20px}
@media (min-width:900px){.h-feat-row{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px}}
.h-feat{margin:0}
.h-feat .h-text{padding:26px 30px 30px;gap:10px}
.h-feat-title{font-size:clamp(24px,calc(19px + 1vw),32px);font-weight:700;line-height:1.15;letter-spacing:-.025em;text-wrap:balance}
.h-dek{font-size:16px;line-height:1.55;color:var(--wtg-on-light-muted);max-width:60ch}
.h-info{display:flex;flex-direction:column;align-items:flex-start;padding:28px 30px 30px;border-radius:18px;background:#E6E8E1}
.h-info h2{margin:0 0 12px;font-size:21px;line-height:1.3;letter-spacing:-.015em}
.h-info p{margin:0 0 22px;font-size:16px;line-height:1.6}
.h-info .a-cta-btn{margin-top:auto}
.h-lists{padding-top:clamp(48px,6vw,88px)}
.h-cat{display:grid;gap:8px 48px;padding:32px 0 8px;border-top:1px solid var(--wtg-hairline)}
@media (min-width:900px){.h-cat{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}
.h-cat h2{margin:0;font-size:clamp(22px,calc(19px + .5vw),26px);font-weight:600;line-height:1.25;letter-spacing:-.02em}
.h-list{list-style:none;padding:0;margin:0;display:grid;gap:0 40px}
@media (min-width:640px){.h-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.h-list li{margin:0;max-width:none}
.h-list a{display:flex;flex-direction:column;gap:6px;padding:4px 0 28px;text-decoration:none}
main .h-list a{color:var(--wtg-charcoal)}
.h-l-title{font-size:17px;font-weight:600;line-height:1.35}
.h-l-meta{font-size:14px;color:var(--wtg-on-light-muted)}
.h-empty{padding-top:clamp(36px,4.5vw,64px)}
.h-empty h2{margin:0 0 10px}
.a-cta-btn span{margin-left:6px}
.h-info h3{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--wtg-on-light-muted);line-height:1.4}
.h-topics{align-self:stretch;list-style:none;padding:0;margin:0 0 24px}
.h-topics li{margin:0;max-width:none;border-top:1px solid rgba(15,20,25,.12)}
main .h-topics a{display:flex;justify-content:space-between;padding:10px 0;font-size:15px;font-weight:600;color:var(--wtg-charcoal);text-decoration:none}
main .h-topics a:hover{text-decoration:underline}
.h-topics .h-n{font-weight:500;color:var(--wtg-on-light-muted)}

/* credits and AI disclosure */
.a-credit{font-size:13px;color:var(--wtg-on-light-muted)}
.a-disclosure{margin-top:56px;padding:20px 22px;border:1px solid var(--wtg-hairline);border-radius:12px;background:var(--wtg-off-white)}
.a-disclosure h2{margin:0 0 8px;font-size:17px;line-height:1.35;letter-spacing:-.01em}
.a-disclosure p{margin:0 0 8px;max-width:none;font-size:15.5px;line-height:1.6}
.a-disclosure .a-review-status{margin:0;font-size:14px;font-weight:600;color:var(--wtg-on-light-muted)}
/* author page */
.au-wrap{max-width:760px;margin:0 auto;padding-top:clamp(24px,4vw,48px);padding-bottom:64px}
/* page.css pads every <main> for its own pages; the author page sets its own spacing (same as the hub and articles) */
main.au-page{padding:0}
.au-pending{font-size:14px;color:var(--wtg-on-light-muted)}
.au-head{display:flex;gap:18px;align-items:center;margin:24px 0 8px}
.au-head h1{margin:0;font-size:clamp(32px,calc(24px + 2vw),48px);line-height:1.1;letter-spacing:-.03em}
.au-role{margin:4px 0 0;color:var(--wtg-on-light-muted);font-size:16px}
.au-sec{margin-top:40px}
.au-sec h2{margin:0 0 12px;font-size:clamp(20px,calc(18px + .5vw),24px);line-height:1.25;letter-spacing:-.02em}
.au-sec p{max-width:none;font-size:17px;line-height:1.65}
.au-sec a{color:var(--wtg-blue-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.au-sec .au-src{font-size:14px;white-space:nowrap}
.au-not{font-weight:600}

/* Tie-in with the main site (2026-11-02, revised): the header and footer are the main site's own inner-page chrome
   (p-head, p-foot from brand/chrome, styled by the synced page.css). No chrome overrides here beyond the logo tap
   target above: chrome-visual-check.cjs compares the rendered boxes with the main site's own built inner page. */
/* Section bar under the header (Stripe newsroom pattern, layout only) */
.a-subnav{border-bottom:1px solid var(--wtg-hairline);background:var(--wtg-surface)}
/* same 1180px content width and gutter as the page body (.wrap), so the bar lines up with the hub and article below */
.a-subnav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1180px;margin:0 auto;padding:0 clamp(20px,3.4vw,52px);min-height:48px;flex-wrap:wrap}
.a-subnav a{text-decoration:none;color:var(--wtg-on-light-muted);font-size:15px;min-height:44px;display:inline-flex;align-items:center}
.a-subnav a:hover{color:var(--wtg-charcoal);text-decoration:underline}
.a-subnav-home{font-weight:700;color:var(--wtg-charcoal)!important}
.a-subnav ul{list-style:none;margin:0;padding:0;display:flex;gap:24px;flex-wrap:wrap}
@media (max-width:640px){.a-subnav-in{padding:0 16px;gap:0 16px}.a-subnav ul{gap:0 16px}}