/* The LinkedIn post checker page (issue #3, 23 Oct 2026). Loaded after home.css
   and before inner.css, in the inner pages' language: warm grey ground, ink
   buttons, navy for the "written for you" band, Outfit for figures. Colour on
   the results means status only: green good, amber improve, red fix first. */

/* The tool is the page's one task, so it starts above the fold: no side photo
   here (inner.css gives every other inner page one), and a tighter head. */
body.home .pc-head { padding: 44px 0 26px; }
body.home .pc-head .wrap { display: block; }
body.home .pc-head .wrap::after { content: none; display: none; }
.pc-kicker { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: #94570A; }
.pc-head h1 { max-width: none; }
.pc-head .lead { max-width: 54ch; }

/* Every block here sets its own display, which would beat the browser's
   [hidden] rule and show a step before its time. */
.pc-tool [hidden], .pc-rewrite [hidden], .pc-rewrite[hidden] { display: none !important; }

/* ---- the tool ---- */
body.home section.pc-tool { padding: 8px 0 72px; }
.pc-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.pc-editor, .pc-panel { background: #fff; border-radius: 18px; box-shadow: 0 20px 50px -30px rgba(18, 32, 60, .35), 0 0 0 1px rgba(0, 0, 0, .05); }
.pc-left { position: sticky; top: 92px; display: grid; gap: 14px; }
.pc-editor { padding: 22px 22px 18px; }
.pc-next { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-radius: 16px; background: #12203C; color: #fff; text-decoration: none; transition: transform 160ms ease; }
.pc-next[hidden] { display: none; }
.pc-next:hover { transform: translateY(-1px); text-decoration: none; }
.pc-next b { display: block; font-size: 16px; }
.pc-next span { font-size: 14.5px; color: rgba(255, 255, 255, .82); }
.pc-next .pc-nextgo { flex: none; padding: 10px 16px; border-radius: 999px; background: linear-gradient(180deg, #FFD98A, #E8A13F); color: #12203C; font-weight: 700; font-size: 14.5px; }
.pc-edhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pc-edhead label { font-weight: 700; font-size: 16px; }
.pc-sample { border: 0; background: none; padding: 4px 0; font: 600 14.5px var(--font-body); color: #121417; text-decoration: underline; text-decoration-color: #E8A13F; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.pc-editor textarea { display: block; width: 100%; min-height: 330px; resize: vertical; border: 1px solid rgba(18, 20, 23, .14); border-radius: 12px; background: #FAFBFC; padding: 14px 16px; font: 400 16px/1.55 var(--font-body); color: #121417; }
.pc-editor textarea:focus { outline: none; border-color: #121417; background: #fff; box-shadow: 0 0 0 3px rgba(240, 167, 58, .45); }
.pc-edfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.pc-count { font: 500 13.5px 'JetBrains Mono', ui-monospace, monospace; color: #5D636D; font-variant-numeric: tabular-nums; }
.pc-count.over { color: #A4441C; }
.pc-fine { margin: 12px 0 0; font-size: 13.5px; color: #5D636D; }
.pc-btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; padding: 13px 22px; background: #121417; color: #fff; font: 600 15.5px var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 160ms ease, background 160ms ease; }
.pc-btn:hover { background: #000; transform: translateY(-1px); text-decoration: none; }
.pc-btn:disabled { opacity: .55; cursor: default; transform: none; }
.pc-gold { background: linear-gradient(180deg, #FFD98A, #E8A13F); color: #12203C; }
.pc-gold:hover { background: linear-gradient(180deg, #FFE3A6, #F0AC4C); }
.pc-ghost { background: transparent; color: #121417; box-shadow: inset 0 0 0 1.5px #121417; }
.pc-ghost:hover { background: #121417; color: #fff; }

.pc-panel { padding: 24px 24px 22px; min-height: 100%; }
.pc-scorebox { display: flex; align-items: center; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(18, 20, 23, .09); }
.pc-dial { position: relative; flex: none; width: 112px; height: 112px; }
.pc-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pc-dial circle { fill: none; stroke-width: 9; }
.pc-dial .trk { stroke: #EBEEF2; }
.pc-dial .bar { stroke-linecap: round; transition: stroke-dashoffset 700ms cubic-bezier(.2, .7, .2, 1); }
.pc-dial.b-good .bar { stroke: #1F8A4C; }
.pc-dial.b-fix .bar { stroke: #E8A13F; }
.pc-dial.b-miss .bar { stroke: #C2410C; }
.pc-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 12px; font: 700 40px/1 var(--brand); letter-spacing: -.03em; color: #121417; font-variant-numeric: tabular-nums; }
.pc-of { position: absolute; left: 0; right: 0; bottom: 30px; text-align: center; font-size: 12.5px; color: #5D636D; }
.pc-dial.is-empty .pc-num { color: #B4BAC4; }
.pc-verdict { margin: 0; font: 700 22px/1.2 var(--font-body); letter-spacing: -.01em; }
.pc-sub { margin: 6px 0 0; font-size: 15px; color: #5D636D; }

.pc-preview { list-style: none; margin: 6px 0 0; padding: 0; counter-reset: pc; }
.pc-preview li { counter-increment: pc; display: flex; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid rgba(18, 20, 23, .07); font-size: 15px; color: #5D636D; }
.pc-preview li:last-child { border-bottom: 0; }
.pc-preview li::before { content: counter(pc, decimal-leading-zero); font: 500 12.5px 'JetBrains Mono', ui-monospace, monospace; color: #94570A; min-width: 22px; }
.pc-preview b { color: #121417; font-weight: 600; margin-right: 4px; }

.pc-checks { list-style: none; margin: 4px 0 0; padding: 0; }
.pc-checks li { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(18, 20, 23, .07); }
.pc-checks li:last-child { border-bottom: 0; }
.pc-checks b { display: block; font-size: 15.5px; font-weight: 700; }
.pc-checks p { margin: 2px 0 0; font-size: 14.5px; line-height: 1.5; color: #353A42; }
.pc-st { display: inline-flex; align-items: center; gap: 7px; align-self: start; margin-top: 2px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pc-st::before { content: ""; width: 8px; height: 8px; border-radius: 2px; flex: none; }
.s-good .pc-st { color: #17663A; } .s-good .pc-st::before { background: #1F8A4C; }
.s-fix .pc-st { color: #8A5409; } .s-fix .pc-st::before { background: #E8A13F; }
.s-miss .pc-st { color: #A4361A; } .s-miss .pc-st::before { background: #C2410C; }

.pc-fold, .pc-when { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: #F3F5F8; }
.pc-foldlab { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #5D636D; }
.pc-foldtxt { font-size: 14.5px; line-height: 1.5; color: #121417; }
.pc-foldtxt .more { color: #5D636D; margin-left: 4px; }
.pc-when p { margin: 0; font-size: 15px; }
.pc-when .pc-whensub { margin-top: 6px; font-size: 13.5px; color: #5D636D; }
.pc-need { margin: 0; font-size: 15px; color: #353A42; }

/* ---- the rewrite band ---- */
body.home section.pc-rewrite { background: #12203C; color: #fff; padding: 72px 0; }
.pc-rwgrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
body.home .pc-rewrite h2 { color: #fff; }
body.home .pc-rewrite .secsub { color: rgba(255, 255, 255, .82); max-width: 52ch; }
.pc-rwhead .secsub { margin-top: 12px; }
.pc-promise { list-style: none; margin: 18px 0 0; padding: 0; }
.pc-promise li { position: relative; padding: 6px 0 6px 26px; font-size: 15.5px; color: rgba(255, 255, 255, .9); }
.pc-promise li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 11px; height: 6px; border-left: 2px solid #FFD98A; border-bottom: 2px solid #FFD98A; transform: rotate(-45deg); }
.pc-rwhead.done .pc-promise { display: none; }
.pc-rwbox { background: #1B2A4C; border-radius: 18px; padding: 24px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pc-rwform label { display: block; font-weight: 700; font-size: 15.5px; margin-bottom: 8px; }
.pc-rwform label span { font-weight: 400; color: rgba(255, 255, 255, .65); margin-left: 6px; font-size: 14px; }
.pc-rwform input { display: block; width: 100%; border: 0; border-radius: 12px; padding: 13px 14px; font: 400 16px var(--font-body); color: #121417; background: #fff; }
.pc-rwform input:focus { outline: none; box-shadow: 0 0 0 3px rgba(240, 167, 58, .75); }
.pc-rwform .pc-btn { margin-top: 14px; width: 100%; }
.pc-rwmsg { margin: 12px 0 0; min-height: 1px; font-size: 14.5px; color: rgba(255, 255, 255, .8); }
.pc-rwmsg.err { color: #FFD98A; }
.pc-steps { list-style: none; margin: 18px 0 0; padding: 0; }
.pc-steps li { position: relative; padding: 7px 0 7px 26px; font-size: 15px; color: rgba(255, 255, 255, .5); }
.pc-steps li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.pc-steps li.on { color: #fff; }
.pc-steps li.on::before { box-shadow: inset 0 0 0 1.5px #FFD98A; animation: pc-pulse 1.1s ease-in-out infinite; }
.pc-steps li.done { color: rgba(255, 255, 255, .8); }
.pc-steps li.done::before { background: #FFD98A; box-shadow: none; }
@keyframes pc-pulse { 50% { background: rgba(255, 217, 138, .5); } }

.pc-result { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "post delta" "post changes" "post mail" "post ."; grid-template-rows: auto auto auto 1fr; gap: 16px 28px; align-items: start; margin-top: 32px; scroll-margin-top: 96px; }
.pc-li { grid-area: post; } .pc-delta { grid-area: delta; } .pc-changes { grid-area: changes; } .pc-mail { grid-area: mail; }
.pc-li { background: #fff; color: #121417; border-radius: 16px; padding: 18px 20px 16px; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .6); }
.pc-lihead { display: flex; align-items: center; gap: 12px; }
.pc-liava { flex: none; width: 46px; height: 46px; border-radius: 8px; background: #12203C; color: #FFD98A; display: flex; align-items: center; justify-content: center; font: 700 20px var(--brand); }
.pc-lihead b { display: block; font-size: 15.5px; }
.pc-lihead small { display: block; font-size: 13px; color: #5D636D; }
.pc-libody { margin-top: 14px; font-size: 15.5px; line-height: 1.6; }
.pc-litags { margin: 12px 0 0; font-size: 15px; color: #0A66C2; font-weight: 600; }
.pc-liacts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(18, 20, 23, .09); }
.pc-copied { font-size: 14px; color: #17663A; font-weight: 600; }

.pc-delta { display: flex; min-width: 0; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 16px; background: #1B2A4C; }
.pc-delta div { display: flex; flex-direction: column; }
.pc-delta span { font-size: 13.5px; color: rgba(255, 255, 255, .7); }
.pc-delta b { font: 700 40px/1.05 var(--brand); letter-spacing: -.03em; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
.pc-delta .after b { color: #FFD98A; }
.pc-delta .arrow { flex: 1; height: 1px; background: rgba(255, 255, 255, .3); position: relative; min-width: 30px; }
.pc-delta .arrow::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1px solid rgba(255, 255, 255, .5); border-right: 1px solid rgba(255, 255, 255, .5); transform: rotate(45deg); }
.pc-changes { padding: 18px 20px; border-radius: 16px; background: #1B2A4C; }
.pc-changes h3 { margin: 0 0 8px; font-size: 16px; color: #fff; }
.pc-changes ul { margin: 0; padding-left: 18px; }
.pc-changes li { margin: 6px 0; font-size: 15px; color: rgba(255, 255, 255, .88); }
.pc-check { margin: 12px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .65); }
.pc-mail { padding: 18px 20px; border-radius: 16px; background: #1B2A4C; }
.pc-mail label { display: block; font-weight: 700; font-size: 15.5px; margin-bottom: 8px; }
.pc-mailrow { display: flex; gap: 8px; }
.pc-mailrow input { flex: 1; min-width: 0; border: 0; border-radius: 999px; padding: 12px 16px; font: 400 16px var(--font-body); }
.pc-mailrow input:focus { outline: none; box-shadow: 0 0 0 3px rgba(240, 167, 58, .75); }
.pc-mail .pc-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8); }
.pc-mail .pc-ghost:hover { background: #fff; color: #12203C; }
.pc-mailmsg { margin: 10px 0 0; min-height: 1px; font-size: 14px; color: rgba(255, 255, 255, .75); }
.pc-mailmsg.ok { color: #9BE0B5; }
.pc-mailmsg.err { color: #FFD98A; }

.pc-offer { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 18px 40px; align-items: center; margin-top: 40px; padding: 30px 32px; border-radius: 20px; background: #fff; color: #121417; }
body.home .pc-offer h2 { color: #121417; font-size: clamp(24px, 2.4vw, 30px); }
.pc-offer p { margin: 14px 0 0; font-size: 16.5px; color: #353A42; max-width: 56ch; }
.pc-offer-go { text-align: left; }
.pc-offer-go p { margin-top: 10px; font-size: 14px; color: #5D636D; }

/* ---- the guide ---- */
.pc-guide { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.pc-guide li { display: flex; gap: 18px; padding: 22px 0; border-top: 1px solid rgba(18, 20, 23, .09); }
.pc-guide .n { flex: none; font: 500 14px 'JetBrains Mono', ui-monospace, monospace; color: #94570A; padding-top: 4px; }
.pc-guide h3 { margin: 0; font-size: 19px; }
.pc-guide p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.6; color: #353A42; }
.pc-guidefoot { margin: 24px 0 0; font-size: 16px; color: #353A42; }

@media (max-width: 960px) {
  .pc-grid, .pc-rwgrid { grid-template-columns: 1fr; }
  .pc-result { grid-template-columns: 1fr; grid-template-areas: "delta" "post" "changes" "mail"; grid-template-rows: none; }
  .pc-left { position: static; }
  .pc-next { display: none; }
  .pc-guide { grid-template-columns: 1fr; }
  .pc-offer { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body.home section.pc-tool { padding-bottom: 48px; }
  .pc-editor, .pc-panel { padding: 18px 16px; border-radius: 16px; }
  .pc-editor textarea { min-height: 200px; }
  .pc-edfoot .pc-btn { flex: 1; }
  .pc-dial { width: 92px; height: 92px; }
  .pc-num { font-size: 32px; padding-bottom: 10px; }
  .pc-of { bottom: 22px; font-size: 11.5px; }
  .pc-verdict { font-size: 19px; }
  .pc-checks li { grid-template-columns: 1fr; gap: 4px; }
  body.home section.pc-rewrite { padding: 52px 0; }
  .pc-rwbox, .pc-changes, .pc-mail, .pc-delta { padding: 16px; }
  .pc-li { padding: 16px; }
  .pc-mailrow { flex-direction: column; }
  .pc-offer { padding: 22px 18px; margin-top: 28px; }
  .pc-offer .pc-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-dial .bar { transition: none; }
  .pc-steps li.on::before { animation: none; background: rgba(255, 217, 138, .5); }
}