:root{--k-bg:#f6f8fa;--k-surface:#fff;--k-ink:#102033;--k-muted:#5f7487;--k-line:#dbe5eb;--k-brand:#079ab8;--k-brand-dark:#076c83;--k-accent:#e4f4f8;--k-warn:#fff6dc;--k-radius:18px;--k-max:1160px;--k-reading:65ch}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--k-bg);color:var(--k-ink);font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.72}a{color:var(--k-brand-dark);text-decoration-thickness:1px;text-underline-offset:3px}a:hover{color:var(--k-brand)}img{max-width:100%}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:16px;top:16px;z-index:1000;background:#fff;padding:10px 14px}.k-container{width:min(calc(100% - 36px),var(--k-max));margin:auto}.k-header{position:sticky;top:0;z-index:50;background:rgba(245,248,248,.94);border-bottom:1px solid var(--k-line);backdrop-filter:blur(12px)}.k-header__inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}.k-brand{display:flex;align-items:center;gap:10px;color:var(--k-ink);font-weight:800;text-decoration:none}.k-brand img{width:38px;height:38px;border-radius:10px}.k-nav{display:flex;gap:8px;align-items:center}.k-nav a{padding:8px 12px;border-radius:999px;text-decoration:none;font-weight:650;font-size:.94rem}.k-nav a[aria-current="page"],.k-nav a:hover{background:var(--k-accent)}.k-menu{display:none;border:1px solid var(--k-line);background:#fff;border-radius:10px;padding:8px 11px}.breadcrumb{font-size:.88rem;color:var(--k-muted);padding:26px 0 4px}.breadcrumb ol{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:0}.breadcrumb li:not(:last-child)::after{content:"/";margin-left:7px;color:#8aa0aa}.k-hero{padding:48px 0 38px}.k-eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;font-weight:800;color:var(--k-brand)}h1,h2,h3{font-family:Lexend,"Source Sans 3",sans-serif;line-height:1.2;letter-spacing:-.025em}h1{font-size:clamp(2.15rem,5vw,4.6rem);max-width:940px;margin:12px 0 18px}h2{font-size:clamp(1.55rem,3vw,2.25rem);margin:48px 0 15px}h3{font-size:1.15rem;margin:28px 0 10px}.k-lead{max-width:790px;font-size:1.18rem;color:var(--k-muted)}.k-meta{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:22px;color:var(--k-muted);font-size:.9rem}.answer-box,.note-box,.warning-box{border-radius:var(--k-radius);padding:22px 24px;margin:28px 0}.answer-box{background:var(--k-accent);border-left:4px solid var(--k-brand)}.note-box{background:#fff;border:1px solid var(--k-line)}.warning-box{background:var(--k-warn);border-left:4px solid #c78b00}.answer-box strong,.note-box strong,.warning-box strong{display:block;margin-bottom:6px}.k-layout{display:grid;grid-template-columns:minmax(0,var(--k-reading)) 280px;gap:72px;align-items:start;padding-bottom:70px}.k-article{min-width:0}.k-article p,.k-article li{color:#294551}.k-article ul,.k-article ol{padding-left:1.25rem}.k-article li+li{margin-top:8px}.toc{position:sticky;top:94px;background:#fff;border:1px solid var(--k-line);border-radius:var(--k-radius);padding:20px}.toc strong{display:block;margin-bottom:8px}.toc ol{margin:0;padding-left:20px}.toc li+li{margin-top:7px}.toc a{text-decoration:none;font-size:.92rem}.k-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0}.k-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--k-line);border-radius:var(--k-radius);padding:22px;text-decoration:none;color:var(--k-ink);box-shadow:0 7px 24px rgba(17,54,65,.04)}.k-card:hover{transform:translateY(-2px);border-color:#9acbd0}.k-card small{color:var(--k-brand);font-weight:800;text-transform:uppercase;letter-spacing:.08em}.k-card h2,.k-card h3{font-size:1.15rem;margin:9px 0}.k-card p{color:var(--k-muted);margin:0}.compare-wrap{overflow-x:auto;border:1px solid var(--k-line);border-radius:14px;background:#fff}.compare{width:100%;border-collapse:collapse;min-width:620px}.compare th,.compare td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--k-line)}.compare th{background:#edf6f6}.compare tr:last-child td{border-bottom:0}.steps{counter-reset:step;list-style:none!important;padding:0!important}.steps>li{counter-increment:step;position:relative;padding:0 0 24px 56px}.steps>li::before{content:counter(step);position:absolute;left:0;top:0;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--k-brand);color:#fff;font-weight:800}.faq details{background:#fff;border:1px solid var(--k-line);border-radius:12px;padding:15px 18px;margin:10px 0}.faq summary{cursor:pointer;font-weight:750}.sources{font-size:.94rem}.sources li{word-break:break-word}.related{border-top:1px solid var(--k-line);padding:38px 0 72px}.k-footer{background:#102d38;color:#dce9ec;padding:38px 0}.k-footer a{color:#fff}.k-footer__inner{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}.k-footer p{margin:0;color:#b9ccd1}.tag{display:inline-flex;border:1px solid #a9d6d9;background:#effafa;border-radius:999px;padding:4px 10px;font-size:.82rem;font-weight:700}.article-list{display:grid;gap:14px}.article-row{background:#fff;border:1px solid var(--k-line);border-radius:14px;padding:18px 20px}.article-row h2,.article-row h3{font-size:1.15rem;margin:6px 0}.article-row p{margin:0;color:var(--k-muted)}code{background:#e8f0f2;border-radius:5px;padding:.1em .35em}@media(max-width:860px){.k-menu{display:block}.k-nav{display:none;position:absolute;left:18px;right:18px;top:62px;flex-direction:column;align-items:stretch;background:#fff;border:1px solid var(--k-line);border-radius:14px;padding:10px;box-shadow:0 14px 30px rgba(14,50,60,.14)}.k-nav.open{display:flex}.k-layout{grid-template-columns:1fr;gap:26px}.toc{position:static}.k-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.k-grid{grid-template-columns:1fr}.k-hero{padding-top:32px}.k-container{width:min(calc(100% - 28px),var(--k-max))}}.lang-switch{position:relative}.lang-btn{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--k-line);color:var(--k-muted);padding:6px 13px;border-radius:999px;font-size:.88rem;font-weight:650;cursor:pointer;transition:color 160ms ease,border-color 160ms ease,transform 140ms ease}.lang-btn:hover{border-color:#9acbd0;color:var(--k-ink)}.lang-arrow{font-size:.72em;margin-left:2px;opacity:.75}.lang-panel{position:absolute;top:calc(100% + 8px);right:0;background:var(--k-bg);border:1px solid var(--k-line);border-radius:14px;padding:6px;min-width:172px;box-shadow:0 8px 24px rgba(17,54,65,.12);opacity:0;visibility:hidden;transform:translateY(-4px) scale(.97);transform-origin:top right;transition:opacity 180ms ease,transform 180ms ease,visibility 180ms step-end;z-index:101}.lang-panel.open{opacity:1;visibility:visible;transform:none;transition:opacity 180ms ease,transform 180ms ease,visibility 0ms step-start}.lang-option{display:block;width:100%;text-align:left;padding:8px 12px;border-radius:10px;border:none;background:transparent;color:var(--k-muted);font-size:.9rem;cursor:pointer;transition:color 140ms ease,background-color 140ms ease}.lang-option:hover{background:#fff;color:var(--k-ink)}.lang-option.active{color:var(--k-brand);font-weight:700}[dir="rtl"] .lang-panel{right:auto;left:0}[dir="rtl"] .lang-btn{margin-left:0}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.license-box{border-radius:var(--k-radius);padding:22px 24px;margin:28px 0;background:#eef5ff;border-left:4px solid #4169a1}.license-box strong{display:block;margin-bottom:6px}.k-article>table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--k-line);display:block;overflow-x:auto}.k-article>table th,.k-article>table td{padding:12px 14px;border:1px solid var(--k-line);text-align:left;vertical-align:top}.k-article>table th{background:#edf6f6}.sources li+li{margin-top:14px}.source-access{color:var(--k-muted);font-size:.88rem}.claim-ledger{display:grid;gap:12px}.claim-ledger>div{background:#fff;border:1px solid var(--k-line);border-radius:12px;padding:16px}.claim-ledger dt{font-weight:750}.claim-ledger dd{margin:8px 0 0;color:var(--k-muted)}.knowledge-search{min-height:74px}.knowledge-search .pagefind-ui__search-input{border-radius:12px;border:1px solid var(--k-line);font:inherit}

/* Motion system: card feedback only, with touch and reduced-motion safeguards. */
.k-card {
  position: relative;
  overflow: hidden;
  transform: none;
  transition:
    transform 180ms cubic-bezier(.16, 1, .3, 1),
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.k-card::after {
  content: '\2192';
  position: absolute;
  right: 20px;
  bottom: 17px;
  color: var(--k-brand);
  font-size: 1.1rem;
  opacity: .55;
  transform: translateX(0);
  transition: opacity 180ms ease, transform 180ms cubic-bezier(.16, 1, .3, 1);
}

.k-card:hover { transform: none; }

.k-card:focus-visible {
  outline: 3px solid rgba(8,127,140,.38);
  outline-offset: 3px;
}

.k-card p { padding-right: 26px; }

.k-card:active { transform: scale(.985); }

@media (hover: hover) and (pointer: fine) {
  .k-card:hover {
    transform: translateY(-2px);
    border-color: #9acbd0;
    box-shadow: 0 12px 28px rgba(17,54,65,.08);
  }

  .k-card:hover::after {
    opacity: 1;
    transform: translateX(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .k-card,
  .k-card:hover,
  .k-card:active,
  .k-card::after,
  .k-card:hover::after {
    transform: none !important;
  }
}

/* Shared mobile shell: match the main PeduliAI site's compact brand/menu rhythm. */
.k-header__inner { min-height: 72px; }
.k-brand { white-space: nowrap; }
.k-menu { width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; }
.k-menu svg { display: block; pointer-events: none; }

@media (max-width: 860px) {
  .k-header__inner { min-height: 64px; gap: 10px; }
  .k-menu { display: grid; flex: 0 0 44px; }
  .k-nav { top: 64px; max-height: calc(100dvh - 80px); overflow-y: auto; }
  .k-nav a { display: flex; align-items: center; min-height: 44px; }
}

@media (max-width: 359px) {
  .k-brand img { width: 36px; height: 36px; }
  .k-brand span { font-size: .94rem; }
}

/* Shared PeduliAI surface refinement */
.answer-box { border: 1px solid #b8dde5; border-left-width: 1px; }
.warning-box { border: 1px solid #e7cd87; border-left-width: 1px; }
.license-box { border: 1px solid #cbd8ed; border-left-width: 1px; }

/* Center the visual reading frame, not only its outer container. */
:root {
  --k-rail: 256px;
  --k-layout-gap: clamp(48px, 4.5vw, 64px);
  --k-article-frame: calc(var(--k-reading) + var(--k-layout-gap) + var(--k-rail));
}

.breadcrumb,
.k-hero {
  width: min(100%, var(--k-article-frame));
  margin-inline: auto;
}

.k-layout {
  grid-template-columns: minmax(0, var(--k-reading)) var(--k-rail);
  gap: var(--k-layout-gap);
  justify-content: center;
}

.toc {
  width: 100%;
}

/* Hub pages need a wider primary rail so their card groups remain legible. */
main[data-content-type="hub"] .breadcrumb,
main[data-content-type="hub"] .k-hero {
  width: min(100%, 1080px);
}

main[data-content-type="hub"] .k-layout {
  grid-template-columns: minmax(0, 760px) var(--k-rail);
}

@media (max-width: 1120px) {
  main[data-content-type="hub"] .breadcrumb,
  main[data-content-type="hub"] .k-hero {
    width: min(100%, 760px);
  }

  main[data-content-type="hub"] .k-layout {
    grid-template-columns: minmax(0, 760px);
    gap: 26px;
  }

  main[data-content-type="hub"] .toc {
    display: none;
  }
}

@media (max-width: 920px) {
  .breadcrumb,
  .k-hero,
  main[data-content-type="hub"] .breadcrumb,
  main[data-content-type="hub"] .k-hero {
    width: min(100%, var(--k-reading));
  }

  .k-layout,
  main[data-content-type="hub"] .k-layout {
    grid-template-columns: minmax(0, var(--k-reading));
    gap: 26px;
  }

  .toc {
    position: static;
  }
}

/* Four equal destinations: prevent an orphaned fourth card. */
.k-article .k-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.related .k-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.k-card {
  min-height: 0;
  padding: clamp(20px, 2vw, 24px);
}

.k-card h2,
.k-card h3 {
  line-height: 1.28;
  text-wrap: balance;
}

.k-card p {
  padding-right: 24px;
  padding-bottom: 1.5rem;
  line-height: 1.62;
}

@media (max-width: 1179px) {
  .related .k-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 699px) {
  .k-article .k-grid,
  .related .k-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}