/* Crop Desk homepage (2026-10 redesign) – lightweight, no framework */
.hx-hero,.hx-most,.hx-cats{--hx-bg:#ffffff;--hx-card:#ffffff;--hx-ink:#0f172a;--hx-mut:#475569;--hx-line:#e2e8f0;--hx-acc:#0c6b62;--hx-acc2:#2563eb;--hx-soft:#ecfdf8}
.hx-hero{padding:44px 0 30px;text-align:center;background:radial-gradient(900px 340px at 15% -10%,rgba(12,107,98,.18),transparent 70%),radial-gradient(800px 320px at 95% 0,rgba(37,99,235,.15),transparent 70%),radial-gradient(600px 260px at 50% 120%,rgba(12,107,98,.06),transparent 60%)}
.hx-hero .wrap{max-width:860px}
.hx-hero .eyebrow{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--hx-soft);color:var(--hx-acc);font-weight:600;font-size:.85rem;border:1px solid rgba(12,107,98,.2)}
.hx-hero h1{font-size:clamp(1.9rem,5.2vw,3.1rem);line-height:1.12;letter-spacing:-.02em;margin:16px 0 12px;color:var(--hx-ink)}
.hx-hero .lead{font-size:clamp(1rem,2.4vw,1.16rem);color:var(--hx-mut);max-width:680px;margin:0 auto 22px}
.hx-hero .hsearch{position:relative;display:flex;align-items:center;gap:10px;max-width:680px;margin:0 auto;padding:6px 8px 6px 18px;background:var(--hx-card);border:1.5px solid var(--hx-line);border-radius:18px;box-shadow:0 10px 30px rgba(15,23,42,.10);color:var(--hx-mut)}
.hx-hero .hsearch:focus-within{border-color:var(--hx-acc);box-shadow:0 0 0 4px rgba(12,107,98,.15),0 10px 30px rgba(15,23,42,.10)}
.hx-hero #tsearch{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:1.08rem;min-height:50px;color:var(--hx-ink)}
.hx-hero .ts-list{text-align:left}
.hx-hero .hchips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px 0 0}
.hx-hero .hchips a{padding:9px 14px;min-height:40px;box-sizing:border-box;display:inline-flex;align-items:center;border-radius:999px;border:1px solid var(--hx-line);background:var(--hx-card);color:var(--hx-ink);text-decoration:none;font-size:.92rem}
.hx-hero .hchips a{transition:border-color .18s,color .18s,transform .18s,box-shadow .18s}.hx-hero .hchips a:hover{border-color:var(--hx-acc);color:var(--hx-acc);transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,23,42,.08)}
.hx-h{font-size:1.35rem;margin:0 0 14px;color:var(--hx-ink)}
.hx-most{padding:26px 0 8px}
.hm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.hm-card{position:relative;display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:18px;background:var(--hx-card);border:1px solid var(--hx-line);color:var(--hx-ink);text-decoration:none;box-shadow:0 1px 2px rgba(15,23,42,.05);transition:transform .15s,box-shadow .15s,border-color .15s;min-height:84px}
.hm-card:first-child{background:linear-gradient(135deg,#0c6b62,#0f766e 55%,#2563eb);color:#fff;border:0}.hm-card:first-child small{color:#d7f5ef}.hm-card:first-child .hc-i{background:rgba(255,255,255,.18);color:#fff}
.hm-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.10);border-color:var(--hx-acc)}
.hm-t{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.hm-t b{font-size:1.02rem}.hm-t small{color:var(--hx-mut);font-size:.86rem;line-height:1.35}
.hm-go{font-size:1.2rem;opacity:.6}
.hc-i{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--hx-soft);color:var(--hx-acc)}
.hc-i svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hx-cats{padding:18px 0 10px}
.hx-jump{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;margin-bottom:6px;scrollbar-width:thin}
.hx-jump a{flex:none;padding:9px 14px;min-height:40px;box-sizing:border-box;display:inline-flex;align-items:center;border-radius:12px;background:var(--hx-card);border:1px solid var(--hx-line);color:var(--hx-ink);text-decoration:none;font-size:.9rem;white-space:nowrap}
.hcat{margin:22px 0 6px;padding:0;scroll-margin-top:80px}
.hcat-h{font-size:1.2rem;margin:0 0 12px;display:flex;align-items:center;gap:8px;color:var(--hx-ink)}
.hcat-h .cat-n{font-size:.78rem;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--hx-soft);color:var(--hx-acc)}
.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.hc{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--hx-card);border:1px solid var(--hx-line);color:var(--hx-ink);text-decoration:none;min-height:64px;transition:border-color .18s,background .18s,transform .18s,box-shadow .18s}
.hc:hover{border-color:var(--hx-acc);transform:translateY(-2px)}.hc .hc-i{width:38px;height:38px;border-radius:10px}
.hc span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}.hc b{font-size:.96rem}.hc small{color:var(--hx-mut);font-size:.82rem;line-height:1.3}
.hx-all{margin:22px 0 0;text-align:center}
@media (max-width:420px){.hx-hero{padding:30px 0 22px}.hm-grid{grid-template-columns:1fr}.hgrid{grid-template-columns:1fr}.hm-card{padding:14px}}
@media (min-width:421px) and (max-width:700px){.hgrid{grid-template-columns:1fr 1fr}.hc{flex-direction:column;align-items:flex-start}}


/* ===== Visual polish 2026-10-24 (homepage) ===== */
.hx-hero{padding:48px 0 34px}
.hx-hero .hsearch{border-radius:18px;border-width:1.5px;box-shadow:0 10px 28px rgba(15,23,42,.09)}
.hx-hero .hsearch:focus-within{border-color:#1757a0;box-shadow:0 0 0 4px rgba(23,87,160,.14),0 10px 28px rgba(15,23,42,.09)}
.hm-card,.hc{border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 6px 18px rgba(15,23,42,.05)}
.hm-card:hover,.hc:hover{box-shadow:0 10px 24px rgba(15,23,42,.10)}
.hx-jump a{border-radius:12px}
.hcat-h .cat-n{background:#e9f1fb;color:#1757a0}
@media (max-width:420px){.hx-hero{padding:32px 0 24px}.hm-card{border-radius:14px}}

/* ===== Psychology homepage UX 2026-10-24 ===== */
.hx-hero,.hx-most,.hx-cats{
  --hx-bg:var(--cd-bg,#f7f9fc);
  --hx-card:var(--cd-surface,#fff);
  --hx-ink:var(--cd-ink,#0f172a);
  --hx-mut:var(--cd-muted,#475569);
  --hx-line:var(--cd-border,#e2e8f0);
  --hx-acc:var(--cd-primary,#0c6b62);
  --hx-acc2:var(--cd-secondary,#1757a0);
  --hx-soft:var(--cd-primary-soft,#ecfdf8)
}
.hx-hero{padding:36px 0 26px;text-align:center}
.hx-hero h1{font-size:clamp(1.75rem,4.8vw,2.65rem);margin:14px 0 10px;max-width:18ch;margin-left:auto;margin-right:auto}
.hx-hero .lead{max-width:36em;margin:0 auto 18px;font-size:clamp(.98rem,2.2vw,1.1rem)}
.hx-hint{margin:10px auto 0;max-width:36em;font-size:.88rem;color:var(--hx-mut)}
.hx-hero .hsearch{max-width:640px;border-radius:16px;border-color:var(--hx-line);box-shadow:var(--cd-shadow,0 8px 24px rgba(15,23,42,.08))}
.hx-hero .hsearch:focus-within{border-color:var(--hx-acc);box-shadow:0 0 0 4px rgba(12,107,98,.16),var(--cd-shadow)}
.hx-hero #tsearch{min-height:48px;font-size:1.05rem}
.hx-hero .hchips{gap:8px;margin:14px 0 0}
.hx-hero .hchips a{min-height:44px;padding:8px 14px;font-weight:600}
.hx-sub{margin:-4px 0 14px;color:var(--hx-mut);font-size:.95rem}
.hx-recent{margin:16px auto 0;max-width:680px;text-align:left}
.hx-recent-h{font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--hx-mut);margin:0 0 8px}
.hx-recent-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.hx-recent-list a{display:inline-flex;align-items:center;min-height:40px;padding:6px 12px;border-radius:999px;border:1px solid var(--hx-line);background:var(--hx-card);color:var(--hx-ink);text-decoration:none;font-size:.9rem;font-weight:600}
.hx-recent-list a:hover{border-color:var(--hx-acc);color:var(--hx-acc)}
.hm-grid{gap:12px}
.hm-card{min-height:76px;padding:14px 16px;border-radius:16px}
.hm-card:first-child{background:linear-gradient(135deg,var(--hx-acc),#0f766e 60%,var(--hx-acc2));}
.hm-t small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hx-jump{gap:8px;padding-bottom:10px}
.hx-jump a{min-height:44px;font-weight:600;scroll-margin-top:72px}
.hgrid{gap:10px}
.hc{min-height:68px;border-radius:14px}
.hc small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:420px){
  .hx-hero{padding:26px 0 18px}
  .hx-hero h1{max-width:none}
  .hm-grid,.hgrid{grid-template-columns:1fr}
  .hx-jump{margin:0 -14px;padding-left:14px;padding-right:14px}
}
@media (prefers-reduced-motion:reduce){
  .hm-card,.hc,.hx-hero .hchips a{transition:none}
  .hm-card:hover,.hc:hover,.hx-hero .hchips a:hover{transform:none;box-shadow:none}
}


/* ===== Phase 2 homepage (2026-10-25) ===== */
.hx-hero{padding:40px 0 22px}
.hx-hero h1{max-width:20ch}
.hx-hero .lead{margin-bottom:16px}
.hx-hero .hsearch{
  max-width:680px;min-height:56px;border-width:2px;
  border-color:var(--cd-border-strong,#b7c8de);
  box-shadow:var(--cd-shadow-md,0 4px 16px rgba(15,23,42,.08))
}
.hx-hero .hsearch:focus-within{
  border-color:var(--cd-primary,#0c6b62);
  box-shadow:0 0 0 4px rgba(12,107,98,.16),var(--cd-shadow-md)
}
.hx-hero #tsearch{min-height:48px;font-size:1.08rem;font-weight:500}
.hx-hero .hchips{margin-top:14px;gap:8px}
.hx-hero .hchips a{
  min-height:44px;font-weight:600;border-radius:999px;
  border:1px solid var(--cd-border,#e2e8f0)
}
.hx-hero .hchips a[href="/tool/"],
.hx-hero .hchips a[href="/compress-image-to-50kb/"],
.hx-hero .hchips a[href="/rajasthan-cet-graduate-mock-test/"]{
  background:var(--cd-primary-soft,#e5f3f1);border-color:#9fd0c8;color:var(--cd-primary-deep,#09574f)
}
.hx-hero .hchips a[href="/us-passport-photo/"]{
  background:#f8fafc;color:#475569
}

/* India exam tools vs international – visual grouping */
.hx-jump a[href="#cat-photo"],
.hx-jump a[href="#cat-pdf"],
.hx-jump a[href="#cat-typing"],
.hx-jump a[href="#cat-career"]{font-weight:700}
.hcat#cat-photo .hcat-h::after{
  content:"India exam & ID sizes first";
  display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;
  background:var(--cd-primary-soft,#e5f3f1);color:var(--cd-primary-deep,#09574f);
  font-size:.72rem;font-weight:700;vertical-align:middle
}
.hx-intl{
  margin:18px 0 8px;padding:14px 16px;border-radius:16px;
  border:1px solid var(--cd-border,#e2e8f0);background:#f8fafc
}
.hx-intl .hcat-h{margin:0 0 10px;font-size:1.05rem}
.hx-intl .hgrid{gap:8px}
.hx-intl .hc{min-height:56px;background:#fff}

.hx-most{padding:18px 0 6px}
.hx-most .hx-sub{margin-top:-6px}
.hm-card{min-height:72px}
.hm-card:first-child{box-shadow:0 8px 22px rgba(12,107,98,.22)}

/* Compact mobile */
@media (max-width:420px){
  .hx-hero{padding:26px 0 16px}
  .hx-hero .hchips{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .hx-hero .hchips a{flex:none}
  .hx-jump{margin:0 -4px 8px}
  .hcat-h{font-size:1.05rem}
  .hcat#cat-photo .hcat-h::after{display:block;margin:6px 0 0;margin-left:0}
}
@media (max-width:700px){
  .hx-hero .hsearch{border-radius:14px;padding:4px 6px 4px 12px}
  .ad-slot,.cd-adslot{margin:20px 12px}
}

/* Public visit counter restored 2026-10-25 — shown by visits.js when count > 0 */

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

/* ===== Soft hero color shift 2026-10-26m4 (CSS only, slow, low contrast) ===== */
@keyframes cd-hero-shift{
  0%,100%{
    background:
      radial-gradient(900px 340px at 12% -8%,rgba(12,107,98,.18),transparent 70%),
      radial-gradient(800px 320px at 92% 0,rgba(37,99,235,.15),transparent 70%),
      radial-gradient(600px 260px at 50% 120%,rgba(12,107,98,.06),transparent 60%);
  }
  50%{
    background:
      radial-gradient(900px 340px at 22% -4%,rgba(12,107,98,.14),transparent 70%),
      radial-gradient(800px 320px at 82% 6%,rgba(23,87,160,.18),transparent 70%),
      radial-gradient(620px 280px at 48% 118%,rgba(37,99,235,.07),transparent 60%);
  }
}
.hx-hero{
  background:
    radial-gradient(900px 340px at 15% -10%,rgba(12,107,98,.18),transparent 70%),
    radial-gradient(800px 320px at 95% 0,rgba(37,99,235,.15),transparent 70%),
    radial-gradient(600px 260px at 50% 120%,rgba(12,107,98,.06),transparent 60%);
  animation:cd-hero-shift 28s ease-in-out infinite;
  background-size:100% 100%
}
@media (prefers-reduced-motion:reduce){
  .hx-hero{animation:none!important}
}