/* ============================================
   Clean Air Mold Testing — site styles
   Tokens shared across all pages
   ============================================ */

:root{
  /* Brand */
  --teal:#00A8A8;
  --teal-deep:#007878;
  --teal-soft:#E8F4F4;
  --teal-glow:#6ADADA;

  /* Neutrals */
  --ink:#111414;
  --ink-2:#2E3838;
  --body:#5A6A6A;
  --body-soft:#8A9898;
  --border:#D8E8E8;
  --whisper:#ECF3F3;
  --off:#F5F9F9;
  --paper:#FAFCFC;

  /* Status */
  --warn:#E8A33D;
  --alert:#D04545;

  /* Type */
  --font:'Plus Jakarta Sans', system-ui, sans-serif;

  /* Radii */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;

  /* Shadow */
  --shadow-sm:0 1px 2px rgba(17,20,20,.04), 0 1px 3px rgba(17,20,20,.06);
  --shadow-md:0 4px 12px rgba(17,20,20,.06), 0 2px 4px rgba(17,20,20,.04);
  --shadow-lg:0 14px 40px rgba(17,20,20,.10), 0 4px 12px rgba(17,20,20,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ====== Type ====== */
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.eyebrow.dim{color:var(--body-soft)}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em;line-height:1.05;font-weight:800;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(40px, 5.6vw, 72px)}
h2{font-size:clamp(30px, 3.8vw, 48px)}
h3{font-size:clamp(20px, 2vw, 26px);font-weight:700;letter-spacing:-.015em}
h4{font-size:16px;font-weight:700;letter-spacing:-.01em}
p{margin:0;text-wrap:pretty}

/* ====== Buttons ====== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font);font-weight:600;font-size:14.5px;
  border-radius:var(--r-md);padding:13px 22px;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-deep);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-line{background:#fff;color:var(--ink);border-color:var(--border)}
.btn-line:hover{border-color:var(--teal);color:var(--teal-deep)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{color:var(--teal-deep)}
.btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ====== Layout ====== */
.container{max-width:1240px;margin:0 auto;padding:0 32px}
.section{padding:96px 0;position:relative}
.section.tight{padding:72px 0}
.section.dark{background:var(--ink);color:#fff}
.section.dark h1,.section.dark h2,.section.dark h3,.section.dark h4{color:#fff}
.section.tealwash{background:linear-gradient(180deg,var(--teal-soft),#fff)}
.section.whisper{background:var(--whisper)}

.section-head{margin-bottom:56px;max-width:760px}
.section-head .eyebrow{margin-bottom:16px}
.section-head h2{margin-bottom:14px}
.section-head .lead{font-size:18px;color:var(--body);max-width:620px;line-height:1.55}

/* ====== Cards ====== */
.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:28px;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card.hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--teal)}

/* ====== Misc ====== */
.dash::before{content:'— ';color:var(--teal)}
.kbd{font-family:ui-monospace,monospace;font-size:12px;background:var(--whisper);padding:1px 6px;border-radius:4px;color:var(--teal-deep)}

/* ====== Microscope-ambient (used on body during/after intro) ====== */
.microscope-frame{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0,168,168,.04) 100%);
}

/* tick marks at viewport edges (subtle calibration UI) */
.calibration-ticks{position:fixed;inset:0;pointer-events:none;z-index:1;mix-blend-mode:multiply;opacity:.4}
.calibration-ticks::before,.calibration-ticks::after{
  content:'';position:absolute;left:50%;width:1px;height:14px;background:var(--teal);transform:translateX(-50%);
}
.calibration-ticks::before{top:0}
.calibration-ticks::after{bottom:0}