/*
 * PDFRaj Engine — proprietary.
 * Copyright (c) 2026 Aditya Raj. All rights reserved.
 * Author: Aditya Raj. Unauthorized copying, distribution, or resale of this
 * source, in whole or in part, is prohibited.
 */
/**
 * PDFRaj tool page v2 — Phase 6.3C. Ported from the client tool-page design.
 * Every rule is scoped under .pdfraj-tool-v2 so it cannot leak into the shared
 * header/footer or the legacy tool UI. Design tokens live on the wrapper.
 * (Header/mega-menu come from the shared shell, not styled here.)
 */
.pdfraj-tool-v2{
  /* Brand color pass (homepage-v2 project): this file already centralized its
   * purple into --p/--pd/--pt/--pm/--pg plus neutral --bg/--surf/--bdr tokens
   * -- pdfraj-tool-v2-sections.css reads the SAME variables (93 usages),
   * since both files are loaded together under this one .pdfraj-tool-v2
   * scope. Changing the ~10 values here is what repaints every button, icon
   * chip, badge, link, hover border and section tint on every tool page,
   * with no other line needing to change. --p becomes the homepage's own
   * --solid forest green (#5247DC), not the brand kit's lime -- --p is used
   * for BOTH colored-fill-with-white-text (buttons/icon chips) AND
   * colored-text (headings/links) throughout this file, and white-on-lime
   * has no contrast; forest green works for both the way it already does on
   * the homepage's own "popular" badges and active filter pills. --bg moves
   * from pure white to the homepage's cream (#F5F4EF) per the user's own
   * explicit call -- matching its background, not just its accent color.
   * --surf/--surf2/--bdr/--bdr-l were pale blue/lavender tints (part of the
   * same purple theme, not neutral grey) -- now warm cream tints in the
   * same family as --bg, matching the homepage's own --bg2/--line instead. */
  --bg:#FFFFFF;--surf:#F6F8FF;--surf2:#ECEEF7;--bdr:#E1E4EF;--bdr-l:#EAECF5;--card:#FFFFFF;
  --p:#5247DC;--pd:#4239C8;--pt:#EEEDFC;--pm:#C5BEF5;--pg:rgba(82,71,220,.13);
  --text:#0C0F1C;--t2:#475070;--t3:#8892B0;--t4:#C0C6DC;--ok:#0A9063;--okt:#E8FAF3;
  --fd:"Epilogue",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --fb:"Rubik",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --r6:6px;--r8:8px;--r12:12px;--r16:16px;--r18:18px;--r20:20px;--r24:24px;--r32:32px;
  --sx:0 1px 3px rgba(12,15,28,.06);
  --sm:0 4px 20px rgba(12,15,28,.09),0 1px 4px rgba(12,15,28,.05);
  --sl:0 12px 48px rgba(12,15,28,.11),0 4px 12px rgba(12,15,28,.05);
  --sp:0 8px 28px rgba(82,71,220,.3);
  font-family:var(--fb);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;
  color-scheme:light;
}

/* Dark mode: same html[data-theme="dark"] attribute + prefers-color-scheme
 * fallback pattern as pdfraj-home-directory.css, overriding the SAME variable
 * names so every rule in this file, pdfraj-tool-v2-sections.css and
 * pdfraj-tool-client.css (all three read these vars, never :root) repaints
 * automatically -- no other line needs to change. Neutral tones match the
 * homepage's own dark palette (--bg/#0B0C0E family) so toggling theme looks
 * like one site, not two. --p/--pd/--pt/--pm get a brighter green (not a
 * simple darken of the light --p) because --p does double duty as both
 * white-text button fill AND colored heading/link text in this file --
 * #5247DC is too dark to read as text on a near-black background, so a
 * mid-bright green was picked that still passes contrast as a white-text
 * fill. --card is new: every "white card" component in these 3 files
 * (feature cards, FAQ, step cards, related-tools cards, status boxes) was
 * hardcoded to #fff rather than reading a variable -- 80 occurrences across
 * the 3 files were switched to var(--card) so this one token controls all of
 * them, same as --bg/--surf already did for section backgrounds. Still not
 * covered: the hero's own gradient background (its own rule below, not a
 * flat color) and the decorative file-type mockup icons (Word/Excel/PPT
 * colors, the rainbow mega-menu category tags) -- those are deliberately
 * brand-color-independent and keep their color in both themes, same as the
 * editor workspace's category tags. */
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .pdfraj-tool-v2 {
  --bg:#0B0C0E;--surf:#121317;--surf2:#16181C;--bdr:#26282D;--bdr-l:#1F2125;--card:#16181C;
  --p:#8B7FF5;--pd:#5247DC;--pt:#1C1A3D;--pm:#3A357A;--pg:rgba(139,127,245,.25);
  --text:#F5F4EF;--t2:#B9BCC4;--t3:#8E9098;--t4:#5C5E66;--ok:#19B37A;--okt:#0F2A22;
  --sx:0 1px 3px rgba(0,0,0,.4);
  --sm:0 4px 20px rgba(0,0,0,.45),0 1px 4px rgba(0,0,0,.3);
  --sl:0 12px 48px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.3);
  --sp:0 8px 28px rgba(139,127,245,.35);
  color-scheme:dark;
}
}
html[data-theme="dark"] .pdfraj-tool-v2 {
  --bg:#0B0C0E;--surf:#121317;--surf2:#16181C;--bdr:#26282D;--bdr-l:#1F2125;--card:#16181C;
  --p:#8B7FF5;--pd:#5247DC;--pt:#1C1A3D;--pm:#3A357A;--pg:rgba(139,127,245,.25);
  --text:#F5F4EF;--t2:#B9BCC4;--t3:#8E9098;--t4:#5C5E66;--ok:#19B37A;--okt:#0F2A22;
  --sx:0 1px 3px rgba(0,0,0,.4);
  --sm:0 4px 20px rgba(0,0,0,.45),0 1px 4px rgba(0,0,0,.3);
  --sl:0 12px 48px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.3);
  --sp:0 8px 28px rgba(139,127,245,.35);
  color-scheme:dark;
}
.pdfraj-tool-v2 *,.pdfraj-tool-v2 *::before,.pdfraj-tool-v2 *::after{box-sizing:border-box}
.pdfraj-tool-v2 img,.pdfraj-tool-v2 svg{display:block;max-width:100%}
.pdfraj-tool-v2 a{color:inherit;text-decoration:none}
.pdfraj-tool-v2 ul,.pdfraj-tool-v2 ol{list-style:none;margin:0;padding:0}
.pdfraj-tool-v2 .wrap{width:100%;max-width:1216px;margin:0 auto;padding:0 40px}
.pdfraj-tool-v2 .rv{opacity:1;transform:none}

/* Buttons */
.pdfraj-tool-v2 .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--fb);font-weight:500;border-radius:var(--r8);transition:all .18s;white-space:nowrap;text-decoration:none;border:none;cursor:pointer}
.pdfraj-tool-v2 .btn-lg{font-size:17px;padding:15px 30px;border-radius:var(--r12)}
.pdfraj-tool-v2 .btn-p{background:var(--p);color:#fff;box-shadow:var(--sp)}
.pdfraj-tool-v2 .btn-p:hover{background:var(--pd);transform:translateY(-1px);box-shadow:0 10px 32px rgba(82,71,220,.38)}
.pdfraj-tool-v2 .btn-p:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}
/* Dark-mode AA: white label on --p (#8B7FF5) is only ~3.16:1. Drop the FILLED
 * primary button to the darker brand green (#5247DC ~ 4.7:1) so the label meets
 * WCAG AA, hover a shade deeper. --p stays #8B7FF5 for text/borders/icons (which
 * sit ON the dark surface, not under white text). Mirrors the workspace
 * .pe-ws-panel-run dark fix. */
html[data-theme="dark"] .pdfraj-tool-v2 .btn-p{background:#5247DC}
html[data-theme="dark"] .pdfraj-tool-v2 .btn-p:hover{background:#4239C8}
.pdfraj-tool-v2 .btn-g{background:var(--surf);color:var(--text);border:1.5px solid var(--bdr)}
.pdfraj-tool-v2 .btn-g:hover{background:var(--card);border-color:var(--pm);color:var(--p)}
.pdfraj-tool-v2 .btn-wh{background:var(--card);color:var(--p)}
.pdfraj-tool-v2 .btn-wh:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(0,0,0,.18)}
.pdfraj-tool-v2 .btn-ghost-wh{background:rgba(255,255,255,.14);color:#fff;border:2px solid rgba(255,255,255,.35)}
.pdfraj-tool-v2 .btn-ghost-wh:hover{background:rgba(255,255,255,.24)}

/* Breadcrumb */
.pdfraj-tool-v2 .bc{background:var(--card);border-bottom:1px solid var(--bdr-l);padding:12px 0}
.pdfraj-tool-v2 .bc-in{display:flex;align-items:center;gap:8px;font-family:var(--fb);font-size:13px;color:var(--t3)}
.pdfraj-tool-v2 .bc-in a{color:var(--t3);transition:color .15s}
.pdfraj-tool-v2 .bc-in a:hover{color:var(--p)}
.pdfraj-tool-v2 .bc-cur{color:var(--text);font-weight:500}

/* Hero */
.pdfraj-tool-v2 .hero{padding:10px 0 40px;background:radial-gradient(circle at 1px 1px,rgba(82,71,220,.08) 1.5px,transparent 0) 0 0/28px 28px,linear-gradient(165deg,#E7E9FB 0%,#EEEDFB 55%,#F4F3FE 100%);position:relative;overflow:hidden}
html[data-theme="dark"] .pdfraj-tool-v2 .hero{background:radial-gradient(circle at 1px 1px,rgba(139,127,245,.12) 1.5px,transparent 0) 0 0/28px 28px,linear-gradient(165deg,#12121C 0%,#0D0D16 55%,#0B0C0E 100%)}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .pdfraj-tool-v2 .hero{background:radial-gradient(circle at 1px 1px,rgba(139,127,245,.12) 1.5px,transparent 0) 0 0/28px 28px,linear-gradient(165deg,#12121C 0%,#0D0D16 55%,#0B0C0E 100%)}
}
.pdfraj-tool-v2 .hero::after{content:'';position:absolute;top:-80px;right:-120px;width:500px;height:500px;background:radial-gradient(circle,rgba(82,71,220,.08) 0%,transparent 65%);pointer-events:none}
.pdfraj-tool-v2 .hero-inner{position:relative;z-index:1}
.pdfraj-tool-v2 .h-eye{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px}
.pdfraj-tool-v2 .h-dot{width:8px;height:8px;background:var(--ok);border-radius:50%;animation:pdot-t 2.8s ease-in-out infinite}
@keyframes pdot-t{0%,100%{box-shadow:0 0 0 0 rgba(13,148,102,.45)}50%{box-shadow:0 0 0 7px rgba(13,148,102,0)}}
.pdfraj-tool-v2 .h-eyt{font-family:var(--fb);font-size:13px;font-weight:500;color:var(--t3);letter-spacing:.5px;text-transform:uppercase}
.pdfraj-tool-v2 .htool-hd{text-align:center;margin-bottom:8px}
.pdfraj-tool-v2 .htool-h1{font-family:var(--fd);font-size:46px;font-weight:800;line-height:1.05;letter-spacing:-2px;color:var(--text);margin:0 0 6px}
.pdfraj-tool-v2 .htool-sub{font-family:var(--fd);font-size:26px;font-weight:700;line-height:1.15;letter-spacing:-.8px;color:var(--p);font-style:italic;margin-bottom:4px}
.pdfraj-tool-v2 .h-sub-txt{font-family:var(--fb);font-size:16px;font-weight:300;color:var(--t2);line-height:1.35;max-width:700px;margin:0 auto;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Tool upload zone (wraps the PDFRajFlow .pdfraj-dropzone) */
.pdfraj-tool-v2 .tool-zone{background:var(--bg);border:2px dashed var(--bdr);border-radius:var(--r24);transition:all .22s ease;cursor:pointer;box-shadow:var(--sl);overflow:hidden;max-width:760px;margin:0 auto;padding:8px 24px}
.pdfraj-tool-v2 .tool-zone:hover,.pdfraj-tool-v2 .tool-zone.over{border-color:var(--p);background:var(--pt);box-shadow:var(--sl),0 0 0 5px var(--pg)}
.pdfraj-tool-v2 .tool-zone.ready,.pdfraj-tool-v2 .tool-zone[data-state="done"]{border-color:var(--ok);background:var(--okt);border-style:solid;cursor:default}
.pdfraj-tool-v2 .tz-body{padding:16px 32px 24px;text-align:center}
.pdfraj-tool-v2 .comp-vis{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px;margin-bottom:10px}
.pdfraj-tool-v2 .comp-file{display:flex;flex-direction:column;align-items:center;gap:6px}
.pdfraj-tool-v2 .comp-doc{border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pdfraj-tool-v2 .comp-doc svg{color:#fff}
.pdfraj-tool-v2 .comp-size-lbl{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:-.2px}
.pdfraj-tool-v2 .comp-tag{font-family:var(--fb);font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px}
.pdfraj-tool-v2 .comp-arrow-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.pdfraj-tool-v2 .comp-pct-badge{background:var(--okt);border:1px solid rgba(10,144,99,.25);color:var(--ok);font-family:var(--fd);font-size:13px;font-weight:700;padding:4px 10px;border-radius:100px;white-space:nowrap}
.pdfraj-tool-v2 .comp-arrow-wrap svg{color:var(--pm)}
/* level selector — radios styled as the client toggle */
.pdfraj-tool-v2 .comp-lvl-row{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0 20px;flex-wrap:wrap}
.pdfraj-tool-v2 .comp-lvl-lbl{font-family:var(--fb);font-size:14px;color:var(--t2)}
.pdfraj-tool-v2 .comp-lvl-btn{position:relative;font-family:var(--fb);font-size:14px;font-weight:500;padding:8px 20px;border-radius:100px;border:1.5px solid var(--bdr);color:var(--t2);background:var(--card);cursor:pointer;transition:all .15s;display:inline-flex;align-items:center}
.pdfraj-tool-v2 .comp-lvl-btn input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pdfraj-tool-v2 .comp-lvl-btn:hover{border-color:var(--pm);color:var(--p)}
.pdfraj-tool-v2 .comp-lvl-btn:has(input:checked){background:var(--p);color:#fff;border-color:var(--p);box-shadow:var(--sp)}
.pdfraj-tool-v2 .tz-h{font-family:var(--fd);font-size:20px;font-weight:700;color:var(--text);margin-bottom:8px}
.pdfraj-tool-v2 .tz-p{font-family:var(--fb);font-size:14px;color:var(--t3);margin-bottom:12px}
.pdfraj-tool-v2 .tz-p .link{color:var(--p);font-weight:600;background:none;border:none;cursor:pointer;font:inherit;padding:0}
.pdfraj-tool-v2 .tz-btn{font-size:16px;padding:13px 36px;border-radius:var(--r12)}
/* Single-CTA uploader prompt: bold title + muted one-line meta, then the button.
 * Reusable across every tool-ui (only the title verb + button label change). */
.pdfraj-tool-v2 .tz-title{font-family:var(--fd);font-weight:800;font-size:24px;line-height:1.2;letter-spacing:-.02em;color:var(--text);margin:0 0 8px}
.pdfraj-tool-v2 .tz-sub{font-family:var(--fb);font-size:14px;color:var(--t3);margin:0 0 12px}
.pdfraj-tool-v2 .tz-body .tz-btn[hidden]{display:none}
/* Smallpdf-style upload CTA (quality moved to the post-upload workspace panel).
 * Reusable: any tool-ui can drop in .up-cta to get this single clean uploader. */
.pdfraj-tool-v2 .up-cta{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:6px}
.pdfraj-tool-v2 .up-btn{display:inline-flex;align-items:stretch;padding:0;background:var(--p);border:0;border-radius:14px;box-shadow:0 12px 30px -8px var(--pg),0 2px 6px rgba(82,71,220,.25);cursor:pointer;overflow:hidden;transition:background .16s,box-shadow .16s,transform .16s}
.pdfraj-tool-v2 .up-btn:hover{background:var(--pd);box-shadow:0 16px 40px -8px var(--pg),0 2px 6px rgba(82,71,220,.3);transform:translateY(-1px)}
.pdfraj-tool-v2 .up-btn-main{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;font-family:var(--fd);font-weight:700;font-size:16px;letter-spacing:.02em;color:#fff}
.pdfraj-tool-v2 .up-btn-main svg{width:22px;height:22px;color:#fff}
.pdfraj-tool-v2 .up-btn-caret{display:inline-flex;align-items:center;justify-content:center;width:50px;border-left:1px solid rgba(255,255,255,.28);color:#fff}
.pdfraj-tool-v2 .up-btn-caret svg{width:20px;height:20px}
.pdfraj-tool-v2 .up-drop{font-family:var(--fb);font-size:14px;font-weight:500;color:var(--p)}
.pdfraj-tool-v2 .tz-body input[type="file"]{display:none}
.pdfraj-tool-v2 .file-list{list-style:none;margin:14px 0 0;padding:0;font-family:var(--fb);font-size:13px;color:var(--t2)}
/* status / result / error (PDFRajFlow) */
.pdfraj-tool-v2 .pdfraj-status,.pdfraj-tool-v2 .pdfraj-result,.pdfraj-tool-v2 .pdfraj-error{max-width:760px;margin:18px auto 0;background:var(--card);border:1.5px solid var(--bdr);border-radius:var(--r16);padding:22px 24px;text-align:center}
.pdfraj-tool-v2 .pdfraj-status{display:flex;align-items:center;justify-content:center;gap:12px}
.pdfraj-tool-v2 .status-title{font-family:var(--fd);font-weight:700;color:var(--text)}
.pdfraj-tool-v2 .status-detail,.pdfraj-tool-v2 .error-detail{font-family:var(--fb);font-size:14px;color:var(--t2);display:block;margin-top:4px}
.pdfraj-tool-v2 .spinner{width:22px;height:22px;border:3px solid var(--pt);border-top-color:var(--p);border-radius:50%;animation:pp-spin .7s linear infinite}
@keyframes pp-spin{to{transform:rotate(360deg)}}
.pdfraj-tool-v2 .pdfraj-result{border-color:var(--ok);background:var(--okt)}
.pdfraj-tool-v2 .result-message{font-family:var(--fd);font-weight:700;margin-bottom:14px}
.pdfraj-tool-v2 .result-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin:16px 0 0}
.pdfraj-tool-v2 .result-meta dt{font-family:var(--fb);font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--t3)}
.pdfraj-tool-v2 .result-meta dd{font-family:var(--fd);font-weight:700;color:var(--text)}
.pdfraj-tool-v2 .pdfraj-error{border-color:#DC2626;background:#FEF2F2}
html[data-theme="dark"] .pdfraj-tool-v2 .pdfraj-error{border-color:#DC2626;background:#2A1414}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .pdfraj-tool-v2 .pdfraj-error{border-color:#DC2626;background:#2A1414}
}
.pdfraj-tool-v2 .error-title{font-family:var(--fd);font-weight:700;color:#B91C1C}
.pdfraj-tool-v2 .pdfraj-actions{text-align:center;margin-top:14px}

/* USP badges */
.pdfraj-tool-v2 .h-usps{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:20px}
.pdfraj-tool-v2 .husp{display:inline-flex;align-items:center;gap:6px;font-family:var(--fb);font-size:13px;font-weight:500;color:var(--ok);background:var(--okt);border:1px solid rgba(10,144,99,.2);border-radius:100px;padding:5px 12px}
.pdfraj-tool-v2 .husp svg{width:12px;height:12px;flex-shrink:0}

/* Trust bar */
.pdfraj-tool-v2 .tbar{border-top:1px solid var(--bdr-l);border-bottom:1px solid var(--bdr-l);padding:18px 0;background:var(--card)}
.pdfraj-tool-v2 .titems{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 0}
.pdfraj-tool-v2 .ti{display:flex;align-items:center;gap:7px;padding:6px 20px;font-family:var(--fb);font-size:14px;color:var(--t3)}
.pdfraj-tool-v2 .ti svg{width:15px;height:15px;color:var(--ok);flex-shrink:0}
.pdfraj-tool-v2 .ti-sep{width:5px;height:5px;background:var(--bdr);border-radius:50%;align-self:center}

/* Sections */
.pdfraj-tool-v2 .sec{padding:88px 0}
.pdfraj-tool-v2 .sec-surf{background:var(--surf)}
/* Uniform section rhythm: hero keeps its gradient, then content sections
 * alternate --bg <-> --surf (2nd=--bg, 3rd=--surf, ...) regardless of the
 * per-section sec-surf flag, so every tool page reads the same as the homepage.
 * Nested widget sections (status/result inside .hero) are excluded via `>`. */
.pdfraj-tool-v2 > section:not(.hero):nth-of-type(even){background:var(--bg)}
.pdfraj-tool-v2 > section:not(.hero):nth-of-type(odd){background:var(--surf)}
.pdfraj-tool-v2 .stag{display:inline-flex;align-items:center;gap:7px;font-family:var(--fb);font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--p);margin-bottom:14px}
.pdfraj-tool-v2 .stag::before{content:'';width:16px;height:2px;background:var(--p);border-radius:2px}
.pdfraj-tool-v2 .sh2m{font-family:var(--fd);font-size:38px;font-weight:800;line-height:1.1;letter-spacing:-1.2px;color:var(--text)}
.pdfraj-tool-v2 .sh2m em{font-style:italic;color:var(--p)}
.pdfraj-tool-v2 .ssub{font-family:var(--fb);font-size:18px;font-weight:300;color:var(--t2);line-height:1.7;margin-top:14px}

/* How it works */
.pdfraj-tool-v2 .how-new-grid{display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr;gap:0;align-items:start;margin-top:52px}
.pdfraj-tool-v2 .how-new-card{background:var(--card);border:1.5px solid var(--bdr);border-radius:var(--r20);padding:36px 28px 32px;position:relative;overflow:hidden;transition:border-color .18s,box-shadow .18s}
/* How: 4-up step grid (how-4-grid) — faithful to designs like Sign PDF. */
.pdfraj-tool-v2 .how-4-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px;max-width:920px;margin-left:auto;margin-right:auto}
.pdfraj-tool-v2 .how-step-card{background:var(--card);border:1.5px solid var(--bdr);border-radius:var(--r20);padding:28px 26px;display:flex;gap:18px;align-items:flex-start;position:relative;overflow:hidden;transition:border-color .18s,box-shadow .18s}
.pdfraj-tool-v2 .how-step-n{font-family:var(--fd);font-size:52px;font-weight:800;color:var(--p);opacity:.06;position:absolute;top:10px;right:16px;line-height:1;user-select:none}
.pdfraj-tool-v2 .how-step-ico{width:48px;height:48px;min-width:48px;background:var(--p);border-radius:var(--r12);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(82,71,220,.28)}
.pdfraj-tool-v2 .how-step-ico svg{width:22px;height:22px;color:#fff}
.pdfraj-tool-v2 .how-step-h{font-family:var(--fd);font-size:18px;font-weight:700;color:var(--text);margin-bottom:8px;letter-spacing:-.3px}
.pdfraj-tool-v2 .how-step-p{font-family:var(--fb);font-size:14px;color:var(--t2);line-height:1.65}
.pdfraj-tool-v2 .how-new-card:hover{border-color:var(--pm);box-shadow:var(--sm)}
.pdfraj-tool-v2 .how-new-card::after{content:attr(data-step);position:absolute;bottom:-10px;right:14px;font-family:var(--fd);font-size:106px;font-weight:800;color:var(--p);opacity:.05;line-height:1;pointer-events:none;user-select:none;letter-spacing:-4px}
.pdfraj-tool-v2 .how-badge{display:inline-flex;align-items:center;font-family:var(--fb);font-size:11px;font-weight:600;color:var(--p);background:var(--pt);border:1.5px solid var(--pm);padding:3px 12px;border-radius:100px;margin-bottom:22px;letter-spacing:.5px;text-transform:uppercase}
.pdfraj-tool-v2 .how-new-ico{width:56px;height:56px;background:var(--p);border-radius:var(--r16);display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 6px 20px rgba(82,71,220,.28)}
.pdfraj-tool-v2 .how-new-ico svg{width:26px;height:26px;color:#fff}
.pdfraj-tool-v2 .how-new-h{font-family:var(--fd);font-size:21px;font-weight:700;letter-spacing:-.4px;color:var(--text);margin-bottom:12px}
.pdfraj-tool-v2 .how-new-p{font-family:var(--fb);font-size:15px;color:var(--t2);line-height:1.72}
.pdfraj-tool-v2 .how-arr{display:flex;align-items:center;justify-content:center;padding-top:80px}
.pdfraj-tool-v2 .how-arr svg{color:var(--pm)}

/* card_grid family (features / use-cases / answers / levels) */
.pdfraj-tool-v2 .feat-grid,.pdfraj-tool-v2 .answer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.pdfraj-tool-v2 .feat-card{background:var(--card);border:1.5px solid var(--bdr);border-radius:var(--r20);padding:32px 28px;transition:all .18s;position:relative;overflow:hidden}
.pdfraj-tool-v2 .feat-card:hover{border-color:var(--pm);box-shadow:var(--sm);transform:translateY(-3px)}
.pdfraj-tool-v2 .feat-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--p),var(--pm))}
.pdfraj-tool-v2 .feat-ico{width:52px;height:52px;background:var(--pt);border-radius:var(--r16);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.pdfraj-tool-v2 .feat-ico svg{width:26px;height:26px;color:var(--p)}
.pdfraj-tool-v2 .feat-h{font-family:var(--fd);font-size:20px;font-weight:700;letter-spacing:-.4px;color:var(--text);margin-bottom:10px}
.pdfraj-tool-v2 .feat-p{font-family:var(--fb);font-size:15px;color:var(--t2);line-height:1.7}
.pdfraj-tool-v2 .answer-card{background:var(--card);border:1.5px solid var(--bdr);border-radius:var(--r20);padding:28px 24px;transition:all .18s;position:relative;overflow:hidden}
.pdfraj-tool-v2 .answer-card:hover{border-color:var(--pm);box-shadow:var(--sm);transform:translateY(-2px)}
.pdfraj-tool-v2 .answer-card .acard-tag{display:inline-flex;font-family:var(--fb);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--p);background:var(--pt);border:1px solid var(--pm);border-radius:100px;padding:3px 9px;margin-bottom:14px}
.pdfraj-tool-v2 .answer-card h3{font-family:var(--fd);font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.3px;margin-bottom:10px}
.pdfraj-tool-v2 .answer-card p{font-family:var(--fb);font-size:14px;color:var(--t2);line-height:1.7}
/* compression levels */
.pdfraj-tool-v2 .lvl-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:48px auto 0;max-width:860px}
.pdfraj-tool-v2 .lvl-card{border-radius:var(--r20);padding:36px 32px;border:1.5px solid var(--bdr);position:relative;overflow:hidden;background:var(--card);transition:all .18s}
.pdfraj-tool-v2 .lvl-card:hover{box-shadow:var(--sm);border-color:var(--pm)}
.pdfraj-tool-v2 .lvl-card.rec{border-color:var(--p);box-shadow:0 0 0 3px var(--pg)}
.pdfraj-tool-v2 .lvl-rec-tag{position:absolute;top:20px;right:20px;font-family:var(--fd);font-size:11px;font-weight:700;color:#fff;background:var(--p);padding:3px 10px;border-radius:100px}
.pdfraj-tool-v2 .lvl-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--fd);font-size:13px;font-weight:700;color:var(--p);background:var(--pt);border:1.5px solid var(--pm);padding:5px 14px;border-radius:100px;margin-bottom:18px}
.pdfraj-tool-v2 .lvl-h{font-family:var(--fd);font-size:24px;font-weight:800;color:var(--text);letter-spacing:-.5px;margin-bottom:6px}
.pdfraj-tool-v2 .lvl-pct{font-family:var(--fd);font-size:36px;font-weight:800;color:var(--ok);letter-spacing:-1px;margin-bottom:14px;line-height:1}
.pdfraj-tool-v2 .lvl-pct span{font-size:16px;font-weight:500;color:var(--t3);letter-spacing:0}
.pdfraj-tool-v2 .lvl-p{font-family:var(--fb);font-size:15px;color:var(--t2);line-height:1.7;margin-bottom:16px}
.pdfraj-tool-v2 .lvl-list{display:flex;flex-direction:column;gap:8px}
.pdfraj-tool-v2 .lvl-li{display:flex;align-items:center;gap:9px;font-family:var(--fb);font-size:14px;color:var(--t2)}
.pdfraj-tool-v2 .lvl-li svg{width:14px;height:14px;color:var(--ok);flex-shrink:0}
/* use cases */
.pdfraj-tool-v2 .use-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.pdfraj-tool-v2 .use-card{background:var(--card);border:1.5px solid var(--bdr);border-radius:var(--r16);padding:26px 22px;transition:all .18s}
.pdfraj-tool-v2 .use-card:hover{border-color:var(--pm);box-shadow:var(--sm);transform:translateY(-2px)}
.pdfraj-tool-v2 .use-ico{width:48px;height:48px;border-radius:var(--r12);display:flex;align-items:center;justify-content:center;margin-bottom:14px;background:var(--pt)}
.pdfraj-tool-v2 .use-ico svg{width:24px;height:24px;color:var(--p)}
.pdfraj-tool-v2 .use-h{font-family:var(--fd);font-size:17px;font-weight:700;color:var(--text);letter-spacing:-.3px;margin-bottom:8px}
.pdfraj-tool-v2 .use-p{font-family:var(--fb);font-size:14px;color:var(--t2);line-height:1.65}

/* prose */
.pdfraj-tool-v2 .seo-prose{max-width:820px;margin:0 auto}
.pdfraj-tool-v2 .seo-prose p{font-family:var(--fb);font-size:17px;color:var(--t2);line-height:1.8;margin-bottom:18px}
.pdfraj-tool-v2 .seo-prose h3{font-family:var(--fd);font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.4px;margin:32px 0 12px}
.pdfraj-tool-v2 .seo-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px}
.pdfraj-tool-v2 .stg{font-family:var(--fb);font-size:12px;color:var(--p);background:var(--pt);border-radius:100px;padding:3px 10px;border:1px solid rgba(82,71,220,.15)}

/* related tools */
.pdfraj-tool-v2 .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.pdfraj-tool-v2 .rcard{background:var(--card);border:1.5px solid var(--bdr);border-radius:var(--r12);padding:18px 16px 16px;display:flex;flex-direction:column;transition:border-color .18s,box-shadow .18s,transform .2s;text-decoration:none}
.pdfraj-tool-v2 .rcard:hover{border-color:var(--pm);box-shadow:var(--sm);transform:translateY(-3px)}
.pdfraj-tool-v2 .rc-sq{width:44px;height:44px;border-radius:var(--r12);display:flex;align-items:center;justify-content:center;margin-bottom:12px;flex-shrink:0;background:linear-gradient(135deg,var(--g0,var(--p)),var(--g1,var(--pd)))}
.pdfraj-tool-v2 .rc-sq svg{width:22px;height:22px}
.pdfraj-tool-v2 .rc-sq svg [stroke]{stroke:#fff}
.pdfraj-tool-v2 .rc-sq svg [fill]:not([fill="none"]){fill:rgba(255,255,255,.18)}
.pdfraj-tool-v2 .rc-nm{font-family:var(--fd);font-size:14px;font-weight:700;color:var(--text);margin-bottom:5px}
.pdfraj-tool-v2 .rc-ds{font-family:var(--fb);font-size:12px;color:var(--t3);line-height:1.55;flex:1}
.pdfraj-tool-v2 .rcard:hover .rc-nm{color:var(--p)}

/* FAQ (native <details>) */
.pdfraj-tool-v2 .faq-list{max-width:800px;margin:52px auto 0}
.pdfraj-tool-v2 .faq-item{border-bottom:1px solid var(--bdr)}
.pdfraj-tool-v2 .faq-item:first-child{border-top:1px solid var(--bdr)}
.pdfraj-tool-v2 .faq-q{display:flex;align-items:center;justify-content:space-between;width:100%;padding:22px 0;font-family:var(--fd);font-size:18px;font-weight:700;color:var(--text);cursor:pointer;text-align:left;gap:20px;transition:color .15s;list-style:none}
.pdfraj-tool-v2 .faq-q::-webkit-details-marker{display:none}
.pdfraj-tool-v2 .faq-q:hover{color:var(--p)}
.pdfraj-tool-v2 .faq-icon{width:28px;height:28px;border-radius:50%;background:var(--surf);border:1.5px solid var(--bdr);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.pdfraj-tool-v2 .faq-icon svg{width:14px;height:14px;color:var(--t3);transition:transform .2s}
.pdfraj-tool-v2 .faq-item[open] .faq-q{color:var(--p)}
.pdfraj-tool-v2 .faq-item[open] .faq-icon{background:var(--pt);border-color:var(--p)}
.pdfraj-tool-v2 .faq-item[open] .faq-icon svg{transform:rotate(45deg);color:var(--p)}
.pdfraj-tool-v2 .faq-body p{font-family:var(--fb);font-size:17px;color:var(--t2);line-height:1.75;padding-bottom:22px}

/* CTA */
.pdfraj-tool-v2 .cta-card{background:linear-gradient(140deg,var(--p) 0%,#4239C8 60%,#081C15 100%);border-radius:var(--r32);padding:88px 64px;text-align:center;max-width:940px;margin:0 auto;box-shadow:0 24px 72px rgba(82,71,220,.32);position:relative;overflow:hidden}
.pdfraj-tool-v2 .cta-card::before{content:'';position:absolute;top:-120px;right:-120px;width:480px;height:480px;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 60%);pointer-events:none}
.pdfraj-tool-v2 .cta-card>*{position:relative;z-index:1}
.pdfraj-tool-v2 .cta-h{font-family:var(--fd);font-size:48px;font-weight:800;color:#fff;line-height:1.07;letter-spacing:-1.6px;margin-bottom:16px}
.pdfraj-tool-v2 .cta-p{font-family:var(--fb);font-size:19px;color:rgba(255,255,255,.78);line-height:1.65;max-width:520px;margin:0 auto}
.pdfraj-tool-v2 .cta-btns{display:flex;align-items:center;justify-content:center;gap:14px;margin:36px 0 0;flex-wrap:wrap}
.pdfraj-tool-v2 .cta-ps{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:24px;flex-wrap:wrap}
.pdfraj-tool-v2 .cpa{display:flex;align-items:center;gap:7px;font-family:var(--fb);font-size:14px;color:rgba(255,255,255,.72)}
.pdfraj-tool-v2 .cpa svg{width:14px;height:14px;flex-shrink:0}

/* Footer: see pdfraj-footer.css — one copy, loaded on every page. */
/* Responsive */
@media(max-width:960px){
  .pdfraj-tool-v2 .htool-h1{font-size:42px}
  .pdfraj-tool-v2 .htool-sub{font-size:22px}
  .pdfraj-tool-v2 .how-new-grid{grid-template-columns:1fr;gap:16px}.pdfraj-tool-v2 .how-4-grid{grid-template-columns:1fr}
  .pdfraj-tool-v2 .how-arr{display:none}
  .pdfraj-tool-v2 .feat-grid,.pdfraj-tool-v2 .answer-grid{grid-template-columns:1fr}
  .pdfraj-tool-v2 .use-grid{grid-template-columns:repeat(2,1fr)}
  .pdfraj-tool-v2 .related-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){.pdfraj-tool-v2 .lvl-grid{grid-template-columns:1fr}}
@media(max-width:600px){
  .pdfraj-tool-v2 .wrap{padding:0 20px}
  .pdfraj-tool-v2 .htool-h1{font-size:34px;letter-spacing:-1px}
  .pdfraj-tool-v2 .htool-sub{font-size:18px}
  .pdfraj-tool-v2 .sh2m{font-size:26px}
  .pdfraj-tool-v2 .cta-card{padding:52px 24px}
  .pdfraj-tool-v2 .cta-h{font-size:32px}
  .pdfraj-tool-v2 .tz-body{padding:22px 20px 28px}
  .pdfraj-tool-v2 .comp-vis{gap:10px}
  .pdfraj-tool-v2 .comp-pct-badge{white-space:normal;max-width:120px;text-align:center;font-size:12px;line-height:1.25}
  .pdfraj-tool-v2 .use-grid,.pdfraj-tool-v2 .related-grid{grid-template-columns:1fr}
}
/* Narrow phones: the INPUT->OUTPUT flow (.comp-vis) is a horizontal row that
   flex-wrapped below ~450px, dropping "Ready" to a second line while its arrow
   still pointed RIGHT -- a broken, cut-looking flow. Keep it horizontal (like
   desktop, so the hero stays compact and the upload action stays high on the
   first screen) but force nowrap and shrink the boxes/badge/icons so the whole
   row fits in one line down to ~320px. Boxes carry inline width/height, hence
   the !important. */
@media(max-width:480px){
  .pdfraj-tool-v2 .comp-vis{flex-wrap:nowrap;gap:10px;margin-bottom:8px}
  .pdfraj-tool-v2 .comp-doc{width:44px!important;height:56px!important}
  .pdfraj-tool-v2 .comp-doc svg{width:18px!important;height:18px!important}
  .pdfraj-tool-v2 .comp-arrow-wrap{gap:5px}
  .pdfraj-tool-v2 .comp-arrow-wrap svg{width:22px;height:22px}
  .pdfraj-tool-v2 .comp-pct-badge{font-size:10px;padding:2px 7px;max-width:none;white-space:nowrap}
}

/* Landing cleanup: hide the hero eyebrow chip. It is redundant with the H1
 * right below and eats vertical space — hiding it lifts the hero + CHOOSE
 * FILES CTA higher (better above-the-fold). Applies to all tool landings.
 *
 * The breadcrumb bar was hidden here too, for the same reason and correctly,
 * but the note beside it said the SEO breadcrumb schema was Rank Math's and
 * unaffected. It was ours, and it was not unaffected: the page went on
 * describing a trail this rule had just made invisible. The decision now lives
 * in PDFRaj_Breadcrumb::is_visible(), which the bar and the BreadcrumbList
 * both read, so the landings emit neither. */
.pdfraj-tool-v2 .h-eye { display: none; }

/* Editor-inserted links in tool content (pdfraj_rich fields) — auto-themed with
   the brand accent + bold + hover underline, so a plain <a href> looks on-brand
   and consistent everywhere without per-link inline styles. Inline style/class
   still override this when an editor needs a one-off. */
.pdfraj-tool-v2 .h-sub-txt a, .pdfraj-tool-v2 .htool-sub a, .pdfraj-tool-v2 .ssub a,
.pdfraj-tool-v2 .feat-p a, .pdfraj-tool-v2 .feat-p-sm a, .pdfraj-tool-v2 .use-p a,
.pdfraj-tool-v2 .why-p a, .pdfraj-tool-v2 .ct-p a, .pdfraj-tool-v2 .pc-p a,
.pdfraj-tool-v2 .lvl-p a, .pdfraj-tool-v2 .qa-p a, .pdfraj-tool-v2 .how-p a,
.pdfraj-tool-v2 .faq-body a {
	color: var(--p); font-weight: 600; text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--p) 35%, transparent);
	transition: color .15s ease, border-color .15s ease;
}
.pdfraj-tool-v2 .h-sub-txt a:hover, .pdfraj-tool-v2 .htool-sub a:hover, .pdfraj-tool-v2 .ssub a:hover,
.pdfraj-tool-v2 .feat-p a:hover, .pdfraj-tool-v2 .feat-p-sm a:hover, .pdfraj-tool-v2 .use-p a:hover,
.pdfraj-tool-v2 .why-p a:hover, .pdfraj-tool-v2 .ct-p a:hover, .pdfraj-tool-v2 .pc-p a:hover,
.pdfraj-tool-v2 .lvl-p a:hover, .pdfraj-tool-v2 .qa-p a:hover, .pdfraj-tool-v2 .how-p a:hover,
.pdfraj-tool-v2 .faq-body a:hover {
	color: var(--pd); border-bottom-color: var(--p);
}
/* CTA band sits on a coloured card — links inherit the band text colour + underline. */
.pdfraj-tool-v2 .cta-p a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Tool unavailable: maintenance (#10 / #27) and the coming-soon placeholder.
   .pdfraj-soon had no styling at all -- it was an unstyled h2 and paragraph
   dropped where the uploader had been, which read as a broken page rather
   than a deliberate notice. */
.pdfraj-soon {
	border: 1px solid var(--pp-line, #dde1e7);
	border-radius: 10px;
	background: var(--pp-surface-2, #f6f8fa);
	padding: 1.6rem 1.5rem;
	text-align: center;
	max-width: 34rem;
	margin-inline: auto;
}
.pdfraj-soon h2 { margin: 0 0 .4rem; font-size: 1.1rem; font-weight: 650; }
.pdfraj-soon p  { margin: 0; color: var(--pp-muted, #5a6272); line-height: 1.55; }
/* Maintenance is temporary and self-inflicted, so it gets a warning edge
   rather than the neutral one a not-built-yet tool gets. */
.pdfraj-maint {
	border-color: #e0b062;
	background: #fcf6ea;
}
.pdfraj-maint h2 { color: #8f5306; }
@media (prefers-color-scheme: dark) {
	.pdfraj-maint { border-color: #7a5a22; background: #2b2313; }
	.pdfraj-maint h2 { color: #e8b060; }
}

/* Multi-line refusal messages: see pdfraj-app.css. Repeated here because this
   sheet restyles both selectors and would otherwise not inherit the rule. */
.pdfraj-tool-v2 .error-title,.pdfraj-tool-v2 .error-detail{white-space:pre-line}

/* "Powered by PDFRaj <Engine> <version> · What's new" — muted row at the bottom
   edge of the upload card (tool/powered-by.php). Normal flow, so it never shifts
   the dropzone or options above it; wraps cleanly on a narrow phone. */
.pdfraj-powered-by{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px 7px;margin:18px 0 0;padding-top:2px;font-size:.78rem;color:#6a747d;font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-variant-numeric:tabular-nums;line-height:1.4}
.pdfraj-powered-by .pdfraj-pb-mark{flex:0 0 auto;display:inline-block;vertical-align:middle}
.pdfraj-powered-by .pdfraj-pb-text{font-weight:500}
.pdfraj-powered-by .pdfraj-pb-beta{font-size:.66rem;font-weight:700;color:#8a5a08;background:#f8efdd;border-radius:4px;padding:1px 6px;letter-spacing:.02em}
.pdfraj-powered-by .pdfraj-pb-sep{opacity:.5}
.pdfraj-powered-by .pdfraj-pb-link{color:#146C3A;font-weight:600;text-decoration:none;white-space:nowrap}
.pdfraj-powered-by .pdfraj-pb-link:hover{text-decoration:underline}
html[data-theme=dark] .pdfraj-powered-by{color:#9aa4ad}
html[data-theme=dark] .pdfraj-powered-by .pdfraj-pb-link{color:#8B7FF5}
html[data-theme=dark] .pdfraj-powered-by .pdfraj-pb-beta{color:#e0a243;background:#271d0f}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) .pdfraj-powered-by{color:#9aa4ad}html:not([data-theme=light]) .pdfraj-powered-by .pdfraj-pb-link{color:#8B7FF5}html:not([data-theme=light]) .pdfraj-powered-by .pdfraj-pb-beta{color:#e0a243;background:#271d0f}}