/* ═══════════════════════════════════════════════════════════════════
   PINTEREST SEO

   Loads on top of product-opt.css and collection-opt.css, which between them
   carry the shared mock chrome: .po-sec, .po-two, .po-copy, .po-num, .po-do,
   .mk, .pox-row, .mk-tag, .mk-note, the .flow workflow, the .co-flow4 problem
   steps, .co-tree, .co-aside, .co-readers and .faq. Only what is new to this
   page is here, so the four deep dives cannot drift apart visually.

   WHAT THIS PAGE DRAWS. A Pinterest grid is made of two things: rectangles of
   uneven height, and the words underneath them. That is exactly what CSS is
   good at, so the mocks are built from it directly. No attempt is made to draw
   a product. The TikTok page learned that the hard way through two rejected
   illustrations, and the lesson is that an abstract texture is indistinguishable
   from a stock gradient while a drawn object is a cartoon. Uneven tile heights
   are the single strongest cue that a grid is Pinterest and not a listing page.

   Accent: the service's own rose (#FF5C8A in inc/services.php). Rose is too
   light for text on white, so --pn-ink carries the readable version.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --pn:#FF5C8A;
  --pn-soft:rgba(255,92,138,.11);
  --pn-line:rgba(255,92,138,.34);
  --pn-ink:#B0244F;
  --pn-t1:linear-gradient(155deg,#7C9A80,#3A5241);
  --pn-t2:linear-gradient(155deg,#B08268,#5E3A2A);
  --pn-t3:linear-gradient(155deg,#8B9AAE,#3F4C5E);
  --pn-t4:linear-gradient(155deg,#96798E,#463349);
  --pn-t5:linear-gradient(155deg,#B4A277,#544934);
}

.w50{width:50%}.w70{width:70%}.w85{width:85%}

.pn-hero .po-h1 .grad-text{display:inline;margin-top:0}
.pn-hero::before{
  background:
    radial-gradient(820px 420px at 8% -10%,rgba(124,108,255,.24),transparent 62%),
    radial-gradient(640px 400px at 96% 106%,rgba(255,92,138,.18),transparent 60%);
}

/* ══════════ SHARED SMALL PARTS ══════════ */
.pn-lab{
  display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.pn-tag{background:var(--pn-soft);color:var(--pn-ink);border:1px solid var(--pn-line)}
.pn-pill{
  font-size:10px;padding:2px 8px;border-radius:99px;margin-left:6px;vertical-align:middle;
  background:var(--pn-soft);color:var(--pn-ink);border:1px solid var(--pn-line);font-weight:500;
}
.pn-count{font-size:10.5px;color:var(--ink-3);margin-left:6px;font-weight:400}
.pn-n{
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  color:var(--pn-ink);background:var(--pn-soft);border:1px solid var(--pn-line);border-radius:6px;
  height:20px;min-width:26px;display:grid;place-items:center;flex:none;
}
.pn-chip{
  display:inline-flex;align-items:center;font-size:10.5px;padding:3px 9px;border-radius:99px;
  background:var(--paper-3);border:1px solid var(--line-2);color:var(--ink-3);
}
.pn-chip.on{background:var(--pn-soft);border-color:var(--pn-line);color:var(--pn-ink);font-weight:600}
.pn-sum{
  display:block;margin-top:12px;padding-top:11px;border-top:1px dashed var(--line);
  font-size:11px;color:var(--ink-3);
}

/* ══════════ ONE PIN ══════════
   The tile is a stand-in for a photograph, so it is a rich tonal fill rather
   than a grey box: a grey box in a Pinterest mock reads as a broken image. */
.pn-pin{break-inside:avoid;margin-bottom:9px;display:block}
.pn-tile{
  position:relative;display:block;width:100%;border-radius:11px;overflow:hidden;
  background:var(--pn-t1);
  box-shadow:0 1px 2px rgba(16,20,40,.10),inset 0 1px 0 rgba(255,255,255,.07);
}
/* IN FLOW, NOT ABSOLUTE. The board grid is a CSS multi-column container, and an
   absolutely positioned child inside a fragmented column paints against the
   wrong fragment in Chrome: two of six photographs rendered and the rest showed
   their fallback fill. The tile already has a definite height from its
   aspect-ratio, so a plain block child at 100% needs no positioning at all. */
.pn-tile img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center;
}
.pn-tile.r-tall{aspect-ratio:2/3}
.pn-tile.r-mid{aspect-ratio:3/4}
.pn-tile.r-short{aspect-ratio:1/1}
.pn-tile.t1,.pn-rank-cov.t1,.pn-cov-thumb.t1{background:var(--pn-t1)}
.pn-tile.t2,.pn-rank-cov.t2,.pn-cov-thumb.t2{background:var(--pn-t2)}
.pn-tile.t3,.pn-rank-cov.t3,.pn-cov-thumb.t3{background:var(--pn-t3)}
.pn-tile.t4,.pn-rank-cov.t4,.pn-cov-thumb.t4{background:var(--pn-t4)}
.pn-tile.t5,.pn-rank-cov.t5,.pn-cov-thumb.t5{background:var(--pn-t5)}
.pn-save{
  position:absolute;right:7px;top:7px;font-style:normal;
  font-size:10.5px;font-weight:700;color:#fff;background:var(--pn);
  border-radius:99px;padding:4px 10px;letter-spacing:.01em;
  box-shadow:0 2px 8px rgba(190,30,75,.45);
}
.pn-pin-t{
  display:block;margin-top:6px;font-size:11px;line-height:1.35;color:var(--ink-2);font-weight:500;
}

/* ══════════ ONE BOARD ══════════ */
.pn-board{
  position:relative;background:#fff;border:1px solid var(--line-2);border-radius:16px;
  padding:14px;box-shadow:0 1px 2px rgba(16,20,40,.04),0 18px 40px -26px rgba(16,20,40,.4);
}
.pn-board-head{margin-bottom:10px}
.pn-board-desc{margin-bottom:13px}
.pn-board-t{
  display:block;font-size:15px;font-weight:700;letter-spacing:-.015em;color:var(--ink);line-height:1.25;
}
.pn-board-meta{display:block;font-size:10px;color:var(--ink-3);margin-top:3px}
.pn-board-d{display:block;font-size:12px;line-height:1.55;color:var(--ink-2)}
.pn-board-grid{columns:3;column-gap:10px}
/* A board COVER, not a pin grid. Pinterest shows a board as one large image
   with a stack of small ones beside it, at a fixed height. Reusing the masonry
   here gave two ~140px columns of full-height pins, which is a board page, not
   a board card, and it made the section twice as tall as every other one. */
.pn-board-grid.mini{
  columns:auto;display:grid;grid-template-columns:1.7fr 1fr;grid-template-rows:repeat(3,1fr);
  gap:4px;height:136px;margin-bottom:11px;
}
.pn-board-grid.mini .pn-pin{margin:0;min-height:0}
.pn-board-grid.mini .pn-pin:first-child{grid-row:1 / span 3}
.pn-board-grid.mini .pn-tile{height:100%;aspect-ratio:auto;border-radius:7px}
.pn-board.sm{padding:11px}
.pn-board.sm .pn-board-t{font-size:13.5px}

/* ══════════ HERO STAGE ══════════
   Board across the top, the three readable fields in a row under it, the eight
   elements as an anchor strip at the bottom. The TikTok hero puts its mock
   beside the field cards because a phone is narrow; a board is a wide card and
   needs the full column, or its grid stops looking like Pinterest. */
.pn-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
/* 34px of gutter so the field tags sit clear of the card rather than landing on
   the text they point at. The board needs the full column: at 236px its title
   wrapped and the pin grid fell to two ~100px columns, which reads as a listing
   page, not as Pinterest. */
.pn-board-wrap{
  position:relative;display:flex;flex-direction:column;align-items:stretch;gap:10px;
  min-width:0;padding-left:34px;
}
.pn-search-chip{
  align-self:center;display:flex;align-items:center;gap:7px;max-width:100%;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  border-radius:99px;padding:6px 13px;color:#fff;
}
.pn-search-chip svg{width:12px;height:12px;flex:none;opacity:.8}
.pn-search-chip span{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* The tags name their field rather than carrying a code. B1, B2 and B3 with a
   legend beside them made a reader hold a key in their head to read a picture,
   and the first question asked of it was "what is B1". Each tag lives inside
   the field it labels, so it stays in register when copy length changes. */
.pn-board-head,.pn-board-desc,.pn-board-grid{position:relative}
.pn-field-tag{
  position:absolute;right:calc(100% + 12px);top:0;z-index:5;white-space:nowrap;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:linear-gradient(150deg,#FF7FA4,#D93968);
  border-radius:99px;padding:4px 10px;
  box-shadow:0 4px 14px rgba(217,57,104,.4);
}
.pn-field-tag::after{
  content:'';position:absolute;left:100%;top:50%;width:10px;height:1px;
  background:rgba(255,127,164,.6);
}
/* NO position:relative here. Creating a positioned element inside a fragmented
   multi-column column brings back the paint bug that stopped four of six
   photographs rendering, and the inline tag does not need one. */
.pn-pin-t .pn-field-tag{
  position:static;display:inline-block;font-style:normal;
  margin:0 6px 2px 0;vertical-align:middle;box-shadow:0 2px 8px rgba(217,57,104,.3);
}
.pn-pin-t .pn-field-tag::after{display:none}

/* what each field is */
.pn-layers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-width:0}
.pn-layer{
  display:flex;flex-direction:column;
  padding:13px 14px;border-radius:12px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
  border-left:2px solid var(--pn);
}
.pn-layer-lab{
  display:flex;align-items:center;gap:7px;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--night-ink-2);
}
.pn-layer p{font-size:12px;line-height:1.55;color:var(--night-ink-2);margin:7px 0 0}
.pn-layer p b{color:#fff;font-weight:600}

/* the contents strip */
.pn-index{grid-column:1 / -1;margin-top:4px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.pn-index .pn-lab{color:var(--night-ink-2);margin-bottom:10px}
.pn-index-chips{display:flex;flex-wrap:wrap;gap:6px}
.pn-index-chips a{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--night-ink-2);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:99px;padding:4px 11px 4px 5px;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.pn-index-chips a b{
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;color:var(--pn);
  background:rgba(255,92,138,.16);border-radius:99px;padding:2px 6px;
}
.pn-index-chips a:hover{background:rgba(255,92,138,.14);border-color:var(--pn-line);color:#fff}

/* ══════════ THE RESULT: THREE SURFACES, NUMBERED ══════════ */
.pn-surf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.pn-surf{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:17px 16px 15px;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,20,40,.04),0 16px 34px -22px rgba(16,20,40,.34);
}
.pn-surf::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--violet),var(--pn) 62%,rgba(255,92,138,0));
}
.pn-surf-head{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.pn-surf-n{
  width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;color:#fff;
  background:linear-gradient(150deg,var(--violet),var(--pn));
}
.pn-surf-head h3{font-size:14.5px;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin:0}
.pn-surf-flag{
  margin-left:auto;flex:none;font-size:10px;letter-spacing:.05em;color:#0E7A5B;white-space:nowrap;
}
.pn-surf-flag::after{content:' \2713'}
.pn-surf-note{
  font-size:11.5px;line-height:1.5;color:var(--ink-3);
  margin:13px 0 0;padding-top:12px;border-top:1px dashed var(--line-2);
}
.pn-surf .pn-surf-note{margin-top:auto}

/* 1 · the ranked boards */
.pn-surf-bar{
  display:flex;align-items:center;gap:7px;background:var(--paper-3);border-radius:99px;
  padding:6px 11px;color:var(--ink-3);margin-bottom:9px;
}
.pn-surf-bar svg{width:12px;height:12px;flex:none}
.pn-surf-bar span{font-size:10.5px}
.pn-surf-tabs{
  display:flex;gap:14px;font-size:11px;color:var(--ink-3);
  border-bottom:1px solid var(--line-2);padding-bottom:8px;margin-bottom:10px;
}
.pn-surf-tabs b{
  color:var(--ink);font-weight:600;border-bottom:2px solid var(--ink);
  padding-bottom:8px;margin-bottom:-10px;
}
.pn-rank{list-style:none;display:flex;flex-direction:column;gap:6px;margin:0;padding:0}
.pn-rank li{
  display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:9px;align-items:center;
  padding:6px 9px;border-radius:9px;background:#F4F6FB;border:1px solid transparent;
}
.pn-rank li.win{background:var(--pn-soft);border-color:var(--pn-line)}
.pn-rank-cov{
  display:block;width:30px;height:30px;border-radius:7px;background:var(--pn-t1);
  object-fit:cover;flex:none;
}
.pn-rank-t{font-size:11.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-rank li.win .pn-rank-t{color:var(--ink);font-weight:600}
.pn-rank-who{font-size:10px;color:var(--ink-3);white-space:nowrap}

/* 2 · a pin ends, a board keeps going */
.pn-curve-lab{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--ink-3);margin-bottom:5px}
.pn-curve-lab i{width:11px;height:3px;border-radius:2px;flex:none}
.pn-curve-lab i.spike{background:#C9D0E0}
.pn-curve-lab i.climb{background:var(--pn)}
.pn-curve-plot{position:relative;height:88px;margin:9px 0 5px;overflow:hidden;border-radius:8px;background:#F7F8FC}
.pn-spike,.pn-climb{position:absolute;inset:0;display:block}
.pn-spike{
  background:#D5DAE6;
  clip-path:polygon(0 100%,7% 100%,12% 10%,18% 88%,24% 99%,100% 100%);
}
.pn-climb{
  background:linear-gradient(180deg,rgba(255,92,138,.5),rgba(255,92,138,.14));
  clip-path:polygon(0 100%,10% 88%,30% 72%,55% 52%,80% 30%,100% 16%,100% 100%);
}
.pn-axis{
  position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line-2);
  text-decoration:none;display:block;
}
.pn-curve-x{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-3)}

/* 3 · Google's image pack */
.pn-g-bar{
  display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:99px;padding:6px 11px;color:var(--ink-3);margin-bottom:9px;
  box-shadow:0 1px 3px rgba(16,20,40,.06);
}
.pn-g-bar svg{width:12px;height:12px;flex:none}
.pn-g-bar span{font-size:10.5px}
.pn-g-tabs{
  display:flex;gap:13px;font-size:11px;color:var(--ink-3);
  border-bottom:1px solid var(--line-2);padding-bottom:8px;margin-bottom:10px;
}
.pn-g-tabs b{
  color:#1A6FD4;font-weight:600;border-bottom:2px solid #1A6FD4;
  padding-bottom:8px;margin-bottom:-10px;
}
.pn-g-pack{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.pn-g-tile{margin:0;min-width:0}
.pn-g-tile img,.pn-g-tile span{
  display:block;width:100%;aspect-ratio:1;border-radius:7px;object-fit:cover;background:var(--pn-t3);
}
.pn-g-tile span.t3{background:var(--pn-t3)}
.pn-g-tile span.t4{background:var(--pn-t4)}
.pn-g-tile span.t5{background:var(--pn-t5)}
.pn-g-tile.win img{outline:2px solid var(--pn);outline-offset:2px}
.pn-g-tile figcaption{
  display:block;font-size:10px;color:var(--ink-3);margin-top:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pn-g-tile.win figcaption{color:var(--pn-ink);font-weight:600}
.pn-g-res{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.pn-g-res u{display:block;height:6px;border-radius:3px;background:#E2E6F0;text-decoration:none}

/* ══════════ A WORKED EXAMPLE ON EVERY WORKFLOW STAGE ══════════
   Four cards of prose about a process is the part of a services page a reader
   skims. Each stage shows what you are actually handed at that step. */
/* pushed to the bottom of the card so all four example strips line up across
   the row, however long each stage's prose runs */
.flow-stages .fstage{display:flex;flex-direction:column}
.pn-eg{margin-top:auto;padding-top:11px;border-top:1px dashed var(--line-2)}
.fstage .fs-d{margin-bottom:11px}
.pn-eg-lab{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.pn-eg-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.pn-eg-chip,.pn-eg-kw,.pn-eg-board{
  font-size:10.5px;padding:4px 9px;border-radius:7px;line-height:1.3;
}
.pn-eg-chip{background:var(--paper-3);border:1px solid var(--line-2);color:var(--ink-2)}
.pn-eg-more{font-size:10.5px;color:var(--ink-3)}
.pn-eg-kw{
  font-family:'IBM Plex Mono',monospace;background:var(--paper-3);
  border:1px solid var(--line-2);color:var(--ink);
}
.pn-eg-board{background:var(--pn-soft);border:1px solid var(--pn-line);color:var(--pn-ink);font-weight:600}
.pn-eg-tier{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.05em;
  padding:3px 7px;border-radius:99px;background:#fff;border:1px solid var(--line-2);color:var(--ink-3);
}
.pn-eg-tier.ess{background:rgba(232,178,58,.14);border-color:rgba(232,178,58,.4);color:#8A6412}
.pn-eg-tier.open{background:var(--pn-soft);border-color:var(--pn-line);color:var(--pn-ink)}

/* ══════════ DEMAND: TWO SOURCED FIGURES ══════════ */
.pn-demand{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:940px;margin:0 auto;
}
.pn-stat{
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(20px,2.6vw,28px);box-shadow:var(--shadow-sm);
}
.pn-stat b{
  display:block;font-family:Unbounded,Inter,sans-serif;font-size:clamp(40px,5vw,58px);
  font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--pn-ink);margin-bottom:14px;
}
.pn-stat p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 12px}
.pn-stat cite{font-style:normal;font-size:12px;color:var(--ink-3);font-family:'IBM Plex Mono',monospace}
.pn-stat cite a{color:var(--violet);text-decoration:underline;text-decoration-color:rgba(124,108,255,.35);text-underline-offset:3px}
.pn-stat cite a:hover{text-decoration-color:var(--violet)}
.pn-stat-note{
  grid-column:1 / -1;background:var(--night-2);border-radius:var(--r-lg);
  padding:clamp(18px,2.4vw,24px);
}
.pn-stat-note .pn-lab{color:var(--night-ink-2);margin-bottom:9px}
.pn-stat-note p{font-size:15px;line-height:1.6;color:#fff;margin:0}

/* ══════════ THE PROBLEM ══════════ */
.pn-bad-vis{display:flex;flex-wrap:wrap;gap:5px;padding:11px 12px;align-items:flex-start}
.pn-bad-vis span{
  font-size:10px;padding:3px 8px;border-radius:6px;
  background:#EFF1F7;border:1px solid var(--line-2);color:var(--ink-3);
}
.pn-flat-vis{display:flex;align-items:flex-end;gap:5px;padding:12px 14px;height:76px}
.pn-flat-vis i{flex:1;border-radius:3px 3px 0 0;background:#D7DCE8;height:var(--h);display:block}

/* ══════════ 01 · THE MAP ══════════ */
.pn-tree .l1{display:flex;align-items:center;flex-wrap:wrap}
.pn-tree .l2{display:flex;align-items:baseline;flex-wrap:wrap}
.pn-gate{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:12px}
.pn-gate li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:9px;align-items:start}
.pn-gate li i{width:14px;height:14px;border-radius:50%;margin-top:2px;display:block}
.pn-gate li.ok i{background:#E6F7F0;border:1px solid #C6EBDC;box-shadow:inset 0 0 0 3px #0E7A5B}
.pn-gate li.no i{background:#FFE9EF;border:1px solid #FFD2DE;box-shadow:inset 0 0 0 3px #C2453F}
.pn-gate li span{display:block;font-size:12.5px;color:var(--ink)}
.pn-gate li em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);margin-top:1px;grid-column:2}
.pn-gate li.no span{color:var(--ink-3);text-decoration:line-through;text-decoration-color:#C2453F}
.pn-gate li.no em{color:#C2453F}

/* ══════════ THE APP SCREENS ══════════
   Sections 02 and 05 show the two views a client actually works in, so the
   components here mirror the ones the app renders: the tab pair, the stat bar,
   the numbered board cards with their Essential badge and pin chips, and the
   keyword table with a tier row and a count on each section. A marketing page
   that invents its own picture of the product teaches a buyer something they
   will not recognise on day one. */
.pn-app{
  background:#fff;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,20,40,.04),0 18px 40px -28px rgba(16,20,40,.4);
}
.pn-app-bar{
  padding:9px 13px;background:#F7F8FC;border-bottom:1px solid var(--line-2);
  font-size:10.5px;color:var(--ink-3);
}
.pn-app-crumb b{color:var(--ink);font-weight:600}
.pn-app-tabs{display:flex;gap:16px;padding:0 13px;border-bottom:1px solid var(--line-2)}
.pn-app-tab{
  display:block;font-size:11.5px;color:var(--ink-3);padding:10px 0;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.pn-app-tab.on{color:var(--ink);font-weight:600;border-bottom-color:var(--pn)}

.pn-statbar{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line-2);border-bottom:1px solid var(--line-2);
}
.pn-statbar:has(.pn-statcard:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.pn-statcard{background:#fff;padding:11px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.pn-statcard .sl{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.pn-statcard b{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.pn-statcard .sm{font-size:10px;color:var(--ink-3);line-height:1.3}
.pn-statcard.cov b{color:#0E7A5B}

.pn-bd-sechead{
  display:block;padding:14px 14px 0;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--pn-ink);font-weight:600;
}
.pn-bd-card{margin:11px 14px;padding:12px;border:1px solid var(--line-2);border-radius:11px;background:#fff}
.pn-bd-card.made{background:rgba(14,122,91,.045);border-color:rgba(14,122,91,.25)}
.pn-bd-head{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:9px;align-items:start}
.pn-bd-num{
  width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:none;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  color:var(--pn-ink);background:var(--pn-soft);border:1px solid var(--pn-line);
}
.pn-bd-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.pn-bd-title b{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.pn-bd-badge{font-size:10px;padding:2px 7px;border-radius:99px;font-weight:600;letter-spacing:.02em}
.pn-bd-badge.ess{background:rgba(232,178,58,.14);color:#8A6412;border:1px solid rgba(232,178,58,.4)}
.pn-bd-badge.rec{background:var(--paper-3);color:var(--ink-3);border:1px solid var(--line-2)}
.pn-bd-round{font-size:10px;color:var(--ink-3);width:100%}
.pn-bd-meta{font-size:10.5px;color:var(--ink-3);white-space:nowrap;padding-top:4px}
.pn-bd-desc{font-size:11.5px;line-height:1.5;color:var(--ink-2);margin:9px 0 0}
.pn-bd-pins{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.pn-bd-pin{
  font-size:10px;padding:3px 8px;border-radius:99px;
  background:var(--paper-3);border:1px solid var(--line-2);color:var(--ink-3);
}
.pn-bd-pin.done{background:rgba(14,122,91,.09);border-color:rgba(14,122,91,.3);color:#0E7A5B}
.pn-bd-pin.done::before{content:'\2713  '}
.pn-bd-pin i{font-style:normal;margin-left:6px;opacity:.65;font-size:10px}
.pn-bd-actions{margin-top:10px}
.pn-bd-make,.pn-bd-link{display:inline-block;font-size:10.5px;border-radius:8px;padding:5px 11px;font-weight:600}
.pn-bd-make{background:var(--pn-soft);border:1px solid var(--pn-line);color:var(--pn-ink)}
.pn-bd-link{background:rgba(14,122,91,.1);border:1px solid rgba(14,122,91,.3);color:#0E7A5B}
.pn-bd-link::before{content:'\2713  '}

.pn-app-foot{padding:13px 14px 15px;border-top:1px solid var(--line-2);background:#FAFBFE}
.pn-app-foot p{font-size:11.5px;line-height:1.55;color:var(--ink-3);margin:9px 0 0}
.pn-round-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.pn-round-chips span{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;padding:3px 8px;border-radius:6px;
  background:var(--pn-soft);border:1px solid var(--pn-line);color:var(--pn-ink);
}
.pn-round-chips span.off{
  background:var(--paper-3);border:1px dashed var(--line-2);color:var(--ink-3);
}

/* ══════════ 03 · BOARD TITLES ══════════ */
.pn-two .pox-row{display:flex;flex-direction:column}
.pn-two .pn-board{align-self:stretch}
.pn-ranks{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:11px 0 0;
  font-size:12.5px;color:var(--ink-3);
}
.pn-ranks .pn-lab{display:inline;color:var(--ink-3)}
.pn-ranks em{
  font-style:normal;color:var(--pn-ink);background:var(--pn-soft);
  border:1px solid var(--pn-line);border-radius:6px;padding:2px 7px;font-size:11.5px;font-weight:600;
}
.pn-ranks.bad-verdict{color:#C2453F}
.pn-vol{font-size:10.5px;color:var(--ink-3)}

/* ══════════ 04 · DESCRIPTIONS ══════════ */
.pn-desc-mock{
  background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:13px 14px;
}
.pn-desc-empty{
  display:block;margin-top:8px;font-size:12px;color:var(--ink-3);font-style:italic;
  border:1px dashed var(--line);border-radius:8px;padding:10px 11px;
}
.pn-desc-text{display:block;margin-top:8px;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.pn-desc-text b{color:var(--ink);background:var(--pn-soft);padding:0 4px;border-radius:4px;font-weight:600}
.pn-desc-text.stuffed{color:var(--ink-3);word-spacing:.02em}
.pn-desc-picked{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:11px}
.pn-desc-picked .pn-lab{margin-right:2px}

/* ══════════ 05 · THE KEYWORD BANK SCREEN ══════════ */
.pn-kw-toolbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:11px 14px;border-bottom:1px solid var(--line-2);
}
.pn-kw-search{
  flex:1;min-width:110px;font-size:10px;color:var(--ink-3);
  background:var(--paper-3);border:1px solid var(--line-2);border-radius:8px;padding:5px 10px;
}
.pn-kw-search::before{content:'\2315  '}
.pn-kw-chips{display:flex;gap:4px;flex-wrap:wrap}
.pn-kw-chips span{
  font-size:10.5px;padding:4px 9px;border-radius:99px;
  background:#fff;border:1px solid var(--line-2);color:var(--ink-3);
}
.pn-kw-chips span.on{background:var(--pn-soft);border-color:var(--pn-line);color:var(--pn-ink);font-weight:600}
.pn-kw-sort{font-size:10.5px;color:var(--ink-3);border:1px solid var(--line-2);border-radius:8px;padding:5px 9px}

.pn-kw-table{width:100%;border-collapse:collapse;table-layout:fixed}
.pn-kw-table th{
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  text-align:left;font-weight:500;padding:9px 14px;border-bottom:1px solid var(--line-2);
}
.pn-kw-table th:nth-child(2){width:88px}
.pn-kw-table th:nth-child(3){width:76px}
.pn-kw-table th:nth-child(4){width:92px}
.pn-kw-table td{padding:9px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.pn-kw-tierrow td{
  background:#F7F8FC;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:6px 14px;
}
.pn-kw-t{font-size:12px;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.pn-kw-type{font-size:10.5px;color:var(--ink-3)}
.pn-kw-vol{font-size:11px;color:var(--ink);white-space:nowrap}
.pn-kw-vol i{font-style:normal;display:block;font-size:10px;color:var(--ink-3);letter-spacing:.04em}
.pn-kw-cov span{
  display:inline-block;font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  border-radius:6px;padding:3px 7px;background:var(--paper-3);
  border:1px solid var(--line-2);color:var(--ink-3);
}
.pn-kw-cov span.on{background:rgba(14,122,91,.1);border-color:rgba(14,122,91,.3);color:#0E7A5B}
.pn-kw-done .pn-kw-t{color:var(--ink-2)}
.pn-bank-foot,.pn-cov-foot,.pn-plan-foot{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.pn-bank-foot p,.pn-cov-foot p,.pn-plan-foot p{font-size:12.5px;line-height:1.55;color:var(--ink-3);margin:6px 0 0}

/* ══════════ 06 · PIN COPY ══════════ */
.pn-pin-card{
  background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:11px;
  max-width:250px;margin:0 auto;
}
.pn-pin-card .pn-pin{margin-bottom:0}
.pn-pin-ttl{display:block;margin-top:10px;font-size:13px;font-weight:700;color:var(--ink);line-height:1.3}
.pn-pin-desc{display:block;margin-top:6px;font-size:11.5px;line-height:1.5;color:var(--ink-2)}
.pn-pin-desc.empty{color:var(--ink-3);font-style:italic}
.pn-pin-link{display:block;margin-top:9px;font-size:10.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-mapped{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.pn-mapped em{
  font-style:normal;font-size:11.5px;font-weight:600;color:var(--pn-ink);
  background:var(--pn-soft);border:1px solid var(--pn-line);border-radius:6px;padding:2px 8px;
}

/* ══════════ 07 · THE PLAN ══════════ */
.pn-plan{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pn-plan li{
  display:grid;grid-template-columns:18px minmax(0,1fr) 112px 78px;gap:10px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line-2);
}
.pn-plan li:last-child{border-bottom:0}
.pn-plan-mark{
  width:16px;height:16px;border-radius:5px;display:block;position:relative;
}
.pn-plan li.kept .pn-plan-mark{background:#E6F7F0;border:1px solid #C6EBDC}
.pn-plan li.kept .pn-plan-mark::after{
  content:'';position:absolute;left:4px;top:3px;width:5px;height:8px;
  border:2px solid #0E7A5B;border-top:0;border-left:0;transform:rotate(42deg);
}
.pn-plan li.dropped .pn-plan-mark{background:#F2F4F9;border:1px dashed var(--line)}
.pn-plan-t{font-size:12.5px;font-weight:500;color:var(--ink)}
.pn-plan li.dropped .pn-plan-t{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--line)}
.pn-plan-k{font-size:10px;color:var(--ink-3)}
.pn-plan-s{font-size:10px;letter-spacing:.06em;text-transform:uppercase;text-align:right}
.pn-plan li.kept .pn-plan-s{color:#0E7A5B}
.pn-plan li.dropped .pn-plan-s{color:var(--ink-3)}
.pn-plan-why{
  grid-column:2 / -1;font-size:11px;color:var(--ink-3);font-style:italic;margin-top:-2px;
}

/* ══════════ 08 · COVERAGE ══════════ */
.pn-cov-head,.pn-cov-list li{
  display:grid;grid-template-columns:34px minmax(0,1fr) 62px 68px;gap:11px;align-items:center;
}
.pn-cov-head span:nth-child(2){text-align:right}
.pn-cov-head{
  padding-bottom:9px;border-bottom:1px solid var(--line-2);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.pn-cov-head span:first-child{grid-column:1 / 3}
.pn-cov-list{list-style:none;display:flex;flex-direction:column;margin:0;padding:0}
.pn-cov-list li{position:relative;padding:9px 0;border-bottom:1px solid var(--line-2)}
.pn-cov-list li:last-child{border-bottom:0}
.pn-cov-thumb{
  position:relative;width:34px;aspect-ratio:3/4;border-radius:6px;display:grid;place-items:center;
  background:#EFF1F7;border:1px dashed var(--line);overflow:hidden;
}
.pn-cov-list li.done .pn-cov-thumb{border:0}
.pn-cov-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pn-cov-thumb em{font-style:normal;font-size:13px;color:#C9D0E0;font-weight:300}
.pn-cov-kw{font-size:12.5px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis}
.pn-cov-list li.open .pn-cov-kw{color:var(--ink-3)}
.pn-cov-vol{font-size:11px;color:var(--ink);text-align:right;white-space:nowrap}
.pn-cov-list li.open .pn-cov-vol{color:var(--ink-3)}
.pn-cov-state{
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);text-align:right;
}
.pn-cov-list li.done .pn-cov-state{color:#0E7A5B}
.pn-cov-list li.next{background:var(--pn-soft);border-radius:8px;padding-left:6px;padding-right:6px;margin:0 -6px}
.pn-cov-list li.next .pn-cov-thumb{outline:1.5px dashed var(--pn-line);outline-offset:1px}
.pn-cov-flag{
  position:absolute;right:6px;top:-7px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pn-ink);background:#fff;border:1px solid var(--pn-line);border-radius:5px;padding:1px 6px;
}

/* ══════════ THE CLOSING TABLE: EIGHT DECISIONS ══════════ */
.pn-shift{
  max-width:900px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(18px,2.6vw,28px);box-shadow:var(--shadow-sm);
}
.pn-shift-same{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:13px 15px;border-radius:13px;margin-bottom:22px;
  background:linear-gradient(120deg,rgba(124,108,255,.08),rgba(255,92,138,.07));
  border:1px solid var(--pn-line);
}
.pn-shift-same .pn-lab{color:var(--pn-ink);margin-right:3px}
.pn-shift-same b{
  font-size:12.5px;font-weight:600;color:var(--ink);background:#fff;
  border:1px solid var(--pn-line);border-radius:99px;padding:5px 12px;
}
.pn-shift-head,.pn-shift-row{
  display:grid;grid-template-columns:30px minmax(0,1fr) minmax(0,178px) 18px minmax(0,178px);
  gap:12px;align-items:center;
}
.pn-shift-head{padding-bottom:11px;border-bottom:1px solid var(--line-2)}
.pn-shift-head span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.pn-shift-head .h-c{text-align:center}
.pn-shift-row{
  padding:11px 0;border-bottom:1px solid var(--line-2);color:inherit;
  border-radius:10px;transition:background .18s ease;
}
.pn-shift-row:last-of-type{border-bottom:0}
a.pn-shift-row:hover{background:rgba(255,92,138,.055)}
a.pn-shift-row:hover .pn-shift-what{color:var(--pn-ink)}
.pn-shift-row .pn-n{margin-left:4px}
.pn-shift-what{font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.35;transition:color .18s ease}
.pn-shift-b,.pn-shift-a{
  text-align:center;font-size:12px;line-height:1.4;border-radius:9px;padding:7px 10px;
}
.pn-shift-b{color:var(--ink-3);background:#F6F7FB;border:1px dashed var(--line-2)}
.pn-shift-a{color:var(--pn-ink);background:var(--pn-soft);border:1px solid var(--pn-line);font-weight:600}
.pn-shift-arrow{text-align:center;color:var(--pn);font-size:14px;line-height:1}
.pn-shift-note{
  font-size:12.5px;line-height:1.6;color:var(--ink-3);
  margin:18px 0 0;padding-top:15px;border-top:1px dashed var(--line);
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1100px){
  .pn-surf-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .pn-surf .pn-surf-note{margin-top:12px}
}
@media (max-width:1000px){
  .pn-layers{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .pn-layers{grid-template-columns:minmax(0,1fr)}
  .pn-board-grid{columns:2}
}
@media (max-width:900px){
  .pn-demand{grid-template-columns:1fr}
}
@media (max-width:820px){
  .pn-shift-head{display:none}
  .pn-shift-row{grid-template-columns:30px minmax(0,1fr) 16px minmax(0,1fr);gap:9px 10px;padding:13px 0}
  .pn-shift-what{grid-column:2 / -1}
  .pn-shift-b{grid-column:2;text-align:left}
  .pn-shift-arrow{grid-column:3;font-size:12px}
  .pn-shift-a{grid-column:4;text-align:left}
}
@media (max-width:620px){
  .pn-statbar,.pn-statbar:has(.pn-statcard:nth-child(3):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-kw-table th:nth-child(2),.pn-kw-type{display:none}
  .pn-kw-table th,.pn-kw-table td{padding-left:11px;padding-right:11px}
  .pn-g-pack{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pn-g-tile:last-child{display:none}
  .pn-cov-head,.pn-cov-list li{grid-template-columns:28px minmax(0,1fr) 54px;gap:9px}
  .pn-cov-head span:last-child,.pn-cov-state{display:none}
  .pn-cov-vol{font-size:10px}
  .pn-cov-thumb{width:28px}
  .pn-plan li{grid-template-columns:18px minmax(0,1fr) 72px;gap:8px}
  .pn-plan-k{display:none}
}
@media (max-width:520px){
  .pn-shift-same{gap:7px;padding:11px 12px}
  .pn-shift-same b{font-size:11.5px;padding:4px 10px}
  .pn-shift-row{grid-template-columns:26px minmax(0,1fr) 14px minmax(0,1fr);gap:8px}
  .pn-shift-what{font-size:12.5px}
  .pn-shift-b,.pn-shift-a{font-size:10.5px;padding:6px 7px}
  .pn-board-wrap{padding-left:26px}
  .pn-field-tag{position:static;display:inline-block;margin-bottom:6px;font-size:10px;padding:3px 8px}
  .pn-field-tag::after{display:none}
  .pn-board-grid{columns:2;column-gap:7px}
}