/* Measured klikit dashboard structure, original KITAPOS content/assets.
   Existing brand wins: Plus Jakarta Sans, indigo, shared navigation. */
.dp {padding-top:72px;color:var(--ink);background:#fff;}
.dp-container {max-width:1280px;margin-inline:auto;padding-inline:16px;}
.dp h1,.dp h2,.dp h3 {font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-.04em;}
.dp h1 {font-size:64px;font-weight:650;line-height:1;margin:32px 0 24px;}
.dp h2,.dp h3 {font-weight:600;}
.dp h2 {font-size:36px;line-height:1.2;}
.dp h3 {font-size:30px;line-height:1.3;}
.dp p {line-height:1.75;color:var(--muted);}
.dp-breadcrumb {display:flex;align-items:center;gap:12px;height:60px;font-size:13px;color:var(--muted);}
.dp-breadcrumb a:hover {color:var(--accent);}
.dp-hero {position:relative;isolation:isolate;min-height:630px;padding-block:48px 88px;background:radial-gradient(ellipse at 65% 46%,#a59af080,transparent 60%),radial-gradient(ellipse at 90% 20%,#eeebff,transparent 65%);}
.dp-hero-grid {display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.dp-tag {display:inline-block;padding:8px 16px;border:1px solid #ddd9ef;border-radius:999px;background:#f2f0ff;color:#5145a1!important;font-size:13px;line-height:1.6!important;}
.dp-subtitle {font-size:24px;line-height:1.5!important;margin-bottom:18px;}
.dp-lede {font-size:16px;max-width:60ch;}
.dp-actions {display:flex;flex-wrap:wrap;gap:16px;margin-top:36px;}
.dp .dp-actions a {min-height:56px;font-size:15px;padding-inline:30px;border-radius:18px;}
.dp-summary {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:48px;}
.dp-summary>div {border:1px solid #dddce8;border-radius:16px;padding:16px;background:#ffffff80;}
.dp-summary dt {font-size:18px;font-weight:700;letter-spacing:-.03em;}
.dp-summary dd {font-size:11px;color:var(--muted);line-height:1.6;margin-top:4px;}
.dp-window {border:1px solid #b9b1de;border-radius:20px;background:#f4f2fc;box-shadow:0 24px 60px #27205d24;overflow:hidden;}
.dp-window-bar {display:flex;align-items:center;gap:9px;padding:15px 18px;background:#f9f8ff;border-bottom:1px solid #ddd9ec;font-size:12px;}
.dp-window-bar .brand-mark {width:22px;height:24px;}
.dp-window-bar>span:last-child {margin-left:auto;font-size:10px;color:var(--muted);}
.dp-window img {width:100%;height:auto;display:block;}
.dp-window figcaption {padding:12px 18px;font-size:11px;color:var(--muted);}
.dp-section {padding-block:96px;}
.dp-heading {text-align:center;max-width:760px;margin:0 auto 64px;}
.dp-heading>p {font-size:18px;margin-top:16px;}
.dp-heading .dp-eyebrow {font-size:11px;letter-spacing:.2em;color:var(--accent);margin:0 0 16px;}
.dp-orbit {width:520px;height:520px;margin:auto;position:relative;}
.dp-orbit-ring {position:absolute;inset:70px;border:1px solid #e1dfee;border-radius:50%;}
.dp-orbit-center {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:212px;height:212px;border:1px solid #dad6ef;background:#faf9ff;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;gap:7px;}
.dp-orbit-center .brand-mark {width:30px;height:32px;}
.dp-orbit-center h3 {font-size:15px;line-height:1.5;letter-spacing:-.02em;}
.dp-orbit-center p {font-size:18px;font-weight:650;color:var(--accent);line-height:1.4;}
.dp-orbit-center>span:last-child {font-size:11px;line-height:1.5;color:var(--muted);}
.dp-orbit-buttons button {position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:76px;min-height:76px;border:1px solid #ddd9ec;background:white;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#706a82;cursor:pointer;transition:background .25s,border-color .25s,color .25s;}
.dp-orbit-buttons button svg {width:22px;height:22px;}
.dp-orbit-buttons button span {font-size:10px;}
.dp-mobile-description {display:none;}
.dp-orbit-buttons button:nth-child(1) {--x:50%;--y:13.5%;}
.dp-orbit-buttons button:nth-child(2) {--x:81.6%;--y:31.7%;}
.dp-orbit-buttons button:nth-child(3) {--x:81.6%;--y:68.3%;}
.dp-orbit-buttons button:nth-child(4) {--x:50%;--y:86.5%;}
.dp-orbit-buttons button:nth-child(5) {--x:18.4%;--y:68.3%;}
.dp-orbit-buttons button:nth-child(6) {--x:18.4%;--y:31.7%;}
.dp-orbit-buttons button[aria-pressed=true] {background:#eeebff;color:var(--accent);border-color:var(--accent);box-shadow:0 5px 20px #4f46e518;}
.dp-motion-controls {display:flex;justify-content:center;align-items:center;gap:16px;margin-top:16px;color:var(--muted);font-size:12px;}
.dp-motion-controls button {min-height:44px;padding:8px 16px;border:1px solid var(--line);border-radius:12px;cursor:pointer;color:var(--accent);}
.dp-feature-row {display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.dp-feature-row+.dp-feature-row {margin-top:128px;}
.dp-feature-row:nth-of-type(even) .dp-feature-copy {order:2;}
.dp-feature-copy h3 {margin:24px 0 16px;}
.dp-feature-copy>p:not(.dp-tag) {font-size:17px;}
.dp-text-link {display:inline-flex;align-items:center;min-height:44px;gap:10px;font-size:15px;color:var(--accent);margin-top:20px;font-weight:600;}
.dp-visual {min-width:0;aspect-ratio:4/3;border:1px solid #e0ddeb;border-radius:20px;background:#f6f4fc;padding:24px;display:flex;flex-direction:column;justify-content:center;}
.dp-visual>img {display:block;width:100%;height:auto;max-height:100%;object-fit:contain;min-height:0;}
.dp-visual figcaption {font-size:11px;color:var(--muted);margin-top:14px;line-height:1.6;}
.dp-outlets {padding:32px;background:#fff;box-shadow:0 16px 48px #28204a0c;}
.dp-outlet-header {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:32px;}
.dp-outlet-header strong {font-size:18px;}
.dp-outlet-header span {font-size:10px;color:var(--muted);}
.dp-outlet {display:grid;grid-template-columns:1fr auto;gap:10px;font-size:14px;margin-bottom:28px;}
.dp-outlet-track {height:7px;border-radius:5px;background:#efedf7;align-self:center;}
.dp-outlet-track i {display:block;background:var(--accent);width:var(--dp-bar);height:100%;border-radius:inherit;}
.dp-outlet small {font-size:11px;color:var(--muted);}
.dp-outlet-total {display:flex;justify-content:space-between;padding-top:20px;border-top:1px solid var(--line);font-size:14px;}
.dp-outlet-total strong {color:var(--accent);}
.dp-photo {padding:0;overflow:hidden;position:relative;}
.dp-photo>img {height:100%;object-fit:cover;}
.dp-photo figcaption {position:absolute;bottom:0;left:0;right:0;margin:0;background:linear-gradient(transparent,#1b153dc9);color:white;padding:52px 24px 24px;font-size:13px;}
.dp-setup {background:#f7f6fb;}
.dp-steps {display:grid;grid-template-columns:repeat(4,1fr);gap:32px;counter-reset:none;}
.dp-steps li {text-align:center;position:relative;}
.dp-steps li>span {display:grid;place-items:center;border-radius:50%;width:56px;height:56px;margin:0 auto 24px;background:#eae6ff;color:var(--accent);font-size:21px;font-weight:650;}
.dp-steps h3 {font-size:18px;letter-spacing:-.02em;margin-bottom:12px;}
.dp-steps p {font-size:14px;}
.dp-support-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.dp-support-grid article {border:1px solid #e1deec;border-radius:20px;padding:32px;display:flex;flex-direction:column;align-items:flex-start;background:linear-gradient(150deg,#f3f0ff,#fff 70%);}
.dp-card-kicker {font-size:10px;letter-spacing:.09em;color:var(--accent);margin-bottom:24px;}
.dp-support-grid h3 {font-size:25px;margin-bottom:18px;}
.dp-support-grid p {font-size:15px;margin-bottom:24px;}
.dp-support-grid a {margin-top:auto;font-size:13px;line-height:1.6;color:var(--accent);padding-block:10px;}
.dp-related {padding-block:80px 32px;}
.dp-related-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.dp-related-grid>a {display:block;border:1px solid #e1deec;border-radius:20px;padding:20px;background:#faf9fe;transition:transform .25s;}

/* The dashboard story keeps its white product screenshots, while page-level
   surfaces and controls follow the public dark theme. */
:root[data-theme='dark'] .dp{background:var(--paper);color:var(--ink)}
:root[data-theme='dark'] .dp-hero{background:radial-gradient(ellipse at 78% 18%,#302b66,transparent 65%),var(--paper)}
:root[data-theme='dark'] .dp-summary>div,
:root[data-theme='dark'] .dp-orbit-center,
:root[data-theme='dark'] .dp-orbit-buttons button,
:root[data-theme='dark'] .dp-related-grid>a{background:var(--card);border-color:var(--line);color:var(--ink)}
:root[data-theme='dark'] .dp-orbit-buttons button[aria-pressed='true']{background:var(--accent-wash);border-color:var(--accent);color:var(--ink)}
:root[data-theme='dark'] .dp-setup{background:var(--raise)}
:root[data-theme='dark'] .dp-visual{background:var(--raise);border-color:var(--line)}
:root[data-theme='dark'] .dp-outlets{background:var(--card)}
:root[data-theme='dark'] .dp-tag{background:var(--accent-wash);border-color:var(--line-strong);color:var(--accent)!important}
/* The dashboard screenshot stays light; its labels must not inherit dark-page
   text tokens. The numbered setup steps are true page UI and follow dark mode. */
.dp-window{--ink:#292638;--muted:#625b70;--faint:#6c647e;color:#292638}
:root[data-theme='dark'] .dp-steps li>span{background:#2b2940;color:#bbb5ff}
:root[data-theme='dark'] .dp-support-grid article{background:var(--card);border-color:var(--line);color:var(--ink)}
.dp-related-grid img {width:100%;aspect-ratio:1.6;object-fit:contain;display:block;background:#eeebf8;border-radius:8px;}
.dp-related-grid h3 {font-size:20px;margin:24px 0 10px;}
.dp-related-grid p {font-size:14px;}
.dp-heading a {color:var(--accent);}
.dp-final {margin-top:64px;min-height:500px;position:relative;isolation:isolate;display:flex;align-items:center;text-align:center;padding:96px 16px;color:white;background:#201b4e;}
.dp-final>img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:-2;}
.dp-final:after {content:'';position:absolute;inset:0;z-index:-1;background:#18133bd9;}
.dp-final h2 {font-size:48px;}
.dp-final p {color:#eeebfa;margin-top:20px;font-size:18px;}
.dp-final .dp-actions {justify-content:center;}
.dp-final .btn-line {border-color:#d3cdeb;color:white;}
@media(hover:hover) and (pointer:fine) {.dp-related-grid>a:hover {transform:translateY(-4px);}.dp-orbit-buttons button:hover {border-color:var(--accent);}}
@media(max-width:1023px) {
 .dp {padding-top:56px;}.dp-container {padding-inline:24px;}
 .dp-hero-grid {grid-template-columns:1fr;gap:40px;}.dp-hero-copy {max-width:680px;}.dp-window {display:none;}
 .dp h1 {font-size:44px;}.dp-hero {min-height:0;padding-block:48px 64px;}
 .dp-final h2 {font-size:36px;}
 .dp-orbit {width:100%;height:auto;}.dp-orbit-ring,.dp-orbit-center {display:none;}
 .dp-orbit-buttons {display:grid;grid-template-columns:1fr 1fr;gap:16px;}
 .dp-orbit-buttons button {position:static;transform:none;width:auto;border-radius:16px;min-height:112px;flex-direction:row;gap:18px;padding:20px;justify-content:flex-start;}
 .dp-orbit-buttons button {display:grid;grid-template-columns:24px 1fr;column-gap:16px;row-gap:6px;text-align:left;}
 .dp-orbit-buttons button svg {grid-row:1/3;}
 .dp-orbit-buttons button span {font-size:16px;}.dp-motion-controls {display:none;}
 .dp-mobile-description {display:block;grid-column:2;font-size:12px;line-height:1.6;color:var(--muted);}
 .dp-feature-row {gap:40px;}.dp-feature-row+.dp-feature-row {margin-top:88px;}
 .dp-visual {padding:16px;aspect-ratio:auto;min-height:270px;}.dp-photo {padding:0;}.dp-photo>img {height:300px;}
 .dp-outlet {font-size:12px;}.dp-outlet-header {flex-wrap:wrap;gap:6px;margin-bottom:20px;}.dp-outlet-total {font-size:12px;}
 .dp-steps {grid-template-columns:1fr 1fr;gap:48px 32px;}
 .dp-support-grid {gap:16px;}.dp-support-grid article {padding:24px;}.dp-support-grid h3 {font-size:22px;}
}
@media(max-width:650px) {
 .dp-container {padding-inline:16px;}.dp-breadcrumb {font-size:12px;height:60px;}
 .dp h1 {font-size:36px;margin-top:28px;}.dp h2 {font-size:30px;}.dp h3 {font-size:25px;}
 .dp-hero {min-height:0;padding-block:40px 56px;}.dp-subtitle {font-size:21px;}.dp-lede {font-size:16px;}
 .dp-summary {grid-template-columns:1fr 1fr;gap:12px;margin-top:32px;}.dp-summary dt {font-size:18px;}.dp-summary dd {font-size:12px;}
 .dp-actions {gap:12px;margin-top:28px;}.dp .dp-actions a {font-size:14px;padding-inline:22px;min-height:52px;}
 .dp-section {padding-block:64px;}.dp-heading {margin-bottom:40px;}.dp-heading>p {font-size:16px;}
 .dp-orbit-buttons {grid-template-columns:1fr;}.dp-orbit-buttons button {min-height:88px;}
 .dp-feature-row {grid-template-columns:1fr;gap:32px;}.dp-feature-row:nth-of-type(even) .dp-feature-copy {order:0;}.dp-feature-row+.dp-feature-row {margin-top:72px;}
 .dp-feature-copy>p:not(.dp-tag) {font-size:16px;}.dp-visual {min-height:0;}.dp-outlets {padding:24px;}.dp-outlet-header strong {font-size:17px;}.dp-outlet {font-size:12px;}
 .dp-steps,.dp-support-grid,.dp-related-grid {grid-template-columns:1fr;}.dp-steps {gap:40px;}.dp-steps li {max-width:300px;margin:auto;}.dp-steps h3 {font-size:20px;}
 .dp-support-grid {gap:20px;}.dp-support-grid article {padding:28px;}.dp-support-grid h3 {font-size:25px;}
 .dp-related {padding-top:56px;}.dp-related-grid {gap:20px;}.dp-related-grid h3 {font-size:22px;}
 .dp-final {margin-top:32px;min-height:430px;padding-block:64px;}.dp-final h2 {font-size:34px;}.dp-final p {font-size:16px;}
}
@media(min-width:1024px) and (max-height:820px) {
 .dp-hero {min-height:0;padding-block:32px 48px;}
 .dp h1 {font-size:64px;margin-block:24px 20px;}
 .dp-subtitle {font-size:22px;}.dp-lede {font-size:15px;}
 .dp-actions {margin-top:24px;}.dp-summary {margin-top:32px;gap:12px;}
 .dp-summary>div {padding:12px;}.dp-summary dt {font-size:15px;}
 .dp-overview {padding-block:24px;}.dp-overview .dp-heading {margin-bottom:16px;}
 .dp-overview .dp-eyebrow {display:none;}
 .dp-orbit {width:400px;height:400px;}.dp-orbit-ring {inset:54px;}
 .dp-orbit-center {width:200px;height:200px;padding:14px;gap:6px;}
 .dp-orbit-center .brand-mark {width:24px;height:26px;}
 .dp-orbit-center h3 {font-size:15px;}.dp-orbit-center p {font-size:16px;}.dp-orbit-center>span:last-child {font-size:11px;}
 .dp-orbit-buttons button {width:76px;min-height:76px;gap:6px;border-radius:18px;}
 .dp-orbit-buttons button svg {width:22px;height:22px;}.dp-orbit-buttons button span {font-size:11px;}
}
@media(prefers-reduced-motion:reduce) {.dp *, .dp *:before,.dp *:after {animation:none!important;transition:none!important;}}