/* Tender Helper marketing site — shared stylesheet.
   Palette and type come from the Claude Design baseline (Tender Helper Marketing Site.dc.html). */

:root {
  --bg: #f2f2f3;
  --bg-alt: #e9e9ea;
  --ink: #1d1f20;
  --ink-2: #2b2b2d;
  --body: #424244;
  --muted: #5d5d60;
  --faint: #7a7a7d;
  --faintest: #98989b;
  --line: rgba(29, 31, 32, .16);
  --line-soft: rgba(29, 31, 32, .08);
  --accent: #c8791c;
  --accent-dark: #a96114;
  --accent-ink: #8a5313;
  --accent-wash: rgba(200, 121, 28, .05);
  --blue: #5980a6;
  --blue-link: #416180;
  --blue-deep: #2c455d;
  --navy: #1d2d3d;
  --chip-bg: #f5f5f8;
  --chip-blue: #eef6ff;
  --cream: #f7f5f2;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-display: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue-link); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--navy); text-decoration: underline; }
::selection { background: rgba(89, 128, 166, .3); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

img { max-width: 100%; }

.container { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* ── Type ── */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }
h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 18px; text-wrap: balance; }
h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -.015em; margin: 0 0 34px; }
h3 { font-size: 23px; line-height: 1.15; margin: 0 0 9px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 10px;
}

.mono-note { font-family: var(--font-mono); font-size: 11px; color: var(--faintest); }
.mono-meta { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }

.lede { font-size: clamp(16px, 1.8vw, 19px); color: var(--body); margin: 0; }

/* ── Sections ── */
.section { padding-top: clamp(56px, 8vw, 104px); }
.section-hero { padding-top: clamp(44px, 7vw, 92px); }
.section-page-hero { padding-top: clamp(44px, 6vw, 80px); }

/* ── Header ── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  padding-top: 12px; padding-bottom: 12px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); flex: none; }
.brand:hover { color: var(--ink); text-decoration: none; }
.brand span { font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: .02em; white-space: nowrap; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; font-size: 14.5px; margin-right: auto; }
.site-nav a { color: var(--muted); }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: 14px; flex: none; margin-left: auto; }

.lang-toggle {
  display: flex; align-items: center; border: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px; letter-spacing: .06em;
}
.lang-toggle button, .lang-toggle a, .lang-toggle span { padding: 5px 9px; border: 0; font: inherit; letter-spacing: .06em; display: inline-block; }
.lang-toggle button, .lang-toggle a { cursor: pointer; }
.lang-toggle a { text-decoration: none; }
.lang-toggle span.inactive { cursor: not-allowed; }
.lang-toggle .active { background: var(--blue); color: var(--bg); }
.lang-toggle .inactive { background: transparent; color: var(--faint); }
.lang-toggle .inactive:not([disabled]):hover { color: var(--ink); }
.lang-toggle [disabled] { cursor: not-allowed; }

.link-signin { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--muted); }

/* ── Buttons ── */
.btn {
  display: inline-block;
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  padding: 14px 28px; cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn-sm { font-size: 15px; padding: 9px 16px; white-space: nowrap; }
.btn-primary { background: var(--accent); color: var(--cream); border: 1px solid var(--accent); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--cream); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid rgba(29, 31, 32, .35); }
.btn-ghost:hover { background: rgba(29, 31, 32, .06); color: var(--ink); }
.btn-ghost-light { background: transparent; color: var(--bg); border: 1px solid rgba(242, 242, 243, .4); }
.btn-ghost-light:hover { background: rgba(242, 242, 243, .1); color: var(--bg); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.arrow-link { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--blue-link); }

/* ── Chips & badges ── */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(200, 121, 28, .5); padding: 4px 11px;
}
.badge .dot { width: 6px; height: 6px; background: var(--accent); flex: none; }
.badge span:last-child {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em;
  color: var(--accent-ink); text-transform: uppercase;
}
.chip { display: inline-flex; font-size: 10.5px; padding: 3px 9px; background: var(--chip-bg); color: var(--body); }
.chip-blue { background: var(--chip-blue); color: var(--blue-deep); }
.chip-outline { background: transparent; border: 1px solid var(--blue); color: var(--blue); }
.chip-mono { font-family: var(--font-mono); }

/* ── Registration-mark frame (crosshair corners) ── */
.frame { position: relative; border: 1px solid var(--line); background: var(--bg); }
.frame-shadow { box-shadow: 0 12px 32px rgba(43, 43, 45, .14); }
.mark { position: absolute; width: 11px; height: 11px; color: rgba(29, 31, 32, .55); }
.mark::before { content: ""; position: absolute; left: 5px; top: 0; width: 1px; height: 100%; background: currentColor; }
.mark::after { content: ""; position: absolute; top: 5px; left: 0; width: 100%; height: 1px; background: currentColor; }
.mark.tl { top: -6px; left: -6px; }
.mark.tr { top: -6px; right: -6px; }
.mark.bl { bottom: -6px; left: -6px; }
.mark.br { bottom: -6px; right: -6px; }

/* ── Cards / panels ── */
.panel { border: 1px solid var(--line); }
.panel-pad { padding: clamp(26px, 4vw, 44px); }
.grid-tiles {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}
.grid-tiles > * { background: var(--bg); padding: 24px 22px 28px; }
.tile-num { font-family: var(--font-mono); font-size: 11px; color: var(--accent); margin-bottom: 16px; }
.tile p { margin: 0; font-size: 14.5px; color: var(--muted); }

.strip { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.strip > div { background: var(--bg); padding: 14px 18px; flex: 1 1 210px; font-size: 13.5px; color: var(--body); }

/* ── Dash list (em-dash bullets) ── */
.dash-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.dash-list li { display: flex; gap: 11px; font-size: 15.5px; color: var(--body); }
.dash-list li::before { content: ""; flex: none; width: 14px; height: 1px; background: var(--faintest); margin-top: 12px; }
.dash-list.accent li { color: var(--ink-2); }
.dash-list.accent li::before { background: var(--accent); }

/* ── Tables ── */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; }
th.col-label {
  text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(29, 31, 32, .6); font-weight: 600;
}
.tbl-highlight { background: var(--accent-wash); border-left: 1px solid rgba(29, 31, 32, .1); border-right: 1px solid rgba(29, 31, 32, .1); }

/* ── App mockups ── */
.mock { border: 1px solid var(--line); box-shadow: 0 3px 10px rgba(43, 43, 45, .12); background: var(--bg); margin: 0; }
.mock-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--line); background: var(--bg-alt);
}
.mock-bar .pip { width: 9px; height: 9px; border: 1px solid rgba(29, 31, 32, .3); }
.mock-bar .url { font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); }
.mock figcaption { font-family: var(--font-mono); font-size: 11px; color: var(--faint); padding: 8px 12px; border-top: 1px solid var(--line); }
.mock figcaption.plain { border-top: 0; padding: 0 14px 12px; }

/* ── Dark CTA band ── */
.cta-band { margin-top: clamp(56px, 8vw, 104px); background: var(--navy); color: var(--bg); }
.cta-band .container {
  padding-top: clamp(44px, 7vw, 84px); padding-bottom: clamp(44px, 7vw, 84px);
  display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: center;
}
.cta-band h2 { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.06; margin: 0 0 12px; color: var(--bg); }
.cta-band p { margin: 0; font-size: 16.5px; color: rgba(242, 242, 243, .75); max-width: 34em; }

/* ── Forms ── */
label { display: block; font-size: 12px; margin-bottom: 5px; color: rgba(29, 31, 32, .7); }
input[type="text"], input[type="email"], input[type="tel"] {
  width: 100%; min-height: 42px; padding: 8px 11px;
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 0;
}
input:focus { border-color: var(--blue); outline: none; }
.field-hint { color: var(--faintest); }

/* ── FAQ ── */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 2px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0; padding: 0 2px 18px; font-size: 15.5px; color: var(--body); max-width: 48em; }

/* ── Pricing ── */
.billing-toggle { display: inline-flex; border: 1px solid var(--line); font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.billing-toggle button { padding: 9px 18px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font: inherit; }
.billing-toggle button + button { border-left: 1px solid var(--line); }
.billing-toggle button:hover { color: var(--ink); }
.billing-toggle button.active { background: var(--blue); color: var(--bg); }
/* The annual option is the one worth noticing when it ISN'T selected —
   monthly is the default, so annual has to earn a look. Ochre matches the
   featured plan's accent, so the two "pay attention here" signals on this
   page agree instead of competing. Once active it takes the plain blue
   treatment like any selected control: the nudge has done its job. */
.billing-toggle button[data-billing="annual"]:not(.active) {
  color: var(--accent-ink);
  background: rgba(200, 121, 28, .08);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.billing-toggle button[data-billing="annual"]:not(.active):hover {
  background: rgba(200, 121, 28, .16);
  color: var(--accent-ink);
}
/* The monthly-equivalent line under an annual price. Deliberately secondary:
   the ANNUAL total is the headline because that is what gets charged, and
   this is context for comparing against vendors who quote monthly. */
.plan-equiv { margin: 2px 0 0; font-size: 12.5px; color: var(--faint); }

.plans { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.plan { border: 1px solid var(--line); padding: 24px 22px; display: flex; flex-direction: column; }
.plan.featured { border-color: var(--accent); background: rgba(200, 121, 28, .045); position: relative; }
.plan-flag {
  position: absolute; top: -1px; right: -1px;
  background: var(--accent); color: var(--cream);
  font-family: var(--font-display); font-weight: 600; font-size: 11.5px;
  letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px;
}
.plan-name { font-family: var(--font-display); font-weight: 600; font-size: 24px; }
.plan-audience { margin: 4px 0 18px; font-size: 13.5px; color: var(--faint); }
.plan.featured .plan-audience { color: var(--accent-ink); }
.plan-price { display: flex; align-items: baseline; gap: 6px; }
.plan-price .amount { font-family: var(--font-display); font-weight: 600; font-size: 46px; line-height: 1; }
.plan-price .per { font-size: 14px; color: var(--faint); }
.plan-billing-note { font-size: 12.5px; color: var(--faint); margin: 4px 0 20px; }
.plan .dash-list { gap: 9px; font-size: 14.5px; margin-bottom: 22px; flex: 1; }
.plan .dash-list li { gap: 9px; font-size: 14.5px; }
.plan .dash-list li::before { content: "—"; width: auto; height: auto; background: none; margin-top: 0; color: var(--accent); }
.plan .btn { text-align: center; font-size: 16px; padding: 12px 20px; }

/* ── Blog cards ── */
.post-grid {
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.post-card {
  background: var(--bg); padding: 22px 20px 24px;
  display: flex; flex-direction: column; gap: 10px; color: var(--ink);
}
.post-card:hover { background: #eaeaeb; color: var(--ink); text-decoration: none; }
/* Planned-but-unwritten article cards: rendered as divs, not links. */
.post-card.is-planned, .post-card.is-planned:hover { background: var(--bg); cursor: default; }
/* A control that exists but cannot act yet. pointer-events stays ON so the title tooltip shows. */
.btn-disabled, .btn-disabled:hover { opacity: .45; cursor: not-allowed; background: var(--accent); border-color: var(--accent); color: var(--cream); }
/* Footer entries for channels that open at launch (e.g. email before MX exists). */
.link-soon { color: var(--faintest); cursor: default; }
.post-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-link); }
.post-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.15; }
.post-blurb { font-size: 14px; color: var(--muted); }
.post-meta { font-family: var(--font-mono); font-size: 11px; color: var(--faintest); margin-top: auto; }

.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filter { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; padding: 7px 14px; border: 1px solid rgba(29, 31, 32, .2); color: var(--muted); background: transparent; cursor: pointer; }
.filter.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ── Media placeholders (until real photos exist) ── */
.media-placeholder {
  border: 1px solid var(--line);
  background: repeating-linear-gradient(135deg, var(--bg-alt) 0 8px, var(--bg) 8px 16px);
  display: grid; place-items: center; padding: 20px;
}
.media-placeholder div { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); text-align: center; line-height: 1.6; }

/* ── Footer ── */
.site-footer { border-top: 1px solid var(--line); }
.site-footer .cols {
  padding-top: 44px; padding-bottom: 36px;
  display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.site-footer .col-head { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faintest); margin-bottom: 12px; }
.site-footer .col-links { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.site-footer .col-links a { color: var(--muted); }
.site-footer .baseline {
  padding-bottom: 40px; display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-family: var(--font-mono); font-size: 11px; color: var(--faintest);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---- articles (resources/<slug>) ---- */
.crumbs { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--faint); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumbs a { color: var(--faint); }
.crumbs a:hover { color: var(--ink); }
.byline { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; font-size: 13.5px; color: var(--faint); border-top: 2px solid var(--ink); padding-top: 14px; margin-top: 22px; }
.byline .who { color: var(--ink-2); font-weight: 600; font-family: var(--font-display); font-size: 15px; }
.article-body { max-width: 700px; font-size: 16.5px; }
.article-body h2 { font-size: clamp(24px, 3vw, 32px); margin: 44px 0 14px; }
.article-body h3 { font-size: 20px; margin: 30px 0 10px; }
.article-body p, .article-body li { line-height: 1.65; color: var(--body); }
.article-body p { margin: 0 0 16px; }
.article-body ul, .article-body ol { margin: 0 0 16px; padding-left: 22px; }
.article-body li { margin-bottom: 8px; }
.article-body table { border-collapse: collapse; width: 100%; font-size: 14.5px; margin: 6px 0 20px; }
.article-body th { text-align: left; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.article-body td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.article-body .callout { border: 1px solid rgba(200,121,28,.45); background: rgba(200,121,28,.045); padding: 14px 16px; margin: 0 0 16px; }
.article-body .callout p:last-child { margin-bottom: 0; }
.article-cta { border: 1px solid var(--line); background: var(--bg-alt); padding: clamp(20px,3vw,28px); margin-top: 48px; }
.article-cta h2 { font-size: 24px; margin: 0 0 8px; }
.article-cta p { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.related { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 18px; }
.related .col-head { margin-bottom: 10px; }