/* Shared styles for Tellsheet's Excel how-to guides (/tools/*). Clean, fast,
   theme-aware — matches the brand tokens used across the marketing site. */

@font-face { font-family:'Public Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url("/fonts/f2.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Public Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url("/fonts/f2.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Public Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url("/fonts/f2.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url("/fonts/f5.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url("/fonts/f5.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }

:root {
  --bg:#fafafc; --surface:#ffffff; --ink:#17173a; --muted:#42425c; --faint:#52526f;
  --line:#dedeea; --line2:#ebebf3; --indigo:#2a2986; --red:#ed1c24;
  --ok:#0f7a3d; --okbg:#e9f7ef; --nobg:#fdecec;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0d0d1f; --surface:#14142b; --ink:#e9e9f4; --muted:#a6a6c2; --faint:#9090a8;
    --line:#26264a; --line2:#1e1e3a; --indigo:#8a89ff; --red:#ff5a60;
    --ok:#5fd08a; --okbg:#12271a; --nobg:#2a1416;
  }
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Public Sans','Helvetica Neue',Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
a { color:var(--indigo); text-decoration:none; }
a:hover { text-decoration:underline; }

/* Header */
.gnav { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line); }
.gnav-in { max-width:960px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:20px; }
.gbrand { display:inline-flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; letter-spacing:-0.02em; color:var(--ink); }
.gbrand img { display:block; width:30px; height:30px; flex-shrink:0; }
.gbrand b { color:inherit; font-weight:inherit; }
.gnav nav { margin-left:auto; display:flex; gap:18px; font-size:14.5px; }
.gnav nav a { color:var(--muted); }
.gnav nav a:hover { color:var(--ink); text-decoration:none; }

/* Layout */
main { max-width:760px; margin:0 auto; padding:0 20px 80px; }
.crumbs { font-size:13px; color:var(--faint); margin:26px 0 18px; }
.crumbs a { color:var(--faint); }
h1 { font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-0.025em;
  font-size:clamp(28px,4.4vw,42px); line-height:1.1; margin:0 0 14px; text-wrap:balance; }
.lede { font-size:19px; color:var(--muted); margin:0 0 10px; text-wrap:pretty; }
.updated { font-size:13px; color:var(--faint); margin:0 0 30px; }
h2 { font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-0.02em;
  font-size:26px; margin:44px 0 14px; }
h3 { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:19px; margin:28px 0 8px; }
p { margin:0 0 16px; }
code { font-family:'SF Mono',Menlo,Consolas,monospace; font-size:0.88em; background:var(--line2);
  padding:2px 6px; border-radius:5px; }

/* Before / after table */
.ba { width:100%; border-collapse:collapse; margin:8px 0 24px; font-size:15px;
  border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.ba th { background:var(--line2); font-family:'Space Grotesk',sans-serif; font-weight:600;
  text-align:left; padding:9px 14px; font-size:13px; color:var(--faint); letter-spacing:0.02em; text-transform:uppercase; }
.ba td { padding:9px 14px; border-top:1px solid var(--line); font-variant-numeric:tabular-nums; }
.ba .arrow { text-align:center; color:var(--red); font-weight:700; width:36px; }
.ba-wrap { overflow-x:auto; }

/* Steps */
ol.steps { counter-reset:step; list-style:none; padding:0; margin:8px 0 24px; }
ol.steps > li { counter-increment:step; position:relative; padding:2px 0 14px 44px; }
ol.steps > li::before { content:counter(step); position:absolute; left:0; top:0;
  width:29px; height:29px; border-radius:50%; background:var(--indigo); color:#fff;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center; }

/* Callout — the Tellsheet fast path */
.tip { background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--red);
  border-radius:10px; padding:18px 20px; margin:20px 0 26px; }
.tip h3 { margin:0 0 6px; }
.tip p { margin:0; color:var(--muted); }

/* Method compare chips */
.methods { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0 26px; }
.method { border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:var(--surface); }
.method .k { font-size:12px; text-transform:uppercase; letter-spacing:0.04em; color:var(--faint); margin-bottom:4px; }
.method .v { font-family:'Space Grotesk',sans-serif; font-weight:600; }
@media (max-width:560px){ .methods{ grid-template-columns:1fr; } }

/* FAQ */
.faq details { border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary { font-family:'Space Grotesk',sans-serif; font-weight:600; cursor:pointer; list-style:none; font-size:17px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; float:right; color:var(--red); font-weight:700; }
.faq details[open] summary::after { content:'\2212'; }
.faq details p { margin:10px 0 0; color:var(--muted); }

/* CTA */
.cta { text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:32px 24px; margin:40px 0 10px; }
.cta h2 { margin:0 0 8px; }
.cta p { color:var(--muted); margin:0 auto 18px; max-width:46ch; }
.btn { display:inline-block; background:var(--red); color:#fff; font-family:'Space Grotesk',sans-serif;
  font-weight:600; padding:12px 26px; border-radius:10px; font-size:16px; border:0; cursor:pointer; }
.btn:hover { text-decoration:none; filter:brightness(1.05); }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--line); margin-left:8px; }

/* Related */
.related { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; margin:12px 0; }
.related a { border:1px solid var(--line); border-radius:10px; padding:12px 14px; color:var(--ink);
  background:var(--surface); font-size:14.5px; }
.related a:hover { border-color:var(--indigo); text-decoration:none; }
.related a b { display:block; font-family:'Space Grotesk',sans-serif; font-weight:600; margin-bottom:2px; }
.related a span { color:var(--muted); font-size:13px; }

/* Footer */
.gfoot { border-top:1px solid var(--line); margin-top:60px; }
.gfoot-in { max-width:960px; margin:0 auto; padding:26px 20px; font-size:13.5px; color:var(--faint);
  display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.gfoot-in a { color:var(--muted); }
.gfoot-in .sp { margin-left:auto; }

/* Guides hub */
/* The guides hub uses more of the page width than an article's reading column,
   so three cards sit side-by-side at a comfortable landscape width. Scoped to
   the hub page so article pages keep their 760px reading measure. */
.hub-page main, .hub-page .gnav-in, .hub-page .gfoot-in { max-width:1120px; }
.hub-page .lede { max-width:60ch; }
.hub { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:24px 0; }
@media (max-width:900px){ .hub { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .hub { grid-template-columns:1fr; } }

/* Comparison table (competitor-alternative pages) */
.cmp-wrap { overflow-x:auto; margin:24px 0; }
.cmp { width:100%; min-width:520px; border-collapse:collapse; font-size:14.5px; }
.cmp th, .cmp td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.cmp thead th { font-family:'Space Grotesk',sans-serif; font-size:13.5px; font-weight:700; color:var(--muted); }
.cmp thead th.me { color:var(--indigo); }
.cmp tbody th { font-weight:600; color:var(--ink); width:32%; }
.cmp td.me { background:var(--okbg); color:var(--ink); font-weight:600; }
.cmp td.them { color:var(--muted); }
.cmp .yes { color:var(--ok); font-weight:700; }
.hub a { border:1px solid var(--line); border-radius:12px; padding:18px 18px; background:var(--surface); color:var(--ink); }
.hub a:hover { border-color:var(--indigo); text-decoration:none; }
.hub a b { display:block; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; margin-bottom:4px; }
.hub a span { color:var(--muted); font-size:14px; }