/* Overview page for the Data Migration Toolkit for Splunk. Everything is scoped under #ase-ov,
   with the id in each selector, so site themes do not restyle it. */
#ase-ov {
  --ov-ink: #10233a; --ov-text: #2f3d4e; --ov-muted: #5a6878; --ov-line: #d9e1ea; --ov-paper: #f5f7fa;
  --ov-brand: #0b4f8a; --ov-brand-2: #1673c4; --ov-deep: #082f55;
  --ov-ok: #1f7a4d; --ov-ok-bg: #e3f3ea; --ov-ok-cell: #2f9e66; --ov-amber: #8a4b08; --ov-amber-bg: #fdf1dc;
  color: var(--ov-text);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-align: left;
}
#ase-ov *, #ase-ov *::before, #ase-ov *::after { box-sizing: border-box; }

/* width: step out of a narrow theme column, like the planner and the docs */
#ase-ov.ase-ov-w-wide, #ase-ov.ase-ov-w-full {
  --ov-w: min(1220px, calc(100vw - 40px));
  width: var(--ov-w) !important; max-width: none !important;
  margin-left: calc(50% - var(--ov-w) / 2) !important; margin-right: calc(50% - var(--ov-w) / 2) !important;
}
#ase-ov.ase-ov-w-full { --ov-w: min(1440px, calc(100vw - 40px)); }

#ase-ov h1, #ase-ov h2, #ase-ov h3, #ase-ov p, #ase-ov ul, #ase-ov figure, #ase-ov table { margin: 0; padding: 0; }
#ase-ov h1, #ase-ov h2, #ase-ov h3 { font-family: inherit; color: var(--ov-ink); text-transform: none; letter-spacing: -0.015em; border: 0; }
#ase-ov a { color: var(--ov-brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
#ase-ov a:focus-visible { outline: 3px solid var(--ov-brand-2); outline-offset: 3px; border-radius: 4px; }
#ase-ov img { max-width: 100%; height: auto; display: block; border: 0; box-shadow: none; }
#ase-ov section { margin: 0; }
#ase-ov section + section { margin-top: 88px; }

#ase-ov .ov-h2 { font-size: 30px; line-height: 1.2; font-weight: 750; margin-bottom: 14px; max-width: 24ch; }
#ase-ov .ov-intro { color: var(--ov-muted); max-width: 60ch; margin-bottom: 36px; }
#ase-ov .ov-small { font-size: 15px; color: var(--ov-muted); margin-top: 16px; }

/* buttons */
#ase-ov .ov-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
#ase-ov .ov-btn { display: inline-block; font-weight: 650; font-size: 16px; line-height: 1.2; padding: 14px 22px; border-radius: 10px;
  text-decoration: none; border: 2px solid transparent; transition: background-color .15s, border-color .15s, color .15s; }
#ase-ov .ov-btn-main { background: var(--ov-brand); color: #fff; }
#ase-ov .ov-btn-main:hover { background: var(--ov-deep); }
#ase-ov .ov-btn-line { color: var(--ov-brand); border-color: #b9cbe0; background: #fff; }
#ase-ov .ov-btn-line:hover { border-color: var(--ov-brand); }
#ase-ov .ov-btn-white { background: #fff; color: var(--ov-brand); }
#ase-ov .ov-btn-white:hover { background: #e8f0f9; }
#ase-ov .ov-btn-ghostwhite { color: #fff; border-color: rgba(255,255,255,.55); }
#ase-ov .ov-btn-ghostwhite:hover { border-color: #fff; }

/* hero */
#ase-ov .ov-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 24px 0 8px; }
#ase-ov .ov-by { font-size: 15px; font-weight: 600; color: var(--ov-brand); margin-bottom: 14px; }
#ase-ov .ov-title { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.06; font-weight: 800; letter-spacing: -0.028em; max-width: 17ch; }
#ase-ov .ov-lead { font-size: 19px; line-height: 1.55; margin-top: 20px; max-width: 46ch; }

/* the proof card: the one memorable thing */
#ase-ov .ov-proof { background: #fff; border: 1px solid var(--ov-line); border-radius: 16px; padding: 24px 24px 18px;
  box-shadow: 0 1px 0 #e6ecf2, 0 24px 48px -28px rgba(8, 47, 85, .35); }
#ase-ov .ov-proof-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
#ase-ov .ov-pass { background: var(--ov-ok-bg); color: var(--ov-ok); font-weight: 800; font-size: 18px; letter-spacing: .02em;
  padding: 6px 14px; border-radius: 8px; }
#ase-ov .ov-proof-what { font-weight: 650; color: var(--ov-ink); font-size: 16px; }
#ase-ov .ov-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(14px, 1fr)); gap: 4px; }
#ase-ov .ov-days i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--ov-ok-cell);
  animation: ov-fill .5s both; animation-delay: calc(var(--i) * 22ms + 200ms); }
@keyframes ov-fill { from { background: #e4e9ef; transform: scale(.7); } to { background: var(--ov-ok-cell); transform: none; } }
#ase-ov .ov-proof-legend span:first-child { white-space: nowrap; }
#ase-ov .ov-proof-legend { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ov-muted); margin: 8px 0 16px; }
#ase-ov .ov-counts { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
#ase-ov .ov-counts th { text-align: right; font-weight: 600; font-size: 13px; color: var(--ov-muted); padding: 6px 0; border-bottom: 1px solid var(--ov-line); background: none; }
#ase-ov .ov-counts th:first-child, #ase-ov .ov-counts td:first-child { text-align: left; }
#ase-ov .ov-counts td { text-align: right; padding: 7px 0; border-bottom: 1px solid #edf1f5; color: var(--ov-ink); background: none; }
#ase-ov .ov-counts td:last-child::after { content: ""; display: inline-block; width: 9px; height: 5px; margin-left: 9px; vertical-align: 3px;
  border-left: 2px solid var(--ov-ok); border-bottom: 2px solid var(--ov-ok); transform: rotate(-45deg); }
#ase-ov .ov-counts tr:last-child td { border-bottom: 0; }
#ase-ov .ov-proof figcaption { font-size: 13px; color: var(--ov-muted); margin-top: 12px; }

/* moves */
#ase-ov .ov-movelist { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--ov-ink); margin-top: 22px; }
#ase-ov .ov-movelist li { padding: 16px 18px 4px 0; margin: 0; }
#ase-ov .ov-movelist li + li { padding-left: 18px; border-left: 1px solid var(--ov-line); }
#ase-ov .ov-movelist b { display: block; color: var(--ov-ink); font-size: 17px; line-height: 1.3; margin-bottom: 6px; }
#ase-ov .ov-movelist span { display: block; font-size: 15px; color: var(--ov-muted); line-height: 1.5; }

/* how it works */
#ase-ov .ov-step { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 48px; align-items: center; padding: 36px 0;
  border-top: 1px solid var(--ov-line); }
#ase-ov .ov-step-flip { grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr); }
#ase-ov .ov-step-flip .ov-step-text { order: 2; }
#ase-ov .ov-n { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; background: var(--ov-brand); color: #fff;
  font-weight: 750; font-size: 17px; align-items: center; justify-content: center; margin-bottom: 14px; }
#ase-ov .ov-step h3 { font-size: 26px; line-height: 1.2; font-weight: 750; margin-bottom: 10px; }
#ase-ov .ov-step-text p { max-width: 44ch; }
#ase-ov .ov-tag { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 650; padding: 4px 12px; border-radius: 20px; }
#ase-ov .ov-tag-ro { background: var(--ov-ok-bg); color: var(--ov-ok); }
#ase-ov .ov-tag-rw { background: var(--ov-amber-bg); color: var(--ov-amber); }
#ase-ov .ov-shot { border-radius: 12px; border: 1px solid var(--ov-line); box-shadow: 0 18px 40px -26px rgba(8, 47, 85, .4); background: #fff; }

/* copy illustration */
#ase-ov .ov-copyart { display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: center; background: var(--ov-paper);
  border-radius: 12px; padding: 32px 26px; border: 1px solid var(--ov-line); }
#ase-ov .ov-copy-side { display: flex; flex-direction: column; gap: 8px; }
#ase-ov .ov-copy-side b { color: var(--ov-ink); font-size: 15px; margin-bottom: 4px; }
#ase-ov .ov-copy-side em { font-style: normal; font-size: 13px; color: var(--ov-muted); margin-top: 4px; }
#ase-ov .ov-bk { display: block; height: 22px; border-radius: 5px; background: #7fa6cf; }
#ase-ov .ov-copy-new .ov-bk { background: var(--ov-brand); }
#ase-ov .ov-bk-dim { background: #b8cde3; }
#ase-ov .ov-copy-new .ov-bk-empty { background: none; border: 2px dashed #a9bdd3; }
#ase-ov .ov-copy-wire { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 10px; }
#ase-ov .ov-copy-wire span { display: block; width: 100%; height: 2px; background: repeating-linear-gradient(90deg, var(--ov-brand-2) 0 8px, transparent 8px 14px); position: relative; }
#ase-ov .ov-copy-wire span::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--ov-brand-2); border-right: 0; }
#ase-ov .ov-copy-wire i { font-style: normal; font-size: 13px; font-weight: 650; color: var(--ov-ok); background: var(--ov-ok-bg); border-radius: 20px; padding: 3px 10px; margin-top: 4px; white-space: nowrap; }

/* downtime and safety */
#ase-ov .ov-two { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
#ase-ov .ov-col p { max-width: 52ch; }
#ase-ov .ov-timeline { display: grid; grid-template-columns: 4.2fr 1fr; gap: 6px; margin: 8px 0 18px; }
#ase-ov .ov-timeline div { border-radius: 8px; padding: 12px 14px; font-size: 14px; line-height: 1.35; }
#ase-ov .ov-timeline b { display: block; font-size: 15px; color: var(--ov-ink); }
#ase-ov .ov-timeline span { color: var(--ov-muted); }
#ase-ov .ov-tl-long { background: #e8f0f9; }
#ase-ov .ov-tl-short { background: var(--ov-amber-bg); }
#ase-ov .ov-checks { list-style: none; }
#ase-ov .ov-checks li { position: relative; padding-left: 28px; margin: 0 0 10px; }
#ase-ov .ov-checks li::before { content: ""; position: absolute; left: 3px; top: .5em; width: 12px; height: 6px;
  border-left: 2.5px solid var(--ov-ok); border-bottom: 2.5px solid var(--ov-ok); transform: rotate(-45deg); }

/* start here */
#ase-ov .ov-links { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
#ase-ov .ov-link { display: flex; flex-direction: column; border: 1px solid var(--ov-line); border-radius: 14px; overflow: hidden;
  text-decoration: none; color: var(--ov-text); background: #fff; transition: border-color .15s; }
#ase-ov .ov-link:hover { border-color: var(--ov-brand-2); }
#ase-ov .ov-link img { border-bottom: 1px solid var(--ov-line); aspect-ratio: 16 / 7; object-fit: cover; object-position: top left; width: 100%; }
#ase-ov .ov-link-text { display: block; padding: 20px 22px 22px; }
#ase-ov .ov-link-text b { display: block; font-size: 20px; color: var(--ov-brand); margin-bottom: 6px; }
#ase-ov .ov-link-text > span { display: block; font-size: 15.5px; color: var(--ov-muted); }

/* closing call to action */
#ase-ov .ov-cta { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
  background: var(--ov-brand); color: #e6eef7; border-radius: 18px; padding: 40px 44px; }
#ase-ov .ov-cta .ov-actions { margin-top: 0; }
#ase-ov .ov-cta-h { color: #fff; font-size: 28px; line-height: 1.2; font-weight: 750; margin-bottom: 8px; }
#ase-ov .ov-cta p { max-width: 52ch; color: #dce7f3; }
#ase-ov .ov-fine { font-size: 13px; color: var(--ov-muted); margin-top: 18px; }

@media (max-width: 960px) {
  #ase-ov .ov-hero { grid-template-columns: 1fr; gap: 36px; }
  #ase-ov .ov-movelist { grid-template-columns: 1fr 1fr; }
  #ase-ov .ov-movelist li, #ase-ov .ov-movelist li + li { padding: 14px 16px 12px 0; border-left: 0; border-bottom: 1px solid var(--ov-line); }
  #ase-ov .ov-step, #ase-ov .ov-step-flip { grid-template-columns: 1fr; gap: 24px; }
  #ase-ov .ov-step-flip .ov-step-text { order: 0; }
  #ase-ov .ov-two, #ase-ov .ov-links { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  #ase-ov { font-size: 16px; }
  #ase-ov section + section { margin-top: 64px; }
  #ase-ov .ov-h2 { font-size: 25px; }
  #ase-ov .ov-lead { font-size: 17px; }
  #ase-ov .ov-movelist { grid-template-columns: 1fr; }
  #ase-ov .ov-proof { padding: 18px 16px 14px; }
  #ase-ov .ov-copyart { padding: 22px 14px; }
  #ase-ov .ov-copy-wire i { white-space: normal; text-align: center; }
  #ase-ov .ov-cta { padding: 30px 22px; }
  #ase-ov .ov-btn { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  #ase-ov .ov-days i { animation: none; }
  #ase-ov .ov-btn, #ase-ov .ov-link { transition: none; }
}