/*
  Excel Link Rescue - site styles.

  Design intent: a serious Windows utility site. White ground, restrained type, real product screenshots
  as the visual focus. Green is a signal colour for actions and confirmations, never a background wash.

  No gradients, no glassmorphism, no blobs, no decorative shadows, no animation beyond a hover state.
  Everything here should still read well in five years.
*/

:root {
  /* Brand, matching the application and the accepted icon. */
  --green: #107C41;
  --green-hover: #0C6334;
  --green-accent: #21A366;
  --green-wash: #E8F5EC;

  --ink: #1F2937;
  --ink-soft: #46505C;
  --ink-muted: #667080;

  --surface: #FFFFFF;
  --surface-alt: #FAF9F8;   /* warm, barely-there section separation */
  --border: #E3E6E8;
  --border-strong: #CFD4D8;

  --page: 1160px;           /* outer content width */
  --prose: 720px;           /* long-form reading measure */

  --radius: 6px;
  --radius-lg: 8px;

  --space-section: 76px;
}

/* ---- reset ---------------------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Variable", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--ink); line-height: 1.25; margin: 0 0 0.5em; font-weight: 650; letter-spacing: -0.011em; }

/* Restrained headings on purpose: no 80px startup hero type. */
h1 { font-size: clamp(30px, 4.2vw, 42px); letter-spacing: -0.021em; }
h2 { font-size: clamp(23px, 2.7vw, 30px); letter-spacing: -0.016em; }
h3 { font-size: 19px; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: 0.4em; }

code, .mono {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
}

:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 3px; }

/* ---- layout --------------------------------------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 24px; }
.prose { max-width: var(--prose); }
.section { padding: var(--space-section) 0; }
.section--alt { background: var(--surface-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section__head { max-width: var(--prose); margin-bottom: 34px; }
.section__head p { color: var(--ink-soft); margin-bottom: 0; }

.eyebrow {
  font-size: 13px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--green); margin: 0 0 10px;
}

/* ---- header --------------------------------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(6px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner { display: flex; align-items: center; gap: 28px; height: 64px; }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; color: var(--ink); font-size: 16px; }
.brand:hover { text-decoration: none; }
.brand img { width: 28px; height: 28px; }

.nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav a { color: var(--ink-soft); font-size: 15px; font-weight: 500; }
.nav a:hover { color: var(--ink); text-decoration: none; }

.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 7px 10px; cursor: pointer; color: var(--ink); font-size: 15px;
}

/* ---- buttons -------------------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 600; line-height: 1;
  padding: 13px 22px; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; transition: background-color .12s ease, border-color .12s ease;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--green); color: #fff; border-color: var(--green); }
.btn--primary:hover { background: var(--green-hover); border-color: var(--green-hover); }
.btn--secondary { background: #fff; color: var(--ink); border-color: var(--border-strong); }
.btn--secondary:hover { border-color: var(--ink-muted); }
.btn--sm { padding: 9px 16px; font-size: 14px; }

/* ---- hero ----------------------------------------------------------------------------------------- */

.hero { padding: 72px 0 64px; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: 52px; align-items: center; }
.hero h1 { margin-bottom: 18px; }
.hero__lead { font-size: 18.5px; color: var(--ink-soft); margin-bottom: 26px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 18px; }
.hero__note { font-size: 15px; color: var(--ink-muted); margin: 0; }

/* Understated facts next to the call to action, not badges. */
.facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding: 0; list-style: none; }
.facts li { font-size: 14.5px; color: var(--ink-muted); display: flex; align-items: center; gap: 7px; margin: 0; }
.facts .tick { color: var(--green); font-weight: 700; }

/* ---- screenshots ---------------------------------------------------------------------------------- */

/*
  Real application screenshots, presented plainly: a light border, a whisper of shadow, a caption.
  No browser chrome, no device frames, no tilt, no perspective, no gradient backdrops.
  Alt text is visible if a file is missing, which makes an absent asset obvious instead of silent.
*/
.shot { margin: 0; }
.shot img {
  width: 100%; height: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 6px 16px -10px rgba(16, 24, 40, 0.14);
  background: var(--surface-alt);
  min-height: 60px;
  color: var(--ink-muted); font-size: 14px;   /* styles the alt text when the file is missing */
}
.shot figcaption { margin-top: 12px; font-size: 14.5px; color: var(--ink-muted); }
.zoom-hint { color: var(--green); white-space: nowrap; font-size: 13.5px; }
.shot--zoom img:hover { border-color: var(--ink-muted); }
.shot--zoom img:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.shot--zoom img { cursor: zoom-in; }

/* ---- alternating feature rows --------------------------------------------------------------------- */

.row { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 48px; align-items: center; }
.row + .row { margin-top: 58px; }
.row--flip .row__text { order: 2; }
.row--flip .row__shot { order: 1; }
.row__text h3 { font-size: 21px; margin-bottom: 10px; }
.row__text p { color: var(--ink-soft); }

.step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--green-wash); color: var(--green);
  font-size: 13px; font-weight: 700; margin-bottom: 14px;
}

/* ---- trust list ----------------------------------------------------------------------------------- */

.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px 40px; margin: 0; padding: 0; list-style: none; }
.trust li { display: flex; gap: 12px; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--border); }
.trust .tick { color: var(--green); font-weight: 700; flex: none; }
.trust strong { display: block; font-weight: 600; }
.trust span.detail { color: var(--ink-muted); font-size: 15px; }

/* ---- pricing -------------------------------------------------------------------------------------- */

.price-card {
  max-width: 460px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  padding: 32px; background: #fff;
}
.price-card h3 { font-size: 17px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); font-weight: 650; }
.price { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 4px; }
.price .amount { font-size: 44px; font-weight: 680; letter-spacing: -0.02em; }
.price .term { color: var(--ink-muted); font-size: 15px; }
.price-card ul { list-style: none; padding: 0; margin: 22px 0; }
.price-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; color: var(--ink-soft); }
.price-card .btn { width: 100%; margin-top: 4px; }
.price-card .btn + .btn { margin-top: 10px; }

/* ---- footer --------------------------------------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--border); padding: 52px 0 40px; background: var(--surface-alt); }
.site-footer__cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.site-footer h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-muted); margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: var(--ink-soft); font-size: 15px; }
.site-footer__note { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 14px; color: var(--ink-muted); }

/* ---- lightbox ------------------------------------------------------------------------------------- */

.lightbox {
  position: fixed; inset: 0; z-index: 50; display: none;
  background: rgba(17, 24, 32, 0.82); padding: 32px;
  align-items: center; justify-content: center;
}
.lightbox[open], .lightbox.is-open { display: flex; }
.lightbox img { max-width: min(1400px, 96vw); max-height: 92vh; width: auto; border-radius: var(--radius); }
.lightbox__close {
  position: absolute; top: 18px; right: 22px; background: none; border: none;
  color: #fff; font-size: 30px; line-height: 1; cursor: pointer; padding: 8px;
}

/* ---- responsive ----------------------------------------------------------------------------------- */

/*
  Stack before the two-column text gets too narrow to read (below ~1040px it falls under 40 characters
  a line), and cap the stacked text at the reading measure so it does not stretch to 95 characters
  instead. Screenshots still take the full width, which is where they are most legible.
*/
@media (max-width: 1040px) {
  .hero__grid, .row { grid-template-columns: 1fr; gap: 28px; }
  .row--flip .row__text, .row--flip .row__shot { order: 0; }
  .hero { padding: 48px 0 40px; }
  .hero__grid > div, .row__text { max-width: var(--prose); }
}

@media (max-width: 900px) {
  :root { --space-section: 64px; }

  .nav { display: none; }
  .nav.is-open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    position: absolute; left: 0; right: 0; top: 64px;
    background: #fff; border-bottom: 1px solid var(--border); padding: 12px 24px 18px;
  }
  .nav.is-open a { padding: 8px 0; font-size: 16px; }
  .nav-toggle { display: block; }

  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero__actions .btn { width: 100%; }
  .site-footer__cols { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* =====================================================================================================
   Guide pages. Additions only: the homepage system above is frozen and reused as-is.
   ===================================================================================================== */

/* ---- breadcrumb ----------------------------------------------------------------------------------- */

.breadcrumb { padding: 20px 0 0; font-size: 14px; color: var(--ink-muted); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before { content: "/"; color: var(--border-strong); }
.breadcrumb a { color: var(--ink-muted); }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb [aria-current] { color: var(--ink-soft); }

/* ---- guide article -------------------------------------------------------------------------------- */

.guide { padding: 28px 0 var(--space-section); }
.guide__head { max-width: var(--prose); margin-bottom: 34px; }
.guide__head h1 { margin-bottom: 14px; }
.guide__standfirst { font-size: 18.5px; color: var(--ink-soft); margin: 0; }

.guide__body { max-width: var(--prose); }
.guide__body h2 { margin-top: 48px; }
.guide__body h3 { margin-top: 30px; font-size: 18px; }
.guide__body > *:first-child { margin-top: 0; }
.guide__body ol { padding-left: 1.3em; }
.guide__body ol li { margin-bottom: 0.55em; }
.guide__body code { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; }

/* Screenshots inside a guide may exceed the reading measure; they are evidence, not prose. */
.guide__figure { max-width: 860px; margin: 32px 0; }

/* A quiet aside for a caveat or a distinction worth separating from the flow. No colour blocks. */
.note {
  border-left: 3px solid var(--green); background: var(--surface-alt);
  padding: 16px 20px; margin: 28px 0; border-radius: 0 var(--radius) var(--radius) 0;
}
.note p { margin-bottom: 0.7em; font-size: 16px; }
.note p:last-child { margin-bottom: 0; }
.note strong { display: block; margin-bottom: 4px; }

/* ---- FAQ ------------------------------------------------------------------------------------------ */

/* Plain, always visible. Nothing to expand, nothing to script, nothing hidden from a crawler. */
.faq { max-width: var(--prose); margin-top: 48px; }
.faq h3 { font-size: 17px; margin: 0 0 8px; }
.faq > div { padding: 22px 0; border-top: 1px solid var(--border); }
.faq > div:last-child { border-bottom: 1px solid var(--border); }
.faq p { color: var(--ink-soft); margin-bottom: 0; }

/* ---- guide CTA and related ------------------------------------------------------------------------ */

.guide-cta {
  max-width: var(--prose); margin-top: 48px; padding: 26px 28px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
}
.guide-cta h2 { margin-top: 0; font-size: 21px; }
.guide-cta p { color: var(--ink-soft); }
.guide-cta .btn { margin-top: 6px; }

.related { max-width: var(--prose); margin-top: 48px; }
.related h2 { font-size: 19px; margin-bottom: 14px; }
.related ul { list-style: none; padding: 0; margin: 0; }
.related li { margin: 0; padding: 13px 0; border-top: 1px solid var(--border); }
.related li:last-child { border-bottom: 1px solid var(--border); }
.related a { font-weight: 600; }
.related span { display: block; color: var(--ink-muted); font-size: 15px; margin-top: 2px; }

/* ---- guides hub ------------------------------------------------------------------------------------ */

.guide-index { list-style: none; padding: 0; margin: 0; max-width: 860px; }
.guide-index li { margin: 0; padding: 22px 0; border-top: 1px solid var(--border); }
.guide-index li:last-child { border-bottom: 1px solid var(--border); }
.guide-index h2 { font-size: 19px; margin: 0 0 5px; }
.guide-index h2 a { color: var(--ink); }
.guide-index h2 a:hover { color: var(--green); }
.guide-index p { color: var(--ink-soft); margin: 0; font-size: 16px; }

@media (max-width: 1040px) {
  .guide__figure { max-width: 100%; }
}