/* ======================================================================
   MacXTools blog body
   ----------------------------------------------------------------------
   Standalone. UPLOAD AS A NEW FILE to assets/css/blog-body.css and do not
   touch style.css at all. post-page.php loads it directly after style.css,
   so it wins on cascade order without needing a paste position.

   Depends on the tokens declared in style.css :root. Load it second.

   DESIGN RULES for anything added to this file
   1. No left border accents. No `border-left` stripe on callouts, notes,
      quotes or any other component. Use a uniform border, a background
      tint and spacing instead.
   ====================================================================== */

:root{--mxt-blog-css:14}

/* Category tints missing from style.css for the two new blog categories */
.po[data-cat="filesystem"] {--pc:#274d80;--pt:#e8edf5}
.po[data-cat="storage"]    {--pc:#0a5fce;--pt:#eaf3ff}


/* ======================================================================
   Lists
   ----------------------------------------------------------------------
   style.css line 47 sets `ul,ol{list-style:none}` site wide and never
   restores markers for article copy. Forced here so the result does not
   depend on load order or specificity.
   ====================================================================== */

.po-body ul,.po-faq .fq ul{list-style:disc outside !important;padding-left:24px}
.po-body ol,.po-faq .fq ol{list-style:decimal outside !important;padding-left:26px}
.po-body ul ul{list-style:circle outside !important;margin:10px 0 0}
.po-body ol ol{list-style:lower-alpha outside !important;margin:10px 0 0}
.po-body li,.po-faq .fq li{display:list-item}
.po-body li::marker{color:var(--gray-400)}
.po-body ol > li::marker{color:var(--gray-600);font-weight:750;font-size:.95em}
.po-body li p{margin-bottom:10px}
.po-body li > ul,.po-body li > ol{margin-bottom:0}


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

.po-body ol.po-steps{list-style:none outside !important;padding-left:0;counter-reset:step;margin:0 0 28px}
.po-body ol.po-steps > li{
  position:relative;padding:2px 0 0 46px;margin-bottom:18px;
  min-height:32px;font-size:1.08rem;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:32px;height:32px;border-radius:50%;
  background:var(--pc,var(--blue-600));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}


/* ======================================================================
   Inline code
   ====================================================================== */

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


/* ======================================================================
   Code blocks with a copy control
   Markup stays plain <pre><code>. blog-enhance.js injects the wrapper.
   ====================================================================== */

.po-pre{
  position:relative;margin:0 0 28px;
  border-radius:var(--radius-md);overflow:hidden;
  background:var(--graphite-900);box-shadow:var(--shadow-sm);
}
.po-pre-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 12px 9px 16px;
  background:rgba(255,255,255,.055);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.po-pre-label{
  font-size:.72rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.po-copy{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  padding:6px 12px;border:1px solid rgba(255,255,255,.2);border-radius:8px;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.86);
  font-family:var(--font);font-size:.8rem;font-weight:700;
  cursor:pointer;transition:var(--transition);
}
.po-copy:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34);color:#fff}
.po-copy svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
             stroke-linecap:round;stroke-linejoin:round}
.po-copy.is-done{background:var(--blue-600);border-color:var(--blue-600);color:#fff}

.po-body .po-pre pre{
  margin:0;padding:16px 18px;background:none;
  font-family:var(--mono);font-size:.9rem;line-height:1.75;color:#e6edf6;
  white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2;
}
.po-body .po-pre pre code{
  background:none;border:0;padding:0;color:inherit;font-size:inherit;
  overflow-wrap:anywhere;
}
.po-body .po-pre pre .c{color:#8fa3bd}

/* Fallback if the JS has not run */
.po-body > pre{
  margin:0 0 28px;padding:16px 18px;
  background:var(--graphite-900);color:#e6edf6;
  border-radius:var(--radius-md);
  font-family:var(--mono);font-size:.9rem;line-height:1.75;
  white-space:pre-wrap;overflow-wrap:anywhere;
}


/* ======================================================================
   Tables
   ----------------------------------------------------------------------
   A real grid. Horizontal rules between rows and vertical rules between
   columns, so the reader can track across a wide row without losing it.
   Below 720px each row becomes a card, one labelled field per line.
   ====================================================================== */

.po-table{
  margin:0 0 30px;
  border:1.5px solid var(--gray-200);
  border-radius:var(--radius-lg);
  background:#fff;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.po-body table{
  width:100%;
  border-collapse:collapse;
  font-size:.98rem;
  line-height:1.6;
  text-align:left;
}

.po-body thead th{
  text-align:left;
  vertical-align:bottom;
  font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--graphite-900);
  background:var(--mist);
  padding:14px 18px;
  border-bottom:2px solid var(--gray-200);
  border-right:1px solid var(--gray-200);
  white-space:nowrap;
}
.po-body thead th:last-child{border-right:0}

.po-body tbody td,.po-body tbody th{
  padding:14px 18px;
  border-bottom:1px solid var(--gray-100);
  border-right:1px solid var(--gray-100);
  color:var(--gray-700);
  vertical-align:top;
  text-align:left;
  font-weight:400;
}
.po-body tbody td:last-child,.po-body tbody th:last-child{border-right:0}
.po-body tbody tr:last-child > *{border-bottom:0}
.po-body tbody tr:nth-child(even) > *{background:#fafbfd}
.po-body tbody tr:hover > *{background:var(--blue-50)}

/* Row subject column carries weight */
.po-body tbody td:first-child,.po-body tbody th:first-child{
  font-weight:650;color:var(--graphite-800);
}
.po-body td strong,.po-body th strong{color:var(--graphite-900);font-weight:800}

.po-body caption{
  caption-side:bottom;text-align:left;
  font-size:.92rem;color:var(--gray-600);
  padding:13px 18px;border-top:1px solid var(--gray-100);
}

/* --- Card layout on narrow screens --- */
@media(max-width:720px){
  .po-table.is-stacked{border:0;background:none;border-radius:0;overflow:visible}
  .po-table.is-stacked table,
  .po-table.is-stacked thead,
  .po-table.is-stacked tbody,
  .po-table.is-stacked tr,
  .po-table.is-stacked td,
  .po-table.is-stacked th{display:block;width:auto}
  .po-table.is-stacked thead{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  .po-table.is-stacked tbody tr{
    border:1.5px solid var(--gray-200);
    border-radius:var(--radius-lg);
    background:#fff;padding:4px 0;margin-bottom:14px;overflow:hidden;
  }
  .po-table.is-stacked tbody tr:nth-child(even) > *,
  .po-table.is-stacked tbody tr:hover > *{background:none}
  .po-table.is-stacked tbody td,
  .po-table.is-stacked tbody th{
    display:grid;
    grid-template-columns:minmax(86px,34%) 1fr;
    gap:14px;align-items:start;
    padding:11px 16px;
    border-right:0;
    border-bottom:1px solid var(--gray-100);
  }
  .po-table.is-stacked tbody tr > *:last-child{border-bottom:0}
  .po-table.is-stacked tbody td::before,
  .po-table.is-stacked tbody th::before{
    content:attr(data-label);
    font-size:.71rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
    color:var(--gray-500);padding-top:3px;overflow-wrap:anywhere;
  }
  .po-table.is-stacked caption{border-top:0;padding:0 2px 14px}
}


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

.po-body figure{margin:0 0 28px}
.po-body figure img{width:100%;height:auto;border-radius:var(--radius-lg);
                    border:1.5px solid var(--gray-100)}
.po-body figcaption{font-size:.94rem;color:var(--gray-600);line-height:1.55;margin-top:11px}


/* ======================================================================
   Callouts

   DESIGN RULE: no left border accents anywhere. No border-left stripe on
   callouts, notes, quotes or any other component. Separation comes from a
   uniform border, a background tint and spacing. This applies to every
   component added to this file in future.
   ====================================================================== */

.po-body .po-key{
  background:var(--blue-50);
  border:1.5px solid var(--blue-100);
  border-radius:var(--radius-lg);
  padding:22px 26px;margin:0 0 30px;
  font-size:1.12rem;line-height:1.72;
  color:var(--graphite-800);font-weight:520;
}

.po-body .po-note{
  background:var(--gold-tint);
  border:1.5px solid #ecd489;
  border-radius:var(--radius-lg);
  padding:19px 24px;margin:0 0 26px;
  font-size:1.05rem;line-height:1.72;color:var(--graphite-800);
}
.po-body .po-note strong{color:var(--graphite-900);font-weight:800}


/* ======================================================================
   FAQ
   Typography matched to the article body on purpose.
   ====================================================================== */

.po-faq{max-width:720px;margin:52px 0 0}
.po-faq > h2{
  font-size:clamp(1.4rem,1.2rem + .9vw,1.85rem);
  font-weight:800;letter-spacing:-.02em;
  color:var(--graphite-900);margin:0 0 18px;
}
.po-faq .fq{
  background:#fff;border:1.5px solid var(--gray-200);
  border-radius:var(--radius-lg);padding:22px 26px;margin-bottom:14px;
  transition:var(--transition);
}
.po-faq .fq:last-child{margin-bottom:0}
.po-faq .fq:hover{border-color:var(--blue-100);box-shadow:var(--shadow-md)}
.po-faq .fq h3{
  font-size:1.18rem;font-weight:750;letter-spacing:-.005em;
  color:var(--graphite-900);margin:0 0 10px;line-height:1.4;
}
.po-faq .fq p{font-size:1.08rem;line-height:1.75;color:var(--gray-700);margin:0 0 14px}
.po-faq .fq p:last-child{margin-bottom:0}
.po-faq .fq li{font-size:1.05rem;line-height:1.7;color:var(--gray-700);margin-bottom:8px}
.po-faq .fq a{color:var(--blue-600);font-weight:650;text-decoration:underline;text-underline-offset:3px}
.po-faq .fq a:hover{color:var(--blue-700)}


/* ======================================================================
   Explainer components
   ----------------------------------------------------------------------
   Built in HTML and CSS rather than as SVG images, on purpose.

   An SVG at a 700px viewBox renders its 17px labels at roughly 8px on a
   360px phone, which is unreadable. These reflow instead. The text is also
   real text, so it is selectable, searchable, readable by a screen reader
   and indexable, none of which is true of type baked into a picture.

   Same design rule applies: no left border accents.
   ====================================================================== */

/* --- Timeline of dated milestones --- */
.po-body .po-timeline{
  list-style:none !important;
  padding:0;margin:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.po-body .po-timeline > li{
  display:block;
  margin:0;
  background:#fff;
  border:1.5px solid var(--gray-200);
  border-radius:var(--radius-lg);
  padding:18px 20px;
}
.po-body .po-timeline > li::marker{content:none}
.po-body .po-timeline .tl-date{
  display:block;
  font-size:1.02rem;font-weight:800;
  color:var(--graphite-900);
  letter-spacing:-.01em;
  margin-bottom:3px;
}
.po-body .po-timeline .tl-tag{
  display:inline-block;
  font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue-700);background:var(--blue-50);
  border:1px solid var(--blue-100);border-radius:999px;
  padding:3px 9px;margin-bottom:10px;
}
.po-body .po-timeline li.is-now .tl-tag{
  color:#8a6100;background:var(--gold-tint);border-color:#ecd489;
}
.po-body .po-timeline .tl-what{
  display:block;font-size:1rem;line-height:1.6;color:var(--gray-700);
}

/* --- Two way split, what happens to A versus B --- */
.po-body .po-split{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 8px;
}
.po-body .po-split > div{
  border-radius:var(--radius-lg);padding:20px 22px;
}
.po-body .po-split .sp-keep{background:var(--pa-soft,var(--blue-50));border:1.5px solid var(--pa-line,var(--blue-100))}
.po-body .po-split .sp-lose{background:var(--gold-tint);border:1.5px solid #ecd489}
.po-body .po-split h4{
  font-size:1.06rem;font-weight:800;color:var(--graphite-900);
  margin:0 0 4px;line-height:1.35;
}
.po-body .po-split .sp-sub{
  font-size:.78rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--gray-600);margin:0 0 12px;
}
.po-body .po-split ul{
  list-style:disc outside !important;padding-left:20px;margin:0;
}
.po-body .po-split li{
  font-size:1rem;line-height:1.6;color:var(--gray-700);margin-bottom:7px;
}
.po-body .po-split li:last-child{margin-bottom:0}

@media(max-width:700px){
  .po-body .po-timeline{grid-template-columns:1fr;gap:12px}
  .po-body .po-timeline > li{padding:16px 18px}
  .po-body .po-split{grid-template-columns:1fr;gap:12px}
  .po-body .po-split > div{padding:17px 19px}
}

/* ======================================================================
   Trust signals: verified date and sources
   ====================================================================== */

/* The dot is positioned rather than a flex item, so the sentence stays a
   single text flow. As three flex children the text and any inline element
   inside it became separate columns and wrapped against each other. */
.po-verified{
  position:relative;
  max-width:720px;margin:0 0 26px;
  padding:11px 16px 11px 33px;
  background:var(--mist);
  border:1.5px solid var(--gray-100);
  border-radius:var(--radius-md);
  font-size:.92rem;line-height:1.55;color:var(--gray-600);
}
.po-verified-dot{
  position:absolute;left:16px;top:1.24em;
  width:8px;height:8px;border-radius:50%;
  background:var(--blue-600);
}

.po-sources{max-width:720px;margin:44px 0 0;padding-top:32px;border-top:1.5px solid var(--gray-100)}
.po-sources > h2{
  font-size:1.28rem;font-weight:800;letter-spacing:-.015em;
  color:var(--graphite-900);margin:0 0 6px;
}
.po-sources-note{font-size:.95rem;color:var(--gray-600);margin:0 0 16px;line-height:1.6}
.po-sources ol{list-style:decimal outside !important;padding-left:22px;margin:0}
.po-sources li{
  font-size:1rem;line-height:1.6;color:var(--gray-700);margin-bottom:11px;
  display:list-item;
}
.po-sources li:last-child{margin-bottom:0}
.po-sources li::marker{color:var(--gray-400);font-weight:750;font-size:.9em}
.po-sources a{color:var(--blue-600);font-weight:650;text-decoration:underline;text-underline-offset:3px}
.po-sources a:hover{color:var(--blue-700)}
.po-sources-pub{display:block;font-size:.86rem;color:var(--gray-500);margin-top:2px}

@media(max-width:1000px){
  .po-verified,.po-sources{max-width:none}
}

/* ======================================================================
   Responsive
   ====================================================================== */

/* --- Sidebar behaviour on narrow screens ------------------------------
   style.css collapses .po-main to a single column at 1000px, and .po-side
   sits after .po-col in the DOM, so the whole sidebar drops to the bottom
   of the page. A contents list placed after the article it was meant to
   navigate is dead weight, so it is hidden and the call to action carries
   the sidebar on its own.

   1000px is the correct breakpoint here, not 720px. It is the point where
   the grid collapses, which is what makes the contents list useless. */
@media(max-width:1000px){
  .po-toc{display:none}
  .po-side{gap:0;margin-top:4px}
  .po-faq{max-width:none}
}

@media(max-width:700px){
  .po-body .po-key{font-size:1.06rem;padding:17px 19px}
  .po-body .po-note{font-size:1.01rem;padding:15px 18px}
  .po-body .po-pre pre,.po-body > pre{font-size:.84rem;padding:14px 15px;line-height:1.7}
  .po-pre-bar{padding:8px 10px 8px 14px}
  .po-pre-label{font-size:.68rem}
  .po-copy{padding:5px 10px;font-size:.75rem}
  .po-body ol.po-steps > li{padding-left:40px;font-size:1.04rem}
  .po-body ol.po-steps > li::before{width:28px;height:28px;font-size:.88rem}
  .po-faq .fq{padding:18px 20px}
  .po-faq .fq h3{font-size:1.1rem}
  .po-faq .fq p{font-size:1.04rem}
}

@media(prefers-reduced-motion:reduce){
  .po-copy,.po-faq .fq{transition:none}
}

/* Below 420px the two column label and value split inside a stacked table
   card leaves too little room for the value, so the label moves above it. */
@media(max-width:420px){
  .po-table.is-stacked tbody td,
  .po-table.is-stacked tbody th{grid-template-columns:1fr;gap:3px;padding:11px 14px}
  .po-table.is-stacked tbody td::before,
  .po-table.is-stacked tbody th::before{padding-top:0}
  .po-body .po-pre pre,.po-body > pre{font-size:.8rem}
  .po-pre-label{max-width:9rem}
}


/* ======================================================================
   9. PAGE LAYOUTS
   ----------------------------------------------------------------------
   Every post declares a layout in posts.php and the template puts it on
   the article as .po-s-{name}. Seven layouts, chosen by what the page
   does rather than what it is about.

   Two purposes. A reader meets a different page shape each time, which is
   how a blog reads as written rather than generated. And the pages stay
   visually distinct from each other and from the sibling brand sites.

   Each layout sets --pa, its accent, which the shared components pick up.
   Then each adds one signature treatment of its own.
   ====================================================================== */

.po[data-style]{--pa:var(--blue-600);--pa-soft:var(--blue-50);--pa-line:var(--blue-100)}

.po-s-deadline  {--pa:#b98600;--pa-soft:var(--gold-tint);--pa-line:#ecd489}
.po-s-format    {--pa:#4d97ff;--pa-soft:#eef4ff;--pa-line:#d4e4ff}
.po-s-location  {--pa:var(--blue-600);--pa-soft:var(--blue-50);--pa-line:var(--blue-100)}
.po-s-diagnostic{--pa:#0860c0;--pa-soft:#e6effb;--pa-line:#cbdff5}
.po-s-comparison{--pa:#274d80;--pa-soft:#eaeef5;--pa-line:#d3dbe8}
.po-s-task      {--pa:#0a5fce;--pa-soft:#e9f2ff;--pa-line:#cfe2fa}
.po-s-concept   {--pa:var(--graphite-700);--pa-soft:var(--mist);--pa-line:var(--gray-200)}

/* Shared components follow the layout accent */
.po[data-style] .po-body ol.po-steps > li::before{background:var(--pa)}
.po[data-style] .po-body .po-key{border-color:var(--pa-line);background:var(--pa-soft)}
.po[data-style] .po-verified-dot{background:var(--pa)}
.po[data-style] .po-body .po-timeline .tl-tag{color:var(--pa);background:var(--pa-soft);border-color:var(--pa-line)}

/* --- deadline: amber accent, carried by the timeline, the licence matrix
       and the answer block. No heading numbering. --- */

/* --- format signature: container tree ----------------------------------
   Shows what unzipping an archive actually gives you. Indentation only, no
   connector rules, so it stays inside the no left border accent rule and
   still reflows on a phone. --- */
.po-body .po-tree{
  list-style:none !important;
  margin:0 0 28px;padding:16px 18px;
  border:1.5px solid var(--gray-200);
  border-radius:var(--radius-lg);
  background:#fff;
}
.po-body .po-tree li{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:12px;align-items:baseline;
  margin:0 0 9px;padding:0;
  font-size:.97rem;line-height:1.5;
}
.po-body .po-tree li:last-child{margin-bottom:0}
.po-body .po-tree li::marker{content:none}
.po-body .po-tree .tr-kind{
  font-size:.62rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--pa);background:var(--pa-soft);border:1px solid var(--pa-line);
  border-radius:999px;padding:3px 0;text-align:center;
}
.po-body .po-tree .tr-name{font-family:var(--mono);font-size:.9rem;color:var(--graphite-900);overflow-wrap:anywhere}
.po-body .po-tree .tr-what{display:block;font-family:var(--font);font-size:.94rem;color:var(--gray-600);margin-top:2px}
.po-body .po-tree .d1{padding-left:16px}
.po-body .po-tree .d2{padding-left:34px}

/* --- one way flow, for asymmetries between two platforms --- */
.po-body .po-oneway{margin:0 0 28px;display:grid;gap:12px}
.po-body .po-oneway > div{
  display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;
  padding:16px 18px;border-radius:var(--radius-lg);border:1.5px solid var(--gray-200);
  background:#fff;
}
.po-body .po-oneway .ow-end{font-size:1rem;font-weight:700;color:var(--graphite-900);line-height:1.4}
.po-body .po-oneway .ow-arrow{
  font-size:1.5rem;line-height:1;color:var(--pa);font-weight:700;
}
.po-body .po-oneway .ow-no .ow-arrow{color:var(--gray-400)}
.po-body .po-oneway .ow-no{background:#fbfbfc}
.po-body .po-oneway .ow-verdict{
  grid-column:1 / -1;font-size:.94rem;color:var(--gray-600);line-height:1.55;
}
.po-body .po-oneway .ow-no .ow-end{color:var(--gray-500)}

@media(max-width:560px){
  .po-body .po-tree li{grid-template-columns:56px minmax(0,1fr);gap:10px}
  .po-body .po-tree .d1{padding-left:10px}
  .po-body .po-tree .d2{padding-left:22px}
  .po-body .po-oneway > div{grid-template-columns:1fr;gap:6px;text-align:left}
  .po-body .po-oneway .ow-arrow{font-size:1.2rem}
}

/* --- format: light blue accent, carried by the spec panel and the split.
       No label before headings. --- */

/* --- format signature: spec panel -------------------------------------
   A file gets a spec sheet. Rows are label and value, monospace on the
   value so paths, extensions and type strings read as data. --- */
.po-body .po-spec{
  margin:0 0 28px;
  border:1.5px solid var(--gray-200);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:#fff;
}
.po-body .po-spec-head{
  padding:12px 20px;
  background:var(--pa-soft);
  border-bottom:1.5px solid var(--pa-line);
  font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pa);
}
.po-body .po-spec dl{
  display:grid;grid-template-columns:minmax(120px,30%) 1fr;
  margin:0;
}
.po-body .po-spec dt,
.po-body .po-spec dd{
  margin:0;padding:12px 20px;
  border-bottom:1px solid var(--gray-100);
  font-size:.98rem;line-height:1.55;
}
.po-body .po-spec dt{
  font-weight:750;color:var(--graphite-900);
  background:#fbfcfe;
}
.po-body .po-spec dd{color:var(--gray-700);overflow-wrap:anywhere}
.po-body .po-spec dd.mono{font-family:var(--mono);font-size:.9rem}
.po-body .po-spec dl > :nth-last-child(-n+2){border-bottom:0}

@media(max-width:560px){
  .po-body .po-spec dl{grid-template-columns:1fr}
  .po-body .po-spec dt{border-bottom:0;padding-bottom:2px;background:none}
  .po-body .po-spec dd{padding-top:0}
}

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

/* --- diagnostic: sections read as questions, so they sit tighter and the
       body leads with the answer --- */
.po-s-diagnostic .po-body h2{margin:40px 0 10px}
.po-s-diagnostic .po-body h2 + p{
  font-size:1.14rem;line-height:1.7;color:var(--graphite-800);font-weight:520;
}

/* --- comparison: a centred measure and a heavier matrix, because the
       reader is scanning across rather than reading down --- */
.po-s-comparison .po-body h2{
  font-size:clamp(1.34rem,1.15rem + .8vw,1.7rem);
  padding-bottom:12px;border-bottom:1.5px solid var(--gray-100);
}
.po-s-comparison .po-body thead th{background:var(--pa-soft);color:var(--pa)}

/* --- task: bright blue accent, carried by the numbered step markers.
       No label before headings. --- */

/* --- concept: a wider measure and quieter headings, because the page is
       read straight through rather than scanned --- */
.po-s-concept .po-body{max-width:700px}
.po-s-concept .po-body p{font-size:1.12rem;line-height:1.85}
.po-s-concept .po-body h2{font-weight:750;letter-spacing:-.015em}

@media(max-width:700px){
  .po-s-location .po-body h2{padding-top:16px}
  .po-s-concept .po-body p{font-size:1.08rem;line-height:1.8}
}