/* ==========================================================================
   Pineable Tools — shared UI
   Tokens mirror theme_website/assets/css/style.css (:root) and
   DESIGN-SYSTEM.md "Tool Page Visual Language v2".
   Every class is prefixed pn- so it never collides with Bootstrap on the live site.
   Fonts: Stack Sans Headline (display, weight 400) + Parkinsans (everything else). Nothing else.
   ========================================================================== */
:root{
  --pn-black:#000; --pn-white:#fff; --pn-yellow:#f5f439; --pn-yellow-pale:#fffde0;
  --pn-cream:#fefef6; --pn-linen:#f3f3e7; --pn-mint:#cff0ed; --pn-stone:#dbdbc7;
  --pn-teal:#31413f; --pn-charcoal:#3f3f3f; --pn-gray:#595959; --pn-border:#e2e2e2;
  --pn-page:#fbfaf2; --pn-muted:#667085; --pn-line:rgba(15,23,42,.12); --pn-line-soft:rgba(15,23,42,.08);
  --pn-red:#d92d20; --pn-red-pale:#fde3e1; --pn-red-ink:#a2231a;

  --pn-font-display:'Stack Sans Headline', Arial, sans-serif;
  --pn-font-body:'Parkinsans', Arial, sans-serif;
  --pn-h1:clamp(2.25rem,5vw,4.375rem); --pn-h2:clamp(1.6rem,3vw,2.5rem); --pn-h4:clamp(1rem,1.5vw,1.4375rem);
  --pn-body:.9375rem; --pn-sm:.8125rem; --pn-xs:.75rem;

  --pn-r-input:12px; --pn-r-card:22px; --pn-r-pill:999px;
  --pn-shadow-card:0 4px 20px rgba(0,0,0,.07);
  --pn-shadow-tool:0 1px 2px rgba(15,23,42,.04), 0 12px 32px rgba(15,23,42,.06);
  --pn-ease:.3s ease; --pn-ease-fast:.15s ease;

  /* Functional marker tints: each encodes one kind of thing in the user's own content */
  --pn-mk-1:#f5f439; --pn-mk-2:#bfeae5; --pn-mk-3:#e4dbff; --pn-mk-4:#ffdcc4;
}

/* ---------- Base: scoped to <main class="pn-body"> inside website.layouts.master ----------
   ".pn-body :where(x)" has single-class specificity: it beats the theme's and Bootstrap's
   element rules (h1{font-size}, p{margin;color}, kbd{background}…) but still loses to any
   pn- class rule further down, so components render exactly as in the prototypes. */
.pn-body{background:var(--pn-page);color:var(--pn-charcoal);font-family:var(--pn-font-body);font-size:var(--pn-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;padding-bottom:5rem}
.pn-body :where(*){box-sizing:border-box}
.pn-body :where(h1,h2,h3,h4,h5,h6){font-family:var(--pn-font-display);color:var(--pn-black);line-height:1.15;letter-spacing:-.02em;font-weight:400;margin:0;font-size:revert}
.pn-body :where(p){margin:0}
.pn-body :where(p,li,label,small,td,th){color:inherit}
.pn-body :where(a){color:var(--pn-black);text-decoration:none}
.pn-body :where(button,select,input,textarea){font:inherit;color:inherit}
.pn-body :where(code,kbd,hr,blockquote){all:revert}
.pn-body ::selection{background:var(--pn-yellow);color:var(--pn-black)}
.pn-body :focus-visible{outline:2px solid var(--pn-black);outline-offset:3px}
/* Text fields, selects and editable text draw their own ring (or their wrapper's :focus-within ring),
   so the generic outline would stack a second rounded box inside the first. */
.pn-body :is(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]),select,textarea,[contenteditable]):focus-visible{outline:none}
.pn-body :where(img){max-width:100%;display:block}

/* ---------- Layout + type helpers ---------- */
.pn-wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.pn-eyebrow{display:inline-block;font-size:var(--pn-sm);font-weight:500;color:var(--pn-muted);margin-bottom:.75rem}
.pn-muted{color:var(--pn-muted)}
.pn-display{font-family:var(--pn-font-display);font-weight:400;color:var(--pn-black);letter-spacing:-.02em}
.pn-body [hidden]{display:none!important}
.pn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Buttons ---------- */
.pn-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border-radius:var(--pn-r-pill);padding:.65rem 1.2rem;font-weight:600;font-size:.875rem;line-height:1.2;border:1px solid transparent;cursor:pointer;transition:background var(--pn-ease-fast),border-color var(--pn-ease-fast),opacity var(--pn-ease-fast);white-space:nowrap;text-decoration:none}
.pn-btn svg{width:16px;height:16px;flex:none}
.pn-btn--black{background:var(--pn-black);color:var(--pn-white)!important}
.pn-btn--black:hover{background:#262626}
.pn-btn--yellow{background:var(--pn-yellow);color:var(--pn-black)}
.pn-btn--yellow:hover{background:#e9e82c}
.pn-btn--line{background:var(--pn-white);border-color:var(--pn-line);color:var(--pn-black)}
.pn-btn--line:hover{border-color:var(--pn-black)}
.pn-btn--text{background:none;padding:.4rem .2rem;color:var(--pn-gray);font-weight:500}
.pn-btn--text:hover{color:var(--pn-black)}
.pn-btn--sm{padding:.42rem .9rem;font-size:.8125rem}
.pn-btn--lg{padding:.85rem 1.5rem;font-size:.95rem}
.pn-btn:disabled,.pn-btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed}

/* ---------- Hero: centered, compact, tool above the fold ---------- */
.pn-hero{padding:2.5rem 0 0;text-align:center}
.pn-crumbs{display:flex;justify-content:center;flex-wrap:wrap;gap:.45rem;font-size:var(--pn-sm);color:var(--pn-muted);margin-bottom:1.4rem}
.pn-crumbs a{color:var(--pn-muted)}.pn-crumbs a:hover{color:var(--pn-black)}
.pn-crumbs [aria-current]{color:var(--pn-black)}
.pn-kicker{display:inline-flex;align-items:center;gap:.5rem;background:var(--pn-white);border:1px solid var(--pn-line);border-radius:var(--pn-r-pill);padding:.28rem .85rem .28rem .3rem;font-size:var(--pn-sm);font-weight:500;color:var(--pn-black)}
.pn-kicker i{width:22px;height:22px;border-radius:50%;background:var(--pn-yellow);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.66rem}
.pn-kicker i svg{width:12px;height:12px}
.pn-hero h1{font-size:var(--pn-h1);letter-spacing:-.03em;line-height:1.05;margin:1rem auto 0}
.pn-hl{background:linear-gradient(var(--pn-yellow),var(--pn-yellow)) no-repeat 0 82%/100% 38%;padding:0 .04em}
.pn-lede{font-size:1.0625rem;color:var(--pn-charcoal);max-width:54ch;margin:.9rem auto 0}

/* ---------- Tool shell ---------- */
.pn-tool{margin:2rem auto 0;max-width:1080px;text-align:left;background:var(--pn-white);border:1px solid var(--pn-line);border-radius:var(--pn-r-card);box-shadow:var(--pn-shadow-tool)}
.pn-tool--wide{max-width:1180px}
.pn-tool__input{padding:1.5rem 1.75rem 1.25rem}
.pn-tool__head{display:flex;justify-content:space-between;align-items:center;gap:.8rem 1rem;flex-wrap:wrap;margin-bottom:.75rem}
.pn-tool__head > label,.pn-tool__head > .pn-label{font-size:var(--pn-sm);font-weight:600;color:var(--pn-black)}
.pn-tool__foot{display:flex;align-items:center;gap:1rem;margin-top:.8rem;flex-wrap:wrap}
.pn-tool__actions{display:flex;gap:.4rem;flex-wrap:wrap;margin-left:auto}
.pn-tool__results{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);border-top:1px solid var(--pn-line-soft)}
.pn-tool__results > *{padding:1.6rem 1.75rem;min-width:0}
.pn-tool__results > * + *{border-left:1px solid var(--pn-line-soft)}
.pn-tool__split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.pn-tool__split > *{padding:1.6rem 1.75rem;min-width:0}
.pn-tool__split > * + *{border-left:1px solid var(--pn-line-soft)}
.pn-tool__pane-title{font-size:1.3rem;margin-bottom:.3rem}
.pn-tool__pane-intro{font-size:.875rem;color:var(--pn-muted);margin-bottom:1rem}
@media (max-width:900px){
  .pn-tool__results,.pn-tool__split{grid-template-columns:1fr}
  .pn-tool__results > * + *,.pn-tool__split > * + *{border-left:0;border-top:1px solid var(--pn-line-soft)}
}
@media (max-width:600px){
  .pn-tool__input,.pn-tool__results > *,.pn-tool__split > *{padding:1.15rem}
  .pn-tool__actions{margin-left:0;width:100%}
}

/* ---------- Form controls ---------- */
.pn-label{display:block;font-size:var(--pn-sm);font-weight:600;color:var(--pn-black);margin-bottom:.4rem}
.pn-help{font-size:var(--pn-xs);color:var(--pn-muted);margin-top:.4rem}
.pn-field + .pn-field{margin-top:1rem}
.pn-input,.pn-textarea{width:100%;border:1.5px solid var(--pn-line);border-radius:var(--pn-r-input);background:var(--pn-white);padding:.7rem .9rem;font-size:.9375rem;color:var(--pn-black);transition:border-color var(--pn-ease-fast),box-shadow var(--pn-ease-fast)}
.pn-input::placeholder,.pn-textarea::placeholder{color:#9aa1ad}
.pn-input:focus,.pn-textarea:focus{outline:0;border-color:var(--pn-black);box-shadow:0 0 0 4px var(--pn-yellow-pale)}
.pn-input--lg{font-family:var(--pn-font-display);font-size:clamp(1.1rem,2vw,1.4rem);padding:.95rem 1.1rem;border-radius:16px;letter-spacing:-.01em}
.pn-textarea{resize:vertical;line-height:1.55;min-height:140px}
.pn-select{appearance:none;border:1px solid var(--pn-line);border-radius:var(--pn-r-pill);padding:.38rem 1.9rem .38rem .85rem;background:var(--pn-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E") no-repeat right .7rem center;font-size:var(--pn-sm);font-weight:500;color:var(--pn-black);cursor:pointer;max-width:100%}
.pn-select:hover{border-color:var(--pn-black)}
.pn-select:focus{outline:0;border-color:var(--pn-black);box-shadow:0 0 0 4px var(--pn-yellow-pale)}
.pn-select--block{width:100%;border-radius:var(--pn-r-input);padding:.6rem 2rem .6rem .85rem}
.pn-ctx{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.pn-ctx label{font-size:var(--pn-sm);color:var(--pn-muted);font-weight:500}
@media (max-width:600px){.pn-ctx{display:grid;grid-template-columns:1fr 1fr;width:100%}.pn-ctx label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.pn-ctx .pn-select{width:100%}}

/* Inline URL bar: input + primary action in one pill */
.pn-urlbar{display:flex;align-items:center;gap:.5rem;border:1.5px solid var(--pn-line);border-radius:var(--pn-r-pill);background:var(--pn-white);padding:.35rem .35rem .35rem 1.1rem;transition:border-color var(--pn-ease-fast),box-shadow var(--pn-ease-fast)}
.pn-urlbar:focus-within{border-color:var(--pn-black);box-shadow:0 0 0 4px var(--pn-yellow-pale)}
.pn-urlbar svg{width:18px;height:18px;flex:none;color:var(--pn-muted)}
.pn-urlbar input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:1rem;color:var(--pn-black);padding:.55rem 0}
.pn-urlbar input::placeholder{color:#9aa1ad}
@media (max-width:520px){.pn-urlbar{flex-wrap:wrap;border-radius:18px;padding:.5rem}.pn-urlbar input{flex-basis:calc(100% - 30px)}.pn-urlbar .pn-btn{width:100%}}

/* Segmented control */
.pn-seg{display:inline-flex;background:var(--pn-linen);border-radius:var(--pn-r-pill);padding:3px;gap:2px;flex-wrap:wrap}
.pn-seg button{border:0;background:transparent;border-radius:var(--pn-r-pill);padding:.38rem .85rem;font-size:var(--pn-sm);font-weight:500;color:var(--pn-gray);cursor:pointer;transition:background var(--pn-ease-fast),color var(--pn-ease-fast)}
.pn-seg button:hover{color:var(--pn-black)}
.pn-seg button[aria-pressed="true"]{background:var(--pn-white);color:var(--pn-black);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* Chips */
.pn-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.pn-chip{border:1px solid var(--pn-line);background:var(--pn-white);border-radius:var(--pn-r-pill);padding:.35rem .8rem;font-size:var(--pn-sm);font-weight:500;color:var(--pn-black);cursor:pointer;transition:border-color var(--pn-ease-fast),background var(--pn-ease-fast)}
.pn-chip:hover{border-color:var(--pn-black)}
.pn-chip[aria-pressed="true"]{background:var(--pn-black);border-color:var(--pn-black);color:var(--pn-white)}

/* Range */
.pn-range{display:grid;grid-template-columns:1fr auto;gap:.2rem .6rem;align-items:center}
.pn-range label{font-size:var(--pn-sm);font-weight:500;color:var(--pn-black)}
.pn-range output{font-size:var(--pn-xs);color:var(--pn-muted)}
.pn-range input{grid-column:1/-1;width:100%;accent-color:var(--pn-black)}

/* Switch */
.pn-switch{display:inline-flex;align-items:center;gap:.55rem;font-size:var(--pn-sm);font-weight:500;color:var(--pn-black);cursor:pointer;user-select:none}
.pn-switch input{appearance:none;width:34px;height:20px;border-radius:20px;background:var(--pn-stone);position:relative;cursor:pointer;transition:background var(--pn-ease-fast);margin:0;flex:none}
.pn-switch input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--pn-white);transition:transform var(--pn-ease-fast);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.pn-switch input:checked{background:var(--pn-black)}
.pn-switch input:checked::after{transform:translateX(14px)}

/* Colour input */
.pn-color{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--pn-line);border-radius:var(--pn-r-pill);padding:.25rem .7rem .25rem .25rem;background:var(--pn-white);font-size:var(--pn-sm);font-weight:500}
.pn-color input[type=color]{appearance:none;width:26px;height:26px;border:0;padding:0;border-radius:50%;background:none;cursor:pointer}
.pn-color input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.pn-color input[type=color]::-webkit-color-swatch{border:1px solid rgba(0,0,0,.12);border-radius:50%}

/* Drop zone */
.pn-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.5rem;border:1.5px dashed var(--pn-line);border-radius:18px;background:var(--pn-cream);padding:2.2rem 1.2rem;cursor:pointer;transition:border-color var(--pn-ease-fast),background var(--pn-ease-fast)}
.pn-drop:hover,.pn-drop.is-over{border-color:var(--pn-black);background:var(--pn-yellow-pale)}
.pn-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pn-drop__icon{width:46px;height:46px;border-radius:50%;background:var(--pn-yellow);display:grid;place-items:center}
.pn-drop__icon svg{width:20px;height:20px}
.pn-drop strong{font-weight:600;color:var(--pn-black);font-size:1rem}
.pn-drop span{font-size:var(--pn-sm);color:var(--pn-muted)}

/* Character / progress meter */
.pn-meter{display:flex;align-items:center;gap:.65rem;flex:1;min-width:220px}
.pn-meter__track{position:relative;flex:1;max-width:220px;height:6px;border-radius:6px;background:var(--pn-linen);overflow:hidden}
.pn-meter__zone{position:absolute;top:0;bottom:0;background:var(--pn-mint)}
.pn-meter__fill{position:absolute;top:0;bottom:0;left:0;width:0;background:var(--pn-black);border-radius:6px;transition:width .2s ease}
.pn-meter__fill.is-over{background:var(--pn-red)}
.pn-meter__text{font-size:var(--pn-xs);color:var(--pn-muted)}
.pn-meter__text b{color:var(--pn-black);font-weight:600}

/* ---------- Score ---------- */
.pn-score-top{display:flex;align-items:center;gap:1.25rem}
.pn-ring{position:relative;width:112px;height:112px;flex:none}
.pn-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.pn-ring circle{fill:none;stroke-width:9}
.pn-ring .pn-ring__trk{stroke:var(--pn-linen)}
.pn-ring .pn-ring__val{stroke:var(--pn-black);stroke-linecap:round;transition:stroke-dashoffset .6s ease}
.pn-ring__num{position:absolute;inset:0;display:grid;place-items:center;text-align:center;line-height:1}
.pn-ring__num strong{display:block;font-family:var(--pn-font-display);font-weight:400;font-size:2.4rem;color:var(--pn-black);letter-spacing:-.03em}
.pn-ring__num span{font-size:.6875rem;color:var(--pn-muted)}
@media (max-width:600px){.pn-ring{width:92px;height:92px}.pn-ring__num strong{font-size:2rem}}
.pn-grade{display:inline-block;background:var(--pn-yellow);color:var(--pn-black);font-weight:600;font-size:var(--pn-xs);border-radius:var(--pn-r-pill);padding:.2rem .65rem}
.pn-grade.is-low{background:var(--pn-red-pale)}
.pn-grade.is-idle{background:var(--pn-linen)}
.pn-grade.is-ok{background:var(--pn-mint)}
.pn-summary{margin-top:.5rem;font-size:.875rem;color:var(--pn-charcoal)}
.pn-breakdown{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.pn-breakdown li{display:grid;grid-template-columns:88px 1fr 44px;align-items:center;gap:.75rem;font-size:var(--pn-sm)}
.pn-bar{display:block;height:6px;border-radius:6px;background:var(--pn-linen);overflow:hidden}
.pn-bar > span{display:block;height:100%;width:0;background:var(--pn-black);border-radius:6px;transition:width .5s ease}
.pn-breakdown b{font-weight:600;color:var(--pn-black);text-align:right;font-size:var(--pn-xs)}
.pn-breakdown b small{color:var(--pn-muted);font-weight:400}
.pn-score-key{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--pn-line-soft);font-size:var(--pn-xs);color:var(--pn-muted)}

/* ---------- Checklist: "what to fix" / spec checks ---------- */
.pn-check-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.pn-check-head h3{font-size:1.3rem}
.pn-check-head span{font-size:var(--pn-sm);color:var(--pn-muted)}
.pn-check-intro{font-size:.875rem;color:var(--pn-muted);margin:.3rem 0 1rem}
.pn-checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pn-check{display:grid;grid-template-columns:14px 1fr auto;gap:.85rem;padding:.85rem 0;border-top:1px solid rgba(15,23,42,.07)}
.pn-check:first-child{border-top:0;padding-top:.2rem}
.pn-check__sw{width:14px;height:14px;border-radius:4px;background:var(--c,var(--pn-linen));margin-top:.28rem}
.pn-check__sw.is-ring{background:none;border:2px solid var(--pn-red);border-radius:50%}
.pn-check__sw.is-neutral{background:var(--pn-linen);border:1px solid var(--pn-stone)}
.pn-check__title{font-weight:600;color:var(--pn-black);font-size:.9375rem;line-height:1.4}
.pn-check__body{font-size:.84rem;color:var(--pn-charcoal);margin-top:.2rem;line-height:1.5}
.pn-check__eg{display:inline-block;margin-top:.45rem;font-size:var(--pn-xs);color:var(--pn-black);background:var(--pn-linen);border-radius:var(--pn-r-pill);padding:.2rem .65rem}
.pn-check > .pn-btn{align-self:start;height:auto}
.pn-status{font-size:var(--pn-xs);font-weight:600;border-radius:var(--pn-r-pill);padding:.15rem .6rem;height:max-content;margin-top:.15rem;white-space:nowrap}
.pn-status--bad{background:var(--pn-red-pale);color:var(--pn-red-ink)}
.pn-status--warn{background:var(--pn-yellow-pale);color:#6b5d00;box-shadow:inset 0 0 0 1px #ece79a}
.pn-status--ok{background:var(--pn-mint);color:var(--pn-black)}
.pn-check.is-done{padding:.6rem 0}
.pn-check.is-done .pn-check__title{font-weight:500;font-size:.875rem}
.pn-check.is-done .pn-check__body{color:var(--pn-muted);font-size:.8125rem;margin-top:0}
.pn-checklist--2{display:grid;grid-template-columns:1fr 1fr;column-gap:2rem}
.pn-checklist--2 .pn-check:nth-child(2){border-top:0;padding-top:.2rem}
@media (max-width:800px){.pn-checklist--2{grid-template-columns:1fr}.pn-checklist--2 .pn-check:nth-child(2){border-top:1px solid rgba(15,23,42,.07);padding-top:.85rem}}
.pn-empty{font-size:.875rem;color:var(--pn-muted);padding:.4rem 0}

/* ---------- Trust line ---------- */
.pn-trust{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:1.1rem;font-size:var(--pn-sm);color:var(--pn-muted)}
.pn-trust span{display:inline-flex;align-items:center;gap:.4rem}
.pn-trust svg{width:14px;height:14px;stroke:var(--pn-black);fill:none;stroke-width:2.2}

/* ---------- Sections ---------- */
.pn-section{padding:5.5rem 0 0}
.pn-sec-head{text-align:center;max-width:660px;margin:0 auto 2.5rem}
.pn-sec-head h2{font-size:var(--pn-h2)}
.pn-sec-head p{margin-top:.8rem;color:var(--pn-charcoal)}
.pn-stage{background:var(--pn-linen);border-radius:var(--pn-r-card);padding:clamp(1rem,3vw,2rem)}
.pn-stage-note{text-align:center;font-size:var(--pn-sm);color:var(--pn-muted);margin-top:1rem}
.pn-card{background:var(--pn-white);border:1px solid var(--pn-line);border-radius:var(--pn-r-card);padding:1.35rem}
.pn-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.pn-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media (max-width:900px){.pn-grid-3,.pn-grid-2{grid-template-columns:1fr}}

/* Steps (only for real sequences) */
.pn-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;counter-reset:pn-step}
.pn-step{background:var(--pn-white);border:1px solid var(--pn-line);border-radius:var(--pn-r-card);padding:1.5rem;counter-increment:pn-step}
.pn-step::before{content:counter(pn-step);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--pn-yellow);color:var(--pn-black);font-family:var(--pn-font-display);margin-bottom:1.2rem}
.pn-step h3{font-size:1.2rem}
.pn-step p{font-size:.875rem;margin-top:.4rem}
@media (max-width:900px){.pn-steps{grid-template-columns:1fr}}

/* Result cards (rewrites, exports, variants) */
.pn-result{background:var(--pn-white);border:1px solid var(--pn-line);border-radius:var(--pn-r-card);padding:1.35rem;display:flex;flex-direction:column;gap:.75rem}
.pn-result__top{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.pn-result__kind{font-size:var(--pn-sm);font-weight:600;color:var(--pn-black)}
.pn-badge{font-size:var(--pn-xs);font-weight:600;background:var(--pn-yellow);border-radius:var(--pn-r-pill);padding:.15rem .55rem;color:var(--pn-black);white-space:nowrap}
.pn-badge--mint{background:var(--pn-mint)}
.pn-badge--linen{background:var(--pn-linen);color:var(--pn-gray)}
.pn-result__text{font-family:var(--pn-font-display);font-size:1.125rem;line-height:1.4;color:var(--pn-black);flex:1}
.pn-result__actions{display:flex;gap:.4rem;flex-wrap:wrap}

/* Ink band: before/after */
.pn-ink{background:var(--pn-black);border-radius:30px;padding:clamp(1.5rem,5vw,3.75rem);color:#d0d0d0}
.pn-ink .pn-sec-head h2{color:var(--pn-white)}
.pn-ink .pn-sec-head p{color:#a3a3a3}
.pn-ink .pn-eyebrow{color:#8a8a8a}
.pn-ba{display:grid;grid-template-columns:1fr auto 1fr;gap:1.25rem;align-items:center;padding:1.3rem 0;border-top:1px solid rgba(255,255,255,.12)}
.pn-ba__side{display:flex;align-items:center;gap:1rem;min-width:0}
.pn-ba__n{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:var(--pn-font-display);font-size:1.2rem;color:var(--pn-white);border:1px solid rgba(255,255,255,.28)}
.pn-ba__after .pn-ba__n{background:var(--pn-yellow);border-color:var(--pn-yellow);color:var(--pn-black)}
.pn-ba__before p{color:#8f8f8f;text-decoration:line-through;text-decoration-color:rgba(217,45,32,.7)}
.pn-ba__after p{color:var(--pn-white);font-family:var(--pn-font-display);font-size:1.05rem;line-height:1.45}
.pn-ba__arrow{color:var(--pn-yellow);font-size:1.3rem}
.pn-ba__why{grid-column:1/-1;font-size:var(--pn-sm);color:#8f8f8f}
@media (max-width:800px){.pn-ba{grid-template-columns:1fr}.pn-ba__arrow{transform:rotate(90deg);justify-self:start;margin-left:16px}}

/* Guide */
.pn-guide{max-width:720px;margin:0 auto}
.pn-guide h3{font-size:var(--pn-h4);margin:2.2rem 0 .6rem}
.pn-guide h3:first-child{margin-top:0}
.pn-guide p{margin-bottom:1rem}
.pn-guide ul{margin:0 0 1rem;padding-left:1.2rem}
.pn-guide li{margin-bottom:.35rem}
.pn-formula{background:var(--pn-white);border:1px solid var(--pn-line);border-radius:var(--pn-r-input);padding:.9rem 1.1rem;font-family:var(--pn-font-display);font-size:1.05rem;color:var(--pn-black)}

/* Spec table */
.pn-table-wrap{overflow-x:auto;border:1px solid var(--pn-line);border-radius:16px;background:var(--pn-white)}
.pn-table{width:100%;border-collapse:collapse;font-size:var(--pn-sm)}
.pn-table th{text-align:left;font-weight:600;color:var(--pn-black);background:var(--pn-cream);padding:.75rem 1rem;border-bottom:1px solid var(--pn-line-soft);white-space:nowrap}
.pn-table td{padding:.7rem 1rem;border-bottom:1px solid var(--pn-line-soft);vertical-align:top}
.pn-table tr:last-child td{border-bottom:0}

/* FAQ — matches tools.partials.faq-styles */
.pn-faq{max-width:860px;margin:0 auto;background:#f7f7f7;border-radius:20px;padding:.75rem;display:flex;flex-direction:column;gap:1rem}
.pn-faq details{background:var(--pn-white);border-radius:16px;overflow:hidden}
.pn-faq summary{list-style:none;cursor:pointer;min-height:72px;padding:1.25rem 1rem 1.25rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;font-weight:600;color:var(--pn-black);font-size:1rem}
.pn-faq summary::-webkit-details-marker{display:none}
.pn-faq summary i{flex:none;width:36px;height:36px;border-radius:50%;background:#f7f7f7;display:grid;place-items:center;transition:transform var(--pn-ease),background var(--pn-ease)}
.pn-faq details[open] summary i{transform:rotate(180deg);background:var(--pn-yellow)}
.pn-faq .pn-faq__a{padding:0 1.25rem 1.3rem;max-width:68ch}

/* ---------- Tool cards (hub + related) ---------- */
.pn-tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.pn-tcard{position:relative;background:var(--pn-white);border:1px solid var(--pn-line);border-radius:var(--pn-r-card);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--pn-ease),box-shadow var(--pn-ease);color:inherit}
a.pn-tcard:hover{transform:translateY(-3px);box-shadow:var(--pn-shadow-card)}
.pn-tcard__art{height:150px;overflow:hidden;background:var(--pn-cream);border-bottom:1px solid rgba(15,23,42,.06);display:grid;place-items:center;padding:1rem}
.pn-tcard__body{padding:1.1rem 1.3rem 1.3rem;flex:1;display:flex;flex-direction:column}
.pn-tcard__body h3{font-size:1.2rem}
.pn-tcard__body p{font-size:.875rem;margin-top:.35rem}
.pn-tcard__go{margin-top:auto;padding-top:.9rem;font-size:var(--pn-sm);font-weight:600;color:var(--pn-black);display:inline-flex;align-items:center;gap:.35rem}
.pn-tcard__go svg{width:14px;height:14px;transition:transform var(--pn-ease-fast)}
a.pn-tcard:hover .pn-tcard__go svg{transform:translateX(3px)}
.pn-tcard.is-soon{background:transparent;border-style:dashed;box-shadow:none}
.pn-tcard.is-soon .pn-tcard__art{background:transparent;opacity:.55}
.pn-tcard.is-soon h3{color:var(--pn-gray)}
.pn-tag{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--pn-xs);font-weight:500;color:var(--pn-muted);margin-bottom:.45rem}
.pn-tag i{width:7px;height:7px;border-radius:50%;background:var(--c)}
@media (max-width:980px){.pn-tools-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.pn-tools-grid{grid-template-columns:1fr}}

/* Card art primitives */
.pn-art-thumb{height:100%;max-width:100%;aspect-ratio:16/9;border-radius:10px;background:linear-gradient(135deg,#2a1380,#7c3aed);display:grid;place-items:center;color:#fff;font-family:var(--pn-font-display);font-size:1.5rem;letter-spacing:-.02em;position:relative;overflow:hidden}
.pn-art-thumb::before{content:"";position:absolute;right:-12%;bottom:-30%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(rgba(255,255,255,.35),rgba(255,255,255,0) 70%)}
.pn-art-sticker{position:relative;display:inline-block;font-family:var(--pn-font-body);font-size:.6rem;font-weight:700;background:#ff3d81;color:#fff;border-radius:4px;padding:.15rem .45rem;transform:rotate(-4deg);margin-top:.3rem}
.pn-art-paper{background:var(--pn-white);border:1px solid var(--pn-line);border-radius:12px;padding:.8rem 1rem;line-height:1.5;color:var(--pn-black);width:86%;font-size:.9rem}
.pn-art-mk{border-radius:4px;background:var(--c);box-shadow:0 0 0 2px var(--c)}

/* ---------- YouTube mockups (shared by YouTube tools) ---------- */
.yt-stage{background:#0f0f0f;border-radius:var(--pn-r-card);padding:clamp(1rem,3vw,2rem);color:#f1f1f1;display:grid;grid-template-columns:1fr 340px;gap:1.6rem}
.yt-where{font-size:var(--pn-xs);font-weight:600;color:#aaa;margin:0 0 .6rem}
.yt-home{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.yt-thumb{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#272727}
.yt-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.yt-thumb img:not([src]){visibility:hidden}
.yt-thumb:has(img:not([src]))::before{content:"Your thumbnail";position:absolute;inset:0;display:grid;place-items:center;color:#777;font-size:.8rem}
.yt-thumb .yt-time{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.8);color:#fff;font-size:.72rem;font-weight:600;border-radius:4px;padding:1px 4px}
.yt-meta{display:grid;grid-template-columns:36px 1fr;gap:.7rem;margin-top:.7rem}
.yt-av{width:36px;height:36px;border-radius:50%;background:var(--c,#3f3f3f)}
.yt-title{font-size:.9rem;font-weight:600;line-height:1.35;color:#f1f1f1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.yt-sub{font-size:.78rem;color:#aaa;margin-top:.2rem;line-height:1.4}
.yt-mine{outline:2px solid var(--pn-yellow);outline-offset:6px;border-radius:12px}
.yt-side{display:flex;flex-direction:column;gap:.6rem}
.yt-row{display:grid;grid-template-columns:168px 1fr;gap:.6rem}
.yt-row .yt-thumb{border-radius:8px}
.yt-row .yt-title{font-size:.84rem}
.yt-fake{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.25em;font-family:var(--pn-font-display);text-transform:uppercase;letter-spacing:-.02em;line-height:.95;padding:0 8%;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.25)}
.yt-fake em{font-style:normal;font-size:.55em;background:#fff;color:var(--k,#111);padding:.15em .4em;border-radius:4px;transform:rotate(-3deg);text-shadow:none}
.yt-fake::after{content:"";position:absolute;right:-6%;bottom:-18%;width:46%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.18)}
.yt-titlefield{display:flex;gap:.6rem;align-items:center;margin-bottom:1rem}
.yt-titlefield .pn-input{background:#1f1f1f;border-color:#333;color:#fff}
.yt-titlefield label{font-size:var(--pn-xs);color:#aaa;white-space:nowrap}
@media (max-width:1060px){.yt-stage{grid-template-columns:1fr}}
@media (max-width:700px){.yt-home{grid-template-columns:1fr}.yt-home > :nth-child(n+2){display:none}}
@media (max-width:420px){.yt-row{grid-template-columns:140px 1fr}}

/* ---------- CTA ---------- */
.pn-cta{margin-top:5.5rem;background:var(--pn-yellow);border-radius:30px;padding:clamp(1.6rem,5vw,3.5rem);text-align:center}
.pn-cta h2{font-size:var(--pn-h2);max-width:22ch;margin:0 auto}
.pn-cta p{margin:.8rem auto 1.4rem;max-width:46ch;color:#2b2b14}

/* ---------- Toast ---------- */
.pn-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);background:var(--pn-black);color:var(--pn-white);padding:.6rem 1.1rem;border-radius:var(--pn-r-pill);font-size:.875rem;opacity:0;pointer-events:none;transition:all var(--pn-ease);z-index:50}
.pn-toast.is-on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){.pn-body *{transition:none!important;animation:none!important}}

/* ---------- Content blocks below the tool (SEO / GEO layer) ----------
   Pattern: answer-first copy, question-led H2s, alternating text + visual rows. */
.pn-toc{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin:2.2rem auto 0;max-width:900px}
.pn-toc span{font-size:var(--pn-sm);color:var(--pn-muted);align-self:center;margin-right:.2rem}
.pn-toc a{font-size:var(--pn-sm);font-weight:500;color:var(--pn-black);background:var(--pn-white);border:1px solid var(--pn-line);border-radius:var(--pn-r-pill);padding:.35rem .85rem;transition:border-color var(--pn-ease-fast)}
.pn-toc a:hover{border-color:var(--pn-black)}
.pn-block{padding:6rem 0 0;scroll-margin-top:84px}
.pn-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.pn-split.is-flip > :first-child{order:2}
.pn-split > *{min-width:0}
.pn-copy b{overflow-wrap:anywhere}
.pn-copy h2{font-size:var(--pn-h2);line-height:1.1}
.pn-copy .pn-eyebrow{margin-bottom:.6rem}
.pn-answer{font-size:1.125rem;line-height:1.6;color:var(--pn-black);margin-top:1rem}
.pn-copy p + p{margin-top:.9rem}
.pn-copy p{color:var(--pn-charcoal)}
.pn-art{position:relative;border-radius:var(--pn-r-card);background:var(--pn-yellow-pale);padding:clamp(1.4rem,4vw,2.6rem);display:grid;place-items:center;min-height:330px;overflow:hidden}
.pn-art--mint{background:var(--pn-mint)}
.pn-art--linen{background:var(--pn-linen)}
.pn-art img{width:100%;max-width:420px;max-height:300px;object-fit:contain;position:relative}
.pn-art::before{content:"";position:absolute;width:62%;aspect-ratio:1;border-radius:50%;background:var(--pn-white);opacity:.7;right:-12%;bottom:-22%}
.pn-howto{list-style:none;margin:1.6rem 0 0;padding:0;counter-reset:td;display:flex;flex-direction:column}
.pn-howto li{counter-increment:td;display:grid;grid-template-columns:36px 1fr;gap:1rem;padding:1rem 0;border-top:1px solid var(--pn-line-soft)}
.pn-howto li:first-child{border-top:0;padding-top:0}
.pn-howto li::before{content:counter(td);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--pn-yellow);font-family:var(--pn-font-display);color:var(--pn-black)}
.pn-howto b{display:block;color:var(--pn-black);font-weight:600;margin-bottom:.15rem}
.pn-howto span{font-size:.92rem;color:var(--pn-charcoal)}
.pn-codechips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:1.2rem}
.pn-codechips code{font-family:var(--pn-font-body);font-size:var(--pn-xs);background:var(--pn-white);border:1px solid var(--pn-line);border-radius:var(--pn-r-pill);padding:.22rem .65rem;color:var(--pn-charcoal)}
.pn-mk{background:var(--pn-yellow);border-radius:4px;padding:.02em .14em;margin:0 .06em}
.pn-note{display:flex;gap:.6rem;align-items:flex-start;margin-top:1.1rem;font-size:var(--pn-sm);color:var(--pn-charcoal)}
.pn-note i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--pn-mint);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.7rem;color:var(--pn-black);margin-top:.1rem}
.pn-pill{display:inline-block;font-size:.6875rem;font-weight:600;border-radius:var(--pn-r-pill);padding:.08rem .5rem;background:var(--pn-linen);color:var(--pn-gray);white-space:nowrap}
.pn-pill--ok{background:var(--pn-mint);color:var(--pn-black)}
.pn-credit{font-size:var(--pn-xs);color:var(--pn-muted);margin-top:1.2rem;text-align:center}
.pn-credit a{color:var(--pn-muted);text-decoration:underline;text-underline-offset:2px}
.pn-uses{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.pn-use{background:var(--pn-white);border:1px solid var(--pn-line);border-radius:var(--pn-r-card);overflow:hidden;display:flex;flex-direction:column}
.pn-use__art{height:170px;display:grid;place-items:center;padding:1rem;background:var(--c,var(--pn-yellow-pale))}
.pn-use__art img{max-height:100%;max-width:100%}
.pn-use__body{padding:1.1rem 1.2rem 1.3rem}
.pn-use h3{font-size:1.15rem}
.pn-use p{font-size:.875rem;margin-top:.4rem}
.pn-rights{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.5rem}
.pn-rights > div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:1.3rem 1.4rem}
.pn-rights h3{color:var(--pn-white);font-size:1.2rem;display:flex;align-items:center;gap:.6rem}
.pn-rights h3 i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.8rem;color:var(--pn-black)}
.pn-rights ul{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.pn-rights li{font-size:.92rem;color:#d0d0d0;padding-left:1.1rem;position:relative}
.pn-rights li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:#8a8a8a}
.pn-rights-note{font-size:var(--pn-sm);color:#a3a3a3;margin-top:1.4rem;text-align:center;max-width:62ch;margin-inline:auto}
.pn-fixes{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.pn-fix{background:var(--pn-white);border:1px solid var(--pn-line);border-radius:var(--pn-r-card);padding:1.3rem 1.4rem;display:grid;grid-template-columns:auto 1fr;gap:1rem}
.pn-fix__ico{width:42px;height:42px;border-radius:12px;background:var(--pn-linen);display:grid;place-items:center}
.pn-fix__ico svg{width:20px;height:20px;fill:none;stroke:var(--pn-black);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pn-fix h3{font-size:1.15rem}
.pn-fix p{font-size:.875rem;margin-top:.35rem}
.pn-fix a{text-decoration:underline;text-underline-offset:2px}
@media (max-width:980px){.pn-uses{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.pn-split{grid-template-columns:1fr}.pn-split.is-flip > :first-child{order:0}.pn-art{min-height:240px}.pn-rights,.pn-fixes{grid-template-columns:1fr}}
@media (max-width:560px){.pn-block{padding-top:4.5rem}.pn-uses{grid-template-columns:1fr}}