/* ==========================================================================
   SiteScano — site stylesheet
   Single source of truth for every page. Tokens first, then layout,
   then components in the order they appear on a page.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --bg: #f6f8fb;
  --card: #ffffff;
  --line: #e6ebf1;
  --line-2: #d5dde7;
  --brand: #2563eb;
  --brand-ink: #1d4ed8;
  --brand-tint: #eff5ff;
  --ok: #0f9d63;
  --ok-tint: #e7f6ef;
  --warn: #e08600;
  --warn-tint: #fdf2e0;
  --bad: #dc2626;
  --bad-tint: #fdecec;
  --muted-tint: #f1f5f9;
  --seg-1: #dc2626;
  --seg-2: #f97316;
  --seg-3: #eab308;
  --seg-4: #84cc16;
  --seg-5: #0f9d63;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow: 0 4px 16px rgba(15, 23, 42, .06);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .10);
  --r: 14px;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* --- 2. Base ------------------------------------------------------------- */
* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

main [id] {
  scroll-margin-top: 84px
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased
}

::selection {
  background: var(--brand);
  color: #fff
}

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

h1,
h2,
h3,
h4,
h5,
.jk {
  font-family: var(--display);
  letter-spacing: -.02em
}

.mono {
  font-family: var(--mono);
  font-feature-settings: "tnum"
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px
}

.wrap-narrow {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px
}

a {
  color: var(--brand-ink)
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: #fff;
  padding: 12px 18px;
  z-index: 200;
  border-radius: 0 0 8px 0;
  font-family: var(--display);
  font-weight: 700
}

.skip:focus {
  left: 0
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

/* --- 3. Header ----------------------------------------------------------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 248, 251, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line)
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 20px
}

.brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  text-decoration: none;
  color: var(--ink)
}

.brand .mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand), #60a5fa);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 15px;
  box-shadow: var(--shadow-sm)
}

.brand .mark svg {
  width: 24px;
  height: 24px;
  color: #fff;
}

.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 500
}

.nav-links a {
  text-decoration: none;
  color: var(--ink-2);
  transition: color .2s
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--brand)
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 14px
}

.nav-login {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none
}

.nav-login:hover {
  color: var(--brand)
}

.nav-links li.m-auth,
.nav-links li.m-label {
  display: none
}

.nav-user {
  position: relative
}

.nav-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 5px 10px 5px 6px;
  cursor: pointer;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2)
}

.nav-user-btn:hover {
  border-color: var(--line-2);
  background: var(--card)
}

.nav-user-btn .uav {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), #60a5fa);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700
}

.nav-user-btn .uname {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: none;
}

.nav-user-btn .ph {
  font-size: 12px;
  transition: transform .2s
}

.nav-user.open .nav-user-btn .ph {
  transform: rotate(180deg)
}

.nav-drop {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 210px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: 60
}

.nav-drop a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none
}

.nav-drop a:hover {
  background: var(--bg);
  color: var(--ink)
}

.nav-drop .sep {
  height: 1px;
  background: var(--line);
  margin: 6px 4px
}

.cta {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  background: var(--brand);
  color: #fff;
  padding: 9px 18px;
  border-radius: 9px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  white-space: nowrap
}

.cta:hover {
  background: var(--brand-ink)
}

.cta-short {
  display: none
}

.navtoggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-2);
  background: var(--card);
  border-radius: 9px;
  cursor: pointer;
  padding: 0;
  place-items: center
}

.navtoggle span {
  display: block;
  width: 17px;
  height: 2px;
  background: var(--ink);
  position: relative;
  transition: background .2s
}

.navtoggle span::before,
.navtoggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 17px;
  height: 2px;
  background: var(--ink);
  transition: transform .2s, top .2s
}

.navtoggle span::before {
  top: -5px
}

.navtoggle span::after {
  top: 5px
}

.navmenu-open .navtoggle span {
  background: transparent
}

.navmenu-open .navtoggle span::before {
  top: 0;
  transform: rotate(45deg)
}

.navmenu-open .navtoggle span::after {
  top: 0;
  transform: rotate(-45deg)
}

@media(max-width:1200px) {
  .nav {
    gap: 14px
  }

  .nav-links {
    gap: 16px;
    font-size: 13.5px
  }

  .nav-user-btn .uname {
    max-width: 80px
  }
}

@media(max-width:560px) {
  .field {
    font-size: 16px
  }

  .wrap,
  .wrap-narrow {
    padding: 0 16px
  }

  .nav {
    gap: 10px
  }

  .brand {
    font-size: 17px;
    gap: 8px
  }

  .brand .mark {
    width: 26px;
    height: 26px;
    font-size: 14px
  }

  .cta {
    padding: 10px 14px;
    font-size: 13.5px
  }

  .cta-long {
    display: none
  }

  .cta-short {
    display: inline
  }

  .navtoggle {
    width: 42px;
    height: 42px
  }
}

@media(max-width:1040px) {
  .nav-links {
    display: none
  }

  .navtoggle {
    display: grid
  }

  .nav-login,
  .nav-user {
    display: none
  }

  .navmenu-open .nav-links {
    display: grid;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    padding: 14px 24px 20px;
    gap: 2px;
    box-shadow: var(--shadow);
    max-height: calc(100vh - 64px);
    overflow-y: auto
  }

  .navmenu-open .nav-links a {
    display: block;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px
  }

  .navmenu-open .nav-links li:last-child a {
    border-bottom: none
  }

  .navmenu-open .nav-links li:has(+ li.m-label) a {
    border-bottom: none
  }

  .navmenu-open .nav-links li.m-auth {
    display: block
  }

  .navmenu-open .nav-links li.m-auth a {
    color: var(--ink-2);
    font-weight: 500
  }

  .navmenu-open .nav-links li.m-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--display);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 14px;
    padding: 14px 0 6px;
    border-top: 2px solid var(--line-2)
  }

  .navmenu-open .nav-links li.m-label .uav {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), #60a5fa);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0
  }
}

/* --- 4. Breadcrumb + page head ------------------------------------------- */
.crumb {
  font-size: 13px;
  color: var(--muted);
  padding: 20px 0 0
}

.crumb a {
  color: var(--muted);
  text-decoration: none
}

.crumb a:hover {
  color: var(--brand)
}

.phead {
  padding: 30px 0 28px;
  border-bottom: 1px solid var(--line)
}

.phead.center {
  text-align: center
}

.eyebrow {
  display: inline-block;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand-ink);
  background: var(--brand-tint);
  border: 1px solid #d5e4fd;
  padding: 5px 14px;
  border-radius: 99px;
  margin: 0 0 16px
}

h1.doc {
  font-size: clamp(32px, 4.8vw, 48px);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -.035em;
  margin: 0 0 16px;
  max-width: 22ch
}

.phead.center h1.doc {
  margin-left: auto;
  margin-right: auto
}

.standfirst {
  font-size: 17.5px;
  color: var(--ink-2);
  max-width: 68ch;
  margin: 0
}

.phead.center .standfirst {
  margin-left: auto;
  margin-right: auto
}

.docmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 20px;
  font-size: 13px;
  color: var(--muted)
}

.blog-search {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  max-width: 540px
}

.blog-search .field {
  flex: 1
}

@media(max-width:560px) {
  .blog-search {
    flex-direction: column
  }
}

.author-head {
  display: flex;
  align-items: flex-start;
  gap: 24px
}

.author-av {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), #60a5fa);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
  flex-shrink: 0;
  object-fit: cover
}

@media(max-width:560px) {
  .author-head {
    gap: 16px
  }

  .author-av {
    width: 56px;
    height: 56px;
    font-size: 22px
  }
}

.phead.center .docmeta {
  justify-content: center
}

.docmeta b {
  font-weight: 600;
  color: var(--ink-2)
}

/* --- 5. Sections --------------------------------------------------------- */
section.band {
  padding: 52px 0;
  border-top: 1px solid var(--line)
}

section.band.first {
  border-top: none
}

.section-head {
  margin-bottom: 24px;
  max-width: 64ch
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center
}

.kicker {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 12px
}

h2.h {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: -.025em
}

h3.sub {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  margin: 30px 0 10px
}

.lede {
  font-size: 15.5px;
  color: var(--ink-2);
  max-width: 64ch;
  margin: 0
}

.headrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap
}

.seeall {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-ink);
  text-decoration: none;
  white-space: nowrap
}

.seeall:hover {
  text-decoration: underline
}

/* --- 6. Cards ------------------------------------------------------------ */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm)
}

.card.pad {
  padding: 28px
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 18px
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 18px
}

@media(max-width:860px) {
  .grid-2 {
    grid-template-columns: 1fr
  }
}

/* --- 7. Buttons ---------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 9px;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s
}

.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-sm)
}

.btn-primary:hover {
  background: var(--brand-ink)
}

.btn-green {
  background: var(--ok);
  color: #fff;
  box-shadow: var(--shadow-sm)
}

.btn-green:hover {
  background: #0c8353
}

.btn-line {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line-2)
}

.btn-line:hover {
  border-color: var(--brand);
  color: var(--brand-ink)
}

.btn-lg {
  padding: 14px 28px;
  font-size: 15px
}

.btn-block {
  display: block;
  width: 100%
}

/* --- 8. Forms ------------------------------------------------------------ */
.field {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: var(--ink)
}

.field:focus {
  outline: 2px solid var(--brand);
  border-color: var(--brand)
}

.field::placeholder {
  color: #94a3b8
}

textarea.field {
  min-height: 130px;
  resize: vertical
}

select.field {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px
}

.fl {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  display: block;
  margin-bottom: 6px
}

.fl .req {
  color: var(--bad);
  font-weight: 700
}

.fgroup {
  margin-bottom: 18px
}

.fhelp {
  font-size: 12.5px;
  color: var(--muted);
  margin: 6px 0 0
}

.ferr {
  font-size: 12.5px;
  color: var(--bad);
  font-weight: 600;
  margin: 6px 0 0;
  display: none
}

.fgroup.invalid .field {
  border-color: var(--bad)
}

.fgroup.invalid .ferr {
  display: block
}

.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

@media(max-width:560px) {
  .row2 {
    grid-template-columns: 1fr
  }
}

.checkline {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 11px;
  align-items: start;
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 14px
}

.checkline input {
  margin-top: 4px
}

.formcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 30px;
  box-shadow: var(--shadow-sm)
}

@media(max-width:560px) {
  .formcard {
    padding: 22px
  }
}

.honey {
  position: absolute;
  left: -9999px
}

/* --- 9. Domain checker field --------------------------------------------- */
.checkfield {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  padding: 10px 10px 10px 20px;
  box-shadow: var(--shadow-lg);
  transition: border-color .2s
}

.checkfield:focus-within {
  border-color: var(--brand)
}

.checkfield .pre {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--muted);
  white-space: nowrap
}

.checkfield input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  padding: 14px 0
}

.checkfield input:focus {
  outline: none
}

.checkfield button {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 11px;
  padding: 15px 26px;
  cursor: pointer;
  white-space: nowrap
}

.checkfield button:hover {
  background: var(--brand-ink)
}

@media(max-width:560px) {
  .checkfield {
    flex-wrap: wrap;
    padding: 14px;
    gap: 8px
  }

  .checkfield .pre {
    width: 100%
  }

  .checkfield input {
    width: 100%;
    flex: 1 1 100%;
    padding: 4px 0 10px
  }

  .checkfield button {
    width: 100%
  }
}

.scan-progress {
  max-width: 660px;
  margin: 18px auto 0
}

.scan-bar {
  height: 14px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden
}

.scan-fill {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--brand);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-size: 16px 16px;
  animation: scan-stripes .6s linear infinite;
  transition: width .4s ease
}

@keyframes scan-stripes {
  from {
    background-position: 0 0
  }

  to {
    background-position: 16px 0
  }
}

.scan-stage {
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0 0;
  font-weight: 500
}

.hero-dark .scan-stage {
  color: #94a3b8
}

.checkfield.scanning {
  opacity: .6;
  pointer-events: none
}

.form-note {
  font-size: 13px;
  color: var(--muted);
  margin: 14px 0 0;
  min-height: 20px
}

.form-note.err {
  color: var(--bad);
  font-weight: 600
}

/* --- 10. Callouts -------------------------------------------------------- */
.note {
  border-radius: 12px;
  padding: 20px 22px;
  margin: 22px 0;
  font-size: 14.5px;
  line-height: 1.6
}

.note h4 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--display)
}

.note p {
  margin: 0;
  font-size: 14.5px
}

.note p+p {
  margin-top: 10px
}

.note.info {
  background: var(--brand-tint);
  border: 1px solid #d5e4fd;
  color: var(--ink-2)
}

.note.info h4 {
  color: var(--brand-ink)
}

.note.warn {
  background: var(--warn-tint);
  border: 1px solid #f4dcae;
  color: #7a4c00
}

.note.warn h4 {
  color: #8a5600
}

.note.ok {
  background: var(--ok-tint);
  border: 1px solid #bfe6d3;
  color: #0b5c3c
}

.note.ok h4 {
  color: var(--ok)
}

.note.bad {
  background: var(--bad-tint);
  border: 1px solid #f6cfcf;
  color: #8c1c1c
}

.note.bad h4 {
  color: var(--bad)
}

/* --- 11. Tick lists ------------------------------------------------------ */
.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  font-size: 14.5px;
  color: var(--ink-2)
}

.ticks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start
}

.ticks .ic {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px;
  background: var(--brand-tint);
  color: var(--brand)
}

.ticks .ic.y {
  background: var(--ok-tint);
  color: var(--ok)
}

.ticks .ic.n {
  background: var(--bad-tint);
  color: var(--bad)
}

.ticks .ic.no {
  background: #eef2f7;
  color: #94a3b8
}

/* --- 12. Numbered steps -------------------------------------------------- */
.steps {
  list-style: none;
  counter-reset: st;
  margin: 24px 0 0;
  padding: 0
}

.steps li {
  counter-increment: st;
  position: relative;
  padding: 0 0 26px 62px;
  border-left: 2px solid var(--line);
  margin-left: 19px
}

.steps li:last-child {
  border-left-color: transparent;
  padding-bottom: 0
}

.steps li::before {
  content: counter(st);
  position: absolute;
  left: -20px;
  top: -4px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--line);
  color: var(--brand-ink);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  display: grid;
  place-items: center
}

.steps h4 {
  font-family: var(--display);
  font-size: 16.5px;
  font-weight: 700;
  margin: 2px 0 7px
}

.steps p {
  font-size: 14.5px;
  margin: 0 0 8px;
  max-width: 66ch;
  color: var(--ink-2)
}

.steps .out {
  font-size: 13px;
  color: var(--muted);
  border-left: 3px solid var(--line-2);
  padding-left: 12px;
  margin-top: 10px
}

.steps .out b {
  color: var(--ink-2)
}

/* --- 13. Data tables ----------------------------------------------------- */
.dtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px
}

.dtable th {
  text-align: left;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--muted);
  padding: 0 10px 12px 0;
  border-bottom: 1px solid var(--line-2)
}

.dtable td {
  padding: 15px 10px 15px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-2)
}

.dtable tr:last-child td {
  border-bottom: none
}

.dtable td:first-child {
  color: var(--ink);
  font-weight: 600
}

.dtable .sub {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 3px;
  font-weight: 400
}

@media(max-width:700px) {

  .dtable,
  .dtable tbody,
  .dtable tr,
  .dtable td {
    display: block;
    width: 100%
  }

  .dtable thead {
    display: none
  }

  .dtable tr {
    border-bottom: 1px solid var(--line);
    padding: 14px 0
  }

  .dtable td {
    border: none;
    padding: 2px 0
  }
}

/* --- 14. Legal document -------------------------------------------------- */
.legal-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 48px;
  margin-top: 34px;
  padding-bottom: 56px;
  align-items: start
}

@media(max-width:1000px) {
  .legal-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0
  }

  .toc-rail {
    display: none
  }
}

.toc-rail {
  position: sticky;
  top: 84px
}

.toc-rail .toc-title {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
  padding-left: 14px
}

.toc-rail ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--line)
}

.toc-rail a {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: 8px 0 8px 14px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  transition: all .2s
}

.toc-rail a:hover {
  color: var(--ink);
  border-left-color: var(--line-2)
}

.toc-rail a.active {
  color: var(--brand);
  border-left-color: var(--brand);
  font-weight: 600
}

.legal-body>section {
  padding: 38px 0;
  border-top: 1px solid var(--line)
}

.legal-body>section:first-child {
  padding-top: 8px;
  border-top: none
}

.legal-body h2 {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: -.025em
}

.legal-body h3 {
  font-family: var(--display);
  font-size: 16.5px;
  font-weight: 700;
  margin: 26px 0 8px
}

.legal-body p,
.legal-body li {
  font-size: 15px;
  color: var(--ink-2);
  max-width: 72ch
}

.legal-body p {
  margin: 0 0 14px
}

.legal-body ul,
.legal-body ol {
  margin: 0 0 16px;
  padding-left: 22px
}

.legal-body li {
  margin-bottom: 9px
}

.legal-body strong {
  color: var(--ink);
  font-weight: 600
}

/* --- 15. FAQ / details --------------------------------------------------- */
details.faq {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  margin: 0 auto 12px;
  box-shadow: var(--shadow-sm);
  max-width: 820px
}

section.band:has(>details.faq)>h2.h,
section.band:has(>details.faq)>.section-head {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto
}

section.band:has(>details.faq)>.faq-nav {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center
}

details.faq summary {
  padding: 18px 20px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center
}

details.faq summary::-webkit-details-marker {
  display: none
}

details.faq summary::after {
  content: "+";
  color: var(--brand);
  font-size: 22px;
  font-weight: 400;
  line-height: 1
}

details.faq[open] summary::after {
  content: "\2212"
}

details.faq .body {
  padding: 0 20px 20px;
  color: var(--ink-2);
  font-size: 14.5px
}

details.faq .body p {
  margin: 0 0 12px
}

details.faq .body p:last-child {
  margin-bottom: 0
}

.faq-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px
}

.faq-nav a {
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-ink);
  background: var(--brand-tint);
  border: 1px solid #d5e4fd;
  padding: 8px 15px;
  border-radius: 99px;
  text-decoration: none
}

.faq-nav a:hover {
  background: var(--brand);
  color: #fff
}

/* --- 16. Report cards ---------------------------------------------------- */
.comp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 16px
}

.comp {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s, transform .2s;
  text-decoration: none;
  color: inherit;
  display: block
}

.comp:hover {
  border-color: var(--brand);
  transform: translateY(-2px)
}

.comp .ch {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px
}

.comp .cn {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700
}

.comp .ctype {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px
}

.cscore {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap
}

.cscore.good {
  background: var(--ok-tint);
  color: var(--ok)
}

.cscore.mid {
  background: var(--warn-tint);
  color: var(--warn)
}

.cscore.bad {
  background: var(--bad-tint);
  color: var(--bad)
}

.ctags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0
}

.ctag {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--display);
  color: var(--ink-2);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 4px 9px;
  border-radius: 6px
}

.cmeta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 4px;
  flex-wrap: wrap
}

.cmeta b {
  color: var(--ink-2);
  font-weight: 600
}

/* --- 17. Recent searches table ------------------------------------------- */
.rs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 22px
}

.rs-filters .field {
  width: auto;
  min-width: 170px;
  padding: 9px 14px;
  font-size: 13.5px
}

.chipbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.chipbar button {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  background: var(--card);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  padding: 8px 15px;
  border-radius: 99px;
  cursor: pointer
}

.chipbar button[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff
}

.rs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm)
}

.rs-table th {
  text-align: left;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 18px;
  background: var(--bg);
  border-bottom: 1px solid var(--line)
}

.rs-table td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle
}

.rs-table tr:last-child td {
  border-bottom: none
}

.rs-table .dm {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none
}

.rs-table .dm:hover {
  color: var(--brand)
}

.rs-table .sm {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  margin-top: 2px
}

.rs-table .num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted)
}

@media(max-width:760px) {
  .rs-table thead {
    display: none
  }

  .rs-table,
  .rs-table tbody,
  .rs-table tr,
  .rs-table td {
    display: block;
    width: 100%
  }

  .rs-table tr {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line)
  }

  .rs-table td {
    padding: 3px 0;
    border: none
  }
}

.pager {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 26px;
  flex-wrap: wrap
}

.pager a,
.pager span {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 15px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  background: var(--card)
}

.pager a:hover {
  border-color: var(--brand);
  color: var(--brand-ink)
}

.pager .on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff
}

.pager .off {
  opacity: .45
}

/* --- 18. Article / post cards -------------------------------------------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
  gap: 20px
}

.post {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, transform .2s
}

.post:hover {
  border-color: var(--brand);
  transform: translateY(-2px)
}

.post .cat {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 10px
}

.post h3 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 9px;
  line-height: 1.32
}

.post p {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--ink-2)
}

.post .pmeta {
  margin-top: auto;
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  gap: 14px;
  flex-wrap: wrap
}

.post-lead {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 30px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s
}

a.post-lead:hover {
  border-color: var(--brand)
}

.post-lead .cat {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 10px
}

.post-lead .pmeta {
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px
}

.post-lead .ticks {
  color: var(--ink-2)
}

.post-lead .ticks .ic {
  background: var(--brand-tint);
  color: var(--brand)
}

@media(max-width:820px) {
  .post-lead {
    grid-template-columns: 1fr
  }
}

.post-lead h3 {
  font-family: var(--display);
  font-size: 25px;
  font-weight: 800;
  margin: 10px 0 12px;
  line-height: 1.18;
  letter-spacing: -.025em
}

.post-lead p {
  font-size: 15.5px;
  color: var(--ink-2);
  margin: 0 0 16px
}

/* --- 19. Press / newsroom ------------------------------------------------ */
.press-list {
  display: grid;
  gap: 2px
}

.press {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 22px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  align-items: start
}

.press:last-child {
  border-bottom: none
}

.press .pd {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  padding-top: 3px
}

.press h3 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px
}

.press p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
  max-width: 70ch
}

.ptag {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--brand-tint);
  color: var(--brand-ink);
  white-space: nowrap
}

.ptag.data {
  background: var(--ok-tint);
  color: var(--ok)
}

.ptag.co {
  background: #eef2f7;
  color: var(--ink-2)
}

@media(max-width:760px) {
  .press {
    grid-template-columns: 1fr;
    gap: 8px
  }

  .press .ptag {
    justify-self: start
  }
}

/* --- 20. Careers --------------------------------------------------------- */
.job {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s
}

.job:hover {
  border-color: var(--brand)
}

.job h3 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 7px
}

.job .jmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13px;
  color: var(--muted)
}

.job .jgo {
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--brand-ink);
  white-space: nowrap
}

@media(max-width:640px) {
  .job {
    grid-template-columns: 1fr
  }
}

.valuegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 18px
}

.value {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  box-shadow: var(--shadow-sm)
}

.value h3 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px
}

.value p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2)
}

/* --- 21. Auth pages ------------------------------------------------------ */
.auth-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 44px 24px 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center
}

@media(max-width:860px) {
  .auth-wrap {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 30px
  }
}

.auth-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 32px;
  box-shadow: var(--shadow-lg)
}

@media(max-width:560px) {
  .auth-card {
    padding: 24px
  }
}

.auth-card h1 {
  font-family: var(--display);
  font-size: 25px;
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -.03em
}

.auth-card .sub {
  font-size: 14.5px;
  color: var(--muted);
  margin: 0 0 24px
}

.auth-alt {
  font-size: 14px;
  color: var(--muted);
  margin: 20px 0 0;
  text-align: center
}

.auth-side h2 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: -.02em
}

.auth-side p {
  font-size: 15px;
  color: var(--ink-2);
  margin: 0 0 20px;
  max-width: 46ch
}

.pwmeter {
  height: 6px;
  border-radius: 99px;
  background: #e9eef5;
  overflow: hidden;
  margin-top: 9px
}

.pwmeter i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--bad);
  transition: width .25s, background .25s
}

.pwnote {
  font-size: 12px;
  color: var(--muted);
  margin: 7px 0 0
}

/* --- 22. Panels & stats -------------------------------------------------- */
.panel {
  background: linear-gradient(160deg, #0f172a, #1e293b);
  color: #fff;
  border-radius: var(--r);
  padding: 38px 40px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 38px;
  align-items: center
}

@media(max-width:860px) {
  .panel {
    grid-template-columns: 1fr;
    padding: 30px 26px
  }
}

.panel h2 {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: -.03em;
  color: #fff
}

.panel p {
  margin: 0;
  font-size: 15px;
  color: #cbd5e1;
  max-width: 52ch
}

.panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  font-size: 14.5px;
  color: #e2e8f0
}

.panel li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 11px;
  align-items: start
}

.panel .tk {
  color: #4ade80;
  font-weight: 700
}

.panel .btn {
  margin-top: 20px
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px
}

@media(max-width:640px) {
  .stats {
    grid-template-columns: repeat(2, 1fr)
  }
}

.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  text-align: center;
  box-shadow: var(--shadow-sm)
}

.stat .v {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1
}

.stat .l {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 7px
}

/* --- 23. Contact channels ------------------------------------------------ */
.chan {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

@media(max-width:1000px) {
  .chan {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:640px) {
  .chan {
    grid-template-columns: 1fr
  }
}

.chancard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column
}

.chancard .sla {
  margin-top: auto;
  padding-top: 14px
}

.chancard p:last-of-type {
  margin-bottom: 14px
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 28px;
  align-items: start
}

@media(max-width:900px) {
  .contact-grid {
    grid-template-columns: 1fr
  }
}

.chancard h3 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px
}

.chancard p {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--ink-2)
}

.chancard .addr {
  font-size: 14px;
  color: var(--ink-2);
  font-style: normal;
  line-height: 1.7
}

.chancard a {
  font-weight: 600;
  text-decoration: none
}

.chancard a:hover {
  text-decoration: underline
}

.sla {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 11px;
  margin-top: 14px;
  display: block
}

/* --- 24. Team ------------------------------------------------------------ */
.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 16px
}

.person {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-sm)
}

.person .av {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), #60a5fa);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 12px
}

.person .av-photo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  margin-bottom: 12px
}

.person h3,
.person h4 {
  font-family: var(--display);
  margin: 0;
  font-size: 15px;
  font-weight: 700
}

.person .role {
  font-size: 12.5px;
  color: var(--brand-ink);
  font-weight: 600;
  margin: 3px 0 9px
}

.person p {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0
}

/* --- 25. Timeline -------------------------------------------------------- */
.tl {
  list-style: none;
  margin: 24px 0 0;
  padding: 0
}

.tl li {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 22px;
  padding: 0 0 22px;
  border-left: 2px solid var(--line);
  margin-left: 8px;
  padding-left: 26px;
  position: relative
}

.tl li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--brand)
}

.tl li:last-child {
  border-left-color: transparent;
  padding-bottom: 0
}

.tl .yr {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-ink)
}

.tl p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-2)
}

@media(max-width:600px) {
  .tl li {
    grid-template-columns: 1fr;
    gap: 4px
  }
}

/* --- 27. Tag cloud ------------------------------------------------------- */
.tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px
}

.tagcloud a {
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-ink);
  background: var(--brand-tint);
  border: 1px solid #d5e4fd;
  padding: 8px 15px;
  border-radius: 99px;
  text-decoration: none;
  transition: all .2s
}

.tagcloud a:hover {
  background: var(--brand);
  color: #fff
}

.tagcloud a .cnt {
  opacity: .6;
  font-family: var(--mono);
  font-size: 11px;
  margin-left: 5px
}

/* --- 28. Footer ---------------------------------------------------------- */
footer.site {
  background: var(--ink);
  color: #94a3b8;
  padding: 52px 0 32px;
  margin-top: 8px
}

footer.site .cols {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 32px
}

@media(max-width:860px) {
  footer.site .cols {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:560px) {
  footer.site .cols {
    grid-template-columns: 1fr
  }
}

footer.site a {
  color: #94a3b8;
  text-decoration: none
}

footer.site a:hover {
  color: #fff
}

footer.site h4 {
  font-family: var(--display);
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 14px
}

footer.site ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: 14px
}

@media(max-width:760px) {
  footer.site ul {
    gap: 4px
  }

  footer.site ul a {
    display: inline-block;
    padding: 9px 0
  }

  .fbottom ul {
    gap: 10px 18px
  }

  .fbottom ul a {
    display: inline-block;
    padding: 7px 0
  }
}

footer.site .brand {
  color: #fff
}

footer.site .fabout {
  max-width: 36ch;
  margin-top: 14px;
  font-size: 14px
}

footer.site .faddr {
  font-style: normal;
  font-size: 13px;
  color: #64748b;
  margin-top: 16px;
  line-height: 1.65
}

.grievance {
  margin-top: 30px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.7
}

.grievance b {
  color: #e2e8f0;
  font-weight: 600
}

.grievance a {
  text-decoration: underline
}

.legal {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.7
}

.legal a {
  text-decoration: underline
}

.fbottom {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: 12.5px;
  color: #64748b
}

.fbottom ul {
  display: flex;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap
}

/* --- 29. Motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto
  }
}

/* ==========================================================================
   PART 2 — components used by the homepage, checker, methodology and
   report pages. Merged in from the standalone builds so every page in the
   site now shares one stylesheet.
   ========================================================================== */

/* --- 30. Dark hero (homepage) -------------------------------------------- */
.hero-dark {
  background: linear-gradient(160deg, #0f172a 0%, #16233c 55%, #1e293b 100%);
  color: #fff;
  position: relative;
  overflow: hidden
}

.hero-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(680px 340px at 50% -8%, rgba(37, 99, 235, .32), transparent 70%);
  pointer-events: none
}

.hero-dark .inner {
  position: relative;
  z-index: 1;
  padding: 78px 0 66px;
  text-align: center
}

.hero-dark h1 {
  font-size: clamp(36px, 5.6vw, 58px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.04em;
  margin: 0 auto 18px;
  max-width: 19ch;
  color: #fff
}

.hero-dark .sub {
  font-size: 17.5px;
  color: #c3cfe0;
  max-width: 60ch;
  margin: 0 auto 34px
}

.hero-dark .checkfield {
  border: 1px solid transparent;
  box-shadow: 0 18px 44px rgba(2, 8, 23, .42)
}

.hero-dark .checkfield:focus-within {
  border-color: #60a5fa
}

.hero-dark .form-note {
  color: #94a3b8
}

.hero-dark .form-note.err {
  color: #fca5a5
}

.altline {
  margin: 26px 0 0;
  font-size: 14.5px;
  color: #94a3b8
}

.altline a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  padding-bottom: 2px
}

.altline a:hover {
  border-bottom-color: #fff
}

.srcstrip {
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: 52px;
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
  justify-content: center;
  font-size: 13px;
  color: #94a3b8
}

.srcstrip b {
  color: #e2e8f0;
  font-weight: 600;
  font-family: var(--display)
}

/* --- 31. Light hero (checker + report pages) ----------------------------- */
.hero-light {
  padding: 34px 0 8px;
  text-align: center
}

.hero-light h1.home {
  margin: 0 auto 14px;
  max-width: 18ch;
  font-size: clamp(36px, 5.6vw, 56px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.04em
}

.hero-light .sub {
  font-size: 17.5px;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 auto 34px
}

.toolkicker {
  display: inline-block;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand-ink);
  background: var(--brand-tint);
  border: 1px solid #d5e4fd;
  padding: 5px 14px;
  border-radius: 99px;
  margin: 0 0 18px
}

.tries {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--muted);
  display: flex;
  gap: 9px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center
}

.tries a {
  color: var(--brand-ink);
  text-decoration: none;
  font-weight: 600;
  background: var(--brand-tint);
  border: 1px solid #d5e4fd;
  padding: 5px 12px;
  border-radius: 99px
}

.tries a:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand)
}

h1.report-title {
  margin: 18px 0 8px;
  line-height: 1.02
}

h1 .report-title-domain {
  display: block;
  font-size: clamp(28px, 7.5vw, 78px);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--ink);
  overflow-wrap: anywhere;
  word-break: break-word
}

h1 .report-title-domain .tld {
  color: var(--brand)
}

h1 .report-title-sub {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 20px;
  letter-spacing: 0;
  font-family: var(--sans)
}

.hero-meta {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 16px;
  display: flex;
  gap: 8px 18px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center
}

.hero-meta a {
  color: var(--brand);
  text-decoration: none;
  font-weight: 600
}

.hero-meta .ok {
  color: var(--ok);
  font-weight: 600
}

.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 22px
}

.hero-actions a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, background .2s, border-color .2s, color .2s
}

.hero-actions a:hover {
  transform: translateY(-1px)
}

.hero-actions .visit {
  background: var(--brand);
  color: #fff
}

.hero-actions .visit:hover {
  background: var(--brand-ink)
}

.hero-actions .discuss {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line-2)
}

.hero-actions .discuss:hover {
  border-color: var(--brand);
  color: var(--brand-ink)
}

.hero-actions .cnt {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 7px
}

.hero-actions .ext {
  font-size: 12px;
  opacity: .85
}

/* --- 32. Score scale (segbar) -------------------------------------------- */
.scale-wrap {
  max-width: 900px;
  margin: 58px auto 0
}

.verdict {
  max-width: 900px;
  margin: 30px auto 0
}

.segbar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  align-items: end;
  height: 64px
}

.seg {
  position: relative;
  border-radius: 6px;
  height: 26px;
  opacity: .34;
  transition: all .45s cubic-bezier(.2, .7, .3, 1)
}

.seg[data-i="1"] {
  background: var(--seg-1)
}

.seg[data-i="2"] {
  background: var(--seg-2)
}

.seg[data-i="3"] {
  background: var(--seg-3)
}

.seg[data-i="4"] {
  background: var(--seg-4)
}

.seg[data-i="5"] {
  background: var(--seg-5)
}

.seg.active {
  opacity: 1;
  height: 60px;
  box-shadow: var(--shadow-lg)
}

.seg .rng {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap
}

.seg .tick {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .4s
}

.seg.active .tick {
  opacity: 1
}

.seglabels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  margin-top: 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  text-align: center;
  font-family: var(--display)
}

.seglabels span.on {
  color: var(--ink)
}

.scale-cap {
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
  margin: 20px auto 0;
  max-width: 60ch
}

.js-anim .seg {
  height: 8px;
  opacity: 0;
  transition: height .55s cubic-bezier(.2, .7, .3, 1), opacity .4s ease
}

.js-anim .seg.up {
  opacity: .34
}

.js-anim .seg[data-i="1"].up {
  height: 26px
}

.js-anim .seg[data-i="2"].up {
  height: 34px
}

.js-anim .seg[data-i="3"].up {
  height: 42px
}

.js-anim .seg[data-i="4"].up {
  height: 53px
}

.js-anim .seg[data-i="5"].up {
  height: 64px
}

/* --- 33. Tool cards ------------------------------------------------------ */
.tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr));
  gap: 18px
}

.tool {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, transform .2s
}

a.tool:hover {
  border-color: var(--brand);
  transform: translateY(-2px)
}

.tool .ic {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 19px;
  margin-bottom: 15px;
  background: var(--brand-tint);
  color: var(--brand)
}

.tool .ic.g {
  background: var(--ok-tint);
  color: var(--ok)
}

.tool .ic.w {
  background: var(--warn-tint);
  color: var(--warn)
}

.tool .ic.r {
  background: var(--bad-tint);
  color: var(--bad)
}

.tool h3 {
  font-family: var(--display);
  font-size: 16.5px;
  font-weight: 700;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap
}

.tool p {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--ink-2)
}

.tool .go {
  margin-top: auto;
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--brand-ink)
}

.tool.dim {
  opacity: .72
}

.tool.dim .go {
  color: var(--muted)
}

/* --- 34. Audience cards -------------------------------------------------- */
.aud {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 30px;
  box-shadow: var(--shadow-sm)
}

.aud.owner {
  border-color: #bfe6d3;
  background: linear-gradient(180deg, var(--ok-tint), #fff 38%)
}

.aud .who {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--brand-tint);
  color: var(--brand-ink);
  display: inline-block;
  margin-bottom: 14px
}

.aud.owner .who {
  background: var(--ok-tint);
  color: var(--ok)
}

.aud h3 {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  margin: 0 0 10px
}

.aud>p {
  margin: 0 0 20px;
  font-size: 15px;
  color: var(--ink-2)
}

.aud.owner .ticks .ic {
  background: var(--ok-tint);
  color: var(--ok)
}

/* --- 35. Flow steps ------------------------------------------------------ */
.flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 18px;
  margin-top: 6px
}

.fstep {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  box-shadow: var(--shadow-sm)
}

.fstep .n {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-ink);
  background: var(--brand-tint);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  margin-bottom: 14px
}

.fstep h3 {
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 700;
  margin: 0 0 7px
}

.fstep p {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted)
}

.fstep.human .n {
  background: var(--ok-tint);
  color: var(--ok)
}

/* --- 37. Report page: layout, readout, facts ----------------------------- */
.layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 300px;
  gap: 36px;
  margin-top: 32px;
  align-items: start
}

@media(max-width:1080px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 300px
  }

  .layout .toc-rail {
    display: none
  }
}

@media(max-width:900px) {
  .layout {
    grid-template-columns: minmax(0, 1fr)
  }
}

.readout {
  background: linear-gradient(160deg, #0f172a, #1e293b);
  color: #fff;
  border-radius: var(--r);
  padding: 26px;
  text-align: center;
  box-shadow: var(--shadow)
}

.readout .num {
  font-family: var(--display);
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em
}

.readout .num small {
  font-size: 20px;
  font-weight: 600;
  color: #94a3b8
}

.readout .scale {
  font-size: 11.5px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 6px;
  font-family: var(--display);
  font-weight: 600
}

.meter {
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .12);
  margin: 18px 0 8px;
  overflow: hidden
}

.meter i {
  display: block;
  height: 100%;
  width: 75%;
  background: linear-gradient(90deg, var(--seg-3), var(--seg-4));
  border-radius: 99px
}

.readout .note {
  font-size: 12.5px;
  color: #cbd5e1;
  margin: 14px 0 0;
  line-height: 1.5
}

.readout .btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  border-radius: 9px;
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 700
}

.readout .btn.solid {
  background: var(--brand);
  color: #fff;
  border: none
}

.readout .btn.line {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2)
}

.facts {
  margin-top: 20px
}

.facts .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px
}

.facts .row:last-child {
  border-bottom: none
}

.facts .k {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500
}

.facts .v {
  font-weight: 600;
  text-align: right
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 8px;
  margin-bottom: 16px
}

.chip.ok {
  color: var(--ok);
  background: var(--ok-tint)
}

.chip.warn {
  color: var(--warn);
  background: var(--warn-tint)
}

.chip.bad {
  color: var(--bad);
  background: var(--bad-tint)
}

.chip .d {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor
}

.sig {
  list-style: none;
  margin: 16px 0 0;
  padding: 0
}

.sig li {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  align-items: center
}

.sig li:last-child {
  border-bottom: none
}

.sig .ic {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700
}

.sig .ic.ok {
  background: var(--ok-tint);
  color: var(--ok)
}

.sig .ic.warn {
  background: var(--warn-tint);
  color: var(--warn)
}

.sig .ic.bad {
  background: var(--bad-tint);
  color: var(--bad)
}

.sig .ic.unknown {
  background: var(--muted-tint);
  color: var(--muted)
}

.sig .lab {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em
}

.tech-card {
  padding: 22px
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px 24px
}

.tech-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0
}

.tech-k {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500
}

.tech-v {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: break-word
}

.tech-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line)
}

.tech-chips .chip {
  margin-bottom: 0
}

/* --- 38. Report page: manual review cards -------------------------------- */
.mgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 18px
}

.mcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
  position: relative
}

.mcard .mhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px
}

.mcard h3 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  margin: 0
}

.mcard p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2)
}

.mcard .kv {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 9px
}

.mcard .kv li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line)
}

.mcard .kv li:last-child {
  border-bottom: none;
  padding-bottom: 0
}

.mcard .kv .k {
  color: var(--muted)
}

.mcard .kv .v {
  font-weight: 600;
  font-family: var(--mono);
  font-size: 13px;
  text-align: right
}

.mcard .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 9px;
  vertical-align: 1px
}

.rate-badge {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap
}

.rate-badge.good {
  background: var(--ok-tint);
  color: var(--ok)
}

.rate-badge.mid {
  background: var(--warn-tint);
  color: var(--warn)
}

.rate-badge.bad {
  background: var(--bad-tint);
  color: var(--bad)
}

.rate-badge.neutral {
  background: var(--brand-tint);
  color: var(--brand-ink)
}

/* --- 39. Locked / Pro veil ----------------------------------------------- */
.locked {
  position: relative;
  overflow: hidden;
  min-height: 290px
}

.locked .veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, .94) 55%);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px
}

.locked .veil .inner {
  max-width: 280px
}

.locked .lock-ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--brand);
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  font-size: 20px
}

.locked .veil h4 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px
}

.locked .veil p {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 14px
}

.pro-badge {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff;
  background: var(--brand);
  padding: 3px 8px;
  border-radius: 5px;
  text-transform: uppercase
}

.blur-data {
  filter: blur(5px);
  pointer-events: none;
  user-select: none
}

/* --- 40. Link authority strip -------------------------------------------- */
.bl-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 18px
}

@media(max-width:640px) {
  .bl-strip {
    grid-template-columns: repeat(2, 1fr)
  }
}

.bl-metric {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow-sm)
}

.bl-metric .bv {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1
}

.bl-metric .bl {
  font-size: 11.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 6px;
  font-weight: 600;
  font-family: var(--display)
}

.bl-metric .bsub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px
}

.bl-metric .bv.grade-ok {
  color: var(--ok)
}

.bl-metric .bv.grade-mid {
  color: var(--warn)
}

.bl-metric .bv.grade-bad {
  color: var(--bad)
}

.powered {
  font-size: 12px;
  color: var(--muted);
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 7px
}

.powered b {
  color: var(--ink-2);
  font-weight: 700
}

/* --- 43. Methodology page ------------------------------------------------ */
.trig {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
  margin: 22px 0 6px
}

.trig .t {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-sm)
}

.trig .t h4 {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 7px
}

.trig .t p {
  font-size: 13.5px;
  margin: 0;
  color: var(--muted);
  max-width: none
}

.trig .t .who {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--brand-ink);
  background: var(--brand-tint);
  border-radius: 5px;
  padding: 2px 8px;
  display: inline-block;
  margin-bottom: 10px
}

.trig .t .who.man {
  color: var(--ok);
  background: var(--ok-tint)
}

.trig .t .thead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px
}

.trig .t .thead .vi {
  margin-bottom: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 18px
}

.trig .t .thead .who {
  margin-bottom: 0
}

.method-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 15px;
  border-radius: 99px;
  border: 1px solid;
  margin-bottom: 12px
}

.method-badge.auto {
  color: var(--ink-2);
  background: #eef2f7;
  border-color: var(--line-2)
}

.method-badge.expert {
  color: var(--ok);
  background: var(--ok-tint);
  border-color: #bfe6d3
}

.method-note {
  font-size: 12.5px;
  color: var(--muted);
  margin: 12px 0 0;
  max-width: 70ch;
  line-height: 1.55
}

.wgt {
  display: grid;
  gap: 16px;
  margin-top: 22px
}

.wrow {
  display: grid;
  grid-template-columns: 210px 1fr 52px;
  gap: 18px;
  align-items: center
}

@media(max-width:640px) {
  .wrow {
    grid-template-columns: 1fr 52px
  }

  .wrow .track {
    grid-column: 1/-1;
    order: 3
  }
}

.wrow .nm {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700
}

.wrow .nm span {
  display: block;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px
}

.track {
  height: 10px;
  border-radius: 99px;
  background: #e9eef5;
  overflow: hidden
}

.track i {
  display: block;
  height: 100%;
  border-radius: 99px
}

.wrow .pc {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  text-align: right
}

.doc-body>section {
  padding: 44px 0;
  border-top: 1px solid var(--line)
}

.doc-body .trig,
.doc-body .valuegrid,
.doc-body .team {
  grid-template-columns: repeat(2, 1fr)
}

@media(max-width:640px) {

  .doc-body .trig,
  .doc-body .valuegrid,
  .doc-body .team {
    grid-template-columns: 1fr
  }
}

.doc-body>section:first-child {
  padding-top: 6px;
  border-top: none
}

.doc-body p {
  font-size: 15.5px;
  color: var(--ink-2);
  max-width: 70ch;
  margin: 0 0 15px
}

.doc-body p.lede {
  font-size: 16.5px;
  color: var(--ink-2)
}

.doc-body strong {
  color: var(--ink);
  font-weight: 600
}

/* --- 44. Score band rows ------------------------------------------------- */
.bands {
  display: grid;
  gap: 10px
}

.band-row {
  display: grid;
  grid-template-columns: 6px 96px 168px 1fr;
  gap: 18px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: var(--shadow-sm)
}

.band-row .bar {
  width: 6px;
  height: 34px;
  border-radius: 99px
}

.band-row .rangev {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600
}

.band-row .nm {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700
}

.band-row .desc {
  font-size: 14px;
  color: var(--ink-2)
}

@media(max-width:760px) {
  .band-row {
    grid-template-columns: 6px 1fr;
    row-gap: 6px
  }

  .band-row .rangev,
  .band-row .nm,
  .band-row .desc {
    grid-column: 2
  }
}

/* --- 45. Tier cards (automated vs expert) -------------------------------- */
.tier {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px;
  box-shadow: var(--shadow-sm)
}

.tier.expert {
  border-color: #bfe6d3;
  background: linear-gradient(180deg, var(--ok-tint), #fff 42%)
}

.tier h3 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 8px
}

.tier p {
  margin: 0 0 16px;
  font-size: 14.5px;
  color: var(--ink-2)
}

/* --- 46. Dark CTA box ---------------------------------------------------- */
.cta-box {
  background: linear-gradient(160deg, #0f172a, #1e293b);
  color: #fff;
  border-radius: var(--r);
  padding: 34px 36px;
  box-shadow: var(--shadow);
  margin-top: 10px
}

.cta-box h3 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 10px;
  color: #fff;
  letter-spacing: -.03em
}

.cta-box p {
  color: #cbd5e1;
  font-size: 15px;
  margin: 0 0 20px;
  max-width: 56ch
}

.cta-box .btn-line {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .25)
}

.cta-box .btn-line:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff
}

/* --- 47. Aliases kept for pages migrated from the standalone builds ------ */
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px
}

@media(max-width:860px) {
  .two {
    grid-template-columns: 1fr
  }
}

.policy {
  background: linear-gradient(160deg, #0f172a, #1e293b);
  color: #fff;
  border-radius: var(--r);
  padding: 38px 40px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 38px;
  align-items: center
}

@media(max-width:860px) {
  .policy {
    grid-template-columns: 1fr;
    padding: 30px 26px
  }
}

.policy h2 {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: -.03em;
  color: #fff
}

.policy p {
  margin: 0;
  font-size: 15px;
  color: #cbd5e1;
  max-width: 52ch
}

.policy ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  font-size: 14.5px;
  color: #e2e8f0
}

.policy li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 11px;
  align-items: start
}

.policy .tk {
  color: #4ade80;
  font-weight: 700
}

.hero {
  padding: 26px 0 10px;
  text-align: center
}

.checkbox-form {
  max-width: 660px;
  margin: 0 auto
}

.dtable .freq {
  font-family: var(--mono);
  font-size: 12.5px;
  white-space: nowrap
}

/* --- 48. Pricing --------------------------------------------------------- */
.billtoggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 99px;
  padding: 4px;
  margin: 22px auto 0;
  box-shadow: var(--shadow-sm)
}

.billtoggle button {
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 700;
  border: none;
  background: none;
  color: var(--muted);
  padding: 9px 20px;
  border-radius: 99px;
  cursor: pointer;
  transition: background .2s, color .2s
}

.billtoggle button[aria-pressed="true"] {
  background: var(--brand);
  color: #fff
}

.billtoggle .save {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ok);
  background: var(--ok-tint);
  border-radius: 5px;
  padding: 2px 7px;
  margin-left: 7px
}

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start
}

@media(max-width:960px) {
  .plans {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto
  }
}

.plan {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative
}

.plan.featured {
  border-color: var(--brand);
  box-shadow: var(--shadow-lg)
}

.plan .flag {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: var(--brand);
  color: #fff;
  padding: 4px 12px;
  border-radius: 99px;
  white-space: nowrap
}

.plan h3 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 6px
}

.plan .who {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0 0 20px;
  min-height: 40px
}

.plan .amt {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap
}

.plan .amt .cur {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-2)
}

.plan .amt .num {
  font-family: var(--display);
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1
}

.plan .amt .per {
  font-size: 13.5px;
  color: var(--muted);
  font-weight: 500
}

.plan .billed {
  font-size: 12.5px;
  color: var(--muted);
  margin: 8px 0 0;
  min-height: 18px
}

.plan .btn {
  margin: 22px 0 0
}

.plan .inc {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 26px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line)
}

.plan ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
  font-size: 14px;
  color: var(--ink-2)
}

.plan li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start
}

.plan li .t {
  color: var(--ok);
  font-weight: 700;
  line-height: 1.4
}

.plan li .x {
  color: #cbd5e1;
  font-weight: 700;
  line-height: 1.4
}

.plan li.off {
  color: var(--muted)
}

.plan li b {
  color: var(--ink);
  font-weight: 600
}

.cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm)
}

.cmp th {
  text-align: left;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 15px 18px;
  background: var(--bg);
  border-bottom: 1px solid var(--line)
}

.cmp th.c,
.cmp td.c {
  text-align: center;
  width: 150px
}

.cmp td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2)
}

.cmp tr:last-child td {
  border-bottom: none
}

.cmp td:first-child {
  color: var(--ink);
  font-weight: 600
}

.cmp .grp td {
  background: var(--bg);
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted)
}

.cmp .y {
  color: var(--ok);
  font-weight: 700
}

.cmp .n {
  color: #cbd5e1;
  font-weight: 700
}

@media(max-width:760px) {
  .cmp-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
  }

  .cmp {
    min-width: 620px
  }
}

.emergency {
  border: 1px solid #f4dcae;
  background: linear-gradient(180deg, var(--warn-tint), #fff 55%);
  border-radius: var(--r);
  padding: 30px;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  align-items: center
}

@media(max-width:820px) {
  .emergency {
    grid-template-columns: 1fr;
    padding: 24px
  }
}

.emergency h2 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 10px;
  letter-spacing: -.025em
}

.emergency p {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--ink-2);
  max-width: 56ch
}

.emergency .pricebox {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 22px;
  text-align: center
}

.emergency .pricebox .num {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1
}

.emergency .pricebox .lbl {
  font-size: 12.5px;
  color: var(--muted);
  margin: 6px 0 16px
}

/* ==========================================================================
   PART 3 — Global enhancements: icon integration, card polish, alignment
   fixes and visual consistency across all pages.
   ========================================================================== */

/* --- 49. Phosphor icon baseline ------------------------------------------ */
.ph {
  vertical-align: -.125em
}

/* --- 50. Note callout accents -------------------------------------------- */
.note.info {
  border-left: 4px solid var(--brand)
}

.note.warn {
  border-left: 4px solid var(--warn)
}

.note.ok {
  border-left: 4px solid var(--ok)
}

.note.bad {
  border-left: 4px solid var(--bad)
}

/* --- 51. Audience card button alignment ---------------------------------- */
.aud {
  display: flex;
  flex-direction: column
}

.aud .ticks {
  margin-bottom: 24px
}

.aud>.btn {
  margin-top: auto;
  align-self: flex-start
}

/* --- 52. Value card polish ----------------------------------------------- */
.value {
  transition: border-color .2s, transform .2s
}

.value:hover {
  border-color: var(--brand);
  transform: translateY(-2px)
}

.vi {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 21px;
  margin-bottom: 14px;
  background: var(--brand-tint);
  color: var(--brand)
}

.vi.g {
  background: var(--ok-tint);
  color: var(--ok)
}

.vi.w {
  background: var(--warn-tint);
  color: var(--warn)
}

.vi.r {
  background: var(--bad-tint);
  color: var(--bad)
}

/* --- 53. Channel card polish --------------------------------------------- */
.chancard {
  transition: border-color .2s, transform .2s
}

.chancard:hover {
  border-color: var(--brand);
  transform: translateY(-1px)
}

.chancard .ci {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 20px;
  margin-bottom: 12px
}

.chancard .ci {
  background: var(--brand-tint);
  color: var(--brand)
}

.chancard .ci.g {
  background: var(--ok-tint);
  color: var(--ok)
}

.chancard .ci.w {
  background: var(--warn-tint);
  color: var(--warn)
}

/* --- 54. Person card hover ----------------------------------------------- */
.person {
  transition: border-color .2s, transform .2s
}

.person:hover {
  border-color: var(--brand);
  transform: translateY(-1px)
}

/* --- 55. Flow step hover ------------------------------------------------- */
.fstep {
  transition: border-color .2s, transform .2s
}

.fstep:hover {
  border-color: var(--brand);
  transform: translateY(-2px)
}

/* --- 56. Generic card hover ---------------------------------------------- */
.card.pad {
  transition: border-color .2s, transform .2s
}

.card.pad:hover {
  border-color: var(--line-2);
  transform: translateY(-1px)
}

/* --- 57. Job listing polish ---------------------------------------------- */
.job .jgo {
  display: inline-flex;
  align-items: center;
  gap: 5px
}

/* --- 58. Empty state ----------------------------------------------------- */
.empty-box {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
  border: 2px dashed var(--line-2);
  border-radius: var(--r);
  background: var(--card)
}

.empty-box .ph {
  font-size: 36px;
  color: var(--line-2);
  display: block;
  margin-bottom: 10px
}

.empty-box p {
  margin: 0;
  font-size: 15px
}

.empty-box a {
  font-weight: 600
}

/* --- 59. Document layout (methodology, legal-like pages) ----------------- */
.doc-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 48px;
  margin-top: 34px;
  padding-bottom: 56px;
  align-items: start
}

@media(max-width:1000px) {
  .doc-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0
  }

  .doc-layout>.toc-rail {
    display: none
  }
}

/* --- 60. Panel button group ---------------------------------------------- */
.panel .pbtn {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap
}

/* --- 61. Source strip icons ---------------------------------------------- */
.srcstrip .ph {
  font-size: 15px;
  opacity: .65;
  margin-right: 2px
}

/* --- 62. Tick-list icon slot for phosphor -------------------------------- */
.ticks .ic .ph {
  font-size: 14px
}

/* --- 63. Section kicker with icon --------------------------------------- */
.kicker .ph {
  margin-right: 4px;
  font-size: 13px;
  vertical-align: -1px
}

/* --- 64. Article body (blog posts + newsroom articles) ------------------- */
/* Covers the full CKEditor 5 output vocabulary: headings, lists (incl. todo),
   quotes, code, images (all alignment styles), media embeds, highlights,
   font-size classes, hr, and tables with or without a <thead>. */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 13px;
  color: var(--muted);
  margin-top: 20px
}

.article-body {
  max-width: 720px;
  min-width: 0
}

.report-html {
  max-width: none
}

.report-html:empty {
  display: none
}

.article-body>:first-child {
  margin-top: 0
}

.article-body::after {
  content: "";
  display: block;
  clear: both
}

/* Headings */
.article-body h1 {
  font-family: var(--display);
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 1.8em 0 .6em;
  scroll-margin-top: 84px
}

.article-body h2 {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -.025em;
  margin: 2.2em 0 .7em;
  scroll-margin-top: 84px
}

.article-body h3 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  margin: 1.8em 0 .5em;
  scroll-margin-top: 84px
}

.article-body h4 {
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 700;
  margin: 1.6em 0 .5em;
  scroll-margin-top: 84px
}

.article-body h5,
.article-body h6 {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 1.6em 0 .5em
}

/* Text */
.article-body p {
  margin: 0 0 1.1em;
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.75
}

.article-body a {
  color: var(--brand-ink);
  text-decoration: underline;
  text-underline-offset: 2px
}

.article-body strong {
  color: var(--ink);
  font-weight: 600
}

.article-body u {
  text-underline-offset: 2px
}

.article-body s {
  color: var(--muted)
}

.article-body sub,
.article-body sup {
  font-size: .72em;
  line-height: 1
}

.article-body hr {
  border: none;
  border-top: 1px solid var(--line-2);
  margin: 2.4em 0
}

/* CKEditor font-size classes */
.article-body .text-tiny {
  font-size: .7em
}

.article-body .text-small {
  font-size: .85em
}

.article-body .text-big {
  font-size: 1.4em
}

.article-body .text-huge {
  font-size: 1.8em
}

/* Highlights (CKEditor marker/pen classes) + native mark */
.article-body mark {
  border-radius: 3px;
  padding: 0 2px
}

.article-body .marker-yellow {
  background-color: #fdfd77
}

.article-body .marker-green {
  background-color: #63f963
}

.article-body .marker-pink {
  background-color: #fc7999
}

.article-body .marker-blue {
  background-color: #72cdfd
}

.article-body .pen-red {
  color: #e71313;
  background: none
}

.article-body .pen-green {
  color: #128a00;
  background: none
}

/* Lists */
.article-body ul,
.article-body ol {
  margin: 0 0 1.1em;
  padding-left: 1.5em;
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.75
}

.article-body li {
  margin-bottom: .4em
}

.article-body li>ul,
.article-body li>ol {
  margin: .4em 0 0
}

.article-body .todo-list {
  list-style: none;
  padding-left: .2em
}

.article-body .todo-list li {
  display: flex;
  gap: 9px;
  align-items: baseline
}

.article-body .todo-list input[type="checkbox"] {
  accent-color: var(--brand);
  transform: translateY(2px)
}

/* Quote */
.article-body blockquote {
  border-left: 3px solid var(--brand);
  padding: .8em 1.2em;
  margin: 1.5em 0;
  background: var(--brand-tint);
  border-radius: 6px;
  font-style: normal
}

.article-body blockquote p:last-child {
  margin-bottom: 0
}

/* Code */
.article-body code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px
}

.article-body pre {
  overflow-x: auto;
  padding: 1em 1.2em;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 1.5em 0;
  font-size: 13px;
  line-height: 1.6
}

.article-body pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit
}

/* Images (figure.image + CKEditor alignment/resize styles) */
.article-body img {
  border-radius: 8px
}

.article-body>p>img {
  margin: 1.5em 0
}

.article-body figure.image {
  display: table;
  margin: 1.8em auto;
  max-width: 100%
}

.article-body figure.image img {
  display: block;
  margin: 0
}

.article-body figure.image figcaption,
.article-body figure.table figcaption {
  display: table-caption;
  caption-side: bottom;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  padding: 10px 6px 0;
  line-height: 1.5
}

.article-body .image-style-align-left {
  float: left;
  margin: .4em 1.6em 1em 0;
  max-width: 50%
}

.article-body .image-style-align-right,
.article-body .image-style-side {
  float: right;
  margin: .4em 0 1em 1.6em;
  max-width: 50%
}

.article-body .image-style-align-center {
  margin-left: auto;
  margin-right: auto
}

.article-body .image-style-block-align-left {
  margin-left: 0;
  margin-right: auto
}

.article-body .image-style-block-align-right {
  margin-left: auto;
  margin-right: 0
}

.article-body .image_resized {
  max-width: 100%
}

.article-body .image_resized img {
  width: 100%
}

/* Media embeds */
.article-body figure.media {
  margin: 1.8em 0
}

.article-body iframe {
  max-width: 100%;
  border: none;
  border-radius: 8px
}

/* Tables — works with or without <thead>: any th renders as a header cell,
   and header-less tables fall back to clean zebra rows. */
.article-body figure.table {
  margin: 1.8em 0;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow-sm)
}

.article-body figure.table>table {
  margin: 0;
  border: none;
  box-shadow: none
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8em 0;
  font-size: 14.5px;
  background: var(--card);
  border: 1px solid var(--line)
}

.article-body th,
.article-body td {
  padding: 11px 14px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
  color: var(--ink-2)
}

.article-body th {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg)
}

.article-body thead th {
  border-bottom: 1px solid var(--line-2)
}

.article-body tbody tr:nth-child(even) td {
  background: #fafbfd
}

.article-body tbody tr:first-child th {
  border-bottom: 1px solid var(--line-2)
}

.article-body td p,
.article-body th p {
  margin: 0;
  font-size: inherit
}

/* --- 65. Discussion threads (report, blog + profile pages) ---------------- */
.review-list {
  margin-bottom: 32px
}

.review-list .card {
  margin-bottom: 16px
}

.rev-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px
}

.rev-head .rname {
  font-weight: 600;
  color: var(--ink)
}

.rev-head time {
  font-size: 13px;
  color: var(--muted)
}

.rev-body {
  margin: 0;
  color: var(--ink-2)
}

.reply-toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 10px 0 0;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-ink);
  cursor: pointer
}

.reply-toggle:hover {
  text-decoration: underline
}

.reply-form {
  margin-top: 12px
}

.replies {
  margin-top: 16px;
  display: grid;
  gap: 14px
}

.reply {
  border-left: 3px solid var(--line);
  padding: 2px 0 2px 16px
}

.reply .rev-head {
  margin-bottom: 5px
}

.reply .rev-body {
  font-size: 14px
}

/* --- 66. Account / formcard headings ------------------------------------- */
.formcard h2 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 18px
}

.field:disabled {
  background: var(--bg);
  color: var(--muted)
}

.acct-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px
}

.acct-nav a {
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-ink);
  background: var(--brand-tint);
  border: 1px solid #d5e4fd;
  padding: 8px 15px;
  border-radius: 99px;
  text-decoration: none
}

.acct-nav a:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff
}

.acct-nav a.on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff
}

/* --- 67. Blog card thumbnails -------------------------------------------- */
.post .pthumb {
  margin: -22px -22px 16px
}

.post .pthumb img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 11px 11px 0 0;
  display: block
}

.post-lead .plmedia {
  align-self: stretch
}

.post-lead .plmedia img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  max-height: 300px;
  object-fit: cover;
  border-radius: 12px;
  display: block
}

.post-lead.no-media {
  grid-template-columns: 1fr
}

@media(max-width:820px) {
  .post-lead .plmedia {
    order: -1
  }

  .post-lead .plmedia img {
    min-height: 0;
    max-height: 220px
  }
}

/* --- 68. Dark panel actions: text left, actions right, vertically centered - */
.panel>div:has(>.btn:only-child) {
  text-align: right
}

.panel>div:has(>.btn:only-child) .btn {
  margin-top: 0
}

.panel .pbtn {
  justify-content: flex-end
}

.panel .subrow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px
}

.panel .subrow .field {
  flex: 1;
  min-width: 200px
}

.panel .subrow .btn {
  margin-top: 0
}

@media(max-width:860px) {
  .panel>div:has(>.btn:only-child) {
    text-align: left
  }

  .panel .pbtn {
    justify-content: flex-start
  }
}

/* --- 69a. Compact form variant ------------------------------------------- */
.formcard.compact {
  padding: 26px 30px
}

.formcard.compact .fgroup {
  margin-bottom: 13px
}

.formcard.compact .field {
  padding: 10px 14px;
  font-size: 14.5px
}

.formcard.compact select.field {
  background-position: right 14px center
}

.formcard.compact textarea.field {
  min-height: 92px
}

.formcard.compact .fl {
  margin-bottom: 5px
}

.formcard.compact .fhelp {
  margin-top: 4px
}

.formcard.compact .checkline {
  margin-bottom: 10px
}

/* --- 69. Steps: full-width timeline on wide pages ------------------------- */
/* Step text fills the section width under a centered heading; the
   methodology doc body keeps its own narrow reading column. */
@media(min-width:900px) {
  .steps p {
    max-width: none
  }

  .doc-body .steps p {
    max-width: 66ch
  }
}