/* === FOLIO PDF TOOLS — DEFENSIVE RESET (theme override) === */
.ptp-app, .ptp-app *, .ptp-app *::before, .ptp-app *::after {
  box-sizing: border-box !important;
}
.ptp-app ul, .ptp-app ol {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}
.ptp-app ul li, .ptp-app ol li {
  list-style: none !important;
  background-image: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.ptp-app ul li::before, .ptp-app ol li::before,
.ptp-app ul li::marker, .ptp-app ol li::marker {
  content: none !important;
  display: none !important;
}
.ptp-app img {
  max-width: none !important;
  height: auto;
}
.ptp-app a {
  text-decoration: none;
}
.ptp-app button {
  font-family: inherit;
  cursor: pointer;
}
.ptp-app .modal {
  display: none !important;
}
.ptp-app .modal.open {
  display: flex !important;
}
.ptp-app .hidden {
  display: none !important;
}
/* Ensure our typography wins */
.ptp-app h1, .ptp-app h2, .ptp-app h3, .ptp-app h4 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 300 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-transform: none !important;
}
.ptp-app em {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-style: italic !important;
  color: #dd5a1a !important;
  font-weight: 400 !important;
}
.ptp-app .feat-tab {
  font-family: 'Fraunces', Georgia, serif !important;
}
.ptp-app pre, .ptp-app code {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

:root{
    --cream:#fff8e7;
    --cream-2:#fdf2d4;
    --ink:#1a1a1a;
    --ink-soft:#2b2622;
    --rust:#dd5a1a;
    --rust-deep:#a83d10;
    --moss:#3f6212;
    --gold:#a16207;
    --paper:#fffdf5;
    --error:#b91c1c;
    --success:#15803d;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--cream);
    color:var(--ink);
    font-family:'Fraunces',serif;
    font-feature-settings:"ss01";
    overflow-x:hidden;
    min-height:100vh;
  }

  body::before{
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1000;
    opacity:.05;
    mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* NAV */
  nav{
    position:sticky; top:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:1.2rem 2.5rem;
    background:var(--cream);
    border-bottom:1px solid var(--ink);
  }
  .logo{
    display:flex; align-items:center; gap:.6rem;
    font-family:'Instrument Serif',serif;
    font-size:1.6rem; letter-spacing:-.02em;
    cursor:pointer; text-decoration:none; color:var(--ink);
  }
  .logo-mark{
    width:32px;height:32px;
    background:var(--ink); color:var(--cream);
    display:grid;place-items:center;
    font-family:'JetBrains Mono',monospace;
    font-size:.7rem; font-weight:600;
    transform:rotate(-4deg);
  }
  .nav-links{
    display:flex; gap:2rem; list-style:none;
    font-family:'JetBrains Mono',monospace;
    font-size:.74rem; text-transform:uppercase; letter-spacing:.12em;
  }
  .nav-links a{ color:var(--ink); text-decoration:none; transition:color .2s; }
  .nav-links a:hover{color:var(--rust);}

  /* HERO */
  .hero{
    padding:4.5rem 2.5rem 5rem;
    border-bottom:1px solid var(--ink);
    position:relative;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:4rem; align-items:end;
    max-width:1400px; margin:0 auto;
  }
  .hero-meta{
    font-family:'JetBrains Mono',monospace;
    font-size:.7rem; text-transform:uppercase; letter-spacing:.18em;
    margin-bottom:2rem; display:flex; gap:1.5rem; align-items:center;
  }
  .dot{
    width:6px;height:6px; background:var(--rust); border-radius:50%;
    animation:pulse 2s infinite;
  }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.4;} }

  h1.hero-title{
    font-weight:300;
    font-size:clamp(2.6rem,7.5vw,7rem);
    line-height:.92; letter-spacing:-.04em;
    white-space:normal;
    margin:0;
  }
  h1.hero-title em{
    font-family:'Instrument Serif',serif;
    font-style:italic; font-weight:400; color:var(--rust);
  }

  .hero-side p{
    font-size:1.05rem; line-height:1.55;
    color:var(--ink-soft); margin-bottom:1.6rem; max-width:34ch;
  }
  .hero-side .badges{
    display:flex; flex-wrap:wrap; gap:.4rem;
    font-family:'JetBrains Mono',monospace;
    font-size:.65rem; text-transform:uppercase; letter-spacing:.1em;
  }
  .hero-side .badges span{
    border:1px solid var(--ink);
    padding:.4rem .7rem;
    background:var(--paper);
  }

  /* MARQUEE */
  .strip{
    overflow:hidden; border-bottom:1px solid var(--ink);
    background:var(--ink); color:var(--cream);
    padding:.85rem 0;
    font-family:'JetBrains Mono',monospace;
    font-size:.74rem; text-transform:uppercase; letter-spacing:.2em;
    white-space:nowrap;
  }
  .strip-track{ display:inline-flex; gap:3rem; animation:marquee 45s linear infinite; }
  .strip-track > span{ display:inline-flex; align-items:center; gap:3rem; }
  .star{color:var(--rust); font-size:1rem;}
  @keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  /* TOOLS SECTION */
  .tools-section{ padding:5rem 2.5rem; border-bottom:1px solid var(--ink); }
  .section-header{
    max-width:1400px; margin:0 auto 3rem;
    display:grid; grid-template-columns:auto 1fr auto; gap:2rem;
    align-items:end; border-bottom:1px solid var(--ink);
    padding-bottom:1.5rem;
  }
  .section-num{
    font-family:'JetBrains Mono',monospace;
    font-size:.74rem; letter-spacing:.15em;
  }
  .section-title{
    font-weight:300; font-size:clamp(1.8rem,3.5vw,3rem);
    line-height:1; letter-spacing:-.03em;
  }
  .section-title em{ font-family:'Instrument Serif',serif; font-style:italic; color:var(--rust); }
  .section-meta{
    font-family:'JetBrains Mono',monospace;
    font-size:.7rem; text-transform:uppercase; letter-spacing:.15em;
    color:var(--ink-soft); text-align:right;
  }

  .tools-grid{
    max-width:1400px; margin:0 auto;
    display:grid; grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--ink);
    border-left:1px solid var(--ink);
  }
  .tool{
    border-right:1px solid var(--ink);
    border-bottom:1px solid var(--ink);
    padding:1.8rem 1.6rem 1.6rem;
    background:var(--cream);
    cursor:pointer; position:relative;
    transition:background .25s;
    min-height:200px;
    display:flex; flex-direction:column; justify-content:space-between;
    text-decoration:none; color:inherit;
  }
  .tool:hover{ background:var(--paper); }
  .tool::after{
    content:'→';
    position:absolute; top:1.4rem; right:1.4rem;
    font-family:'Instrument Serif',serif; font-size:1.2rem;
    opacity:0; transition:all .3s; color:var(--rust);
  }
  .tool:hover::after{ opacity:1; transform:translate(4px,-4px); }
  .tool-num{
    font-family:'JetBrains Mono',monospace;
    font-size:.66rem; color:var(--ink-soft);
    letter-spacing:.15em; margin-bottom:1rem;
  }
  .tool-icon{ width:40px; height:40px; margin-bottom:1.2rem; }
  .tool-icon svg{ width:100%; height:100%; }
  .tool-name{
    font-weight:400; font-size:1.4rem;
    letter-spacing:-.02em; line-height:1.05; margin-bottom:.3rem;
  }
  .tool-name em{ font-family:'Instrument Serif',serif; font-style:italic; }
  .tool-desc{
    font-size:.85rem; color:var(--ink-soft); line-height:1.4;
  }

  /* MODAL / TOOL VIEW */
  .ptp-app .modal{
    position:fixed; inset:0; z-index:200;
    background:rgba(26,26,26,.75);
    display:none !important;
    align-items:flex-start; justify-content:center;
    padding:2rem; overflow-y:auto;
    backdrop-filter:blur(4px);
  }
  .ptp-app .modal.open{ display:flex !important; }
  .modal-inner{
    background:var(--cream);
    width:100%; max-width:900px;
    border:1px solid var(--ink);
    margin-top:2rem; margin-bottom:2rem;
    position:relative;
  }
  .modal-head{
    padding:2rem 2.5rem 1.5rem;
    border-bottom:1px solid var(--ink);
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:2rem;
  }
  .modal-head h2{
    font-weight:300; font-size:2.2rem;
    line-height:1; letter-spacing:-.02em;
  }
  .modal-head h2 em{ font-family:'Instrument Serif',serif; font-style:italic; color:var(--rust); }
  .modal-head p{
    margin-top:.7rem; color:var(--ink-soft); font-size:.95rem; max-width:55ch;
  }
  .modal-close{
    background:none; border:1px solid var(--ink);
    width:38px; height:38px; cursor:pointer;
    font-family:'Instrument Serif',serif; font-size:1.5rem;
    line-height:1; flex-shrink:0;
    transition:all .2s;
  }
  .modal-close:hover{ background:var(--ink); color:var(--cream); }

  .modal-body{ padding:2rem 2.5rem 2.5rem; }

  /* DROP ZONE */
  .drop{
    border:2px dashed var(--ink);
    background:var(--paper);
    padding:3rem 2rem;
    text-align:center;
    cursor:pointer;
    transition:all .2s;
  }
  .drop:hover, .drop.over{
    background:var(--ink); color:var(--cream);
  }
  .drop-icon{ font-family:'Instrument Serif',serif; font-size:3rem; line-height:1; margin-bottom:.8rem; color:var(--rust); }
  .drop strong{
    font-family:'JetBrains Mono',monospace;
    font-size:.85rem; text-transform:uppercase; letter-spacing:.12em;
    font-weight:600; display:block; margin-bottom:.4rem;
  }
  .drop span{ font-size:.85rem; opacity:.7; }
  .drop input{ display:none; }

  /* FILE LIST */
  .file-list{ margin-top:1.5rem; }
  .file-item{
    display:grid;
    grid-template-columns:auto 1fr auto auto;
    gap:1rem; align-items:center;
    padding:.9rem 1rem;
    border:1px solid var(--ink);
    background:var(--paper);
    margin-bottom:.5rem;
    font-family:'JetBrains Mono',monospace;
    font-size:.8rem;
  }
  .file-item .order{
    font-weight:600;
    background:var(--ink); color:var(--cream);
    padding:.25rem .5rem; min-width:24px; text-align:center;
  }
  .file-item .name{ font-family:'Fraunces',serif; font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .file-item .size{ font-size:.7rem; color:var(--ink-soft); }
  .file-item .actions{ display:flex; gap:.3rem; }
  .file-item button{
    background:transparent; border:1px solid var(--ink);
    width:28px; height:28px; cursor:pointer;
    font-family:inherit; font-size:.75rem;
    transition:all .15s;
  }
  .file-item button:hover{ background:var(--ink); color:var(--cream); }

  /* OPTIONS */
  .options{
    margin-top:1.5rem;
    padding:1.5rem;
    background:var(--cream-2);
    border:1px solid var(--ink);
  }
  .options h3{
    font-family:'JetBrains Mono',monospace;
    font-size:.72rem; text-transform:uppercase; letter-spacing:.15em;
    margin-bottom:1rem; font-weight:600;
  }
  .field{ margin-bottom:1rem; }
  .field:last-child{ margin-bottom:0; }
  .field label{
    display:block; font-size:.8rem;
    font-family:'JetBrains Mono',monospace;
    text-transform:uppercase; letter-spacing:.1em;
    margin-bottom:.4rem; color:var(--ink-soft);
  }
  .field input[type="text"], .field input[type="number"], .field select{
    width:100%; padding:.7rem .9rem;
    background:var(--paper);
    border:1px solid var(--ink);
    font-family:'Fraunces',serif; font-size:1rem;
  }
  .field input:focus, .field select:focus{ outline:2px solid var(--rust); outline-offset:-1px; }
  .field .hint{
    font-size:.78rem; color:var(--ink-soft);
    margin-top:.35rem; font-style:italic;
  }
  .radio-row{ display:flex; gap:.5rem; flex-wrap:wrap; }
  .radio-row label{
    cursor:pointer; padding:.55rem .9rem;
    border:1px solid var(--ink); background:var(--paper);
    font-family:'JetBrains Mono',monospace;
    font-size:.7rem; text-transform:uppercase; letter-spacing:.1em;
    transition:all .15s; margin-bottom:0;
    color:var(--ink);
  }
  .radio-row input{ display:none; }
  .radio-row input:checked + span,
  .radio-row label:has(input:checked){
    background:var(--ink); color:var(--cream);
  }

  /* ACTION BUTTON */
  .run-btn{
    margin-top:1.8rem; width:100%;
    padding:1.1rem; cursor:pointer;
    background:var(--ink); color:var(--cream);
    border:1px solid var(--ink);
    font-family:'JetBrains Mono',monospace;
    font-size:.85rem; text-transform:uppercase; letter-spacing:.18em;
    font-weight:600; transition:all .2s;
  }
  .run-btn:hover:not(:disabled){ background:var(--rust); border-color:var(--rust); }
  .run-btn:disabled{ opacity:.4; cursor:not-allowed; }

  /* STATUS */
  .status{ margin-top:1rem; padding:1rem; font-size:.9rem; }
  .status.error{ background:#fee; border:1px solid var(--error); color:var(--error); }
  .status.success{ background:#f0fdf4; border:1px solid var(--success); color:var(--success); }
  .status.processing{ background:var(--cream-2); border:1px solid var(--ink); }
  .status .bar{
    margin-top:.6rem; height:4px; background:rgba(0,0,0,.1); overflow:hidden;
  }
  .status .bar div{
    height:100%; background:var(--rust); width:0;
    transition:width .3s; animation:indeterminate 1.5s ease-in-out infinite;
  }
  @keyframes indeterminate{
    0%{ width:0; margin-left:0; }
    50%{ width:60%; margin-left:20%; }
    100%{ width:0; margin-left:100%; }
  }

  /* HOW-IT-WORKS */
  .how{ padding:5rem 2.5rem; border-bottom:1px solid var(--ink); background:var(--cream-2); }
  .how-grid{
    max-width:1400px; margin:2.5rem auto 0;
    display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
  }
  .step{ border-top:2px solid var(--ink); padding-top:1.3rem; }
  .step-num{
    font-family:'Instrument Serif',serif; font-size:4.5rem;
    line-height:1; color:var(--rust); font-style:italic;
    margin-bottom:.8rem;
  }
  .step h3{ font-weight:400; font-size:1.5rem; letter-spacing:-.02em; margin-bottom:.5rem; }
  .step p{ color:var(--ink-soft); line-height:1.55; font-size:.95rem; }

  /* FAQ */
  .faq-section{ padding:5rem 2.5rem; border-bottom:1px solid var(--ink); }
  .faq-list{
    max-width:900px; margin:2.5rem auto 0;
    border-top:1px solid var(--ink);
  }
  .faq{
    border-bottom:1px solid var(--ink);
    padding:1.5rem 0;
    cursor:pointer;
  }
  .faq summary{
    list-style:none; cursor:pointer;
    font-family:'Fraunces',serif; font-size:1.25rem;
    font-weight:400; letter-spacing:-.01em;
    display:flex; justify-content:space-between; align-items:center; gap:1rem;
  }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary::after{
    content:'+'; font-family:'Instrument Serif',serif; font-size:1.7rem;
    color:var(--rust); transition:transform .2s;
  }
  .faq[open] summary::after{ content:'−'; }
  .faq p{
    margin-top:.9rem; color:var(--ink-soft); line-height:1.6; font-size:.97rem;
    max-width:65ch;
  }

  /* PRIVACY CALLOUT */
  .privacy{
    padding:5rem 2.5rem; border-bottom:1px solid var(--ink);
    background:var(--ink); color:var(--cream); text-align:center;
  }
  .privacy h2{
    font-weight:300; font-size:clamp(2rem,4.5vw,3.5rem);
    line-height:1.05; letter-spacing:-.03em;
    max-width:900px; margin:0 auto 1.5rem;
  }
  .privacy h2 em{ font-family:'Instrument Serif',serif; font-style:italic; color:var(--rust); }
  .privacy p{
    max-width:600px; margin:0 auto;
    color:rgba(255,248,231,.75); line-height:1.6; font-size:1.05rem;
  }
  .privacy-stats{
    margin-top:3rem; max-width:1000px; margin-left:auto; margin-right:auto;
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:rgba(255,248,231,.2);
  }
  .pstat{ background:var(--ink); padding:2rem 1rem; }
  .pstat-num{
    font-family:'Instrument Serif',serif; font-size:3rem;
    line-height:1; font-style:italic; color:var(--rust);
  }
  .pstat-label{
    font-family:'JetBrains Mono',monospace;
    font-size:.7rem; text-transform:uppercase; letter-spacing:.15em;
    margin-top:.5rem; color:rgba(255,248,231,.7);
  }

  /* FOOTER */
  footer{
    padding:3.5rem 2.5rem 1.5rem;
    background:var(--ink); color:var(--cream);
  }
  .foot-grid{
    max-width:1400px; margin:0 auto;
    display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem;
    padding-bottom:2.5rem;
    border-bottom:1px solid rgba(255,248,231,.2);
  }
  .foot-brand h2{
    font-family:'Instrument Serif',serif; font-size:2.5rem;
    line-height:1; margin-bottom:.8rem; font-style:italic;
  }
  .foot-brand p{ color:rgba(255,248,231,.7); line-height:1.5; max-width:38ch; font-size:.95rem; }
  .foot-col h4{
    font-family:'JetBrains Mono',monospace;
    font-size:.7rem; text-transform:uppercase; letter-spacing:.15em;
    margin-bottom:1rem; color:var(--rust);
  }
  .foot-col ul{ list-style:none; }
  .foot-col ul li{ margin-bottom:.5rem; }
  .foot-col ul a{
    color:rgba(255,248,231,.8); text-decoration:none;
    font-size:.92rem; transition:color .2s;
    cursor:pointer;
  }
  .foot-col ul a:hover{ color:var(--cream); }
  .foot-bottom{
    max-width:1400px; margin:1.5rem auto 0;
    display:flex; justify-content:space-between;
    font-family:'JetBrains Mono',monospace;
    font-size:.68rem; text-transform:uppercase; letter-spacing:.12em;
    color:rgba(255,248,231,.5); flex-wrap:wrap; gap:1rem;
  }

  /* PREVIEW (for edit/sign/addtext tools) */
  .preview-wrap{
    margin-top:1.5rem;
    background:var(--cream-2);
    border:1px solid var(--ink);
    padding:1rem;
    max-height:75vh;
    overflow-y:auto;
  }
  .preview-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding-bottom:.8rem;
    border-bottom:1px solid var(--ink);
    margin-bottom:1rem;
    font-family:'JetBrains Mono',monospace;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    flex-wrap:wrap;
  }
  .preview-toolbar button{
    background:transparent;
    border:1px solid var(--ink);
    padding:.4rem .7rem;
    cursor:pointer;
    font-family:inherit;
    font-size:.7rem;
    text-transform:inherit;
    letter-spacing:inherit;
    color:var(--ink);
  }
  .preview-toolbar button:hover:not(:disabled){background:var(--ink);color:var(--cream);}
  .preview-toolbar button:disabled{opacity:.4;cursor:not-allowed;}
  .preview-page-wrap{
    position:relative;
    margin:0 auto 1rem;
    box-shadow:0 1px 3px rgba(0,0,0,.15);
    background:#fff;
    border:1px solid var(--ink);
  }
  .preview-page-wrap canvas{display:block;cursor:crosshair;max-width:100%;}
  .preview-overlay{
    position:absolute;
    inset:0;
    pointer-events:none;
  }
  .preview-overlay > *{pointer-events:auto;}
  .text-region{
    position:absolute;
    border:1px dashed transparent;
    cursor:text;
    transition:border-color .15s, background .15s;
  }
  .text-region:hover{
    border-color:var(--rust);
    background:rgba(221,90,26,.08);
  }
  .text-region-edit{
    position:absolute;
    background:rgba(255,255,255,.95);
    border:2px solid var(--rust);
    padding:2px;
    font-family:Helvetica, Arial, sans-serif;
    z-index:10;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
  }
  .text-region-edit input,
  .text-region-edit textarea{
    width:100%;
    border:none;
    outline:none;
    padding:0;
    margin:0;
    background:transparent;
    font-family:inherit;
    font-size:inherit;
    color:#000;
    resize:none;
  }
  .placement-marker{
    position:absolute;
    border:2px solid var(--rust);
    background:rgba(221,90,26,.1);
    pointer-events:none;
  }

  /* PLACED ITEMS — signatures, added text */
  .placed-item{
    position:absolute;
    cursor:move;
    user-select:none;
    transition:box-shadow .12s;
  }
  .placed-item:hover{
    outline:2px dashed rgba(221,90,26,.6);
    outline-offset:1px;
  }
  .placed-item.selected{
    outline:2px solid var(--rust);
    outline-offset:0;
    box-shadow:0 2px 12px rgba(0,0,0,.25);
  }
  .placed-item img{
    width:100%; height:100%;
    pointer-events:none;
    -webkit-user-drag:none;
  }
  .placed-text-content{
    display:inline-block;
    line-height:1;
    white-space:nowrap;
    pointer-events:none;
    font-family:Helvetica, Arial, sans-serif;
  }
  /* Resize handles — only visible on selected */
  .placed-handle{
    position:absolute;
    width:14px; height:14px;
    background:var(--cream);
    border:2px solid var(--rust);
    box-shadow:0 1px 3px rgba(0,0,0,.3);
    pointer-events:auto;
    z-index:2;
  }
  .placed-handle.handle-tl{ top:-7px;    left:-7px;    cursor:nwse-resize; }
  .placed-handle.handle-tr{ top:-7px;    right:-7px;   cursor:nesw-resize; }
  .placed-handle.handle-bl{ bottom:-7px; left:-7px;    cursor:nesw-resize; }
  .placed-handle.handle-br{ bottom:-7px; right:-7px;   cursor:nwse-resize; }
  /* Delete button */
  .placed-delete{
    position:absolute;
    top:-14px; right:-14px;
    width:28px; height:28px;
    background:var(--ink);
    color:var(--cream);
    border:2px solid var(--cream);
    border-radius:50%;
    cursor:pointer;
    font-size:18px;
    line-height:1;
    padding:0;
    display:grid;
    place-items:center;
    box-shadow:0 2px 6px rgba(0,0,0,.3);
    z-index:3;
    font-family:'Fraunces',serif;
    font-weight:300;
  }
  .placed-delete:hover{
    background:var(--rust);
  }
  /* Make signatures dim slightly when not selected so handles are obvious */
  .placed-signature:not(.selected){ opacity:.95; }

  /* SIGNATURE PAD */
  .sig-tabs{
    display:flex;
    border:1px solid var(--ink);
    margin-bottom:1rem;
  }
  .sig-tabs button{
    flex:1;
    padding:.7rem;
    background:var(--paper);
    border:none;
    border-right:1px solid var(--ink);
    cursor:pointer;
    font-family:'JetBrains Mono',monospace;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--ink);
  }
  .sig-tabs button:last-child{border-right:none;}
  .sig-tabs button.active{background:var(--ink);color:var(--cream);}
  .sig-pad-wrap{
    border:2px dashed var(--ink);
    background:#fff;
    position:relative;
  }
  .sig-pad-wrap canvas{
    display:block;
    cursor:crosshair;
    width:100%;
    max-width:600px;
    height:160px;
    touch-action:none;
  }
  .sig-pad-hint{
    position:absolute;
    bottom:8px;
    left:50%;
    transform:translateX(-50%);
    font-size:.78rem;
    color:#999;
    pointer-events:none;
    font-style:italic;
  }
  .sig-pad-hint.hidden{display:none;}
  .sig-controls{
    display:flex;
    gap:.5rem;
    margin-top:.5rem;
  }
  .sig-controls button{
    background:transparent;
    border:1px solid var(--ink);
    padding:.5rem .9rem;
    cursor:pointer;
    font-family:'JetBrains Mono',monospace;
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--ink);
  }
  .sig-controls button:hover{background:var(--ink);color:var(--cream);}
  .sig-typed-input{
    width:100%;
    padding:1rem;
    border:1px solid var(--ink);
    background:#fff;
    font-family:'Brush Script MT', cursive;
    font-size:2.2rem;
    text-align:center;
    color:#1a3a8a;
  }
  .sig-typed-preview{
    margin-top:.7rem;
    border:1px dashed var(--ink);
    padding:1.5rem;
    text-align:center;
    background:#fff;
    font-family:'Brush Script MT', cursive;
    font-size:2.5rem;
    color:#1a3a8a;
    min-height:90px;
  }
  .sig-status{
    margin-top:.7rem;
    padding:.7rem .9rem;
    background:var(--paper);
    border:1px solid var(--ink);
    font-family:'JetBrains Mono',monospace;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.1em;
  }
  .sig-status.ready{border-color:var(--success);color:var(--success);}

  /* Tool-specific extras */
  .tool-mini-help{
    background:var(--paper);
    border:1px solid var(--ink);
    padding:.9rem 1.1rem;
    margin-top:1rem;
    font-size:.85rem;
    color:var(--ink-soft);
    line-height:1.5;
  }
  .tool-mini-help strong{color:var(--ink);}

  /* RESPONSIVE */
  @media (max-width:1024px){
    .tools-grid{ grid-template-columns:repeat(3,1fr); }
    .foot-grid{ grid-template-columns:1fr 1fr; }
    .hero-grid{ grid-template-columns:1fr; gap:2rem; }
    .privacy-stats{ grid-template-columns:1fr; }
    .editor-highlight-grid{ grid-template-columns:1fr; gap:3rem; }
    .editor-demo{ transform:none; }
    .feat-grid{ grid-template-columns:1fr; }
    .feat-tabs{ flex-direction:row; flex-wrap:wrap; border-left:none; border-top:1px solid rgba(255,248,231,.2); padding-top:.5rem; }
    .feat-tab{ border-left:none; border-top:2px solid transparent; margin-left:0; margin-top:-1px; padding:.7rem .9rem; }
    .feat-tab.active{ border-left:none; border-top-color:var(--rust); }
  }
  @media (max-width:720px){
    nav{ padding:1rem 1.2rem; }
    .nav-links{ display:none; }
    .hero,.tools-section,.how,.faq-section,.privacy,.editor-highlight,.ad-slot{ padding-left:1.2rem; padding-right:1.2rem; }
    .tools-grid{ grid-template-columns:repeat(2,1fr); }
    .how-grid{ grid-template-columns:1fr; }
    .foot-grid{ grid-template-columns:1fr; gap:2rem; }
    .section-header{ grid-template-columns:1fr; }
    .section-meta{ text-align:left; }
    .modal{ padding:0; }
    .modal-inner{ margin:0; min-height:100vh; border:none; }
    .modal-head{ padding:1.5rem; }
    .modal-body{ padding:1.5rem; }
    .editor-cta-secondary{ display:block; margin:1rem 0 0 0; }
  }

  /* FEATURED TOOLS — premium look */
  .tool-featured{
    background:linear-gradient(135deg, #1a1a1a 0%, #2b2622 100%);
    color:var(--cream);
    border-color:var(--ink);
  }
  .tool-featured:hover{ background:linear-gradient(135deg, #2b2622 0%, #1a1a1a 100%); }
  .tool-featured .tool-num{ color:rgba(255,248,231,.65); }
  .tool-featured .tool-desc{ color:rgba(255,248,231,.75); }
  .tool-featured .tool-icon svg path,
  .tool-featured .tool-icon svg rect,
  .tool-featured .tool-icon svg line,
  .tool-featured .tool-icon svg circle,
  .tool-featured .tool-icon svg text{ stroke:var(--cream); fill:var(--cream); }
  .tool-featured .tool-icon svg text{ stroke:none; fill:var(--cream); }
  .tool-featured::after{ color:var(--cream); }
  .tool-featured .tool-name em{ color:var(--rust); }

  .tool-badge{
    position:absolute;
    top:1rem; right:1rem;
    background:var(--rust);
    color:var(--cream);
    font-family:'JetBrains Mono', monospace;
    font-size:.6rem;
    font-weight:600;
    letter-spacing:.12em;
    padding:.25rem .55rem;
    line-height:1;
    z-index:1;
  }

  /* PDF EDITOR HIGHLIGHT BANNER */
  .editor-highlight{
    padding:5rem 2.5rem;
    border-bottom:1px solid var(--ink);
    background:linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
    position:relative;
    overflow:hidden;
  }
  .editor-highlight-grid{
    max-width:1400px; margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4rem;
    align-items:center;
  }
  .editor-highlight-text h2{
    font-family:'Fraunces',serif;
    font-weight:300;
    font-size:clamp(2.2rem,4.5vw,3.8rem);
    line-height:1; letter-spacing:-.03em;
    margin-bottom:1.2rem;
  }
  .editor-highlight-text h2 em{
    font-family:'Instrument Serif',serif;
    font-style:italic;
    color:var(--rust);
  }
  .editor-highlight-text > p{
    font-size:1.1rem;
    line-height:1.55;
    color:var(--ink-soft);
    margin-bottom:1.8rem;
    max-width:50ch;
  }
  .editor-features{
    list-style:none;
    margin:0 0 2rem 0;
    padding:0;
  }
  .editor-features li{
    padding:.6rem 0;
    border-top:1px solid var(--ink);
    font-size:.95rem;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:.8rem;
    align-items:center;
  }
  .editor-features li:last-child{ border-bottom:1px solid var(--ink); }
  .editor-features .check{
    font-family:'Instrument Serif',serif;
    font-size:1.4rem;
    color:var(--rust);
    line-height:1;
  }
  .editor-cta{
    display:inline-block;
    padding:1rem 1.7rem;
    background:var(--ink);
    color:var(--cream);
    text-decoration:none;
    font-family:'JetBrains Mono',monospace;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-weight:600;
    transition:all .2s;
    border:1px solid var(--ink);
  }
  .editor-cta:hover{ background:var(--rust); border-color:var(--rust); }
  .editor-cta-secondary{
    display:inline-block;
    margin-left:1rem;
    padding:1rem 1.5rem;
    color:var(--ink);
    text-decoration:underline;
    font-family:'JetBrains Mono',monospace;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.18em;
  }

  /* Visual demo of the editor */
  .editor-demo{
    background:#fff;
    border:1px solid var(--ink);
    box-shadow:8px 8px 0 var(--ink);
    padding:2rem 2.5rem;
    font-family:'Fraunces',serif;
    position:relative;
    transform:rotate(-1deg);
  }
  .editor-demo-page{
    background:#fefefe;
    padding:1.5rem;
    border:1px solid #ddd;
    min-height:280px;
    position:relative;
  }
  .editor-demo h3{ font-size:1.1rem; margin-bottom:.8rem; font-weight:500; }
  .editor-demo p{ color:#444; font-size:.95rem; line-height:1.5; margin-bottom:.7rem; }
  .editor-demo .editable{
    background:rgba(221,90,26,.12);
    border:1px dashed var(--rust);
    padding:0 4px;
    cursor:text;
    position:relative;
  }
  .editor-demo .editable::after{
    content:'edit';
    position:absolute;
    top:-22px; left:0;
    font-family:'JetBrains Mono',monospace;
    font-size:.6rem;
    background:var(--rust);
    color:#fff;
    padding:2px 6px;
    letter-spacing:.1em;
    text-transform:uppercase;
  }
  .editor-demo .cursor{
    display:inline-block;
    width:2px; height:1em;
    background:var(--rust);
    vertical-align:middle;
    animation:blink 1s infinite;
  }
  @keyframes blink{ 50%{opacity:0;} }
  .editor-demo .stamp{
    position:absolute;
    top:30%; right:5%;
    color:var(--rust);
    font-family:'Instrument Serif',serif;
    font-size:2.5rem;
    font-weight:700;
    transform:rotate(-12deg);
    border:3px solid var(--rust);
    padding:.2rem 1rem;
    opacity:.85;
  }
  .editor-demo .signature{
    margin-top:1.5rem;
    padding-top:1.5rem;
    border-top:1px solid #ddd;
    font-family:'Brush Script MT', cursive;
    font-size:1.8rem;
    color:#1a3a8a;
    font-style:italic;
  }

  /* INTERACTIVE FEATURES BANNER */
  .feat-banner{
    padding:5rem 2.5rem;
    border-bottom:1px solid var(--ink);
    background:var(--ink);
    color:var(--cream);
    overflow:hidden;
  }
  .feat-banner-inner{
    max-width:1400px;
    margin:0 auto;
  }
  .feat-banner h2{
    font-family:'Fraunces',serif;
    font-weight:300;
    font-size:clamp(2rem,4vw,3rem);
    line-height:1;
    letter-spacing:-.02em;
    margin-bottom:.6rem;
  }
  .feat-banner h2 em{
    font-family:'Instrument Serif',serif;
    font-style:italic;
    color:var(--rust);
  }
  .feat-banner-sub{
    color:rgba(255,248,231,.7);
    margin-bottom:2.5rem;
    font-size:1rem;
    max-width:55ch;
  }
  .feat-grid{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:2rem;
    align-items:flex-start;
  }
  .feat-tabs{
    display:flex;
    flex-direction:column;
    gap:.3rem;
    list-style:none;
    padding:0;
    border-left:1px solid rgba(255,248,231,.2);
  }
  .ptp-app .feat-tab{
    background:transparent;
    border:none;
    border-left:2px solid transparent;
    color:rgba(255,248,231,.6);
    text-align:left;
    padding:.85rem 1.2rem;
    cursor:pointer;
    font-family:'Fraunces',serif;
    font-size:1.05rem;
    font-weight:400;
    margin-left:-1px;
    transition:all .15s;
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:1rem !important;
    width:100%;
  }
  .ptp-app .feat-tab:hover{
    color:var(--cream);
    border-left-color:rgba(221,90,26,.5);
  }
  .ptp-app .feat-tab.active{
    color:var(--cream);
    border-left-color:var(--rust);
    background:rgba(221,90,26,.08);
  }
  .ptp-app .feat-tab .feat-tab-num{
    font-family:'JetBrains Mono',monospace;
    font-size:.65rem;
    letter-spacing:.15em;
    color:rgba(255,248,231,.4);
    flex-shrink:0;
  }
  .ptp-app .feat-tab.active .feat-tab-num{ color:var(--rust); }

  .feat-stage{
    background:var(--cream);
    color:var(--ink);
    padding:2.5rem;
    min-height:420px;
    position:relative;
    overflow:hidden;
  }
  .feat-stage-content{
    display:none;
    animation:feat-fade .3s ease-out;
  }
  .feat-stage-content.active{
    display:block;
  }
  @keyframes feat-fade{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .feat-stage-num{
    font-family:'JetBrains Mono',monospace;
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.18em;
    color:var(--rust);
    margin-bottom:.6rem;
  }
  .feat-stage h3{
    font-family:'Fraunces',serif;
    font-weight:400;
    font-size:1.8rem;
    letter-spacing:-.02em;
    margin-bottom:.6rem;
  }
  .feat-stage h3 em{
    font-family:'Instrument Serif',serif;
    font-style:italic;
    color:var(--rust);
  }
  .feat-stage > .feat-stage-content > p{
    color:var(--ink-soft);
    line-height:1.55;
    margin-bottom:1.2rem;
    max-width:55ch;
    font-size:.97rem;
  }
  .feat-cta{
    display:inline-block;
    margin-top:.5rem;
    padding:.7rem 1.3rem;
    background:var(--ink);
    color:var(--cream);
    text-decoration:none;
    font-family:'JetBrains Mono',monospace;
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.15em;
    border:1px solid var(--ink);
    transition:all .15s;
  }
  .feat-cta:hover{
    background:var(--rust);
    border-color:var(--rust);
  }

  /* Mini-demos inside feature stage */
  .feat-demo{
    margin-top:1.5rem;
    padding:1.4rem;
    background:#fff;
    border:1px solid var(--ink);
    box-shadow:4px 4px 0 var(--ink);
    font-family:Helvetica, Arial, sans-serif;
    font-size:.95rem;
    color:#222;
    position:relative;
    min-height:180px;
  }
  .feat-demo .demo-line{
    padding:.3rem 0;
  }
  .feat-demo .demo-old{
    text-decoration:line-through;
    color:#999;
  }
  .feat-demo .demo-new{
    color:var(--rust);
    font-weight:500;
    background:rgba(221,90,26,.1);
    padding:0 4px;
    animation:type-in 1.5s steps(20) infinite;
  }
  @keyframes type-in{
    0%{ width:0; }
    50%, 100%{ width:auto; }
  }
  .feat-demo .demo-handles{
    position:absolute;
    border:2px solid var(--rust);
    background:rgba(221,90,26,.04);
    pointer-events:none;
  }
  .feat-demo .demo-handles::before,
  .feat-demo .demo-handles::after{
    content:'';
    position:absolute;
    width:10px; height:10px;
    background:#fff;
    border:2px solid var(--rust);
  }
  .feat-demo .demo-handles::before{ top:-6px; left:-6px; }
  .feat-demo .demo-handles::after{ bottom:-6px; right:-6px; }
  .feat-demo .demo-sig{
    font-family:'Brush Script MT', cursive;
    color:#1a3a8a;
    font-size:1.8rem;
    line-height:1;
    font-style:italic;
  }
  .feat-demo .demo-stamp{
    position:absolute;
    color:var(--rust);
    font-family:'Instrument Serif',serif;
    font-size:1.6rem;
    font-weight:700;
    transform:rotate(-12deg);
    border:2px solid var(--rust);
    padding:.2rem .8rem;
  }
  .feat-demo .demo-pages{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
  }
  .feat-demo .demo-pages .page-mini{
    width:50px; height:65px;
    background:#f9f5ee;
    border:1px solid var(--ink);
    position:relative;
    font-family:'Fraunces',serif;
    font-size:.6rem;
    display:grid; place-items:center;
    color:#888;
  }
  .feat-demo .demo-pages .page-mini.highlight{
    background:var(--rust);
    color:#fff;
    border-color:var(--rust);
  }
  .feat-demo .demo-bar{
    height:14px;
    background:linear-gradient(90deg, var(--rust) 0%, var(--rust) 80%, transparent 80%, transparent 100%);
    border:1px solid var(--ink);
    position:relative;
  }
  .feat-demo .demo-bar.before{
    background:linear-gradient(90deg, var(--ink) 0%, var(--ink) 100%);
  }
  .feat-demo .demo-arrow{
    text-align:center;
    font-family:'Instrument Serif',serif;
    font-size:2rem;
    color:var(--rust);
    margin:.5rem 0;
  }
  .feat-demo .demo-rotate{
    width:80px; height:100px;
    background:#fdfbf5;
    border:1px solid var(--ink);
    margin:0 auto;
    transform-origin:center;
    animation:demo-rot 4s ease-in-out infinite;
    display:grid; place-items:center;
    font-family:'Fraunces',serif;
    font-size:.7rem;
    color:#888;
  }
  @keyframes demo-rot{
    0%, 20%{ transform:rotate(0deg); }
    35%, 55%{ transform:rotate(90deg); }
    70%, 90%{ transform:rotate(180deg); }
    100%{ transform:rotate(0deg); }
  }
  .feat-demo .demo-watermark{
    position:absolute;
    inset:0;
    display:grid; place-items:center;
    font-family:'Instrument Serif',serif;
    font-size:3rem;
    font-style:italic;
    color:var(--rust);
    opacity:.25;
    transform:rotate(-30deg);
    pointer-events:none;
  }
  .feat-demo .demo-numbers{
    text-align:center;
    font-family:'JetBrains Mono',monospace;
    font-size:.85rem;
    color:#666;
    margin-top:1rem;
  }

  /* AD SLOTS */
  .ad-slot{
    margin:0 auto;
    padding:2rem 2.5rem;
    text-align:center;
    background:var(--cream);
    border-top:1px solid rgba(26,26,26,.1);
    border-bottom:1px solid rgba(26,26,26,.1);
  }
  .ad-slot-inner{
    max-width:1400px;
    margin:0 auto;
  }
  .ad-label{
    font-family:'JetBrains Mono',monospace;
    font-size:.62rem;
    text-transform:uppercase;
    letter-spacing:.18em;
    color:var(--ink-soft);
    margin-bottom:.6rem;
    opacity:.6;
  }
  .ad-placeholder{
    background:var(--paper);
    border:1px dashed rgba(26,26,26,.3);
    padding:3rem 1rem;
    color:var(--ink-soft);
    font-family:'JetBrains Mono',monospace;
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    min-height:120px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .ad-placeholder.banner{ min-height:90px; }
  .ad-placeholder.large{ min-height:250px; }

  /* Screen-reader only */
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
/* =====================================================================
 * MOBILE-FIRST FIXES (added in v2.0)
 * =================================================================== */

/* Tablet ≤960px */
@media (max-width: 960px) {
  .ptp-app .hero-title { font-size: clamp(2.4rem, 6vw, 3.6rem) !important; line-height: 1.05 !important; }
  .ptp-app .editor-highlight { padding: 3rem 1.5rem !important; }
  .ptp-app .editor-highlight h2 { font-size: clamp(1.8rem, 5vw, 2.6rem) !important; }
  .ptp-app .feat-banner { padding: 3rem 1.5rem !important; }
  .ptp-app .tools-section { padding: 3rem 1.5rem !important; }
  .ptp-app .hero { padding: 3rem 1.5rem !important; }
  .ptp-app .privacy { padding: 3rem 1.5rem !important; }
  .ptp-app .how { padding: 3rem 1.5rem !important; }
  .ptp-app .faq-section { padding: 3rem 1.5rem !important; }
  .ptp-app footer { padding: 2.5rem 1.5rem 1.5rem !important; }
  .ptp-app .ad-slot { padding: 1rem 1.5rem !important; }
}

/* Phone ≤640px */
@media (max-width: 640px) {
  .ptp-app nav { padding: 0.8rem 1rem !important; flex-wrap: wrap !important; }
  .ptp-app .nav-links { display: none !important; }
  .ptp-app .hero { padding: 2rem 1rem !important; }
  .ptp-app .hero-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .ptp-app .hero-title {
    font-size: clamp(2rem, 9vw, 2.6rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }
  .ptp-app .hero-meta { font-size: 0.6rem !important; flex-wrap: wrap !important; }
  .ptp-app .hero-side p { font-size: 0.95rem !important; }
  .ptp-app .badges { gap: 4px !important; }
  .ptp-app .badges span {
    font-size: 0.55rem !important;
    padding: 4px 6px !important;
  }

  /* Tool grid — 2 columns on phones, badges stay tight */
  .ptp-app .tools-section { padding: 2rem 1rem !important; }
  .ptp-app .tools-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ptp-app .tool {
    padding: 1rem 0.75rem !important;
    min-height: 130px !important;
  }
  .ptp-app .tool-name {
    font-size: 1rem !important;
    line-height: 1.1 !important;
  }
  .ptp-app .tool-desc {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ptp-app .tool-icon { margin-bottom: 0.5rem !important; }
  .ptp-app .tool-icon svg { width: 26px !important; height: 26px !important; }
  .ptp-app .tool-num { font-size: 0.55rem !important; margin-bottom: 0.4rem !important; }
  .ptp-app .tool-badge {
    top: 0.4rem !important;
    right: 0.4rem !important;
    font-size: 0.5rem !important;
    padding: 0.15rem 0.35rem !important;
  }

  /* Editor highlight section */
  .ptp-app .editor-highlight { padding: 2.5rem 1rem !important; }
  .ptp-app .editor-highlight-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .ptp-app .editor-highlight-text h2 {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
    line-height: 1.1 !important;
  }
  .ptp-app .editor-highlight-text > p { font-size: 0.95rem !important; }
  .ptp-app .editor-features li {
    padding: 0.5rem 0 !important;
    font-size: 0.85rem !important;
    grid-template-columns: auto 1fr !important;
  }
  .ptp-app .editor-cta {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    padding: 0.85rem 1rem !important;
    font-size: 0.7rem !important;
    margin-bottom: 0.5rem !important;
  }
  .ptp-app .editor-cta-secondary {
    display: block !important;
    margin: 0.5rem 0 0 0 !important;
    text-align: center !important;
    padding: 0.7rem !important;
  }
  .ptp-app .editor-demo {
    padding: 1.2rem 1.4rem !important;
    transform: none !important;
    box-shadow: 4px 4px 0 var(--ink) !important;
  }

  /* Features banner — mobile: tabs go horizontal-scroll */
  .ptp-app .feat-banner { padding: 2.5rem 1rem !important; }
  .ptp-app .feat-banner h2 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.1 !important;
  }
  .ptp-app .feat-banner-sub { font-size: 0.85rem !important; margin-bottom: 1.5rem !important; }
  .ptp-app .feat-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .ptp-app .feat-tabs {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    border-left: none !important;
    border-bottom: 1px solid rgba(255, 248, 231, 0.2) !important;
    padding-bottom: 0 !important;
    margin-bottom: -1px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
  }
  .ptp-app .feat-tabs::-webkit-scrollbar { height: 3px; }
  .ptp-app .feat-tabs::-webkit-scrollbar-thumb { background: rgba(221, 90, 26, 0.5); }
  .ptp-app .feat-tab {
    flex: 0 0 auto !important;
    border-left: none !important;
    border-bottom: 2px solid transparent !important;
    margin-left: 0 !important;
    margin-bottom: -1px !important;
    padding: 0.6rem 0.9rem !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    flex-direction: column !important;
    gap: 2px !important;
    text-align: center !important;
  }
  .ptp-app .feat-tab.active {
    border-left: none !important;
    border-bottom-color: var(--rust) !important;
  }
  .ptp-app .feat-tab-num { font-size: 0.55rem !important; }
  .ptp-app .feat-stage {
    padding: 1.5rem !important;
    min-height: 320px !important;
  }
  .ptp-app .feat-stage h3 {
    font-size: 1.3rem !important;
    line-height: 1.15 !important;
  }
  .ptp-app .feat-demo { padding: 1rem !important; font-size: 0.85rem !important; }

  /* How it works */
  .ptp-app .how-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .ptp-app .how-step h3 { font-size: 1.1rem !important; }

  /* Privacy */
  .ptp-app .privacy h2 {
    font-size: clamp(1.5rem, 6vw, 2.2rem) !important;
    line-height: 1.1 !important;
  }
  .ptp-app .privacy-stats { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .ptp-app .pstat-num { font-size: 2.5rem !important; }

  /* FAQ */
  .ptp-app .faq-section { padding: 2.5rem 1rem !important; }
  .ptp-app .faq summary {
    font-size: 0.95rem !important;
    padding: 1rem 0 !important;
  }
  .ptp-app .faq p {
    font-size: 0.9rem !important;
    padding-bottom: 1rem !important;
  }

  /* Section headers */
  .ptp-app .section-header {
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
  }
  .ptp-app .section-meta { text-align: left !important; }
  .ptp-app .section-title {
    font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
    line-height: 1.05 !important;
  }

  /* Modal — full screen on phone */
  .ptp-app .modal { padding: 0 !important; }
  .ptp-app .modal-inner {
    margin: 0 !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    border: none !important;
    border-radius: 0 !important;
  }
  .ptp-app .modal-head { padding: 1.2rem 1rem !important; }
  .ptp-app .modal-head h2 { font-size: 1.3rem !important; }
  .ptp-app .modal-body { padding: 1rem !important; }
  .ptp-app .drop-zone {
    padding: 2rem 1rem !important;
    font-size: 0.9rem !important;
  }
  .ptp-app .file-list-item { padding: 0.6rem 0.8rem !important; font-size: 0.85rem !important; }
  .ptp-app input[type="text"],
  .ptp-app input[type="number"],
  .ptp-app textarea,
  .ptp-app select {
    font-size: 16px !important;  /* prevents iOS zoom on focus */
    padding: 0.7rem !important;
  }
  .ptp-app button.btn-primary {
    padding: 0.85rem 1.2rem !important;
    font-size: 0.8rem !important;
    width: 100% !important;
  }
  .ptp-app .preview-page-wrap {
    width: 100% !important;
    height: auto !important;
  }
  .ptp-app .preview-page-wrap canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Marquee */
  .ptp-app .strip { padding: 0.5rem 0 !important; font-size: 0.7rem !important; }

  /* Footer */
  .ptp-app footer { padding: 2rem 1rem 1.5rem !important; }
  .ptp-app .foot-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .ptp-app .foot-brand h2 { font-size: 2rem !important; }
  .ptp-app .foot-bottom {
    flex-direction: column !important;
    gap: 0.5rem !important;
    text-align: center !important;
  }

  /* Ad slots */
  .ptp-app .ad-slot { padding: 0.8rem 1rem !important; }
  .ptp-app .ad-placeholder {
    padding: 1.5rem 0.5rem !important;
    font-size: 0.65rem !important;
    min-height: 90px !important;
  }
}

/* Very small phones ≤380px */
@media (max-width: 380px) {
  .ptp-app .hero-title { font-size: 1.8rem !important; }
  .ptp-app .tools-grid { grid-template-columns: 1fr 1fr !important; gap: 0 !important; }
  .ptp-app .tool { padding: 0.8rem 0.6rem !important; min-height: 110px !important; }
  .ptp-app .tool-name { font-size: 0.9rem !important; }
}

/* Touch-friendly tap targets — apply on any touch device */
@media (hover: none) and (pointer: coarse) {
  .ptp-app .tool { min-height: 130px !important; }
  .ptp-app button,
  .ptp-app .feat-tab,
  .ptp-app .editor-cta {
    min-height: 44px !important;  /* Apple/Google guideline */
  }
  .ptp-app .placed-handle {
    width: 20px !important;
    height: 20px !important;
  }
  .ptp-app .placed-delete {
    width: 36px !important;
    height: 36px !important;
    font-size: 22px !important;
  }
}

/* =====================================================================
 * FIT-TO-PAGE MOBILE GUARANTEE (v3.1)
 * Ensures NO horizontal overflow at any mobile width.
 * =================================================================== */

/* Apply to anywhere the plugin renders */
.ptp-app,
.ptp-app * {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* Prevent any element from causing horizontal scroll on mobile */
@media (max-width: 768px) {
  body.ptp-page,
  body.ptp-page .ptp-app {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  .ptp-app img,
  .ptp-app svg,
  .ptp-app video,
  .ptp-app iframe {
    max-width: 100% !important;
    height: auto !important;
  }
  .ptp-app pre,
  .ptp-app code {
    word-break: break-word !important;
    white-space: pre-wrap !important;
  }
  .ptp-app .strip {
    overflow: hidden !important;
  }
  /* Ensure all sections have consistent mobile padding */
  .ptp-app .hero,
  .ptp-app .editor-highlight,
  .ptp-app .feat-banner,
  .ptp-app .tools-section,
  .ptp-app .how,
  .ptp-app .privacy,
  .ptp-app .faq-section,
  .ptp-app footer,
  .ptp-app nav {
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Tool grid must never overflow */
  .ptp-app .tools-grid {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Modals fit screen */
  .ptp-app .modal-inner {
    width: 100% !important;
    max-width: 100vw !important;
  }
  /* Long words don't break layout */
  .ptp-app h1,
  .ptp-app h2,
  .ptp-app h3,
  .ptp-app .hero-title,
  .ptp-app .section-title {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  /* Footer columns stack cleanly */
  .ptp-app .foot-grid {
    width: 100% !important;
  }
  /* Demo content in features banner */
  .ptp-app .feat-demo {
    overflow-x: auto !important;
    max-width: 100% !important;
  }
}

/* Ultra-narrow phones — make absolutely sure nothing overflows */
@media (max-width: 360px) {
  .ptp-app .hero,
  .ptp-app .editor-highlight,
  .ptp-app .feat-banner,
  .ptp-app .tools-section,
  .ptp-app .how,
  .ptp-app .privacy,
  .ptp-app .faq-section,
  .ptp-app footer,
  .ptp-app nav {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .ptp-app .hero-title { font-size: 1.7rem !important; }
  .ptp-app .section-title { font-size: 1.4rem !important; }
}

/* =====================================================================
 * BUILD VERIFICATION MARKER (visible in DevTools → Elements → body)
 * If this is present in computed styles, you're seeing v3.1+.
 * =================================================================== */
.ptp-app::before {
  content: "" !important;
  display: none;
  /* Build: pdfkit-suite-v3.1-light-palette */
}

/* =====================================================================
 * ANIMATED PREVIEW DEMO (v3.3)
 * =================================================================== */

.ptp-app .anim-demo-section {
  padding: 4rem 2.5rem;
  background: var(--cream);
  border-bottom: 1px solid var(--ink);
}
.ptp-app .anim-demo-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.ptp-app .anim-demo-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--ink);
}
.ptp-app .anim-demo-header h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
}
.ptp-app .anim-demo-header h2 em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: var(--rust);
  font-weight: 400;
}
.ptp-app .anim-demo-sub {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0;
}
.ptp-app .anim-demo-controls {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
}
.ptp-app .anim-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-size: 16px;
  display: grid;
  place-items: center;
  transition: all 0.15s;
  font-family: inherit;
}
.ptp-app .anim-btn:hover {
  background: var(--ink);
  color: var(--cream);
}
.ptp-app .anim-btn.is-paused::after {
  content: '►';
  font-size: 12px;
}
.ptp-app .anim-btn.is-paused {
  font-size: 0;
}
.ptp-app .anim-step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--ink-soft);
  letter-spacing: 0.1em;
  padding: 0 0.5rem;
  min-width: 50px;
  text-align: center;
}

/* Stage */
.ptp-app .anim-stage {
  position: relative;
  background: #fff;
  border: 1px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  min-height: 400px;
  overflow: hidden;
}
.ptp-app .anim-step {
  position: absolute;
  inset: 0;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.ptp-app .anim-step.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.ptp-app .anim-step-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--rust);
  margin-bottom: 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px dashed var(--ink);
}
.ptp-app .anim-canvas {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Cursor pointer */
.ptp-app .anim-cursor {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: 10;
  transform: translate(-2px, -2px);
}
.ptp-app .anim-cursor::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 14px solid var(--ink);
  transform: rotate(-30deg);
  transform-origin: top left;
  filter: drop-shadow(1px 1px 0 #fff);
}
.ptp-app .anim-step.active .anim-cursor {
  animation: anim-cursor-tap 2s ease-in-out infinite;
}
@keyframes anim-cursor-tap {
  0%, 100% { transform: translate(-2px, -2px) scale(1); }
  10% { transform: translate(-2px, -2px) scale(0.85); }
  20% { transform: translate(-2px, -2px) scale(1); }
}
.ptp-app .anim-cursor-drag {
  animation: anim-cursor-drag 3s ease-in-out infinite !important;
}
@keyframes anim-cursor-drag {
  0% { left: 30%; top: 65%; }
  40% { left: 55%; top: 65%; }
  60% { left: 55%; top: 65%; }
  100% { left: 30%; top: 65%; }
}

/* Step 1: drop zone with file flying in */
.ptp-app .anim-dropzone {
  border: 2px dashed var(--rust);
  background: rgba(221, 90, 26, 0.04);
  width: 80%;
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.ptp-app .anim-dropzone-icon {
  font-size: 3rem;
  color: var(--rust);
  margin-bottom: 0.6rem;
  line-height: 1;
}
.ptp-app .anim-dropzone-text {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.4rem;
  margin-bottom: 0.3rem;
}
.ptp-app .anim-dropzone-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-soft);
}
.ptp-app .anim-file-flying {
  position: absolute;
  background: #fff;
  border: 1px solid var(--ink);
  padding: 0.5rem 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  box-shadow: 2px 2px 0 var(--ink);
  --start-x: 110%;
  --start-y: -20%;
  --end-x: 30%;
  --end-y: 35%;
  transform: translate(var(--start-x), var(--start-y));
  opacity: 0;
}
.ptp-app .anim-step.active .anim-file-flying {
  animation: anim-file-fly 4s ease-in-out infinite;
}
@keyframes anim-file-fly {
  0% { transform: translate(var(--start-x), var(--start-y)); opacity: 0; }
  20% { opacity: 1; }
  60% { transform: translate(var(--end-x), var(--end-y)); opacity: 1; }
  75% { transform: translate(var(--end-x), var(--end-y)) scale(0.8); opacity: 0.5; }
  85%, 100% { transform: translate(var(--end-x), var(--end-y)) scale(0.8); opacity: 0; }
}
.ptp-app .anim-file-icon {
  font-size: 1rem;
  filter: grayscale(0.5);
}

/* Step 2: PDF preview with editable text */
.ptp-app .anim-pdf-preview {
  background: #fefefe;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.05);
  padding: 2rem 2.5rem;
  width: 80%;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem;
  line-height: 1.6;
  position: relative;
  min-height: 220px;
}
.ptp-app .anim-pdf-line {
  padding: 0.4rem 0;
  color: #333;
}
.ptp-app .anim-edit-target {
  background: rgba(221, 90, 26, 0.08);
  border-bottom: 1px dashed var(--rust);
  padding: 0 4px;
  cursor: text;
  position: relative;
}
.ptp-app .anim-being-edited {
  background: rgba(221, 90, 26, 0.18);
  border: 1px solid var(--rust);
  border-bottom-style: solid;
}
.ptp-app .anim-text-old {
  text-decoration: line-through;
  color: #999;
  margin-right: 0.5rem;
}
.ptp-app .anim-text-new {
  color: var(--rust);
  font-weight: 500;
}
.ptp-app .anim-step.active .anim-text-old {
  animation: anim-fade-out 3s ease-in-out infinite;
}
.ptp-app .anim-step.active .anim-text-new {
  animation: anim-fade-in 3s ease-in-out infinite;
}
@keyframes anim-fade-out {
  0%, 30% { opacity: 1; }
  60%, 100% { opacity: 0; display: none; }
}
@keyframes anim-fade-in {
  0%, 40% { opacity: 0; transform: translateX(-10px); }
  70%, 100% { opacity: 1; transform: translateX(0); }
}

/* Step 3: signature with handles */
.ptp-app .anim-sig-container {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #ddd;
  position: relative;
  min-height: 80px;
}
.ptp-app .anim-sig-box {
  display: inline-block;
  position: relative;
  padding: 0.8rem 1.4rem;
  border: 2px solid var(--rust);
  background: rgba(221, 90, 26, 0.04);
  margin-left: 30%;
}
.ptp-app .anim-step.active .anim-sig-box {
  animation: anim-sig-resize 4s ease-in-out infinite;
}
@keyframes anim-sig-resize {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.ptp-app .anim-signature {
  font-family: 'Brush Script MT', cursive;
  font-size: 1.6rem;
  font-style: italic;
  color: #1a3a8a;
  line-height: 1;
}
.ptp-app .anim-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid var(--rust);
}
.ptp-app .anim-handle-tl { top: -6px; left: -6px; }
.ptp-app .anim-handle-tr { top: -6px; right: -6px; }
.ptp-app .anim-handle-bl { bottom: -6px; left: -6px; }
.ptp-app .anim-handle-br { bottom: -6px; right: -6px; }

/* Step 4: compress demo */
.ptp-app .anim-compress-demo {
  width: 80%;
  font-family: 'Fraunces', Georgia, serif;
}
.ptp-app .anim-compress-row {
  display: grid;
  grid-template-columns: 80px 1fr 100px;
  gap: 12px;
  align-items: center;
  margin-bottom: 0.8rem;
}
.ptp-app .anim-compress-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.ptp-app .anim-compress-bar {
  height: 18px;
  border: 1px solid var(--ink);
}
.ptp-app .anim-compress-bar-before {
  background: var(--ink);
  width: 100%;
}
.ptp-app .anim-compress-bar-after {
  background: var(--rust);
  width: 0;
}
.ptp-app .anim-step.active .anim-compress-bar-after {
  animation: anim-shrink 3s ease-out infinite;
}
@keyframes anim-shrink {
  0% { width: 100%; }
  60%, 100% { width: 17%; }
}
.ptp-app .anim-compress-size {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: right;
}
.ptp-app .anim-compress-size-after {
  color: var(--rust);
}
.ptp-app .anim-compress-arrow {
  text-align: center;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.8rem;
  color: var(--rust);
  margin: 0.3rem 0;
}
.ptp-app .anim-compress-savings {
  margin-top: 1.2rem;
  text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.6rem;
  font-style: italic;
  color: var(--rust);
}
.ptp-app .anim-step.active .anim-compress-savings {
  animation: anim-pop-in 3s ease-out infinite;
}
@keyframes anim-pop-in {
  0%, 60% { opacity: 0; transform: scale(0.7); }
  80%, 100% { opacity: 1; transform: scale(1); }
}

/* Step 5: download */
.ptp-app .anim-download-demo {
  width: 80%;
  text-align: center;
}
.ptp-app .anim-download-file {
  background: #fff;
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 1rem 1.4rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  text-align: left;
  margin-bottom: 1.2rem;
}
.ptp-app .anim-step.active .anim-download-file {
  animation: anim-bounce-in 3s ease-out infinite;
}
@keyframes anim-bounce-in {
  0%, 20% { opacity: 0; transform: translateY(-30px); }
  40%, 100% { opacity: 1; transform: translateY(0); }
}
.ptp-app .anim-download-icon {
  font-size: 2rem;
}
.ptp-app .anim-download-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 500;
}
.ptp-app .anim-download-size {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--ink-soft);
}
.ptp-app .anim-download-check {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--rust);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: bold;
}
.ptp-app .anim-download-message {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--ink);
}

/* Progress bar at bottom */
.ptp-app .anim-progress {
  margin-top: 1rem;
  height: 3px;
  background: rgba(26, 26, 26, 0.1);
  position: relative;
  overflow: hidden;
}
.ptp-app .anim-progress-fill {
  position: absolute;
  inset: 0;
  background: var(--rust);
  width: 0;
  transition: width 0.1s linear;
}

/* =====================================================================
 * VISITOR COUNTER (v3.3)
 * =================================================================== */
.ptp-app .visit-counter {
  background: var(--ink);
  color: var(--cream);
  padding: 1.5rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--ink);
}
.ptp-app .visit-counter-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 900px;
  width: 100%;
}
.ptp-app .visit-counter-item {
  text-align: center;
  flex: 1 1 130px;
  min-width: 100px;
}
.ptp-app .visit-counter-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 300;
  line-height: 1;
  color: var(--rust);
  margin-bottom: 0.3rem;
}
.ptp-app .visit-counter-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 248, 231, 0.7);
}
.ptp-app .visit-counter-divider {
  width: 1px;
  height: 30px;
  background: rgba(255, 248, 231, 0.2);
}

/* =====================================================================
 * MOBILE — animated demo and counter
 * =================================================================== */
@media (max-width: 768px) {
  .ptp-app .anim-demo-section { padding: 2.5rem 1rem !important; }
  .ptp-app .anim-demo-header {
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: left;
  }
  .ptp-app .anim-demo-controls {
    justify-self: start;
  }
  .ptp-app .anim-stage {
    min-height: 340px;
    box-shadow: 4px 4px 0 var(--ink);
  }
  .ptp-app .anim-step { padding: 1.2rem; }
  .ptp-app .anim-pdf-preview { padding: 1.2rem; font-size: 0.85rem; width: 100%; }
  .ptp-app .anim-compress-demo { width: 100%; }
  .ptp-app .anim-compress-row { grid-template-columns: 60px 1fr 70px; gap: 8px; }
  .ptp-app .anim-compress-size { font-size: 0.7rem; }
  .ptp-app .anim-download-demo { width: 100%; }
  .ptp-app .visit-counter { padding: 1.2rem 1rem !important; }
  .ptp-app .visit-counter-inner { gap: 1rem; }
  .ptp-app .visit-counter-divider { display: none; }
  .ptp-app .visit-counter-item { flex: 1 1 45%; }
}

/* On small screens, mobile viewers should TAP to advance — no autoplay */
@media (hover: none) and (pointer: coarse) {
  .ptp-app .anim-stage {
    cursor: pointer;
  }
}

/* ============================================================
 * v5.0 — All-in-One section + Comparison table (Folio palette)
 * ============================================================ */

/* === All your PDF tools in one place === */
.ptp-app .all-in-one {
  background: var(--cream-2);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: 5rem 2rem;
  margin: 4rem 0;
}
.ptp-app .all-in-one-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.ptp-app .aio-eyebrow {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--rust);
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}
.ptp-app .all-in-one h2 {
  font-size: clamp(2.2rem, 5vw, 3.6rem) !important;
  line-height: 1.05;
  font-weight: 500;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ptp-app .all-in-one h2 em {
  color: var(--rust-deep);
  font-style: italic;
}
.ptp-app .aio-lede {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 720px;
  margin: 0 auto 3rem;
  font-family: 'Instrument Serif', Georgia, serif !important;
}
.ptp-app .aio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
  margin-bottom: 3.5rem;
}
.ptp-app .aio-stat {
  padding: 2rem 1rem;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  text-align: center;
}
.ptp-app .aio-num {
  font-family: 'Fraunces', serif !important;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1;
  color: var(--rust-deep);
  margin-bottom: 0.5rem;
}
.ptp-app .aio-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ptp-app .aio-categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  text-align: left;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}
.ptp-app .aio-cat {
  padding: 1.75rem 1.5rem;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}
.ptp-app .aio-cat h3 {
  font-family: 'Fraunces', serif !important;
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--ink);
  font-style: italic;
}
.ptp-app .aio-cat p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* === Comparison table === */
.ptp-app .comparison {
  padding: 4rem 2rem;
  border-top: 2px solid var(--ink);
  background: var(--cream);
}
.ptp-app .comparison-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.ptp-app .comparison-lede {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin-bottom: 2rem;
  max-width: 700px;
}
.ptp-app .comparison-table-wrap {
  overflow-x: auto;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.ptp-app .comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Fraunces', serif !important;
  font-size: 0.95rem;
}
.ptp-app .comparison-table thead th {
  background: var(--ink);
  color: var(--cream);
  padding: 1rem 0.85rem;
  text-align: left;
  font-weight: 500;
  border-right: 1px solid var(--ink-soft);
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ptp-app .comparison-table thead th.cmp-us {
  background: var(--rust-deep);
  color: var(--cream);
}
.ptp-app .comparison-table tbody td {
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid rgba(26, 26, 26, 0.12);
  border-right: 1px solid rgba(26, 26, 26, 0.06);
  color: var(--ink-soft);
  vertical-align: middle;
}
.ptp-app .comparison-table tbody td:first-child {
  font-weight: 500;
  color: var(--ink);
}
.ptp-app .comparison-table tbody td.cmp-us {
  background: rgba(221, 90, 26, 0.08);
  color: var(--ink);
  font-weight: 500;
}
.ptp-app .comparison-table tbody tr:hover {
  background: rgba(255, 248, 231, 0.5);
}
.ptp-app .comparison-table tbody tr:last-child td {
  border-bottom: none;
}
.ptp-app .comparison-honesty {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--cream-2);
  border-left: 4px solid var(--gold);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.ptp-app .comparison-honesty strong {
  color: var(--gold);
  font-weight: 600;
}

/* === New tool badges (NEW) === */
.ptp-app .tool-badge {
  /* Adobe NEW vs other badges — style matches existing badge tokens */
}
.ptp-app .tool-badge:not(.tool-badge-static):where([data-badge="NEW"]),
.ptp-app .tool .tool-badge {
  /* Inherit base badge style */
}

/* Responsive */
@media (max-width: 800px) {
  .ptp-app .aio-grid { grid-template-columns: repeat(2, 1fr); }
  .ptp-app .aio-categories { grid-template-columns: 1fr; }
  .ptp-app .all-in-one { padding: 3rem 1rem; }
  .ptp-app .comparison { padding: 3rem 1rem; }
  .ptp-app .comparison-table { font-size: 0.85rem; }
  .ptp-app .comparison-table thead th,
  .ptp-app .comparison-table tbody td { padding: 0.6rem 0.5rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ptp-app .all-in-one *, .ptp-app .comparison * {
    transition: none !important;
    animation: none !important;
  }
}