/* MY PC DOCTOR — shared site styles. Same palette as the Windows app's Theme/Colors.xaml. */

:root {
  --bg: #F6F8FA;
  --surface: #FFFFFF;
  --surface-alt: #EEF3F8;
  --ink: #0F1B2A;
  --ink-soft: #48586B;
  --ink-faint: #7C8CA0;
  --border: #DCE4EC;
  --border-strong: #C4D0DE;
  --accent: #2A6DF0;
  --accent-ink: #1848B0;
  --accent-soft: #E4EDFC;
  --cyan: #12A5B0;
  --cyan-soft: #E1F5F5;
  --good: #1E9E6B;
  --good-soft: #E3F5EC;
  --attn: #B8760E;
  --attn-soft: #FBF0DD;
  --max-width: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header / nav ---------- */

header.site-header {
  position: sticky;
  top: 0;
  background: rgba(246, 248, 250, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
  z-index: 20;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  letter-spacing: 0.2px;
}

.brand-mark {
  height: 38px;
  width: auto;
  flex-shrink: 0;
}

.site-footer .brand-mark { height: 32px; }

.hero-logo {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto 18px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--accent-ink);
}

.nav-cta {
  background: var(--accent);
  color: #fff !important;
  padding: 9px 18px;
  border-radius: 8px;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.nav-cta:hover { background: var(--accent-ink); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-toggle svg { width: 20px; height: 20px; stroke: var(--ink); }

@media (max-width: 720px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 16px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links li { border-top: 1px solid var(--border); }
  .nav-links li:first-child { border-top: none; }
  .nav-links a { display: block; padding: 14px 4px; }
  .nav-links .nav-cta { display: inline-block; margin: 12px 4px 4px; text-align: center; }
  .nav-toggle { display: flex; }
}

/* ---------- Hero ---------- */

.hero {
  padding: 68px 0 52px;
  text-align: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.badge.badge-cyan { background: var(--cyan-soft); color: #0C7A82; }
.badge.badge-soon { background: var(--surface-alt); color: var(--ink-soft); border: 1px solid var(--border); }

h1 {
  font-size: 42px;
  line-height: 1.16;
  margin: 0 0 16px;
  letter-spacing: -0.6px;
}

h1 span.grad {
  background: linear-gradient(135deg, var(--accent), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 580px;
  margin: 0 auto 32px;
}

.cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  padding: 13px 26px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); }

.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--accent); }

.btn-disabled {
  background: var(--surface-alt);
  color: var(--ink-faint);
  border-color: var(--border);
  cursor: not-allowed;
  pointer-events: none;
}

.platform-note {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--ink-faint);
}

/* ---------- Sections ---------- */

section { padding: 56px 0; }
section.tight { padding: 32px 0; }

.section-title {
  font-size: 28px;
  text-align: center;
  margin: 0 0 8px;
  letter-spacing: -0.4px;
}

.section-sub {
  text-align: center;
  color: var(--ink-soft);
  margin: 0 auto 40px;
  font-size: 15px;
  max-width: 560px;
}

.eyebrow {
  display: block;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cyan);
  margin-bottom: 10px;
}

/* ---------- Cards / grids ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
}

.card .icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 14px;
}

.card h3 {
  margin: 0 0 6px;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.card p { margin: 0; color: var(--ink-soft); font-size: 14px; }

.pill-status {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.pill-status.available { background: var(--good-soft); color: var(--good); }
.pill-status.soon { background: var(--attn-soft); color: var(--attn); }

/* ---------- Steps ---------- */

.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

.step {
  text-align: center;
  padding: 8px;
}

.step .num {
  counter-increment: step;
  width: 40px;
  height: 40px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--cyan));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}

.step .num::before { content: counter(step); }
.step h4 { margin: 0 0 6px; font-size: 15px; }
.step p { margin: 0; color: var(--ink-soft); font-size: 13.5px; }

/* ---------- Status / callout boxes ---------- */

.callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  max-width: 640px;
  margin: 0 auto;
}

.callout .pill-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--good);
  margin-top: 6px;
}

.callout b { color: var(--good); }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px;
}

/* ---------- Download page ---------- */

.download-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 44px;
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}

.download-card .os-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 14px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.download-card h2 { margin: 0 0 6px; font-size: 22px; }
.download-card .sub { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 26px; }

.download-note {
  margin-top: 22px;
  font-size: 13px;
  color: var(--ink-faint);
  line-height: 1.6;
}

/* ---------- Lists ---------- */

ul.check-list, ul.plain-list { margin: 0; padding: 0; list-style: none; }

ul.check-list li {
  padding: 10px 0 10px 30px;
  position: relative;
  color: var(--ink-soft);
  font-size: 14.5px;
  border-bottom: 1px solid var(--border);
}

ul.check-list li:last-child { border-bottom: none; }

ul.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--good-soft);
  box-shadow: inset 0 0 0 4px var(--good);
}

ul.cross-list li::before {
  background: #FBEAEE;
  box-shadow: inset 0 0 0 4px var(--crit, #D1445A);
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 640px) {
  .two-col { grid-template-columns: 1fr; }
  h1 { font-size: 32px; }
  .lede { font-size: 16px; }
  .download-card { padding: 30px 22px; }
  .panel { padding: 24px; }
}

/* ---------- Footer ---------- */

footer.site-footer {
  border-top: 1px solid var(--border);
  padding: 40px 0 32px;
  color: var(--ink-faint);
  font-size: 13.5px;
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  margin-bottom: 24px;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-links a { text-decoration: none; color: var(--ink-soft); font-weight: 500; }
.footer-links a:hover { color: var(--accent-ink); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

/* 1.3.0: after-download guidance and the direct-download CTA */
.download-started { margin-top: 18px; text-align: left; border: 1px solid var(--border); border-left: 4px solid var(--good); border-radius: 12px; padding: 16px 18px; background: #fff; }
.download-started h3 { margin: 0 0 8px; font-size: 16px; }
.download-started ol { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: 14.5px; }
.download-started li { margin: 4px 0; }
.download-started .hint { margin: 10px 0 0; font-size: 13px; color: var(--ink-faint); }
.btn-lg { font-size: 17px; padding: 14px 26px; }
.faq { display: grid; gap: 12px; }
.faq details { border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: 12px 16px; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.faq p { margin: 10px 0 0; color: var(--ink-soft); font-size: 14.5px; }

/* ---------- Phase 21: the visual language (branding/art.js) ---------- */

.brand-mark { height: 40px; width: 40px; }
.site-footer .brand-mark { height: 32px; width: 32px; }

.hero-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 36px;
  align-items: center;
  text-align: left;
  padding-top: 40px;
}
.hero-split .lede { margin-left: 0; margin-right: 0; max-width: 520px; }
.hero-split .cta-row { justify-content: flex-start; }
.hero-split .platform-note { text-align: left; }
.hero-lockup { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 0 6px -14px; }
.hero-art { width: 100%; max-width: 560px; height: auto; justify-self: center; }
.hero-wide { grid-column: 1 / -1; }

.journey { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto; }
.steps-under-journey { margin-top: -6px; }
.steps-under-journey .step h4 { margin-top: 0; }

.report-sample { display: block; width: 100%; max-width: 720px; height: auto; margin: 26px auto 0; border-radius: 18px; box-shadow: 0 12px 40px rgba(15, 27, 42, 0.08); }
.mood-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 720px; margin: 22px auto 0; }
.mood { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.mood img { flex-shrink: 0; }
.mood b { display: block; font-size: 14px; color: var(--ink); }
.mood span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }

.card .icon img { width: 26px; height: 26px; display: block; }
.card .icon { overflow: hidden; }

.install-panel { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; padding: 28px; }
.install-panel h3 { margin: 0 0 8px; font-size: 20px; }
.install-panel p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }
.install-scene { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--border); }

@media (max-width: 860px) {
  .hero-split { grid-template-columns: 1fr; text-align: center; gap: 20px; }
  .hero-split .lede { margin: 0 auto; }
  .hero-split .cta-row { justify-content: center; }
  .hero-split .platform-note { text-align: center; }
  .hero-lockup { margin: 0 auto 6px; }
  .mood-legend { grid-template-columns: 1fr; }
  .install-panel { grid-template-columns: 1fr; }
}

/* ---------- Phase 28: customer reviews on the home page ---------- */

.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.review { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.review .stars { color: #E5A32B; font-size: 15px; letter-spacing: 2px; }
.review p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.review .who { margin-top: auto; font-size: 13px; color: var(--ink); font-weight: 600; }
.review .when { font-size: 12px; color: var(--ink-faint); font-weight: 400; }
@media (max-width: 860px) { .reviews { grid-template-columns: 1fr; } }

/* Owner, 2026-09-16: the download button must be unmissable, and the Windows blue warning must be
   explained on the page itself, because customers stop there and never install. */
.btn-hero {
  font-size: 19px;
  padding: 18px 34px;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(42, 109, 240, .32);
  margin-top: 6px;
}
.btn-hero:hover { box-shadow: 0 12px 28px rgba(24, 72, 176, .38); }
@media (max-width: 560px) {
  .btn-hero { font-size: 17px; padding: 16px 20px; width: 100%; justify-content: center; }
}

.smartscreen-guide {
  margin-top: 26px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  text-align: left;
}
.smartscreen-guide h3 { margin: 0 0 6px; font-size: 17px; }
.ss-lede { margin: 0 0 16px; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.ss-steps { display: grid; gap: 16px; }
.ss-step { display: flex; gap: 12px; align-items: flex-start; }
.ss-num {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.ss-body { min-width: 0; flex: 1; }
.ss-title { margin: 2px 0 8px; font-weight: 600; font-size: 15px; }
.ss-text { margin: 8px 0 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; }

/* A drawing of the Windows dialog, not the dialog itself. */
.ss-window {
  max-width: 420px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #0B3D91;
  box-shadow: 0 6px 18px rgba(11, 61, 145, .18);
}
.ss-window-head {
  background: #0B4FA8;
  color: #fff;
  font-size: 15px; font-weight: 600;
  padding: 14px 16px;
}
.ss-window-body { background: #F3F3F3; padding: 14px 16px; }
.ss-window-body p { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: #202020; }
.ss-link { font-size: 13px; color: #1F4F9C; text-decoration: underline; }
.ss-window-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ss-fakebtn {
  display: inline-block;
  padding: 7px 16px;
  font-size: 13px;
  background: #E1E1E1;
  border: 1px solid #ADADAD;
  border-radius: 3px;
  color: #202020;
}
.ss-highlight {
  position: relative;
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
  background: #FFF4CC;
  font-weight: 700;
}
.ss-foot { margin: 16px 0 0; font-size: 14px; color: var(--ink-soft); }

/* Owner, 2026-09-16: the release notes were one long centred wall on a phone. What is new in this
   version stays visible; everything older folds away until someone asks for it. */
.release-notes {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  text-align: left;
}
.release-notes h3 { margin: 0 0 8px; font-size: 16px; }
.release-notes p { margin: 0 0 10px; font-size: 14px; line-height: 1.65; color: var(--ink-soft); }
.release-notes p:last-child { margin-bottom: 0; }

.older-versions { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.older-versions > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent-ink);
  list-style: none;
}
.older-versions > summary::-webkit-details-marker { display: none; }
.older-versions > summary::before { content: "▸ "; display: inline-block; transition: transform .15s ease; }
.older-versions[open] > summary::before { content: "▾ "; }
.older-versions ul { margin: 12px 0 0; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.older-versions li { font-size: 13.5px; line-height: 1.6; color: var(--ink-faint); }
.older-versions li b.ver { color: var(--ink-soft); }
@media (max-width: 560px) {
  .release-notes { padding: 14px; }
}

/* Owner, 2026-09-16: even shortened, the notes made the card long. The whole block is a dropdown
   now: one line by default, opening to this version's notes and, inside that, the older ones. */
details.release-notes > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: var(--accent-ink);
  list-style: none;
}
details.release-notes > summary::-webkit-details-marker { display: none; }
details.release-notes > summary::before { content: "▸ "; }
details.release-notes[open] > summary::before { content: "▾ "; }
details.release-notes[open] > summary { margin-bottom: 12px; }

/* Phase 29: two builds. The 64-bit one is the button everybody presses; the 32-bit one is a quiet
   second choice underneath, with one line explaining who needs it. */
.btn-32 {
  display: inline-flex;
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 9px;
  background: var(--surface);
  color: var(--accent-ink);
  border: 1px solid var(--border-strong);
  text-decoration: none;
  font-weight: 600;
}
.btn-32:hover { background: var(--accent-soft); }
.which-build {
  margin: 10px auto 0;
  max-width: 460px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-faint);
}

/* Owner, 2026-09-16: a customer hit Error 4551, which is Smart App Control, not SmartScreen. It has
   no Run anyway, so it needs its own block with its own warning about switching the feature off. */
.sac-note {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--attn);
  border-radius: 10px;
  background: var(--attn-soft);
}
.sac-note h4 { margin: 0 0 8px; font-size: 14.5px; }
.sac-note p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.sac-note p:last-child { margin-bottom: 0; }
.sac-warn { font-weight: 600; color: var(--ink); }