/* ======================================================================
   OnlinePCApps blog
   ----------------------------------------------------------------------
   Upload to /assets/css/blog.css. Loaded by blog/index.html,
   assets/inc/post-page.php and assets/inc/author-page.php.

   Self contained on purpose. Every custom property it needs is declared
   below under a --bl- prefix, so it cannot collide with or depend on the
   tokens in style.css. If style.css is later loaded alongside it, nothing
   in here overwrites anything there.

   DESIGN RULES for anything added to this file
   1. No left border accents. No border-left stripe on callouts, notes,
      quotes or anything else. Use a uniform border, a background tint and
      spacing instead.
   2. No component may set a colour literal. Go through a token.
   ====================================================================== */

:root{
  --bl-css:1;

  /* Ink */
  --bl-ink:#0d1526;
  --bl-ink-2:#1f2a40;
  --bl-body:#48566f;
  --bl-muted:#6b7890;

  /* Surface */
  --bl-page:#ffffff;
  --bl-mist:#f6f8fc;
  --bl-mist-2:#eef2f9;
  --bl-line:#e3e8f1;
  --bl-line-2:#d3dbe8;

  /* Accent families */
  --bl-blue:#1a56db;      --bl-blue-700:#1443ad;  --bl-blue-50:#eff4ff;  --bl-blue-100:#d5e2fd;
  --bl-violet:#6d3fd1;    --bl-violet-50:#f3efff; --bl-violet-100:#e2d8fb;
  --bl-green:#1a7a3c;     --bl-green-50:#eaf7ef;  --bl-green-100:#c8e8d4;
  --bl-amber:#b45309;     --bl-amber-50:#fef5e9;  --bl-amber-100:#f8e0bd;

  /* Live Chat CTA gradient */
  --bl-cta-a:#1a7a3c;
  --bl-cta-b:#145a2e;

  /* Type */
  --bl-font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --bl-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;

  /* Rhythm */
  --bl-flow:20px;      /* text to text */
  --bl-flow-lg:30px;   /* around panels, tables, figures, lists, code */
  --bl-sec:56px;       /* one h2 section to the next */
  --bl-shell:1180px;
  --bl-shell-post:1040px;   /* narrower, so the reading column IS the measure */
  --bl-gut:clamp(16px,4vw,32px);
  --bl-r:14px;
  --bl-r-sm:10px;

  /* Default post accent, overridden per category */
  --bl-pc:var(--bl-blue);
  --bl-pt:var(--bl-blue-50);
  --bl-pb:var(--bl-blue-100);
}

/* Category accents. One place, used by chips, cards, step markers and the
   layout signatures further down. */
.bl-card[data-cat="viewer"],    .po[data-cat="viewer"]    {--bl-pc:var(--bl-blue);   --bl-pt:var(--bl-blue-50);   --bl-pb:var(--bl-blue-100)}
.bl-card[data-cat="converter"], .po[data-cat="converter"] {--bl-pc:var(--bl-violet); --bl-pt:var(--bl-violet-50); --bl-pb:var(--bl-violet-100)}
.bl-card[data-cat="backup"],    .po[data-cat="backup"]    {--bl-pc:var(--bl-green);  --bl-pt:var(--bl-green-50);  --bl-pb:var(--bl-green-100)}
.bl-card[data-cat="formats"],   .po[data-cat="formats"]   {--bl-pc:#274d80;          --bl-pt:#eaeff7;             --bl-pb:#cfdaea}
.bl-card[data-cat="fixes"],     .po[data-cat="fixes"]     {--bl-pc:var(--bl-amber);  --bl-pt:var(--bl-amber-50);  --bl-pb:var(--bl-amber-100)}
.bl-card[data-cat="privacy"],   .po[data-cat="privacy"]   {--bl-pc:#0f5f6b;          --bl-pt:#e8f5f7;             --bl-pb:#c3e2e7}


/* ======================================================================
   Shell
   ====================================================================== */

.bl-hero,.bl-sec,.bl-filter,.au-hero,.po,.bl-close-sec{font-family:var(--bl-font)}
.bl-hero .container,.bl-sec .container,.bl-filter .container,
.au-hero .container,.bl-close-sec .container{
  max-width:var(--bl-shell);margin:0 auto;padding-left:var(--bl-gut);padding-right:var(--bl-gut);
}
.po .container{
  max-width:var(--bl-shell-post);margin:0 auto;padding-left:var(--bl-gut);padding-right:var(--bl-gut);
}
.bl-sec{padding:44px 0 64px}
.bl-close-sec{padding:0 0 72px}


/* ======================================================================
   Breadcrumb and eyebrow
   ====================================================================== */

.bl-crumb{font-size:.875rem;color:var(--bl-muted);margin:0 0 22px;letter-spacing:.1px}
.bl-crumb a{color:var(--bl-muted);text-decoration:none}
.bl-crumb a:hover{color:var(--bl-blue-700);text-decoration:underline}
.bl-crumb span[aria-hidden]{margin:0 7px;opacity:.55}
.bl-crumb span[aria-current]{color:var(--bl-ink-2);font-weight:600}

.bl-eyebrow{
  display:block;font-size:1.1rem;font-weight:800;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--bl-blue);margin:0 0 14px;
}


/* ======================================================================
   Listing hero
   ====================================================================== */

.bl-hero{
  padding:56px 0 40px;text-align:center;
  background:linear-gradient(180deg,var(--bl-mist) 0%,var(--bl-page) 100%);
  border-bottom:1px solid var(--bl-line);
}
/* Centred as a block rather than per element, so the eyebrow, heading and
   lead share one optical centre line instead of three. */
/* The hero is centred, and text-align inherits, so the breadcrumb has to be
   put back to the left explicitly. Removing a centring rule alone would not
   do it, since it would simply inherit the centring from .bl-hero. */
.bl-hero .bl-crumb{text-align:left}
.bl-hero-copy{max-width:760px;margin:0 auto}
.bl-hero h1{
  font-size:clamp(1.75rem,1.15rem + 2.1vw,2.6rem);font-weight:900;line-height:1.14;
  letter-spacing:-.6px;color:var(--bl-ink);margin:0 0 16px;text-wrap:balance;
}
.bl-hero h1 .accent{color:var(--bl-blue)}
.bl-lead{
  font-size:1.25rem;font-weight:300;line-height:1.6;color:var(--bl-body);
  margin:0 auto;max-width:58ch;text-wrap:pretty;
}


/* ======================================================================
   Category filter
   ====================================================================== */

.bl-filter{border-bottom:1px solid var(--bl-line);background:var(--bl-page);position:sticky;top:0;z-index:20}
/* safe center rather than center. A plain centred flex row that overflows
   pushes its first items past the scroll origin and they become unreachable.
   safe falls back to flex-start the moment the row no longer fits, and a
   browser without support simply gets flex-start, which is also correct. */
.bl-filter-inner{display:flex;gap:8px;overflow-x:auto;padding:12px 0;scrollbar-width:thin;justify-content:safe center}
.bl-filter-inner::-webkit-scrollbar{height:4px}
.bl-filter-inner::-webkit-scrollbar-thumb{background:var(--bl-line-2);border-radius:4px}
.bl-tab{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:9px 15px;border:1px solid var(--bl-line);border-radius:999px;
  font-size:.925rem;font-weight:650;color:var(--bl-ink-2);text-decoration:none;
  background:var(--bl-page);white-space:nowrap;transition:border-color .15s,background .15s;
}
.bl-tab:hover{border-color:var(--bl-line-2);background:var(--bl-mist)}
.bl-tab.is-active{background:var(--bl-ink);border-color:var(--bl-ink);color:#fff}
.bl-tab-ico{display:flex;width:17px;height:17px}
.bl-tab-ico svg{width:100%;height:100%}
.bl-tab .n{
  font-size:.78rem;font-weight:750;font-variant-numeric:tabular-nums;
  background:var(--bl-mist-2);color:var(--bl-muted);border-radius:999px;padding:1px 7px;
}
.bl-tab.is-active .n{background:rgba(255,255,255,.18);color:#fff}


/* ======================================================================
   Card grid
   ====================================================================== */

.bl-count{font-size:.925rem;color:var(--bl-muted);margin:0 0 26px;text-align:center}
.bl-count strong{color:var(--bl-ink-2);font-weight:750;font-variant-numeric:tabular-nums}

.bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}

/* Card.
   The team cards on about.html carry their accent as a border at rest, not
   only on hover, so these do the same and each category reads as its own
   family from across the page.

   Flex column with the meta row pushed to the bottom, because cards in a
   grid stretch to the tallest in the row and a meta row floating mid card
   is the usual giveaway that they were not built for it. */
.bl-card{
  position:relative;display:flex;flex-direction:column;
  border:1px solid var(--bl-pb);border-radius:16px;background:var(--bl-page);
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.bl-card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  background:linear-gradient(180deg,var(--bl-pt) 0%,transparent 42%);
  opacity:.55;pointer-events:none;
}
.bl-card:hover{
  border-color:var(--bl-pc);transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(13,21,38,.09);
}
.bl-body{position:relative;padding:24px;display:flex;flex-direction:column;flex:1}

/* The title link is stretched over the whole card, so the entire card is one
   target. Anything else clickable has to sit above it. */
.bl-title a::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.bl-cat,.bl-by{position:relative;z-index:2}

.bl-cat{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-size:.74rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:var(--bl-pc);background:var(--bl-page);border:1px solid var(--bl-pb);
  border-radius:999px;padding:6px 12px;text-decoration:none;margin:0 0 16px;
  transition:background .15s,border-color .15s;
}
.bl-cat:hover{background:var(--bl-pt);border-color:var(--bl-pc)}
.bl-cat-ico{display:flex;width:14px;height:14px}
.bl-cat-ico svg{width:100%;height:100%}

.bl-title{font-size:1.24rem;font-weight:850;line-height:1.32;letter-spacing:-.3px;margin:0 0 11px}
.bl-title a{color:var(--bl-ink);text-decoration:none}
.bl-card:hover .bl-title a{color:var(--bl-pc)}

.bl-excerpt{font-size:.975rem;line-height:1.62;color:var(--bl-body);margin:0 0 18px}

/* Read affordance. Decorative only, since the title above is the real link,
   so it is hidden from assistive technology rather than announced twice. */
.bl-more{
  display:inline-flex;align-items:center;gap:7px;margin:0 0 18px;
  font-size:.875rem;font-weight:750;color:var(--bl-pc);
}
.bl-more span{transition:transform .2s}
.bl-card:hover .bl-more span{transform:translateX(4px)}

.bl-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:auto;
  font-size:.85rem;color:var(--bl-muted);padding-top:15px;border-top:1px solid var(--bl-line);
}
.bl-by{color:var(--bl-ink-2);font-weight:700;text-decoration:none}
.bl-by:hover{color:var(--bl-pc);text-decoration:underline}
.bl-when{margin-left:auto;font-variant-numeric:tabular-nums}


/* ======================================================================
   Pagination
   ====================================================================== */

.bl-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;margin:44px 0 0}
.bl-page{
  min-width:40px;height:40px;padding:0 13px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--bl-line);border-radius:var(--bl-r-sm);
  font-size:.925rem;font-weight:650;font-variant-numeric:tabular-nums;
  color:var(--bl-ink-2);text-decoration:none;background:var(--bl-page);
}
.bl-page:hover{border-color:var(--bl-line-2);background:var(--bl-mist)}
.bl-page.is-active{background:var(--bl-ink);border-color:var(--bl-ink);color:#fff}
.bl-page.is-off{opacity:.4;pointer-events:none}
.bl-page svg{width:16px;height:16px}


/* ======================================================================
   Closing band
   ====================================================================== */

.bl-close{
  background:linear-gradient(135deg,var(--bl-ink) 0%,#16243f 100%);
  border-radius:var(--bl-r);padding:clamp(28px,5vw,48px);text-align:center;color:#fff;
}
.bl-close h2{font-size:clamp(1.4rem,1.05rem + 1.3vw,1.95rem);font-weight:850;letter-spacing:-.3px;margin:0 0 12px;color:#fff}
.bl-close p{font-size:1.08rem;font-weight:300;line-height:1.6;color:rgba(255,255,255,.82);margin:0 auto 24px;max-width:56ch}
.bl-close-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

.bl-close .btn-white,.bl-close .btn-ghost,.po-side-cta .btn-live{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 26px;border-radius:var(--bl-r-sm);
  font-size:1rem;font-weight:700;text-decoration:none;border:1px solid transparent;
  transition:filter .15s,background .15s;
}
.bl-close .btn-white{background:#fff;color:var(--bl-ink)}
.bl-close .btn-white:hover{filter:brightness(.94)}
.bl-close .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.bl-close .btn-ghost:hover{background:rgba(255,255,255,.1)}
.po-side-cta .btn-live{background:linear-gradient(135deg,var(--bl-cta-a) 0%,var(--bl-cta-b) 100%);color:#fff;width:100%}
.po-side-cta .btn-live:hover{filter:brightness(1.08)}


/* ======================================================================
   Author archive
   ====================================================================== */

.au-hero{padding:52px 0 40px;background:linear-gradient(180deg,var(--bl-mist) 0%,var(--bl-page) 100%);border-bottom:1px solid var(--bl-line)}
.au-hero-inner{display:flex;gap:28px;align-items:flex-start}
.au-hero-img{
  width:124px;height:124px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:3px solid var(--bl-page);box-shadow:0 4px 18px rgba(13,21,38,.12);
}
.au-hero h1{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.2rem);font-weight:900;letter-spacing:-.5px;color:var(--bl-ink);margin:0 0 6px}
.au-role{font-size:1.05rem;font-weight:700;color:var(--bl-blue);margin:0 0 14px}
.au-focus{
  display:inline-block;margin:0 0 14px;
  font-size:.85rem;font-weight:700;color:var(--bl-blue);
  background:var(--bl-blue-50);border:1px solid var(--bl-blue-100);
  border-radius:999px;padding:5px 13px;
}
.au-bio{font-size:1.08rem;font-weight:300;line-height:1.65;color:var(--bl-body);margin:0 0 18px;max-width:64ch}
.au-knows{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.au-knows li{
  font-size:.85rem;font-weight:650;color:var(--bl-ink-2);
  background:var(--bl-mist-2);border:1px solid var(--bl-line);border-radius:999px;padding:6px 13px;
}


/* ======================================================================
   Post hero
   ====================================================================== */

.po-hero{padding:44px 0 34px;background:linear-gradient(180deg,var(--bl-pt) 0%,var(--bl-page) 100%);border-bottom:1px solid var(--bl-line)}
/* No width cap here. The hero is the one band on the page that is not part
   of the two column reading area, so the heading and standfirst run the full
   width of the shell rather than stopping short of the sidebar edge.
   Body copy keeps its measure, since that is set by the grid column. */
.po-hero-copy{max-width:none}
.po-cat{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.78rem;font-weight:750;letter-spacing:.7px;text-transform:uppercase;
  color:var(--bl-pc);background:var(--bl-page);border:1px solid var(--bl-pb);
  border-radius:999px;padding:6px 12px;text-decoration:none;margin:0 0 16px;
}
.po-cat-ico{display:flex;width:14px;height:14px}
.po-cat-ico svg{width:100%;height:100%}
/* No text-wrap:balance here. Balance equalises line lengths, which on a left
   aligned heading means it breaks early and leaves the first line short of
   the shell edge. Normal wrapping fills each line before moving on, which is
   what a full width heading wants. Balance stays on the listing hero, where
   the heading is centred and even lines are the point. */
.po-hero h1{
  font-size:clamp(1.75rem,1.15rem + 2.1vw,2.6rem);font-weight:900;line-height:1.15;
  letter-spacing:-.7px;color:var(--bl-ink);margin:0 0 16px;
}
.po-standfirst{
  font-size:1.25rem;font-weight:300;line-height:1.58;color:var(--bl-body);
  margin:0 0 20px;max-width:none;text-wrap:pretty;
}
.po-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;font-size:.9rem;color:var(--bl-muted)}
.po-meta a{color:var(--bl-ink-2);font-weight:700;text-decoration:none}
.po-meta a:hover{color:var(--bl-pc);text-decoration:underline}
.po-meta time{font-variant-numeric:tabular-nums}


/* ======================================================================
   Post layout
   ====================================================================== */

/* Padding is one declaration rather than two rules. Split across a shorthand
   and a longhand, whichever came second would silently win. */
.po-main{
  display:grid;grid-template-columns:minmax(0,1fr) 288px;
  gap:clamp(28px,3.4vw,48px);align-items:start;
  padding:44px 0 clamp(56px,6vw,88px);
}
.po-col{min-width:0}

.po-side{position:sticky;top:24px;display:flex;flex-direction:column;gap:20px}
.po-side-head{
  font-size:.78rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--bl-muted);margin:0 0 12px;
}

.po-toc{border:1px solid var(--bl-line);border-radius:var(--bl-r);padding:20px;background:var(--bl-page)}
.po-toc ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.po-toc li{margin:0}
.po-toc a{
  display:block;padding:7px 11px;border-radius:var(--bl-r-sm);
  font-size:.9rem;line-height:1.45;color:var(--bl-body);text-decoration:none;
  transition:background .14s,color .14s;
}
.po-toc a:hover{background:var(--bl-mist);color:var(--bl-ink)}
.po-toc a.is-here{background:var(--bl-pt);color:var(--bl-pc);font-weight:700}

.po-side-cta{border:1px solid var(--bl-line);border-radius:var(--bl-r);padding:20px;background:var(--bl-mist)}
.po-side-cta p{font-size:.925rem;line-height:1.6;color:var(--bl-body);margin:0 0 16px}


/* ======================================================================
   Post body typography
   ====================================================================== */

.po-body{font-size:1.08rem;line-height:1.75;color:var(--bl-ink-2);max-width:none}

/* Flow rhythm.
   Text to text is one step. Anything that reads as a block, a panel, a
   table, a figure, a list or a code sample, gets a larger step on both
   sides so it is not mistaken for a continuation of the sentence above it.
   These are margins rather than sibling selectors on purpose: adjacent
   block margins collapse to the larger of the two, so a panel followed by
   a heading takes the heading's spacing and never the sum. */
.po-body > * + *{margin-top:var(--bl-flow)}
.po-body > figure,
.po-body > .po-table,
.po-body > .po-key,
.po-body > .po-note,
.po-body > .po-pre,
.po-body > pre,
.po-body > ul,
.po-body > ol,
.po-body > .po-shape,
.po-body > a.po-more,
.po-body > .po-matrix,
.po-body > .po-bars,
.po-body > blockquote{margin-top:var(--bl-flow-lg);margin-bottom:var(--bl-flow-lg)}
.po-body > :first-child{margin-top:0}
.po-body > :last-child{margin-bottom:0}
.po-body p{margin:0}
.po-body a{color:var(--bl-blue-700);text-decoration:underline;text-underline-offset:2px}
.po-body a:hover{color:var(--bl-pc)}
.po-body strong{font-weight:700;color:var(--bl-ink)}

.po-body h2{
  font-size:clamp(1.4rem,1.1rem + 1.1vw,1.85rem);font-weight:850;line-height:1.25;
  letter-spacing:-.4px;color:var(--bl-ink);margin:var(--bl-sec) 0 0;scroll-margin-top:80px;
}
.po-body h3{font-size:1.2rem;font-weight:800;line-height:1.35;color:var(--bl-ink);margin:38px 0 0;scroll-margin-top:80px}
.po-body h4{font-size:1.03rem;font-weight:750;color:var(--bl-ink);margin:28px 0 0}

/* Lists.
   Markers are forced because site wide resets commonly strip them and never
   restore them for article copy.

   Marker colour carries the category accent. It was previously set to the
   border tone, which is the same value used for hairlines and is close to
   invisible against white, so a bulleted list read as an indented block of
   text with no bullets at all. */
.po-body ul,.po-faq .fq-a ul{list-style:disc outside;padding-left:26px;margin:0}
.po-body ol,.po-faq .fq-a ol{list-style:decimal outside;padding-left:28px;margin:0}
.po-body ul ul{list-style:circle outside;margin-top:10px}
.po-body ol ol{list-style:lower-alpha outside;margin-top:10px}
.po-body li,.po-faq .fq-a li{display:list-item;margin-bottom:11px;padding-left:4px}
.po-body ul > li::marker{color:var(--bl-pc);font-size:1.1em}
.po-body ul ul > li::marker{color:var(--bl-pb)}
.po-body ol > li::marker{color:var(--bl-pc);font-weight:800;font-size:.95em;font-variant-numeric:tabular-nums}
.po-body ol ol > li::marker{color:var(--bl-muted);font-weight:700}
.po-faq .fq-a ul > li::marker{color:var(--bl-pc)}
.po-faq .fq-a ol > li::marker{color:var(--bl-pc);font-weight:800}
.po-body li:last-child{margin-bottom:0}
.po-body li > ul,.po-body li > ol{margin-bottom:0}

/* A list whose items each open with a bold lead in reads as a definition
   list rather than prose, so it gets a little more room between items. */
.po-body li > strong:first-child{color:var(--bl-ink)}


/* ======================================================================
   Key takeaway and note
   ====================================================================== */

/* Key takeaway. Sits above the article as the one paragraph a scanner will
   read, so it carries the category accent rather than a neutral fill. */
.po-body .po-key{
  position:relative;
  font-size:1.14rem;font-weight:450;line-height:1.68;color:var(--bl-ink);
  background:var(--bl-pt);border:1px solid var(--bl-pb);border-radius:var(--bl-r);
  padding:24px 26px;
}
.po-body .po-key strong{font-weight:750}
/* Note. Deliberately quieter than the key panel. It is an aside, so it stays
   neutral and only the lead in takes emphasis. */
.po-body .po-note{
  font-size:1rem;line-height:1.68;color:var(--bl-body);
  background:var(--bl-mist);border:1px solid var(--bl-line);border-radius:var(--bl-r);
  padding:20px 22px;
}
.po-body .po-note strong{color:var(--bl-ink);font-weight:750}
.po-body .po-note code{background:var(--bl-page)}


/* ======================================================================
   Tables
   ====================================================================== */

.po-body .po-table{border:1px solid var(--bl-line);border-radius:var(--bl-r);overflow:hidden}
.po-body .po-table table{width:100%;border-collapse:collapse;font-size:.975rem}
.po-body .po-table th,.po-body .po-table td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--bl-line)}
.po-body .po-table thead th{
  background:var(--bl-pt);font-size:.78rem;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;color:var(--bl-pc);
  border-bottom-color:var(--bl-pb);
}
.po-body .po-table tbody tr:last-child td{border-bottom:0}
.po-body .po-table tbody td:first-child{font-weight:650;color:var(--bl-ink)}
.po-body .po-table tbody tr:nth-child(even){background:var(--bl-mist)}


/* ======================================================================
   Numbered steps
   ====================================================================== */

.po-body ol.po-steps{list-style:none;padding-left:0;counter-reset:step;margin:0}
.po-body ol.po-steps > li{
  position:relative;padding:3px 0 0 48px;margin-bottom:18px;min-height:34px;
  font-size:1.06rem;line-height:1.7;display:list-item;
}
.po-body ol.po-steps > li::marker{content:none}
.po-body ol.po-steps > li::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;
  background:var(--bl-pc);color:#fff;
  font-size:.95rem;font-weight:800;font-variant-numeric:tabular-nums;
  display:flex;align-items:center;justify-content:center;
}
.po-body ol.po-steps > li:last-child{margin-bottom:0}


/* ======================================================================
   Timeline
   ====================================================================== */

.po-body ol.po-timeline{list-style:none;padding:0 0 0 26px;margin:0;position:relative}
.po-body ol.po-timeline::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--bl-line)}
.po-body ol.po-timeline > li{position:relative;padding:0 0 0 6px;margin-bottom:24px;display:block}
.po-body ol.po-timeline > li::before{
  content:"";position:absolute;left:-26px;top:6px;width:14px;height:14px;border-radius:50%;
  background:var(--bl-page);border:3px solid var(--bl-line-2);
}
.po-body ol.po-timeline > li.is-now::before{border-color:var(--bl-pc);background:var(--bl-pc)}
.po-body ol.po-timeline > li:last-child{margin-bottom:0}
.tl-tag{display:block;font-size:.78rem;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--bl-pc)}
.tl-date{display:block;font-size:1.02rem;font-weight:750;color:var(--bl-ink);margin:3px 0 4px;font-variant-numeric:tabular-nums}
.tl-what{display:block;font-size:.975rem;line-height:1.6;color:var(--bl-body)}


/* ======================================================================
   Two way split
   ====================================================================== */

.po-body .po-split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.po-split > div{border:1px solid var(--bl-line);border-radius:var(--bl-r);padding:20px;background:var(--bl-page)}
.po-split .sp-keep{background:var(--bl-green-50);border-color:var(--bl-green-100)}
.po-split .sp-lose{background:var(--bl-amber-50);border-color:var(--bl-amber-100)}
.po-split h4{margin:0 0 4px;font-size:1rem;font-weight:800;color:var(--bl-ink)}
.po-split .sp-sub{font-size:1.32rem;font-weight:850;color:var(--bl-ink);margin:0 0 12px;font-variant-numeric:tabular-nums}
.po-split ul{list-style:none;padding:0;margin:0;font-size:.94rem;line-height:1.55}
.po-split li{margin-bottom:7px;padding-left:18px;position:relative;color:var(--bl-body)}
.po-split li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4}
.po-split li:last-child{margin-bottom:0}


/* ======================================================================
   Message anatomy
   ----------------------------------------------------------------------
   Maps the parts of a sample message to plain English. A code block shows
   what a file looks like, this shows what each line is for, which is the
   part a reader cannot infer from the sample alone.
   ====================================================================== */

.po-body ol.po-parts{list-style:none;padding:0;margin:0;counter-reset:part}
.po-body ol.po-parts > li{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px;align-items:center;
  border:1px solid var(--bl-line);border-radius:var(--bl-r-sm);
  padding:12px 14px;margin-bottom:8px;background:var(--bl-page);
}
.po-body ol.po-parts > li:last-child{margin-bottom:0}
.po-body ol.po-parts > li.is-blank{background:var(--bl-mist)}
.po-parts code{
  font-family:var(--bl-mono);font-size:.82rem;line-height:1.45;
  background:var(--bl-pt);border:1px solid var(--bl-pb);color:var(--bl-ink);
  border-radius:6px;padding:6px 9px;display:block;overflow-wrap:anywhere;
}
.po-body ol.po-parts > li.is-blank code{background:var(--bl-page);border-color:var(--bl-line);color:var(--bl-muted);font-style:italic}
.po-parts .pt-what{font-size:.94rem;line-height:1.55;color:var(--bl-body)}
.po-parts .pt-what strong{color:var(--bl-ink);font-weight:700;display:block}


/* ======================================================================
   Has and lacks matrix
   ----------------------------------------------------------------------
   Two columns, what a thing carries against what it does not. Distinct
   from po-split, which compares two things against each other.
   ====================================================================== */

.po-body .po-matrix{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.po-matrix > div{border:1px solid var(--bl-line);border-radius:var(--bl-r);padding:20px;background:var(--bl-page)}
.po-matrix .mx-has{background:var(--bl-green-50);border-color:var(--bl-green-100)}
.po-matrix .mx-lacks{background:var(--bl-mist);border-color:var(--bl-line)}
.po-matrix h4{margin:0 0 14px;font-size:.98rem;font-weight:800;color:var(--bl-ink)}
.po-matrix ul{list-style:none;padding:0;margin:0;font-size:.94rem;line-height:1.55}
.po-matrix li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--bl-body)}
.po-matrix li:last-child{margin-bottom:0}
.po-matrix li::before{
  position:absolute;left:0;top:0;
  width:17px;height:17px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:900;line-height:1;
}
.po-matrix .mx-has li::before{content:"\2713";background:var(--bl-green);color:#fff}
.po-matrix .mx-lacks li::before{content:"\2715";background:var(--bl-line-2);color:var(--bl-page)}


/* ======================================================================
   Proportional bars
   ----------------------------------------------------------------------
   For a quantity the reader is meant to feel rather than calculate. Width
   comes from --w on the row, so the markup carries the number once.
   ====================================================================== */

.po-body .po-bars{border:1px solid var(--bl-line);border-radius:var(--bl-r);padding:20px 22px;background:var(--bl-page)}
.po-bars .br{margin-bottom:16px}
.po-bars .br:last-child{margin-bottom:0}
.po-bars .br-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:.92rem;margin:0 0 7px;
}
.po-bars .br-label{color:var(--bl-body)}
.po-bars .br-value{font-weight:800;color:var(--bl-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.po-bars .br-track{height:16px;border-radius:999px;background:var(--bl-mist-2);overflow:hidden}
.po-bars .br-fill{height:100%;border-radius:999px;background:var(--bl-pc);width:var(--w,0%)}
.po-bars .br.is-peak .br-fill{background:var(--bl-amber)}
.po-bars .br.is-peak .br-value{color:var(--bl-amber)}
.po-bars .br-note{font-size:.86rem;color:var(--bl-muted);margin:6px 0 0}


/* ======================================================================
   Shape on disk
   ----------------------------------------------------------------------
   Three or more columns, each showing how one format lays the same thing
   out on disk. Written as small monospace trees rather than prose, because
   the difference between a folder tree inside one file and a folder tree
   made of files is spatial. A paragraph describing it makes the reader
   rebuild the picture themselves.
   ====================================================================== */

.po-body .po-shape{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.po-shape > div{
  border:1px solid var(--bl-line);border-radius:var(--bl-r);
  padding:18px;background:var(--bl-page);
}
.po-shape h4{
  margin:0 0 4px;font-size:.98rem;font-weight:800;color:var(--bl-ink);
}
.po-shape .sh-sub{
  display:block;font-size:.78rem;font-weight:750;letter-spacing:.6px;
  text-transform:uppercase;color:var(--bl-pc);margin:0 0 12px;
}
.po-shape pre{
  margin:0 0 12px;padding:12px 13px;overflow-x:auto;
  background:var(--bl-mist);border:1px solid var(--bl-line);border-radius:var(--bl-r-sm);
}
.po-shape pre code{
  font-family:var(--bl-mono);font-size:.78rem;line-height:1.6;
  color:var(--bl-ink-2);background:none;border:0;padding:0;white-space:pre;
}
.po-shape .sh-note{font-size:.9rem;line-height:1.5;color:var(--bl-body);margin:0}


/* ======================================================================
   Figures
   ====================================================================== */

.po-body figure{margin:0}
.po-body figure > * + figcaption{margin-top:12px}
.po-body figcaption{font-size:.875rem;line-height:1.55;color:var(--bl-muted)}
.po-body img{max-width:100%;height:auto;border-radius:var(--bl-r-sm);display:block}


/* ======================================================================
   Code
   ====================================================================== */

.po-body code,.po-faq .fq-a code{
  font-family:var(--bl-mono);font-size:.88em;
  background:var(--bl-mist-2);color:var(--bl-ink);
  border:1px solid var(--bl-line);border-radius:6px;padding:.1em .4em;overflow-wrap:anywhere;
}
.po-body a code{color:var(--bl-blue-700);border-color:var(--bl-blue-100);background:var(--bl-blue-50)}

.po-pre{border:1px solid var(--bl-line);border-radius:var(--bl-r);overflow:hidden;background:var(--bl-mist)}
.po-pre-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 14px;border-bottom:1px solid var(--bl-line);background:var(--bl-mist-2);
}
.po-pre-label{font-size:.75rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--bl-muted)}
.po-copy{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  border:1px solid var(--bl-line-2);border-radius:7px;background:var(--bl-page);
  font-family:var(--bl-font);font-size:.8rem;font-weight:700;color:var(--bl-ink-2);cursor:pointer;
}
.po-copy:hover{background:var(--bl-mist)}
.po-copy.is-done{border-color:var(--bl-green-100);background:var(--bl-green-50);color:var(--bl-green)}
.po-copy svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.po-body pre{margin:0;padding:16px;overflow-x:auto;background:transparent}
.po-body pre code{background:none;border:0;padding:0;font-size:.9rem;line-height:1.65;color:var(--bl-ink)}
.po-body pre code .c{color:var(--bl-muted)}


/* ======================================================================
   Verified line
   ----------------------------------------------------------------------
   The dot is positioned rather than a flex item so the sentence stays a
   single wrapping block.
   ====================================================================== */

.po-verified{
  position:relative;margin:40px 0 0;padding:13px 18px 13px 36px;
  border:1px solid var(--bl-green-100);border-radius:var(--bl-r-sm);background:var(--bl-green-50);
  font-size:.9rem;line-height:1.55;color:var(--bl-ink-2);
}
.po-verified-dot{position:absolute;left:15px;top:1.15em;width:8px;height:8px;border-radius:50%;background:var(--bl-green)}


/* ======================================================================
   FAQ
   ----------------------------------------------------------------------
   Every item renders open. No accordion, no JS dependency.
   ====================================================================== */

.po-faq{margin:var(--bl-sec) 0 0}
.po-faq > h2{
  font-size:clamp(1.4rem,1.1rem + 1.1vw,1.85rem);font-weight:850;letter-spacing:-.4px;
  color:var(--bl-ink);margin:0 0 6px;scroll-margin-top:80px;
}
.po-faq-count{
  display:block;font-size:.9rem;color:var(--bl-muted);margin:0 0 20px;
}

/* Each item is a card in the site's own idiom: white on the page, a hairline
   border that lifts to the category accent on hover, and a marked question.
   The Q disc does the work an accordion chevron would normally do, telling
   the eye where one question ends and the next starts, without hiding any
   answer behind a click. */
.po-faq .fq{
  position:relative;background:var(--bl-page);
  border:1px solid var(--bl-line);border-radius:var(--bl-r);
  padding:22px 24px 22px 64px;margin-bottom:14px;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.po-faq .fq:hover{
  border-color:var(--bl-pb);
  box-shadow:0 6px 22px rgba(13,21,38,.06);
}
.po-faq .fq::before{
  content:"Q";position:absolute;left:22px;top:23px;
  width:28px;height:28px;border-radius:50%;
  background:var(--bl-pt);color:var(--bl-pc);border:1px solid var(--bl-pb);
  display:flex;align-items:center;justify-content:center;
  font-size:.82rem;font-weight:800;letter-spacing:.2px;
}
.po-faq .fq:last-child{margin-bottom:0}
.po-faq .fq h3{
  font-size:1.08rem;font-weight:800;line-height:1.45;
  color:var(--bl-ink);margin:2px 0 10px;letter-spacing:-.15px;
}
.po-faq .fq-a{font-size:1rem;line-height:1.72;color:var(--bl-body)}
.po-faq .fq-a p{margin:0 0 12px}
.po-faq .fq-a > :last-child{margin-bottom:0}
.po-faq .fq-a strong{color:var(--bl-ink);font-weight:700}
.po-faq .fq-a a{color:var(--bl-blue-700);text-decoration:underline;text-underline-offset:2px}
.po-faq .fq-a a:hover{color:var(--bl-pc)}


/* ======================================================================
   Sources
   ====================================================================== */

/* Sources.
   Previously a default decimal list with underlined links, which read as an
   afterthought. It is now a panel, because on a page that argues from a
   specification the citations are part of the argument.

   The publisher separator used to be a long dash set through CSS content.
   That slipped past the copy review because an escaped unicode codepoint
   does not look like punctuation in the source. The publisher now sits on
   its own line, which needs no separator at all. */
.po-sources{
  margin:var(--bl-sec) 0 0;padding:26px 26px 22px;
  border:1px solid var(--bl-line);border-radius:var(--bl-r);
  background:var(--bl-mist);
}
.po-sources > h2{
  font-size:1.12rem;font-weight:800;letter-spacing:-.1px;
  color:var(--bl-ink);margin:0 0 4px;scroll-margin-top:80px;
}
.po-sources-note{font-size:.9rem;line-height:1.55;color:var(--bl-muted);margin:0 0 6px}
.po-sources ol{list-style:none;padding:0;margin:0;counter-reset:src}
.po-sources li{
  position:relative;padding:14px 0 14px 42px;
  border-top:1px solid var(--bl-line);margin:0;
}
.po-sources li::before{
  counter-increment:src;content:counter(src);
  position:absolute;left:0;top:14px;
  width:26px;height:26px;border-radius:50%;
  background:var(--bl-page);border:1px solid var(--bl-line-2);
  color:var(--bl-muted);font-size:.78rem;font-weight:800;
  font-variant-numeric:tabular-nums;
  display:flex;align-items:center;justify-content:center;
}
.po-sources a{
  display:inline-block;font-size:1rem;font-weight:650;line-height:1.5;
  color:var(--bl-ink);text-decoration:none;
}
.po-sources a::after{
  content:"\2197";margin-left:6px;font-size:.85em;
  color:var(--bl-muted);vertical-align:1px;
}
.po-sources a:hover{color:var(--bl-pc);text-decoration:underline;text-underline-offset:2px}
.po-sources a:hover::after{color:var(--bl-pc)}
.po-sources-pub{
  display:block;margin-top:3px;
  font-size:.85rem;line-height:1.45;color:var(--bl-muted);
}


/* ======================================================================
   Author box
   ====================================================================== */

.po-author{
  display:flex;gap:20px;align-items:flex-start;margin:var(--bl-sec) 0 0;
  border:1px solid var(--bl-line);border-radius:var(--bl-r);padding:24px;background:var(--bl-mist);
}
.po-author-img{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:0 0 auto}
/* Initials disc, shown when an author photo is not on the server yet. Sized
   inline by the helper so the disc matches whatever the photo would have been. */
.opa-ini{
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;flex:0 0 auto;
  background:var(--bl-pt,var(--bl-mist-2));color:var(--bl-pc,var(--bl-ink));
  border:1px solid var(--bl-pb,var(--bl-line));
  font-weight:800;letter-spacing:.5px;font-size:calc(1rem + .4vw);
  user-select:none;
}
.au-hero-img.opa-ini{font-size:2.1rem}
.po-author-head{font-size:.75rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--bl-muted);margin:0 0 5px}
.po-author-name{font-size:1.15rem;font-weight:800;color:var(--bl-ink);text-decoration:none;display:inline-block}
.po-author-name:hover{color:var(--bl-pc)}
.po-author-role{
  font-size:.9rem;font-weight:650;color:var(--bl-pc);margin:4px 0 12px;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
.po-author-focus{
  font-size:.78rem;font-weight:700;letter-spacing:.3px;
  color:var(--bl-pc);background:var(--bl-pt);border:1px solid var(--bl-pb);
  border-radius:999px;padding:3px 10px;
}
.po-author-copy p{font-size:.975rem;line-height:1.65;color:var(--bl-body);margin:0 0 14px}
.po-author-links{font-size:.9rem;color:var(--bl-muted);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.po-author-links a{color:var(--bl-blue-700);text-decoration:none;font-weight:650}
.po-author-links a:hover{text-decoration:underline}


/* ======================================================================
   Inline post link
   ----------------------------------------------------------------------
   Replaces the grid of related cards that used to sit at the end of every
   article. That block was chrome. It appeared whether or not the posts in
   it were relevant, and it competed with the one call to action the page
   has.

   This sits inside the body instead, at the point in the argument where
   the other post actually helps. Drop it in like any other component:

     a.po-more, pointed at the other post, wrapping three spans:
       pm-tag     a short label such as Related
       pm-title   the other post's title
       pm-why     one line on why it is worth the detour

   Use it sparingly. A plain link in a sentence is better whenever the
   sentence can carry it.
   ====================================================================== */

.po-body a.po-more{
  display:block;text-decoration:none;
  border:1px solid var(--bl-pb);border-radius:var(--bl-r);
  background:var(--bl-pt);padding:18px 20px;
  transition:border-color .18s,box-shadow .18s;
}
.po-body a.po-more:hover{
  border-color:var(--bl-pc);box-shadow:0 6px 20px rgba(13,21,38,.07);
}
.po-more .pm-tag{
  display:block;font-size:.72rem;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--bl-pc);margin:0 0 6px;
}
.po-more .pm-title{
  display:block;font-size:1.06rem;font-weight:750;line-height:1.4;
  color:var(--bl-ink);
}
.po-body a.po-more:hover .pm-title{color:var(--bl-pc)}
.po-more .pm-title::after{content:"\00a0\203A";font-weight:800}
.po-more .pm-why{
  display:block;font-size:.94rem;line-height:1.55;color:var(--bl-body);margin:5px 0 0;
}


/* ======================================================================
   Layout signatures
   ----------------------------------------------------------------------
   Each post declares a style in posts.php and the template puts it on the
   article. Two posts should not look alike, so each style shifts measure,
   heading weight and which component carries the accent.
   ====================================================================== */

/* format: heavier headings, because the page is a reference rather than
   a read. Measure comes from the grid column, not a max-width here. */
.po-s-format .po-body h2{font-weight:900}

/* task: the numbered markers carry the page, so headings step back. */
.po-s-task .po-body h2{font-weight:800;letter-spacing:-.25px}
.po-s-task .po-body ol.po-steps > li{font-size:1.1rem}

/* diagnostic: sections read as questions, so they sit tighter to the copy
   that answers them. */
.po-s-diagnostic .po-body h2{margin-top:calc(var(--bl-sec) - 12px);font-size:clamp(1.3rem,1.05rem + .95vw,1.68rem)}

/* comparison: a heavier matrix, because the table is the argument rather
   than an aside. The tinted header is now the default for every table, so
   this variant pushes further: an accent border, a solid header rule and a
   subject column that holds its own weight. */
.po-s-comparison .po-body .po-table{border-color:var(--bl-pb)}
.po-s-comparison .po-body .po-table thead th{border-bottom-width:2px}
.po-s-comparison .po-body .po-table tbody td:first-child{color:var(--bl-ink);font-weight:700}

/* location: a rule above each section, reading as a folder divider. */
.po-s-location .po-body h2{border-top:2px solid var(--bl-line);padding-top:28px}
.po-s-location .po-body h2:first-child{border-top:0;padding-top:0}

/* concept: quieter headings, because the page is one continuous
   explanation rather than a set of reference sections. */
.po-s-concept .po-body h2{font-weight:800;letter-spacing:-.3px}

/* deadline: the timeline carries the accent and the key panel sits louder. */
.po-s-deadline .po-body .po-key{font-size:1.18rem;font-weight:500}
.po-s-deadline .po-body ol.po-timeline::before{background:var(--bl-pb)}


/* ======================================================================
   Narrow screens
   ====================================================================== */

@media (max-width:960px){
  .po-main{grid-template-columns:1fr;gap:0}
  .po-side{position:static;flex-direction:column;margin:36px 0 0}
  .po-toc{background:var(--bl-mist)}
  .au-hero-inner{flex-direction:column;gap:20px}
  .au-hero-img{width:96px!important;height:96px!important}
}

@media (max-width:720px){
  .bl-grid{grid-template-columns:1fr}

  /* The Q disc is inset on desktop. At this width that reserved column costs
     too much of the measure, so the disc moves above the question instead. */
  .po-faq .fq{padding:20px 20px 20px}
  .po-faq .fq::before{position:static;margin:0 0 12px}

  .po-sources{padding:22px 20px 18px}
  .po-body .po-key{padding:20px 20px}
  .po-body .po-note{padding:18px 18px}

  /* Panels are the full width of a phone screen, so the flow step around
     them can come down without them running together. */
  .po-body{--bl-flow-lg:24px;--bl-sec:44px}
  .po-body .po-split{grid-template-columns:1fr}
  .po-body .po-matrix{grid-template-columns:1fr}
  .po-body .po-shape{grid-template-columns:1fr}
  .po-body ol.po-parts > li{grid-template-columns:1fr;gap:8px}
  .po-author{flex-direction:column;gap:16px}
  .bl-meta .bl-when{margin-left:0;width:100%}
  .bl-filter{position:static}
}

/* Below 620px a wide table stacks into cards. blog.js writes the data-th
   attribute from the header row so each cell keeps its label. */
@media (max-width:620px){
  .po-body .po-table.is-stacked table,
  .po-body .po-table.is-stacked tbody,
  .po-body .po-table.is-stacked tr,
  .po-body .po-table.is-stacked td{display:block;width:100%}
  .po-body .po-table.is-stacked thead{display:none}
  .po-body .po-table.is-stacked tr{border-bottom:1px solid var(--bl-line);padding:6px 0}
  .po-body .po-table.is-stacked tr:last-child{border-bottom:0}
  .po-body .po-table.is-stacked td{border-bottom:0;padding:7px 16px;display:flex;gap:14px;justify-content:space-between}
  .po-body .po-table.is-stacked td::before{
    content:attr(data-th);flex:0 0 42%;
    font-size:.78rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--bl-muted);
  }
  .po-body .po-table.is-stacked tbody tr:nth-child(even){background:var(--bl-mist)}
}


/* ======================================================================
   Quality floor
   ====================================================================== */

.bl-tab:focus-visible,.bl-page:focus-visible,.bl-title a:focus-visible,
.po-toc a:focus-visible,.po-copy:focus-visible,.bl-cat:focus-visible,
.bl-close .btn-white:focus-visible,.bl-close .btn-ghost:focus-visible,.po-side-cta .btn-live:focus-visible{
  outline:2px solid var(--bl-blue);outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  .bl-card,.bl-tab,.po-toc a,.bl-close .btn-white,.bl-close .btn-ghost,.po-side-cta .btn-live{transition:none}
  .bl-card:hover{transform:none}
  html{scroll-behavior:auto}
}

@media print{
  .bl-filter,.po-side,.bl-close-sec,.po-copy{display:none}
  .po-main{grid-template-columns:1fr}
  .po-body{font-size:11pt}
}