/* ==========================================================================
   SATELLITE DESIGN SYSTEM v2 (2026-07-08)
   Fully owns everything below the navbar on satellite pages. All rules are
   scoped under .sat so legacy sheets (main.css/score-main.css, kept only for
   the navbar) cannot leak typography, padding, or color into page content.
   Palette: ink #0b1a38 · accent #2f6b4f · muted #5b6672 · line #e4e8ec · wash #f6f8f7
   ========================================================================== */

@font-face { font-family: "Cerebri Sat"; src: url(../fonts/Cerebri-Sans/CerebriSans-Light.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Cerebri Sat"; src: url(../fonts/Cerebri-Sans/CerebriSans-Book.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cerebri Sat"; src: url(../fonts/Cerebri-Sans/CerebriSans-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cerebri Sat"; src: url(../fonts/Cerebri-Sans/CerebriSans-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cerebri Sat"; src: url(../fonts/Cerebri-Sans/CerebriSans-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

.sat {
  --ink: #0b1a38; --accent: #2f6b4f; --muted: #5b6672; --line: #e4e8ec;
  --wash: #f6f8f7; --accent-soft: #e7f0eb; --white: #fff;
  --font: "Cerebri Sat", "Cerebri Sans", -apple-system, "Segoe UI", sans-serif;
  /* THE TYPE SCALE (Rohan 2026-07-08: cohesion, not new faces). Every font-size
     in the satellite system maps to one of these. No one-off sizes. */
  --fs-micro: 0.78rem;  /* uppercase eyebrows/labels: one treatment everywhere */
  --fs-tag: 0.72rem;    /* inline tags inside scene lines, the only smaller size */
  --fs-small: 0.92rem;  /* captions, legends, chips, card/support text */
  --fs-body: 1rem;      /* component body text (page base itself is 17px) */
  --fs-lead: 1.15rem;   /* lead paragraphs */
  --fs-btn: 1.02rem; --fs-btn-compact: 0.95rem;
  --maxw: 1080px; --measure: 66ch; --radius: 12px;
  --shadow: 0 1px 2px rgba(11,26,56,0.05), 0 8px 28px rgba(11,26,56,0.07);
  font-family: var(--font); color: var(--ink); background: var(--white);
  font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased;
}

/* Hard reset inside .sat: neutralize legacy element rules */
.sat h1, .sat h2, .sat h3, .sat h4, .sat p, .sat ul, .sat ol, .sat li,
.sat table, .sat thead, .sat tbody, .sat tr, .sat th, .sat td,
.sat figure, .sat blockquote, .sat input, .sat textarea,
.sat select, .sat button, .sat label {
  font-family: var(--font); margin: 0; padding: 0; color: inherit;
  letter-spacing: normal; text-transform: none; box-sizing: border-box;
}
.sat * { box-sizing: border-box; }
.sat strong, .sat b, .sat em, .sat i, .sat span, .sat mark { color: inherit; font-family: inherit; }
.sat section { margin-bottom: 0; } /* main.css gives section 3em bottom margin */
.sat svg text { font-family: var(--font); } /* CSS beats SVG presentation attrs: one font everywhere */
.sat select { -webkit-appearance: menulist; appearance: auto; } /* main.css strips select arrows */
.sat button.sat-btn-ghost { background: transparent; cursor: pointer; }
.sat a { color: var(--accent); text-decoration: none; font-weight: 500; }
.sat a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------- sections */
.sat .sat-section { padding: 92px 24px; }
.sat .sat-section.alt { background: var(--wash); }
.sat .sat-inner { max-width: var(--maxw); margin: 0 auto; }
.sat .sat-narrow { max-width: 780px; margin: 0 auto; }

.sat .sat-kicker {
  display: block; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
/* Section edge (Rohan round 2: "none of the sections have an edge"): every
   section opens on a hairline rule with the kicker sitting on it, so section
   starts read as crisp editorial boundaries instead of floating text. */
.sat .sat-section .sat-inner > .sat-kicker:first-child,
.sat .sat-section .sat-inner > .sat-edge:first-child {
  border-top: 1px solid var(--line); padding-top: 28px;
}
.sat .sat-edge { display: block; }
.sat h1 { font-weight: 500; font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.12; letter-spacing: -2px; }
.sat h1 strong, .sat h1 b { font-weight: 600; }
.sat h2 { font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 18px; }
.sat h3 { font-weight: 600; font-size: 1.12rem; line-height: 1.35; margin-bottom: 8px; }
.sat p { font-weight: 400; max-width: var(--measure); margin-bottom: 16px; }
.sat p.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); }
.sat .sat-center { text-align: center; }
.sat .sat-center p, .sat .sat-center h1, .sat .sat-center h2 { margin-left: auto; margin-right: auto; }
.sat mark { background: linear-gradient(transparent 62%, var(--accent-soft) 62%); color: inherit; padding: 0 2px; }

/* ------------------------------------------------------------------- hero */
.sat .sat-hero { padding: 170px 24px 84px; } /* fixed nav is 55px; the hero headline never sits near it */
.sat .sat-hero p.lead { margin-top: 22px; margin-bottom: 10px; max-width: 56ch; }
.sat .sat-hero .sat-trustline { font-size: var(--fs-small); color: var(--muted); margin-top: 16px; }
/* HERO ARCHETYPE: paper stage (the default). Light textured page; saturated
   color lives INSIDE the stage container, never full-bleed. */
.sat .sat-hero.paper { position: relative;
  background:
    radial-gradient(1100px 540px at 18% -12%, #e3ecfb 0%, rgba(227,236,251,0) 58%),
    radial-gradient(900px 520px at 92% 8%, rgba(220,239,227,0.9) 0%, rgba(220,239,227,0) 56%),
    radial-gradient(760px 420px at 55% 108%, rgba(253,244,230,0.75) 0%, rgba(253,244,230,0) 60%),
    linear-gradient(180deg, #fbfcfe 0%, #f8fafc 100%);
}
.sat .sat-hero.paper::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(11,26,56,0.07) 1px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(1200px 700px at 50% 30%, #000 30%, transparent 78%);
  mask-image: radial-gradient(1200px 700px at 50% 30%, #000 30%, transparent 78%);
}
/* spotlight beams: two soft light bands falling across the hero from a high
   angle. Studio light, not decoration; keeps the light page from reading flat. */
.sat .sat-hero.paper::after { content: ""; position: absolute; inset: -12% -6%; pointer-events: none;
  background:
    linear-gradient(112deg, transparent 30%, rgba(96,136,214,0.09) 40%, rgba(96,136,214,0.05) 46%, transparent 56%),
    linear-gradient(112deg, transparent 55%, rgba(47,107,79,0.07) 64%, transparent 74%);
}
.sat .sat-hero.paper .sat-inner { position: relative; }
/* Hero furniture: the pills row (brand pill + proof pill above the headline) */
.sat .sat-pills { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.sat .sat-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--white);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px;
  font-size: var(--fs-small); font-weight: 600; color: var(--ink);
  box-shadow: 0 1px 2px rgba(11,26,56,0.04), 0 4px 14px rgba(11,26,56,0.05); }
.sat .sat-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.sat .sat-pill .star { color: #e8a33d; }

/* Hero furniture: the wave the theater merges over (same wave the live site
   uses on its tool pages). Fill = the next section's background color. */
.sat .sat-hero-wave { display: block; width: 100%; height: clamp(44px, 7.5vw, 108px);
  margin-top: min(-40px, -6vw); position: relative; z-index: 0; pointer-events: none; }

/* Paper variant: WARM (anthropic.com-style oat/cream). Hero backgrounds must
   VARY across pages: cool-light (default), warm paper, mint, dawn. */
.sat .sat-hero.paper.warm { background:
    radial-gradient(1100px 540px at 20% -12%, #f3ead9 0%, rgba(243,234,217,0) 58%),
    radial-gradient(900px 520px at 90% 10%, rgba(235,228,214,0.9) 0%, rgba(235,228,214,0) 56%),
    linear-gradient(180deg, #faf9f5 0%, #f7f5f0 100%); }
.sat .sat-hero.paper.warm::before { background-image: radial-gradient(rgba(80,62,36,0.08) 1px, transparent 1.2px); }
.sat .sat-hero.paper.warm::after { background:
    linear-gradient(112deg, transparent 30%, rgba(196,158,94,0.08) 40%, rgba(196,158,94,0.04) 46%, transparent 56%),
    linear-gradient(112deg, transparent 55%, rgba(47,107,79,0.05) 64%, transparent 74%); }

/* Paper variant: MINT (green-forward light) */
.sat .sat-hero.paper.mint { background:
    radial-gradient(1100px 540px at 22% -12%, #ddefe5 0%, rgba(221,239,229,0) 58%),
    radial-gradient(900px 520px at 88% 10%, rgba(227,238,250,0.85) 0%, rgba(227,238,250,0) 56%),
    linear-gradient(180deg, #f9fcfa 0%, #f4f8f5 100%); }
.sat .sat-hero.paper.mint::before { background-image: radial-gradient(rgba(24,66,47,0.08) 1px, transparent 1.2px); }
.sat .sat-hero.paper.mint::after { background:
    linear-gradient(112deg, transparent 30%, rgba(47,107,79,0.08) 40%, rgba(47,107,79,0.04) 46%, transparent 56%),
    linear-gradient(112deg, transparent 55%, rgba(96,136,214,0.06) 64%, transparent 74%); }

/* Paper variant: DAWN (soft rose/blue morning light) */
.sat .sat-hero.paper.dawn { background:
    radial-gradient(1100px 540px at 18% -12%, #fbeae2 0%, rgba(251,234,226,0) 58%),
    radial-gradient(900px 520px at 90% 8%, rgba(227,236,251,0.9) 0%, rgba(227,236,251,0) 56%),
    linear-gradient(180deg, #fdfcfb 0%, #f8f7f8 100%); }
.sat .sat-hero.paper.dawn::before { background-image: radial-gradient(rgba(72,42,38,0.07) 1px, transparent 1.2px); }
.sat .sat-hero.paper.dawn::after { background:
    linear-gradient(112deg, transparent 30%, rgba(214,126,96,0.07) 40%, rgba(214,126,96,0.035) 46%, transparent 56%),
    linear-gradient(112deg, transparent 55%, rgba(96,136,214,0.06) 64%, transparent 74%); }

/* HERO ARCHETYPE: ink (accent use only — never the default, never twice in a row) */
.sat .sat-hero.ink { background: linear-gradient(175deg, #0b1a38 0%, #14274e 100%); color: #fff; }
.sat .sat-hero.ink .sat-kicker { color: #9fd4b8; }
.sat .sat-hero.ink p.lead { color: #c6cede; }
.sat .sat-hero.ink .sat-trustline { color: #8a95aa; }
.sat .sat-hero.ink mark { background: linear-gradient(transparent 62%, rgba(159,212,184,0.28) 62%); }
.sat .sat-hero .sat-btn { margin-top: 10px; }

/* Legacy upload widget (workers/upload-widget-for-smr-landing-pages.php),
   re-skinned to the palette. Functional classes untouched. */
.sat .mini-upload-resume-widget-nologin {
  background: var(--ink); border: 2px dashed rgba(255,255,255,0.35);
  border-radius: var(--radius); padding: 26px 22px; max-width: 560px; margin: 0 auto;
}
.sat .sat-hero.ink .mini-upload-resume-widget-nologin { background: rgba(255,255,255,0.07); }
.sat .mini-upload-resume-widget-nologin svg { max-width: 40px; }
.sat .whattodo { font-family: var(--font); font-size: var(--fs-body); font-weight: 500; line-height: 1.6; }
.sat .whattodo a { color: #fff; font-weight: 600; }
.sat .whattodo-subtitle { font-size: var(--fs-small); font-weight: 400; color: rgba(255,255,255,0.72); }
.sat .priv-note-visible-styling { font-family: var(--font); border-color: rgba(255,255,255,0.4); }
.sat .priv-note .tooltiptext { border-color: var(--line); color: var(--muted); font-family: var(--font); }

/* ----------------------------------------------------------- two columns */
.sat .sat-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }

/* ---------------------------------------------------------------- buttons */
.sat .sat-btn {
  display: inline-block; background: var(--ink); color: #fff; font-weight: 600;
  font-size: var(--fs-btn); padding: 15px 30px; border-radius: 10px; border: 0;
  cursor: pointer; transition: transform .18s cubic-bezier(.2,.8,.25,1), box-shadow .18s cubic-bezier(.2,.8,.25,1), background .18s ease;
  box-shadow: var(--shadow);
}
/* Hover rule (Rohan round 2): a button keeps its color family on hover; it
   lifts 1px and deepens its shadow, and the background moves ONE shade.
   Never invert (white buttons stay white-family), never jump. */
.sat .sat-btn:hover { transform: translateY(-1px); background: #16294d; text-decoration: none;
  box-shadow: 0 2px 4px rgba(11,26,56,0.09), 0 12px 30px rgba(11,26,56,0.16); }
.sat .sat-hero.ink .sat-btn { background: #fff; color: var(--ink); }
.sat .sat-hero.ink .sat-btn:hover { background: #eef1f7; color: var(--ink); }
.sat .sat-btn.accent { background: var(--accent); color: #fff; }
.sat .sat-btn.accent:hover { background: #2a6047; }
.sat .sat-btn-ghost {
  display: inline-block; font-weight: 600; color: var(--ink); padding: 15px 22px;
  border: 1.5px solid var(--line); border-radius: 10px; transition: border-color .15s ease;
}
.sat .sat-btn-ghost:hover { border-color: var(--accent); text-decoration: none; }

/* ------------------------------------------------------------- tool panel */
.sat .sat-tool {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 34px; max-width: 860px; margin: 0;
}
.sat .sat-center .sat-tool { margin: 0 auto; }
.sat .sat-tool .sat-field { margin-bottom: 20px; }
.sat .sat-tool label { display: block; font-weight: 600; font-size: var(--fs-small); margin-bottom: 7px; }
.sat .sat-tool label .opt { font-weight: 400; color: var(--muted); }
.sat .sat-tool input[type="text"], .sat .sat-tool input[type="date"],
.sat .sat-tool textarea, .sat .sat-tool select {
  width: 100%; font-size: 1.02rem; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: 8px; background: #fff; color: var(--ink); min-height: 46px;
}
.sat .sat-tool textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.sat .sat-tool input:focus, .sat .sat-tool textarea:focus, .sat .sat-tool select:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.sat .sat-tool .sat-row { display: flex; gap: 16px; flex-wrap: wrap; }
.sat .sat-tool .sat-row > .sat-field { flex: 1 1 220px; }
.sat .sat-output {
  background: var(--wash); border: 1px solid var(--line); border-radius: 10px;
  padding: 26px; margin-top: 22px; white-space: pre-wrap; line-height: 1.7;
  font-size: var(--fs-body);
}
.sat .sat-output-actions { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.sat .sat-copybtn {
  background: var(--wash); border: 1.5px solid var(--line); border-radius: 8px;
  font-weight: 600; font-size: var(--fs-btn-compact); padding: 9px 16px; cursor: pointer;
  color: var(--ink); transition: border-color .15s ease;
}
.sat .sat-copybtn:hover { border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------- numbered check cards */
.sat .sat-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; margin-top: 28px; }
.sat .sat-check {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; position: relative;
}
.sat .sat-section.alt .sat-check { box-shadow: var(--shadow); border: 0; }
.sat .sat-check .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent); font-weight: 700; font-size: 0.92rem; margin-bottom: 12px;
}
.sat .sat-check h3 { margin-bottom: 6px; }
.sat .sat-check p { font-size: var(--fs-small); color: var(--muted); margin-bottom: 0; }

/* ---------------------------------------------------------------- figures */
/* One alignment grid (Rohan review 2026-07-08): figures and tool panels sit on
   the SAME left edge as the text column, never centered beside left text. */
.sat figure.sat-figure {
  margin: 34px 0; text-align: center; background: var(--wash);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 22px 18px;
  max-width: 860px;
}
.sat .sat-section.alt figure.sat-figure { background: var(--white); }
.sat figure.sat-figure svg { max-width: 100%; height: auto; }
.sat figure.sat-figure figcaption { font-size: var(--fs-small); color: var(--muted); margin-top: 12px; }

/* ----------------------------------------------------------------- tables */
.sat table.sat-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 26px 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sat .sat-table th { background: var(--ink); color: #fff; font-weight: 600; font-size: var(--fs-small); padding: 14px 16px; text-align: left; }
.sat .sat-table td { padding: 14px 16px; border-top: 1px solid var(--line); font-size: var(--fs-body); background: var(--white); text-align: left; }
.sat .sat-table tr td:first-child { font-weight: 600; }

/* -------------------------------------------------------------------- FAQ */
/* workers/satellite-faq.php emits h2 + items directly inside the section */
.sat section.sat-faq > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.sat .sat-faq .sat-faq-item { border-bottom: 1px solid var(--line); padding: 22px 0; max-width: 780px; }
.sat .sat-faq .sat-faq-q { font-weight: 600; font-size: 1.12rem; margin-bottom: 8px; color: var(--ink); }
.sat .sat-faq .sat-faq-a { color: var(--muted); margin-bottom: 0; max-width: none; }

/* ---------------------------------------------------------- related tools */
/* workers/satellite-related-tools.php emits h2 + grid directly inside the section */
.sat section.sat-related { background: var(--wash); }
.sat section.sat-related > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.sat .sat-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 24px; }
.sat .sat-related-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; transition: transform .15s ease, box-shadow .15s ease;
}
.sat .sat-related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); text-decoration: none; }
.sat .sat-related-card strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 6px; }
.sat .sat-related-card span { display: block; color: var(--muted); font-size: var(--fs-small); line-height: 1.5; }

/* ------------------------------------------------------------ closing CTA */
.sat .sat-cta-band { background: linear-gradient(175deg, #0b1a38, #14274e); color: #fff; text-align: center; }
.sat .sat-cta-band h2 { color: #fff; }
.sat .sat-cta-band p { color: #c6cede; margin-left: auto; margin-right: auto; }
.sat .sat-cta-band .sat-btn { background: #fff; color: var(--ink); margin-top: 8px; }
.sat .sat-cta-band .sat-btn:hover { background: var(--wash); }

/* -------------------------------------------------------------- animation */
@keyframes sat-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sat-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes sat-draw { to { stroke-dashoffset: 0; } }
.sat .sat-anim-fade { animation: sat-fade-up .7s ease both; }
.sat .sat-anim-pulse { animation: sat-pulse 2.4s ease-in-out infinite; }

/* ==================== SCROLL-REVEAL MOTION SYSTEM (v2.1, 2026-07-08) =====
   House easing cubic-bezier(.2,.8,.25,1). Elements carrying [data-reveal]
   hide until sat-motion.js marks them .is-visible; children stagger via a
   --d custom property. Hidden state applies ONLY under html.sat-js (set by
   an inline head snippet), so pages read complete with JS off. */
.sat-js .sat [data-reveal]:not([data-reveal="group"]) {
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.2,.8,.25,1), transform .7s cubic-bezier(.2,.8,.25,1);
  transition-delay: var(--d, 0ms);
}
.sat-js .sat [data-reveal].is-visible { opacity: 1; transform: none; }
.sat-js .sat [data-reveal="group"] > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.2,.8,.25,1), transform .6s cubic-bezier(.2,.8,.25,1);
  transition-delay: var(--d, 0ms);
}
.sat-js .sat [data-reveal="group"].is-visible > * { opacity: 1; transform: none; }

/* ------------------------------------------------- product window chrome */
.sat .sat-window {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; text-align: left;
  box-shadow: 0 24px 60px rgba(11,26,56,0.16), 0 2px 6px rgba(11,26,56,0.08);
}
.sat .sat-window-bar {
  display: flex; align-items: center; gap: 7px; padding: 11px 16px;
  background: var(--wash); border-bottom: 1px solid var(--line);
}
.sat .sat-tl { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.sat .sat-tl-r { background: #f26d5f; } .sat .sat-tl-y { background: #f5bd4f; } .sat .sat-tl-g { background: #62c554; }
.sat .sat-window-title {
  font-size: var(--fs-micro); font-weight: 700; color: var(--muted);
  letter-spacing: 0.12em; text-transform: uppercase; margin-left: 8px;
}

/* --------------------------------------------------- "Interactive" badge */
.sat .sat-hint {
  display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-micro);
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); border-radius: 20px;
  padding: 6px 14px; margin-bottom: 14px;
}
.sat .sat-hint svg { width: 12px; height: 12px; }

/* ------------------------------------------- progress timeline (5 steps) */
.sat .sat-timeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; margin-top: 44px; }
.sat .sat-timeline-line, .sat .sat-timeline-fill {
  position: absolute; top: 6px; left: 1.5%; height: 2.5px; border-radius: 2px;
}
.sat .sat-timeline-line { right: 1.5%; background: var(--line); }
.sat .sat-timeline-fill { width: 0; background: var(--accent); transition: width 1.7s cubic-bezier(.25,.8,.3,1) .35s; }
.sat .sat-timeline.is-visible .sat-timeline-fill { width: 97%; }
.sat .sat-timeline-step { position: relative; }
.sat .sat-timeline-dot {
  width: 14px; height: 14px; border-radius: 50%; background: var(--white);
  border: 3px solid var(--accent); margin-bottom: 18px; position: relative; z-index: 1;
}
.sat .sat-timeline-step .step-label {
  display: block; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}

.sat .sat-timeline-step p { font-size: var(--fs-small); color: var(--muted); margin-bottom: 0; max-width: none; }

/* --------------------------------- ambient check-log stream (background) */
.sat .sat-stream {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.sat .sat-stream-scroll {
  display: flex; flex-direction: column; gap: 13px; padding: 8px 26px;
  font-family: "SF Mono", "Menlo", monospace; font-size: 12.5px; line-height: 1.4;
  white-space: nowrap; animation: sat-stream-scroll 30s linear infinite;
}
.sat .sat-stream-scroll span { opacity: 0.5; }
.sat .sat-stream-scroll span.hot { opacity: 1; font-weight: 600; }
@keyframes sat-stream-scroll { to { transform: translateY(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .sat *, .sat svg * { animation: none !important; transition: none !important; }
  .sat-js .sat [data-reveal], .sat-js .sat [data-reveal="group"] > * { opacity: 1 !important; transform: none !important; }
  .sat .sat-timeline .sat-timeline-fill { width: 97%; }
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .sat .sat-timeline { grid-template-columns: 1fr; gap: 20px; padding-left: 26px; }
  .sat .sat-timeline-line, .sat .sat-timeline-fill { top: 4px; bottom: 4px; left: 5px; right: auto; width: 2.5px; height: auto; }
  .sat .sat-timeline-fill { height: 0; width: 2.5px; transition: height 1.7s cubic-bezier(.25,.8,.3,1) .35s; }
  .sat .sat-timeline.is-visible .sat-timeline-fill { height: 97%; width: 2.5px; }
  .sat .sat-timeline-dot { position: absolute; left: -26.5px; top: 2px; margin: 0; }
}
@media (max-width: 720px) {
  .sat { font-size: 16px; }
  .sat .sat-section { padding: 52px 20px; }
  .sat .sat-hero { padding: 72px 20px 52px; }
  .sat .sat-tool { padding: 22px 18px; }
  .sat .sat-btn { width: 100%; text-align: center; }
  .sat .sat-two-col { grid-template-columns: 1fr; gap: 26px; }
}