/* Original example palette and animations with the public homepage sizing. */
.original-example {
  --bg:#FFF; --surface:#FFF; --ink2:var(--muted); --ink3:#777985;
  --border:rgba(32,33,43,.1); --border2:rgba(32,33,43,.05);
  /* Keep the sample UI semantic colors independent of the homepage accent. */
  --green:#2A6049; --gbg:#E8F3EC; --gtext:#2A6049;
  --blue:#1A3A8F; --bbg:#EBF0FD; --btext:#1A3A8F;
  --amber:#8B5E0A; --abg:#FEF3C7; --atext:#8B5E0A;
  --r:16px; --rs:10px;
  padding:64px 0; background:var(--bg); color:var(--ink);
  font-family:inherit; font-size:16px; line-height:1.6;
}
.original-example .original-demo { width:100%; margin:0 auto; }

.original-example .example-title{margin:56px 0 24px;font-size:32px;font-weight:600;color:var(--ink);line-height:1.35;letter-spacing:-.035em;}
.original-example .sec-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}


@keyframes paveFadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes paveDimPop{from{opacity:0;transform:scale(0.5);}to{opacity:1;transform:scale(1);}}
@keyframes pavePulse{0%,100%{opacity:1;}50%{opacity:0.35;}}
@keyframes paveStatusShimmer{0%,100%{opacity:0.85;}50%{opacity:1;}}

/* sample briefing frame */
.original-example .brief-frame{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:0 8px 28px rgba(23,21,15,.04);}

/* status row above briefing — "AI is working" indicator */
.original-example .brief-status{display:flex;align-items:center;gap:10px;padding:14px 32px;background:linear-gradient(90deg,rgba(42,96,73,.045),rgba(42,96,73,.015));border-bottom:1px solid var(--border2);font-size:14px;color:var(--gtext);letter-spacing:0.01em;animation:paveStatusShimmer 3.5s ease-in-out infinite;}
.original-example .brief-status .status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;animation:pavePulse 1.6s ease-in-out infinite;}
.original-example .brief-status .status-text{font-variant-numeric:tabular-nums;}
.original-example .brief-status .status-num{font-weight:600;color:var(--gtext);}
.original-example .brief-frame-head{padding:28px 32px 20px;}
.original-example .brief-greeting{font-size:24px;font-weight:600;color:var(--ink);line-height:1.35;letter-spacing:-.025em;margin-bottom:12px;}
.original-example .brief-summary{font-size:16px;color:var(--ink2);line-height:1.75;}
.original-example .brief-summary strong{color:var(--ink);font-weight:500;}
.original-example .brief-section{padding:16px 32px 32px;}
.original-example .brief-section-label{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.original-example .brief-section-text{font-size:13px;font-weight:600;color:var(--ink2);letter-spacing:0.05em;text-transform:uppercase;}
.original-example .brief-section-count{font-size:13px;color:var(--ink2);background:var(--bg);padding:1px 7px;border-radius:99px;border:1px solid var(--border);}

/* job mini card (mirrors Pave style.css) */
.original-example .job-mini{background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:20px;overflow:hidden;opacity:0;animation:paveFadeUp 0.5s ease forwards;}
.original-example .job-mini:last-child{margin-bottom:0;}
.original-example .job-mini.first{border-color:rgba(26,58,143,.22);animation-delay:0.4s;}
.original-example .job-mini:not(.first){animation-delay:0.7s;}

/* dim row dots — staggered "AI evaluating" appear */
.original-example .job-mini .jm-dot-cell{opacity:0;animation:paveDimPop 0.35s ease forwards;}
.original-example .job-mini.first .jm-dot-cell:nth-child(1){animation-delay:0.95s;}
.original-example .job-mini.first .jm-dot-cell:nth-child(2){animation-delay:1.05s;}
.original-example .job-mini.first .jm-dot-cell:nth-child(3){animation-delay:1.15s;}
.original-example .job-mini.first .jm-dot-cell:nth-child(4){animation-delay:1.25s;}
.original-example .job-mini.first .jm-dot-cell:nth-child(5){animation-delay:1.35s;}
.original-example .job-mini.first .jm-dot-cell:nth-child(6){animation-delay:1.45s;}
.original-example .job-mini:not(.first) .jm-dot-cell:nth-child(1){animation-delay:1.55s;}
.original-example .job-mini:not(.first) .jm-dot-cell:nth-child(2){animation-delay:1.62s;}
.original-example .job-mini:not(.first) .jm-dot-cell:nth-child(3){animation-delay:1.69s;}
.original-example .job-mini:not(.first) .jm-dot-cell:nth-child(4){animation-delay:1.76s;}
.original-example .job-mini:not(.first) .jm-dot-cell:nth-child(5){animation-delay:1.83s;}
.original-example .job-mini:not(.first) .jm-dot-cell:nth-child(6){animation-delay:1.9s;}

/* AI reasoning — delayed fade-in giving "AI is thinking" pause */
.original-example .job-mini .jm-ai{opacity:0;animation:paveFadeUp 0.4s ease forwards;}
.original-example .job-mini.first .jm-ai{animation-delay:1.6s;}
.original-example .job-mini:not(.first) .jm-ai{animation-delay:2.05s;}
.original-example .jm-row{padding:24px 24px 12px;display:flex;align-items:center;gap:14px;}
.original-example .jm-l{flex:1;min-width:0;}
.original-example .jm-name{font-size:21px;font-weight:600;color:var(--ink);line-height:1.35;margin-bottom:6px;}
.original-example .jm-meta{font-size:15px;color:var(--ink2);}
.original-example .jm-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:0 24px 18px;}
.original-example .tag{font-size:13px;padding:4px 9px;border-radius:99px;font-weight:500;}
.original-example .tag.tag-salary{background:transparent;color:var(--ink2);border:1px solid var(--border);font-variant-numeric:tabular-nums;}
.original-example .tg{background:var(--gbg);color:var(--gtext);}
.original-example .tb{background:var(--bbg);color:var(--btext);}
.original-example .ta{background:var(--abg);color:var(--atext);}
.original-example .jm-see-detail{display:inline-flex;align-items:center;min-height:44px;margin-left:auto;font-size:14px;color:var(--green);white-space:nowrap;flex-shrink:0;}
.original-example .jm-see-detail:hover{text-decoration:underline;text-underline-offset:3px;}
.original-example .jm-ai{padding:18px 24px;border-top:1px solid var(--border2);background:transparent;display:flex;align-items:flex-start;gap:10px;font-size:16px;color:var(--ink2);line-height:1.65;}
.original-example .pave-avatar{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:4px;}
.original-example .jm-dot-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:16px 24px;border-top:1px solid var(--border2);}
.original-example .jm-dot-cell{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;}
.original-example .jm-dot{width:9px;height:9px;border-radius:50%;}
.original-example .jm-dot-label{font-size:13px;color:var(--ink2);}
.original-example .jm-dot-good{background:#6ee7b7;border:1px solid #32966f;}
.original-example .jm-dot-warn{background:#fbbf24;border:1px solid #b7830c;}

/* ── Detail analysis preview section ── */
.original-example .detail-pitch{font-size:17px;color:var(--ink2);line-height:1.7;margin-bottom:24px;}
.original-example .detail-pitch strong{color:var(--ink);font-weight:500;}
.original-example .detail-frame{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:0 8px 28px rgba(23,21,15,.04);}
.original-example .detail-frame:focus{outline:none;}
.original-example .detail-frame:focus-visible{outline:2px solid var(--green);outline-offset:4px;}
.original-example .jd-head{padding:28px 32px 24px;border-bottom:1px solid var(--border2);}
.original-example .jd-title{font-size:24px;font-weight:600;color:var(--ink);margin-bottom:8px;line-height:1.35;}
.original-example .jd-meta{font-size:15px;color:var(--ink2);margin-bottom:14px;}
.original-example .jd-chips{display:flex;gap:6px;flex-wrap:wrap;}

.original-example .jd-quote{margin:24px 32px;padding:18px 20px;border-left:3px solid var(--green);background:rgba(42,96,73,.035);font-size:16px;color:var(--ink);line-height:1.75;border-radius:0 var(--rs) var(--rs) 0;}

.original-example .jd-dims-label{padding:0 32px;font-size:13px;font-weight:600;color:var(--ink2);letter-spacing:0.04em;text-transform:uppercase;margin:24px 0 14px;}
.original-example .jd-dot-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:14px 32px 24px;border-bottom:1px solid var(--border2);}
.original-example .jd-dot-cell{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;}
.original-example .jd-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.original-example .jd-dot-good{background:#6ee7b7;}
.original-example .jd-dot-name{font-size:13px;color:var(--ink2);}

.original-example .jd-dim-row{border-bottom:1px solid var(--border2);}
.original-example .jd-dim-row:last-of-type{border-bottom:0;}
.original-example .jd-dim-row[open] > .jd-dim-head{padding-bottom:10px;}
.original-example .jd-dim-head::-webkit-details-marker{display:none;}
.original-example .jd-dim-head:focus-visible{outline:2px solid var(--green);outline-offset:-6px;border-radius:8px;}
.original-example .jd-dim-head{display:flex;align-items:center;gap:12px;padding:22px 32px;cursor:pointer;list-style:none;}
.original-example .jd-dim-name{font-size:17px;font-weight:600;color:var(--ink);flex:1;}
.original-example .jd-chev{display:inline-block;font-size:14px;color:var(--ink3);transform:rotate(-90deg);transition:transform .15s;}
.original-example .jd-dim-row[open] .jd-chev{transform:rotate(0deg);}
.original-example .jd-dim-body{padding:0 32px 22px 54px;font-size:16px;color:var(--ink2);line-height:1.75;}

/* footer hint — ending note, not "more below" gradient mask. Lighter,
   centred small text with a subtle top divider. */
.original-example .jd-footer-hint{padding:20px 32px 24px;text-align:center;font-size:14px;color:var(--ink2);line-height:1.7;border-top:1px solid var(--border2);background:rgba(184,181,174,.04);}

.original-example .original-demo > .example-title:first-child { margin-top:0; }
.original-example .pave-avatar .brand-mark { width:100%; height:100%; }
.original-example .sample-disclaimer { margin-top:16px; color:var(--ink2); font-size:14px; line-height:1.65; }
.original-example.demo-waiting :is(.job-mini,.jm-dot-cell,.jm-ai,.brief-status,.status-dot) { animation-play-state:paused; }
@media (max-width:760px) {
  .original-example .example-title { font-size:26px; }
  .original-example { padding:42px 0; }
  .original-example .brief-status { align-items:flex-start; padding:14px 20px; }
  .original-example .brief-status .status-dot { margin-top:7px; }
  .original-example .brief-frame-head, .original-example .jd-head { padding:24px 20px; }
  .original-example .brief-greeting { font-size:22px; }
  .original-example .brief-section { padding:12px 8px 20px; }
  .original-example .brief-section-label { margin-left:12px; margin-right:12px; }
  .original-example .jm-row { padding:20px 12px 12px; }
  .original-example .jm-name { font-size:20px; }
  .original-example .jm-tags { padding:0 12px 16px; }
  .original-example .jm-ai { padding:16px 12px; }
  .original-example .jm-dot-row { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 8px; padding:16px 12px; }
  .original-example .example-title { margin-top:48px; }
  .original-example .detail-pitch { font-size:16px; }
  .original-example .jd-quote { margin:20px; padding:16px; }
  .original-example .jd-dims-label { padding:0 20px; }
  .original-example .jd-dot-row { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 12px; padding:14px 20px 24px; }
  .original-example .jd-dim-head { padding:20px; }
  .original-example .jd-dim-body { padding:0 20px 20px 42px; }
  .original-example .jd-footer-hint { padding:20px; }
}
@media (max-width:360px) {
  .original-example :is(.brief-summary,.jm-ai,.jd-quote,.jd-dim-body) { font-size:15px; }
}
@media (prefers-reduced-motion:reduce) {
  .original-example .jd-chev { transition:none; }
  .original-example :is(.job-mini,.jm-dot-cell,.jm-ai,.brief-status,.status-dot) { animation:none; opacity:1; transform:none; }
}