/* ---- tokens.css ---- */
/* Crop Desk design tokens – light-first, WCAG AA aim (psychology UX 2026-10-24)
   Meaning is never by colour alone; pair with text/icons. Prefer light theme. */
:root{
  /* Brand */
  --cd-primary:#0c6b62;
  --cd-primary-deep:#09574f;
  --cd-primary-soft:#e5f3f1;
  --cd-primary-ink:#f3fbf9;
  --cd-secondary:#1757a0;
  --cd-secondary-soft:#e9f1fb;

  /* Neutrals / surfaces */
  --cd-bg:#f7f9fc;
  --cd-surface:#ffffff;
  --cd-surface-2:#fffdf8;
  --cd-ink:#0f172a;
  --cd-text:#172334;
  --cd-muted:#475569;
  --cd-border:#dce4ed;
  --cd-border-strong:#b7c8de;

  /* Feedback (always with label/icon) */
  --cd-success:#15803d;
  --cd-success-bg:#dcfce7;
  --cd-warn:#a16207;
  --cd-warn-bg:#fef3c7;
  --cd-error:#b91c1c;
  --cd-error-bg:#fee2e2;
  --cd-info:#1d4ed8;
  --cd-info-bg:#dbeafe;

  /* Focus / chrome */
  --cd-focus:#2563eb;
  --cd-focus-ring:0 0 0 3px rgba(37,99,235,.28);
  --cd-radius:14px;
  --cd-radius-lg:18px;
  --cd-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06);
  --cd-shadow-md:0 4px 16px rgba(15,23,42,.08);
  --cd-tap:44px;
  --cd-max:1180px;
  --cd-font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;

  /* Type scale (rem) – use for new UI; do not force-global until Phase 2 */
  --cd-text-xs:0.75rem;
  --cd-text-sm:0.875rem;
  --cd-text-base:1rem;
  --cd-text-md:1.0625rem;
  --cd-text-lg:1.125rem;
  --cd-text-xl:1.25rem;
  --cd-text-2xl:1.5rem;
  --cd-text-3xl:clamp(1.75rem,4.5vw,2.25rem);
  --cd-text-4xl:clamp(1.9rem,5vw,2.75rem);
  --cd-leading-tight:1.2;
  --cd-leading:1.55;
  --cd-leading-loose:1.7;
  --cd-weight-regular:400;
  --cd-weight-semibold:600;
  --cd-weight-bold:700;
  --cd-weight-extrabold:800;

  /* Spacing scale (4px base) */
  --cd-space-1:4px;
  --cd-space-2:8px;
  --cd-space-3:12px;
  --cd-space-4:16px;
  --cd-space-5:20px;
  --cd-space-6:24px;
  --cd-space-8:32px;
  --cd-space-10:40px;
  --cd-space-12:48px;
  --cd-gap:var(--cd-space-3);
  --cd-pad:var(--cd-space-4);
  --cd-section-y:var(--cd-space-8);

  /* Extra radii / control sizes */
  --cd-radius-sm:8px;
  --cd-radius-md:var(--cd-radius);
  --cd-radius-xl:22px;
  --cd-radius-pill:999px;
  --cd-control-h:44px;
  --cd-control-h-lg:48px;
  --cd-z-header:50;
  --cd-z-overlay:80;

  /* Motion (subtle UX 2026-10-26) – short only; killed by prefers-reduced-motion in ux.css */
  --cd-ease:cubic-bezier(.22,1,.36,1);
  --cd-ease-out:cubic-bezier(.16,1,.3,1);
  --cd-fast:180ms;
  --cd-med:240ms;
  --cd-enter:360ms;
  --cd-shadow-hover:0 10px 24px rgba(15,23,42,.10);

  /* Back-compat aliases used across site.css / tools */
  --ink:var(--cd-ink);
  --muted:var(--cd-muted);
  --line:var(--cd-border);
  --paper:var(--cd-bg);
  --sheet:var(--cd-surface);
  --stamp:var(--cd-primary);
  --stamp-deep:var(--cd-primary-deep);
  --stamp-soft:var(--cd-primary-soft);
  --stamp-ink:var(--cd-primary-ink);
  --r:var(--cd-radius);
  --shadow:var(--cd-shadow);
  --shadow-md:var(--cd-shadow-md);
  --focus:3px solid var(--cd-focus);
  --max:var(--cd-max);
  --sans:var(--cd-font);
}

/* ---- ux.css ---- */
/* UX polish 2026-10-23: instant feedback, focus rings, tap targets, reduced motion (keeps site colours) */
button,.btn,a.btn,[role=button],input[type=submit],input[type=button],label[for]{touch-action:manipulation}
button:not(:disabled):active,.btn:active,a.btn:active,input[type=submit]:active{transform:translateY(1px);filter:brightness(.95)}
:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
button:disabled,.btn[aria-disabled=true]{cursor:not-allowed;opacity:.6}
@media (max-width:739px){button,.btn,a.btn,input[type=submit],select{min-height:44px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.cd-toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,20px);background:#0f5132;color:#fff;padding:10px 16px;border-radius:10px;font:600 14px/1.3 system-ui,sans-serif;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;max-width:90vw}
.cd-toast.on{opacity:1;transform:translate(-50%,0)}.cd-toast.bad{background:#842029}
.cd-next{position:relative;margin:16px auto;padding:14px 40px 14px 16px;border:1px solid #cfe3d8;background:#f2faf5;border-radius:12px;max-width:980px}
.cd-next b{display:block;margin-bottom:8px}.cd-next-l{display:flex;flex-wrap:wrap;gap:8px}
.cd-next-l a{display:inline-flex;align-items:center;min-height:40px;padding:6px 12px;border-radius:8px;background:#fff;border:1px solid #cfe3d8;text-decoration:none;font-weight:600}
.cd-next-x{position:absolute;top:6px;right:8px;border:0;background:transparent;font-size:20px;line-height:1;cursor:pointer;min-height:32px!important;min-width:32px}
.cd-copy{margin-top:8px}
.cd-install{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px auto;padding:10px 14px;border:1px dashed #cbd5e1;border-radius:10px;position:relative}
.cd-dyn-note{color:var(--muted,#6b7280);margin:6px 0 10px}.cd-trend{display:block;color:#c2410c;font-weight:600;margin:4px 0 0}.cd-related{padding:12px 0}


/* ===== Visual polish 2026-10-24 (ux overlay) ===== */
:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.cd-toast{border-radius:12px;box-shadow:0 8px 24px rgba(15,23,42,.18);padding:12px 18px}
.cd-next{border-radius:14px;border-color:#c5ddd0;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.cd-next-l a{border-radius:10px;min-height:42px}
.cd-install{border-radius:12px;border-color:#cbd5e1;background:#fafbfd}

/* ===== Psychology UX/UI redesign 2026-10-24 (tokens + hierarchy + trust) ===== */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{background:var(--cd-bg,#f7f9fc);color:var(--cd-text,#172334);overflow-x:hidden}

/* Visual hierarchy: primary actions vs secondary */
.btn:not(.btn-ghost):not(.alt):not(.btn-alt),
a.btn:not(.btn-ghost):not(.alt),
button.btn:not(.btn-ghost):not(.alt){
  background:var(--cd-primary,#0c6b62);color:#fff;border:1px solid transparent;
  min-height:var(--cd-tap,44px)
}
.btn:not(.btn-ghost):not(.alt):hover,
a.btn:not(.btn-ghost):not(.alt):hover{background:var(--cd-primary-deep,#09574f)}
.btn.alt,.btn-ghost,button.alt{min-height:var(--cd-tap,44px)}

/* Clear disabled / loading feedback (no fake urgency) */
.btn.is-loading,.btn[aria-busy=true],button[aria-busy=true]{
  position:relative;pointer-events:none;opacity:.72
}
.btn.is-loading::after,button[aria-busy=true]::after{
  content:"";width:1em;height:1em;margin-left:.5em;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;display:inline-block;vertical-align:-.1em;
  animation:cd-spin .7s linear infinite
}
@keyframes cd-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn.is-loading::after,button[aria-busy=true]::after{animation:none;border-right-color:currentColor;opacity:.5}}

/* Focus: high-contrast, not colour-only */
:focus-visible{outline:3px solid var(--cd-focus,#2563eb);outline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--cd-focus,#2563eb);outline-offset:2px
}

/* Status colours: white text on filled banners (WCAG AA on red/green) */
.cd-status.ok,.cd-status.err,.cd-toast:not(.bad),.cd-toast.bad{
  color:#fff;padding:10px 12px;border-radius:10px;line-height:1.45
}
.cd-status.ok,.cd-toast:not(.bad){background:var(--cd-success,#15803d)}
@keyframes cd-ok-flash{
  0%{box-shadow:0 0 0 0 rgba(21,128,61,.45)}
  70%{box-shadow:0 0 0 10px rgba(21,128,61,0)}
  100%{box-shadow:0 0 0 0 rgba(21,128,61,0)}
}
.cd-status.ok,.cd-banner.ok{animation:cd-ok-flash .9s ease-out 1}
.cd-status.err,.cd-toast.bad{background:var(--cd-error,#b91c1c)}
.note{background:var(--cd-warn-bg,#fef3c7);border-color:#ecd9a0;color:#713f12}

/* Ad slots: visually separate from controls (trust / no dark patterns) */
.ad-slot,.cd-adslot,.acx-banner,.adst{
  margin:32px auto;padding:10px 8px 12px;border:1px dashed var(--cd-border,#dce4ed);
  border-radius:12px;background:#f8fafc;max-width:100%;box-sizing:border-box
}
.ad-slot .ad-label,.cd-adslot .ad-label,.acx-banner .ad-label,.ad-label{
  display:block;text-align:center;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:#94a3b8;margin:0 0 6px;font-weight:600
}

/* Tool boxes: primary controls first grouping */
.tool-box,.panel{
  border:1px solid var(--cd-border,#dce4ed);border-radius:var(--cd-radius-lg,18px);
  background:var(--cd-surface,#fff);box-shadow:var(--cd-shadow);padding:16px
}
.tool-box .opts{display:flex;flex-wrap:wrap;gap:12px 16px;margin-bottom:12px}
.tool-box .opts label{font-size:.9rem;font-weight:600;color:var(--cd-text)}

/* File limit hints before errors */
.cd-file-hint{font-size:.88rem;color:var(--cd-muted);margin:.4rem 0 .8rem;line-height:1.45}
.cd-file-hint b{color:var(--cd-text);font-weight:700}

/* Progressive disclosure helpers */
.cd-more summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}

/* No horizontal overflow on small screens */
img,svg,video,canvas,iframe{max-width:100%}
.wrap,.tool-wrap{overflow-wrap:anywhere}

@media (max-width:700px){
  .btn,.btn-ghost,button.btn{min-height:46px}
  .tool-box{padding:14px;border-radius:14px}
}


/* ===== Phase 2 shared components (2026-10-25) – tokens-first, no framework ===== */

/* Secondary / ghost buttons (explicit) */
.btn.btn-ghost,.btn.alt,a.btn.btn-ghost,button.btn-ghost,button.alt{
  background:var(--cd-surface,#fff)!important;
  color:var(--cd-ink,#0f172a)!important;
  border:1.5px solid var(--cd-border,#dce4ed)!important;
  font-weight:600
}
.btn.btn-ghost:hover,.btn.alt:hover,a.btn.btn-ghost:hover,button.alt:hover{
  border-color:var(--cd-primary,#0c6b62)!important;
  color:var(--cd-primary-deep,#09574f)!important;
  background:var(--cd-primary-soft,#e5f3f1)!important
}

/* Form controls */
.tool-box input[type=text],
.tool-box input[type=number],
.tool-box input[type=email],
.tool-box input[type=password],
.tool-box input[type=search],
.tool-box input[type=url],
.tool-box select,
.tool-box textarea,
.cd-ux-input,
.opts input[type=text],
.opts input[type=number],
.opts input[type=password],
.opts select,
.opts textarea{
  min-height:var(--cd-control-h,44px);
  border:1.5px solid var(--cd-border-strong,#b7c8de);
  border-radius:var(--cd-radius-sm,8px);
  padding:8px 12px;
  font:inherit;
  background:var(--cd-surface,#fff);
  color:var(--cd-ink,#0f172a);
  box-sizing:border-box
}
.tool-box textarea,.opts textarea{min-height:96px;resize:vertical}
.tool-box input:focus,.tool-box select:focus,.tool-box textarea:focus,
.opts input:focus,.opts select:focus,.opts textarea:focus,
.cd-ux-input:focus{
  outline:none;
  border-color:var(--cd-focus,#2563eb);
  box-shadow:var(--cd-focus-ring,0 0 0 3px rgba(37,99,235,.28))
}

/* Standardized dropzone (enhances .dz) */
.dz,.cd-dz{
  display:block;position:relative;overflow:hidden;
  border:2px dashed var(--cd-primary,#0c6b62);
  border-radius:var(--cd-radius-lg,18px);
  background:linear-gradient(180deg,var(--cd-primary-soft,#e5f3f1),var(--cd-surface,#fff));
  padding:var(--cd-space-8,32px) var(--cd-space-4,16px);
  text-align:center;cursor:pointer;font-weight:700;
  color:var(--cd-ink,#0f172a);
  transition:border-color .15s,box-shadow .15s,background .15s;
  min-height:120px;box-sizing:border-box
}
.dz:hover,.dz:focus-within,.cd-dz:hover,.cd-dz:focus-within{
  border-color:var(--cd-primary-deep,#09574f);
  box-shadow:var(--cd-focus-ring,0 0 0 3px rgba(37,99,235,.2))
}
.dz.over,.cd-dz.over{
  background:var(--cd-info-bg,#dbeafe);
  border-color:var(--cd-focus,#2563eb)
}
.dz small,.cd-dz small{
  display:block;font-weight:500;color:var(--cd-muted,#475569);
  margin-top:var(--cd-space-2,8px);pointer-events:none;line-height:1.4
}
.dz input[type=file],.cd-dz input[type=file]{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
  font-size:0;margin:0;padding:0;border:0;z-index:2
}

/* Cards */
.cd-card,.ccard,.hc,.hm-card{
  border-radius:var(--cd-radius,14px);
  border:1px solid var(--cd-border,#dce4ed);
  background:var(--cd-surface,#fff);
  box-shadow:var(--cd-shadow)
}

/* Progress */
.cd-progress,progress.cd-progress,#prog{
  display:block;width:100%;height:10px;margin:10px 0;
  border:0;border-radius:var(--cd-radius-pill,999px);
  background:var(--cd-border,#dce4ed);overflow:hidden;
  accent-color:var(--cd-primary,#0c6b62)
}
progress.cd-progress::-webkit-progress-bar{background:var(--cd-border,#dce4ed);border-radius:999px}
progress.cd-progress::-webkit-progress-value{background:var(--cd-primary,#0c6b62);border-radius:999px}

/* Empty / success / error banners */
.cd-empty{
  text-align:center;padding:28px 16px;color:var(--cd-muted,#475569);
  border:1px dashed var(--cd-border,#dce4ed);border-radius:var(--cd-radius,14px);
  background:#fafbfd;margin:12px 0
}
.cd-empty strong{display:block;color:var(--cd-ink,#0f172a);margin-bottom:6px;font-size:1.05rem}
.cd-banner{
  display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin:10px 0;
  border-radius:12px;border:1px solid var(--cd-border,#dce4ed);background:var(--cd-surface,#fff);
  font-size:.95rem;line-height:1.45
}
.cd-banner.ok{background:var(--cd-success-bg,#dcfce7);border-color:#86efac;color:#14532d}
.cd-banner.err{background:var(--cd-error-bg,#fee2e2);border-color:#fecaca;color:#7f1d1d}
.cd-banner.warn{background:var(--cd-warn-bg,#fef3c7);border-color:#fde68a;color:#713f12}
.cd-banner.info{background:var(--cd-info-bg,#dbeafe);border-color:#bfdbfe;color:#1e3a8a}

/* Workflow steps (Upload → …) */
.cd-steps{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:0 0 14px;padding:0;list-style:none
}
.cd-steps li{
  display:inline-flex;align-items:center;gap:8px;
  min-height:36px;padding:6px 12px;border-radius:999px;
  background:#f1f5f9;border:1px solid var(--cd-border,#dce4ed);
  font-size:.88rem;font-weight:700;color:var(--cd-muted,#475569)
}
.cd-steps li .n{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:#fff;border:1px solid var(--cd-border,#dce4ed);font-size:.75rem
}
.cd-steps li.on{background:var(--cd-primary-soft,#e5f3f1);border-color:var(--cd-primary,#0c6b62);color:var(--cd-primary-deep,#09574f)}
.cd-steps li.on .n{background:var(--cd-primary,#0c6b62);color:#fff;border-color:transparent}
.cd-steps li.done{background:#ecfdf5;border-color:#86efac;color:#14532d}

/* Mode tabs – sticky, scrollable on mobile */
.mode-tabs{
  display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;margin:12px 0 14px;position:sticky;top:58px;z-index:7;
  background:rgba(247,249,252,.96);backdrop-filter:blur(8px);padding:6px;border-radius:14px;
  border:1px solid var(--cd-border,#dce4ed)
}
.mode-tabs a{
  flex:none;display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;
  border-radius:11px;text-decoration:none;font-weight:700;font-size:.92rem;
  color:var(--cd-ink,#0f172a);white-space:nowrap
}
.mode-tabs a:hover{background:var(--cd-primary-soft,#e5f3f1);color:var(--cd-primary-deep,#09574f)}
.mode-tabs a[aria-current=page],.mode-tabs a[aria-selected=true]{
  background:var(--cd-primary,#0c6b62);color:#fff
}
@media (prefers-reduced-motion:reduce){.mode-tabs{backdrop-filter:none}}

/* Toast: also support .cd-toast.info */
.cd-toast.info{background:var(--cd-info,#1d4ed8)}
.cd-toast{z-index:90}

/* Reserved ad slot (empty until filled; never covers CTAs) */
.ad-slot:empty,.cd-adslot:empty{display:none}
.ad-slot,.cd-adslot{clear:both;margin:28px auto;max-width:980px}

/* Public usage counters: hide until verified accurate */
/* visit-counter restored public 2026-10-25 */
.cd-usage[data-unverified],.hx-most .hm-note[data-fake]{display:none!important}

@media (max-width:700px){
  .mode-tabs{top:52px;padding:4px}
  .dz,.cd-dz{padding:22px 14px;min-height:108px}
  .cd-steps{gap:6px}
  .cd-steps li{font-size:.8rem;padding:5px 10px}
}


/* ===== Phase 3 sitewide inheritance helpers ===== */
/* Pages that only load site.css still get these via middleware-injected ux.css */

main .tool-box,
main #mode-box,
main #tt-app,
main #rb-app,
main #kd-app,
main .rb-app{
  border:1px solid var(--cd-border,#dce4ed);
  border-radius:var(--cd-radius-lg,18px);
  background:var(--cd-surface,#fff);
  box-shadow:var(--cd-shadow);
  padding:16px;margin:12px 0 22px
}

main .btn,main a.btn,main button.btn{border-radius:12px;font-weight:700}
main input[type=number],main input[type=text],main select,main textarea{
  border-radius:10px
}

/* Size-guide / content tools without .tool-box */
main .prose table,main .article table,main .table-wrap table{
  border-collapse:collapse;width:100%
}
main .prose th,main .article th{background:var(--cd-primary-soft,#e5f3f1)}

/* Games shell */
.game-wrap,.game-box,#game{
  border-radius:16px;border:1px solid var(--cd-border,#dce4ed);
  background:#fff;box-shadow:var(--cd-shadow);padding:12px
}

.visit-counter.visit-counter--on{display:block!important;text-align:center}


/* ===== Subtle motion 2026-10-26 (soft, short, low-distraction) ===== */
/* Durations ~150–280ms; page enter ≤400ms once. No loops except existing spinner. */

@keyframes cd-enter{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
@keyframes cd-cta-shine{
  from{transform:translateX(-130%) skewX(-12deg)}
  to{transform:translateX(220%) skewX(-12deg)}
}

/* Gentle page content enter — once on load */
main{
  animation:cd-enter var(--cd-enter,360ms) var(--cd-ease-out,cubic-bezier(.16,1,.3,1)) both
}

/* Soft hover lift on cards / tool tiles / directory tiles */
.card,a.card,.tcard,.ccard,.hm-card,.hc,.us-focus-card,.cd-card,
.cd-next-l a,.hx-jump a,.hchips a,.hx-recent-list a{
  transition:
    transform var(--cd-fast,180ms) var(--cd-ease,cubic-bezier(.22,1,.36,1)),
    box-shadow var(--cd-fast,180ms) var(--cd-ease,cubic-bezier(.22,1,.36,1)),
    border-color var(--cd-fast,180ms) var(--cd-ease,cubic-bezier(.22,1,.36,1)),
    background-color var(--cd-med,240ms) var(--cd-ease,cubic-bezier(.22,1,.36,1)),
    color var(--cd-fast,180ms) ease
}
.card:hover,a.card:hover,.tcard:hover,.ccard:hover,.hm-card:hover,.hc:hover,.us-focus-card:hover,.cd-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--cd-shadow-hover,0 10px 24px rgba(15,23,42,.10))
}
.cd-next-l a:hover,.hx-jump a:hover,.hchips a:hover,.hx-recent-list a:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(15,23,42,.08)
}

/* Nav links: tiny lift, no bounce */
.nav a:not(.btn){
  transition:background var(--cd-fast,180ms) ease,color var(--cd-fast,180ms) ease,transform var(--cd-fast,180ms) var(--cd-ease,cubic-bezier(.22,1,.36,1))
}
.nav a:not(.btn):hover{transform:translateY(-1px)}

/* Buttons: light brightness + scale — never jumpy */
.btn,a.btn,button.btn,input[type=submit],input[type=button]{
  transition:
    background var(--cd-fast,180ms) ease,
    box-shadow var(--cd-fast,180ms) ease,
    border-color var(--cd-fast,180ms) ease,
    transform var(--cd-fast,180ms) var(--cd-ease,cubic-bezier(.22,1,.36,1)),
    filter var(--cd-fast,180ms) ease,
    color var(--cd-fast,180ms) ease
}
.btn:not(:disabled):hover,a.btn:hover,button.btn:not(:disabled):hover,
input[type=submit]:not(:disabled):hover,input[type=button]:not(:disabled):hover{
  transform:translateY(-1px) scale(1.02);
  filter:brightness(1.04)
}
.btn:not(:disabled):active,a.btn:active,button.btn:not(:disabled):active,
input[type=submit]:not(:disabled):active,input[type=button]:not(:disabled):active{
  transform:translateY(1px) scale(1);filter:brightness(.97)
}

/* Soft shimmer on primary CTA hover only (btn-lg / main CTAs) */
.btn.btn-lg:not(.btn-ghost):not(.alt):not(.btn-alt),
a.btn.btn-lg:not(.btn-ghost):not(.alt){
  position:relative;overflow:hidden;isolation:isolate
}
.btn.btn-lg:not(.btn-ghost):not(.alt):not(.btn-alt)::before,
a.btn.btn-lg:not(.btn-ghost):not(.alt)::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:42%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.16) 48%,transparent 100%);
  transform:translateX(-130%) skewX(-12deg);pointer-events:none;z-index:1;opacity:0
}
.btn.btn-lg:not(.btn-ghost):not(.alt):not(.btn-alt):hover::before,
a.btn.btn-lg:not(.btn-ghost):not(.alt):hover::before{
  opacity:1;animation:cd-cta-shine var(--cd-med,240ms) var(--cd-ease,cubic-bezier(.22,1,.36,1)) forwards
}

/* Mode tabs soft transition (already have hover bg) */
.mode-tabs a{
  transition:background var(--cd-fast,180ms) ease,color var(--cd-fast,180ms) ease,transform var(--cd-fast,180ms) ease
}
.mode-tabs a:hover{transform:translateY(-1px)}

/* Focus-visible: keep ring, slight offset polish */
:focus-visible{
  outline:3px solid var(--cd-focus,#2563eb);
  outline-offset:3px
}

/* Idle dropzone only — no motion while .over / dragging */
.dz:not(.over),.cd-dz:not(.over){
  transition:border-color var(--cd-fast,180ms) ease,box-shadow var(--cd-fast,180ms) ease,background var(--cd-fast,180ms) ease,transform var(--cd-fast,180ms) ease
}
.dz:not(.over):hover,.cd-dz:not(.over):hover{transform:translateY(-1px)}
@keyframes cd-dz-idle{
  0%,100%{box-shadow:0 0 0 0 rgba(12,107,98,.0);border-color:var(--cd-border,#e2e8f0)}
  50%{box-shadow:0 0 0 4px rgba(12,107,98,.08);border-color:#9fd0c8}
}
.dz:not(.over):not(:hover):not(:focus-within),.cd-dz:not(.over):not(:hover):not(:focus-within){
  animation:cd-dz-idle 3.6s ease-in-out infinite
}

/* Do NOT force-disable transforms on canvas/cropper — tools use them for pan/zoom.
   We simply never target work surfaces with hover lifts or enter animations. */

@media (prefers-reduced-motion:reduce){
  main{animation:none}
  .card,.tcard,.ccard,.hm-card,.hc,.us-focus-card,.cd-card,a.card,
  .cd-next-l a,.hx-jump a,.hchips a,.hx-recent-list a,
  .nav a:not(.btn),.btn,a.btn,button.btn,.mode-tabs a,.dz,.cd-dz{
    transition:none!important;transform:none!important;filter:none!important
  }
  .card:hover,a.card:hover,.tcard:hover,.ccard:hover,.hm-card:hover,.hc:hover,
  .us-focus-card:hover,.cd-card:hover,.btn:hover,a.btn:hover,button.btn:hover,
  .nav a:hover,.mode-tabs a:hover,.dz:hover,.cd-dz:hover,
  .cd-next-l a:hover,.hx-jump a:hover,.hchips a:hover,.hx-recent-list a:hover{
    transform:none!important;filter:none!important
  }
  .btn.btn-lg:not(.btn-ghost)::before,a.btn.btn-lg:not(.btn-ghost)::before{display:none;animation:none}
}


/* ===== Croppi mascot 20261026m9 (soft-3D speed critter + full limbs + roam/play) ===== */
.cd-mascot{
  position:fixed;left:auto;top:auto;
  right:max(10px,env(safe-area-inset-right,0px));
  bottom:max(10px,env(safe-area-inset-bottom,0px));
  width:72px;height:84px;z-index:55;pointer-events:none;
  transform-origin:50% 100%;
  transition:opacity .22s ease,transform .22s ease,left .85s cubic-bezier(.22,1,.36,1),top .95s cubic-bezier(.22,1,.36,1)
}
.cd-mascot.cd-mascot--snap{transition:opacity .18s ease,transform .18s ease !important}
.cd-mascot.cd-mascot--dodge{
  transition:opacity .18s ease,transform .18s ease,left .38s cubic-bezier(.2,.9,.2,1),top .38s cubic-bezier(.2,.9,.2,1)
}
.cd-mascot-hit{
  pointer-events:auto;display:block;margin:0 auto;padding:0;border:0;background:transparent;
  width:64px;height:72px;cursor:pointer;border-radius:18px;
  -webkit-tap-highlight-color:transparent
}
.cd-mascot-hit:focus-visible{outline:2px solid #2563eb;outline-offset:3px}
.cd-mascot-fig{pointer-events:none;width:64px;height:72px;margin:0 auto;
  transform-style:preserve-3d;perspective:240px
}
.cd-mascot-svg{display:block;width:64px;height:72px;filter:drop-shadow(0 8px 14px rgba(15,23,42,.22))}
.cd-mascot-x{
  pointer-events:auto;position:absolute;top:-2px;right:-2px;z-index:2;
  width:22px;height:22px;min-height:22px!important;min-width:22px;padding:0;
  border:0;border-radius:999px;background:rgba(15,23,42,.55);color:#fff;
  font:700 14px/1 system-ui,sans-serif;cursor:pointer;opacity:.55;
  transition:opacity .15s,background .15s
}
.cd-mascot-x:hover,.cd-mascot-x:focus-visible{opacity:1;background:#0c6b62;outline:2px solid #2563eb;outline-offset:2px}
.cd-mascot--side-left .cd-mascot-x{right:auto;left:-2px}
.cd-mascot--side-left .cd-mascot-tip{right:auto;left:0;transform-origin:10% 100%}
.cd-mascot--side-left .cd-mascot-gag{right:auto;left:58px}
.cd-mascot--side-left .cd-mascot-whisper{right:auto;left:0}

/* Soft bob + tiny side sway */
@keyframes cd-mascot-bob{
  0%,100%{transform:translate3d(0,0,0) rotateY(-10deg) scale(1)}
  25%{transform:translate3d(-5px,-3px,0) rotateY(-2deg) scale(1.02)}
  50%{transform:translate3d(0,-4px,0) rotateY(10deg) scale(1.03)}
  75%{transform:translate3d(5px,-2px,0) rotateY(2deg) scale(1.01)}
}
@keyframes cd-mascot-leg-l{
  0%,100%{transform:translateY(0) rotate(-14deg)}
  50%{transform:translateY(3px) rotate(16deg)}
}
@keyframes cd-mascot-leg-r{
  0%,100%{transform:translateY(3px) rotate(14deg)}
  50%{transform:translateY(0) rotate(-16deg)}
}
@keyframes cd-mascot-arm{
  0%,100%{transform:rotate(-8deg)}
  50%{transform:rotate(18deg)}
}
@keyframes cd-mascot-tuft{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(6deg)}
}
@keyframes cd-mascot-foot{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(1.5px)}
}
@keyframes cd-mascot-enter{
  0%{opacity:0;transform:translate3d(28px,18px,0) scale(.72)}
  55%{opacity:1;transform:translate3d(-4px,-2px,0) scale(1.06)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes cd-mascot-celebrate{
  0%,100%{transform:translate3d(0,0,0) scale(1) rotateY(-6deg)}
  25%{transform:translate3d(-6px,-8px,0) scale(1.08) rotateY(6deg)}
  50%{transform:translate3d(0,-12px,0) scale(1.12) rotateY(-4deg)}
  75%{transform:translate3d(6px,-6px,0) scale(1.06) rotateY(8deg)}
}
@keyframes cd-mascot-play-bounce{
  0%,100%{transform:translate3d(0,0,0) scale(1) rotate(-2deg)}
  30%{transform:translate3d(0,-10px,0) scale(1.1) rotate(6deg)}
  55%{transform:translate3d(0,-4px,0) scale(1.04) rotate(-4deg)}
  75%{transform:translate3d(0,-8px,0) scale(1.08) rotate(3deg)}
}
.cd-mascot:not(.cd-mascot--still):not(.cd-mascot--paused):not(.cd-mascot--play):not(.cd-mascot--pointing) .cd-mascot-fig{
  animation:cd-mascot-bob 1.9s var(--cd-ease,cubic-bezier(.22,1,.36,1)) infinite
}
.cd-mascot:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-leg--l{
  transform-origin:50% 0;animation:cd-mascot-leg-l 0.48s ease-in-out infinite
}
.cd-mascot:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-leg--r{
  transform-origin:50% 0;animation:cd-mascot-leg-r 0.48s ease-in-out infinite
}
.cd-mascot:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-arm--l{
  transform-origin:100% 50%;animation:cd-mascot-arm 0.48s ease-in-out infinite reverse
}
.cd-mascot:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-arm--r{
  transform-origin:0 50%;animation:cd-mascot-arm 0.48s ease-in-out infinite
}
.cd-mascot:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-tuft--l{
  transform-origin:18px 20px;animation:cd-mascot-tuft .9s ease-in-out infinite
}
.cd-mascot:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-tuft--r{
  transform-origin:46px 20px;animation:cd-mascot-tuft .9s ease-in-out infinite reverse
}
.cd-mascot:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-foot--l{
  transform-origin:24px 59px;animation:cd-mascot-foot .48s ease-in-out infinite
}
.cd-mascot:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-foot--r{
  transform-origin:40px 59px;animation:cd-mascot-foot .48s ease-in-out infinite reverse
}
.cd-mascot--paused .cd-mascot-tuft--l,
.cd-mascot--paused .cd-mascot-tuft--r,
.cd-mascot--paused .cd-mascot-foot--l,
.cd-mascot--paused .cd-mascot-foot--r{animation-play-state:paused}
.cd-mascot.cd-mascot--enter:not(.cd-mascot--still){
  animation:cd-mascot-enter .75s var(--cd-ease,cubic-bezier(.22,1,.36,1)) both
}
.cd-mascot.cd-mascot--celebrate:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-fig{
  animation:cd-mascot-celebrate .55s ease-in-out infinite
}
.cd-mascot.cd-mascot--celebrate:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-leg--l,
.cd-mascot.cd-mascot--celebrate:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-leg--r{
  animation-duration:.35s
}
.cd-mascot.cd-mascot--play:not(.cd-mascot--still) .cd-mascot-fig{
  animation:cd-mascot-play-bounce .55s ease-in-out infinite
}
.cd-mascot.cd-mascot--play:not(.cd-mascot--still) .cd-mascot-leg--l,
.cd-mascot.cd-mascot--play:not(.cd-mascot--still) .cd-mascot-leg--r{
  animation-duration:.28s
}
.cd-mascot--paused .cd-mascot-fig,
.cd-mascot--paused .cd-mascot-leg--l,
.cd-mascot--paused .cd-mascot-leg--r,
.cd-mascot--paused .cd-mascot-arm--l,
.cd-mascot--paused .cd-mascot-arm--r{animation-play-state:paused}
.cd-mascot--hide{opacity:0;transform:translateY(12px) scale(.92);pointer-events:none!important}
.cd-mascot--gone{opacity:0;transform:translateY(16px) scale(.85);pointer-events:none!important}
@media (max-width:420px){
  .cd-mascot{width:60px;height:72px}
  .cd-mascot-hit,.cd-mascot-fig,.cd-mascot-svg{width:52px;height:60px}
}
@media (prefers-reduced-motion:reduce){
  .cd-mascot{transition:opacity .15s ease !important}
  .cd-mascot .cd-mascot-fig,
  .cd-mascot .cd-mascot-leg--l,
  .cd-mascot .cd-mascot-leg--r,
  .cd-mascot .cd-mascot-arm--l,
  .cd-mascot .cd-mascot-arm--r,
  .cd-mascot .cd-mascot-tuft--l,
  .cd-mascot .cd-mascot-tuft--r,
  .cd-mascot .cd-mascot-foot--l,
  .cd-mascot .cd-mascot-foot--r,
  .cd-mascot.cd-mascot--enter,
  .cd-mascot.cd-mascot--celebrate .cd-mascot-fig,
  .cd-mascot.cd-mascot--play .cd-mascot-fig{animation:none!important}
  .cd-mascot-fig{transform:rotateY(-6deg)}
  .dz:not(.over),.cd-dz:not(.over){animation:none!important}
  .cd-status.ok,.cd-banner.ok{animation:none!important}
}

/* Tip bubble + point pose */
.cd-mascot-tip{
  position:absolute;right:0;bottom:calc(100% + 6px);width:min(220px,70vw);
  padding:8px 26px 8px 10px;border-radius:12px;
  background:#0f172a;color:#f8fafc;font:600 .78rem/1.35 system-ui,sans-serif;
  box-shadow:0 8px 22px rgba(15,23,42,.22);pointer-events:none;z-index:3;
  transform-origin:90% 100%
}
.cd-mascot-tip[hidden]{display:none!important}
.cd-mascot-tip-t{margin:0}
.cd-mascot-tip-x{
  pointer-events:auto;position:absolute;top:4px;right:4px;
  width:20px;height:20px;min-height:20px!important;min-width:20px;padding:0;
  border:0;border-radius:999px;background:rgba(255,255,255,.18);color:#fff;
  font:700 12px/1 system-ui,sans-serif;cursor:pointer;opacity:.75
}
.cd-mascot-tip-x:hover,.cd-mascot-tip-x:focus-visible{opacity:1;outline:2px solid #93c5fd;outline-offset:1px}
@keyframes cd-mascot-tip-in{
  0%{opacity:0;transform:translateY(6px) scale(.94)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.cd-mascot--tip-on .cd-mascot-tip{animation:cd-mascot-tip-in .28s ease-out both}
.cd-mascot-point{transition:opacity .2s}
.cd-mascot--pointing .cd-mascot-point{opacity:1}
.cd-mascot--point-left:not(.cd-mascot--still) .cd-mascot-fig{
  transform:translate3d(-6px,-2px,0) rotate(-8deg) rotateY(12deg)
}
.cd-mascot--point-left:not(.cd-mascot--still) .cd-mascot-arm--l{
  transform:rotate(-28deg) translate(-2px,-2px)
}
.cd-mascot--point-up:not(.cd-mascot--still) .cd-mascot-fig{
  transform:translate3d(-2px,-8px,0) rotate(-4deg)
}
.cd-mascot--point-up.cd-mascot--point-left:not(.cd-mascot--still) .cd-mascot-fig{
  transform:translate3d(-8px,-10px,0) rotate(-10deg) rotateY(10deg)
}
.cd-mascot--pointing:not(.cd-mascot--still) .cd-mascot-fig{
  animation:none!important
}
.cd-mascot--pointing:not(.cd-mascot--still) .cd-mascot-leg--l,
.cd-mascot--pointing:not(.cd-mascot--still) .cd-mascot-leg--r,
.cd-mascot--pointing:not(.cd-mascot--still) .cd-mascot-arm--l,
.cd-mascot--pointing:not(.cd-mascot--still) .cd-mascot-arm--r{
  animation-play-state:paused
}

/* Play whisper bubble */
.cd-mascot-whisper{
  position:absolute;right:0;bottom:calc(100% + 4px);z-index:4;
  padding:5px 10px;border-radius:999px;background:#1757a0;color:#fff;
  font:700 .72rem/1.2 system-ui,sans-serif;white-space:nowrap;
  box-shadow:0 6px 16px rgba(23,87,160,.28);pointer-events:none;
  opacity:0;transform:translateY(4px) scale(.92);
  transition:opacity .18s ease,transform .18s ease
}
.cd-mascot-whisper[hidden]{display:none!important}
.cd-mascot--whisper-on .cd-mascot-whisper{opacity:1;transform:translateY(0) scale(1);display:inline-block}

@media (prefers-reduced-motion:reduce){
  .cd-mascot--tip-on .cd-mascot-tip{animation:none!important}
  .cd-mascot--point-left .cd-mascot-fig,
  .cd-mascot--point-up .cd-mascot-fig{transform:none}
  .cd-mascot-point{opacity:0!important}
  .cd-mascot-whisper{transition:none}
}

/* Loading gags */
.cd-mascot{overflow:visible}
.cd-mascot-gag{
  position:absolute;right:58px;bottom:8px;z-index:0;
  display:flex;align-items:flex-end;gap:2px;
  pointer-events:none;opacity:0;transform:translateX(8px);
  transition:opacity .22s ease,transform .22s ease
}
.cd-mascot-gag[hidden]{display:none!important}
.cd-mascot--loading .cd-mascot-gag{opacity:1;transform:translateX(0);display:flex!important}
.cd-mascot-cave{display:block;width:48px;height:36px;filter:drop-shadow(0 2px 3px rgba(15,23,42,.12))}
.cd-mascot-wheel{display:block;width:20px;height:20px;margin-bottom:2px;opacity:.95}
.cd-mascot-wheel[hidden]{display:none!important}
.cd-mascot-gag-whisper{
  position:absolute;left:0;top:-12px;font:600 .62rem/1 system-ui,sans-serif;
  color:#78716c;letter-spacing:.02em;white-space:nowrap;opacity:.85
}
@keyframes cd-cave-scurry{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  50%{transform:translateX(2px)}
  75%{transform:translateX(-2px)}
}
@keyframes cd-cave-leg{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(18deg)}
}
@keyframes cd-cave-arm{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(-16deg)}
}
@keyframes cd-stone-spin{to{transform:rotate(360deg)}}
.cd-mascot--loading:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-cave-run{
  animation:cd-cave-scurry .45s ease-in-out infinite;
  transform-origin:22px 32px
}
.cd-mascot--loading:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-cave-leg-l{
  transform-origin:22px 22px;animation:cd-cave-leg .28s ease-in-out infinite
}
.cd-mascot--loading:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-cave-leg-r{
  transform-origin:22px 22px;animation:cd-cave-leg .28s ease-in-out infinite reverse
}
.cd-mascot--loading:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-cave-arm-r,
.cd-mascot--loading:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-cave-stick{
  transform-origin:22px 15px;animation:cd-cave-arm .28s ease-in-out infinite
}
.cd-mascot--wheel:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-wheel{
  animation:cd-stone-spin 1.1s linear infinite
}
.cd-mascot--paused .cd-mascot-cave-run,
.cd-mascot--paused .cd-mascot-cave-leg-l,
.cd-mascot--paused .cd-mascot-cave-leg-r,
.cd-mascot--paused .cd-mascot-cave-arm-r,
.cd-mascot--paused .cd-mascot-cave-stick,
.cd-mascot--paused .cd-mascot-wheel{animation-play-state:paused}

/* Face defaults */
.cd-mascot-mouth--big,
.cd-mascot-mouth--flat,
.cd-mascot-mouth--o,
.cd-mascot-mouth--worry{opacity:0}
.cd-mascot-mouth--smile{opacity:1}
.cd-mascot-brow{opacity:0}
.cd-mascot-sweat{opacity:0}
.cd-mascot-shades{opacity:0;transition:opacity .2s ease}
.cd-mascot-leaf{opacity:0;transition:opacity .25s ease,transform .25s ease}
.cd-mascot-eye{transition:transform .18s ease}

.cd-mascot--emo-idle .cd-mascot-mouth--smile{opacity:1}

.cd-mascot--emo-think .cd-mascot-mouth--smile{opacity:0}
.cd-mascot--emo-think .cd-mascot-mouth--flat{opacity:1}
.cd-mascot--emo-think .cd-mascot-brow{opacity:1}
.cd-mascot--emo-think .cd-mascot-eye--l,
.cd-mascot--emo-think .cd-mascot-eye--r{transform:translate(0,-1.2px)}
.cd-mascot--emo-think .cd-mascot-spark{transform:translate(.4px,-1px)}

.cd-mascot--emo-happy .cd-mascot-mouth--smile{opacity:0}
.cd-mascot--emo-happy .cd-mascot-mouth--big{opacity:1}
.cd-mascot--emo-happy .cd-mascot-eye--l,
.cd-mascot--emo-happy .cd-mascot-eye--r{transform:scaleY(.55) translateY(1px)}

.cd-mascot--emo-excited .cd-mascot-mouth--smile{opacity:0}
.cd-mascot--emo-excited .cd-mascot-mouth--big{opacity:1}
.cd-mascot--emo-excited .cd-mascot-eye--l,
.cd-mascot--emo-excited .cd-mascot-eye--r{transform:scale(1.15)}

.cd-mascot--emo-worried .cd-mascot-mouth--smile{opacity:0}
.cd-mascot--emo-worried .cd-mascot-mouth--worry{opacity:1}
.cd-mascot--emo-worried .cd-mascot-sweat{opacity:1}
.cd-mascot--emo-worried .cd-mascot-eye--l,
.cd-mascot--emo-worried .cd-mascot-eye--r{transform:scaleY(.85) translateY(.4px)}

.cd-mascot--emo-loading .cd-mascot-mouth--smile{opacity:0}
.cd-mascot--emo-loading .cd-mascot-mouth--o{opacity:1}
.cd-mascot--emo-loading .cd-mascot-eye--l{transform:translate(-1.5px,0) scale(1.05)}
.cd-mascot--emo-loading .cd-mascot-eye--r{transform:translate(-1.5px,0)}
.cd-mascot--emo-loading .cd-mascot-sweat{opacity:.55}

.cd-mascot--emo-cool .cd-mascot-shades,
.cd-mascot--cool .cd-mascot-shades{opacity:1}
.cd-mascot--emo-cool .cd-mascot-eyes,
.cd-mascot--cool .cd-mascot-eyes{opacity:0}
.cd-mascot--emo-cool .cd-mascot-mouth--smile{opacity:0}
.cd-mascot--emo-cool .cd-mascot-mouth--big{opacity:1}

.cd-mascot--emo-peek .cd-mascot-leaf,
.cd-mascot--peek .cd-mascot-leaf{
  opacity:1;transform:translate(2px,0)
}
.cd-mascot--emo-peek .cd-mascot-face,
.cd-mascot--peek .cd-mascot-face{
  transform:translate(-3px,1px)
}
.cd-mascot--emo-peek .cd-mascot-mouth--smile{opacity:0}
.cd-mascot--emo-peek .cd-mascot-mouth--flat{opacity:1}
.cd-mascot-face{transition:transform .25s ease}

/* poke surprise / giggle */
.cd-mascot--emo-surprise .cd-mascot-mouth--smile{opacity:0}
.cd-mascot--emo-surprise .cd-mascot-mouth--o{opacity:1}
.cd-mascot--emo-surprise .cd-mascot-eye--l,
.cd-mascot--emo-surprise .cd-mascot-eye--r{transform:scale(1.25)}
.cd-mascot--emo-surprise .cd-mascot-brow{opacity:1}
.cd-mascot--emo-giggle .cd-mascot-mouth--smile{opacity:0}
.cd-mascot--emo-giggle .cd-mascot-mouth--big{opacity:1}
.cd-mascot--emo-giggle .cd-mascot-eye--l,
.cd-mascot--emo-giggle .cd-mascot-eye--r{transform:scaleY(.45) translateY(1.5px)}
.cd-mascot--emo-giggle .cd-mascot-arm--l,
.cd-mascot--emo-giggle .cd-mascot-arm--r{transform:rotate(18deg)}

@media (max-width:420px){
  .cd-mascot-gag{right:48px;bottom:4px}
  .cd-mascot--side-left .cd-mascot-gag{left:48px;right:auto}
  .cd-mascot-cave{width:40px;height:30px}
  .cd-mascot-gag-whisper{font-size:.55rem;top:-10px}
}
@media (prefers-reduced-motion:reduce){
  .cd-mascot--loading .cd-mascot-cave-run,
  .cd-mascot--loading .cd-mascot-cave-leg-l,
  .cd-mascot--loading .cd-mascot-cave-leg-r,
  .cd-mascot--loading .cd-mascot-cave-arm-r,
  .cd-mascot--loading .cd-mascot-cave-stick,
  .cd-mascot--wheel .cd-mascot-wheel{animation:none!important}
  .cd-mascot-gag{opacity:.9;transform:none}
}

/* ===== Soft mesh background 2026-10-26m4 (slow hue/opacity pulse, WCAG-safe) ===== */
body{position:relative;isolation:isolate}
body::before,body::after{
  content:"";position:fixed;inset:auto;pointer-events:none;z-index:-1;
  border-radius:50%;filter:blur(64px);opacity:.55
}
body::before{
  width:min(72vw,560px);height:min(72vw,560px);top:-12vh;left:-10vw;
  background:radial-gradient(circle at 30% 30%,rgba(12,107,98,.16),rgba(12,107,98,.04) 55%,transparent 70%)
}
body::after{
  width:min(68vw,520px);height:min(68vw,520px);right:-12vw;bottom:8vh;
  background:radial-gradient(circle at 60% 40%,rgba(23,87,160,.14),rgba(79,70,229,.05) 50%,transparent 72%)
}
@keyframes cd-mesh-a{
  0%,100%{opacity:.48;filter:blur(64px) hue-rotate(0deg);transform:translate3d(0,0,0) scale(1)}
  50%{opacity:.62;filter:blur(68px) hue-rotate(12deg);transform:translate3d(2vw,1vh,0) scale(1.04)}
}
@keyframes cd-mesh-b{
  0%,100%{opacity:.42;filter:blur(64px) hue-rotate(0deg);transform:translate3d(0,0,0) scale(1)}
  50%{opacity:.58;filter:blur(70px) hue-rotate(-10deg);transform:translate3d(-2vw,-1vh,0) scale(1.05)}
}
body::before{animation:cd-mesh-a 32s ease-in-out infinite}
body::after{animation:cd-mesh-b 40s ease-in-out infinite}
/* Soft page wash over #f7f9fc without killing contrast */
html{background:var(--cd-bg,#f7f9fc)}
body{
  background:
    radial-gradient(900px 420px at 8% -8%,rgba(12,107,98,.07),transparent 60%),
    radial-gradient(820px 380px at 96% 0%,rgba(37,99,235,.06),transparent 58%),
    radial-gradient(700px 360px at 50% 110%,rgba(12,107,98,.04),transparent 55%),
    var(--cd-bg,#f7f9fc)
}
@media (prefers-reduced-motion:reduce){
  body::before,body::after{animation:none!important;filter:blur(48px);opacity:.4}
}

/* ===== Polished tool icons (shared .hc-i / .ci) – brand teal/blue, tiny lift ===== */
.hc-i,.ci,span.hc-i,span.ci{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:14px;
  background:linear-gradient(145deg,var(--cd-primary,#0c6b62),var(--cd-secondary,#1757a0));
  color:#fff;
  box-shadow:0 4px 12px -2px rgba(12,107,98,.28),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform var(--cd-fast,180ms) var(--cd-ease,cubic-bezier(.22,1,.36,1)),box-shadow var(--cd-fast,180ms) ease
}
.hc-i svg,.ci svg{
  width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.15;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 0 rgba(0,0,0,.08))
}
.hc .hc-i{width:40px;height:40px;border-radius:12px}
.hc .hc-i svg{width:20px;height:20px}
.hm-card .hc-i{width:46px;height:46px;border-radius:14px}
.hm-card:first-child .hc-i{
  background:rgba(255,255,255,.2);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 4px 12px rgba(0,0,0,.12)
}
.hm-card:hover .hc-i,.hc:hover .hc-i,.ccard:hover .ci,.cat-h:hover .ci{
  transform:translateY(-1px) scale(1.04)
}
/* Category header icon chip */
.hcat-h .ci,.cat-h .ci{
  width:36px;height:36px;border-radius:11px;margin-right:4px;vertical-align:-8px
}
.hcat-h .ci svg,.cat-h .ci svg{width:18px;height:18px}
/* Tint variants via --g1/--g2 when present (all-tools) */
.ci[style*="--g1"],.hc-i[style*="--g1"]{
  background:linear-gradient(145deg,var(--g1,#0c6b62),var(--g2,#1757a0))
}
@media (prefers-reduced-motion:reduce){
  .hm-card:hover .hc-i,.hc:hover .hc-i,.ccard:hover .ci{transform:none}
}

/* ---- cd-rating.css ---- */
/* Optional tool star rating – calm, non-blocking, mobile-first */
.cd-rate{
  margin:14px 0 8px;
  padding:10px 12px;
  border:1px solid var(--cd-border,var(--line,#dce4ed));
  border-radius:var(--cd-radius,12px);
  background:var(--cd-surface,#fff);
  color:var(--cd-text,#172334);
  box-shadow:var(--cd-shadow,0 1px 2px rgba(15,23,42,.04));
  max-width:100%;
}
.cd-rate[hidden]{display:none!important}
.cd-rate-inner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;position:relative;padding-right:28px}
.cd-rate-quiet{opacity:.92}
.cd-rate-q,.cd-rate-msg{margin:0;font-size:.95rem;font-weight:600;color:var(--cd-text,#172334)}
.cd-rate-avg{font-size:.85rem;color:var(--cd-muted,#475569);font-weight:500}
.cd-rate-avg small{font-weight:400}
.cd-rate-stars{display:inline-flex;gap:2px;align-items:center}
.cd-rate-star{
  appearance:none;border:0;background:transparent;padding:4px 2px;
  font-size:1.35rem;line-height:1;color:#cbd5e1;cursor:pointer;
  min-width:36px;min-height:40px;border-radius:8px;
}
button.cd-rate-star:hover,button.cd-rate-star:focus-visible{background:var(--cd-primary-soft,#e5f3f1);outline:none;box-shadow:var(--cd-focus-ring,0 0 0 3px rgba(37,99,235,.28))}
.cd-rate-star.on{color:#d97706}
.cd-rate-skip,.cd-rate-change{
  appearance:none;border:0;background:transparent;color:var(--cd-muted,#475569);
  font:inherit;font-size:.85rem;cursor:pointer;padding:6px 8px;min-height:36px;border-radius:8px;text-decoration:underline;
}
.cd-rate-skip:hover,.cd-rate-change:hover{color:var(--cd-primary,#0c6b62)}
.cd-rate-x{
  position:absolute;right:0;top:0;appearance:none;border:0;background:transparent;
  color:var(--cd-muted,#475569);font-size:1.25rem;line-height:1;cursor:pointer;
  min-width:36px;min-height:36px;border-radius:8px;
}
.cd-rate-x:hover,.cd-rate-x:focus-visible{background:var(--cd-primary-soft,#e5f3f1);outline:none}
@media (max-width:520px){
  .cd-rate{padding:10px}
  .cd-rate-star{min-width:40px;font-size:1.45rem}
}

/* ---- cd-feedback.css ---- */
/* Soft optional visitor feedback – calm, non-blocking (popup mirrors .cd-lb-pop) */
.cd-fb{
  margin:8px 0 10px;
  padding:8px 12px;
  border:1px dashed var(--cd-border,var(--line,#dce4ed));
  border-radius:var(--cd-radius,12px);
  background:transparent;
  color:var(--cd-text,#172334);
  max-width:100%;
}
.cd-fb[hidden]{display:none!important}
.cd-fb-inner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;position:relative;padding-right:28px}
.cd-fb-quiet{padding-right:0}
.cd-fb-ask{margin:0;font-size:.92rem;font-weight:600;width:100%}
.cd-fb-link,.cd-fb-skip,.cd-fb-cancel{
  appearance:none;border:0;background:transparent;color:var(--cd-muted,#475569);
  font:inherit;font-size:.85rem;cursor:pointer;padding:8px 10px;min-height:40px;border-radius:8px;text-decoration:underline;
}
.cd-fb-link{color:var(--cd-primary,#0c6b62);font-weight:600;text-decoration:none}
.cd-fb-link:hover,.cd-fb-skip:hover,.cd-fb-cancel:hover{color:var(--cd-primary,#0c6b62);text-decoration:underline}
.cd-fb-form{align-items:stretch;flex-direction:column;padding-right:28px}
.cd-fb-msg,.cd-fb-contact{
  width:100%;box-sizing:border-box;font:inherit;font-size:.95rem;
  padding:10px 12px;border:1px solid var(--cd-border,var(--line,#dce4ed));
  border-radius:10px;background:var(--cd-surface,#fff);color:var(--cd-text,#172334);
  min-height:44px;
}
.cd-fb-msg{resize:vertical;min-height:72px;line-height:1.4}
.cd-fb-msg:focus,.cd-fb-contact:focus{outline:none;box-shadow:var(--cd-focus-ring,0 0 0 3px rgba(37,99,235,.28));border-color:var(--cd-primary,#0c6b62)}
.cd-fb-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cd-fb-send{
  appearance:none;border:0;background:var(--cd-primary,#0c6b62);color:#fff;
  font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
  padding:10px 16px;min-height:44px;border-radius:10px;
}
.cd-fb-send:hover{filter:brightness(1.05)}
.cd-fb-send:disabled{opacity:.6;cursor:not-allowed}
.cd-fb-x{
  position:absolute;right:0;top:0;appearance:none;border:0;background:transparent;
  color:var(--cd-muted,#475569);font-size:1.25rem;line-height:1;cursor:pointer;
  min-width:40px;min-height:40px;border-radius:8px;
}
.cd-fb-x:hover,.cd-fb-x:focus-visible{background:var(--cd-primary-soft,#e5f3f1);outline:none}
.cd-fb-err{margin:0;color:#b91c1c;font-size:.85rem}
.cd-fb-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.cd-fb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Fixed bottom soft popup — same spirit as .cd-lb-pop; z below LB (80) so if both ever race, LB wins */
.cd-fb-pop{
  position:fixed;z-index:75;left:50%;bottom:18px;transform:translateX(-50%);
  width:min(420px,calc(100vw - 24px));
  padding:14px 16px 12px;
  border:1px solid var(--cd-border,#dce4ed);
  border-radius:14px;background:#fff;color:#172334;
  box-shadow:0 10px 40px rgba(15,23,42,.18),0 2px 8px rgba(15,23,42,.08);
  font:inherit;
  box-sizing:border-box;
  padding-bottom:max(12px,env(safe-area-inset-bottom,0px));
}
.cd-fb-pop[hidden]{display:none!important}
.cd-fb-pop-hd{display:flex;align-items:flex-start;gap:8px;margin:0 0 10px}
.cd-fb-pop-hd p{margin:0;flex:1;font-weight:700;font-size:1rem;line-height:1.35}
.cd-fb-pop-x{
  appearance:none;border:0;background:transparent;color:#64748b;
  font-size:1.35rem;line-height:1;cursor:pointer;min-width:40px;min-height:40px;border-radius:8px;flex-shrink:0
}
.cd-fb-pop-x:hover,.cd-fb-pop-x:focus-visible{background:#e5f3f1;outline:none}
.cd-fb-pop .cd-fb-msg,.cd-fb-pop .cd-fb-contact{margin:0 0 10px}
.cd-fb-pop .cd-fb-actions{margin:0 0 4px}
.cd-fb-pop .cd-fb-cancel{
  appearance:none;border:0;background:transparent;color:#475569;font:inherit;
  padding:8px 10px;cursor:pointer;text-decoration:underline;min-height:40px;border-radius:8px
}
.cd-fb-pop .cd-fb-send{min-height:40px}

@media (max-width:520px){
  .cd-fb{padding:10px}
  .cd-fb-pop{
    bottom:max(10px,env(safe-area-inset-bottom,0px));
    padding:12px;
    padding-bottom:max(12px,calc(10px + env(safe-area-inset-bottom,0px)));
  }
}

/* ---- cd-leaderboard.css ---- */
/* Soft optional leaderboard – calm, non-blocking (same spirit as star ratings) */
.cd-lb-board{
  margin:12px 0 8px;padding:12px 14px;
  border:1px solid var(--cd-border,var(--line,#dce4ed));
  border-radius:var(--cd-radius,12px);
  background:var(--cd-surface,#fff);
  color:var(--cd-text,#172334);
  box-shadow:var(--cd-shadow,0 1px 2px rgba(15,23,42,.04));
  max-width:100%;
}
.cd-lb-board[hidden]{display:none!important}
.cd-lb-board h3{margin:0 0 8px;font-size:1rem;font-weight:700}
.cd-lb-board ol{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.cd-lb-board li{
  display:flex;align-items:center;gap:10px;padding:6px 8px;
  border-radius:8px;background:var(--cd-primary-soft,#f0f7f6);font-size:.95rem
}
.cd-lb-medal{font-size:1.1rem;min-width:1.5rem;text-align:center}
.cd-lb-name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd-lb-score{font-variant-numeric:tabular-nums;color:var(--cd-muted,#475569);font-weight:600}
.cd-lb-empty{margin:0;font-size:.9rem;color:var(--cd-muted,#475569)}
.cd-lb-note{margin:8px 0 0;font-size:.75rem;color:var(--cd-muted,#64748b)}

.cd-lb-pop{
  position:fixed;z-index:80;left:50%;bottom:18px;transform:translateX(-50%);
  width:min(420px,calc(100vw - 24px));
  padding:14px 16px 12px;
  border:1px solid var(--cd-border,#dce4ed);
  border-radius:14px;background:#fff;color:#172334;
  box-shadow:0 10px 40px rgba(15,23,42,.18),0 2px 8px rgba(15,23,42,.08);
  font:inherit;
}
.cd-lb-pop[hidden]{display:none!important}
.cd-lb-pop-hd{display:flex;align-items:flex-start;gap:8px;margin:0 0 8px}
.cd-lb-pop-hd p{margin:0;flex:1;font-weight:700;font-size:1rem;line-height:1.35}
.cd-lb-pop-x{
  appearance:none;border:0;background:transparent;color:#64748b;
  font-size:1.35rem;line-height:1;cursor:pointer;min-width:36px;min-height:36px;border-radius:8px
}
.cd-lb-pop-x:hover{background:#e5f3f1}
.cd-lb-pop-sub{margin:0 0 10px;font-size:.9rem;color:#475569}
.cd-lb-pop label{display:block;font-size:.85rem;font-weight:600;margin:0 0 4px}
.cd-lb-pop input[type=text]{
  width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #cbd5e1;
  border-radius:10px;font:inherit;font-size:1rem;margin:0 0 10px
}
.cd-lb-pop input:focus{outline:none;border-color:#0c6b62;box-shadow:0 0 0 3px rgba(12,107,98,.2)}
.cd-lb-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cd-lb-save{
  appearance:none;border:0;background:#0c6b62;color:#fff;font:inherit;font-weight:600;
  padding:10px 16px;border-radius:10px;cursor:pointer;min-height:40px
}
.cd-lb-save:disabled{opacity:.55;cursor:not-allowed}
.cd-lb-skip{
  appearance:none;border:0;background:transparent;color:#475569;font:inherit;
  padding:8px 10px;cursor:pointer;text-decoration:underline;min-height:40px;border-radius:8px
}
.cd-lb-status{margin:8px 0 0;font-size:.85rem;color:#0c6b62;min-height:1.2em}
@media (max-width:520px){
  .cd-lb-pop{bottom:10px;padding:12px}
}

/* ---- cd-delight.css ---- */
/* Crop Desk delight pack – soft sticky UI (non-blocking) */
.cd-win{
  margin:10px 0 6px;
  max-width:min(560px,100%);
  z-index:4;
  pointer-events:none;
}
.cd-win[hidden]{display:none!important}
.cd-win-inner{
  pointer-events:auto;
  display:flex;align-items:flex-start;gap:8px;
  padding:10px 12px;
  border-radius:12px;
  background:linear-gradient(135deg,#ecfdf5 0%,#f0fdf4 55%,#eff6ff 100%);
  border:1px solid #a7f3d0;
  color:#14532d;
  font-size:.95rem;font-weight:600;line-height:1.35;
  box-shadow:0 4px 14px rgba(16,185,129,.12);
}
.cd-win-emoji{flex:0 0 auto;font-size:1.1rem;line-height:1.2}
.cd-win-t{flex:1 1 auto;min-width:0}
.cd-win-x,.cd-break-x{
  flex:0 0 auto;appearance:none;border:0;background:transparent;
  color:#64748b;font-size:1.15rem;line-height:1;cursor:pointer;
  padding:0 2px;border-radius:6px;
}
.cd-win-x:hover,.cd-break-x:hover{color:#0f172a;background:rgba(15,23,42,.06)}
.cd-win-pop{animation:cd-win-in .45s ease-out both}
@keyframes cd-win-in{
  from{opacity:0;transform:translateY(6px) scale(.98)}
  to{opacity:1;transform:none}
}

.cd-break{
  pointer-events:auto;
  margin-top:8px;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
  padding:8px 10px;
  border-radius:10px;
  background:#f8fafc;
  border:1px dashed #cbd5e1;
  color:#334155;
  font-size:.88rem;font-weight:500;
}
.cd-break[hidden]{display:none!important}
.cd-break-t{font-weight:700;color:#0f766e}
.cd-break-a{
  color:#0f766e;text-decoration:none;font-weight:600;
  padding:2px 6px;border-radius:6px;
}
.cd-break-a:hover{background:#ccfbf1;text-decoration:underline}
.cd-break-sep{color:#94a3b8;user-select:none}
.cd-break-x{margin-left:auto}

.cd-mystats{
  margin:.35rem 0 0;
  font-size:.88rem;font-weight:600;
  color:#0f766e;
}
.cd-mystats--inline{
  margin:0;
  font-size:inherit;
  font-weight:600;
  color:#0f766e;
}
.cd-mystats[hidden]{display:none!important}

.cd-games-hint{
  margin:8px 0 0;
  font-size:.88rem;
  color:#64748b;
  line-height:1.4;
}

/* cheap success micro-motion for primary action after win */
.cd-win ~ .btn.primary,
.tool-box .btn.primary.cd-pulse-ok{
  animation:cd-btn-ok .7s ease-out 1;
}
@keyframes cd-btn-ok{
  0%{box-shadow:0 0 0 0 rgba(16,185,129,.45)}
  70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}
  100%{box-shadow:none}
}

.tt-beat{
  display:inline-block;margin-left:6px;
  background:#eff6ff;color:#1d4ed8;
  border-radius:6px;padding:2px 8px;font-weight:700;font-size:.92em;
}
.tt-beat button{
  appearance:none;border:0;background:transparent;color:inherit;
  font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;
  padding:0;
}

@media (prefers-reduced-motion: reduce){
  .cd-win-pop,.cd-win ~ .btn.primary,.tool-box .btn.primary.cd-pulse-ok{animation:none!important}
}

/* ---- cd-rank.css ---- */
/* colorful soft tool icons */
.hc-i,.ci,.hm-card .hc-i,.cd-hicon{background:linear-gradient(135deg,var(--g1,#06b6d4),var(--g2,#2563eb))!important;color:#fff!important;border:0!important;box-shadow:0 6px 14px -6px var(--g2,#2563eb),inset 0 1px 0 rgba(255,255,255,.35)!important;border-radius:12px!important}
.hc-i svg,.ci svg,.cd-hicon svg{color:#fff!important;fill:none;stroke:currentColor}
.cd-hicon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;vertical-align:middle;margin-inline-end:12px}
.cd-hicon svg{width:24px;height:24px}
.cd-rk{display:block;margin-top:6px;font-size:12.5px;font-weight:600;line-height:1.5;color:#334155;font-style:normal}
.cd-rk i{font-style:normal}
.cd-rk-n{display:inline-block;background:#fbbf24;color:#1f2937!important;font-weight:800;padding:0 7px;border-radius:999px;margin-inline-end:2px}
.cd-rk-s{color:#b45309;font-weight:700}
.cd-rk--dark,html.dark .cd-rk,[data-theme=dark] .cd-rk{color:rgba(255,255,255,.9)!important}
.cd-rk--dark .cd-rk-s,html.dark .cd-rk-s,[data-theme=dark].cd-rank-note{font-size:12.5px;color:#64748b;margin:0 0 8px}
/* WCAG AA contrast pass 2026-10-29 */
footer .small,footer .cd-foot-pop,footer .cd-foot-mail,.cd-foot-pop,.cd-foot-mail{color:#a3b1c6!important}
footer .cd-foot-pop a,footer .cd-foot-mail a{color:#cbd5e1!important}
.visit-counter,.visit-count,.visit-label,.unique-today-label,.unique-total-label{color:#5eead4!important}
.small{color:#566173;opacity:1!important}
footer .small{color:#a3b1c6!important}
.btn[href$="tool/"]{color:#fff!important}
input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}
button:disabled,.btn:disabled,.btn[disabled]{color:#4b5563!important}
@media (prefers-color-scheme:dark){
 .hgrid .more,.cgrid .more,a .more,.cgrid a .more{color:#7dd3fc!important}
 input::placeholder,textarea::placeholder{color:#94a3b8}
 button:disabled,.btn:disabled{color:#cbd5e1!important}
}

.cd-onDark h3,.cd-onDark h2,.cd-onDark b,.cd-onDark strong{color:#f1f5f9!important}.cd-onDark p,.cd-onDark li,.cd-onDark span:not(.cd-rk):not([class*=hc-i]){color:#cbd5e1!important}.cd-onDark a:not(.btn){color:#7dd3fc!important}
.cd-rk-tr{font-style:normal;font-weight:600;color:#c2410c}.cd-rk--dark .cd-rk-tr{color:#fdba74}

/* ---- cd-anim.css ---- */
@media (prefers-reduced-motion:no-preference){
.cd-rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.cd-rv.cd-rvin{opacity:1;transform:none}
.hgrid>a,.cgrid>a,.hm-card,.card{transition:transform .22s ease,box-shadow .22s ease}
.hgrid>a:hover,.cgrid>a:hover,.hm-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px -10px rgba(37,99,235,.35),0 0 0 1px rgba(6,182,212,.18)}
a:hover .hc-i,a:hover .ci,a:hover .cd-hicon{animation:cdB .5s ease}
@keyframes cdB{0%,100%{transform:none}40%{transform:translateY(-4px) scale(1.06)}70%{transform:translateY(1px)}}
.btn,button.primary,.go,#go{position:relative;overflow:hidden}
.btn::after,#go::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
.btn:hover::after,#go:hover::after{transform:translateX(120%);transition:transform .7s ease}
.cd-rp{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);opacity:1;animation:cdR .55s ease-out forwards;pointer-events:none}
@keyframes cdR{to{transform:scale(1);opacity:0}}
.cd-rk-n{position:relative;overflow:hidden}
.cd-rk-n::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);transform:translateX(-100%);animation:cdS 2.8s ease-in-out infinite;pointer-events:none}
@keyframes cdS{60%,100%{transform:translateX(100%)}}
.home h1,main h1:first-of-type{background:linear-gradient(90deg,#0f766e,#2563eb,#7c3aed,#0f766e);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:cdG 10s ease infinite}
@keyframes cdG{50%{background-position:100% 0}}
.cd-ld>a{position:relative;overflow:hidden}
.cd-ld>a::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(148,163,184,.18) 50%,transparent 70%);transform:translateX(-100%);animation:cdS 1.2s linear infinite;pointer-events:none}
.cd-dz-on{animation:cdP 1.1s ease-in-out infinite;outline:2px dashed #2563eb;outline-offset:3px}
@keyframes cdP{50%{box-shadow:0 0 0 8px rgba(37,99,235,.15)}}
.cd-progress,.cd-shim{position:relative;overflow:hidden}
.cd-progress::after,.cd-shim::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-100%);animation:cdS 1.3s linear infinite;pointer-events:none}
.results>*,#out>*,.cd-res,.cd-ba{animation:cdF .35s ease both}
@keyframes cdF{from{opacity:0;transform:translateY(6px)}}
.cd-ok svg{animation:cdK .45s cubic-bezier(.2,1.4,.4,1) both}.cd-ok path{stroke-dasharray:16;stroke-dashoffset:16;animation:cdD .35s .2s ease forwards}
@keyframes cdK{from{transform:scale(.3);opacity:0}}@keyframes cdD{to{stroke-dashoffset:0}}
}
@media (prefers-color-scheme:dark){.home h1,main h1:first-of-type{background-image:linear-gradient(90deg,#5eead4,#93c5fd,#c4b5fd,#5eead4)}}
.cd-shim{height:6px;border-radius:6px;background:linear-gradient(90deg,#2563eb var(--p,8%),#e2e8f0 0);margin:8px 0}
.cd-ok{display:flex;align-items:center;gap:8px;margin:8px 0;font-weight:600;color:#166534}.cd-ok path{stroke-dashoffset:0}
.cd-ba{position:relative;display:block;margin:8px 0;line-height:0;user-select:none}.cd-ba img{width:100%;display:block}.cd-ba-a{position:absolute;inset:0}.cd-ba-a img{height:100%;object-fit:fill}
.cd-ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}.cd-ba-l,.cd-ba-r{position:absolute;top:6px;font:600 11px/1 system-ui;background:rgba(15,23,42,.6);color:#fff;padding:3px 6px;border-radius:6px}.cd-ba-l{left:6px}.cd-ba-r{right:6px}

/* ---- cd-ds.css ---- */
/* Crop Desk Design System v1 (CD-DS) – frozen 2026-10-30. Loaded last. See /docs DESIGN.md */
:root{--ds-brand:#0c6b62;--ds-brand-d:#09574f;--ds-brand-s:#e6f3f1;--ds-ink:#0f172a;--ds-muted:#526072;--ds-line:#dce4ed;--ds-bg:#f7f9fc;--ds-r-in:8px;--ds-r-btn:12px;--ds-r-card:16px;
--ds-sh-sm:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.08);--ds-sh-md:0 8px 24px -10px rgba(15,23,42,.22);
--ds-font:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Devanagari",Arial,sans-serif;
--ds-cta:#c2410c;--ds-cta-d:#9a3412;--ds-success:#15803d;--ds-warning:#b45309;--ds-error:#b91c1c;
--cat-photo:#0f766e;--cat-pdf:#be123c;--cat-convert:#4d7c0f;--cat-typing:#4338ca;--cat-career:#1d4ed8;--cat-social:#a21caf;--cat-money:#a16207;--cat-intl:#0369a1;--cat-games:#475569;--cat-ai:#6d28d9}
body{font-family:var(--ds-font)!important}
h1,h2,h3,.brand-name{font-family:var(--ds-font)!important}
/* headings: solid ink, no gradient text */
.home h1,main h1,main h1:first-of-type{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:currentColor!important;color:var(--ds-ink)!important;animation:none!important;letter-spacing:-.01em;line-height:1.2}
main h1{font-size:clamp(1.6rem,1.1rem + 2vw,2.4rem)!important;font-weight:800}
/* tiles: one flat colour per category */
.hc-i,.ci,.hm-card .hc-i,.cd-hicon{background:var(--g1,var(--ds-brand))!important;box-shadow:none!important;border-radius:12px!important}
.home .pop .ci{background:var(--g1,var(--ds-brand))!important;color:#fff!important}
.hm-card:first-child{background:#fff!important;color:var(--ds-ink)!important;border:1px solid var(--ds-line)!important}.hm-card:first-child small{color:var(--ds-muted)!important}.hm-card:first-child .hc-i{background:var(--g1,var(--ds-brand))!important;color:#fff!important}
/* header */
.site-head .nav a[aria-current=page]{color:var(--ds-brand)!important;font-weight:700}
/* trust strip */
.cd-trust{display:flex;flex-wrap:wrap;gap:6px 14px;margin:6px 0 12px;padding:0;list-style:none;font-size:.86rem;color:var(--ds-muted);min-height:22px;align-items:center}
.cd-trust li{display:inline-flex;align-items:center;gap:5px}.cd-trust li:before{content:"";width:14px;height:14px;flex:none;border-radius:50%;background:var(--ds-brand-s) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c6b62' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat}
/* universal 3-step bar */
ol.cd-steps.cd-ds-steps{display:flex;gap:0;margin:0 0 14px;padding:0;list-style:none;counter-reset:none;min-height:40px;align-items:stretch}
ol.cd-steps.cd-ds-steps li{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:8px;position:relative;padding:8px 6px;margin:0;border:0!important;border-radius:0!important;background:none!important;color:var(--ds-muted);font-weight:600;font-size:.9rem;white-space:nowrap}
ol.cd-steps.cd-ds-steps li:after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--ds-line);border-radius:4px}
ol.cd-steps.cd-ds-steps li+li{margin-left:6px}
ol.cd-steps.cd-ds-steps li .n{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;font-size:.8rem;background:#fff;border:2px solid var(--ds-line);color:var(--ds-muted)}
ol.cd-steps.cd-ds-steps li.on{color:var(--ds-brand-d)}ol.cd-steps.cd-ds-steps li.on:after{background:var(--ds-brand)}ol.cd-steps.cd-ds-steps li.on .n{background:var(--ds-brand);border-color:var(--ds-brand);color:#fff}
ol.cd-steps.cd-ds-steps li.done{color:#166534}ol.cd-steps.cd-ds-steps li.done:after{background:#22c55e}ol.cd-steps.cd-ds-steps li.done .n{background:#22c55e;border-color:#22c55e;color:#fff;font-size:0}ol.cd-steps.cd-ds-steps li.done .n:before{content:"✓";font-size:.8rem}
@media (max-width:520px){ol.cd-steps.cd-ds-steps li{font-size:.78rem;gap:5px}ol.cd-steps.cd-ds-steps li .n{width:20px;height:20px}}
/* drop zone */
.dz{border:2px dashed #9fc9c3!important;background:#f4faf9!important;border-radius:var(--ds-r-card)!important;padding:28px 16px!important;transition:border-color .15s,background-color .15s}
.dz:hover,.dz.over{border-color:var(--ds-brand)!important;background:var(--ds-brand-s)!important}
.dz:before{content:"";display:block;width:40px;height:40px;margin:0 auto 8px;border-radius:12px;background:var(--ds-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3C/svg%3E") center/22px no-repeat;pointer-events:none}
/* buttons */
main .btn,main button.primary,main .btn-primary{border-radius:var(--ds-r-btn)}
main .btn:not(.ghost):not(.secondary):not(.alt):disabled,main button:disabled{opacity:.55}
.tool-box a[download].btn,.tool-box a.btn[download],.tool-box button[id*=dl i]:not([hidden]),.tool-box button[id*=download i]:not([hidden]){min-height:48px;font-size:1rem;font-weight:700;padding-inline:20px}
/* inline AI bar (replaces floating pills) */
.cd-ai-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;min-height:34px}
.cd-ai-bar .cd-ai-badge,.cd-ai-bar .cd-ai-open{position:static!important;transform:none!important;box-shadow:none!important;border:1px solid transparent!important;border-radius:999px!important;padding:7px 14px!important;font:600 13px/1.2 var(--ds-font)!important;cursor:pointer;min-height:34px}
.cd-ai-bar .cd-ai-badge[aria-pressed=false]{border-color:var(--ds-line)!important}
.cd-ai-bar .cd-ai-note{font-size:.8rem;color:var(--ds-muted)}
#cd-ai-panel.cd-inline{position:relative!important;left:auto!important;bottom:auto!important;transform:none!important;width:auto!important;max-height:none!important;margin:0 0 14px;box-shadow:var(--ds-sh-md)!important;border:1px solid var(--ds-line)}
/* ads never crowd tools */

@media (prefers-reduced-motion:reduce){.dz{transition:none}}

/* dark-mode tokens (ready, opt-in via [data-theme=dark]; site stays light by default) */
[data-theme=dark]{--ds-brand:#2dd4bf;--ds-brand-d:#5eead4;--ds-brand-s:#134e4a;--ds-ink:#e2e8f0;--ds-muted:#94a3b8;--ds-line:#334155;--ds-bg:#0f172a;--ds-cta:#fb923c;--ds-cta-d:#fdba74;--ds-success:#4ade80;--ds-warning:#fbbf24;--ds-error:#f87171;
--cat-photo:#2dd4bf;--cat-pdf:#fb7185;--cat-convert:#a3e635;--cat-typing:#a5b4fc;--cat-career:#93c5fd;--cat-social:#f0abfc;--cat-money:#facc15;--cat-intl:#7dd3fc;--cat-games:#cbd5e1;--cat-ai:#c4b5fd}
[data-theme=dark] .hc-i svg,[data-theme=dark] .ci svg,[data-theme=dark] .cd-hicon svg{color:#0f172a!important}
/* CTA colour: only the final Download action (one orange button per screen) */
.tool-box a[download].btn,.tool-box a.btn[download],.tool-box button[id*=dl i]:not([hidden]):not(:disabled),.tool-box button[id*=download i]:not([hidden]):not(:disabled){background:var(--ds-cta)!important;border-color:var(--ds-cta)!important;color:#fff!important}
.tool-box a[download].btn:hover,.tool-box button[id*=dl i]:hover,.tool-box button[id*=download i]:hover{background:var(--ds-cta-d)!important}
/* one trust strip only: hide the per-tool duplicate privacy pill when the strip exists */
body:has(.cd-trust) .cd-priv{display:none!important}
/* home hero: single chip row under the search */
.hx-hero .wrap{display:flex;flex-direction:column;align-items:center}
.hx-hero .wrap>*{max-width:100%}
.hx-hero .eyebrow{order:0}.hx-hero h1{order:1;margin-inline:auto!important;text-align:center!important}.hx-hero .lead{order:2;text-align:center}.hx-hero .hsearch{order:3;width:min(720px,100%)}.hx-hero .hx-hint{order:4}.hx-hero .cd-quick{order:5;justify-content:center}.hx-hero .hx-recent{order:6}
.hx-hero .hchips{display:none!important}
.hx-hero .cd-quick .btn{min-height:38px;padding:6px 14px!important;font-size:.9rem;border-radius:999px!important}
@media (max-width:560px){.cd-trust{font-size:.8rem;gap:4px 10px;margin:4px 0 10px}.cd-trust li:nth-child(n+4){display:none}.cd-ai-bar .cd-ai-note{display:none}.cd-ai-bar .cd-ai-badge,.cd-ai-bar .cd-ai-open{padding:6px 12px!important;font-size:12.5px!important}}
@media (max-width:560px){.hx-hero .cd-quick{gap:6px!important}.hx-hero .cd-quick .btn{min-height:34px;padding:5px 11px!important;font-size:.8rem}}
/* ---- readability (fonts) ---- */
@font-face{font-family:"CD Devanagari";src:url(/fonts/ndev-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:"CD Devanagari";src:url(/fonts/ndev-600.woff2) format("woff2");font-weight:500 600;font-style:normal;font-display:swap;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:"CD Devanagari";src:url(/fonts/ndev-700.woff2) format("woff2");font-weight:700 900;font-style:normal;font-display:swap;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
:root{--ds-font:system-ui,-apple-system,"Segoe UI",Roboto,"CD Devanagari","Noto Sans Devanagari",Arial,sans-serif;--muted:#475569;--cd-muted:#475569;--ds-muted:#475569}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-size:16px;line-height:1.55;font-weight:400;color:var(--ds-ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main p,main li,main dd,main td,.prose p,.prose li{line-height:1.6}
small,.small,.hint,.muted,.hx-hint,.hx-sub{color:#475569!important;font-weight:400}
small,.small{font-size:max(.875rem,13.5px)}
:lang(hi),[lang=hi]{line-height:1.7}
input,select,textarea,button{font-family:inherit}
main p,main li,#v3 p,.cd-banner,.hcat p{line-height:1.55!important}
@media (max-width:560px){body{font-size:16px}
main p:not(.small):not(.crumbs):not(.hx-hint):not(.cd-games-hint):not(.cd-lb-note):not(.kb-pages):not(.cd-privacy-badge),main li,.prose p,#v3 .sub,.card p,.hx-sub,.cd-banner,p.note{font-size:16px!important}
main .small,main .crumbs,.hx-hint,.cd-games-hint,.cd-lb-note,.kb-pages,.cd-privacy-badge,#v3 .small{font-size:max(14px,.875rem)!important}
input,select,textarea{font-size:16px!important}}
/* ---- bulk cropper AI detect ---- */
.cd-bai{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:48px;margin:10px 0;padding:8px 12px;border:1px solid #ddd6fe;border-radius:10px;background:#f5f3ff;font-size:15px;color:#0f172a}
.cd-bai-t{display:flex;align-items:center;gap:6px;cursor:pointer}.cd-bai-t input{width:18px;height:18px;accent-color:#6d28d9}.cd-bai-t span{color:#475569}
.cd-bai-s{color:#4c1d95;font-weight:600;min-width:1px}
.cd-bai-b{margin-left:auto;border:1px solid #6d28d9;color:#6d28d9;background:#fff;border-radius:8px;padding:6px 12px;font-weight:600;cursor:pointer;min-height:40px;display:inline-flex;align-items:center}
.cd-bai-b+.cd-bai-b{margin-left:0}
.cd-bai-dlg{border:0;border-radius:12px;padding:12px;max-width:96vw;width:min(1140px,96vw);color:#0f172a}.cd-bai-dlg::backdrop{background:rgba(15,23,42,.6)}
.cd-bai-top{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;margin-bottom:8px}.cd-bai-top span{color:#475569;font-size:14px}
.cd-bai-cv{overflow:auto;text-align:center}.cd-bai-cv canvas{max-width:100%;height:auto;touch-action:none;cursor:crosshair}
.cd-bai-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.cd-bai-act span{flex:1}.cd-bai-act button{min-height:40px;padding:6px 12px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;font-weight:600;cursor:pointer;color:#0f172a}
.cd-bai-act .cd-bai-go{background:#c2410c;border-color:#c2410c;color:#fff}
/* ---- mobile: upload drop zone above the fold (2026-10-30) ---- */
@media (max-width:640px){
main:has(.dz) .crumbs{display:none}
main:has(.dz) h1{font-size:1.5rem!important;line-height:1.25!important;margin:4px 0 6px!important}
main:has(.dz) h1 .cd-hicon{width:34px;height:34px;vertical-align:-6px}
main:has(.dz) .cd-trust{flex-wrap:nowrap;overflow:hidden;margin:2px 0 8px;font-size:14px;min-height:20px}
main:has(.dz) .cd-trust li{white-space:nowrap}
main:has(.dz) .cd-trust li:nth-child(n+3){display:none}
main:has(.dz) .cd-ai-bar{margin:0 0 6px}
main:has(.dz) p.lead{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;margin:0 0 8px}
main:has(.dz) p.lead.cd-open{display:block;-webkit-line-clamp:unset}
main:has(.dz) ol.cd-steps.cd-ds-steps{display:none}
main:has(.dz) .mode-sub{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:6px 0 8px}
main:has(.dz) .mode-tabs{margin-bottom:6px}
}
/* ---- /tool/ CLS: reserve room for the late "output size" box (#cd-size) and the share row (2026-10-30) ---- */
@media (min-width:861px){
#v3 #v3-setup[open]{--cds1:162px;--cds2:64px}
#v3 #v3-setup[open]:not(:has(#cd-size)):not(:has(.cd-preset-share)){padding-bottom:calc(14px + var(--cds1) + var(--cds2))!important}
#v3 #v3-setup[open]:has(#cd-size):not(:has(.cd-preset-share)){padding-bottom:calc(14px + var(--cds2))!important}
}
@media (min-width:1000px){#v3 #v3-setup[open]{--cds1:133px}}
@media (min-width:1200px){#v3 #v3-setup[open]{--cds1:112px}}
/* /tool/ CLS (mobile): the Kruti Dev header pill was shown by tool-chrome.css then hidden by JS; hide it from first paint like every other page */
html body #cd-site-head .hdr-ft{display:none!important}
@media(max-width:860px){body:has(#cd-chrome-css) #cd-site-head .wrap{gap:10px}body:has(#cd-chrome-css) #cd-site-head .nav-toggle{flex:none;width:42px}body:has(#cd-chrome-css) #cd-site-head .cd-lang{right:58px}body:has(#cd-chrome-css) #cd-site-head .brand{flex-shrink:0}}
@media(max-width:640px){body:has(#cd-chrome-css) #cd-site-head .header-actions{display:none!important}}

/* ---- cd-hub.css ---- */
/* Crop Desk design system v2 (2026-11-09 pm). Visual only: no text, heading, link or meta changes.
   One brand colour (teal) + neutrals; muted category tints for icons only. Light theme. */
:root{--hb-ink:#101828;--hb-text:#344054;--hb-muted:#667085;--hb-line:#e4e7ec;--hb-line2:#eaecf0;--hb-bg:#fff;--hb-soft:#f8fafc;--hb-soft2:#f2f4f7;--hb-brand:#0b6b60;--hb-brand-h:#095a51;--hb-brand-soft:#e7f3f1;--hb-r:12px;--hb-r-lg:16px;--hb-sh:0 1px 2px rgba(16,24,40,.05);--hb-sh-h:0 4px 12px -2px rgba(16,24,40,.08),0 2px 4px -2px rgba(16,24,40,.04);--hb-font:"Inter","Noto Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
html body{background:var(--hb-bg);color:var(--hb-text)}
main h1,main h2,main h3{color:var(--hb-ink);letter-spacing:-.015em}
main h2{font-weight:700}
a{text-underline-offset:2px}
:focus-visible{outline:2px solid var(--hb-brand);outline-offset:2px}

/* ---------- Header ---------- */
html body .site-head{background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--hb-line2);box-shadow:none}
html body .site-head .brand-tag{color:var(--hb-muted)}
html body .site-head .nav a{color:var(--hb-text);font-weight:550;border-radius:8px;padding:6px 10px;text-decoration:none}
html body .site-head .nav a:hover{background:var(--hb-soft2);color:var(--hb-ink)}
html body .site-head .nav a[aria-current="page"]{background:var(--hb-brand-soft);color:var(--hb-brand)}
.cd-hs{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 10px 0 12px;border:1px solid var(--hb-line);border-radius:10px;background:var(--hb-soft);color:var(--hb-muted)!important;text-decoration:none!important;font:500 14px/1 var(--hb-font);flex:0 1 300px;min-width:0;margin-inline:auto 8px;cursor:pointer;transition:border-color .15s,background .15s}
.cd-hs:hover{border-color:#cfd4dc;background:#fff}
.cd-hs-t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd-hs kbd{font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--hb-muted);background:#fff;border:1px solid var(--hb-line);border-radius:5px;padding:3px 6px}
@media (max-width:899px){.cd-hs{flex:0 0 40px;width:40px;padding:0;justify-content:center;margin-inline:auto 6px;background:#fff}.cd-hs-t,.cd-hs kbd{display:none}}

/* ---------- Buttons ---------- */
html body .btn{border-radius:10px!important;font-weight:600;box-shadow:none}
html body .btn:not(.btn-ghost){background:var(--hb-brand)!important;color:#fff!important;border:1px solid var(--hb-brand)}
html body .btn:not(.btn-ghost):hover{background:var(--hb-brand-h)!important}
html body .btn.btn-ghost{background:#fff!important;color:var(--hb-ink)!important;border:1px solid var(--hb-line)!important}
html body .btn.btn-ghost:hover{border-color:#cfd4dc!important;background:var(--hb-soft)!important}
html body .btn.btn-ghost[aria-pressed="true"]{background:var(--hb-brand-soft)!important;border-color:var(--hb-brand)!important;color:var(--hb-brand)!important}
.cd-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:10px;background:var(--hb-brand);color:#fff!important;font-weight:600;text-decoration:none!important;border:1px solid var(--hb-brand);transition:background .15s}
.cd-btn:hover{background:var(--hb-brand-h)}
.cd-btn-2{background:#fff;color:var(--hb-ink)!important;border-color:var(--hb-line)}
.cd-btn-2:hover{background:var(--hb-soft)}

/* ---------- Tool cards (one system everywhere) ---------- */
html body .hm-card,html body .hc,html body .ccard{background:#fff;border:1px solid var(--hb-line);border-radius:var(--hb-r);box-shadow:var(--hb-sh);transition:border-color .15s,box-shadow .15s,transform .15s}
html body .hm-card::before,html body .hc::before,html body .ccard::before{content:none!important}
@media (hover:hover){html body .hm-card:hover,html body .hc:hover,html body .ccard:hover{border-color:#cfd4dc;box-shadow:var(--hb-sh-h);transform:translateY(-1px)}}
html body .hm-card .hc-i,html body .hc .hc-i,html body .ccard .ci,html body .cd-hicon{width:40px!important;height:40px!important;min-width:40px;border-radius:10px!important;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--cd-acc,var(--g1,#0b6b60)) 10%,#fff)!important;color:var(--cd-acc,var(--g1,#0b6b60))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cd-acc,var(--g1,#0b6b60)) 16%,transparent)!important;border:0!important;font-size:19px}
html body .cd-hicon{background:color-mix(in srgb,var(--g1,#0b6b60) 10%,#fff)!important;color:var(--g1,#0b6b60)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--g1,#0b6b60) 16%,transparent)!important}
html body .hm-card .hc-i svg,html body .hc .hc-i svg,html body .ccard .ci svg,html body .cd-hicon svg{width:20px;height:20px;color:inherit!important;stroke:currentColor!important;fill:none}
html body .hm-card b,html body .hc b,html body .ccard b{color:var(--hb-ink);font-weight:600;letter-spacing:-.005em}
html body .hm-card small,html body .hc small,html body .ccard small{color:var(--hb-muted)}
html body .hm-card .hm-go{color:#98a2b3}
@media (max-width:767px){
 html body .hm-grid,html body .hgrid,html body .cgrid{display:grid;grid-template-columns:1fr 1fr!important;gap:8px!important}
 html body .hm-card,html body .hc,html body .ccard{flex-direction:column!important;align-items:flex-start!important;gap:8px!important;padding:12px!important;min-height:118px}
 html body .hm-card .hm-go{display:none}
 html body .hm-card b,html body .hc b,html body .ccard b{font-size:.9rem;line-height:1.25;display:block}
 html body .hm-card small,html body .hc small,html body .ccard small{font-size:.78rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px}
 html body .hx-govt .hgrid{grid-template-columns:1fr!important}
 html body .hx-govt .hc{min-height:0;flex-direction:row!important;align-items:center!important}
}
html body .hc .cd-rk,html body .ccard .cd-rk,html body .hm-card .cd-rk{display:block;width:auto;font-size:11.5px;margin-top:4px;color:var(--hb-muted);font-weight:500}
html body .cd-rk-n{background:var(--hb-soft2)!important;color:var(--hb-text)!important;font-weight:700!important;border-radius:6px!important;padding:0 6px!important}
html body .cd-rk-s{color:var(--hb-brand)!important;font-weight:600}
html body .hc>span:not(.hc-i),html body .ccard>.ct{min-width:0;max-width:100%}
/* category headings */
html body .cat-h,html body .hcat-h{font-size:1.1rem;font-weight:650;color:var(--hb-ink);display:flex;align-items:center;gap:10px;margin:28px 0 12px}
html body .cat-h .ci,html body .hcat-h .ci{width:30px!important;height:30px!important;min-width:30px;border-radius:8px!important;background:var(--hb-soft2)!important;color:var(--hb-text)!important;box-shadow:none!important}
html body .cat-h .ci svg,html body .hcat-h .ci svg{width:17px;height:17px;stroke:currentColor!important;color:inherit!important}
html body .cat-n{background:var(--hb-soft2);color:var(--hb-muted);border-radius:6px;padding:1px 7px;font-size:.75rem;font-weight:600}

/* ---------- Chips ---------- */
html body .hx-jump,html body .cd-fchips{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0 6px;margin:0 0 8px}
html body .hx-jump::-webkit-scrollbar,html body .cd-fchips::-webkit-scrollbar{display:none}
html body .hx-jump a,html body .cd-fchips button{flex:0 0 auto;white-space:nowrap;display:inline-flex;align-items:center;min-height:36px;padding:0 13px;border-radius:999px;border:1px solid var(--hb-line);background:#fff;color:var(--hb-text)!important;font-weight:550;font-size:.875rem;text-decoration:none;box-shadow:none}
html body .hx-jump a:hover,html body .cd-fchips button:hover{border-color:#cfd4dc;background:var(--hb-soft)}
@media (min-width:768px){html body .hx-jump{flex-wrap:wrap;overflow:visible}}
html body .cd-fchips{min-height:44px;margin:6px 0 10px}
html body .cd-fchips button{cursor:pointer;font:inherit;font-weight:550;font-size:.875rem}
html body .cd-fchips button[aria-pressed="true"]{background:var(--hb-ink);border-color:var(--hb-ink);color:#fff!important}
html body .cd-ff-hide{display:none!important}

/* ---------- Home: hero ---------- */
html body .hx-hero{background:linear-gradient(180deg,#f5f8f8 0,#fff 100%)!important;border-bottom:1px solid var(--hb-line2)}
html body .hx-hero::before,html body .hx-hero::after{display:none!important}
html body .hx-hero .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:28px;padding-bottom:28px}
html body .hx-hero .wrap>*{order:5!important}
html body .hx-hero .wrap>.eyebrow{order:1!important}html body .hx-hero .wrap>h1{order:2!important}html body .hx-hero .wrap>.lead{order:3!important}html body .hx-hero .wrap>.hsearch{order:4!important}html body .hx-hero .wrap>.cd-quick{order:6!important}html body .hx-hero .wrap>.hx-hint{order:7!important}html body .hx-hero .wrap>.hx-recent{order:8!important}
html body .hx-hero .eyebrow{background:#fff!important;border:1px solid var(--hb-line)!important;color:var(--hb-text)!important;font-weight:600;letter-spacing:.02em;font-size:.72rem;box-shadow:none!important}
html body .hx-hero .wrap>h1{font-size:clamp(1.6rem,4.2vw,2.6rem);line-height:1.15;margin:14px 0 10px;font-weight:750;max-width:20ch;letter-spacing:-.025em}
@media(min-width:900px){html body .hx-hero .wrap>h1{max-width:28ch}}
html body .hx-hero .wrap>h1,html body .hx-hero .wrap>h1 *{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--hb-ink)!important}
html body .hx-hero .wrap>.lead{font-size:1rem;line-height:1.55;color:var(--hb-muted);max-width:58ch;margin:0 auto 18px}
html body .hx-hero .hsearch{width:100%;max-width:620px;margin:0 auto 14px;border:1px solid #d0d5dd!important;border-radius:12px!important;min-height:54px;background:#fff!important;box-shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px -12px rgba(16,24,40,.12)!important;padding:3px 6px 3px 14px!important}
html body .hx-hero .hsearch:focus-within{border-color:var(--hb-brand)!important;box-shadow:0 0 0 4px rgba(11,107,96,.12)!important}
html body .hx-hero .hsearch input{border:0!important;box-shadow:none!important;background:transparent!important;outline:0!important;min-height:46px;font-size:1rem;padding-left:4px!important}
html body .hx-hero .wrap>.cd-quick{width:100%;max-width:760px;display:flex!important;flex-wrap:wrap;justify-content:center;gap:6px!important;margin:2px 0 8px!important}
html body .hx-hero .cd-quick .btn{min-height:36px!important;border-radius:999px!important;font-size:.84rem!important;font-weight:550;padding:0 13px!important;margin:0!important;background:#fff!important;border:1px solid var(--hb-line)!important;color:var(--hb-text)!important;box-shadow:none!important}
html body .hx-hero .cd-quick .btn:hover{border-color:#cfd4dc!important;background:var(--hb-soft)!important}
@media (max-width:767px){html body .hx-hero .wrap>.cd-quick{flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;max-width:100%}html body .hx-hero .wrap>.cd-quick::-webkit-scrollbar{display:none}html body .hx-hero .cd-quick .btn{flex:0 0 auto;white-space:nowrap}html body .hx-hero .wrap{padding-top:18px;padding-bottom:18px}}
html body .hx-hero .hx-hint{font-size:.8rem;color:#98a2b3;margin:4px 0 0}

/* ---------- Home: sections ---------- */
body.home main>section{scroll-margin-top:72px}
body.home .hx-most .hx-h,body.home .section-title,.cd-sec-hd h2{font-size:clamp(1.25rem,2.6vw,1.6rem);font-weight:700;letter-spacing:-.02em;margin:0 0 4px;text-align:left}
body.home .hx-sub,.cd-sec-hd p{color:var(--hb-muted);margin:0 0 16px;font-size:.95rem}
.cd-sec-hd{margin:0 0 4px}
body.home .hx-most,body.home .cd-sec,body.home .cats,body.home .feat,body.home .why,body.home .faq,body.home main>section:not(.hx-hero){padding-top:40px;padding-bottom:8px}
@media (max-width:767px){body.home .hx-most,body.home .cd-sec,body.home .cats,body.home main>section:not(.hx-hero){padding-top:28px}}
.cd-sec.cd-in,.cd-feat2{background:var(--hb-soft);border-top:1px solid var(--hb-line2);border-bottom:1px solid var(--hb-line2);padding-bottom:36px!important;margin-top:32px}
.cd-grps{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.cd-grps-3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.cd-grp{background:#fff;border:1px solid var(--hb-line);border-radius:var(--hb-r);padding:14px 16px 10px;box-shadow:var(--hb-sh)}
.cd-grp-h{display:flex;gap:12px;align-items:flex-start;text-decoration:none!important;color:inherit;padding-bottom:10px;border-bottom:1px solid var(--hb-line2);margin-bottom:6px}
.cd-grp-h b{display:block;color:var(--hb-ink);font-weight:650;font-size:.98rem}
.cd-grp-h small{display:block;color:var(--hb-muted);font-size:.82rem;margin-top:1px}
.cd-grp-h:hover b{color:var(--hb-brand)}
.cd-gi{width:36px;height:36px;min-width:36px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:var(--hb-brand-soft);color:var(--hb-brand)}
.cd-gi svg{width:19px;height:19px;stroke:currentColor;fill:none}
.cd-grp ul{list-style:none;margin:0;padding:0}
.cd-grp li a{display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:0 2px;color:var(--hb-text);text-decoration:none;font-size:.9rem;border-bottom:1px dashed transparent}
.cd-grp li+li a{border-top:1px solid var(--hb-line2)}
.cd-grp li a::after{content:"";width:7px;height:7px;border-right:1.6px solid #98a2b3;border-top:1.6px solid #98a2b3;transform:rotate(45deg);margin-right:4px;flex:none}
.cd-grp li a:hover{color:var(--hb-brand)}
.cd-feat2-in{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:center}
@media (max-width:767px){.cd-feat2-in{grid-template-columns:1fr;gap:16px}}
.cd-kicker{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--hb-brand);margin:0 0 6px}
.cd-feat2 h2{font-size:clamp(1.25rem,2.6vw,1.6rem);margin:0 0 8px;letter-spacing:-.02em}
.cd-feat2 p{color:var(--hb-muted);margin:0 0 14px;max-width:60ch}
.cd-feat2-cta{display:flex;gap:8px;flex-wrap:wrap}
.cd-feat2-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:8px}
.cd-feat2-steps li{counter-increment:s;display:grid;grid-template-columns:32px 1fr;column-gap:12px;align-items:start;background:#fff;border:1px solid var(--hb-line);border-radius:var(--hb-r);padding:12px 14px}
.cd-feat2-steps li::before{content:counter(s);grid-row:span 2;width:28px;height:28px;border-radius:8px;background:var(--hb-brand-soft);color:var(--hb-brand);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.85rem}
.cd-feat2-steps b{color:var(--hb-ink);font-weight:650}
.cd-feat2-steps span{color:var(--hb-muted);font-size:.88rem}
/* collapsible category grids (JS only; without JS everything shows) */
html.cd-js body.home .hcat:not(.cd-open):not(.hx-govt) .hgrid>.hc:nth-child(n+7){display:none}
.cd-more{display:none}
html.cd-js body.home .hcat .cd-more{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;min-height:40px;padding:0 14px;border:1px solid var(--hb-line);border-radius:10px;background:#fff;color:var(--hb-ink);font:600 .875rem/1 var(--hb-font);cursor:pointer}
html.cd-js body.home .hcat .cd-more:hover{background:var(--hb-soft)}
html.cd-js body.home .hcat.cd-open .cd-more .cd-more-a{transform:rotate(180deg)}
/* recently used + saved */
.cd-yours-slot:empty{display:none}
.cd-yours{padding-top:28px}
.cd-yours-g{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.cd-yours-g::-webkit-scrollbar{display:none}
.cd-yours-g a{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 10px;border:1px solid var(--hb-line);border-radius:10px;background:#fff;color:var(--hb-ink);text-decoration:none;font-weight:550;font-size:.88rem;white-space:nowrap}
.cd-yours-g a:hover{border-color:#cfd4dc;background:var(--hb-soft)}
.cd-yours-g a i{font-style:normal;width:26px;height:26px;border-radius:7px;background:var(--hb-brand-soft);color:var(--hb-brand);display:inline-flex;align-items:center;justify-content:center}
.cd-yours-g a i svg{width:15px;height:15px;stroke:currentColor;fill:none}
.cd-yours h2{font-size:1.05rem!important;margin:0 0 10px!important;display:flex;align-items:center;justify-content:space-between}
.cd-yours h2 button{font:500 .8rem var(--hb-font);color:var(--hb-muted);background:none;border:0;cursor:pointer;min-height:36px}
/* trust, guides, faq */
body.home .why .card,body.home section .card{background:#fff;border:1px solid var(--hb-line);border-radius:var(--hb-r);box-shadow:var(--hb-sh)}
body.home .why h3{font-size:1rem;font-weight:650}
body.home .why h3::first-letter{font-size:0;letter-spacing:0}
body.home .why p{color:var(--hb-muted);font-size:.9rem}
.cd-trust-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 0 0;font-size:.88rem}
.cd-trust-links a{color:var(--hb-brand);font-weight:550}
body.home .faq details{border:1px solid var(--hb-line);border-radius:var(--hb-r);background:#fff;padding:0 16px;margin:0 0 8px}
body.home .faq summary{min-height:52px;display:flex;align-items:center;font-weight:600;color:var(--hb-ink);cursor:pointer}
body.home .feat{background:#fff}
/* footer */
html body .site-foot{border-top:1px solid var(--hb-line2)}
html body .site-foot h2{font-size:.78rem!important;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
html body .site-foot li a{display:inline-block;padding:4px 0}
/* Croppi: smaller and quieter */
html body #cd-mascot{transform:scale(.62)!important;transform-origin:0 100%!important;opacity:.92}
@media (max-width:767px){html body #cd-mascot{transform:scale(.55)!important}}
/* ---------- Tool pages: tool first, help text after ---------- */
html:not([data-cd-exam]) body main>.tool-wrap,html:not([data-cd-exam]) body main>.wrap:has(>.tool-box),html:not([data-cd-exam]) body main>.wrap:has(>.pp){display:flex;flex-direction:column}
html:not([data-cd-exam]) body main>.tool-wrap>*,html:not([data-cd-exam]) body main>.wrap:has(>.tool-box)>*,html:not([data-cd-exam]) body main>.wrap:has(>.pp)>*{order:5}
html:not([data-cd-exam]) body main>.tool-wrap>:is(.crumbs,h1,.cd-trust,.cd-ai-bar,.mode-tabs,.mode-sub,.tool-box,.cd-ds-steps,.cd-fchips,#tools,.pp,.cd-adst:has(+#tools),.cd-adst:has(+.cd-fchips)),
html:not([data-cd-exam]) body main>.wrap:has(>.tool-box)>:is(.crumbs,h1,.cd-trust,.cd-ai-bar,.mode-tabs,.mode-sub,.tool-box,.cd-ds-steps),
html:not([data-cd-exam]) body main>.wrap:has(>.pp)>:is(.crumbs,h1,.cd-trust,.cd-ai-bar,.pp){order:1}
html body main>.wrap:has(>.pp)>.pp-req{order:2;margin-top:12px}
html body main .tool-wrap>.crumbs{font-size:.8rem;margin:8px 0 2px;color:var(--hb-muted)}
html body main .tool-wrap>.crumbs a{color:var(--hb-muted)}
html body main .tool-wrap>h1{font-size:clamp(1.35rem,4.4vw,2.1rem);line-height:1.2;margin:6px 0 8px;font-weight:750;letter-spacing:-.02em}
html body main .tool-wrap>h1,html body main .tool-wrap>h1 *{background:none!important;-webkit-text-fill-color:currentColor!important}
html body main .tool-wrap>.answer-box{margin-top:18px!important;border-radius:var(--hb-r)!important;border-color:var(--hb-line)!important;border-left:3px solid var(--hb-brand)!important;background:var(--hb-soft)!important}
html body main .tool-box{border-radius:var(--hb-r-lg);border:1px solid var(--hb-line);box-shadow:0 1px 2px rgba(16,24,40,.05),0 12px 32px -20px rgba(16,24,40,.18);background:#fff}
/* Upload zone */
html body main .dz{border:1.5px dashed #c4cbd5!important;background:var(--hb-soft)!important;border-radius:var(--hb-r)!important;min-height:148px;transition:border-color .15s,background .15s}
html body main .dz:hover,html body main .dz:focus-within,html body main .dz.drag,html body main .dz.over{border-color:var(--hb-brand)!important;background:var(--hb-brand-soft)!important}
/* Primary action */
html body main #go{min-height:50px;border-radius:10px!important;font-size:1rem;font-weight:650;background:var(--hb-brand)!important;color:#fff!important;border:1px solid var(--hb-brand)!important;box-shadow:0 1px 2px rgba(16,24,40,.08)!important}
html body main #go:hover{background:var(--hb-brand-h)!important}
html body main #go:disabled{opacity:.55}
html body main .mode-tabs{border-radius:12px}
html body main progress{accent-color:var(--hb-brand);height:8px;border-radius:999px}
html body main .cd-jump .btn{min-height:48px}
/* status/notes inside tools */
html body main .tool-box #status:not(:empty),html body main .tool-box .status:not(:empty){font-size:.92rem}
html body main .cd-privacy-badge a{color:var(--hb-text)!important;background:var(--hb-soft)!important;border:1px solid var(--hb-line)!important;border-radius:10px!important}
html body .cd-trust li{color:var(--hb-muted)}
/* ---------- Mobile tab bar ---------- */
.cd-tb{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(1.6) blur(12px);backdrop-filter:saturate(1.6) blur(12px);border-top:1px solid var(--hb-line);padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 24px -12px rgba(16,24,40,.18);transition:transform .22s cubic-bezier(.22,1,.36,1)}
.cd-tb.cd-tb-hide{transform:translateY(110%)}
.cd-tb-in{display:grid;grid-template-columns:repeat(5,1fr);max-width:560px;margin:0 auto}
.cd-tb a,.cd-tb button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;border:0;background:none;color:#475467;font:600 11px/1.1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-decoration:none;border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cd-tb svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cd-tb [aria-current="page"]{color:var(--hb-brand)}
.cd-tb .cd-tb-s span.cd-tb-ic{display:flex;align-items:center;justify-content:center;width:44px;height:30px;border-radius:999px;background:var(--hb-brand);color:#fff}
.cd-tb .cd-tb-s svg{width:19px;height:19px}
.cd-tb-sp{display:none;height:72px}
@media (max-width:767px){html.cd-tb-on .cd-tb{display:block}html.cd-tb-on .cd-tb-sp{display:block}
 html.cd-tb-on #cd-mascot{bottom:calc(74px + env(safe-area-inset-bottom,0px))!important;transition:bottom .22s}
 html.cd-tb-on.cd-tb-down #cd-mascot{bottom:calc(10px + env(safe-area-inset-bottom,0px))!important}}
.cd-dpill{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:70;display:none;align-items:center;gap:4px;background:#0b1220;color:#fff;border-radius:999px;padding:5px;box-shadow:0 14px 34px -12px rgba(16,24,40,.5);transition:opacity .2s,transform .2s}
.cd-dpill.cd-tb-hide{opacity:0;pointer-events:none;transform:translate(-50%,16px)}
.cd-dpill button,.cd-dpill a{border:0;background:none;color:#fff;font:600 13px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding:9px 13px;border-radius:999px;cursor:pointer;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.cd-dpill button:hover,.cd-dpill a:hover{background:rgba(255,255,255,.12)}
.cd-dpill kbd{font:600 11px/1 ui-monospace,monospace;background:rgba(255,255,255,.16);border-radius:5px;padding:3px 5px}
@media (min-width:768px){html.cd-tb-on .cd-dpill{display:inline-flex}}

/* ---------- Palette + sheets ---------- */
.cd-ov{position:fixed;inset:0;z-index:2147483000;background:rgba(11,18,32,.45);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .18s}
.cd-ov.on{opacity:1}
@media (min-width:768px){.cd-ov{align-items:flex-start;padding-top:10vh}}
.cd-pal,.cd-sheet{width:100%;max-width:600px;max-height:86vh;display:flex;flex-direction:column;background:#fff;color:var(--hb-text);border-radius:22px 22px 0 0;box-shadow:0 -10px 40px rgba(11,18,32,.25);transform:translateY(24px);transition:transform .22s cubic-bezier(.22,1,.36,1);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;padding-bottom:env(safe-area-inset-bottom,0px)}
.cd-ov.on .cd-pal,.cd-ov.on .cd-sheet{transform:none}
@media (min-width:768px){.cd-pal,.cd-sheet{border-radius:20px}}
.cd-pal-h{display:flex;gap:8px;align-items:center;padding:12px 12px 8px;border-bottom:1px solid var(--hb-line)}
.cd-pal-h input{flex:1;min-height:48px;border:2px solid #d6e4ef;border-radius:14px;padding:0 14px;font:inherit;font-size:16px;color:var(--hb-ink);outline:0}
.cd-pal-h input:focus{border-color:var(--hb-brand);box-shadow:0 0 0 4px rgba(20,184,166,.16)}
.cd-x{border:0;background:var(--hb-soft);color:#344054;width:44px;height:44px;min-width:44px;border-radius:12px;font-size:20px;cursor:pointer}
.cd-pal-b{overflow:auto;padding:6px 8px 14px;overscroll-behavior:contain}
.cd-pal-b h3{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:#8a93a3;margin:12px 8px 4px;font-weight:750}
.cd-row{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:12px;color:var(--hb-ink);text-decoration:none}
.cd-row:hover,.cd-row.sel{background:var(--hb-soft2)}
.cd-row .cd-ri{width:34px;height:34px;min-width:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;background:color-mix(in srgb,var(--cd-acc,#0b6b60) 10%,#fff);color:var(--cd-acc,#0b6b60)}
.cd-row .cd-rt{flex:1;min-width:0}
.cd-row .cd-rt b{display:block;font-weight:650;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd-row .cd-rt small{display:block;color:var(--hb-muted);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd-star{border:0;background:none;font-size:20px;line-height:1;color:#c0c7d2;width:40px;height:40px;border-radius:10px;cursor:pointer}
.cd-star[aria-pressed="true"]{color:#f5a524}
.cd-empty{color:var(--hb-muted);padding:8px;font-size:.9rem;margin:0}
.cd-sheet{padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px));gap:12px}
.cd-sheet-top{display:flex;align-items:flex-start;gap:12px}
.cd-sheet-top .cd-ok{width:44px;height:44px;min-width:44px;border-radius:50%;background:#dcfce7;color:#15803d;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900}
.cd-sheet-top div{flex:1}
.cd-sheet-top b{display:block;font-size:1.08rem;color:var(--hb-ink)}
.cd-sheet-top small{color:var(--hb-muted)}
.cd-sheet h4{margin:4px 0 0;font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:#8a93a3}
.cd-next3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cd-next3 a{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--hb-line);border-radius:14px;color:var(--hb-ink);text-decoration:none;font-weight:650;font-size:.82rem;line-height:1.25}
.cd-next3 a i{width:30px;height:30px;border-radius:8px;background:color-mix(in srgb,var(--cd-acc,#0b6b60) 10%,#fff);color:var(--cd-acc,#0b6b60);font-style:normal;display:flex;align-items:center;justify-content:center;font-weight:800}
.cd-shr{display:flex;gap:8px;flex-wrap:wrap}
.cd-shr a,.cd-shr button{flex:1 1 30%;min-height:46px;border-radius:13px;border:1px solid var(--hb-line);background:#fff;color:var(--hb-ink);font:700 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;cursor:pointer}
.cd-shr .cd-wa{background:#25d366;border-color:#25d366;color:#fff}
.cd-shr .cd-tg{background:#229ed9;border-color:#229ed9;color:#fff}
.cd-acct{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:linear-gradient(135deg,#f0fdf9,#eef4ff);border:1px solid #d5efe8}
.cd-acct p{margin:0;flex:1;font-size:.9rem;color:var(--hb-text)}
.cd-acct a{white-space:nowrap;background:var(--hb-ink);color:#fff;border-radius:11px;padding:10px 13px;font-weight:700;font-size:.85rem;text-decoration:none}
@media (prefers-reduced-motion:reduce){.cd-tb,.cd-dpill,.cd-ov,.cd-pal,.cd-sheet,html body .hm-card,html body .hc,html body .ccard{transition:none!important}html body .hm-card:hover,html body .hc:hover,html body .ccard:hover{transform:none}}
/* account page */
.cd-acc-card{border:1px solid #d5efe8;background:linear-gradient(135deg,#f0fdf9,#eef4ff);border-radius:18px;padding:14px 16px;margin:6px 0 14px}
.cd-acc-ben{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-weight:600;color:#1f2937}
#cd-account #af{max-width:420px!important;display:grid;gap:10px}
#cd-account #af input{min-height:48px;border:2px solid #d6e4ef;border-radius:12px;padding:0 12px!important;font-size:16px;margin-top:4px}
#cd-account #af input:focus{border-color:#0c6b62;outline:0;box-shadow:0 0 0 4px rgba(20,184,166,.16)}
#cd-account #af .btn{min-height:48px;border-radius:12px!important;padding:0 18px!important;font-weight:800}
#cd-account #af br{display:none}
/* rank badges inside column tiles */
html body .hc .cd-rk,html body .ccard .cd-rk,html body .hm-card .cd-rk{display:block;width:auto;font-size:11.5px;margin-top:4px}
html body .hc .cd-rk-n,html body .ccard .cd-rk-n,html body .hm-card .cd-rk-n{display:inline-block;width:auto}
html body .hc>span:not(.hc-i),html body .ccard>.ct{min-width:0;max-width:100%}
/* success sheet is non-blocking: page stays usable underneath */
.cd-ov.cd-ov-lite{background:transparent;pointer-events:none;align-items:flex-end;padding:0}
.cd-ov-lite .cd-sheet{pointer-events:auto;box-shadow:0 -12px 40px rgba(11,18,32,.22),0 0 0 1px rgba(11,18,32,.05)}
@media (min-width:768px){.cd-ov.cd-ov-lite{justify-content:flex-end;padding:0 20px 20px}.cd-ov-lite .cd-sheet{max-width:400px;border-radius:20px}}
@media (max-width:767px){html.cd-tb-on .cd-ov-lite .cd-sheet{margin-bottom:0}}
/* privacy badge: monoline lock instead of emoji */
html body main .cd-privacy-badge a{display:inline-flex!important;align-items:center;gap:8px}
html body main .cd-privacy-badge a::before{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat;color:var(--hb-brand)}
/* AI helper buttons: neutral, not purple pills */
html body .cd-ai-bar button,html body .cd-ai-bar .btn,html body .cd-ai-bar a{background:#fff!important;color:var(--hb-text)!important;border:1px solid var(--hb-line)!important;box-shadow:none!important;border-radius:999px!important;font-weight:550!important}
/* Desktop top banner: reads as an intentional, labelled slot */
@media (min-width:768px){html body .cd-adst-top{margin:10px auto!important;background:var(--hb-soft);border-radius:8px;max-width:748px!important}}
/* Performance: skip rendering work for long below-the-fold homepage sections */
body.home .cats,body.home .why,body.home .faq,body.home .feat,body.home main>section:nth-last-of-type(-n+3){content-visibility:auto;contain-intrinsic-size:auto 900px}
/* desktop grid refinements */
@media (min-width:768px){
 body.home .hm-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important;gap:12px!important}
 body.home .hm-card{padding:14px 16px!important;min-height:0!important;align-items:flex-start!important}
 body.home .hm-card .hm-go{display:none}
 html body .hgrid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))!important;gap:10px!important}
 html body .hc{padding:12px 14px!important;align-items:flex-start!important}
}
@media (min-width:900px){.cd-sec.cd-in .cd-grps{grid-template-columns:repeat(6,1fr)}.cd-sec.cd-in .cd-grp:nth-child(-n+3){grid-column:span 2}.cd-sec.cd-in .cd-grp:nth-child(n+4){grid-column:span 3}.cd-grps-3{grid-template-columns:repeat(3,1fr)}}
html body .cd-rk-tr{color:var(--hb-brand)!important;font-weight:600;font-style:normal}
html body .hm-card .hc-i,html body .hc .hc-i{filter:none!important}
html body .hm-grid .hm-card:first-child .hc-i{background:color-mix(in srgb,var(--cd-acc,var(--g1,#0b6b60)) 10%,#fff)!important;color:var(--cd-acc,var(--g1,#0b6b60))!important}
html body .hm-grid .hm-card:first-child{box-shadow:var(--hb-sh)!important;border:1px solid var(--hb-line)!important}
html body .cd-trend{color:var(--hb-brand)!important;font-weight:600}
.cd-dpill{display:none!important}

/* footer fix 2026-11-09: readable sister-sites block, wrapping rows, side padding */
footer.site-foot{overflow-x:clip}
footer.site-foot .wrap,footer.site-foot>p,footer.site-foot>nav,footer.site-foot>section{box-sizing:border-box;padding-left:max(16px,env(safe-area-inset-left))!important;padding-right:max(16px,env(safe-area-inset-right))!important;max-width:1200px;margin-left:auto!important;margin-right:auto!important}
footer.site-foot>p,footer.site-foot .cd-foot-pop,footer.site-foot .cd-foot-tests,footer.site-foot .cd-foot-mail,footer.site-foot .visit-counter{overflow-wrap:anywhere;word-break:normal;line-height:1.7;text-align:center}
footer.site-foot .cd-foot-tests{color:#a3b1c6!important}footer.site-foot .cd-foot-tests a{color:#cbd5e1!important}
footer.site-foot .visit-counter{color:#5eead4!important}
footer.site-foot section[aria-labelledby=other-free-tools-heading]{opacity:1!important;transform:none!important;background:transparent!important;border-top:1px solid rgba(148,163,184,.22);margin-top:18px!important;padding-top:16px!important;padding-bottom:4px}
footer.site-foot #other-free-tools-heading{color:#f1f5f9!important;font-size:.8rem!important;letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px;text-align:center}
footer.site-foot section[aria-labelledby=other-free-tools-heading] p{color:#a3b1c6!important;text-align:center;line-height:1.8;margin:0}
footer.site-foot section[aria-labelledby=other-free-tools-heading] a{color:#e2e8f0!important;text-decoration:underline;text-decoration-color:rgba(226,232,240,.35);text-underline-offset:3px}
footer.site-foot section[aria-labelledby=other-free-tools-heading] a:hover{text-decoration-color:currentColor}
footer.site-foot .cd-legal a{display:inline-block;padding:6px 2px}
/* home polish 2026-11-09 (on top of redesign v2) */
html body .hx-hero .wrap{padding-top:36px;padding-bottom:32px}
html body .hx-hero .wrap>.lead{max-width:56ch;margin:0 auto 18px;font-size:1.05rem;line-height:1.55}
html body .hx-hero .wrap>.hx-cta{order:7!important;margin:14px 0 0}
html body .hx-hero .wrap>.hx-hint{order:5!important;margin:10px 0 0}
html body .hx-hero .wrap>.cd-quick{order:6!important;margin:14px 0 0!important;justify-content:center;flex-wrap:wrap!important;overflow:visible!important}
html body .hx-hero .cd-quick .btn{min-height:44px!important;display:inline-flex;align-items:center}
.hx-cta-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border-radius:12px;background:var(--hb-brand,#0f766e);color:#fff!important;font-weight:650;text-decoration:none!important;box-shadow:0 1px 2px rgba(16,24,40,.08)}
.hx-cta-btn:hover{filter:brightness(1.07)}
.hx-cta-btn:focus-visible,.cd-btn:focus-visible,.hm-card:focus-visible,.cd-grp a:focus-visible,.cd-quick a:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
@media (max-width:560px){html body .hx-hero .wrap{padding-top:24px;padding-bottom:24px}html body .hx-hero .cd-quick{gap:8px!important}html body .hx-hero .cd-quick .btn{font-size:.85rem;padding:6px 12px!important}.hx-cta-btn{width:100%;justify-content:center}}
/* one search at a time: the header pill hides while the hero search is on screen */
html.cd-hero-search body.home .site-head .cd-hs{visibility:hidden;opacity:0;pointer-events:none}
body.home .site-head .cd-hs{transition:opacity .15s}
/* search suggestions */
.ts-list{list-style:none;margin:6px 0 0;padding:6px;position:absolute;left:0;right:0;top:100%;z-index:30;background:#fff;border:1px solid var(--hb-line,#e4e7ec);border-radius:12px;box-shadow:0 12px 32px rgba(16,24,40,.14);max-height:min(60vh,420px);overflow:auto;text-align:left}
.ts-list li a{display:block;padding:10px 12px;border-radius:8px;color:var(--hb-ink,#101828);text-decoration:none;min-height:44px}
.ts-list li a b{display:block;font-weight:600}.ts-list li a small{display:block;color:var(--hb-muted,#475467);font-size:.82rem}
.ts-list li[aria-selected=true] a,.ts-list li a:hover{background:var(--hb-brand-soft,#e6f4f1)}
.ts-list li[aria-selected=true] a{outline:2px solid var(--hb-brand,#0f766e);outline-offset:-2px}
.ts-list .ts-none{padding:10px 12px;color:var(--hb-muted,#475467)}
#tsearch:focus-visible{outline:none}.hsearch:focus-within{box-shadow:0 0 0 3px rgba(37,99,235,.35)!important;border-color:#2563eb!important}
/* popular + India cards */
html body .hm-grid{gap:12px}
html body .hm-card{min-height:76px;align-items:center}
.cd-grp{transition:border-color .15s,box-shadow .15s}
@media (hover:hover){.cd-grp:hover{border-color:#cfd4dc;box-shadow:var(--hb-sh-h)}}
.cd-grp li a{min-height:44px}
/* featured bulk cropper */
.cd-feat2 .cd-feat2-in{grid-template-columns:1fr 1fr;align-items:center}
.cd-feat2 .cd-feat2-steps{margin:0 0 16px}
.cd-btn-lg{min-height:48px;padding:0 22px;font-size:1rem;display:inline-flex;align-items:center;gap:8px}
.cd-feat2-shot{margin:0}.cd-feat2-shot img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--hb-line,#e4e7ec);box-shadow:0 12px 32px rgba(16,24,40,.12)}
.cd-feat2-shot figcaption{margin-top:8px;text-align:center}
.cd-feat2-note{margin-top:10px!important}
@media (max-width:767px){.cd-feat2 .cd-feat2-in{grid-template-columns:1fr}.cd-feat2-cta .cd-btn{flex:1 1 100%;justify-content:center}}
/* mobile nav drawer */
@media (max-width:899px){.site-head .nav.open a{min-height:44px;display:flex;align-items:center}}
.nav-toggle{min-width:44px;min-height:44px}
.nav-toggle:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
/* homepage v3 layout (2026-11-09, target design): two-column hero, featured card, category tiles, side-by-side audiences, trust row */
html body .hx2 .wrap{display:block!important;text-align:left;padding-top:40px;padding-bottom:28px}
html body .hx2 .hx2-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center}
html body .hx2 .hx2-txt{text-align:left}
html body .hx2 .eyebrow{display:inline-block;margin:0 0 14px}
html body .hx2 h1{font-size:clamp(1.85rem,4.2vw,3.1rem)!important;line-height:1.1!important;letter-spacing:-.03em;margin:0 0 14px!important;max-width:18ch;text-align:left!important;font-weight:780;color:var(--hb-ink,#101828)}
html body .hx2 .hx2-acc{color:var(--hb-brand,#0f766e);background:linear-gradient(90deg,#0f766e,#2563eb);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html body .hx2 .lead{text-align:left!important;margin:0 0 20px!important;max-width:52ch;font-size:1.08rem;color:var(--hb-muted,#475467)}
.hx2-btns{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.hx2-btns .cd-btn{min-height:48px;display:inline-flex;align-items:center;gap:8px;padding:0 22px;border-radius:12px;font-weight:650;text-decoration:none!important}
.hx2-how{background:#fff!important;border:1px solid var(--hb-line,#d0d5dd)!important;color:var(--hb-ink,#101828)!important}
.hx2-art{display:flex;justify-content:center}.hx2-art svg{width:100%;max-width:420px;height:auto}
.hx2-search{margin-top:28px;background:#fff;border:1px solid var(--hb-line,#e4e7ec);border-radius:16px;padding:16px;box-shadow:0 8px 28px rgba(16,24,40,.06)}
html body .hx2 .hsearch{width:100%!important;max-width:none!important;margin:0!important}
html body .hx2 .hx-hint{text-align:left;margin:8px 2px 0!important}
.hx2-quick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.hx2-ql{font-weight:650;color:var(--hb-ink,#101828);font-size:.9rem}
html body .hx2 .cd-quick{display:flex;flex-wrap:wrap;gap:8px;margin:0!important;justify-content:flex-start!important}
html body .hx2 .cd-quick .btn{min-height:44px!important;border-radius:999px!important}
.hx2-feat .cd-feat2-in{background:#fff;border:1px solid var(--hb-line,#e4e7ec);border-radius:20px;padding:28px;box-shadow:0 12px 32px rgba(16,24,40,.07)}
html body .cd-feat2.hx2-feat{background:transparent!important;border:0!important;margin-top:28px;padding-bottom:8px!important}
.hx2-pills{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0}
.hx2-pills li{background:var(--hb-brand-soft,#e6f4f1);color:#0b5e57;border-radius:999px;padding:6px 12px;font-size:.85rem;font-weight:600}
.hx2-cats{padding:28px 0 8px}
.hx2-tiles{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;margin-top:12px}
.hx2-tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:16px 8px;background:#fff;border:1px solid var(--hb-line,#e4e7ec);border-radius:14px;text-decoration:none!important;color:var(--hb-ink,#101828);min-height:44px;transition:border-color .15s,box-shadow .15s,transform .15s}
.hx2-tile b{font-size:.9rem;font-weight:650;line-height:1.25}.hx2-tile small{font-size:.76rem;color:var(--hb-muted,#475467);line-height:1.3}
.hx2-ti{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--hb-brand-soft,#e6f4f1);color:var(--hb-brand,#0f766e)}
.hx2-ti svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.hx2-tile:hover{border-color:#cfd4dc;box-shadow:0 8px 20px rgba(16,24,40,.08);transform:translateY(-1px)}}
.hx2-tile:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.hx2-aud{background:transparent!important;margin-top:24px}
.hx2-aud-g{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.hx2-aud-c{background:var(--hb-soft,#f8fafc);border:1px solid var(--hb-line2,#eef0f3);border-radius:18px;padding:20px}
.hx2-aud-c .cd-sec-hd h2{font-size:1.25rem!important}
.hx2-aud-c .cd-grps,.hx2-aud-c .cd-grps-3{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px}
.hx2-aud-c .cd-grp{grid-column:auto!important}
.hx2-trust{padding:32px 0 12px}
.hx2-steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0 16px;padding:0}
.hx2-steps li{counter-increment:s;background:#fff;border:1px solid var(--hb-line,#e4e7ec);border-radius:14px;padding:14px 16px 14px 56px;position:relative}
.hx2-steps li::before{content:counter(s);position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:8px;background:var(--hb-brand-soft,#e6f4f1);color:var(--hb-brand,#0f766e);font-weight:700;display:grid;place-items:center}
.hx2-steps b{display:block;color:var(--hb-ink,#101828)}.hx2-steps span{color:var(--hb-muted,#475467);font-size:.9rem}
.hx2-trow{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:0;padding:14px 16px;border:1px solid var(--hb-line2,#eef0f3);border-radius:14px;background:#fff}
.hx2-trow li{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--hb-ink,#101828);font-size:.92rem}.hx2-trow svg{color:#16a34a}
@media (max-width:1100px){.hx2-tiles{grid-template-columns:repeat(4,1fr)}}
@media (max-width:899px){.hx2-aud-g{grid-template-columns:1fr}}
@media (max-width:767px){
 html body .hx2 .wrap{padding-top:20px;padding-bottom:20px}
 html body .hx2 .hx2-grid{grid-template-columns:1fr;gap:0}
 .hx2-art{display:none}
 html body .hx2 h1{font-size:1.8rem!important;max-width:none}
 html body .hx2 .lead{font-size:1rem;margin-bottom:14px!important}
 .hx2-search{margin-top:16px;padding:12px}
 .hx2-btns .cd-btn{flex:1 1 auto;justify-content:center}
 .hx2-feat .cd-feat2-in{padding:18px}
 .hx2-tiles{grid-template-columns:repeat(2,1fr)}
 .hx2-aud-c{padding:14px}.hx2-aud-c .cd-grps,.hx2-aud-c .cd-grps-3{grid-template-columns:1fr!important}
 .hx2-steps{grid-template-columns:1fr}
}
html body .hx2 .hx-hint{max-width:none!important;width:auto}
@media (max-width:767px){.hx2-btns{flex-wrap:nowrap}.hx2-btns .cd-btn{flex:1 1 0;padding:0 12px;font-size:.95rem}}
/* ===== W1 wide layout + readable text + header pills + footer fill (2026-11-09) ===== */
@media not (prefers-color-scheme:dark){
 :root{--hb-muted:#374151;--hb-text:#1f2937;--hb-ink:#0f172a;--muted:#374151;--cd-muted:#374151;--ink:#0f172a;--cd-ink:#0f172a}
 html body main{color:#1f2937}
 html body main h1,html body main h2,html body main h3{color:#0f172a}
 html body main small,html body main .small,html body main .meta,html body main .hx-sub,html body main .hx-hint,html body main .crumbs,html body .hm-card small,html body .hx2-tile small,html body .cd-grp-h small,html body main .lead,html body main p{color:#374151}
 html body main .crumbs a{color:#1f2937}
 html body .hx2 .hx2-acc{-webkit-text-fill-color:transparent}
}
.cd-rv{opacity:1!important;transform:none!important;transition:none!important}
/* shared container */
:root{--cd-wrap:1240px}
@media (min-width:1024px){
 html body main .wrap,html body main .tool-wrap,html body .site-head>.wrap,html body footer.site-foot .wrap,html body footer.site-foot>section,html body footer.site-foot>p,html body footer.site-foot>nav{max-width:var(--cd-wrap)!important;margin-left:auto!important;margin-right:auto!important;padding-left:24px!important;padding-right:24px!important;box-sizing:border-box}
 html body .home-intro .wrap,html body .hx-hero .wrap{max-width:var(--cd-wrap)!important}
 /* article / prose pages: reading column + sticky side panel */
 html body main .wrap:has(>article.article),html body main .wrap:has(>.prose){display:grid!important;grid-template-columns:minmax(0,1fr) 300px;column-gap:48px;align-items:start}
 html body main .wrap:has(>article.article)>*,html body main .wrap:has(>.prose)>*{grid-column:1;max-width:none}
 html body main .wrap>article.article,html body main .wrap>.prose{max-width:820px!important;width:100%}
 html body main .wrap>.cd-side{grid-column:2;grid-row:1/span 40;position:sticky;top:88px}
}
.cd-side{display:none}
@media (min-width:1024px){.cd-side{display:block}}
.cd-side-card{background:#fff;border:1px solid var(--hb-line,#e4e7ec);border-radius:16px;padding:18px;box-shadow:0 8px 24px rgba(16,24,40,.06);margin-bottom:16px}
.cd-side-card h2{font-size:1rem!important;margin:0 0 10px!important;color:#0f172a}
.cd-side-card ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.cd-side-card li a{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 8px;border-radius:10px;color:#1f2937!important;text-decoration:none!important;font-weight:550;font-size:.93rem}
.cd-side-card li a:hover{background:var(--hb-soft2,#f2f4f7)}
.cd-side-card li a::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--hb-brand,#0b6b60);flex:none}
.cd-side-cta{display:flex!important;justify-content:center;margin-top:10px}
/* header: centred nav pills */
.cd-cat{position:relative}
.cd-cat>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px;color:var(--hb-text);font-weight:550;border-radius:999px;padding:8px 14px;min-height:40px;box-sizing:border-box}
.cd-cat>summary::-webkit-details-marker{display:none}
.cd-cat>summary svg{transition:transform .15s}.cd-cat[open]>summary svg{transform:rotate(180deg)}
.cd-cat-m{display:grid;gap:2px}
.cd-cat-m a{white-space:nowrap}
@media (min-width:1100px){
 html body .site-head>.wrap{display:flex!important;align-items:center;gap:14px}
 html body .site-head .nav{order:2;margin:0 auto!important;display:flex!important;align-items:center;gap:4px;flex-wrap:nowrap}
 html body .site-head .nav>a,html body .site-head .cd-cat>summary{padding:8px 14px!important;border-radius:999px!important;min-height:40px;display:inline-flex;align-items:center;font-size:.94rem;white-space:nowrap}
 html body .site-head .nav>a:hover,html body .site-head .cd-cat>summary:hover{background:var(--hb-soft2,#f2f4f7)}
 html body .site-head .nav>a[aria-current="page"]{background:var(--hb-brand-soft)!important;color:var(--hb-brand)!important}
 html body .site-head .cd-hs{order:3;flex:0 1 210px!important;margin-inline:0!important}
 .cd-cat-m{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);min-width:250px;background:#fff;border:1px solid var(--hb-line,#e4e7ec);border-radius:14px;padding:8px;box-shadow:0 16px 40px rgba(16,24,40,.14);z-index:50}
 .cd-cat-m a{display:flex!important;align-items:center;min-height:40px;padding:6px 12px!important;border-radius:10px!important}
}
@media (min-width:1100px) and (max-width:1279px){html body .site-head .brand-tag{display:none}}
@media (min-width:900px) and (max-width:1099px){html body .site-head .nav a[data-n="blog"],html body .site-head .nav a[data-n="home"]{display:none}.cd-cat-m{position:absolute;top:calc(100% + 8px);right:0;min-width:240px;background:#fff;border:1px solid var(--hb-line);border-radius:14px;padding:8px;box-shadow:0 16px 40px rgba(16,24,40,.14);z-index:50}}
@media (max-width:899px){.cd-cat>summary{display:flex;min-height:44px;padding:10px 12px}.cd-cat-m{padding:0 0 6px 14px}.cd-cat-m a{min-height:44px;display:flex;align-items:center}}
/* homepage hero: 2 columns, H1 on 2 lines, big art, full-width search */
@media (min-width:1024px){
 html body .hx2 .hx2-grid{grid-template-columns:minmax(0,1.22fr) minmax(0,1fr)!important;gap:40px}
 html body .hx2 h1{max-width:none!important;font-size:clamp(2.3rem,3.25vw,3.15rem)!important}
 html body .hx2 h1 .hx2-acc{display:block;white-space:nowrap}
 .hx2-art svg{max-width:540px!important}
 html body .hx2 .lead{max-width:60ch;font-size:1.12rem}
 .hm-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 html body .hx-most .wrap,html body .hx2-cats .wrap{max-width:var(--cd-wrap)!important}
}
/* footer reaches the bottom: no white strip */
html body{padding-bottom:0!important}
html body footer.site-foot{padding-bottom:calc(var(--cdpb,0px) + 24px)!important;margin-bottom:0!important}
.cd-tb-sp{background:#0b1220}
@media (min-width:1024px){
 html body footer.site-foot .foot-grid{display:grid!important;grid-template-columns:1.4fr repeat(5,minmax(0,1fr))!important;gap:32px!important}
 html body footer.site-foot #other-free-tools-heading{text-align:left}
 html body footer.site-foot>section p,html body footer.site-foot .cd-foot-pop{text-align:left!important}
}
@media (min-width:1024px){
 html body .hx2 .hx2-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)!important}
 html body .hx2 h1{font-size:clamp(2rem,3.3vw,2.55rem)!important}
}
@media (min-width:1100px){
 html body .site-head>.wrap>*{order:4}
 html body .site-head>.wrap>.brand{order:1}
 html body .site-head>.wrap>.nav{order:2}
 html body .site-head>.wrap>.cd-hs{order:3}
}
@media (min-width:1100px){html body .site-head>.wrap>a:not(.brand):not(.cd-hs){order:4!important}}
.cd-tb-sp{background:#0f172a!important}
/* collapsible long content (closed by default) */
details.cd-fold{max-width:var(--cd-wrap,1240px);margin:12px auto;background:#fff;border:1px solid var(--hb-line,#e4e7ec);border-radius:14px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
details.cd-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 20px;font-weight:700;font-size:1.05rem;color:#0f172a;border-radius:14px}
details.cd-fold>summary::-webkit-details-marker{display:none}
details.cd-fold>summary:hover{background:var(--hb-soft,#f8fafc)}
details.cd-fold>summary:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.cd-fold-i{position:relative;width:28px;height:28px;flex:none;border-radius:50%;background:var(--hb-brand-soft,#e7f3f1);transition:transform .2s ease}
.cd-fold-i::before,.cd-fold-i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--hb-brand,#0b6b60);border-radius:2px;transition:transform .2s ease,opacity .2s}
.cd-fold-i::after{transform:rotate(90deg)}
details.cd-fold[open]>summary .cd-fold-i{transform:rotate(180deg)}
details.cd-fold[open]>summary .cd-fold-i::after{transform:rotate(0deg);opacity:0}
details.cd-fold[open]>summary{border-bottom:1px solid var(--hb-line2,#eaecf0);border-radius:14px 14px 0 0}
.cd-fold-b{padding:4px 20px 18px}
.cd-fold-b>section,.cd-fold-b>.prose{margin:0!important;padding-top:8px!important;border:0!important;box-shadow:none!important;background:transparent!important;max-width:none!important}
@media (max-width:767px){details.cd-fold{margin:10px 0}details.cd-fold>summary{padding:12px 14px}.cd-fold-b{padding:4px 14px 14px}}
/* header & footer spacing */
html body .site-head>.wrap{min-height:68px;padding-top:6px!important;padding-bottom:6px!important}
html body footer.site-foot{padding-top:56px!important}
html body footer.site-foot .foot-grid{row-gap:28px!important}
html body footer.site-foot h2{margin-bottom:14px!important;letter-spacing:.06em}
html body footer.site-foot li{margin:0 0 10px!important}
html body footer.site-foot>section,html body footer.site-foot .cd-foot-pop,html body footer.site-foot>nav{margin-top:22px!important;padding-top:20px!important;border-top:1px solid rgba(255,255,255,.08)}
details.cd-fold{display:block!important;width:100%;box-sizing:border-box;align-self:stretch;text-align:left}
/* tool pages: H1 + tabs + dropzone first; secondary rows move just below the tool (source order unchanged) */
html body main .tool-wrap:has(>.tool-box),html body main .wrap:has(>.pp){display:flex!important;flex-direction:column}
html body main .tool-wrap:has(>.tool-box)>*,html body main .wrap:has(>.pp)>*{order:10!important;max-width:100%}
html body main .tool-wrap:has(>.tool-box)>:has(~.tool-box),html body main .tool-wrap>.tool-box,html body main .wrap:has(>.pp)>:has(~.pp),html body main .wrap>.pp{order:5!important}
html body main .tool-wrap>.cd-ai-bar:has(~.tool-box),html body main .tool-wrap>.cd-steps:has(~.tool-box),html body main .tool-wrap>details.cd-fold:has(~.tool-box),html body main .tool-wrap>p.lead:has(~.tool-box),
html body main .wrap>.cd-ai-bar:has(~.pp),html body main .wrap>.cd-steps:has(~.pp),html body main .wrap>p.lead:has(~.pp),html body main .wrap>p.cd-jump:has(~.pp),html body main .wrap>p.small:has(~.pp){order:7!important}
html body main .tool-wrap:has(>.tool-box)>h1,html body main .wrap:has(>.pp)>h1{margin:4px 0 6px!important;font-size:clamp(1.5rem,2.4vw,2.1rem)!important;line-height:1.2!important}
html body main .tool-wrap:has(>.tool-box)>.crumbs,html body main .wrap:has(>.pp)>.crumbs{margin:10px 0 2px!important}
html body main :is(.tool-wrap,.wrap)>.cd-trust{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;font-size:.8rem!important;margin:0 0 10px!important;min-height:20px;white-space:nowrap}
html body main :is(.tool-wrap,.wrap)>.cd-steps{margin:10px 0!important}
html body main .tool-wrap>.mode-tabs{margin:0 0 6px!important}
html body main .tool-wrap>.mode-sub{margin:0 0 8px!important}
html body .site-head .brand{flex:none!important;white-space:nowrap}
html body .site-head:has(.header-actions) .cd-hs{display:none!important}
html body .site-head:has(.header-actions) .brand-tag{display:none!important}
@media (min-width:1100px){html body .site-head:has(.header-actions) .nav>a,html body .site-head:has(.header-actions) .cd-cat>summary{padding:8px 11px!important}}
html body main .wrap>.pp-exam:has(~.pp){order:7!important}
/* ===== hx4 homepage (final target): blue→purple theme ===== */
:root{--x4-b:#2563eb;--x4-p:#7c3aed;--x4-line:#e5e7f2;--x4-sh:0 6px 20px rgba(37,49,120,.07)}
body.home main>section,html body main>section.hx4,html body main>section.hx4-feat,html body main>section.hx4-cats,html body main>section.hx4-most,html body main>section.hx4-aud,html body main>section.hx2-trust{padding-top:0!important;padding-bottom:0!important;margin-top:32px!important;margin-bottom:0!important}
html body main>section.hx4{margin-top:0!important;background:linear-gradient(135deg,#eef4ff 0%,#f3efff 55%,#fbf9ff 100%)!important;border-bottom:1px solid #eceaf8}
html body .hx4 .wrap{padding-top:28px!important;padding-bottom:24px!important}
html body .hx4 .hx2-grid{align-items:center;gap:24px!important}
html body .hx4 h1{color:#0f172a!important;font-weight:800!important;margin:0 0 10px!important}
html body .hx4 h1 .hx4-l2{display:block;white-space:nowrap}
html body .hx4 h1 .hx2-acc{display:inline!important;white-space:nowrap;background:linear-gradient(90deg,var(--x4-b),var(--x4-p))!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:var(--x4-b)}
html body .hx4 .eyebrow{background:#fff;border:1px solid #dfe3fb;color:#3730a3!important;border-radius:999px;padding:5px 12px;font-size:.75rem;font-weight:700;letter-spacing:.04em}
html body .hx4 .lead{color:#374151!important;margin-bottom:16px!important}
.hx4 .hx2-btns .cd-btn svg{width:18px;height:18px}
html body .hx4 .hx4-bp{background:var(--x4-b)!important;border-color:var(--x4-b)!important;color:#fff!important;box-shadow:0 8px 18px rgba(37,99,235,.28)}
html body .hx4 .hx4-bp:hover{background:#1d4ed8!important}
html body .hx4 .hx4-bo{background:#fff!important;color:#1e3a8a!important;border:1.5px solid #c7d2fe!important}
html body .hx4 .hx4-bo svg{color:var(--x4-b)}
.hx4-art{display:flex;justify-content:flex-end}.hx4-art svg{width:100%;max-width:500px!important;height:auto}
html body .hx4 .hx2-search{margin-top:22px!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
html body .hx4 .hsearch{position:relative;background:#fff!important;border:1.5px solid #dfe3fb!important;border-radius:999px!important;min-height:58px!important;box-shadow:0 10px 30px rgba(37,49,120,.10)!important;padding-right:64px!important}
html body .hx4 .hsearch input{font-size:1.02rem!important}
.hx4-sbtn{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:14px;border:0;background:linear-gradient(135deg,var(--x4-b),#4f46e5);color:#fff;display:grid;place-items:center;cursor:pointer}
.hx4-sbtn:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}
html body .hx4 .hx-hint{display:none!important}
html body .hx4 .hx2-quick{flex-wrap:nowrap!important;margin-top:14px!important;overflow-x:auto;scrollbar-width:none}
html body .hx4 .hx2-quick .cd-quick{flex-wrap:nowrap!important}
html body .hx4 .cd-quick .btn{white-space:nowrap;background:#fff!important;border:1px solid #dfe3fb!important;color:#1e293b!important;font-weight:600;min-height:40px!important;padding:0 14px!important}
html body .hx4 .cd-quick .btn:hover{border-color:var(--x4-b)!important;color:var(--x4-b)!important}
html body .hx4 .hx-recent{margin-top:10px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;display:flex;flex-wrap:nowrap;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none;min-height:0}
html body .hx4 .hx-recent[hidden]{display:none!important}
html body .hx4 .hx-recent *{font-size:.85rem}
html body .hx4 .hx-recent h2,html body .hx4 .hx-recent h3,html body .hx4 .hx-recent p{margin:0!important;white-space:nowrap}
html body .hx4 .hx-recent a{white-space:nowrap;padding:4px 10px!important;min-height:32px;border-radius:999px;background:#fff;border:1px solid #e5e7f2}
section.cd-dyn-home:empty{display:none!important}
/* featured banner (compact) */
html body .hx4-feat .hx4-fcard{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:center;padding:22px 28px;border-radius:18px;background:linear-gradient(120deg,#f5f3ff 0%,#ede9fe 45%,#e0e7ff 100%);border:1px solid #ddd6fe;box-shadow:var(--x4-sh);max-height:none}
.hx4-fhd{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.hx4-fi{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#8b5cf6,var(--x4-p));color:#fff}
.hx4-badge{background:#fff;color:#6d28d9;border:1px solid #ddd6fe;border-radius:999px;padding:3px 10px;font-size:.75rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
html body .hx4-feat h2{font-size:1.45rem!important;margin:0 0 4px!important;color:#1e1b4b!important}
html body .hx4-feat p{margin:0 0 10px!important;color:#374151!important;max-width:62ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html body .hx4-feat .cd-feat2-cta{display:flex!important;align-items:center;gap:14px;margin:0 0 10px!important;-webkit-line-clamp:unset;overflow:visible}
html body .hx4-feat .hx4-bv{background:linear-gradient(135deg,#8b5cf6,var(--x4-p))!important;border:0!important;color:#fff!important;min-height:44px;padding:0 20px;border-radius:12px;box-shadow:0 8px 18px rgba(124,58,237,.28);font-weight:700}
.hx4-flink{color:#5b21b6!important;font-weight:600}
.hx4-checks{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.hx4-checks li{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #d1fae5;color:#065f46;border-radius:999px;padding:4px 12px;font-size:.82rem;font-weight:700}
.hx4-checks svg{width:15px;height:15px;color:#16a34a}
.hx4-fart{display:flex;justify-content:center}.hx4-fart svg{width:100%;max-width:330px;height:auto;max-height:190px}
/* category tiles */
html body .hx4-cats .hx2-tiles{grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:12px}
html body .hx4-cats .hx2-tile{border:1px solid var(--x4-line)!important;border-radius:14px!important;box-shadow:var(--x4-sh);padding:14px 8px!important}
html body .hx4-cats .hx2-ti{background:color-mix(in srgb,var(--tc) 12%,#fff)!important;color:var(--tc)!important}
html body .hx4-cats .hx2-tile b{color:#0f172a}
.hx-h{font-size:1.35rem!important;margin:0 0 12px!important}
/* popular */
.hx4-sh{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.hx4-sh .hx-h{margin:0!important}
.hx4-fire{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#fff1f2;color:#e11d48}
.hx4-va{margin-left:auto;font-weight:700;color:var(--x4-b)!important;white-space:nowrap}
html body .hx4-most .hx-sub{display:none}
html body .hx4-most .hm-card{border:1px solid var(--x4-line)!important;border-radius:14px!important;box-shadow:var(--x4-sh)!important;background:#fff!important}
.hm-rk{display:inline-block;margin-left:6px;font-size:.72rem;font-weight:800;color:#3730a3;background:#eef2ff;border-radius:999px;padding:2px 8px;vertical-align:middle}
.hm-uses{display:block;font-size:.78rem;color:#475569;margin-top:2px}
/* audiences */
html body .hx4-aud .hx2-aud-c{background:#fff!important;border:1px solid var(--x4-line)!important;border-radius:16px!important;box-shadow:var(--x4-sh);padding:20px!important}
html body .hx4-aud .cd-sec-hd h2{display:flex;align-items:center;gap:10px;font-size:1.2rem!important;color:#0f172a}
.hx4-flag{display:inline-flex;gap:4px}.hx4-flag svg{border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
html body .hx4-aud .cd-sec-hd p{margin:4px 0 12px!important}
.hx4-atg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hx4-at{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--x4-line);border-radius:12px;background:#fafbff;text-decoration:none!important;color:#0f172a!important;min-height:44px}
.hx4-at:hover{border-color:#c7d2fe;background:#fff}
.hx4-at b{display:block;font-size:.93rem}.hx4-at small{display:block;color:#475569;font-size:.8rem}
.hx4-ati{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;background:#eef2ff;color:var(--x4-b)}
.hx2-intl .hx4-ati{background:#f5f3ff;color:var(--x4-p)}
html body details.hx4-more{margin:12px 0 0!important;box-shadow:none}
html body details.hx4-more>summary{min-height:44px;font-size:.92rem;padding:8px 14px}
/* trust */
.hx4-trust{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0 0;padding:0}
.hx4-trust li{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--x4-line);border-radius:14px;padding:14px 16px;box-shadow:var(--x4-sh)}
.hx4-tri{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--tc) 12%,#fff);color:var(--tc)}
.hx4-trust b{display:block;color:#0f172a}.hx4-trust small{color:#475569}
html body .hx2-trust .hx2-steps{margin:0!important}
/* compact desktop hero */
@media (min-width:1024px){
 html body .hx4 h1{font-size:clamp(2rem,3.1vw,2.6rem)!important}
 html body .hx4 .hx2-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)!important}
 .hx4-art svg{max-height:270px}
}
@media (max-width:1023px){html body .hx4-cats .hx2-tiles{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media (max-width:767px){
 html body .hx4 h1 .hx4-l2,html body .hx4 h1 .hx2-acc{white-space:normal}
 html body .hx4 .wrap{padding-top:18px!important;padding-bottom:18px!important}
 html body .hx4-feat .hx4-fcard{grid-template-columns:1fr;padding:18px}
 .hx4-fart{display:none}
 html body .hx4-cats .hx2-tiles{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .hx4-atg{grid-template-columns:1fr}
 .hx4-trust{grid-template-columns:1fr}
 .hx4-sh{flex-wrap:wrap}
 body.home main>section{margin-top:24px!important}
}
@media (min-width:768px){
 html body .hx4-feat .hx4-fcard{padding:16px 24px!important;gap:16px}
 html body .hx4-feat h2{font-size:1.3rem!important}
 .hx4-fhd{margin-bottom:4px}
 html body .hx4-feat p{-webkit-line-clamp:2}
 .hx4-fart svg{max-height:170px}
 html body .hx4-feat .hx4-ftxt{display:grid;grid-template-columns:auto;align-content:center}
}
/* India / USA-UK panels: equal height, 4 icon tiles in a row */
html body .hx4-aud .hx2-aud-g{display:grid!important;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch!important}
html body .hx4-aud .hx2-aud-c{display:flex;flex-direction:column;height:100%;box-sizing:border-box}
html body .hx4-aud .cd-sec-hd p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#374151!important}
html body .hx4-atg{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px;align-items:stretch}
html body .hx4-at{flex-direction:column;align-items:center;text-align:center;justify-content:flex-start;gap:8px;padding:14px 8px;height:100%;box-sizing:border-box}
html body .hx4-at b{font-size:.86rem;line-height:1.25}
html body .hx4-at small{font-size:.75rem}
html body .hx4-ati,html body .hx2-intl .hx4-ati{width:44px;height:44px;background:color-mix(in srgb,var(--tc,#2563eb) 12%,#fff)!important;color:var(--tc,#2563eb)!important}
html body details.hx4-more{margin-top:auto!important}
html body .hx4-aud .hx4-atg{margin-bottom:12px}
html body details.hx4-more .cd-grps,html body details.hx4-more .cd-grps-3{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px;align-items:stretch!important}
html body details.hx4-more .cd-grp{background:#fafbff;border:1px solid var(--x4-line);border-radius:12px;padding:12px;height:100%;box-sizing:border-box;margin:0!important}
html body details.hx4-more .cd-grp-h{display:flex;gap:8px;align-items:flex-start;color:#0f172a!important;text-decoration:none!important;margin-bottom:6px}
html body details.hx4-more .cd-grp-h small{color:#475569!important}
html body details.hx4-more .cd-grp ul{margin:0;padding:0;list-style:none}
html body details.hx4-more .cd-grp li{margin:0}
html body details.hx4-more .cd-grp li a{display:block;padding:6px 0;color:#1f2937!important;font-weight:550;text-decoration:none}
html body details.hx4-more .cd-grp li a::after,html body details.hx4-more .cd-grp li a::before{content:none!important}
html body details.hx4-more .cd-grp li a:hover{color:var(--x4-b)!important}
@media (max-width:1100px){html body .hx4-atg{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:899px){html body .hx4-aud .hx2-aud-g{grid-template-columns:1fr}html body .hx4-aud .cd-sec-hd p{white-space:normal}}
@media (max-width:480px){html body details.hx4-more .cd-grps,html body details.hx4-more .cd-grps-3{grid-template-columns:1fr!important}}

/* hx5 2026-11-09: equal India / USA-UK panels, saturated icon tiles, compact featured banner */
@media (min-width:900px){html body .hx2-aud .hx2-aud-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:stretch!important}}
html body .hx2-aud-c{min-width:0}
html body .hx4-atg{grid-auto-rows:1fr}
html body .hx2-aud-c details{margin-top:auto}
html body .hx2-tiles{width:100%}
@media (min-width:1100px){html body .hx2-tiles{grid-template-columns:repeat(8,minmax(0,1fr))!important}}
html body .hx2-ti,html body .hx4-ati{background:var(--tc,#2563eb)!important;color:#fff!important;box-shadow:0 4px 10px color-mix(in srgb,var(--tc,#2563eb) 30%,transparent)}
html body .hx2-ti svg,html body .hx4-ati svg{stroke:#fff!important}
@media (min-width:900px){html body .hx4-fcard{padding:18px 26px!important;min-height:0!important;max-height:224px;overflow:hidden;align-items:center}
 html body .hx4-feat h2{margin:6px 0 4px!important}
 html body .hx4-feat .hx4-ftxt p{margin:0 0 8px!important}
 html body .hx4-fart svg{height:170px!important;width:auto!important;max-width:100%}
 html body .hx4-fart{opacity:1!important;filter:none!important}
 html body .hx4-checks{margin:6px 0 0!important}}
html body .hx4-cats .hx2-tile .hx2-ti,html body .hx2-aud .hx2-aud-c .hx4-at .hx4-ati,html body .hx2-intl .hx4-at .hx4-ati{background:var(--tc,#2563eb)!important;color:#fff!important}
/* hx6: compact hero for 125% laptop scaling (1093x600), nav pills from 961px, Quick Tools label on one line */
html body .hx-hero.hx4>.wrap{padding-top:22px!important;padding-bottom:18px!important}
html body .hx-hero.hx4 .eyebrow{margin:0 0 8px!important}
html body .hx-hero.hx4 h1{margin:0 0 8px!important}
html body .hx-hero.hx4 .lead{margin:0 0 12px!important}
html body .hx-hero.hx4 .hx2-btns{margin:0!important}
html body .hx-hero.hx4 .hx2-grid{align-items:center}
@media (max-height:700px) and (min-width:900px){html body .hx-hero.hx4 h1{font-size:2.1rem!important}html body .hx-hero.hx4 .hx4-art svg,html body .hx-hero.hx4 .hx2-art svg{max-height:210px}}
html body .hx2-quick .hx2-ql{white-space:nowrap;flex:none}
html body .hx2-quick{margin-top:10px!important}
@media (min-width:961px) and (max-width:1180px){html body .site-head .nav{display:flex!important;position:static!important;flex-direction:row!important;box-shadow:none!important;border:0!important;background:transparent!important;width:auto!important;padding:0!important}html body .site-head .nav-toggle{display:none!important}}
@media (min-width:961px) and (max-width:1180px){html body .site-head>.wrap{flex-wrap:nowrap!important}html body .site-head .nav{flex:1 1 auto!important;min-width:0;justify-content:center!important;align-items:center!important;gap:2px!important;font-size:.88rem!important;order:0}html body .site-head .nav>a,html body .site-head .cd-cat>summary{white-space:nowrap!important;padding:6px 8px!important;display:inline-flex!important;align-items:center;width:auto!important}html body .site-head .cd-cat{width:auto!important}}
@media (min-width:961px) and (max-width:1180px){html body #cd-acct{font-size:0!important;flex:none!important;width:40px;justify-content:center}html body #cd-acct svg{width:20px;height:20px}}
html body .site-head .nav a[aria-current="page"]{background:#eff6ff!important;color:#2563eb!important}
@media (min-width:961px) and (max-width:1180px){html body .site-head #cd-acct-nav{display:none!important}}
html body .hx-most .hm-card .hc-i{color:#fff!important;border-radius:12px}html body .hx-most .hm-card .hc-i svg{stroke:#fff!important}html body .hx-most .hm-card:nth-child(6n+1) .hc-i{background:#2563eb!important}html body .hx-most .hm-card:nth-child(6n+2) .hc-i{background:#7c3aed!important}html body .hx-most .hm-card:nth-child(6n+3) .hc-i{background:#16a34a!important}html body .hx-most .hm-card:nth-child(6n+4) .hc-i{background:#ea580c!important}html body .hx-most .hm-card:nth-child(6n+5) .hc-i{background:#dc2626!important}html body .hx-most .hm-card:nth-child(6n) .hc-i{background:#db2777!important}
/* ic2 2026-11-09: tool theme (blue-purple) + compressor two-column layout */
html body .tool-wrap .mode-tabs{display:flex;gap:6px;flex-wrap:wrap;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:6px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
html body .tool-wrap .mode-tabs a{border-radius:10px;padding:9px 16px;font-weight:700;color:#334155!important;text-decoration:none!important;min-height:40px;display:inline-flex;align-items:center}
html body .tool-wrap .mode-tabs a[aria-current],html body .tool-wrap .mode-tabs a.on,html body .tool-wrap .mode-tabs a.active{background:linear-gradient(135deg,#2563eb,#7c3aed)!important;color:#fff!important}
html body .tool-wrap .tool-box{border:1px solid #e2e8f0!important;border-radius:16px!important;box-shadow:0 8px 24px rgba(37,99,235,.06)!important;background:#fff!important}
html body .tool-wrap .tool-box .btn:not(.btn-ghost):not(.ic-dl){background:linear-gradient(135deg,#2563eb,#7c3aed)!important;border:0!important;color:#fff!important;font-weight:800;box-shadow:0 6px 16px rgba(37,99,235,.25)}
html body .tool-wrap .tool-box .btn:not(.btn-ghost):disabled{opacity:1!important;background:#94a3b8!important;box-shadow:none}
html body .tool-wrap .tool-box .btn-ghost[aria-pressed="true"]{background:#eff6ff!important;border-color:#2563eb!important;color:#1d4ed8!important}
html body .tool-wrap .dz{border:2px dashed #c7d2fe!important;background:linear-gradient(180deg,#f8faff,#f5f3ff)!important;border-radius:14px!important}
html body .tool-wrap .dz:hover,html body .tool-wrap .dz.over{border-color:#2563eb!important}
html body .tool-wrap .dz .ic-cta{color:#1d4ed8!important}
html body .tool-wrap .ic-dl{background:#16a34a!important;border:0!important;color:#fff!important;font-weight:800;font-size:1.05rem;min-height:52px;padding:0 26px;border-radius:12px;display:inline-flex;align-items:center;gap:8px;box-shadow:0 8px 20px rgba(22,163,74,.3);cursor:pointer}
html body .tool-wrap .ic-dl:hover{background:#15803d!important}
html body .tool-wrap .ic-again{background:none;border:0;color:#2563eb;font-weight:700;text-decoration:underline;cursor:pointer;min-height:44px;padding:0 8px}
html body .tool-wrap .ic-dl[hidden],html body .tool-wrap .ic-again[hidden],html body .tool-wrap #go[hidden]{display:none!important}
html body .ic2 .ic-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
html body .ic2 #go{min-height:52px;padding:0 30px;font-size:1.05rem;border-radius:12px}
html body .ic2 .ic-right{border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc;padding:14px;min-width:0}
html body .ic2 .ic-rh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px}
html body .ic2 .ic-rh b{font-size:1rem;color:#0f172a}
html body .ic2 .ic-stat{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe;border-radius:999px;padding:3px 10px}
html body .ic2 .ic-stat[hidden]{display:none}
html body .ic2 .ic-empty{margin:0;padding:28px 12px;text-align:center;color:#475569;border:1px dashed #cbd5e1;border-radius:12px;background:#fff;font-size:.92rem}
html body .ic2 .ic-right.has .ic-empty{display:none}
html body .ic2 .ic-cmp{margin:10px 0}
html body .ic2 .ic-cmp[hidden]{display:none}
html body .ic2 .ic-cmp-v{position:relative;border-radius:12px;overflow:hidden;background:repeating-conic-gradient(#e2e8f0 0 25%,#fff 0 50%) 0 0/16px 16px;line-height:0}
html body .ic2 .ic-cmp-v img{display:block;width:100%;height:auto;max-height:360px;object-fit:contain}
html body .ic2 .ic-cmp-b{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p,50%))}
html body .ic2 .ic-cmp-b img{width:100%;height:100%;object-fit:contain;max-height:none}
html body .ic2 .ic-cmp-h{position:absolute;top:0;bottom:0;left:var(--p,50%);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(15,23,42,.25)}
html body .ic2 .ic-cmp-l{position:absolute;top:8px;font:700 11px/1 system-ui;background:rgba(15,23,42,.7);color:#fff;padding:4px 7px;border-radius:6px}
html body .ic2 .ic-cmp-l.l{left:8px}html body .ic2 .ic-cmp-l.r{right:8px;background:#16a34a}
html body .ic2 .ic-cmp input[type=range]{width:100%;margin:8px 0 0;accent-color:#2563eb;min-height:32px}
html body .ic2 #list li{cursor:pointer;border-radius:10px}
html body .ic2 #list li.on{outline:2px solid #2563eb}
html body .ic2 #list li button{background:#16a34a!important;color:#fff!important;border:0!important;border-radius:8px;font-weight:700;min-height:40px;padding:0 14px}
html body .ic2 .ic-ai-row{margin:10px 0 0}
@media (min-width:1000px){html body .ic2{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px;align-items:start}
 html body .ic2 .ic-right{position:sticky;top:84px}
 html body .tool-wrap:has(.ic2){max-width:var(--cd-wrap,1240px)!important}}
html body details.cd-fold-h>summary>h2{display:inline;font-size:1.05rem!important;margin:0!important;line-height:1.3}
html body section#cd-seo{margin-top:12px!important;padding-top:0!important}
html body .tool-wrap .tool-box #go.ic-go2{background:#fff!important;color:#1d4ed8!important;border:1px solid #bfdbfe!important;box-shadow:none!important;min-height:44px!important;padding:0 14px!important;font-size:.9rem!important}
html body .tool-wrap .tool-box #go.ic-go2::before{content:"↻ ";}
html body .tool-wrap .tool-box button#ic-dl.ic-dl:not([hidden]){background:#16a34a!important;border-color:#16a34a!important;color:#fff!important}
html body .tool-wrap .tool-box button#ic-dl.ic-dl:not([hidden]):hover{background:#15803d!important}
/* hx7 (t1448): lower homepage – 3-col category grids, govt section, one-line chips, compact trust row */
html body .hx-cats .hx-jump{flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
html body .hx-cats .hx-jump a{min-height:40px;padding:0 11px!important}
@media (min-width:1000px){html body .hx-cats .hgrid,html body .hx-cats .hx-govt .hgrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 html body .hx-cats .hgrid:has(>.hc:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))!important}
 html body .hx-cats .hgrid:has(>.hc:nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))!important}}
@media (min-width:600px) and (max-width:999px){html body .hx-cats .hgrid,html body .hx-cats .hx-govt .hgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:599px){html body .hx-cats .hgrid,html body .hx-cats .hx-govt .hgrid{grid-template-columns:1fr!important}}
html body .hx-cats .hgrid>.hc{height:100%;box-sizing:border-box;background:#fff;border:1px solid #dbe3f4!important;border-radius:14px;transition:border-color .15s,box-shadow .15s}
html body .hx-cats .hgrid>.hc:hover{border-color:#a5b4fc!important;box-shadow:0 6px 18px rgba(79,70,229,.10)}
html body .hx-cats .hc b{color:#0f172a!important}
html body .hx-cats .hc small{color:#334155!important}
html body .hx-cats .hcat-h{color:#0f172a!important}
html body .hx-cats .hcat{margin-bottom:22px}
html body .hx-cats .hcat .cd-more,html body .hx-cats .hx7-allb{display:inline-flex;align-items:center;gap:6px;margin:12px 0 0;min-height:44px;padding:0 18px;border-radius:10px;border:1px solid #bfdbfe!important;background:#eff6ff!important;color:#1d4ed8!important;font-weight:700;font-size:.9rem;text-decoration:none}
html body .hx-cats .hcat .cd-more:hover,html body .hx-cats .hx7-allb:hover{background:#dbeafe!important}
html body .hx-cats .hx7-all{margin:0}
html body .hx7-trust{padding:18px 0 6px!important;background:none!important}
html body .hx7-trust .hx4-trust{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;margin:0!important;padding:0!important;list-style:none}
@media (max-width:640px){html body .hx7-trust .hx4-trust{grid-template-columns:1fr!important}}
html body .hx7-trust .hx4-trust li{background:#fff;border:1px solid #dbe3f4;border-radius:14px;padding:12px 14px!important;display:flex;gap:12px;align-items:center}
html body .hx7-trust .hx4-trust b{color:#0f172a}
html body .hx7-trust .hx4-trust small{color:#334155}
html body .hx7-trust details.hx7-how{margin-top:10px}
@media (max-width:599px){html body .hx-cats .hgrid>.hc{display:flex!important;flex-direction:row!important;align-items:center!important;gap:12px!important;padding:12px 14px!important;min-height:0!important}
 html body .hx-cats .hgrid>.hc .hc-i{flex:0 0 40px;width:40px;height:40px;margin:0!important}}
html.cd-js body.home .hx-cats .hcat:not(.cd-open):not(.hx-govt) .hgrid>.hc:nth-child(n+7){display:none!important}
/* ic3 (2026-11-09): one Download, fitted compare, compact done state, mascot hidden while a result is showing */
html body .tool-wrap .tool-box.ic2.ic-done #go.ic-go2,html body .tool-wrap .ic2.ic-done #go.ic-go2{background:none!important;border:0!important;box-shadow:none!important;color:#1d4ed8!important;font-weight:600!important;font-size:.88rem!important;min-height:44px!important;padding:0 8px!important;text-decoration:underline;width:auto!important}
html body .tool-wrap .ic2 .ic-again{font-size:.9rem;font-weight:600;min-height:44px}
@media (max-width:999px){html body .tool-wrap .ic2 #ic-dl:not([hidden]){display:flex!important;width:100%;justify-content:center}
 html body .tool-wrap .ic2 .ic-again:not([hidden]){display:block;margin:2px auto 0}}
html body .ic2.ic-done #list li button{background:none!important;border:0!important;box-shadow:none!important;color:#1d4ed8!important;font-weight:600!important;font-size:.82rem!important;min-height:32px!important;padding:0 4px!important;text-decoration:underline;width:auto!important}
html body .ic2.ic-done #list li button::before{content:"⬇ "}
html body .ic2 #list{margin:8px 0 0;padding:0}
html body .ic2 #list li{display:flex!important;align-items:center;gap:10px;padding:8px 10px!important;border:1px solid #e2e8f0;border-radius:10px;background:#fff;min-height:0!important;flex-wrap:wrap}
html body .ic2 #list li .info{flex:1 1 180px;font-size:.85rem;color:#1e293b;line-height:1.35}
html body .ic2 #list li>img{width:40px!important;height:40px!important;object-fit:cover;border-radius:6px;flex:0 0 40px}
html body .ic2 #sel{display:flex!important;gap:8px;overflow-x:auto;scrollbar-width:thin;padding:0 0 4px}
html body .ic2 #sel .sel-card{flex:0 0 auto;display:grid!important;grid-template-columns:44px auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:6px 10px 6px 6px!important;margin:0!important;border:1px solid #e2e8f0;border-radius:10px;background:#fff;width:auto!important;max-width:220px}
html body .ic2 #sel .sel-card img{grid-row:1/3;width:44px!important;height:44px!important;object-fit:cover;border-radius:6px;margin:0!important}
html body .ic2 #sel .sel-card .nm{font-size:.8rem;font-weight:600;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
html body .ic2 #sel .sel-card .sz{font-size:.75rem;color:#475569}
html body .ic2 .ic-cmp-v{--mh:420px;width:min(100%,calc(var(--mh) * var(--ar,1.5)));margin:0 auto;background:#f1f5f9}
@media (max-width:767px){html body .ic2 .ic-cmp-v{--mh:360px}}
html body .ic2 .ic-cmp-v>img.a{width:100%;height:100%;max-height:none;object-fit:cover}
html body .ic2 .ic-cmp-b img{object-fit:cover}
html body .ic2 .ic-cmp-l{top:auto;bottom:8px;font:600 11px/1 system-ui;background:rgba(15,23,42,.62);padding:5px 8px;border-radius:999px;letter-spacing:.02em}
html body .ic2 .ic-cmp-l.r{background:rgba(22,163,74,.9)}
html body .ic2 .ic-cmp-h::after{content:"";position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(15,23,42,.35)}
html body .ic2 .ic-cmp input[type=range]{margin:6px 0 0;min-height:28px}
html body .ic2 .ic-right .cd-win{margin:8px 0 0}
@media (max-width:767px){html body .ic2 .ic-right{padding:10px}html body .ic2 .cd-win{display:none!important}}
html.cd-task-done #cd-mascot,html.cd-task-done .cd-mascot{display:none!important}
html body .ic2.ic-done.ic-single #list li button{width:100%!important;display:flex!important;align-items:center;justify-content:center;gap:8px;min-height:50px!important;margin:6px 0 0;background:#16a34a!important;color:#fff!important;border:0!important;border-radius:12px!important;font-size:1.02rem!important;font-weight:800!important;text-decoration:none!important;box-shadow:0 8px 20px rgba(22,163,74,.28)!important}
html body .ic2.ic-done.ic-single #list li button:hover{background:#15803d!important}
html body .ic2.ic-done.ic-single #list li button::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E") center/contain no-repeat}
html body .ic2.ic-done.ic-single #list li{flex-direction:row;flex-wrap:wrap}
html body .ic2 .ic-right .ic-again:not([hidden]){display:block;margin:4px auto 0;text-align:center}
html body .ic2 .ic-cmp-v{--mh:min(420px,calc(100vh - 330px))}@media (max-width:767px){html body .ic2 .ic-cmp-v{--mh:360px}}
html body .ic2.ic-done #prog,html body .ic2 #prog[hidden]{display:none!important}html body .ic2 .ic-rh{flex-wrap:wrap}html body .ic2 .ic-stat{font-size:.75rem;padding:3px 9px;white-space:nowrap}
html body .tool-wrap .ic2.ic-done:not(.ic-single) #zip{display:none!important}
/* contrast fixes (site audit 2026-11-09) */
html body .cd-adl{color:#64748b!important}
html body .tool-wrap .tool-box button#ic-dl.ic-dl:not([hidden]),html body .ic2.ic-done.ic-single #list li button{background:#15803d!important;border-color:#15803d!important}
html body .tool-wrap .tool-box button#ic-dl.ic-dl:not([hidden]):hover,html body .ic2.ic-done.ic-single #list li button:hover{background:#166534!important}
html body .ic2 .ic-cmp-l.r{background:rgba(21,128,61,.95)}
/* site audit batch A (2026-11-09) */
@media (max-width:767px){
 html body .tool-wrap .mode-tabs{flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;position:relative!important;top:auto!important}
 html body .tool-wrap .mode-tabs::-webkit-scrollbar{display:none}
 html body .tool-wrap .mode-tabs>a,html body .tool-wrap .mode-tabs>button{flex:0 0 auto;white-space:nowrap}
 html body:has(.tool-box, #v3-root) #cd-mascot{display:none!important}
}
html body .tool-wrap .tool-box .btn:disabled:not(.btn-ghost):not(.ic-dl),html body .tool-wrap .tool-box .btn[disabled]:not(.btn-ghost):not(.ic-dl){background:#e2e8f0!important;background-image:none!important;color:#475569!important;box-shadow:none!important;cursor:not-allowed}
html body .pbc-preview-head{flex-wrap:wrap;gap:8px}
html body .pbc-preview-head #pbc-start-over{flex:0 0 auto;white-space:nowrap;overflow:visible}
html body .tool-wrap .tool-box select,html body .tool-wrap .tool-box input:not([type=checkbox]):not([type=radio]):not([type=range]){max-width:100%;box-sizing:border-box}
html body .tool-wrap .tool-box .actions .btn{white-space:normal;height:auto;min-height:44px;line-height:1.25;text-align:center}
html body .cd-shr .cd-wa{background:#15803d!important;border-color:#15803d!important;color:#fff!important}
html body a[data-ch=whatsapp]{background:#15803d!important;border-color:#15803d!important}
html body .tool-box a.btn[download],html body .tool-box a[download].btn,html body .tool-box #dl.btn{height:auto!important;min-height:44px;white-space:normal!important;overflow:visible!important;line-height:1.25;padding-top:10px!important;padding-bottom:10px!important;overflow-wrap:anywhere;text-align:center}
/* site audit batch B */
@media (max-width:767px){html body:not(.home) #cd-mascot{display:none!important}}
html body main ul.cd-trust{display:flex;flex-wrap:wrap;gap:4px 14px}
html body main ul.cd-trust li{white-space:nowrap}
@media (max-width:767px){html body main ul.cd-trust li:nth-child(n+3){display:none!important}}
/* batch watermark (2026-11-09): preview + Download first, settings beside (desktop) or below (mobile) */
html body #ed:not([hidden]){display:flex;flex-direction:column;gap:14px;margin-top:12px}
html body #ed .wm-r{border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc;padding:12px;min-width:0}
html body #ed .wm-r .nt-stage{margin:0;background:#f1f5f9;border-radius:10px;display:flex;justify-content:center;overflow:hidden}
html body #ed .wm-r #pv{display:block;max-width:100%;height:auto;max-height:360px;width:auto}
html body #ed .wm-r .small{margin:8px 0 4px;color:#475569}
html body #ed .wm-r .nt-grid{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
html body #ed .wm-r .nt-grid figure{flex:0 0 auto;width:72px;margin:0}
html body #ed .wm-r .nt-grid figure img{width:72px;height:56px;object-fit:cover;border-radius:6px}
html body #ed .wm-r .nt-grid figure div{font-size:.7rem;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body #ed .wm-r .actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 0}
html body .tool-wrap .tool-box #ed #dl.btn{background:#15803d!important;background-image:none!important;border:0!important;color:#fff!important;font-weight:800;min-height:50px;padding:0 22px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 8px 20px rgba(21,128,61,.28)!important;flex:1 1 auto}
html body .tool-wrap .tool-box #ed #dl.btn:hover{background:#166534!important}
html body .tool-wrap .tool-box #ed #dl.btn:disabled{background:#e2e8f0!important;color:#475569!important;box-shadow:none!important}
html body .tool-wrap .tool-box #ed #clr{background:none!important;border:0!important;box-shadow:none!important;color:#1d4ed8!important;text-decoration:underline;font-weight:600;min-height:44px}
@media (min-width:1000px){html body #ed:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
 html body #ed .wm-r{order:2;position:sticky;top:84px}html body #ed .wm-l{order:1}
 html body #ed .wm-r #pv{max-height:min(420px,calc(100vh - 300px))}}
/* d2 – design batch 1 (2026-11-09): Image Compressor look for PDF Compressor, PDF Merger, Passport Photo, Bulk Cropper */
html.cd-d2 body .tool-wrap .tool-box#mode-box{background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 8px 24px rgba(37,99,235,.06);padding:16px}
html.cd-d2 body .tool-box .dz#dz{background:linear-gradient(#f8faff,#f5f3ff)!important;border:2px dashed #c7d2fe!important;border-radius:14px!important;color:#1d4ed8!important;font-size:1.12rem!important;font-weight:800!important}
html.cd-d2 body .tool-box .dz#dz small{display:block;color:#475569!important;font-size:.88rem!important;font-weight:500!important;margin-top:6px}
html.cd-d2 body .tool-box .dz#dz:hover,html.cd-d2 body .tool-box .dz#dz.over{border-color:#818cf8!important;background:linear-gradient(#eef2ff,#ede9fe)!important}
html body .cd-2c .ic-left>*:first-child{margin-top:0}
html body .cd-2c .ic-right .cd-upload-preview,html body .cd-2c .ic-right .cd-upload-preview-empty{margin:0 0 10px}
html body .cd-2c .ic-right #list{margin-top:8px}
html body .cd-2c-organize .ic-right #grid{min-height:0}
html body .cd-2c-organize .ic-right .thumbs{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))!important}
html body .cd-2c .ic-right .cd-status:empty{display:none}
@media (min-width:1000px){html body .cd-2c-organize{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important}html body .cd-2c .ic-right{max-height:calc(100vh - 110px);overflow:auto}}
@media (max-width:999px){html body .cd-2c .ic-right{margin-top:14px;position:static!important}}
/* Passport Photo: lavender drop zone, white cards, blue accents */
html.cd-d2-passport body .pp-drop#pp-drop{background:linear-gradient(#f8faff,#f5f3ff)!important;border:2px dashed #c7d2fe!important;border-radius:14px!important}
html.cd-d2-passport body .pp-drop#pp-drop #pp-empty>p:first-child{color:#1d4ed8;font-weight:800;font-size:1.05rem}
html.cd-d2-passport body .pp-ctl.card{border-radius:16px;border-color:#e2e8f0;box-shadow:0 8px 24px rgba(37,99,235,.06)}
html.cd-d2-passport body .pp-req{border-radius:14px}
/* Bulk Cropper: white cards instead of cream, lavender drop zone, blue-purple accents */
html.cd-d2-tool body #v3 .card{background:#fff!important;border-color:#e2e8f0!important;border-radius:16px!important;box-shadow:0 8px 24px rgba(37,99,235,.05)}
html.cd-d2-tool body #v3 .drop#v3-drop{background:linear-gradient(#f8faff,#f5f3ff)!important;border:2px dashed #c7d2fe!important;border-radius:14px!important}
html.cd-d2-tool body #v3 .drop#v3-drop>p:first-child,html.cd-d2-tool body #v3 .drop#v3-drop b:first-child{color:#1d4ed8!important}
html.cd-d2-tool body #v3 .quickbar{border-radius:16px!important;border-color:#e2e8f0!important}
html.cd-d2-tool body #v3 .aitog{background:#f5f3ff!important;border-color:#ddd6fe!important;border-radius:12px!important}
html.cd-d2-tool body #v3 .aitog input{accent-color:#7c3aed}