/* ============================================================
   MERCURY — Factory Site · V3 (Web 1.0 style)
   Plain. Informational. Wikipedia-clean. High contrast.
   Black · white · red (#ff2d2d), restrained. Red sphere = mark.
   Shared across all pages.
   ============================================================ */

:root{
  --paper:#ffffff;
  --bg:#fbfbf8;            /* faint warm white, like old paper */
  --ink:#111111;
  --ink-2:#2b2b2b;
  --muted:#555550;
  --line:#cfcfc6;
  --line-2:#9a9a90;
  --rule:#111111;
  --red:#cc1313;          /* link/accent red — deeper for legibility on white */
  --red-bright:#ff2d2d;   /* the brand voltage (sphere, LIVE) */
  --red-deep:#990d0d;
  --shade:#f0f0ea;        /* table header / toc background */
  --shade-2:#eceae2;
  --visited:#7a2299;      /* classic visited-link tint, kept subtle */

  --serif:Georgia,"Times New Roman",Times,serif;
  --sans:Helvetica,Arial,"Liberation Sans",sans-serif;
  --mono:"Courier New",Courier,monospace;

  --col:46rem;            /* reading column */
  --col-wide:60rem;
  --pad:clamp(16px,4vw,28px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--serif);font-size:18px;line-height:1.62;
}
img{max-width:100%;display:block}

/* ---------- Links: underlined red (web-1 signature) ---------- */
a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--red-deep);text-decoration-thickness:2px}
a:visited{color:var(--visited)}
a.plain,a.plain:visited{color:var(--ink);text-decoration:none}
a.plain:hover{text-decoration:underline}

/* ---------- Headings: Helvetica, plain, ruled ---------- */
h1,h2,h3,h4{font-family:var(--sans);color:var(--ink);font-weight:700;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(28px,4.4vw,40px);letter-spacing:-.01em;margin-top:.2em}
h2{font-size:clamp(22px,3vw,28px);margin-top:1.5em;padding-bottom:.18em;border-bottom:1px solid var(--line)}
h3{font-size:19px;margin-top:1.4em}
h4{font-size:16px;font-family:var(--sans);margin-top:1.2em}
p{margin:0 0 1em}
small{font-size:13px;color:var(--muted)}
hr{border:none;border-top:1px solid var(--line);margin:1.8em 0}
hr.thick{border-top:3px solid var(--rule);margin:1.4em 0 .2em}
hr.double{border:none;border-top:3px double var(--line-2);margin:2em 0}
strong{font-weight:700}
em{font-style:italic}
sup{font-size:.7em}

ul,ol{margin:0 0 1.1em;padding-left:1.6em}
li{margin:.34em 0}
ul.tight li,ol.tight li{margin:.15em 0}
ul.plus{list-style:none;padding-left:0}
ul.plus li{padding-left:1.5em;position:relative}
ul.plus li::before{content:"+";position:absolute;left:0;color:var(--red);font-family:var(--sans);font-weight:700}

/* ---------- Sphere mark (small, restrained) ---------- */
.sphere{display:inline-block;border-radius:50%;vertical-align:middle;
  background:radial-gradient(circle at 34% 30%,#ff8a7a 0%,var(--red-bright) 28%,var(--red-deep) 66%,#5e0808 100%);
  box-shadow:inset -2px -3px 6px rgba(0,0,0,.35)}
.sphere--sm{width:15px;height:15px}
.sphere--md{width:20px;height:20px}

/* ============================================================
   UTILITY STRIP  (phone + email on every page)
   ============================================================ */
.util{background:var(--ink);color:#e8e8e2;font-family:var(--sans);font-size:13.5px}
.util .in{max-width:var(--col-wide);margin:0 auto;padding:6px var(--pad);display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center}
.util a{color:#fff;text-decoration:none}
.util a:hover{text-decoration:underline}
.util .k{color:#b7b7ad}
.util .ph{font-weight:700}
.util .right{margin-left:auto;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.util .free{color:#ff6a6a;font-weight:700}

/* ============================================================
   MASTHEAD + NAV
   ============================================================ */
.mast{background:var(--paper);border-bottom:3px solid var(--rule)}
.mast .in{max-width:var(--col-wide);margin:0 auto;padding:16px var(--pad) 0}
.mast .title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mast .title .sphere{width:24px;height:24px;align-self:center}
.mast .title b{font-family:var(--sans);font-weight:700;font-size:26px;letter-spacing:.01em;color:var(--ink)}
.mast .title .sub{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--muted)}
.mast .tagline{font-family:var(--serif);font-size:14.5px;color:var(--muted);margin:4px 0 12px}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:0;border-top:1px solid var(--line);font-family:var(--sans);font-size:14.5px}
.nav a{display:inline-block;padding:9px 14px 9px 0;margin-right:14px;color:var(--ink);text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-1px}
.nav a:hover{color:var(--red);text-decoration:underline}
.nav a.active{color:var(--red);border-bottom-color:var(--red);font-weight:700;text-decoration:none}
.nav .spacer{flex:1}
.nav .os{margin-right:0;color:var(--red);font-weight:700}

/* ============================================================
   PAGE LAYOUT
   ============================================================ */
.page{max-width:var(--col-wide);margin:0 auto;padding:var(--pad)}
.crumbs{font-family:var(--sans);font-size:13px;color:var(--muted);margin:6px 0 18px}
.crumbs a{color:var(--red)}
.crumbs .you{color:var(--muted)}
.lead-para{font-size:19.5px;line-height:1.6}
.updated{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-top:2px}

/* article column inside wide page */
.col{max-width:var(--col)}
.col-wide{max-width:var(--col-wide)}

/* status line (LIVE / OFFER) — plain, not a card */
.status{font-family:var(--sans);font-size:14px;margin:14px 0 18px;padding:9px 12px;border:1px solid var(--line);background:var(--shade)}
.status .lab{font-weight:700;letter-spacing:.04em}
.status.live .lab{color:var(--red)}
.status.offer .lab{color:var(--muted)}
.status .pip{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--red-bright);margin-right:6px;vertical-align:0}
.status.offer .pip{background:var(--line-2)}

/* inline tag */
.t{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.05em;padding:1px 6px;border:1px solid var(--line-2);white-space:nowrap}
.t.live{color:var(--red);border-color:var(--red)}
.t.offer{color:var(--muted)}

/* ---------- Table of contents (Wikipedia box) ---------- */
.toc{display:inline-block;min-width:240px;max-width:100%;background:var(--shade);border:1px solid var(--line-2);
  padding:12px 18px 14px;margin:6px 0 22px;font-family:var(--sans)}
.toc .h{font-weight:700;font-size:13px;text-align:center;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line-2);padding-bottom:6px;margin-bottom:8px}
.toc ol{margin:0;padding-left:22px;font-size:14px}
.toc ol li{margin:4px 0}
.toc ol li a{color:var(--red);text-decoration:none}
.toc ol li a:hover{text-decoration:underline}

/* ---------- Spec / data tables ---------- */
table.data{border-collapse:collapse;width:100%;margin:6px 0 20px;font-size:15.5px;font-family:var(--serif)}
table.data caption{font-family:var(--sans);font-size:12.5px;color:var(--muted);text-align:left;padding-bottom:6px}
table.data th,table.data td{border:1px solid var(--line-2);padding:9px 12px;text-align:left;vertical-align:top;overflow-wrap:anywhere}
table.data thead th{background:var(--shade);font-family:var(--sans);font-size:13.5px;letter-spacing:.02em}
table.data tbody th{background:var(--shade-2);font-family:var(--sans);font-weight:700;font-size:14px;width:34%}
table.data tr:nth-child(even) td{background:#fafaf6}

/* ---------- Free-scan callout (plain bordered box) ---------- */
.callout{border:2px solid var(--red);background:#fff6f5;padding:16px 18px;margin:22px 0;font-family:var(--serif)}
.callout h3{font-family:var(--sans);margin:0 0 6px;font-size:18px;color:var(--ink)}
.callout p{margin:0 0 10px;font-size:16px}
.callout .act{font-family:var(--sans);font-size:15px}
.callout .act a{font-weight:700}
.callout .ph{font-family:var(--sans);font-weight:700;font-size:17px;color:var(--ink);text-decoration:none}
.callout .ph:hover{color:var(--red)}

/* note / honesty box */
.note{border:1px solid var(--line-2);background:var(--shade);padding:12px 15px;margin:18px 0;font-size:15px;font-family:var(--serif)}
.note b{font-family:var(--sans)}

/* button (plain, web-1: a bordered link that looks clickable) */
.button{display:inline-block;font-family:var(--sans);font-size:15px;font-weight:700;text-decoration:none;
  border:2px solid var(--red);background:var(--red);color:#fff;padding:9px 18px;margin:2px 0}
.button:hover{background:var(--red-deep);border-color:var(--red-deep);color:#fff;text-decoration:none}
.button.alt{background:#fff;color:var(--red)}
.button.alt:hover{background:#fff6f5;color:var(--red-deep)}
.button.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.button.dark:hover{background:#000;color:#fff}

/* ---------- Figure / image slot (drag-drop placeholder) ---------- */
figure.fig{margin:18px 0;border:1px solid var(--line-2);background:var(--paper)}
figure.fig figcaption{font-family:var(--sans);font-size:12.5px;color:var(--muted);padding:7px 10px;border-top:1px solid var(--line);background:var(--shade)}
.slot{position:relative;display:block;width:100%;min-width:0;background:repeating-linear-gradient(45deg,#f4f4ee,#f4f4ee 10px,#efefe8 10px,#efefe8 20px);
  border:0;cursor:pointer;min-height:160px;overflow:hidden}
.slot.ratio-43{aspect-ratio:4/3}
.slot.ratio-169{aspect-ratio:16/9}
.slot.ratio-wide{aspect-ratio:21/9}
.slot.drag{outline:2px dashed var(--red);outline-offset:-6px;background:#fff6f5}
.slot .empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;
  font-family:var(--sans);color:var(--muted);padding:16px;pointer-events:none}
.slot .empty b{font-size:14px;color:var(--ink-2)}
.slot .empty span{font-size:12px}
.slot .empty .br{font-size:11px;color:var(--red);font-weight:700}
.slot img,.slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot .clear{position:absolute;top:6px;right:6px;z-index:4;font-family:var(--sans);font-size:11px;font-weight:700;
  background:#fff;border:1px solid var(--line-2);color:var(--ink);padding:3px 7px;cursor:pointer;display:none}
.slot.filled .clear{display:block}
.slot.filled .empty{display:none}

/* ---------- Live viewer (Splat) — plain bordered ---------- */
.viewer{border:1px solid var(--line-2);background:#000;margin:18px 0}
.viewer .frame{position:relative;width:100%;aspect-ratio:16/9;min-height:300px}
.viewer .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.viewer .cap{font-family:var(--sans);font-size:12.5px;color:var(--muted);padding:7px 10px;border-top:1px solid var(--line);background:var(--shade)}
.viewer .cap b{color:var(--red)}

/* ---------- FAQ as plain Q/A (definition style) ---------- */
.qa{margin:10px 0}
.qa .q{font-family:var(--sans);font-weight:700;font-size:18px;color:var(--ink);margin:22px 0 6px}
.qa .q .n{color:var(--red);margin-right:8px}
.qa .a{margin:0 0 4px}

/* ---------- Services list (home) — plain table-ish list ---------- */
.svc-list{border-top:1px solid var(--line);margin:10px 0 6px}
.svc-row{display:flex;gap:14px;align-items:baseline;padding:14px 2px;border-bottom:1px solid var(--line)}
.svc-row .nm{font-family:var(--sans);font-weight:700;font-size:17px;min-width:200px}
.svc-row .nm a{color:var(--red);text-decoration:none}
.svc-row .nm a:hover{text-decoration:underline}
.svc-row .ds{flex:1;font-size:15.5px;color:var(--ink-2)}
.svc-row .st{font-family:var(--sans);font-size:11px;font-weight:700;white-space:nowrap}
.svc-row .st.live{color:var(--red)}
.svc-row .st.offer{color:var(--muted)}
@media (max-width:620px){.svc-row{flex-wrap:wrap}.svc-row .nm{min-width:0;width:100%}}

/* ---------- Contact form (FSP-style, web-1 plain) ---------- */
.form{border:1px solid var(--line-2);background:var(--paper);padding:18px;margin:14px 0;max-width:var(--col)}
.form table{border-collapse:collapse;width:100%}
.form td{padding:6px 6px 6px 0;vertical-align:top}
.form td.lab{font-family:var(--sans);font-size:14px;font-weight:700;white-space:nowrap;width:1%;padding-right:14px;padding-top:12px}
.form input,.form select,.form textarea{width:100%;font-family:var(--serif);font-size:16px;color:var(--ink);
  border:1px solid var(--line-2);background:#fff;padding:8px 9px}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--red);outline-offset:-1px}
.form textarea{min-height:110px;resize:vertical}
.form .req{color:var(--red)}
@media (max-width:560px){.form td.lab{display:block;width:auto;padding-top:6px}.form td{display:block}}

/* ---------- Two-column doc layout (content + aside) ---------- */
.layout{display:grid;grid-template-columns:1fr 230px;gap:34px;align-items:start}
.layout>*{min-width:0}
.layout .aside{font-family:var(--sans);font-size:14px}
.layout .aside .box{border:1px solid var(--line-2);background:var(--shade);padding:14px;margin-bottom:16px}
.layout .aside .box h4{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line-2);padding-bottom:5px}
.layout .aside .box p{font-size:13.5px;margin:0 0 8px;font-family:var(--serif);color:var(--ink-2)}
.layout .aside .box a{font-weight:700}
.layout .aside .box .ph{font-size:16px;font-weight:700;color:var(--ink);text-decoration:none;font-family:var(--sans)}
@media (max-width:820px){.layout{grid-template-columns:1fr;gap:8px}.layout .aside{margin-top:8px}}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--paper);border-top:3px solid var(--rule);margin-top:36px}
.foot .in{max-width:var(--col-wide);margin:0 auto;padding:22px var(--pad) 30px;font-family:var(--sans);font-size:13.5px}
.foot .links{display:flex;flex-wrap:wrap;gap:4px 14px;margin-bottom:14px}
.foot .links a{color:var(--red);text-decoration:none}
.foot .links a:hover{text-decoration:underline}
.foot .sitemap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:6px 0 18px;border-bottom:1px solid var(--line)}
.foot .sitemap h5{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.foot .sitemap a{display:block;color:var(--ink);text-decoration:none;padding:3px 0;font-size:13.5px}
.foot .sitemap a:hover{color:var(--red);text-decoration:underline}
.foot .meta{color:var(--muted);line-height:1.7;padding-top:14px}
.foot .meta .sphere{width:13px;height:13px;margin-right:5px}
.foot .meta a{color:var(--red);text-decoration:none}
.foot .meta a:hover{text-decoration:underline}
@media (max-width:620px){.foot .sitemap{grid-template-columns:1fr 1fr}}

/* skip-to-content for plainness/accessibility */
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;border:2px solid var(--red);padding:8px;z-index:99;font-family:var(--sans)}