/* Landing site styles. Single stylesheet, no framework.
 *
 * ---------------------------------------------------------------------------
 * Resistor's own system, matching the extension UI in styles/app.css: light
 * ground, Resistor's teal, Poppins. The parent company appears twice and only
 * as itself: the real TechNerdXp logo as the back link in the header, and the
 * footer signature. Nothing else here is the house system's.
 *
 * This page lives at technerdxp.com/resistor, so the back link is not decoration,
 * it is wayfinding: a visitor who lands here from a search should be able to get
 * to the practice in one click, and should be able to see whose product this is
 * without reading a footer.
 * ---------------------------------------------------------------------------
 */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: optional;
  src: url("fonts/poppins-300-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url("fonts/poppins-500-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;

  --bg: #f7faf9;
  --bg-alt: #eef4f3;
  --surface: #ffffff;
  --border: #dde7e5;
  --border-hi: #c3d3d1;

  --text: #0f1e1d;
  --text-dim: rgb(15 30 29 / 0.72);
  --silver: #5d6d6c;

  /* Resistor's own accent. Not the parent's Signal Green. */
  --brand: #0d8a80;
  --brand-hi: #14a99d;
  --brand-soft: #e3f2f0;
  --on-brand: #ffffff;

  --radius: 8px;
  --font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 960px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 300;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* Tracking rises as size falls, so a small line keeps the optical texture of a large one. */
h1, h2, h3 {
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.005em;
  margin: 0 0 12px;
  text-wrap: balance;
}
h1 { font-size: clamp(32px, 6vw, 52px); }
h2 { font-size: clamp(24px, 4vw, 34px); margin-top: 8px; }
h3 { font-size: 19px; }
p { margin: 0 0 16px; text-wrap: pretty; }
a { color: var(--brand); }

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

/* ------------------------------------------------------------------- header */
header.site {
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgb(247 250 249 / 0.85);
  backdrop-filter: blur(10px);
  z-index: 10;
}
header.site .wrap { display: flex; align-items: center; gap: 14px; height: 62px; }

/* THE BACK LINK to technerdxp.com, as the real logo rather than as set text.
   The artwork is the house wordmark exactly as it ships, trimmed to its own bounding box and
   scaled down: it is a logo, so it should look like the logo and not like a font that happens
   to resemble it. The pearl-ground variant, because this page is light.
   Quiet at rest and fully present on hover, so it reads as provenance rather than as a nav
   item competing with the product's own name. */
.parent {
  display: inline-flex;
  align-items: center;
  flex: none;
  opacity: 0.7;
  transition: opacity 150ms;
}
.parent:hover, .parent:focus-visible { opacity: 1; }

/* SIZED BY ITS LETTERS, NOT BY ITS BOX. The shard runs taller than the wordmark at both ends,
   so the artwork's own bounding box is 2.6x the height of the type inside it: measured, the
   letters are 34px of the 285x88 asset, or 38.6% of its height. A first pass set `height: 19px`
   and got letters 7px tall beside a 17px product name, which is why the mark looked undersized
   rather than subordinate.
   28px of image gives a cap height of about 10.8px, just under "Resistor" at 17px (about 12px).
   Subordinate by a hair in size, and by opacity, rather than by being unreadable.
   If the artwork is ever regenerated, re-measure: this number is derived from it, not chosen. */
.parent img {
  display: block;
  height: 28px;
  width: auto;
}

/* A hairline between the practice and the product. Vertical, not the house's 13 degree cut:
   the angle is the parent's motif and one borrowed device in a header is enough. */
.crumb-cut {
  flex: none;
  width: 1px;
  height: 20px;
  background-color: var(--border-hi);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 300;
  letter-spacing: 0.02em;
  font-size: 17px;
  text-decoration: none;
  color: var(--text);
}
/* 26px, not 24px: the mark is a resistor lying at 13 degrees with thin leads running to the
   corners, so it fills less of its box than a solid glyph would and reads a size smaller than
   it measures. Sized against the parent wordmark beside it, not against a grid. */
.brand img { width: 26px; height: 26px; }
.spacer { flex: 1; }
header.site nav a {
  color: var(--text-dim);
  text-decoration: none;
  margin-left: 20px;
  font-size: 15px;
  font-weight: 300;
  transition: color 150ms;
}
header.site nav a:hover { color: var(--brand); }

/* --------------------------------------------------------------------- hero */
.hero { padding: 72px 0 56px; text-align: center; }
.hero p.lead {
  font-size: clamp(17px, 2.4vw, 21px);
  color: var(--text-dim);
  max-width: 620px;
  margin: 0 auto 28px;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--brand);
  color: var(--on-brand);
  text-decoration: none;
  font-weight: 500;
  font-size: 17px;
  padding: 14px 26px;
  border-radius: var(--radius);
  transition: background-color 150ms;
}
.cta:hover { background-color: var(--brand-hi); }
.cta-note { display: block; margin-top: 14px; font-size: 14px; color: var(--text-dim); }

.badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
/* Subtle by construction: no fill, a hairline, muted type, so three of them read as one quiet
   block rather than three buttons competing with the call to action above. */
.badge {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
}

section { padding: 56px 0; }
section.alt { background: var(--bg-alt); border-block: 1px solid var(--border); }

.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color 150ms;
}
.card:hover { border-color: var(--border-hi); }
.card p:last-child { margin: 0; }
.card .icon { font-size: 22px; }

ol.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
ol.steps li { display: flex; gap: 16px; align-items: flex-start; }
ol.steps li::before {
  counter-increment: s;
  content: counter(s);
  flex: 0 0 32px;
  height: 32px;
  border-radius: var(--radius);
  background-color: var(--brand);
  color: var(--on-brand);
  font-weight: 500;
  display: grid;
  place-items: center;
  font-size: 15px;
}

dl.faq { margin: 0; }
dl.faq dt { font-weight: 500; margin-top: 22px; font-size: 17px; }
dl.faq dd { margin: 6px 0 0; color: var(--text-dim); }

.hire {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  background: var(--surface);
}
.hire h2 { margin-top: 0; }

/* Links into the rest of the practice. A list, not a paragraph of links: the reader is deciding
   whether to go further in, and four scannable lines answer that faster than a sentence does. */
.more { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.more li {
  padding-left: 18px;
  position: relative;
  color: var(--text-dim);
  font-size: 15px;
}
.more li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 1px;
  background: var(--brand);
}
.more a { text-decoration: none; font-weight: 500; }
.more a:hover { text-decoration: underline; text-underline-offset: 3px; }

footer.site {
  border-top: 1px solid var(--border);
  padding: 32px 0;
  color: var(--text-dim);
  font-size: 14px;
}
footer.site .wrap { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
footer.site a { color: var(--text-dim); text-decoration: none; transition: color 150ms; }
footer.site a:hover { color: var(--brand); }
/* The signature reads as a credit, not as a fifth footer link. */
footer.site a.by { color: var(--silver); }
footer.site a.by:hover { color: var(--text); }

/* The house wordmark as live text, for the footer credit only: at this size set text stays
   crisper than a scaled bitmap, and the shard is the same object the extension UI draws. */
.wordmark { font-weight: 300; letter-spacing: 0.02em; white-space: nowrap; user-select: none; }
.wm-cut { position: relative; }
.wm-cut::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.13em;
  height: 1.95em;
  transform: translate(-50%, -50%) rotate(13deg);
  pointer-events: none;
  clip-path: polygon(50% 0%, 100% 36%, 50% 100%, 0% 36%);
  /* Signal Green, always. It is the parent's mark, and a mark recoloured to the product's
     accent is a different mark. */
  background: linear-gradient(
    to bottom,
    #30c819 0%,
    #30c819 26%,
    #60e84a 40%,
    #30c819 60%,
    #30c819 100%
  );
}

.prose { max-width: 720px; }
.prose h2 { margin-top: 36px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--brand); }

.tag-ok { color: var(--brand); font-weight: 500; }

@media (max-width: 640px) {
  header.site nav a { margin-left: 14px; font-size: 14px; }
  .hero { padding: 48px 0 40px; }
  /* Two brands and a nav do not fit a phone header. The product wins the row; the practice is
     still credited in the footer of every page, which is where it is load-bearing. */
  .parent, .crumb-cut { display: none; }
}