/* =========================================================
     UX IMPROVEMENTS — preserves existing functionality/design
     ========================================================= */
  .ir-flow-steps{
    display:flex;
    align-items:center;
    gap:4px;
    margin:-4px 0 20px;
    padding:14px 16px;
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    background:var(--surface);
    overflow-x:auto;
    scrollbar-width:none;
  }
  .ir-flow-steps::-webkit-scrollbar{display:none}
  .ir-flow-step{
    display:inline-flex;
    align-items:center;
    gap:9px;
    flex:0 0 auto;
    color:var(--muted-2);
    font-size:.82rem;
    font-weight:700;
    white-space:nowrap;
    transition:color .2s ease;
  }
  .ir-flow-step b{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--white);
    border:2px solid var(--line);
    color:var(--muted-2);
    font-family:var(--font-mono);
    font-size:.74rem;
    font-style:normal;
    transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
    flex-shrink:0;
  }
  .ir-flow-step.is-active{color:var(--ink)}
  .ir-flow-step.is-active b{
    background:var(--navy);
    border-color:var(--navy);
    color:var(--white);
    transform:scale(1.06);
  }
  .ir-flow-line{
    flex:1 0 20px;
    height:2px;
    min-width:16px;
    border-radius:2px;
    background:var(--line);
    position:relative;
    overflow:hidden;
  }
  .ir-flow-line::after{
    content:"";
    position:absolute;
    inset:0;
    background:var(--navy);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s ease;
  }
  .ir-flow-line.is-active::after{ transform:scaleX(1); }

  .ir-hero-actions{
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:22px;
    flex-wrap:wrap;
  }
  .ir-cta{
    padding:1rem 1.7rem;
    font-size:.98rem;
    font-weight:700;
    box-shadow:0 10px 26px -10px color-mix(in srgb, var(--navy) 55%, transparent);
  }
  .ir-cta .icon{ width:18px; height:18px; transition:transform .18s ease; }
  .ir-cta:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -12px color-mix(in srgb, var(--navy) 60%, transparent); }
  .ir-cta:hover .icon{ transform:translateX(3px); }
  .ir-cta:active{ transform:translateY(0); }
  .ir-hero-note{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    color:var(--muted);
    font-size:.8rem;
    font-weight:600;
  }
  .ir-hero-note .icon{ width:15px; height:15px; color:var(--green-ok); flex-shrink:0; }
  @media (max-width:640px){
    .ir-cta{ width:100%; justify-content:center; }
    .ir-hero-note{ width:100%; justify-content:center; }
  }

  .tool-panel{
    box-shadow:var(--shadow-card);
    transition:border-color .18s ease, box-shadow .18s ease;
  }
  .tool-panel:focus-within{
    border-color:color-mix(in srgb,var(--navy) 28%,var(--line));
    box-shadow:0 10px 30px -20px color-mix(in srgb,var(--navy) 30%,transparent);
  }

  .drop-zone{
    min-height:240px;
    border-width:2px;
  }
  .drop-zone b{font-size:1rem}
  .drop-zone span{max-width:52ch; line-height:1.5}
  .drop-zone::after{
    content:"Choose a file or drag it here";
    display:block;
    margin-top:2px;
    padding:.35rem .7rem;
    border-radius:999px;
    background:var(--white);
    border:1px solid var(--line);
    color:var(--navy);
    font-size:.72rem;
    font-weight:650;
  }
  .drop-zone:hover::after,.drop-zone.is-dragover::after{
    border-color:var(--navy);
  }

  .field-row{gap:10px}
  .field input[type="number"], .field select{
    min-height:42px;
  }
  .lock-btn{
    width:42px;
    height:42px;
    margin-bottom:0;
  }
  .pct-row .btn{
    min-height:38px;
  }

  .ir-output-status{
    display:flex;
    align-items:center;
    gap:8px;
    min-height:34px;
    margin-top:12px;
    padding:8px 10px;
    border-radius:10px;
    background:var(--surface);
    color:var(--muted);
    font-size:.76rem;
  }
  .ir-status-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    flex:0 0 auto;
    background:var(--muted-2);
  }
  .ir-output-status.is-ready{
    color:var(--green-ok);
    background:color-mix(in srgb,var(--green-ok) 9%,var(--surface));
  }
  .ir-output-status.is-ready .ir-status-dot{
    background:var(--green-ok);
  }
  .ir-primary-action .btn{
    width:100%;
    justify-content:center;
    min-height:46px;
    font-size:.92rem;
  }

  .img-preview-wrap{
    min-height:260px;
    background:
      linear-gradient(45deg,color-mix(in srgb,var(--surface-2) 55%,transparent) 25%,transparent 25%,transparent 75%,color-mix(in srgb,var(--surface-2) 55%,transparent) 75%),
      linear-gradient(45deg,color-mix(in srgb,var(--surface-2) 55%,transparent) 25%,transparent 25%,transparent 75%,color-mix(in srgb,var(--surface-2) 55%,transparent) 75%),
      var(--surface);
    background-size:20px 20px;
    background-position:0 0,10px 10px;
  }

  .stat-card{
    min-height:76px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .stat-card b{font-size:1.3rem; overflow-wrap:anywhere}

  .ir-upsell{
    border-style:solid;
  }

  /* Reduce visual competition from secondary sections after the editor. */
  #resize-editor{padding-top:30px}
  #resize-editor + .section{padding-top:38px}

  @media (max-width:980px){
    .workspace{gap:16px}
    .tool-panel{padding:20px}
  }

  @media (max-width:680px){
    .page-hero{padding:22px}
    .page-hero h1{font-size:1.8rem}
    .page-hero p.lead{font-size:.92rem}
    .ir-hero-actions{margin-top:16px}
    .ir-hero-actions .btn{width:100%;justify-content:center}
    .ir-hero-note{width:100%;text-align:center}

    #resize-editor{padding-top:20px}
    .workspace{gap:12px}
    .tool-panel{padding:15px;border-radius:16px}
    .panel-head{margin-bottom:12px}
    .panel-head h3{font-size:.96rem}
    .panel-head .btn-row{width:100%}
    .panel-head .btn-row .btn{flex:1;justify-content:center}

    .drop-zone{
      min-height:190px;
      padding:18px 12px;
    }
    .drop-zone .icon{width:28px;height:28px}
    .drop-zone b{font-size:.9rem;line-height:1.35}
    .drop-zone span{font-size:.73rem}
    .drop-zone::after{font-size:.68rem}

    .field-row{gap:8px}
    .field label{font-size:.74rem}
    .field input[type="number"], .field select{font-size:.88rem;padding:.58rem .65rem}
    .lock-btn{width:40px;height:40px}

    .pct-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
    .pct-row .btn{width:100%;padding:.45rem .25rem}

    .stat-grid{gap:8px}
    .stat-card{padding:12px 10px}
    .stat-card b{font-size:1.05rem}
    .stat-card span{font-size:.7rem}

    .img-preview-wrap{min-height:210px}
    .ir-primary-action{
      position:sticky;
      bottom:70px;
      z-index:20;
      padding-top:4px;
      padding-bottom:4px;
      background:linear-gradient(to bottom,transparent,var(--white) 24%);
    }
    .ir-primary-action .btn{
      box-shadow:0 8px 22px -10px rgba(20,23,28,.45);
    }

    .ir-flow-steps{margin:-2px 0 16px;padding:11px 12px;gap:3px}
    .ir-flow-step{font-size:.72rem;gap:7px}
    .ir-flow-step b{width:24px;height:24px;font-size:.66rem}
    .ir-flow-line{flex-basis:12px}
  }

  @media (max-width:420px){
    .page-hero{padding:18px}
    .page-hero h1{font-size:1.62rem}
    .tool-panel{padding:13px}
    .field-row{align-items:flex-end}
    .lock-btn{width:38px;height:38px}
    .img-preview-wrap{min-height:190px}
    .ir-output-status{font-size:.7rem}
  }

  @media (prefers-reduced-motion:reduce){
    .tool-panel,.ir-primary-action .btn{transition:none}
  }

  /* ---------- Desktop: banner copies the Home page .hero-banner (full width under the text, same frame/padding/ratio) ---------- */
  @media (min-width: 900px){
    .page-hero-inner{ display:block; }
    .page-hero-text{ max-width: 640px; }
    .page-hero-media{ position:relative; z-index:1; display:block; flex:none; width:auto; max-width:none;
      margin: 36px -40px 0; padding-inline: 32px;
      border-radius: var(--radius-m); overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow-card); background: transparent; }
    .page-hero-media img{ display:block; width:100%; height:auto; aspect-ratio:1200 / 630; object-fit:cover; }
    /* Desktop: hide the "Start resizing" button (kept on tablet/mobile) */
    .ir-hero-actions .ir-cta{ display:none; }
  }

  /* ---------- Sidebar tool search ---------- */
  .sidebar-search{ display:flex; align-items:center; gap:.5rem; margin: 0 0 16px 10px; padding: .55rem .75rem; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-s); transition: border-color .15s ease, box-shadow .15s ease; }
  .sidebar-search:focus-within{ border-color: var(--navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 14%, transparent); }
  .sidebar-search .icon{ width:16px; height:16px; color: var(--muted-2); flex-shrink:0; }
  .sidebar-search input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font-size:.86rem; color: var(--ink); -webkit-appearance:none; appearance:none; }
  .sidebar-search input::placeholder{ color: var(--muted-2); }
  .sidebar-search input::-webkit-search-cancel-button{ cursor:pointer; }
  .cat-link[hidden]{ display:none; }
  .dock button.dock-item{ border:0; background:transparent; font-family:inherit; cursor:pointer; }
  .dock-item.is-whatsapp:hover{ background: color-mix(in srgb, #25d366 14%, transparent); color:#128c4a; }
  .sidebar-empty{ margin: 8px 0 0 10px; font-size:.82rem; color: var(--muted); }
  @media (pointer: coarse){ .sidebar-search input{ font-size:16px; } }