
/* ---------- status card: one centred white card ---------- */
.jdh-sy-center { min-height:56vh; display:flex; align-items:center; justify-content:center; padding:40px 16px 96px; }
.jdh-sy-card { width:100%; max-width:540px; background:#fff; border:1px solid var(--jd-line); border-radius:28px;
  padding:44px 40px 40px; text-align:center; box-shadow:0 34px 70px -46px rgba(24,27,41,.4);
  animation:jdh-sy-in .5s var(--jd-ease) both; }
@keyframes jdh-sy-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.jdh-sy-ico { width:68px; height:68px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:22px; background:var(--jd-lav); color:var(--jd-teal-deep); }
.jdh-sy-ico[data-tone="ok"] { background:#DDF4EE; color:#0E7F64; }
.jdh-sy-ico[data-tone="warn"] { background:var(--jd-plag-bg); color:#B4600E; }
.jdh-sy-ico[data-tone="bad"] { background:var(--jd-ai-red-bg); color:var(--jd-ai-red); }
.jdh-sy-spin { animation:jdh-sy-spin 1s linear infinite; }
@keyframes jdh-sy-spin { to { transform:rotate(360deg); } }
.jdh-sy-code { font-family:var(--jd-serif); font-weight:300; font-size:104px; line-height:1; letter-spacing:-3px;
  color:var(--jd-teal-deep); margin-bottom:10px; }
.jdh-sy-title { font-family:var(--jd-serif); font-weight:400; font-size:36px; line-height:1.18; letter-spacing:-.6px;
  color:var(--jd-ink); text-wrap:balance; margin-bottom:12px; }
.jdh-sy-body { font-size:16px; line-height:26px; color:var(--jd-body); text-wrap:pretty; }
.jdh-sy-body + .jdh-sy-body { margin-top:10px; }
.jdh-sy-mail { display:inline-flex; align-items:center; gap:8px; margin-top:20px; padding:10px 16px; border-radius:12px;
  background:#F5F7FB; border:1px solid var(--jd-line); font-weight:500; color:var(--jd-ink); max-width:100%;
  overflow-wrap:anywhere; }
.jdh-sy-alert { margin-top:18px; padding:12px 16px; border-radius:14px; background:var(--jd-ai-red-bg);
  color:#9F1D22; font-size:15px; line-height:22px; font-weight:500; }
.jdh-sy-actions { display:flex; flex-wrap:wrap; gap:10px 12px; justify-content:center; margin-top:30px; }
.jdh-sy-actions .jdh-btn { height:50px; padding:10px 18px 10px 11px; }
.jdh-sy-outline { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:50px; padding:0 22px;
  border-radius:100px; border:1px solid var(--jd-line); background:#fff; color:var(--jd-ink); font:500 15px/1 var(--jd-sans);
  cursor:pointer; white-space:nowrap; transition:border-color .2s ease, color .2s ease, background .2s ease; }
.jdh-sy-outline:hover { border-color:#C9D0DC; color:var(--jd-teal-deep); }
.jdh-sy-outline:disabled { opacity:.55; cursor:not-allowed; }
.jdh-sy-danger { background:var(--jd-ai-red) !important; }
.jdh-sy-danger:hover { background:#C53A3F !important; box-shadow:none; }
.jdh-sy-btn-plain { gap:8px; padding:10px 22px; }
.jdh-sy-btn-plain[disabled] { opacity:.6; cursor:not-allowed; }
.jdh-sy-note { margin-top:18px; font-size:13.5px; line-height:20px; color:var(--jd-muted); }
.jdh-sy-note a { color:var(--jd-teal-deep); font-weight:500; text-decoration:underline; text-underline-offset:3px; }
.jdh-sy-actions :focus-visible, .jdh-sy-links a:focus-visible { outline:2px solid var(--jd-teal); outline-offset:3px; }

/* key/value rows (payment details) */
.jdh-sy-rows { margin-top:26px; text-align:left; border:1px solid var(--jd-line); border-radius:18px; overflow:hidden; }
.jdh-sy-rows-h { display:flex; align-items:center; gap:8px; padding:12px 16px; background:#F5F7FB;
  border-bottom:1px solid var(--jd-line); font-size:14px; font-weight:600; color:var(--jd-ink-2); }
.jdh-sy-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; font-size:14.5px; }
.jdh-sy-row + .jdh-sy-row { border-top:1px solid var(--jd-line); }
.jdh-sy-row dt { color:var(--jd-muted); flex:none; }
.jdh-sy-row dd { margin:0; min-width:0; font-weight:600; color:var(--jd-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jdh-sy-mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; font-weight:500 !important; }

/* 404 quick links */
.jdh-sy-links { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:26px; padding-top:24px;
  border-top:1px solid var(--jd-line); }
.jdh-sy-links-h { width:100%; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--jd-muted); margin-bottom:4px; }
.jdh-sy-links a { display:inline-flex; align-items:center; min-height:40px; padding:8px 14px; border-radius:100px; background:#F2F5FD;
  font-size:14.5px; font-weight:500; color:var(--jd-ink-2); transition:background .2s ease, color .2s ease; }
.jdh-sy-links a:hover { background:var(--jd-lav); color:var(--jd-teal-deep); }
.jdh-sy-ref { margin-top:14px; font-size:12.5px; color:var(--jd-muted); font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap:anywhere; }
@media (max-width:640px) {
  .jdh-sy-card { padding:32px 20px 28px; border-radius:22px; }
  .jdh-sy-code { font-size:80px; }
  .jdh-sy-title { font-size:28px; }
  .jdh-sy-actions { flex-direction:column; align-items:stretch; }
  .jdh-sy-actions > * { width:100%; justify-content:center; }
}

/* ---------- glossary + about bodies ---------- */
.jdh-sy-page { padding-bottom:96px; }
.jdh-sy-sheet { background:#fff; border:1px solid var(--jd-line); border-radius:28px; padding:40px 44px; }
.jdh-sy-narrow { max-width:860px; }
.jdh-sy-empty { text-align:center; padding:56px 24px; }
.jdh-sy-empty .jdh-sy-title { font-size:30px; }
.jdh-sy-back { display:inline-flex; align-items:center; gap:6px; margin-bottom:20px; font-size:15px; font-weight:500;
  color:var(--jd-teal-deep); }
.jdh-sy-back:hover { text-decoration:underline; text-underline-offset:3px; }
.jdh-sy-meta { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin-top:14px; font-size:14.5px; color:var(--jd-muted); }
.jdh-sy-meta span { display:inline-flex; align-items:center; gap:6px; }
.jdh-sy-chip { display:inline-flex; align-items:center; padding:4px 12px; border-radius:100px; background:var(--jd-lav);
  color:var(--jd-teal-deep); font-size:13px; font-weight:600; }
.jdh-sy-chip[data-tone="warn"] { background:var(--jd-plag-bg); color:#9A520C; }
.jdh-sy-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.jdh-sy-lede { font-size:18px; line-height:30px; color:var(--jd-ink-2); padding:18px 22px; border-radius:18px;
  background:#F5F7FB; margin-bottom:28px; }
.jdh-sy-figure { position:relative; aspect-ratio:16/9; border-radius:20px; overflow:hidden; margin-bottom:28px; }
.jdh-sy-art { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:40px; align-items:start; }
.jdh-sy-toc { position:sticky; top:120px; }
.jdh-sy-art .prose { color:var(--jd-ink-2); }
.jdh-sy-art .prose :is(h2,h3) { font-family:var(--jd-serif); font-weight:400; color:var(--jd-ink); }
.jdh-sy-art .prose a { color:var(--jd-teal-deep); }
.jdh-sy-foot { margin-top:40px; padding-top:24px; border-top:1px solid var(--jd-line); }
/* framework CMS list/cards inside a jd sheet: keep their layout, adopt the site palette */
.jdh-sy-cms { --primary:#2E7483; }
.jdh-sy-cms :is(h2,h3) { font-family:var(--jd-serif); font-weight:400; color:var(--jd-ink); }

@media (max-width:1279px) { .jdh-sy-art { grid-template-columns:minmax(0,1fr); } .jdh-sy-toc { display:none; } }
@media (max-width:640px) {
  .jdh-sy-sheet { padding:24px 18px; border-radius:22px; }
  .jdh-sy-lede { font-size:16px; line-height:26px; padding:14px 16px; }
}


/* ---------- /login: value panel + sign-in card ---------- */
.jdh-au { padding:24px 0 96px; }
.jdh-au-grid { display:grid; grid-template-columns:minmax(0,1fr) 452px; gap:64px; align-items:center; }
.jdh-au-card { order:2; background:#fff; border:1px solid var(--jd-line); border-radius:28px; padding:40px 36px 32px;
  box-shadow:0 40px 80px -50px rgba(24,27,41,.45); }
.jdh-au-value { order:1; }
.jdh-au-h1 { font-family:var(--jd-serif); font-weight:400; font-size:36px; line-height:1.15; letter-spacing:-.6px;
  color:var(--jd-ink); text-align:center; }
.jdh-au-sub { margin-top:8px; text-align:center; font-size:15px; line-height:22px; color:var(--jd-muted); }
.jdh-au-loading { display:flex; justify-content:center; padding:48px 0; color:var(--jd-teal); }
.jdh-au-eyebrow { display:inline-block; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--jd-teal); margin-bottom:14px; }
.jdh-au-title { font-family:var(--jd-serif); font-weight:300; font-size:48px; line-height:1.1; letter-spacing:-1px;
  color:var(--jd-ink); text-wrap:balance; }
.jdh-au-list-h { margin-top:30px; font-size:15px; font-weight:600; color:var(--jd-ink); }
.jdh-au-list { margin-top:14px; display:grid; gap:12px; }
.jdh-au-list li { display:flex; gap:12px; align-items:flex-start; font-size:16px; line-height:24px; color:var(--jd-ink-2); }
.jdh-au-check { flex:none; width:24px; height:24px; border-radius:50%; background:#DDF4EE; color:#0E7F64;
  display:inline-flex; align-items:center; justify-content:center; }
.jdh-au-trial { margin-top:30px; padding:22px 24px; background:rgba(255,255,255,.6); border:2px solid #fff; border-radius:24px; }
.jdh-au-trial-h { font-family:var(--jd-serif); font-weight:400; font-size:24px; line-height:1.2; color:var(--jd-ink); }
.jdh-au-trial dl { margin:12px 0 0; display:grid; gap:8px; }
.jdh-au-trial dl div { display:flex; gap:12px; font-size:15px; line-height:22px; }
.jdh-au-trial dt { flex:none; min-width:68px; color:var(--jd-muted); }
.jdh-au-trial dd { margin:0; font-weight:600; color:var(--jd-ink); }
.jdh-au-plan-foot { margin-top:14px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px;
  font-size:14px; color:var(--jd-muted); }
.jdh-au-plan-foot a { display:inline-block; padding:10px 0; margin:-10px 0; font-weight:600; color:var(--jd-teal-deep); white-space:nowrap; }
.jdh-au-plan-foot a:hover { text-decoration:underline; text-underline-offset:3px; }

/* LoginForm controls */
.jdh-au-form { display:grid; gap:20px; margin-top:28px; }
.jdh-au-social { display:grid; gap:10px; }
.jdh-au-sbtn { position:relative; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:52px;
  padding:0 16px; border-radius:100px; border:1px solid var(--jd-line); background:#fff;
  /* = Google's official button beside it (14px Google Sans 500, scaled ×1.3 to this 52px row by GoogleSignInButton) */
  font:500 18.2px/1 var(--font-google-sans), "Google Sans", arial, sans-serif; letter-spacing:.3px; color:#1f1f1f;
  cursor:pointer; transition:border-color .2s ease, background .2s ease; }
.jdh-au-sbtn svg { flex:none; width:23px; height:23px; } /* = the G of Google's button beside it (18px ×1.3) */
.jdh-au-sbtn:hover:not(:disabled) { border-color:#C9D0DC; background:#FAFBFD; }
.jdh-au-sbtn:disabled, .jdh-au-submit:disabled, .jdh-au-send:disabled { opacity:.55; cursor:not-allowed; }
.jdh-au-badge { position:absolute; right:14px; padding:3px 8px; border-radius:100px; background:var(--jd-lav);
  color:var(--jd-teal-deep); font-size:11px; font-weight:600; pointer-events:none; }
.jdh-au-or { display:flex; align-items:center; gap:12px; font-size:12px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--jd-muted); }
.jdh-au-or::before, .jdh-au-or::after { content:''; flex:1; height:1px; background:var(--jd-line); }
.jdh-au-fields { display:grid; gap:14px; }
.jdh-au-label { display:block; margin-bottom:6px; font-size:14px; font-weight:600; color:var(--jd-ink-2); }
.jdh-au-input { width:100%; min-width:0; height:50px; padding:0 16px; border-radius:14px; border:1px solid var(--jd-line);
  background:#fff; color:var(--jd-ink); font:400 16px/1 var(--jd-sans); outline:none;
  transition:border-color .2s ease, box-shadow .2s ease; }
.jdh-au-input::placeholder { color:#A3A3A3; }
.jdh-au-input:focus { border-color:var(--jd-teal); box-shadow:0 0 0 3px rgba(46,116,131,.15); }
.jdh-au-input:disabled { opacity:.6; }
.jdh-au-otp { display:flex; gap:8px; }
.jdh-au-otp .jdh-au-input { flex:1; letter-spacing:.2em; }
.jdh-au-send { flex:none; min-width:120px; height:50px; padding:0 16px; border-radius:14px; border:1px solid var(--jd-line);
  background:#F5F7FB; color:var(--jd-teal-deep); font:600 14.5px/1 var(--jd-sans); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; }
.jdh-au-send:hover:not(:disabled) { background:var(--jd-lav); }
.jdh-au-submit { width:100%; justify-content:center; height:54px; padding:0 20px; }
.jdh-au-toggle { justify-self:center; border:0; background:none; min-height:40px; padding:4px 8px; font:500 14px/1.4 var(--jd-sans);
  color:var(--jd-muted); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.jdh-au-toggle:hover { color:var(--jd-teal-deep); }
.jdh-au-form :focus-visible { outline:2px solid var(--jd-teal); outline-offset:2px; }
.jdh-au-legal { margin-top:22px; text-align:center; font-size:13px; line-height:20px; color:var(--jd-muted); }
.jdh-au-legal a { color:var(--jd-ink-2); text-decoration:underline; text-underline-offset:3px; }

@media (max-width:980px) {
  .jdh-au-grid { grid-template-columns:minmax(0,1fr); gap:36px; max-width:560px; margin:0 auto; }
  .jdh-au-card { order:1; }
  .jdh-au-value { order:2; }
  .jdh-au-title { font-size:34px; }
}
@media (max-width:640px) {
  .jdh-au { padding-top:12px; }
  .jdh-au-card { padding:28px 18px 24px; border-radius:22px; }
  .jdh-au-h1 { font-size:30px; }
  .jdh-au-trial { padding:18px; }
  .jdh-au-send { min-width:104px; }
}
