/*
 * Wilder Labs Studio - Sim Data Manager download page (wls-sdm.css)
 * Loads only on pages the seeder marks with kind "sdm-download" (meta _wls_kind):
 * the download page and the Sim Tools index.
 * The page is Divi sections holding Code modules; this file styles what is inside them
 * and takes the padding and width off the Divi wrappers so the layout can run full width.
 */

body.wls-sdm-dl {
	--sdm-ground: #061A33;
	--sdm-panel: #0B2545;
	--sdm-line: #1B3B63;
	--sdm-text: #DCE6EF;
	--sdm-muted: #A9BDD3;
	--sdm-blue: #5BA3E0;
	--sdm-blue-2: #8EC1EE;
	--sdm-lime: #C2FF01;
	--sdm-pill: #0F0E33;
	--sdm-sans: "Space Grotesk", "Space Grotesk Fallback", Arial, sans-serif;
	--sdm-mono: "Space Mono", "Space Mono Fallback", "Courier New", monospace;
	--sdm-gutter: clamp(16px, 4vw, 48px);
	--sdm-ease: cubic-bezier(.2, .7, .2, 1);
}
html:has(body.wls-sdm-dl) { background: #061A33; overflow-x: clip; }
body.wls-sdm-dl,
body.wls-sdm-dl #page-container,
body.wls-sdm-dl #main-content { background: #061A33 !important; }

/* Divi wrappers: no padding, full width, nothing that breaks position: sticky */
body.wls-sdm-dl .et-l--body .et_pb_section,
body.wls-sdm-dl .et-l--body .et_pb_row,
body.wls-sdm-dl .et-l--body .et_pb_column,
body.wls-sdm-dl .et-l--body .et_pb_post_content { background: transparent !important; padding: 0 !important; overflow: visible !important; }
body.wls-sdm-dl .et-l--body .et_pb_row { width: 100% !important; max-width: none !important; margin: 0 !important; }
body.wls-sdm-dl .et-l--post .et_pb_section { padding: 0 !important; background: transparent !important; overflow: visible !important; }
body.wls-sdm-dl .et-l--post .et_pb_row { width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; }
body.wls-sdm-dl .et-l--post .et_pb_column { margin: 0 !important; overflow: visible !important; }
body.wls-sdm-dl .et-l--post .et_pb_code,
body.wls-sdm-dl .et-l--post .et_pb_code_inner { margin: 0 !important; overflow: visible !important; }

/* ---------- base ---------- */
.sdm { color: var(--sdm-text); font: 400 17px/1.6 var(--sdm-sans); -webkit-font-smoothing: antialiased; }
.sdm *, .sdm *::before, .sdm *::after { box-sizing: border-box; }
.sdm img { max-width: 100%; height: auto; display: block; }
.sdm a { color: inherit; }
.sdm h1, .sdm h2, .sdm h3 { margin: 0; padding: 0; color: #fff; font-family: var(--sdm-sans); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; }
.sdm p { margin: 0; padding: 0; }
.sdm ol, .sdm ul { margin: 0; padding: 0; }
.sdm b, .sdm strong { color: #fff; font-weight: 700; }
.sdm-wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--sdm-gutter); }
.sdm-eyebrow { font: 400 14px/1.4 var(--sdm-mono); letter-spacing: .14em; color: var(--sdm-blue); }
.sdm .muted { color: var(--sdm-muted); }

.sdm-btn { display: inline-flex; align-items: center; gap: 12px; text-decoration: none !important; font: 600 18px/1 var(--sdm-sans); border-radius: 10px; padding: 18px 26px; transition: transform .5s var(--sdm-ease), background .3s, box-shadow .5s var(--sdm-ease); }
.sdm-btn svg { width: 22px; height: 22px; flex: none; }
.sdm-btn--dl { background: var(--sdm-blue); color: #05152B !important; box-shadow: 0 10px 30px rgba(91, 163, 224, .25); }
.sdm-btn--dl:hover { background: var(--sdm-blue-2); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(91, 163, 224, .35); }
.sdm-btn--ghost { border: 2px solid var(--sdm-blue); color: #fff !important; }
.sdm-btn--ghost:hover { background: rgba(91, 163, 224, .12); }
.sdm-btn:focus-visible { outline: 2px solid var(--sdm-lime); outline-offset: 3px; }

.sdm-frame { border-radius: 16px; overflow: hidden; border: 1px solid var(--sdm-line); background: #081E3B; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.sdm-live { display: inline-flex; align-items: center; gap: 8px; }
.sdm-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sdm-lime); animation: sdm-ping 2.4s var(--sdm-ease) infinite; }
@keyframes sdm-ping { 0% { box-shadow: 0 0 0 0 rgba(194, 255, 1, .5); } 70%, 100% { box-shadow: 0 0 0 10px rgba(194, 255, 1, 0); } }
.sdm .sdm-note { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--sdm-muted); max-width: 540px; margin: 18px auto 0; text-align: left; }
.sdm-note svg { width: 20px; height: 20px; flex: none; color: var(--sdm-lime); margin-top: 1px; }
.sdm-kbd { font: 400 13.5px var(--sdm-mono); background: #06203F; border: 1px solid var(--sdm-line); border-radius: 5px; padding: 1px 6px; color: #fff; white-space: nowrap; }
.sdm-sample { font: 400 11px var(--sdm-mono); letter-spacing: .12em; color: #7F93AD; text-transform: uppercase; }

.sdm-rv { opacity: 0; transform: translateY(28px); transition: opacity 1.2s var(--sdm-ease), transform 1.2s var(--sdm-ease); }
.sdm-rv.in, html:not(.sdm-js) .sdm-rv { opacity: 1; transform: none; }

/* ---------- hero ---------- */
.sdm-hero { padding: 136px 0 0; text-align: center; position: relative; overflow-x: clip; }
.sdm-hero::before { content: ""; position: absolute; left: 50%; top: 420px; width: 1100px; height: 700px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(91, 163, 224, .22), transparent 70%); pointer-events: none; }
.sdm-tile { width: 96px; height: 96px; margin: 0 auto 26px; border-radius: 20px; border: 1px solid var(--sdm-line); background: #0A2244; display: grid; place-items: center; }
.sdm-tile img { width: 70px; }
.sdm-hero h1 { font-size: clamp(48px, 7.4vw, 96px); margin: 18px 0 22px; }
.sdm-lede { font-size: 20px; color: var(--sdm-muted); max-width: 52ch; margin: 0 auto 36px !important; }
.sdm-acts { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; position: relative; }
.sdm .sdm-demo-note { margin: 14px auto 0 !important; font: 400 12.5px/1.5 var(--sdm-mono); letter-spacing: .04em; color: var(--sdm-muted); position: relative; }
.sdm-line { margin: 22px auto 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; font: 400 13px var(--sdm-mono); letter-spacing: .06em; color: var(--sdm-muted); position: relative; }
.sdm-line b { color: #fff; }
.sdm-line a { color: var(--sdm-muted); text-decoration: underline; text-underline-offset: 3px; }
.sdm-line a:hover { color: #fff; }
.sdm-shot { max-width: 1120px; margin: 64px auto 0; transform: perspective(1800px) rotateX(18deg) scale(.93); transform-origin: 50% 0; position: relative; }
/* Desktop window with the phone version beside it; both bend forward together on scroll */
.sdm-duo { display: flex; align-items: flex-end; max-width: 1200px; }
.sdm-duo__desk { flex: 1 1 0; min-width: 0; }
.sdm-duo__desk img { width: 100%; }
.sdm-duo__phone .st-phone { display: block; }
.sdm-duo__phone { flex: 0 0 clamp(150px, 21%, 248px); margin: 0 0 -34px -56px; position: relative; z-index: 2; display: block; text-decoration: none !important; transition: transform .5s var(--sdm-ease); }
.sdm-duo__phone .st-phone { box-shadow: 0 34px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(91, 163, 224, .18); }
.sdm-duo__phone:hover { transform: translateY(-6px); }
.sdm-duo__badge { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font: 700 14px/1 var(--sdm-sans); color: #0F0E33; background: var(--sdm-lime); border-radius: 999px; padding: 11px 16px; box-shadow: 0 10px 26px rgba(194, 255, 1, .22); }
.sdm-duo__badge svg { width: 16px; height: 16px; }
.sdm-duo__phone:focus-visible { outline: 2px solid var(--sdm-lime); outline-offset: 6px; border-radius: 36px; }

/* ---------- tour ---------- */
.sdm-tour { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; margin-top: 140px; }
.sdm-steps { padding: 20vh 0 30vh; }
.sdm-step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity .8s var(--sdm-ease); }
.sdm-step.on, html:not(.sdm-js) .sdm-step { opacity: 1; }
.sdm-step .n { font: 700 13px var(--sdm-mono); letter-spacing: .14em; color: var(--sdm-lime); margin-bottom: 14px; }
.sdm-step h2 { font-size: clamp(28px, 3.2vw, 42px); margin-bottom: 14px; }
.sdm-step p { color: var(--sdm-muted); font-size: 18px; max-width: 38ch; }
.sdm-step .m { display: none; }
.sdm-stick { position: sticky; top: 15vh; height: 70vh; display: flex; align-items: center; }
.sdm-stick .sdm-frame { width: 100%; position: relative; aspect-ratio: 1500 / 900; }
.sdm-stick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity 1.1s var(--sdm-ease), transform 1.6s var(--sdm-ease); }
.sdm-stick img.on { opacity: 1; transform: none; }
.sdm-rail { position: absolute; left: -28px; top: 10%; bottom: 10%; width: 2px; background: var(--sdm-line); }
.sdm-rail i { position: absolute; left: 0; top: 0; width: 2px; background: var(--sdm-lime); height: 20%; transition: height .6s var(--sdm-ease); }

/* ---------- install ---------- */
.sdm-install { margin-top: 40px; }
.sdm-install > h2, .sdm-ledger > h2 { font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 12px; text-align: center; }
.sdm-install > p { color: var(--sdm-muted); text-align: center; max-width: 56ch; margin: 0 auto 34px !important; }
.sdm-steps3 { list-style: none !important; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: s; }
.sdm-steps3 li { counter-increment: s; padding: 26px !important; background: var(--sdm-panel); border: 1px solid var(--sdm-line); border-radius: 16px; list-style: none !important; }
.sdm-steps3 li::before { content: "0" counter(s); font: 700 13px var(--sdm-mono); letter-spacing: .14em; color: var(--sdm-lime); display: block; margin-bottom: 14px; }
.sdm-steps3 h3 { font-size: 21px; margin-bottom: 8px; }
.sdm-steps3 p { font-size: 15.5px; color: var(--sdm-muted); }
.sdm-after { text-align: center; margin-top: 22px !important; font-size: 15.5px; color: var(--sdm-muted); }
.sdm-after a { color: var(--sdm-blue-2); }

/* ---------- release history ---------- */
.sdm-ledger { margin-top: 110px; }
.sdm-table { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 24px; border: 0 !important; }
.sdm-table th { font: 400 12px var(--sdm-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sdm-muted); text-align: left; padding: 12px 16px !important; border: 0 !important; border-bottom: 1px solid var(--sdm-line) !important; background: none !important; }
.sdm-table td { padding: 16px !important; border: 0 !important; border-bottom: 1px solid var(--sdm-line) !important; vertical-align: top; color: var(--sdm-text); background: none !important; }
.sdm-table td:first-child { font: 700 15px var(--sdm-mono); color: #fff; white-space: nowrap; }
.sdm-latest { font: 400 10px var(--sdm-mono); letter-spacing: .14em; color: #0F0E33; background: var(--sdm-lime); border-radius: 4px; padding: 2px 6px; margin-left: 8px; vertical-align: 2px; }
.sdm-table a { color: var(--sdm-blue-2); }

/* ---------- last call ---------- */
.sdm-end { margin: 110px auto 0; text-align: center; padding: 72px 24px; border-radius: 24px; background: radial-gradient(120% 140% at 50% 0%, #12396A 0%, #0B2545 55%, #081C38 100%); border: 1px solid var(--sdm-line); }
.sdm-end h2 { font-size: clamp(32px, 4.4vw, 56px); margin-bottom: 14px; }
.sdm-end > p { color: var(--sdm-muted); margin-bottom: 30px !important; }
.sdm-fine { margin: 40px auto 120px !important; text-align: center; font-size: 13.5px; color: #7F93AD; max-width: 70ch; }
.sdm-fine a { color: #A9BDD3; }

@media (max-width: 980px) {
	.sdm-tour { grid-template-columns: 1fr; margin-top: 90px; }
	.sdm-stick, .sdm-rail { display: none; }
	.sdm-steps { padding: 0; }
	.sdm-step { min-height: 0; opacity: 1; margin-bottom: 64px; }
	.sdm-step .m { display: block; margin-top: 22px; }
	.sdm-shot { transform: none !important; margin-top: 44px; }
	.sdm-steps3 { grid-template-columns: 1fr; }
	.sdm-table th:nth-child(3), .sdm-table td:nth-child(3) { display: none; }
}
@media (max-width: 767px) {
	.sdm-hero { padding-top: 112px; }
	.sdm-lede { font-size: 18px; }
	.sdm-btn { font-size: 17px; padding: 16px 22px; }
	.sdm-end { padding: 52px 20px; }
	.sdm-table th, .sdm-table td { padding: 14px 10px !important; }
	.sdm-table td:nth-child(2) { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
	.sdm *, .sdm *::before, .sdm *::after { animation: none !important; transition: none !important; }
	.sdm-rv { opacity: 1; transform: none; }
	.sdm-shot { transform: none !important; }
}

/* ---------- Sim Tools index (/sim-tools/), same page kind ---------- */
.st-mosaic { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; text-align: left; }
.st-tile { position: relative; grid-column: span 2; aspect-ratio: 5 / 3; }
.st-tile.sdm-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.st-tile--big { grid-column: 1 / span 4; grid-row: span 2; aspect-ratio: auto; }
.st-tag { position: absolute; left: 14px; bottom: 14px; font: 400 11px/1 var(--sdm-mono); letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(6, 26, 51, .86); border: 1px solid var(--sdm-line); border-radius: 6px; padding: 7px 9px; }
.st-slot { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; border: 1.5px dashed #2D5385; border-radius: 16px; background: rgba(11, 37, 69, .45); text-align: center; padding: 18px; text-decoration: none !important; transition: border-color .4s, background .4s; }
a.st-slot:hover { border-color: var(--sdm-blue); background: rgba(11, 37, 69, .8); }
.st-slot .k, .st-how .k { font: 400 11px/1.3 var(--sdm-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sdm-lime); }
.st-slot h3 { font-size: 22px; }
.st-slot p { font-size: 14.5px; color: var(--sdm-muted); max-width: 30ch; }

.st-tools { margin-top: 150px; }
.st-head { text-align: center; margin-bottom: 36px; }
.st-head h2 { font-size: clamp(32px, 4vw, 52px); margin-bottom: 12px; }
.st-head p { color: var(--sdm-muted); max-width: 56ch; margin: 0 auto !important; }
.st-grid { display: grid; grid-template-columns: 1.9fr 1fr; gap: 20px; }
.st-side { display: grid; gap: 20px; }
.st-side .st-slot { aspect-ratio: auto; min-height: 220px; }
.st-card { background: var(--sdm-panel); border: 1px solid var(--sdm-line); border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.st-id { display: flex; align-items: center; gap: 16px; }
.st-id .sdm-tile { width: 64px; height: 64px; margin: 0; border-radius: 14px; }
.st-id .sdm-tile img { width: 46px; }
.st-id h3 { font-size: clamp(26px, 2.6vw, 34px); }
.st-pill { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; font: 400 12px var(--sdm-mono); letter-spacing: .08em; color: var(--sdm-muted); }
.st-pill b { color: #fff; }
.st-pill > * { white-space: nowrap; }
.st-card > p { color: var(--sdm-muted); font-size: 17px; max-width: 58ch; }
.st-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.st-acts .sdm-btn { font-size: 16px; padding: 14px 20px; }
.st-acts + .sdm-demo-note { margin: -6px 0 0 !important; text-align: left; }
.st-card .sdm-frame { margin-top: 6px; }

.st-how { margin-top: 110px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.st-how > div { padding: 26px; border-top: 2px solid var(--sdm-line); }
.st-how h3 { font-size: 21px; margin: 10px 0 8px; }
.st-how p { font-size: 15.5px; color: var(--sdm-muted); }

/* phone teaser: four screens stepping down like stairs */
.st-mobile { margin-top: 140px; }
.st-mobile .st-head .sdm-eyebrow { margin-bottom: 12px; }
.st-phones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; align-items: start; padding-bottom: 120px; }
.st-phone-step { margin: 0; }
.st-phone-step:nth-child(2) { margin-top: 40px; }
.st-phone-step:nth-child(3) { margin-top: 80px; }
.st-phone-step:nth-child(4) { margin-top: 120px; }
.st-phone { padding: 9px; border-radius: 36px; background: #030D1A; border: 1px solid var(--sdm-line); box-shadow: 0 30px 70px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .04); }
.st-phone img { width: 100%; border-radius: 28px; }
.st-phone-step figcaption { margin-top: 18px; font-size: 15px; line-height: 1.5; color: var(--sdm-muted); }
.st-phone-step figcaption .k { display: block; margin-bottom: 6px; }
.st-phone-step figcaption b { display: block; font-size: 19px; margin-bottom: 4px; }
.st-phone-step .k { font: 700 13px var(--sdm-mono); letter-spacing: .14em; color: var(--sdm-lime); }
.st-mobile-cta { text-align: center; margin-top: -60px; }
.st-mobile-cta .sdm-demo-note { margin-top: 12px !important; }

/* Sim Data Manager Live: the hosted web versions, on the Sim Tools page and the download page */
.st-web-acts { margin-top: 4px; }
.st-phones + .st-web-acts { margin-top: -56px; }
.st-web-acts .sdm-btn svg { width: 20px; height: 20px; }
.st-lite { max-width: 1000px; margin: 34px auto 0; display: grid; grid-template-columns: 1fr 1fr; background: var(--sdm-panel); border: 1px solid var(--sdm-line); border-radius: 20px; overflow: hidden; text-align: left; }
.st-lite > div { padding: 26px 30px 24px; }
.st-lite > div + div { border-left: 1px solid var(--sdm-line); }
.st-lite h3 { font: 700 12px/1.3 var(--sdm-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sdm-lime); margin-bottom: 12px; }
.st-lite > div + div h3 { color: var(--sdm-blue-2); }
.st-lite ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.st-lite li { list-style: none !important; position: relative; padding: 8px 0 8px 28px !important; border-top: 1px solid rgba(27, 59, 99, .7); font-size: 16px; color: var(--sdm-text); }
.st-lite li:first-child { border-top: 0; }
.st-lite li::before { content: "\2713"; position: absolute; left: 2px; top: 8px; font: 700 14px var(--sdm-mono); color: var(--sdm-lime); }
.st-lite > div + div li::before { content: "+"; color: var(--sdm-blue-2); }
.st-lite-link { display: inline-block; margin-top: 14px; color: var(--sdm-blue-2) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sdm .st-lite-note { grid-column: 1 / -1; padding: 18px 30px !important; border-top: 1px solid var(--sdm-line); background: rgba(6, 26, 51, .55); font-size: 14.5px; line-height: 1.55; color: var(--sdm-muted); }
.sdm-demo-note a { color: var(--sdm-blue-2); text-decoration: underline; text-underline-offset: 3px; }
.st-web:not(:has(.st-phones)) { margin-top: 120px; }

@media (max-width: 980px) {
	.st-mosaic { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.st-tile, .st-tile--big { grid-column: span 1; grid-row: auto; aspect-ratio: 5 / 3; }
	.st-tile--big { grid-column: 1 / -1; }
	.st-grid, .st-how { grid-template-columns: 1fr; }
	.st-side { grid-template-columns: 1fr 1fr; }
	.st-tools { margin-top: 100px; }
	.st-phones { grid-template-columns: repeat(2, 1fr); padding-bottom: 40px; }
	.st-phone-step:nth-child(n) { margin-top: 0; }
	.st-phone-step:nth-child(even) { margin-top: 48px; }
	.st-mobile-cta { margin-top: 0; }
	.st-mobile { margin-top: 100px; }
	.st-phones + .st-web-acts { margin-top: 0; }
	.st-lite { grid-template-columns: 1fr; }
	.st-lite > div + div { border-left: 0; border-top: 1px solid var(--sdm-line); }
}
@media (max-width: 767px) {
	.st-mosaic .st-hide-sm { display: none; }
	.st-slot h3 { font-size: 18px; }
	.st-slot p { display: none; }
	.st-side { grid-template-columns: 1fr; }
	.st-side .st-slot { min-height: 0; padding: 28px 18px; }
	.st-side .st-slot p { display: block; }
	.st-card { padding: 22px; }
	.st-how { margin-top: 70px; gap: 0; }
	.st-how > div { padding: 22px 0; }
	.st-phones { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--sdm-gutter)); padding: 0 var(--sdm-gutter) 24px; scrollbar-width: none; }
	.st-phones::-webkit-scrollbar { display: none; }
	.st-phone-step { flex: 0 0 72%; scroll-snap-align: center; }
	.st-phones .sdm-rv { opacity: 1; transform: none; }
	.st-tag { font-size: 10px; padding: 6px 8px; left: 10px; bottom: 10px; }
	.sdm-duo__phone { flex-basis: 30%; margin: 0 0 -18px -30px; }
	.sdm-duo__phone .st-phone { padding: 5px; border-radius: 20px; }
	.sdm-duo__phone .st-phone img { border-radius: 15px; }
	.sdm-duo__badge { font-size: 11.5px; padding: 8px 11px; top: -15px; gap: 5px; }
	.sdm-duo__badge svg { width: 13px; height: 13px; }
	.st-lite > div, .sdm .st-lite-note { padding-left: 20px !important; padding-right: 20px !important; }
	.st-web-acts .sdm-btn { width: 100%; justify-content: center; }
	.st-phone-step:nth-child(even) { margin-top: 0; }
	.st-phone { border-radius: 30px; padding: 7px; }
	.st-phone img { border-radius: 24px; }
}

/* =========================================================================
 * Night Shift layer for Sim Tools (Oct 23, 2026)
 * Obsidian page, Raised cards, white reading panels with Ink text, Lilac and Volt on dark,
 * racing red (#8A1F1C) for Sim Tools accents. Red is text only inside white panels; on dark it is a fill.
 * Delete this block to roll back to the navy look.
 * ---------------------------------------------------------------------- */
body.wls-sdm-dl {
	--sdm-ground: #0E0D12;
	--sdm-panel: #1A1921;
	--sdm-line: #2A2833;
	--sdm-text: #F4F3F8;
	--sdm-muted: #A9A7B8;
	--sdm-blue: #B8A6FF;
	--sdm-blue-2: #CABBFF;
	--sdm-lime: #C2FF01;
	--sdm-pill: #0E0D12;
	--sdm-red: #8A1F1C;
	--sdm-ink: #14102A;
	--sdm-ink-muted: #4A485E;
	--sdm-surface: #F3F1FA;
	--sdm-pline: #E4E2EA;
	--sdm-klein: #4100F5;
}
html:has(body.wls-sdm-dl) { background: #0E0D12; }
body.wls-sdm-dl,
body.wls-sdm-dl #page-container,
body.wls-sdm-dl #main-content { background: #0E0D12 !important; }

.sdm h1, .sdm h2, .sdm h3, .sdm b, .sdm strong { color: #F4F3F8; }
.sdm-eyebrow { color: #B8A6FF; letter-spacing: .04em; }
.sdm-btn:focus-visible, .sdm a:focus-visible { outline: 3px solid #C2FF01; outline-offset: 3px; }

/* buttons: pills. Volt on dark, Frost outline */
.sdm-btn { border-radius: 999px; }
.sdm-btn--dl { background: #C2FF01; color: #0E0D12 !important; box-shadow: none; }
.sdm-btn--dl:hover { background: #D4FF4D; box-shadow: 0 14px 34px rgba(194, 255, 1, .18); }
.sdm-btn--ghost { border: 1.5px solid #F4F3F8; color: #F4F3F8 !important; }
.sdm-btn--ghost:hover { background: rgba(244, 243, 248, .08); }

/* hero: Klein rings instead of the blue glow */
.sdm-hero::before { left: auto; right: -160px; top: 40px; width: 560px; height: 560px; transform: none; background: none; border: 2px solid #4100F5; border-radius: 50%; opacity: .55; }
.sdm-hero::after { content: ""; position: absolute; left: -220px; top: 260px; width: 640px; height: 640px; border: 2px solid #3300C4; border-radius: 50%; opacity: .35; pointer-events: none; }
.sdm-hero > .sdm-wrap { position: relative; z-index: 1; }
.sdm-tile { background: #FAF7ED; border: 0; border-radius: 24px; }
.sdm-line b { color: #F4F3F8; }
.sdm-frame { border-radius: 24px; border-color: #2A2833; background: #1A1921; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.sdm-duo__phone .st-phone { box-shadow: 0 34px 80px rgba(0, 0, 0, .7), 0 0 0 1px rgba(184, 166, 255, .22); }
.sdm-duo__badge { color: #0E0D12; }
.sdm-kbd { background: #24222D; border-color: #2A2833; color: #F4F3F8; }
.sdm-sample { color: #A9A7B8; }
.sdm-note svg { color: #C2FF01; }

/* tour */
.sdm-rail { background: #2A2833; }

/* install: white cards with racing red numbers */
.sdm-steps3 li { background: #FFFFFF; border: 0; border-radius: 32px; color: #14102A; }
.sdm-steps3 li::before { content: counter(s); width: 40px; height: 40px; border-radius: 50%; background: #8A1F1C; color: #FFFFFF; display: grid; place-items: center; font: 400 15px/1 var(--sdm-mono); letter-spacing: 0; }
.sdm-steps3 h3 { color: #14102A; }
.sdm-steps3 p { color: #4A485E; }
.sdm-steps3 .sdm-kbd { background: #F3F1FA; border-color: #E4E2EA; color: #14102A; }
.sdm-after a, .sdm-fine a, .sdm-demo-note a { color: #CABBFF; }

/* release history: a white panel */
.sdm-ledger { background: #FFFFFF; color: #14102A; border-radius: 48px; padding: clamp(28px, 5vw, 56px); }
.sdm-ledger > h2 { color: #14102A; }
.sdm-table th { color: #4A485E; border-bottom-color: #E4E2EA !important; }
.sdm-table td { color: #14102A; border-bottom-color: #E4E2EA !important; }
.sdm-table td:first-child { color: #14102A; }
.sdm-table b, .sdm-table strong { color: #14102A; }
.sdm-table a { color: #8A1F1C; font-weight: 600; }
.sdm-latest { background: #8A1F1C; color: #FFFFFF; border-radius: 999px; padding: 3px 8px; }

/* last call: a Lilac card */
.sdm-end { background: #B8A6FF; border: 0; border-radius: 48px; color: #0E0D12; }
.sdm-end h2 { color: #0E0D12; }
.sdm-end > p, .sdm-end p { color: #24222D; }
.sdm-end .sdm-btn--dl { background: #0E0D12; color: #F4F3F8 !important; }
.sdm-end .sdm-btn--dl:hover { background: #24222D; box-shadow: none; }
.sdm-end .sdm-btn--ghost { border-color: #0E0D12; color: #0E0D12 !important; }
.sdm-end a:focus-visible { outline-color: #0E0D12; }
.sdm-fine { color: #A9A7B8; }

/* Sim Tools page */
.st-tag { background: rgba(14, 13, 18, .88); border-color: #2A2833; border-radius: 999px; padding: 7px 11px; }
.st-slot { border: 1.5px dashed #4A4858; border-radius: 32px; background: #1A1921; }
a.st-slot:hover { border-color: #B8A6FF; background: #24222D; }
.st-slot .k, .st-how .k, .st-phone-step .k { color: #C2FF01; }
.st-card { background: #FFFFFF; border: 0; border-radius: 48px; color: #14102A; padding: clamp(24px, 4vw, 44px); }
.st-card h3, .st-card b, .st-card strong { color: #14102A; }
.st-card > p { color: #4A485E; }
.st-card .sdm-tile { background: #FAF7ED; }
.st-pill { color: #4A485E; }
.st-pill b { color: #14102A; }
.st-card .sdm-live { color: #8A1F1C; font-weight: 700; }
.st-card .sdm-live::before { background: #8A1F1C; animation: none; }
.st-card .sdm-btn--dl { background: #8A1F1C; color: #FFFFFF !important; }
.st-card .sdm-btn--dl:hover { background: #6F1816; box-shadow: none; }
.st-card .sdm-btn--ghost { border-color: #14102A; color: #14102A !important; }
.st-card .sdm-btn--ghost:hover { background: #F3F1FA; }
.st-card .sdm-demo-note { color: #4A485E; }
.st-card .sdm-demo-note a { color: #8A1F1C; }
.st-card .sdm-frame { border-color: #E4E2EA; box-shadow: none; background: #F3F1FA; }
.st-card a:focus-visible { outline-color: #4100F5; }
.st-how > div { border-top-color: #2A2833; }

/* phones */
.st-phone { background: #050507; border-color: #2A2833; }

/* Sim Data Manager Live: what's on the web and what's only in the download, in a white panel */
.st-lite { background: #FFFFFF; border: 0; border-radius: 40px; color: #14102A; }
.st-lite > div + div { border-left-color: #E4E2EA; }
.st-lite h3, .st-lite > div + div h3 { color: #8A1F1C; }
.st-lite li { color: #14102A; border-top-color: #E4E2EA; }
.st-lite li::before, .st-lite > div + div li::before { color: #8A1F1C; }
.st-lite-link { color: #8A1F1C !important; }
.sdm .st-lite-note { background: #F3F1FA; border-top-color: #E4E2EA; color: #4A485E; }
.st-lite a:focus-visible { outline-color: #4100F5; }

@media (max-width: 980px) {
	.st-lite > div + div { border-top-color: #E4E2EA; }
	.sdm-hero::before { width: 360px; height: 360px; right: -180px; }
	.sdm-hero::after { width: 420px; height: 420px; left: -240px; }
}
@media (max-width: 767px) {
	.sdm-ledger { border-radius: 28px; margin-left: calc(-1 * var(--sdm-gutter) + 8px); margin-right: calc(-1 * var(--sdm-gutter) + 8px); }
	.st-card, .sdm-end { border-radius: 28px; }
	.st-lite { border-radius: 28px; }
}