/* Shared stylesheet for the static Cantonese call-answering content pages
   (/industry/*, /compare/, /tools/missed-call-cost/).
   Tokens mirror landing/cantonese-ai-sdr/src/styles.css, re-mapped for a
   light long-form reading surface. */

:root {
  --page-deep: #012f2c;
  --page-brand: #024a45;
  --page-brand-soft: #f1f7f6;
  --page-accent: #c7757e;
  --page-accent-soft: #fdf3f4;
  --page-ink: #101a19;
  --page-muted: #5c6b69;
  --page-line: #d9e3e1;
  --page-bg: #ffffff;
  --page-display: "Space Grotesk", "PingFang HK", "Noto Sans HK", "Microsoft JhengHei", sans-serif;
  --page-body: "Manrope", "PingFang HK", "Noto Sans HK", "Microsoft JhengHei", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  max-width: 820px;
  padding: 28px 20px 64px;
  background: var(--page-bg);
  color: var(--page-ink);
  font-family: var(--page-body);
  font-size: 17px;
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: var(--page-display); color: var(--page-deep); }
h1 { font-size: 31px; line-height: 1.3; margin: 8px 0 10px; }
h2 { font-size: 22px; line-height: 1.4; margin: 40px 0 8px; }
h3 { font-size: 17px; line-height: 1.5; margin: 22px 0 4px; }
p { margin: 10px 0; }
ol, ul { margin: 10px 0; padding-left: 22px; }
li { margin: 6px 0; }

a { color: var(--page-brand); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--page-accent); }

.pnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--page-line);
  font-size: 15px;
}
.pnav a { text-decoration: none; color: var(--page-muted); }
.pnav a:hover { color: var(--page-brand); }
.pnav a[aria-current="page"] { color: var(--page-deep); font-weight: 700; }

.tldr {
  background: var(--page-brand-soft);
  border-left: 4px solid var(--page-brand);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 16px 0 8px;
}

.tablewrap { overflow-x: auto; margin: 12px 0; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { border: 1px solid var(--page-line); padding: 9px 11px; text-align: left; vertical-align: top; }
thead th { background: var(--page-brand-soft); color: var(--page-deep); }
tbody th { background: #fafcfc; font-weight: 600; white-space: nowrap; }

.dialogue td:first-child { white-space: nowrap; font-weight: 600; color: var(--page-brand); width: 1%; }

.cta {
  display: inline-block;
  background: var(--page-brand);
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  margin: 4px 8px 4px 0;
}
.cta:hover { background: var(--page-deep); color: #fff; }
.cta.alt { background: var(--page-accent); }
.cta.alt:hover { background: #a85a63; }

.calc {
  background: var(--page-brand-soft);
  border: 1px solid var(--page-line);
  border-radius: 14px;
  padding: 18px;
  margin: 18px 0;
}
.calc .field { display: block; margin: 0 0 14px; }
.calc .field span { display: block; font-size: 15px; font-weight: 600; color: var(--page-deep); margin-bottom: 4px; }
.calc input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px;
  color: var(--page-ink);
  background: #fff;
  border: 1px solid var(--page-line);
  border-radius: 8px;
}
.calc input:focus { outline: 2px solid var(--page-brand); outline-offset: 1px; }
.calc button {
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--page-brand);
  border: 0;
  border-radius: 10px;
  padding: 12px 20px;
  cursor: pointer;
}
.calc button:hover { background: var(--page-deep); }

.result { margin: 16px 0 0; }
.result[hidden] { display: none; }
.result .big { font-family: var(--page-display); font-size: 27px; font-weight: 700; color: var(--page-accent); line-height: 1.3; }
.result p { margin: 6px 0; }
.err { color: #9b2c2c; font-weight: 600; }

.foot {
  margin-top: 44px;
  padding-top: 14px;
  border-top: 1px solid var(--page-line);
  font-size: 14px;
  color: var(--page-muted);
}
.foot a { color: var(--page-muted); }

@media (max-width: 560px) {
  body { font-size: 16px; padding: 20px 16px 48px; }
  h1 { font-size: 26px; }
  h2 { font-size: 20px; }
}

/* L1 reading and control additions */
.calc select{width:100%;padding:10px;font:inherit;border:1px solid var(--page-line);border-radius:8px;background:#fff;color:var(--page-ink)}
.author{margin-top:36px;border-top:1px solid var(--page-line);padding-top:18px}.author p{font-size:14px}details{padding:12px 0;border-bottom:1px solid var(--page-line)}summary{cursor:pointer;min-height:44px}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}[data-pending-signoff]{border-top:4px solid #986200} .cta-row{margin:16px 0}caption{text-align:left;font-weight:700;margin-bottom:8px}

/* articles-on-design 2026-09-15: article blocks (same palette, no new colours) */
.kicker-line{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--page-accent);font-weight:700;margin:22px 0 0}
.pcrumb{font-size:14px;color:var(--page-muted);margin:18px 0 0}.pcrumb+.kicker-line{margin-top:6px}
.byline{font-size:14px;color:var(--page-muted);margin:6px 0 14px}
figure.photo{margin:26px 0}
figure.photo img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover;border-radius:12px;background:var(--page-brand-soft)}
figure.photo.portrait img{max-width:420px;max-height:none}
figure.photo figcaption{font-size:14px;color:var(--page-muted);margin-top:8px;line-height:1.5}
figure.photo .credit{display:block;font-size:12.5px}
blockquote{margin:16px 0;padding:12px 16px;border-left:4px solid var(--page-accent);background:var(--page-accent-soft);border-radius:0 10px 10px 0}
blockquote p{margin:4px 0}.note{font-size:14px;color:var(--page-muted)}
.faq-block .faq-item{border-bottom:1px solid var(--page-line);padding:2px 0 10px}
ol.sources{font-size:15px}ol.sources li{overflow-wrap:anywhere}
.related{font-size:15px;margin-top:28px}
code{font-size:.9em;background:var(--page-brand-soft);padding:1px 4px;border-radius:4px}