/* Content pages of the new design: pricing, policies, blog. */

.page-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%; }
.page-head { text-align: center; padding: 38px 0 22px; }
.page-head .eyebrow { display: inline-block; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: .08em; color: var(--primary-text); background: var(--primary-soft); border-radius: 12px; padding: 3px 10px; }
.page-head h1 { font-size: 36px; font-weight: var(--fw-bold); letter-spacing: -.025em; margin: 12px 0 8px; }
.page-head p { color: var(--text-muted); font-size: var(--fs-section); max-width: 640px; margin: 0 auto; line-height: 1.55; }
.muted-note { color: var(--text-faint); font-size: var(--fs-label); }

/* ── The lit grid behind a page heading ───────────────────────────────
   The same backdrop the home hero carries (landing/css/new-ui/home.css .hh__bg): a 54px grid and
   three blurred blobs, running out to the window edges while the words stay in the column. Pages
   opt in by putting --lit on their .page-head and a .ph__bg inside it, so every other page that
   uses .page-head is untouched. The blobs are still here, unlike on the home page, where they
   drift; a page of text should not have motion behind it.

   The 100vw backdrop needs the body to clip sideways. That is keyed to the pages that carry it
   rather than set globally: an overflow value on body propagates to the viewport, and no other
   page should inherit a scroll rule it never asked for. The seller landings (croppers/new_ui/
   seller_landing.html) and the Low Shipping visitor page are one page per marketplace or tool, so
   they say so with `lit_page` in their context instead of being listed here one data-page at a
   time; base.html turns that into .lit-page on the body. */
body[data-page="blog"], body[data-page="pricing"], body.lit-page { overflow-x: hidden; }
.page-head--lit, .s-hero--lit, .ls-visitor__hero--lit { position: relative; }
/* Lifted to the top of the document (--ph-rise, set by the include's own script from the heading's
   offset; 62px, the header height, is the no-JS fallback) so the grid runs up behind the header
   instead of starting under it.

   The fade is on this box and not on the grid inside it, which is what the height has to answer
   for: `overflow: hidden` cuts a blurred blob off at a straight line, and a blob is wider than the
   heading it sits behind, so with only the grid masked the backdrop ended in a seam across the
   page. Masking the box fades the grid and the blobs together, and the box is tall enough for that
   fade to finish over the content below rather than against the last line of the heading. */
.ph__bg { position: absolute; top: calc(-1 * var(--ph-rise, 62px)); left: calc(-50vw + 50%); width: 100vw; height: calc(100% + 300px + var(--ph-rise, 62px)); z-index: -1; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); }
.ph__bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 54px 54px; opacity: .4; }
.ph__bg i { position: absolute; display: block; border-radius: 50%; filter: blur(70px); }
.ph__bg i:nth-child(1) { width: 460px; height: 460px; left: 2%; top: calc(-40px + var(--ph-rise, 62px)); background: radial-gradient(circle, rgba(3,61,99,.24), transparent 68%); }
.ph__bg i:nth-child(2) { width: 380px; height: 380px; right: 6%; top: calc(20px + var(--ph-rise, 62px)); background: radial-gradient(circle, rgba(17,154,212,.22), transparent 68%); }
.ph__bg i:nth-child(3) { width: 300px; height: 300px; right: 32%; top: calc(200px + var(--ph-rise, 62px)); background: radial-gradient(circle, rgba(230,148,76,.22), transparent 68%); }

/* The header over the grid: at the top of these two pages it carries no band of its own, so the
   grid and the blobs show through it; the include's script adds .is-stuck as soon as the page moves
   and site-chrome.css's white blur comes back. base.html loads this file before site-chrome.css, so
   both rules carry the page to outweigh the plain .sc-header there rather than depend on the order.
   Only the pages that carry a backdrop are named, so the header everywhere else is untouched. */
body[data-page="blog"] .sc-header,
body[data-page="pricing"] .sc-header,
body.lit-page .sc-header { background: transparent; backdrop-filter: none; border-bottom-color: transparent; transition: background .22s ease, border-color .22s ease, box-shadow .22s ease; }
body[data-page="blog"] .sc-header.is-stuck,
body[data-page="pricing"] .sc-header.is-stuck,
body.lit-page .sc-header.is-stuck { background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom-color: var(--border); box-shadow: 0 10px 26px -22px rgba(10,29,41,.6); }
@media (prefers-reduced-motion: reduce) {
  body[data-page="blog"] .sc-header,
  body[data-page="pricing"] .sc-header,
  body.lit-page .sc-header { transition: none; }
}

/* ── Pricing ─────────────────────────────────────────── */
.seg-lg { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 4px; gap: 4px; margin-top: 18px; }
.seg-lg button { height: 34px; padding: 0 18px; border: none; border-radius: 17px; background: transparent; font: inherit; font-weight: var(--fw-semibold); color: var(--text-muted); cursor: pointer; }
.seg-lg button.on { background: var(--grad); color: var(--on-primary); }
.plans { display: grid; gap: 14px; align-items: stretch; }
.plan { position: relative; padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.plan--featured { border: 2px solid var(--primary); box-shadow: 0 24px 50px -30px rgba(3,61,99,.55); }
.plan__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: .04em; background: var(--accent); color: var(--badge-text); border-radius: 12px; padding: 3px 12px; white-space: nowrap; }
.plan__name { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); }
.plan__for { color: var(--text-muted); font-size: var(--fs-label); margin-top: 2px; }
.plan__price { display: flex; align-items: baseline; gap: 6px; }
.plan__price b { font-size: 34px; font-weight: var(--fw-bold); letter-spacing: -.02em; }
.plan__price span { color: var(--text-muted); }
.plan__was { color: var(--text-faint); text-decoration: line-through; font-size: var(--fs-label); }
.plan__save { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--success-text); background: var(--success-soft); border-radius: 10px; padding: 2px 8px; }
.plan ul { list-style: none; display: grid; gap: 8px; }
.plan li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; }
.plan li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: var(--success); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.plan li.no { color: var(--text-faint); }
.plan li.no svg { stroke: var(--text-faint); }
.plan .btn { width: 100%; margin-top: auto; }
.pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.pack { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.pack__title { font-weight: var(--fw-bold); }
.pack__price { font-size: 22px; font-weight: var(--fw-bold); }
.pack .muted { font-size: var(--fs-label); }
.pack .btn { margin-top: 8px; }
.compare { margin-top: 10px; }
.compare td:not(:first-child), .compare th:not(:first-child) { width: 17%; text-align: center; }
.compare .yes { color: var(--success); font-weight: var(--fw-bold); }
.compare .no { color: var(--text-faint); }
.compare-note { margin-top: 10px; font-size: var(--fs-label); line-height: 1.5; }
.pay-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; color: var(--text-muted); font-size: var(--fs-label); }
.pay-row span.pill { font-weight: var(--fw-semibold); }

/* ── Policy ──────────────────────────────────────────── */
.doc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 30px; align-items: start; margin: 25px 0px; }
.doc__toc { position: sticky; top: 84px; padding: 14px; }
.doc__toc h6 { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .08em; color: var(--text-faint); margin: 2px 6px 8px; }
.doc__toc a { display: block; padding: 6px 8px; border-radius: var(--r-xs); color: var(--text-muted); text-decoration: none; font-size: var(--fs-label); line-height: 1.35; }
.doc__toc a:hover { color: var(--primary-text); background: var(--surface-alt); }
.doc__toc a.on { color: var(--primary-text); background: var(--primary-soft); font-weight: var(--fw-semibold); }
.doc__tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.doc__body { padding: 26px 30px; }
.doc__meta { display: flex; gap: 12px; flex-wrap: wrap; color: var(--text-muted); font-size: var(--fs-label); padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.prose { font-size: 15px; line-height: 1.7; color: var(--text); }
.prose h2 { font-size: 20px; font-weight: var(--fw-bold); letter-spacing: -.01em; margin: 28px 0 8px; scroll-margin-top: 84px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 16px; font-weight: var(--fw-bold); margin: 18px 0 6px; }
.prose p { margin: 0 0 12px; color: var(--text); }
.prose ul, .prose ol { margin: 0 0 14px 20px; }
.prose li { margin: 4px 0; }
.prose a { color: var(--primary-text); }
.prose strong { font-weight: var(--fw-bold); }
.prose blockquote { border-left: 3px solid var(--primary-soft-border); background: var(--surface-alt); padding: 10px 14px; border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--text-muted); margin: 0 0 14px; }
.callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--primary-soft); border: 1px solid var(--primary-soft-border); margin: 0 0 18px; }
.callout svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: var(--primary-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.callout p { margin: 0; color: var(--text); font-size: var(--fs-body-lg); line-height: 1.55; }

/* ── Blog ────────────────────────────────────────────── */
.blog-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.blog-bar .chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.chip { display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; height: 32px; padding: 0 13px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-weight: var(--fw-medium); color: var(--text-muted); cursor: pointer; }
.chip:hover { border-color: var(--primary-soft-border); color: var(--primary-text); }
.chip.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.crumbs { font-size: var(--fs-label); color: var(--text-faint); display: flex; gap: 6px; align-items: center; }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--primary-text); }
.search { position: relative; width: 260px; }
.search svg { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); fill: none; stroke: var(--text-faint); stroke-width: 2; stroke-linecap: round; }
.search input { width: 100%; height: 36px; border-radius: 18px; border: 1px solid var(--border-strong); background: var(--surface); padding: 0 12px 0 32px; font: inherit; color: var(--text); }
.search input:focus { outline: none; border-color: var(--primary); }
.featured { display: grid; grid-template-columns: 1.15fr 1fr; overflow: hidden; margin-bottom: 22px; text-decoration: none; color: var(--text); }
.featured:hover { border-color: var(--primary-soft-border); }
.featured__body { padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 10px; }
.featured__body h2 { font-size: 26px; font-weight: var(--fw-bold); letter-spacing: -.02em; line-height: 1.2; }
.featured__body p { color: var(--text-muted); line-height: 1.55; }
.cover { position: relative; overflow: hidden; background: var(--grad); color: var(--on-primary); display: grid; place-items: center; min-height: 170px; }
.cover--orange { background: linear-gradient(135deg, #e6944c, #c96a2a); }
.cover--green { background: linear-gradient(135deg, #2c9664, #1c6e48); }
.cover--blue { background: linear-gradient(135deg, #0b4c8e, #5aa9e6); }
.cover--ink { background: linear-gradient(135deg, #0a1d29, #28485d); }
/* Cover art. It was two radial-gradients at different background-sizes (38px and 52px), so the
   two dot fields drifted in and out of step across the card and read as dust rather than a
   pattern - and at .16 on the whole layer there was no way to weight one part over another.
   Now: one even dot grid, a soft spotlight behind the label, and a little weight along the
   bottom edge so the cover meets the card's body text cleanly. Every colour is a white or ink
   alpha, so each .cover--* gradient keeps its own hue. */
.cover__art { position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .20) 1px, transparent 1.6px);
  background-size: 20px 20px; }
.cover__art::before, .cover__art::after { content: ""; position: absolute; inset: 0; }
.cover__art::before { background: radial-gradient(68% 56% at 50% 42%, rgba(255, 255, 255, .24), transparent 70%); }
.cover__art::after { background: linear-gradient(to top, rgba(6, 20, 32, .26), transparent 58%); }
.cover__label { position: relative; display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: var(--fw-bold); text-align: center; padding: 16px; line-height: 1.25; }
.cover__label img { width: 34px; height: 34px; border-radius: 9px; background: #fff; padding: 3px; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.post-card { overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s; }
.post-card:hover { border-color: var(--primary-soft-border); transform: translateY(-2px); }
/* .featured and .post-card set a display of their own, which beats the browser's own rule for
   [hidden] - so the blog filter's `card.hidden = true` hid nothing and search appeared dead while
   the "no guides match" line still came up. Same trap as .nav__item in desk.css. */
.featured[hidden], .post-card[hidden] { display: none; }
.post-card .cover { min-height: 140px; }
.post-card .cover__label { font-size: 16px; }
.post-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.post-card h3 { font-size: var(--fs-section); font-weight: var(--fw-bold); line-height: 1.3; }
.post-card p { color: var(--text-muted); font-size: var(--fs-label); line-height: 1.5; }
.post-meta { display: flex; gap: 8px; align-items: center; color: var(--text-faint); font-size: var(--fs-small); margin-top: auto; }
.cat { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--primary-text); letter-spacing: .02em; }
.pager { display: flex; justify-content: center; gap: 6px; margin-top: 22px; }
.pager a { min-width: 34px; height: 34px; border-radius: 17px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); text-decoration: none; color: var(--text-muted); font-weight: var(--fw-semibold); padding: 0 10px; }
.pager a.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.news { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 20px 22px; margin: 26px 0; }
.news h3 { font-size: 18px; font-weight: var(--fw-bold); }
.news p { color: var(--text-muted); }
.news form { display: flex; gap: 8px; }
.news input { height: 38px; border-radius: 19px; border: 1px solid var(--border-strong); padding: 0 14px; font: inherit; width: 240px; background: var(--input-bg); color: var(--text); }

/* Article */
.article { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 30px; align-items: start; }
.article__head { max-width: 760px; padding: 26px 0 10px; }
.article__head h1 { font-size: 36px; font-weight: var(--fw-bold); letter-spacing: -.025em; line-height: 1.15; margin: 10px 0 12px; }
.article__head .lead { color: var(--text-muted); font-size: 17px; line-height: 1.6; }
.byline { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: var(--fs-label); color: var(--text-muted); }
.byline .avatar { width: 34px; height: 34px; }
.byline strong { color: var(--text); display: block; }
.article__cover { border-radius: var(--r-lg); min-height: 260px; margin: 18px 0 24px; }
.article .prose { max-width: 720px; font-size: 16.5px; }
.steps-inline { counter-reset: s; list-style: none; margin-left: 0 !important; }
.steps-inline li { counter-increment: s; position: relative; padding-left: 38px; margin: 10px 0 !important; }
.steps-inline li::before { content: counter(s); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-text); font-weight: var(--fw-bold); font-size: var(--fs-label); display: grid; place-items: center; }
.tool-cta { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--r-lg); background: var(--sidebar-bg); color: var(--sidebar-strong); margin: 22px 0; }
.tool-cta img { width: 40px; height: 40px; border-radius: 10px; background: #fff; padding: 4px; }
.tool-cta strong { display: block; font-size: var(--fs-body-lg); }
.tool-cta small { color: var(--sidebar-text); }
.tool-cta .btn { margin-left: auto; background: #fff; color: #033d63; border-color: #fff; }
.aside-card { padding: 14px; margin-bottom: 14px; }
.aside-card h6 { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .08em; color: var(--text-faint); margin: 2px 4px 8px; }
.aside-sticky { position: sticky; top: 84px; }
.share { display: flex; gap: 6px; }
.related { margin: 36px 0; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; }
.tags a { font-size: var(--fs-small); color: var(--text-muted); border: 1px solid var(--border); border-radius: 12px; padding: 3px 10px; text-decoration: none; background: var(--surface); }

/* Showcase page */
.show-section { padding: 26px 0 8px; }
.show-section > h2 { font-size: 20px; font-weight: var(--fw-bold); margin-bottom: 4px; }
.show-section > p { color: var(--text-muted); margin-bottom: 14px; }
.frame { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--bg); position: relative; }
.frame__label { position: absolute; bottom: 10px; right: 12px; z-index: 50; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 2px 8px; }
.frame .sc-header { position: relative; }
.frame .sc-mega, .frame .sc-menu { position: absolute; }
.frame--tall { min-height: 500px; }
.phone { width: 390px; max-width: 100%; margin: 0 auto; border: 10px solid #0a1d29; border-radius: 36px; overflow: hidden; height: 700px; position: relative; background: var(--bg); }
.phone .sc-drawer { position: absolute; }

@media (max-width: 960px) {
  /* minmax(0, 1fr): the horizontal contents row must not widen the column with its scroll content */
  .doc, .article { grid-template-columns: minmax(0, 1fr); }
  .doc__toc, .aside-sticky { min-width: 0; }
  .doc__toc { top: 62px; z-index: 5; display: flex; gap: 4px; overflow-x: auto; padding: 8px; scrollbar-width: none; }
  .doc__toc::-webkit-scrollbar { display: none; }
  .doc__toc h6 { display: none; }
  .doc__toc a { white-space: nowrap; flex-shrink: 0; }
  .featured { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: 1fr 1fr; }
  .aside-sticky { position: static; }
  .news { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .page-head h1, .article__head h1 { font-size: 27px; }
  .post-grid { grid-template-columns: 1fr; }
  .doc__body { padding: 18px 16px; }
  .search { width: 100%; }
  .news form { flex-direction: column; } .news input { width: 100%; }
  .tool-cta { flex-wrap: wrap; } .tool-cta .btn { margin-left: 0; width: 100%; }
}

/* ── Pricing page (landing/new_ui/pricing.html) ─────────────────────── */
.plans--4 { grid-template-columns: repeat(4, 1fr); margin-top: 8px; }
.plans--3 { grid-template-columns: repeat(3, 1fr); margin-top: 8px; }
.plans--2 { grid-template-columns: repeat(2, 1fr); margin-top: 8px; max-width: 720px; margin-left: auto; margin-right: auto; }
.pricing-notice { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: var(--r-lg); background: var(--primary-soft); border: 1px solid var(--primary-soft-border); color: var(--primary-text); margin: 0 auto 22px; max-width: 760px; font-weight: var(--fw-semibold); line-height: 1.45; }
.pricing-notice svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.editor-included .editor-plan { display: grid; gap: 10px; }
.editor-included .plan__price { flex-wrap: wrap; }
.editor-included .plan__price b { font-size: 26px; }
.editor-included__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.compare td:first-child { color: var(--text-muted); }
.offer { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--r-lg); background: var(--accent-soft); border: 1px solid var(--badge-border); margin: 0 auto 22px; max-width: 760px; }
.offer svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: var(--warning-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.offer strong { color: var(--warning-text); }
.offer p { color: var(--text); }
.offer .btn { margin-left: auto; }
.pay-note { text-align: center; color: var(--success-text); font-size: var(--fs-label); margin-top: 10px; }
.ls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; align-items: center; padding: 22px 24px; margin-top: 34px; }
.ls h2 { font-size: 20px; font-weight: var(--fw-bold); margin: 6px 0 6px; }
.ls p { color: var(--text-muted); line-height: 1.55; }
.ls .eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--primary-text); }
.ls .rates { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.ls .rate { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 14px; }
.ls .rate b { display: block; font-size: 20px; }
.ls .rate span { color: var(--text-muted); font-size: var(--fs-label); }
.ls .pack-grid { grid-template-columns: repeat(5, 1fr); }
.ls .pack { padding: 12px; text-align: center; background: var(--surface-alt); border-radius: var(--r-md); border: 1px solid var(--border); }
.ls .pack--best { border-color: var(--primary); background: var(--primary-soft); }
.ls .pack__title { font-size: 20px; }
.ls .pack__price { font-size: 16px; }
.section-h2 { font-size: 20px; font-weight: var(--fw-bold); margin-bottom: 12px; }
.compare-wrap, .faq-wrap { margin: 34px 0; }
.pricing-cta { display: flex; justify-content: center; }
@media (max-width: 1080px) { .plans--4, .plans--3 { grid-template-columns: 1fr 1fr; } .ls { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .plans--4, .plans--3, .plans--2 { grid-template-columns: 1fr; } .ls .pack-grid { grid-template-columns: repeat(3, 1fr); } .offer { flex-wrap: wrap; } .offer .btn { margin-left: 0; } }

/* ── Legal pages (landing/new_ui/legal_base.html) ────────────────────── */
.doc-head { padding: 26px 0 16px; }
.doc-head .crumbs { padding: 0 0 10px; }
.doc-head h1 { font-size: 32px; font-weight: var(--fw-bold); letter-spacing: -.02em; }
.doc-head p { color: var(--text-muted); margin-top: 6px; }
.doc__toc[hidden] { display: none; }
.prose h2 + h3 { margin-top: 8px; }

/* ── Blog (landing/new_ui/blog_*.html, blog/new_ui/post.html) ────────── */
.crumbs--article { padding: 18px 0 0; }
.cat--top { display: inline-block; margin-top: 14px; }
.cover__label svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.post-card .cover__label svg { width: 26px; height: 26px; }
.related h2 { font-size: 20px; font-weight: var(--fw-bold); margin-bottom: 12px; }
.aside-card--promo { background: var(--sidebar-bg); color: var(--sidebar-strong); border-color: var(--sidebar-border); }
.aside-card--promo h6 { color: var(--sidebar-caption); }
.aside-card--promo p { color: var(--sidebar-text); font-size: 13px; line-height: 1.5; margin: 0 4px 10px; }
.aside-card--promo .btn { width: 100%; background: #fff; color: #033d63; border-color: #fff; }
.aside-card .doc__toc { position: static; padding: 0; border: none; box-shadow: none; }
.aside-card .doc__toc a.on { background: var(--primary-soft); }
.news .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.article .faq { margin-top: 8px; }
.related-tools { list-style: none; display: grid; gap: 6px; margin: 0; }
.related-tools a { color: var(--text); text-decoration: none; font-size: var(--fs-label); font-weight: var(--fw-medium); }
.related-tools a:hover { color: var(--primary-text); }
.refs { margin-top: 26px; border-top: 1px solid var(--border); padding-top: 12px; }
.refs summary { cursor: pointer; font-weight: var(--fw-semibold); color: var(--text-muted); }
.refs ul { margin-top: 10px; }
.refs a { word-break: break-all; font-size: var(--fs-label); }
.progress-bar { position: fixed; top: 0; left: 0; height: 3px; background: var(--accent); z-index: 40; width: 0; }
.prose img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.prose th { background: var(--surface-alt); }
.prose iframe, .prose video { max-width: 100%; }
.plan__price-row { display: flex; gap: 8px; align-items: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tags span { font-size: var(--fs-small); color: var(--text-muted); border: 1px solid var(--border); border-radius: 12px; padding: 3px 10px; background: var(--surface); }
/* Long URLs in policy text must wrap on phones */
.prose a { overflow-wrap: anywhere; }

/* PDF Editor plans on the pricing page (one-time USD payments, bought from the editor page) */
.editor-plans__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.editor-plan { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-alt); }
.editor-plan .plan__price b { font-size: 28px; }
.editor-plan .btn { justify-self: start; }
@media (max-width: 760px) { .editor-plans__grid { grid-template-columns: 1fr; } }


/* ── The appended SEO block ───────────────────────────────────────────────
   base.html renders landing/includes/seo_content_new.html after </main>, on every page that has
   text in SEO_PAGE_CONTENT and has not set hide_seo_block. Being outside <main> it carries
   .page-wrap and not the page's own wrap class, so its width has to be matched to the page above
   it or the card ends up wider or narrower than everything else on the page. This file is loaded
   last and on every page, which is why the block is styled from here rather than from each page's
   own stylesheet. */
.page-wrap.seo-block { margin-block: 26px clamp(30px, 3.6vw, 48px); }
.seo-block .doc__body { padding: clamp(20px, 2.4vw, 30px); }
.seo-block .prose h2 { font-size: clamp(21px, 2.2vw, 26px); letter-spacing: -.02em; }
.seo-block__sub { font-size: var(--fs-section); font-weight: var(--fw-bold); margin: 24px 0 10px; }
/* The question list is a card inside the block's own card: one surface inside another reads as a
   box in a box, so the inner one takes the quieter ground. */
.seo-block .faq { background: var(--surface-alt); }
.seo-block .tags { margin-top: 0; }

/* The tool pages and the crop page: <main> is full width and the content sits in .page-inner,
   1200px inside the page's own 24px, so the gutter has to be counted into the width to line the
   card up with it. */
body:has(main.page-wrap--fluid) .page-wrap.seo-block { max-width: 1248px; padding-inline: 24px; }
/* The tools index runs to 1180px inside 16px. */
body[data-page="tools"] .page-wrap.seo-block { max-width: 1180px; padding-inline: 16px; }
@media (max-width: 760px) {
  body:has(main.page-wrap--fluid) .page-wrap.seo-block { padding-inline: 16px; }
}

/* ── Step-by-step guide articles (blog/content/*.html) ────────────────────
   The screenshots carry red numbered marks baked into the picture and the step
   list beside them repeats those numbers, so the list markers are tinted to
   match. A shot steps outside the 720px text column because app windows need
   the width; it is scaled whole, never cropped. */
.article .prose .shot { width: 118%; max-width: calc(100vw - 40px); margin: 16px 0 22px; }
.article .prose .shot img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
/* A picture smaller than the column keeps its own size instead of being blown up. */
.article .prose .shot--sm { width: auto; }
.article .prose .shot--sm img { width: auto; max-width: 100%; }
.prose .shot figcaption { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 9px; color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }
.prose .shot figcaption span { display: inline-flex; align-items: center; gap: 7px; }
.prose .shot figcaption b { flex-shrink: 0; width: 19px; height: 19px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 11px; font-weight: var(--fw-bold); display: inline-grid; place-items: center; }
.prose .steps-inline--shot li::before { background: var(--danger); color: #fff; }
.prose .part-band { margin: 32px 0 6px; padding: 9px 14px; border-radius: var(--r-md); background: var(--surface-alt); border: 1px solid var(--border); font-weight: var(--fw-bold); }
.prose .guide-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.prose .guide-index li { margin: 0; }
.prose .guide-index a { display: flex; align-items: center; gap: 9px; height: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text); text-decoration: none; font-size: 14px; font-weight: var(--fw-medium); line-height: 1.3; }
.prose .guide-index a:hover { border-color: var(--primary-soft-border); color: var(--primary-text); }
.prose .guide-index b { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-text); font-size: 12px; font-weight: var(--fw-bold); display: inline-grid; place-items: center; }
@media (max-width: 760px) {
  .article .prose .shot { width: 100%; }
  .prose .guide-index { grid-template-columns: 1fr 1fr; }
}
/* A screenshot opens full size in a new tab: the app window is photographed at
   its own size, which is wider than the column it is shown in. */
.prose .shot a { display: block; }