/**
 * Personyze Docs — home.css
 * Homepage redesign (design agent concept, ported). Everything is scoped under
 * .pzhome and carries its own tokens, so it can't collide with the rest of the
 * theme. Dark mode follows the theme's [data-theme="dark"] switch.
 */
.pzhome{
  --paper:#faf8f4; --paper-2:#f4f1ea; --card:#ffffff;
  --ink:#16150f; --ink-2:#4a4740; --ink-3:#807b70; --ink-4:#a49e91;
  --line:#e6e1d6; --line-2:#d8d2c4;
  --brand:#12a878; --brand-ink:#0b7d59; --brand-wash:#e7f5ef;
  --accent:#c2410c; --accent-wash:#fdf0e8;
  --shadow:0 1px 2px rgba(22,21,15,.04),0 8px 24px rgba(22,21,15,.05);
  --shadow-lg:0 20px 48px rgba(22,21,15,.12);
  --ease:cubic-bezier(.4,0,.2,1);
  --serif:'Instrument Serif',Georgia,serif;
  background:var(--paper); color:var(--ink); display:block;
}
[data-theme="dark"] .pzhome{
  --paper:#14130f; --paper-2:#1b1a15; --card:#1c1b16;
  --ink:#f4f1ea; --ink-2:#c9c3b6; --ink-3:#948f83; --ink-4:#6f6a5f;
  --line:#2c2a23; --line-2:#3a3730;
  --brand:#2fc292; --brand-ink:#6fdcb4; --brand-wash:#15281f;
  --accent:#f0834e; --accent-wash:#2a1a11;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
  --shadow-lg:0 20px 48px rgba(0,0,0,.5);
}
.pzhome *{box-sizing:border-box}
.pzhome a{color:inherit;text-decoration:none}
.pzhome button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.pzhome svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pzhome .wrap{max-width:1180px;margin:0 auto;padding:0 26px}

/* hero */
.pzhome .hero{padding:54px 0 40px;border-bottom:1px solid var(--line)}
.pzhome .hero h1{font-size:44px;line-height:1.08;letter-spacing:-.035em;font-weight:700;max-width:16ch}
.pzhome .hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.pzhome .hero .lede{font-size:17px;color:var(--ink-2);margin-top:14px;max-width:52ch;line-height:1.6}
.pzhome .herogrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:end}
@media (max-width:900px){ .pzhome .herogrid{grid-template-columns:1fr;gap:28px} }
.pzhome .bigsearch{margin-top:24px;max-width:620px;width:100%}
.pzhome .bigsearch .box{display:flex;align-items:center;gap:11px;height:54px;padding:0 16px;width:100%;
  background:var(--card);border:1px solid var(--line-2);border-radius:13px;box-shadow:var(--shadow);text-align:left;
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease)}
.pzhome .bigsearch .box:hover{border-color:var(--brand)}
.pzhome .bigsearch .box svg{width:19px;height:19px;stroke:var(--ink-4);flex:none}
.pzhome .bigsearch .box .ph{flex:1;min-width:0;font-size:16px;color:var(--ink-4)}
.pzhome .bigsearch .box kbd{font-family:inherit;font-size:11px;color:var(--ink-4);border:1px solid var(--line);
  border-radius:6px;padding:2px 7px;flex:none}
.pzhome .popular{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.pzhome .popular .lb{font-size:12.5px;color:var(--ink-4);flex:none}
.pzhome .pq{height:30px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);font-size:12.5px;color:var(--ink-2);
  transition:all .13s var(--ease)}
.pzhome .pq:hover{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-wash)}

.pzhome .askbox{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;
  box-shadow:var(--shadow);position:relative;overflow:hidden}
.pzhome .askbox .sp{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--brand);color:#fff;margin-bottom:11px}
.pzhome .askbox .sp svg{width:16px;height:16px;fill:currentColor;stroke:none}
.pzhome .askbox h3{font-size:15px;font-weight:700;letter-spacing:-.015em}
.pzhome .askbox p{font-size:13px;color:var(--ink-3);margin-top:6px;line-height:1.6}
.pzhome .askbox .go{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:13px;
  font-weight:600;color:var(--brand-ink)}
.pzhome .askbox .go svg{width:13px;height:13px;stroke-width:2.2}
.pzhome .askbox .go:hover{gap:9px}
.pzhome .askbox .lock{font-size:11.5px;color:var(--ink-4);margin-top:9px;display:flex;align-items:center;gap:5px}
.pzhome .askbox .lock svg{width:11px;height:11px}

/* sections */
.pzhome .sec{padding:44px 0}
.pzhome .sec + .sec{border-top:1px solid var(--line)}
.pzhome .sec.flush{border-top:none;padding-top:34px}
.pzhome .sechead{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.pzhome .sechead .t{flex:1;min-width:240px}
.pzhome .sechead h2{font-size:24px;font-weight:700;letter-spacing:-.028em}
.pzhome .sechead h2 em{font-family:var(--serif);font-style:italic;font-weight:400}
.pzhome .sechead p{font-size:14px;color:var(--ink-3);margin-top:6px;max-width:60ch;line-height:1.6}
.pzhome .seclink{font-size:13.5px;font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;
  gap:6px;flex:none}
.pzhome .seclink svg{width:13px;height:13px;stroke-width:2.2}
.pzhome .seclink:hover{color:var(--brand-ink);gap:9px}

/* personalized strip */
.pzhome .psh{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.pzhome .psh .t{flex:1;min-width:260px}
.pzhome .psh h2{font-size:24px;font-weight:700;letter-spacing:-.028em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pzhome .psh h2 em{font-family:var(--serif);font-style:italic;font-weight:400}
.pzhome .pill{height:22px;display:inline-flex;align-items:center;gap:5px;padding:0 9px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.01em;background:var(--brand-wash);
  color:var(--brand-ink);border:1px solid color-mix(in srgb,var(--brand) 30%,transparent);
  flex:none;position:relative;top:-2px}
.pzhome .pill svg{width:11px;height:11px;fill:currentColor;stroke:none}
.pzhome .psh p{font-size:14px;color:var(--ink-3);margin-top:7px;max-width:64ch;line-height:1.6}
.pzhome .whywrap{position:relative;flex:none}
.pzhome .whyp{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-3)}
.pzhome .whyp:hover{color:var(--ink)}
.pzhome .whyp svg{width:14px;height:14px}
.pzhome .whypop{position:absolute;z-index:50;top:calc(100% + 9px);right:0;width:340px;background:var(--card);
  border:1px solid var(--line-2);border-radius:13px;box-shadow:var(--shadow-lg);padding:16px 18px}
.pzhome .whypop[hidden]{display:none}
.pzhome .whypop h4{font-size:13px;font-weight:700;margin-bottom:7px}
.pzhome .whypop p{font-size:12.5px;color:var(--ink-2);line-height:1.7}
.pzhome .whypop p + p{margin-top:8px}
.pzhome .whypop .off{display:inline-flex;align-items:center;gap:6px;margin-top:11px;font-size:12.5px;
  font-weight:600;color:var(--ink-3);border-top:1px solid var(--line);padding-top:11px;width:100%}
.pzhome .whypop .off:hover{color:var(--accent)}
.pzhome .pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){ .pzhome .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .pzhome .pgrid{grid-template-columns:1fr} }
.pzhome .pcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 17px 15px;
  display:flex;flex-direction:column;gap:9px;position:relative;overflow:hidden;
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease),transform .14s var(--ease)}
.pzhome .pcard:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-1px)}
.pzhome .pcard .ptop{display:flex;align-items:center;gap:8px}
.pzhome .pcard .kind{height:20px;display:inline-flex;align-items:center;gap:5px;padding:0 8px;
  border-radius:6px;font-size:10.5px;font-weight:700;letter-spacing:.01em;flex:none}
.pzhome .kind.gap{background:var(--accent-wash);color:var(--accent)}
.pzhome .kind.sig{background:var(--paper-2);color:var(--ink-3)}
.pzhome .kind svg{width:10px;height:10px;stroke-width:2.4}
.pzhome .pcard .ptop .sp2{flex:1}
.pzhome .pcard .rd{font-size:11.5px;color:var(--ink-4);flex:none}
.pzhome .pcard h3{font-size:15.5px;font-weight:700;letter-spacing:-.018em;line-height:1.35}
.pzhome .pcard .why{font-size:13px;line-height:1.6;color:var(--ink-2);display:flex;gap:8px}
.pzhome .pcard .why .bar{width:2px;border-radius:2px;background:var(--line-2);flex:none}
.pzhome .pcard.isgap .why .bar{background:var(--accent)}
.pzhome .pcard .go2{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:4px;
  font-size:13px;font-weight:600;color:var(--brand-ink)}
.pzhome .pcard .go2 svg{width:13px;height:13px;stroke-width:2.2}
.pzhome .pcard:hover .go2{gap:9px}
.pzhome .psignin{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:15px 18px;flex-wrap:wrap}
.pzhome .psignin .ic2{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--brand-wash);color:var(--brand-ink)}
.pzhome .psignin .ic2 svg{width:16px;height:16px;fill:currentColor;stroke:none}
.pzhome .psignin .tx2{flex:1;min-width:230px}
.pzhome .psignin b{font-size:14.5px;font-weight:700;letter-spacing:-.015em}
.pzhome .psignin span{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.pzhome .psignin .in{height:36px;display:inline-flex;align-items:center;gap:7px;padding:0 15px;
  border-radius:10px;background:var(--ink);color:var(--paper);font-size:13.5px;font-weight:600;flex:none}
.pzhome .psignin .in:hover{opacity:.88}

/* choose your path */
.pzhome .paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:860px){ .pzhome .paths{grid-template-columns:1fr} }
.pzhome .path{background:var(--card);border:1px solid var(--line);border-radius:15px;overflow:hidden;
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease)}
.pzhome .path:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.pzhome .path .ph{display:flex;align-items:flex-start;gap:13px;padding:18px 19px 15px}
.pzhome .path .ic{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--paper-2);color:var(--ink-2)}
.pzhome .path .ic svg{width:19px;height:19px}
.pzhome .path .pt{flex:1;min-width:0}
.pzhome .path h3{font-size:17px;font-weight:700;letter-spacing:-.02em}
.pzhome .path .kinds{font-size:12.5px;color:var(--ink-4);margin-top:3px}
.pzhome .path .cnt{font-size:11.5px;font-weight:600;color:var(--ink-4);background:var(--paper-2);
  border-radius:999px;padding:3px 9px;flex:none}
.pzhome .plist{border-top:1px solid var(--line)}
.pzhome .pl{display:flex;align-items:center;gap:11px;padding:11px 19px;border-bottom:1px solid var(--line);
  transition:background .12s var(--ease)}
.pzhome .pl:last-child{border-bottom:none}
.pzhome .pl:hover{background:var(--paper-2)}
.pzhome .pl .num{width:20px;height:20px;border-radius:6px;flex:none;display:grid;place-items:center;
  font-size:10.5px;font-weight:700;background:var(--paper-2);color:var(--ink-4)}
.pzhome .pl.first .num{background:var(--brand);color:#fff}
.pzhome .pl .nm{flex:1;min-width:0;font-size:14px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pzhome .pl.first .nm{font-weight:700;color:var(--ink)}
.pzhome .pl .meta{font-size:11.5px;color:var(--ink-4);flex:none}
.pzhome .pl .arw{width:14px;height:14px;stroke:var(--ink-4);flex:none;opacity:0;transition:all .12s var(--ease)}
.pzhome .pl:hover .arw{opacity:1;transform:translateX(2px)}

/* two-column lists */
.pzhome .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px}
@media (max-width:860px){ .pzhome .two{grid-template-columns:1fr;gap:34px} }
.pzhome .rowlist{border-top:1px solid var(--line)}
.pzhome .rl{display:flex;align-items:center;gap:13px;padding:13px 2px;border-bottom:1px solid var(--line)}
.pzhome .rl:hover .rt{color:var(--brand-ink)}
.pzhome .rl .rank{font-family:var(--serif);font-size:20px;color:var(--ink-4);width:22px;flex:none;line-height:1}
.pzhome .rl .rb{flex:1;min-width:0}
.pzhome .rl .rt{font-size:14.5px;font-weight:600;letter-spacing:-.01em;transition:color .12s var(--ease)}
.pzhome .rl .rm{font-size:12px;color:var(--ink-4);margin-top:2px}
.pzhome .rl .tag{font-size:11px;font-weight:600;color:var(--ink-3);background:var(--paper-2);border-radius:6px;padding:3px 8px;flex:none}
.pzhome .rl .fresh{font-size:11px;font-weight:700;color:var(--brand-ink);background:var(--brand-wash);border-radius:6px;padding:3px 8px;flex:none}

/* stuck band */
.pzhome .stuck{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 28px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center}
@media (max-width:820px){ .pzhome .stuck{grid-template-columns:1fr} }
.pzhome .stuck h2{font-size:22px;font-weight:700;letter-spacing:-.026em}
.pzhome .stuck h2 em{font-family:var(--serif);font-style:italic;font-weight:400}
.pzhome .stuck p{font-size:14px;color:var(--ink-3);margin-top:7px;max-width:56ch;line-height:1.6}
.pzhome .stuckacts{display:flex;gap:9px;flex-wrap:wrap}
.pzhome .sbtn{height:40px;display:inline-flex;align-items:center;gap:8px;padding:0 16px;border-radius:10px;
  font-size:14px;font-weight:600;border:1px solid var(--line-2);background:var(--paper);color:var(--ink)}
.pzhome .sbtn:hover{background:var(--paper-2)}
.pzhome .sbtn.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pzhome .sbtn.solid:hover{opacity:.88}
.pzhome .sbtn svg{width:15px;height:15px}
