/* ---------------------------------------------------------------------------
   GetPentest — getpentest.ca
   Generated from shared/templates/custom.css.tpl. Do not edit per-domain
   copies by hand; edit the template and re-run shared/scripts/build-css.py.

   Design brief, so future edits do not drift:

   The reference points are soc2auditors.org and the Stripe docs, not a SaaS
   landing page. A reader arriving here has a problem ("our buyer wants a SOC 2
   report") and wants an answer in the first screen. So the content is the hero.
   There is no hero image, no illustration, no animation. Text starts near the
   top of the page and is left-aligned at a measure that stays readable.

   Deliberate omissions, each of which reads as machine-generated when present:
   gradients of any kind, backdrop-filter, box-shadow, border-radius above 4px,
   scroll-triggered reveals, hover transforms, and icon fonts. Hover states
   change colour and nothing else. Every one of these is cheap to add later and
   impossible to un-see once a reader has clocked the template.

   Bootstrap 5.3 is loaded from CDN for its grid and nothing else. Everything it
   styles visually is overridden below. If a Bootstrap component is recognisable
   on the rendered page, that is a bug.
--------------------------------------------------------------------------- */

:root {
  --accent:        #dc2626;
  --accent-dark:   #b91c1c;
  --accent-wash:   #fef2f2;

  --ink:           #1a1a2e;
  --ink-dim:       #4a4a5e;
  --ink-muted:     #6b7280;
  --rule:          #e2e8f0;
  --rule-strong:   #cbd5e1;
  --paper:         #ffffff;
  --paper-alt:     #f8fafc;

  --measure:       720px;   /* prose column */
  --measure-wide:  1100px;  /* tables, directory, page frame */

  --radius:        3px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

/* --- base ---------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* Bootstrap sets its own font stack and link colours on these. Take them back. */
body, .container, .container-fluid, .row, [class^="col-"], [class*=" col-"] {
  font-family: var(--font);
}

a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--ink); }          /* colour only — no transform, no shadow */
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
  opacity: 1;                            /* Bootstrap fades hr to 0.25 */
}

/* --- typography ---------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-weight: 650;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 0.6em;
  letter-spacing: -0.011em;
}

h1 { font-size: 2.05rem; margin-bottom: 0.5em; }
h2 {
  font-size: 1.45rem;
  margin-top: 2.4em;
  padding-top: 1.1em;
  border-top: 1px solid var(--rule);
}
h3 { font-size: 1.15rem; margin-top: 1.9em; }
h4 { font-size: 1rem;    margin-top: 1.6em; }

/* First heading after the page intro should not carry a rule. */
h2.no-rule { border-top: 0; padding-top: 0; }

p { margin: 0 0 1.15rem; }

ul, ol { margin: 0 0 1.15rem; padding-left: 1.4rem; }
li { margin-bottom: 0.4rem; }
li > ul, li > ol { margin-top: 0.4rem; margin-bottom: 0.6rem; }

strong { font-weight: 650; }

code {
  font-family: var(--mono);
  font-size: 0.875em;
  background: var(--paper-alt);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.1em 0.35em;
  color: var(--ink);
}

pre {
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.55;
  background: var(--paper-alt);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  overflow-x: auto;
  margin: 0 0 1.4rem;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }

blockquote {
  margin: 0 0 1.4rem;
  padding: 0.15rem 0 0.15rem 1.1rem;
  border-left: 3px solid var(--rule-strong);
  color: var(--ink-dim);
}

.lede {
  font-size: 1.16rem;
  line-height: 1.6;
  color: var(--ink-dim);
  margin-bottom: 1.6rem;
}

.small-print {
  font-size: 0.85rem;
  color: var(--ink-muted);
  line-height: 1.55;
}

/* --- page frame ---------------------------------------------------------- */

.wrap {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.prose { max-width: var(--measure); }

/* Let tables and other wide blocks escape the prose measure without breaking
   the reading column for text. */
.prose .bleed { max-width: var(--measure-wide); }

main { padding-bottom: 4rem; }

/* --- masthead ------------------------------------------------------------ */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.masthead-inner {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 60px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 680;
  font-size: 1.06rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand-mark { width: 20px; height: 20px; display: block; }

.nav-primary { display: flex; align-items: center; gap: 1.5rem; }
.nav-primary a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 0.94rem;
  white-space: nowrap;
}
.nav-primary a:hover,
.nav-primary a[aria-current="page"] { color: var(--accent-dark); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.35rem 0.6rem;
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
}

/* --- breadcrumbs --------------------------------------------------------- */

.crumbs {
  font-size: 0.85rem;
  color: var(--ink-muted);
  padding: 1.1rem 0 0;
  margin: 0;
}
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}
.crumbs li { margin: 0; }
.crumbs li + li::before {
  content: "/";
  color: var(--rule-strong);
  margin-right: 0.4rem;
}
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent-dark); text-decoration: underline; }

/* --- page head ----------------------------------------------------------- */

.page-head { padding: 1.4rem 0 0.4rem; }
.page-head h1 { margin-bottom: 0.35rem; }
.page-meta {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 0 0 1.6rem;
}
.page-meta span + span::before {
  content: "·";
  margin: 0 0.5rem;
  color: var(--rule-strong);
}

/* --- layout with sidebar ------------------------------------------------- */

.with-aside {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) 240px;
  gap: 3.5rem;
  align-items: start;
}

.aside {
  position: sticky;
  top: 1.5rem;
  font-size: 0.9rem;
}
.aside h2, .aside h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  font-weight: 650;
  border: 0;
  padding: 0;
  margin: 0 0 0.7rem;
}
.aside ul { list-style: none; margin: 0 0 1.8rem; padding: 0; }
.aside li { margin-bottom: 0.45rem; line-height: 1.45; }
.aside a { color: var(--ink-dim); text-decoration: none; }
.aside a:hover { color: var(--accent-dark); text-decoration: underline; }

/* --- tables -------------------------------------------------------------- */

.table-scroll { overflow-x: auto; margin: 0 0 1.6rem; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  margin: 0 0 1.6rem;
  /* Bootstrap's .table sets these on a class; we set them on the element so
     plain <table> in generated content is styled without extra markup. */
  color: var(--ink);
}
.table-scroll > table { margin-bottom: 0; }

caption {
  caption-side: top;
  text-align: left;
  font-size: 0.85rem;
  color: var(--ink-muted);
  padding: 0 0 0.5rem;
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--rule);
}

thead th {
  font-weight: 650;
  font-size: 0.85rem;
  color: var(--ink-dim);
  background: var(--paper-alt);
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}

tbody tr:nth-child(even) { background: var(--paper-alt); }
tbody tr:last-child td { border-bottom: 1px solid var(--rule-strong); }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.nowrap, th.nowrap { white-space: nowrap; }

/* --- FAQ (details/summary) ----------------------------------------------- */

.faq { margin: 1.2rem 0 2rem; border-top: 1px solid var(--rule); }

.faq details { border-bottom: 1px solid var(--rule); }

.faq summary {
  cursor: pointer;
  padding: 0.85rem 1.8rem 0.85rem 0;
  font-weight: 600;
  font-size: 1rem;
  list-style: none;
  position: relative;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-dark); }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 0.8rem;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--ink-muted);
  font-weight: 400;
}
.faq details[open] > summary::after { content: "\2212"; }  /* minus */
.faq details > *:not(summary) { margin-left: 0; }
.faq details p:last-child { margin-bottom: 1rem; }

/* --- callouts ------------------------------------------------------------ */

.note {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--paper-alt);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.6rem;
  font-size: 0.94rem;
}
.note :last-child { margin-bottom: 0; }
.note-title {
  font-weight: 650;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-dark);
  margin: 0 0 0.35rem;
}

/* Affiliate and operator disclosures. Quieter than a note, still visible. */
.disclosure {
  font-size: 0.84rem;
  color: var(--ink-muted);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  margin: 0 0 1.6rem;
}
.disclosure :last-child { margin-bottom: 0; }

/* --- buttons and CTAs ---------------------------------------------------- */

.btn,
button.btn,
a.btn {
  display: inline-block;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent-dark);
  background: var(--accent-dark);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  /* Bootstrap adds a transition and a focus ring shadow. Neither. */
  transition: none;
  box-shadow: none;
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-secondary,
a.btn-secondary {
  background: var(--paper);
  color: var(--accent-dark);
  border-color: var(--rule-strong);
}
.btn-secondary:hover {
  background: var(--paper-alt);
  color: var(--ink);
  border-color: var(--ink-dim);
}

.cta {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
  margin: 2.2rem 0;
  background: var(--paper-alt);
}
.cta h2, .cta h3 {
  border: 0;
  padding: 0;
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
}
.cta p { margin-bottom: 1rem; color: var(--ink-dim); }
.cta :last-child { margin-bottom: 0; }

/* --- forms --------------------------------------------------------------- */

.field { margin-bottom: 1.1rem; }

label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--ink);
}
.field-hint {
  font-size: 0.84rem;
  color: var(--ink-muted);
  margin: -0.15rem 0 0.4rem;
}

input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="number"], input[type="search"], select, textarea {
  width: 100%;
  font: inherit;
  font-size: 0.97rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
  transition: none;
  box-shadow: none;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
  box-shadow: none;
}
textarea { min-height: 110px; resize: vertical; }

fieldset { border: 0; margin: 0 0 1.1rem; padding: 0; }
legend {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0;
  margin-bottom: 0.45rem;
  color: var(--ink);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-bottom: 0.45rem;
  font-size: 0.95rem;
}
.check input { margin-top: 0.3rem; flex: none; width: auto; }
.check label { font-weight: 400; margin: 0; }

/* Honeypot. Off-screen rather than display:none — some bots skip hidden inputs. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-error {
  color: #b91c1c;
  font-size: 0.88rem;
  margin-top: 0.3rem;
}
.form-note { font-size: 0.86rem; color: var(--ink-muted); margin-top: 0.8rem; }

/* --- directory listings --------------------------------------------------
   Rows, not cards. A directory is a data set and reads better as a list with
   hairline separators than as a grid of boxes with shadows.
--------------------------------------------------------------------------- */

.listing {
  border-top: 1px solid var(--rule);
  padding: 1.1rem 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1.5rem;
  align-items: start;
}
.listing:last-child { border-bottom: 1px solid var(--rule); }

.listing-name {
  font-size: 1.05rem;
  font-weight: 650;
  margin: 0;
  line-height: 1.35;
}
.listing-name a { text-decoration: none; color: var(--ink); }
.listing-name a:hover { color: var(--accent-dark); text-decoration: underline; }

.listing-meta {
  font-size: 0.86rem;
  color: var(--ink-muted);
  margin: 0.1rem 0 0.35rem;
}
.listing-meta span + span::before {
  content: "·";
  margin: 0 0.45rem;
  color: var(--rule-strong);
}
.listing-desc { font-size: 0.94rem; color: var(--ink-dim); margin: 0; }
.listing-actions { grid-column: 2; grid-row: 1 / span 2; text-align: right; }

.badge-verified {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-dark);
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 0.1rem 0.4rem;
  vertical-align: 0.12em;
  margin-left: 0.4rem;
}
.badge-unclaimed {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  background: var(--paper-alt);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 0.1rem 0.4rem;
  vertical-align: 0.12em;
  margin-left: 0.4rem;
}

.filters {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-alt);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: flex-end;
}
.filters .field { margin: 0; min-width: 160px; flex: 1 1 160px; }

/* --- tools (calculators, assessments) ------------------------------------ */

.tool { border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 1.3rem 1.4rem; margin: 0 0 1.8rem; }
.tool-step { display: none; }
.tool-step.is-active { display: block; }
.tool-progress {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  font-weight: 650;
  margin-bottom: 0.9rem;
}
.tool-nav { display: flex; gap: 0.6rem; margin-top: 1.2rem; }

.result-figure {
  font-size: 1.9rem;
  font-weight: 680;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin: 0 0 0.2rem;
}
.result-label {
  font-size: 0.85rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 650;
  margin: 0 0 1rem;
}

/* --- cross-network links -------------------------------------------------- */

.network {
  border-top: 1px solid var(--rule);
  margin-top: 2.6rem;
  padding-top: 1.4rem;
}
.network h2 {
  border: 0;
  padding: 0;
  margin: 0 0 0.8rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.network ul { list-style: none; padding: 0; margin: 0; }
.network li { margin-bottom: 0.5rem; font-size: 0.94rem; line-height: 1.5; }
.network li span { color: var(--ink-muted); }

/* --- social proof --------------------------------------------------------
   Hidden by default. js/proof.js reveals it only when the counter file
   reports a non-zero figure, so a new site never shows a fabricated number.
--------------------------------------------------------------------------- */
.social-proof {
  display: none;
  font-size: 0.86rem;
  color: var(--ink-muted);
  margin: 0 0 1.1rem;
}
.social-proof.is-shown { display: block; }

/* --- footer -------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
  padding: 2rem 0 2.6rem;
  font-size: 0.88rem;
  color: var(--ink-muted);
  background: var(--paper-alt);
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.8rem;
  margin-bottom: 1.8rem;
}
.footer-cols h2 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  font-weight: 650;
  border: 0;
  padding: 0;
  margin: 0 0 0.6rem;
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin-bottom: 0.4rem; line-height: 1.45; }
.footer-cols a { color: var(--ink-muted); text-decoration: none; }
.footer-cols a:hover { color: var(--accent-dark); text-decoration: underline; }

.colophon {
  border-top: 1px solid var(--rule);
  padding-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  align-items: baseline;
}
.colophon a { color: var(--ink-muted); }
.colophon a:hover { color: var(--accent-dark); }
.colophon .operator { color: var(--ink-dim); }

/* --- skip link ----------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--paper);
  color: var(--ink);
  padding: 0.6rem 1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  z-index: 100;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* --- 404 ----------------------------------------------------------------- */

.notfound { padding: 3rem 0 2rem; max-width: var(--measure); }
.notfound h1 { font-size: 1.7rem; }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 960px) {
  .with-aside { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .aside {
    position: static;
    border-top: 1px solid var(--rule);
    padding-top: 1.4rem;
  }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  h1 { font-size: 1.62rem; }
  h2 { font-size: 1.28rem; }

  .nav-toggle { display: block; }
  .nav-primary {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 60px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 0.4rem 1.25rem 0.9rem;
    z-index: 20;
  }
  .nav-primary.is-open { display: flex; }
  .nav-primary a { padding: 0.6rem 0; border-bottom: 1px solid var(--rule); }
  .nav-primary a:last-child { border-bottom: 0; }
  .masthead { position: relative; }

  .listing { grid-template-columns: 1fr; }
  .listing-actions { grid-column: 1; grid-row: auto; text-align: left; }

  th, td { padding: 0.5rem 0.6rem; }
}

/* --- print --------------------------------------------------------------- */

@media print {
  .masthead, .site-footer, .cta, .nav-primary, .aside, .social-proof { display: none; }
  body { font-size: 11pt; color: #000; }
  a { text-decoration: underline; color: #000; }
  .prose { max-width: none; }
  .faq details { border-bottom: 1px solid #ccc; }
  .faq details > *:not(summary) { display: block; }  /* print answers even when collapsed */
}