/* src/DecisionTree.BrandTrader.Blazor/wwwroot/css/price-check.css
   ---------------------------------------------------------------------------
   Deliberately a standalone stylesheet, NOT a PriceCheck.razor.css. A .razor.css
   is compiled into the app-wide scoped bundle
   (DecisionTree.BrandTrader.Blazor.Client.styles.css, ~1 MB, shared by every
   component), which caches hard enough that edits here stayed invisible until a
   forced reload. This file is linked from App.razor's static <head> (via
   PriceCheck.CssHref), not <HeadContent>: the interactive HeadOutlet dropped the
   link during re-renders and the page flashed unstyled.

   Every selector is namespaced under .pc / .pc-*, which is used by no other
   component, so losing the [b-xxxx] scope attribute changes nothing.
   A free public tool on a landing page.

   Shape: the tool sits on the left of the hero and an illustration on the right,
   then three steps underneath say how it works. Everything past that is
   reference material and stays quiet.

   The page is built as full-bleed bands, each painting its own background. That
   is load-bearing, not decorative: the LeptonX shell pins `body` to 100vh with a
   grey fill, so a page that paints nothing shows a hard seam at exactly one
   viewport. Bands make that impossible.

   Inside the results the original concept holds: a wholesale trader's price
   sheet styled as a two-colour printed blotter. Colour marks the two market
   sides the trader arbitrages across and nothing else, the boundary between
   them gets a real rule (that boundary is the trade), and the derived figure -
   Room - is the one place the design raises its voice. Figures are set in the
   mono face because that is what aligns decimal points down a column; words
   are not.
   --------------------------------------------------------------------------- */

.pc {
    /* ink */
    --pc-ink: #12171d;              /* printed black, cool-cast */
    --pc-inkdeep: #0b0f14;
    --pc-muted: #5d6874;
    --pc-faint: #8a95a1;

    /* paper */
    --pc-line: #e3e8ed;
    --pc-rule: #c2cbd5;
    --pc-surface: #ffffff;          /* the sheet */
    --pc-raised: #f4f7fa;           /* quiet panels */
    --pc-page: #eef2f6;
    --pc-ground: #f6f8fa;           /* the desk the sheet lies on */

    /* the two sides. Buy is where money leaves, sell is where it comes back. */
    --pc-buy: #1a5f8a;
    --pc-buy-wash: #f0f6fa;
    --pc-sell: #8c2f39;
    --pc-sell-wash: #fcf2f3;

    --pc-ok: #1e6b32;
    --pc-room: #0f6b3c;
    --pc-warn: #9b1c1c;

    --pc-measure: 1200px;

    /* Light only, on purpose. The page used to carry a dark variant; it was dropped
       because the tool now also renders inside the signed-in Buyer/Seller/admin shells,
       which are light-only - a dark price sheet inside a light shell read as a bug.
       color-scheme also stops the browser painting the textarea, selects and number
       inputs dark on a machine whose OS is set to dark. */
    color-scheme: light;

    font-family: ui-sans-serif, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--pc-ink);
    background: var(--pc-surface);
    -webkit-font-smoothing: antialiased;
}

/* ---- bands -------------------------------------------------------------- */

.pc-band { width: 100%; }
.pc-wrap { max-width: var(--pc-measure); margin: 0 auto; padding-inline: 24px; }

.pc-band-nav { background: var(--pc-surface); border-bottom: 1px solid var(--pc-line); }
.pc-band-hero { background: var(--pc-surface); }
.pc-band-alt { background: var(--pc-ground); border-block: 1px solid var(--pc-line); }
.pc-band-paper { background: var(--pc-surface); }
.pc-band-ink { background: var(--pc-ink); color: #eef2f6; }
.pc-band-foot { background: var(--pc-inkdeep); color: #93a0ac; }
/* Two paper bands in a row need a rule between them, or the sections merge. */
.pc-band-paper + .pc-band-paper > .pc-wrap { border-top: 1px solid var(--pc-line); }

/* ---- masthead ---------------------------------------------------------- */

.pc-nav { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 16px 0; }
.pc-nav nav { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.pc-logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.1rem; text-decoration: none; color: inherit; }
.pc-logo img { height: 30px; }
.pc-wordmark { text-transform: lowercase; letter-spacing: -0.015em; }

/* ---- hero --------------------------------------------------------------- */

/* Tool left, picture right. A free tool that makes you scroll to reach it is a
   brochure, so the textarea is the first thing on the page that is not chrome. */
.pc-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: 64px; align-items: center; padding: 52px 0 60px; }
.pc-hero h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.8rem); line-height: 1.08; letter-spacing: -0.028em; margin: 0 0 12px; text-wrap: balance; }
.pc-intro { font-size: 1.08rem; line-height: 1.55; color: var(--pc-muted); margin: 0 0 26px; max-width: 46ch; }
.pc-hero-art { display: flex; align-items: center; justify-content: center; }
.pc-hero-art svg { width: 100%; height: auto; max-width: 520px; }

/* After a check the band carries one folded line, so it stops being a hero and
   becomes a rule between the masthead and the result. */
.pc-hero-compact { grid-template-columns: 1fr; gap: 0; padding: 18px 0 20px; }

/* ---- input -------------------------------------------------------------- */

.pc-label { display: block; font-weight: 600; margin-bottom: 7px; font-size: 0.9rem; }
.pc-paste { width: 100%; font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace; font-size: 0.95rem; line-height: 1.65; padding: 12px 14px; border: 1px solid var(--pc-rule); border-radius: 5px; background: var(--pc-surface); color: inherit; box-sizing: border-box; resize: vertical; }
.pc-paste:focus-visible, .pc-search:focus-visible, .pc-select:focus-visible, .pc-price-input:focus-visible { outline: 2px solid var(--pc-buy); outline-offset: 1px; }
.pc-hint, .pc-muted { color: var(--pc-muted); font-size: 0.88rem; }
.pc-hint { margin-top: 7px; }
.pc-preview { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; align-items: center; }
.pc-badge { padding: 3px 10px; border-radius: 3px; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.pc-ok { background: #e6f4ea; color: var(--pc-ok); }
.pc-bad { background: #fde8e8; color: var(--pc-warn); }
/* Zero valid lines is not a success, so it does not get the success colour. */
.pc-badge-zero { background: var(--pc-raised); color: var(--pc-muted); }
.pc-ok-text { color: var(--pc-ok); }
.pc-bad-text { color: var(--pc-warn); }
.pc-invalid { font-size: 0.85rem; margin-bottom: 10px; border-collapse: collapse; }
.pc-invalid td { padding: 2px 8px; }
.pc-more { color: var(--pc-muted); font-size: 0.85rem; margin: -4px 0 10px; }
.pc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* ---- buttons ------------------------------------------------------------ */

.pc-btn { padding: 11px 22px; border: 1px solid var(--pc-rule); border-radius: 5px; background: var(--pc-surface); color: inherit; cursor: pointer; text-decoration: none; font: inherit; font-weight: 500; line-height: 1.4; display: inline-block; }
.pc-btn:hover:not(:disabled) { border-color: var(--pc-ink); }
.pc-btn:disabled { opacity: 0.45; cursor: default; }
.pc-btn-primary { background: var(--pc-buy); color: #fff; border-color: var(--pc-buy); }
.pc-btn-primary:hover:not(:disabled) { background: #14496b; border-color: #14496b; }
.pc-btn:focus-visible { outline: 2px solid var(--pc-buy); outline-offset: 2px; }
.pc-band-ink .pc-btn-primary { background: var(--pc-surface); color: var(--pc-ink); border-color: var(--pc-surface); }
.pc-band-ink .pc-btn-primary:hover:not(:disabled) { background: #dfe6ed; }
.pc-btn-big { padding: 13px 28px; font-size: 1.02rem; }

.pc-chips { display: flex; flex-wrap: wrap; }
.pc-chip { padding: 7px 14px; border: 1px solid var(--pc-rule); background: var(--pc-surface); color: var(--pc-muted); cursor: pointer; font: inherit; font-size: 0.92rem; margin-left: -1px; }
.pc-chip:first-child { border-radius: 4px 0 0 4px; margin-left: 0; }
.pc-chip:last-child { border-radius: 0 4px 4px 0; }
.pc-chip:hover { color: var(--pc-ink); }
.pc-chip.on { background: var(--pc-ink); border-color: var(--pc-ink); color: var(--pc-surface); position: relative; z-index: 1; }
.pc-chip:focus-visible { outline: 2px solid var(--pc-buy); outline-offset: 1px; position: relative; z-index: 2; }
.pc-sources { margin-bottom: 14px; }

/* ---- results ------------------------------------------------------------ */

.pc-results { padding: 44px 0 52px; }

.pc-kpis { display: flex; gap: 0; flex-wrap: wrap; margin: 0 0 24px; border: 1px solid var(--pc-line); border-radius: 5px; overflow: hidden; background: var(--pc-surface); color: var(--pc-muted); font-size: 0.88rem; }
.pc-kpis div { flex: 1 1 130px; padding: 14px 20px; border-left: 1px solid var(--pc-line); }
.pc-kpis div:first-child { border-left: 0; }
.pc-kpis strong { display: block; font-size: 1.3rem; font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; color: var(--pc-ink); font-weight: 600; line-height: 1.2; }
.pc-sample-note { color: var(--pc-muted); font-style: italic; font-size: 0.9rem; margin: -14px 0 20px; }

.pc-insight { margin: 0 0 20px; }
.pc-insight h2 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 10px; max-width: 22ch; text-wrap: balance; }
.pc-insight-best { margin: 0 0 4px; font-size: 1.05rem; }
.pc-insight-well { margin: 0 0 4px; color: var(--pc-ok); }
.pc-insight-cards { display: flex; gap: 0; flex-wrap: wrap; margin: 20px 0; border-top: 2px solid var(--pc-ink); }
.pc-insight-card { flex: 1 1 150px; padding: 14px 20px 14px 0; }
.pc-insight-card + .pc-insight-card { padding-left: 20px; border-left: 1px solid var(--pc-line); }
.pc-insight-card strong { display: block; font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; font-size: 1.7rem; font-weight: 600; line-height: 1.1; }
.pc-insight-card span { color: var(--pc-muted); font-size: 0.88rem; }
.pc-insight-cta { margin-top: 6px; }

.pc-panel { padding: 22px 24px; margin: 16px 0; border-radius: 5px; background: #fff8e6; border: 1px solid #f0e0b8; }
.pc-panel-cta p { font-size: 1.05rem; margin: 0 0 12px; }
.pc-panel-filter { background: var(--pc-raised); border-color: var(--pc-line); }
.pc-panel-filter p { font-size: 1rem; margin: 0; color: var(--pc-muted); }
/* An empty result is a dead end unless it says what to try instead. */
.pc-panel-empty h3 { margin: 0 0 6px; font-size: 1.15rem; }
.pc-panel-empty p { margin: 0 0 10px; color: var(--pc-muted); font-size: 0.95rem; }
.pc-panel-empty ul { margin: 0 0 14px; padding-left: 20px; color: var(--pc-muted); font-size: 0.95rem; line-height: 1.6; }

.pc-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.pc-search { flex: 1 1 220px; min-width: 0; padding: 8px 10px; border: 1px solid var(--pc-rule); border-radius: 4px; background: var(--pc-surface); color: inherit; }
.pc-select { padding: 8px 10px; border: 1px solid var(--pc-rule); border-radius: 4px; background: var(--pc-surface); color: inherit; }

.pc-blocks { display: flex; gap: 6px; flex-wrap: wrap; }
.pc-block { padding: 6px 13px; border: 1px solid var(--pc-rule); border-radius: 999px; background: var(--pc-surface); color: var(--pc-muted); cursor: pointer; font: inherit; font-size: 0.9rem; }
.pc-block:hover { color: var(--pc-ink); border-color: var(--side, var(--pc-ink)); }
.pc-block.on { background: var(--wash); border-color: var(--side); color: var(--side); font-weight: 600; }
.pc-block:focus-visible { outline: 2px solid var(--side, var(--pc-buy)); outline-offset: 2px; }

/* ---- the grid ----------------------------------------------------------- */

/* Full screen. `position: fixed` is the point: it takes the grid out of the page's
   1180px reading column, which is what actually cramps a 20-column table on a wide
   monitor - the browser chrome was never the problem. The controls and the pager come
   along, so a 10-page result stays navigable. --pc-page is the ground behind the sheet.
   z-index is Bootstrap's modal layer (the one BuyerTradingScreenNew's full-screen modal
   uses): anything lower and the signed-in shell's top bar and side menu paint over the
   controls and the product column, which hides the Collapse button with them. */
.pc-grid-full {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: var(--pc-page);
    overflow: hidden;
}
.pc-grid-full .pc-controls { margin: 0; flex: 0 0 auto; }
/* min-height:0 or the flex item refuses to shrink below its content and the grid
   overflows the viewport instead of scrolling inside it. */
.pc-grid-full .pc-matrix { flex: 1 1 auto; min-height: 0; max-height: none; border-radius: 0; }
.pc-grid-full .pc-pager { margin: 0; flex: 0 0 auto; }
/* The log-in pitch is page furniture, not grid furniture. The empty-search panel is NOT -
   hiding it would leave a blank full screen with no explanation. */
.pc-grid-full .pc-unlock { display: none; }
.pc-expand[aria-pressed="true"] { background: var(--pc-ink); color: var(--pc-surface); border-color: var(--pc-ink); }

/* Both axes stick, so the container owns the scrolling on both. A capped height
   only bites when the result set is long. */
.pc-matrix {
    overflow: auto;
    max-height: 78vh;
    max-width: 100%;
    border: 1px solid var(--pc-line);
    border-radius: 4px;
    background: var(--pc-surface);
    overscroll-behavior-x: contain;
}

/* separate, not collapse: collapsed borders do not paint on sticky cells. Every
   rule below is therefore a per-cell border. */
.pc-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.95rem; }

.pc-table th, .pc-table td { padding: 9px 12px; border-bottom: 1px solid var(--pc-line); text-align: left; vertical-align: baseline; background: var(--pc-surface); }
.pc-table tbody tr:last-child td { border-bottom: 0; }

/* No uppercasing: these headers are market names - JOOP, MIAMI, UAE - and
   forcing caps on a proper noun throws information away. */
.pc-table thead th { position: sticky; top: 0; z-index: 3; font-size: 0.78rem; font-weight: 600; color: var(--pc-muted); letter-spacing: 0; background: var(--pc-raised); border-bottom: 1px solid var(--pc-rule); white-space: nowrap; }

/* Two header rows both stick, so the lower one has to clear the upper. The group
   row only renders for a logged-in caller with at least one block on, hence
   :has() - without it the column row would hang 1.85rem below an absent row. If
   an engine lacks :has(), both rows pin at 0 and overlap: degraded, not broken. */
.pc-table thead tr.pc-groups th { border-bottom: 0; padding-bottom: 2px; }
.pc-table thead:has(tr.pc-groups) tr:not(.pc-groups) th { top: 1.85rem; }

/* The group heading is the only place a side's name is set in its own colour. */
.pc-table thead th.pc-group { text-align: center; font-weight: 600; font-size: 0.8rem; color: var(--side); }
.pc-group-buy { --side: var(--pc-buy); --wash: var(--pc-buy-wash); }
.pc-group-sell { --side: var(--pc-sell); --wash: var(--pc-sell-wash); }
.pc-group-mysupplier { --side: var(--pc-buy); --wash: var(--pc-buy-wash); }
.pc-group-mycomp { --side: var(--pc-sell); --wash: var(--pc-sell-wash); }

/* Per-side tokens. Your own lists share the market side's hue - they are the
   same two sides, seen from inside - and are told apart by a dashed boundary
   and a paler wash, not by a third and fourth colour. */
.pc-mkt-buy { --side: var(--pc-buy); --wash: var(--pc-buy-wash); --edge: solid; }
.pc-mkt-sell { --side: var(--pc-sell); --wash: var(--pc-sell-wash); --edge: solid; }
.pc-mkt-mysupplier { --side: var(--pc-buy); --wash: var(--pc-buy-wash); --edge: dashed; }
.pc-mkt-mycomp { --side: var(--pc-sell); --wash: var(--pc-sell-wash); --edge: dashed; }

/* Ten columns a side means most cells are a dash, and a value floating in white space
   belongs to no column you can name without tracking back to the header. So each column
   gets its own shade, stepped by its index: same hue as its side - blue is still buy, red
   is still sell - just progressively stronger across the block. The header carries the
   same step as its cells, which is the part that makes a value identifiable on sight.
   Two declarations on purpose: the flat wash lands first, so a browser that cannot parse
   the color-mix keeps a correct (if flat) grid instead of falling back to white. */
.pc-table td.pc-mkt-buy, .pc-table td.pc-mkt-sell,
.pc-table td.pc-mkt-mysupplier, .pc-table td.pc-mkt-mycomp {
    background: var(--wash);
    --cell: color-mix(in srgb, var(--side) calc(var(--ci, 0) * 1.7%), var(--wash));
    background: var(--cell);
    border-left: 1px solid color-mix(in srgb, var(--side) 14%, transparent);
}
.pc-table thead th.pc-mkt {
    color: var(--side);
    background: color-mix(in srgb, var(--side) calc(var(--ci, 0) * 1.7%), var(--pc-raised));
    border-left: 1px solid color-mix(in srgb, var(--side) 14%, transparent);
}

/* Every market column now carries a hairline (above), so the block boundary has to be
   louder than a hairline rather than the only rule on the grid: 2px, in the side's own
   colour. That edge is still the trade. */
/* `thead th` and not bare `th`: the per-column hairline above is written as
   `.pc-table thead th.pc-mkt`, which outranks a bare `.pc-table th.pc-blockstart`, so the
   header row would lose its block divider to a hairline. */
.pc-table thead th.pc-blockstart, .pc-table td.pc-blockstart { border-left: 2px var(--edge, solid) var(--side); }
.pc-table thead th.pc-group { border-left: 2px var(--edge, solid) var(--side); }
.pc-table thead th.pc-group-mysupplier, .pc-table thead th.pc-group-mycomp { --edge: dashed; }

/* The frozen instrument column. Opaque, or rows scroll through underneath it. */
.pc-sticky { position: sticky; left: 0; z-index: 2; min-width: 190px; max-width: 300px; border-right: 1px solid var(--pc-rule); }
.pc-table thead .pc-sticky { z-index: 4; }
.pc-table td.pc-sticky { background: var(--pc-surface); }
.pc-title { display: block; font-weight: 500; line-height: 1.3; }
.pc-title .pc-muted { font-weight: 400; }
.pc-thumb { float: left; width: 30px; height: 30px; object-fit: contain; margin: 0 10px 0 0; }
.pc-mono { display: block; font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace; font-size: 0.78rem; color: var(--pc-faint); letter-spacing: 0.01em; }

/* Figures in mono: the point is that decimal points line up down the column. */
.pc-table th.pc-num, .pc-table td.pc-num { text-align: right; font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-nil { color: var(--pc-faint); }
.pc-pos { display: block; font-size: 0.75rem; font-weight: 500; }

.pc-table tbody tr:hover td { background: var(--pc-raised); }
.pc-table tbody tr:hover td.pc-mkt-buy, .pc-table tbody tr:hover td.pc-mkt-sell,
.pc-table tbody tr:hover td.pc-mkt-mysupplier, .pc-table tbody tr:hover td.pc-mkt-mycomp { background: color-mix(in srgb, var(--cell, var(--wash)) 88%, var(--side)); }

/* The cheapest buy and the price to beat are marked the way a trader marks a
   printed sheet: a stroke under the figure, in that side's colour. The cell
   background is already carrying side identity, so it cannot carry this too. */
.pc-win, .pc-beat { font-weight: 600; color: var(--pc-ink); text-decoration: underline; text-decoration-color: var(--side); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.pc-cond { display: inline-block; margin-left: 6px; padding: 0 4px; font-family: inherit; font-size: 0.68rem; color: var(--pc-faint); border: 1px solid var(--pc-line); border-radius: 2px; vertical-align: 1px; }

/* Room is why the page exists, so it is the one figure allowed to be loud:
   biggest in the grid, fenced off by its own rule. Colour only marks the sign -
   the sign itself is in the text, so colour is never the only cue. */
.pc-table th.pc-room { border-left: 2px solid var(--pc-rule); }
.pc-table td.pc-room { border-left: 2px solid var(--pc-rule); font-size: 1.05rem; font-weight: 600; color: var(--pc-ink); }
.pc-table td.pc-room-neg { color: var(--pc-sell); }

/* The age of the data, not a number to compare: faint, small, and never competing with Room
   next to it. Nowrap so "Aug 2023" cannot break across two lines in a narrow column. */
.pc-table th.pc-asof, .pc-table td.pc-asof { font-size: 0.8rem; color: var(--pc-faint); white-space: nowrap; }

.pc-lock { color: var(--pc-faint); cursor: help; }
.pc-unlock { margin: 16px 0 0; }

.pc-price-input { width: 90px; text-align: right; font-family: inherit; font-variant-numeric: tabular-nums; padding: 4px 6px; border: 1px solid var(--pc-rule); border-radius: 3px; background: var(--pc-surface); color: inherit; }
/* Markers beside the editable price: xN is how many list rows one edit writes
   to, the warning flags a row whose list already held conflicting prices. Both
   are cases where Apply changes data the trader never saw. */
.pc-edit-marker { margin-left: 6px; font-size: 0.78rem; color: var(--pc-muted); cursor: help; }
.pc-edit-warn { color: var(--pc-warn); }

/* Inline banner near Apply - this page has no toast provider in its render tree
   (PartnerLandingLayout is a bare @Body), so the outcome is shown in place. */
.pc-applied { margin-top: 8px; padding: 8px 12px; border-radius: 4px; font-size: 0.9rem; background: #e6f4ea; color: var(--pc-ok); }
.pc-applied-error { background: #fde8e8; color: var(--pc-warn); }

.pc-pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 16px 0; color: var(--pc-muted); font-size: 0.9rem; }
.pc-unmatched { margin-top: 16px; }

/* ---- collapsed states -------------------------------------------------- */

/* The folded input. Reads as a receipt for what was checked, not as a control panel:
   one line, quiet, with the only action that matters on the right. */
.pc-inputbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 11px 15px; background: var(--pc-raised); border: 1px solid var(--pc-line); border-radius: 5px; font-size: 0.95rem; }
.pc-btn-link { border-color: transparent; background: transparent; text-decoration: underline; padding: 4px 6px; font-weight: 400; }
.pc-btn-link:hover:not(:disabled) { border-color: transparent; color: var(--pc-buy); }
.pc-gridtoggle { margin: 8px 0; }
/* Never let the full-screen layer collapse the grid out from under itself. */
.pc-grid-full .pc-gridtoggle { display: none; }

/* ---- how it works ------------------------------------------------------- */

/* Three steps, and the content really is a sequence, so the order carries
   information. The drawing does the explaining; the words stay short. */
.pc-how { padding: 64px 0 70px; }
.pc-how-steps { list-style: none; counter-reset: pc-step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px; }
.pc-how-steps li { counter-increment: pc-step; }
.pc-how-art { height: 128px; margin-bottom: 22px; display: flex; align-items: flex-end; }
.pc-how-art svg { height: 100%; width: auto; max-width: 100%; }
.pc-how-steps h3 { font-size: 1.65rem; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 10px; font-weight: 700; }
.pc-how-steps p { margin: 0; color: var(--pc-muted); line-height: 1.6; max-width: 36ch; }

/* ---- reference sections ------------------------------------------------- */

/* Everything below "how it works" is reference material, so it is set quietly
   and gridded rather than left as a 68ch column stranded beside half a page of
   nothing. */
.pc-section { padding: 56px 0 60px; }
.pc-section-head { max-width: 34rem; margin: 0 0 30px; }
.pc-section h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem); line-height: 1.14; letter-spacing: -0.022em; margin: 0 0 10px; text-wrap: balance; }
.pc-section-head p { margin: 0; color: var(--pc-muted); font-size: 1.02rem; line-height: 1.55; }
.pc-band-ink .pc-section-head p, .pc-band-ink .pc-lede { color: #b6c1cc; }

.pc-defs { margin: 0; columns: 2; column-gap: 56px; line-height: 1.6; }
.pc-defs dt { font-weight: 600; margin: 0 0 2px; break-after: avoid; }
.pc-defs dd { margin: 0 0 20px; color: var(--pc-muted); break-inside: avoid; }
.pc-defs dd:last-child { margin-bottom: 0; }

.pc-lede { font-size: 1.05rem; margin: 0 0 4px; }
.pc-coverage { font-size: 1.05rem; margin: 0 0 4px; }

.pc-unlocktable { border-collapse: collapse; width: 100%; max-width: 780px; }
.pc-unlocktable th, .pc-unlocktable td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--pc-line); }
.pc-unlocktable thead th { font-size: 0.8rem; font-weight: 600; color: var(--pc-muted); border-bottom: 1px solid var(--pc-rule); }
.pc-unlocktable td:not(:first-child) { white-space: nowrap; }
.pc-unlock-cta { margin-top: 24px; }

/* ---- closing CTA + footer ----------------------------------------------- */

.pc-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 46px 0 50px; }
.pc-cta h2 { font-size: clamp(1.45rem, 1.2rem + 1.2vw, 1.95rem); line-height: 1.14; letter-spacing: -0.022em; margin: 0 0 8px; max-width: 20ch; text-wrap: balance; }
.pc-cta p { margin: 0; color: #b6c1cc; max-width: 46ch; }

.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 24px 0; font-size: 0.88rem; }
.pc-foot a { color: #b6c1cc; }
.pc-foot nav { display: flex; gap: 22px; flex-wrap: wrap; }

.pc-disabled { max-width: 62ch; margin: 48px auto; padding: 16px; background: #fff8e6; border: 1px solid #f0e0b8; border-radius: 4px; }

/* ---- narrow ------------------------------------------------------------- */

@media (max-width: 940px) {
    .pc-hero { grid-template-columns: 1fr; gap: 36px; padding: 36px 0 44px; }
    /* The picture is support, not the message, so on a phone it goes below the
       tool rather than pushing it off the first screen. */
    .pc-hero-art { order: 2; }
    .pc-hero-art svg { max-width: 420px; }
    .pc-defs { columns: 1; }
    .pc-how-steps { grid-template-columns: 1fr; }
    .pc-insight-card, .pc-insight-card + .pc-insight-card { flex: 1 1 100%; padding: 12px 0; border-left: 0; border-top: 1px solid var(--pc-line); }
    .pc-insight-card:first-child { border-top: 0; }
}

@media (max-width: 720px) {
    .pc-wrap { padding-inline: 16px; }
    .pc-section, .pc-results { padding: 36px 0 40px; }
    .pc-how { padding: 44px 0 48px; }
    .pc-how-steps { gap: 36px; }
    .pc-how-art { height: 100px; margin-bottom: 16px; }
    .pc-how-steps h3 { font-size: 1.4rem; }
    .pc-intro { font-size: 1rem; }
    .pc-kpis div { flex: 1 1 50%; border-left: 0; border-top: 1px solid var(--pc-line); }
    .pc-kpis div:nth-child(-n+2) { border-top: 0; }
    .pc-matrix { max-height: 70vh; }
    .pc-table { font-size: 0.9rem; }
    .pc-table th, .pc-table td { padding: 8px 9px; }
    .pc-sticky { min-width: 150px; max-width: 190px; }
    .pc-thumb { display: none; }
    .pc-table td.pc-room { font-size: 0.98rem; }
    .pc-unlocktable th, .pc-unlocktable td { padding: 10px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .pc *, .pc *::before, .pc *::after { transition: none !important; animation: none !important; }
}