/* The public website's pages (design seoga-website-v1.7): what the design's generated CSS (web-design.css) does not
   draw. The blog covers' fills (the design writes them as inline styles, which the page's security policy refuses),
   the Coming soon pill where a feature is not built yet, and the open-source licences page, which has no design and
   follows the blog's look. */
.wb .sb-cv-t{fill:var(--sb-t)}
.wb .sb-cv-k{fill:var(--sb-k)}
.wb .sg-panel__title .sg-soon,.wb .sg-feature__title .sg-soon{margin-left:8px}

.wb .os-find{display:flex;flex-direction:column;gap:10px;margin:8px 0 40px;max-width:640px}
.wb .os-find label{font-weight:700;color:var(--sg-slate);font-size:var(--ws-nav)}
.wb .os-find__bar{display:flex;gap:10px;flex-wrap:wrap}
.wb .os-find__bar input{flex:1 1 260px;min-width:0;height:48px;padding:0 18px;border:2px solid var(--sg-indigo-100);border-radius:var(--sg-r-pill);background:#fff;color:var(--sg-slate);font-size:var(--ws-body)}
.wb .os-find__bar input:focus{border-color:var(--sg-indigo);outline:none}
.wb .os-find__n{font-size:var(--ws-small);color:var(--sg-muted)}
.wb .os-sec{margin-bottom:48px}
.wb .os-sec h2{margin-bottom:16px}
.wb .os-sec h2 small{font-size:var(--ws-small);font-weight:700;color:var(--sg-muted);margin-left:6px}
.wb .os-wrap{overflow-x:auto;border:1px solid var(--sg-line);border-radius:var(--sg-r-md);background:#fff}
.wb .os-table{width:100%;border-collapse:collapse;font-size:var(--ws-small);line-height:1.5}
.wb .os-table th,.wb .os-table td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--sg-line)}
.wb .os-table thead th{background:var(--sg-surface);color:var(--sg-slate);font-weight:800;white-space:nowrap}
.wb .os-table tbody th{color:var(--sg-slate);font-weight:700;white-space:nowrap}
.wb .os-table td{color:var(--sg-text);overflow-wrap:anywhere}
.wb .os-table tbody tr:last-child th,.wb .os-table tbody tr:last-child td{border-bottom:0}
.wb .os-none,.wb .os-foot{font-size:var(--ws-small);color:var(--sg-muted);margin-top:12px}
@media (max-width:640px){.wb .os-table thead{display:none}.wb .os-table tr{display:block;padding:10px 0;border-bottom:1px solid var(--sg-line)}.wb .os-table th,.wb .os-table td{display:block;border:0;padding:2px 14px}.wb .os-table tbody th{white-space:normal}}

/* Text contrast (WCAG AA), darkened the least that passes, with the colours already chosen on the app's screens:
   the GEO accent #0D9488 to #0B8075 and the AEO accent #EA580C to #C64A0A where it carries text (white on it, or it
   on white: the chip, the buttons, the step numbers, the eyebrows, the example's position numbers; the large
   headline words, icons and bars keep the design's colour), the faded rival results in the example Google page from
   opacity .6 to .8. */
.wb .ph--seo{--pa:var(--pc)}
.wb .ph--geo{--pa:#0B8075}
.wb .ph--aeo{--pa:#C64A0A}
.wb .ph-chip b,.wb .ph-step__n{background:var(--pa)}
.wb .ph-form .sg-search__btn,.wb .ph-cta .sg-search__btn,.wb .ph-res--you .ph-res__pos{background:var(--pa);border-color:var(--pa)}
.wb .ph-eyebrow{color:var(--pa) !important}
.wb .ph-res{opacity:.8}
.wb .ph-res--you{opacity:1}
/* The same darker shades the home page's stylesheet already uses for these (base.css, home.css), and the branch's
   dash colour #5F6977 for "not included". */
.wb .sg-chip--geo .sg-chip__key{background:var(--sg-teal-ink)}
.wb .sg-chip--aeo .sg-chip__key{background:var(--sg-orange-ink)}
.wb .sg-terms__sum{background:#0B8075}
.wb .sg-mini-btn--aeo{background:#C64A0A}
.wb .sx-pr__plus em,.wb .sx-bill span{color:var(--sg-teal-ink)}
.wb .sx-bill button[aria-pressed="true"] span{color:#5EEAD4}
.wb .sx-n{color:#5F6977}

/* Seoga's guides (/guides and /guides/<slug>, after-live item 42): no design file yet, so they follow the blog's look
   (the article column, the cards, the band) with these parts of their own, on the website's type scale. Diagrams are
   drawn twice (wide and narrow) and only one shows, so their words stay readable on a phone. */
.wb .gd-sum{margin:0 0 24px;font-size:var(--ws-intro);line-height:1.55;color:var(--sg-slate)}
.wb .gd-toc{margin:0 0 32px;padding:18px 22px;border:1px solid var(--sg-line);border-radius:var(--sg-r-md);background:var(--sg-surface)}
.wb .gd-toc__t{margin-bottom:8px;font-size:var(--ws-eyebrow);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sg-muted)}
.wb .gd-toc ol{padding-left:22px;list-style:decimal;font-size:var(--ws-nav);line-height:1.5}
.wb .gd-toc li + li{margin-top:6px}
.wb .gd-toc a{font-weight:600}
.wb .gd-body h2{scroll-margin-top:96px}
.wb .gd-body .gd-h3{margin-top:28px;font-size:var(--ws-card);line-height:1.3;font-weight:800;color:var(--sg-slate)}
.wb .gd-body code{padding:1px 6px;border-radius:6px;background:var(--sg-surface);border:1px solid var(--sg-line);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;overflow-wrap:anywhere}
.wb .gd-body a{text-decoration:underline;text-underline-offset:3px}
.wb .gd-steps{counter-reset:gd;padding:0;list-style:none}
.wb .gd-steps li{position:relative;padding-left:46px;counter-increment:gd}
.wb .gd-steps li + li{margin-top:16px}
.wb .gd-steps li::before{content:counter(gd);position:absolute;left:0;top:2px;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;background:var(--sg-indigo);color:#fff;font-size:var(--ws-small);font-weight:800}
.wb .gd-steps__t{color:var(--sg-slate)}
.wb .gd-fig{margin:28px 0;padding:18px;border:1px solid var(--sg-line);border-radius:var(--sg-r-md);background:#fff}
.wb .gd-svg{display:block;width:100%;height:auto}
.wb .gd-svg--narrow{display:none}
.wb .gd-fig figcaption{margin-top:14px;font-size:var(--ws-small);line-height:1.55;color:var(--sg-muted)}
.wb .gd-code{margin:24px 0}
.wb .gd-code figcaption{margin-bottom:6px;font-size:var(--ws-small);font-weight:700;color:var(--sg-slate)}
.wb .gd-code pre{margin:0;padding:14px 16px;border-radius:14px;background:var(--sg-slate);color:#E2E8F0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--ws-small);line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.wb .gd-code pre code{padding:0;border:0;background:none;font-size:inherit;color:inherit}
.wb .gd-note{padding:16px 20px;border-left:4px solid var(--sg-teal);border-radius:0 var(--sg-r-sm) var(--sg-r-sm) 0;background:var(--sg-teal-50)}
.wb .gd-note p{font-size:var(--ws-body)}
.wb .gd-note__t{font-weight:800;color:var(--sg-teal-ink)}
.wb .gd-table{overflow-x:auto;border:1px solid var(--sg-line);border-radius:var(--sg-r-md)}
.wb .gd-table table{width:100%;border-collapse:collapse;font-size:var(--ws-small);line-height:1.5}
.wb .gd-table caption{padding:12px 14px 0;text-align:left;font-weight:800;color:var(--sg-slate)}
.wb .gd-table th,.wb .gd-table td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--sg-line)}
.wb .gd-table thead th{background:var(--sg-surface);color:var(--sg-slate);font-weight:800}
.wb .gd-table tbody th{color:var(--sg-slate);font-weight:700}
.wb .gd-table tbody tr:last-child th,.wb .gd-table tbody tr:last-child td{border-bottom:0}
.wb .gd-seoga{margin-top:40px;padding:24px 26px;border-radius:var(--sg-r-lg);background:var(--sg-indigo-50);border:1px solid var(--sg-indigo-100)}
.wb .gd-seoga h2{margin-top:0}
.wb .gd-seoga ul{margin-top:12px}
.wb .gd-seoga__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.wb .gd-jump{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px}
.wb .gd-jump a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--sg-line);border-radius:999px;background:#fff;font-size:var(--ws-small);font-weight:700;color:var(--sg-slate)}
.wb .gd-jump a:hover{border-color:var(--sg-indigo);color:var(--sg-indigo)}
.wb .gd-phase{margin-bottom:56px;scroll-margin-top:96px}
.wb .gd-phase .sb-h2{margin-bottom:8px}
.wb .gd-phase__intro{margin-bottom:24px;max-width:62ch;font-size:var(--ws-body);color:var(--sg-muted)}
.wb .gd-more{margin-top:56px}
.wb .gd-art .sb-band{margin-top:40px}
.wb .gd-pv{margin:0 0 28px;padding:18px 22px;border:2px dashed #B45309;border-radius:var(--sg-r-md);background:#FFFBEB;color:#78350F}
.wb .gd-pv p,.wb .gd-pv li{font-size:var(--ws-small)}
.wb .gd-pv__checks{margin-top:10px}
.wb .gd-pv__checks ul{margin-top:6px;padding-left:20px;list-style:disc}
.wb .gd-pv__acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.wb .gd-pv__note{font-weight:700}
@media (max-width:640px){.wb .gd-svg--wide{display:none}.wb .gd-svg--narrow{display:block}.wb .gd-fig{padding:12px}.wb .gd-toc{padding:16px}.wb .gd-seoga{padding:20px}.wb .gd-seoga__cta .sg-btn{width:100%}.wb .gd-steps li{padding-left:40px}}

/* Cover pictures (owner, 13 Oct 2026: every guide and article carries a picture with the Seoga logo), 1200 x 630,
   made by services/cover-image.ts. They sit in the design's cover frame (.sb-cover, its size unchanged) and fill it. */
.wb .sb-cover--img{position:relative}
.wb .sb-cover__img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.wb .gd-art .sb-cover--art{margin:24px 0}

/* The published guides on the blog, and the guides' way back to the blog. */
.wb .gd-onblog__ph{margin:32px 0 16px;font-size:var(--ws-card);font-weight:800;color:var(--sg-slate)}
.wb .gd-onblog .sb-head + .gd-onblog__ph{margin-top:0}
.wb .gd-toblog{margin-top:12px;font-size:var(--ws-body);color:var(--sg-muted)}
.wb .gd-toblog a{font-weight:700;color:var(--sg-indigo);text-decoration:underline;text-underline-offset:3px}