/* ─── How-To Article Layout ─────────────────────────────────────── */

.howto-breadcrumb-bar {
  background: var(--mk-cream);
  border-bottom: 1px solid var(--mk-line);
  padding: 0.65rem 0;
}

.howto-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--mk-muted);
}

.howto-breadcrumb li + li::before {
  content: "\203A";
  color: var(--mk-line);
  font-size: 1rem;
}

.howto-breadcrumb a {
  color: var(--mk-sage-dark);
  text-decoration: none;
}

.howto-breadcrumb a:hover {
  color: var(--mk-navy);
  text-decoration: underline;
}

.howto-breadcrumb [aria-current="page"] {
  color: var(--mk-navy);
}

/* ─── Two-column layout ─────────────────────────────────────────── */

.howto-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 3rem;
  align-items: start;
  padding-top: 3rem;
  padding-bottom: 4rem;
}

@media (max-width: 991.98px) {
  .howto-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ─── Article header ────────────────────────────────────────────── */

.howto-header {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid var(--mk-line);
}

.howto-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.1;
  max-width: none;
  margin: 0.5rem 0 1rem;
}

.howto-intro {
  font-size: 1.1rem;
  color: #48423b;
  max-width: 62ch;
  margin-bottom: 1.25rem;
}

.howto-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.howto-meta-chip {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--mk-sage);
  color: var(--mk-navy);
  font-size: 0.8rem;
  font-weight: 800;
}

/* ─── Steps list ────────────────────────────────────────────────── */

.howto-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.howto-step-card {
  background: var(--mk-cream);
  border: 1px solid var(--mk-line);
  border-radius: 16px;
  overflow: hidden;
}

/* ─── Step image ────────────────────────────────────────────────── */

.howto-step-image-wrap,
.howto-step-image-wrapX {
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--mk-sage);
}

.howto-step-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.howto-step-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder gradients until real photos are added */
.howto-step-image--unit {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.18), transparent),
    linear-gradient(to bottom right, #bcc2aa, #8f9775);
}
.howto-step-image--locations {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.12), transparent),
    linear-gradient(to bottom right, #c9cdb9, #bcc2aa);
}
.howto-step-image--thermostat {
  background:
    linear-gradient(135deg, rgba(60,29,45,0.15), transparent),
    linear-gradient(to bottom right, #d4cfc6, #bcc2aa);
}
.howto-step-image--remove {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.15), transparent),
    linear-gradient(to bottom right, #c1ab75, #bcc2aa);
}
.howto-step-image--merv {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.12), transparent),
    linear-gradient(to bottom right, #bcc2aa, #c1ab75);
}
.howto-step-image--install {
  background:
    linear-gradient(135deg, rgba(60,29,45,0.1), transparent),
    linear-gradient(to bottom right, #8f9775, #c9cdb9);
}
.howto-step-image--schedule {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.18), transparent),
    linear-gradient(to bottom right, #c9cdb9, #8f9775);
}
.howto-step-image--wh-shutoff {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.18), transparent),
    linear-gradient(to bottom right, #c1ab75, #8f9775);
}
.howto-step-image--wh-cool {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.12), transparent),
    linear-gradient(to bottom right, #c9cdb9, #c1ab75);
}
.howto-step-image--wh-hose {
  background:
    linear-gradient(135deg, rgba(60,29,45,0.15), transparent),
    linear-gradient(to bottom right, #bcc2aa, #c9cdb9);
}
.howto-step-image--wh-cold-off {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.15), transparent),
    linear-gradient(to bottom right, #c9cdb9, #8f9775);
}
.howto-step-image--wh-tap {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.15), transparent),
    linear-gradient(to bottom right, #8f9775, #bcc2aa);
}
.howto-step-image--wh-drain {
  background:
    linear-gradient(135deg, rgba(60,29,45,0.18), transparent),
    linear-gradient(to bottom right, #c1ab75, #bcc2aa);
}
.howto-step-image--wh-flush {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.12), transparent),
    linear-gradient(to bottom right, #bcc2aa, #8f9775);
}
.howto-step-image--wh-refill {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.15), transparent),
    linear-gradient(to bottom right, #c9cdb9, #c1ab75);
}
.howto-step-image--wh-reminder {
  background:
    linear-gradient(135deg, rgba(60,29,45,0.12), transparent),
    linear-gradient(to bottom right, #8f9775, #c9cdb9);
}
.howto-step-image--shutoff-why {
  background:
    linear-gradient(135deg, rgba(60,29,45,0.18), transparent),
    linear-gradient(to bottom right, #c1ab75, #bcc2aa);
}
.howto-step-image--shutoff-inside {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.15), transparent),
    linear-gradient(to bottom right, #8f9775, #c9cdb9);
}
.howto-step-image--shutoff-meter {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.12), transparent),
    linear-gradient(to bottom right, #c9cdb9, #8f9775);
}
.howto-step-image--shutoff-types {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.18), transparent),
    linear-gradient(to bottom right, #bcc2aa, #c1ab75);
}
.howto-step-image--shutoff-test {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.15), transparent),
    linear-gradient(to bottom right, #c1ab75, #8f9775);
}
.howto-step-image--shutoff-exercise {
  background:
    linear-gradient(135deg, rgba(60,29,45,0.12), transparent),
    linear-gradient(to bottom right, #bcc2aa, #c9cdb9);
}
.howto-step-image--shutoff-label {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.12), transparent),
    linear-gradient(to bottom right, #8f9775, #bcc2aa);
}
.howto-step-image--coils-why {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.15), transparent),
    linear-gradient(to bottom right, #c1ab75, #bcc2aa);
}
.howto-step-image--coils-locate {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.12), transparent),
    linear-gradient(to bottom right, #bcc2aa, #8f9775);
}
.howto-step-image--coils-unplug {
  background:
    linear-gradient(135deg, rgba(60,29,45,0.12), transparent),
    linear-gradient(to bottom right, #c9cdb9, #c1ab75);
}
.howto-step-image--coils-access {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.18), transparent),
    linear-gradient(to bottom right, #8f9775, #c9cdb9);
}
.howto-step-image--coils-clean {
  background:
    linear-gradient(135deg, rgba(60,29,45,0.15), transparent),
    linear-gradient(to bottom right, #c1ab75, #8f9775);
}
.howto-step-image--coils-restore {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.12), transparent),
    linear-gradient(to bottom right, #bcc2aa, #c1ab75);
}
.howto-step-image--gutters-when {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.18), transparent),
    linear-gradient(to bottom right, #8f9775, #bcc2aa);
}
.howto-step-image--gutters-ladder {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.15), transparent),
    linear-gradient(to bottom right, #c9cdb9, #8f9775);
}
.howto-step-image--gutters-gear {
  background:
    linear-gradient(135deg, rgba(60,29,45,0.12), transparent),
    linear-gradient(to bottom right, #bcc2aa, #c9cdb9);
}
.howto-step-image--gutters-scoop {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.12), transparent),
    linear-gradient(to bottom right, #8f9775, #c1ab75);
}
.howto-step-image--gutters-flush {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.15), transparent),
    linear-gradient(to bottom right, #c1ab75, #bcc2aa);
}
.howto-step-image--gutters-inspect {
  background:
    linear-gradient(135deg, rgba(60,29,45,0.15), transparent),
    linear-gradient(to bottom right, #c9cdb9, #c1ab75);
}
.howto-step-image--gutters-remind {
  background:
    linear-gradient(135deg, rgba(9,11,47,0.12), transparent),
    linear-gradient(to bottom right, #bcc2aa, #8f9775);
}

/* ─── Step body ─────────────────────────────────────────────────── */

.howto-step-body {
  padding: 1.75rem 2rem 2rem;
  position: relative;
}

.howto-step-number {
  position: absolute;
  top: -1.1rem;
  left: 1.75rem;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  background: var(--mk-navy);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  border-radius: 999px;
  border: 3px solid var(--mk-cream);
}

.howto-step-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--mk-navy);
  margin: 0.25rem 0 0.85rem;
}

.howto-step-body p {
  font-size: 1rem;
  color: #48423b;
  margin-bottom: 0.85rem;
}

.howto-tip-list {
  margin: 0 0 0.85rem 0;
  padding-left: 1.4rem;
  color: #48423b;
  font-size: 1rem;
}

.howto-tip-list li {
  margin-bottom: 0.45rem;
  line-height: 1.55;
}

.howto-tip {
  background: rgba(188, 194, 170, 0.25);
  border-left: 3px solid var(--mk-sage-dark);
  border-radius: 0 8px 8px 0;
  padding: 0.6rem 0.9rem;
  font-size: 0.95rem !important;
  color: var(--mk-muted) !important;
  margin-bottom: 0 !important;
}

/* ─── Quick-reference summary ───────────────────────────────────── */

.howto-summary {
  margin-top: 3rem;
  padding: 2rem;
  background: var(--mk-cream);
  border: 1px solid var(--mk-line);
  border-radius: 16px;
}

.howto-summary-title {
  font-size: 1.2rem;
  color: var(--mk-navy);
  margin-bottom: 1.25rem;
}

.howto-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 575.98px) {
  .howto-summary-grid {
    grid-template-columns: 1fr;
  }
}

.howto-summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1rem;
  background: var(--mk-ivory);
  border-radius: 10px;
  border: 1px solid var(--mk-line);
}

.howto-summary-item strong {
  color: var(--mk-navy);
  font-size: 0.9rem;
  font-weight: 800;
}

.howto-summary-item span {
  color: var(--mk-muted);
  font-size: 0.88rem;
}

/* ─── Sidebar ───────────────────────────────────────────────────── */

.howto-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 100px;
}

@media (max-width: 991.98px) {
  .howto-sidebar {
    position: static;
    order: -1;
  }
}

/* ManorKeep ad card */
.mk-ad-card {
  background: var(--mk-navy);
  color: #fff;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 16px 48px rgba(9, 11, 47, 0.22);
}

.mk-ad-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.mk-ad-brand {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
}

.mk-ad-tagline {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.6rem;
  line-height: 1.3;
}

.mk-ad-body {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 1rem;
  line-height: 1.55;
}

.mk-ad-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}

.mk-ad-features li {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mk-ad-features li::before {
  content: "✓";
  color: var(--mk-brass);
  font-weight: 900;
}

.mk-ad-card .btn-primary {
  --bs-btn-bg: var(--mk-brass);
  --bs-btn-border-color: var(--mk-brass);
  --bs-btn-color: var(--mk-navy);
  --bs-btn-hover-bg: #d4bc88;
  --bs-btn-hover-border-color: #d4bc88;
  --bs-btn-hover-color: var(--mk-navy);
  font-weight: 800;
}

.mk-ad-note {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin: 0.65rem 0 0;
}

/* Sidebar info cards */
.mk-sidebar-card {
  background: var(--mk-cream);
  border: 1px solid var(--mk-line);
  border-radius: 14px;
  padding: 1.25rem;
}

.mk-sidebar-card-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--mk-navy);
  margin-bottom: 1rem;
}

.mk-schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.mk-schedule-table th {
  color: var(--mk-claret);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 0 0.5rem;
  border-bottom: 2px solid var(--mk-line);
  text-align: left;
}

.mk-schedule-table td {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--mk-line);
  color: var(--mk-ink);
  vertical-align: top;
}

.mk-schedule-table td:last-child {
  color: var(--mk-muted);
  text-align: right;
}

.mk-schedule-table tr:last-child td {
  border-bottom: none;
}

.mk-related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mk-related-list a {
  color: var(--mk-navy);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.4;
  display: block;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--mk-line);
}

.mk-related-list a:hover {
  color: var(--mk-claret);
  text-decoration: underline;
}

.mk-related-list li:last-child a {
  border-bottom: none;
}

/* ─── CTA band ──────────────────────────────────────────────────── */

.howto-cta-band {
  background: var(--mk-sage);
  padding: 5rem 0;
}

.howto-cta-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 991.98px) {
  .howto-cta-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.howto-cta-copy h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  max-width: none;
  line-height: 1.1;
  margin-bottom: 1rem;
}

.howto-cta-copy p {
  color: #48423b;
  font-size: 1rem;
  max-width: 44ch;
}

.howto-cta-action .launch-box {
  padding: 2rem;
  box-shadow: 0 16px 48px rgba(9, 11, 47, 0.14);
}

.howto-cta-action .launch-box p {
  font-size: 0.95rem;
  color: var(--mk-muted);
  margin-bottom: 1.25rem;
}

.howto-cta-action .btn-primary {
  margin-bottom: 0.75rem;
}

.howto-cta-fine {
  font-size: 0.78rem;
  color: var(--mk-muted);
  text-align: center;
  margin: 0 !important;
}

/* ─── Guide index page ──────────────────────────────────────────── */

.howto-index-header {
  background: var(--mk-cream);
  border-bottom: 1px solid var(--mk-line);
  padding: 3.5rem 0 2.5rem;
}

.howto-index-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.1;
  max-width: none;
  margin: 0.5rem 0 0.75rem;
}

.howto-index-intro {
  font-size: 1.05rem;
  color: #48423b;
  max-width: 58ch;
  margin: 0;
}

.howto-index-body {
  padding-top: 3rem;
  padding-bottom: 4rem;
}

.howto-category {
  margin-bottom: 3.5rem;
}

.howto-category-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--mk-claret);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--mk-line);
}

.howto-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.howto-index-card {
  display: flex;
  flex-direction: column;
  background: var(--mk-cream);
  border: 1px solid var(--mk-line);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

a.howto-index-card:hover {
  box-shadow: 0 8px 32px rgba(9, 11, 47, 0.12);
  border-color: var(--mk-sage-dark);
}

.howto-index-card--soon {
  opacity: 0.62;
  cursor: default;
}

.howto-index-card-image {
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.howto-index-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.howto-index-card-image--filter {
  background: linear-gradient(135deg, rgba(9,11,47,0.18), transparent),
    linear-gradient(to bottom right, #bcc2aa, #8f9775);
}
.howto-index-card-image--condensate {
  background: linear-gradient(135deg, rgba(9,11,47,0.12), transparent),
    linear-gradient(to bottom right, #c9cdb9, #bcc2aa);
}
.howto-index-card-image--water-heater {
  background: linear-gradient(135deg, rgba(60,29,45,0.15), transparent),
    linear-gradient(to bottom right, #c1ab75, #bcc2aa);
}
.howto-index-card-image--shutoff {
  background: linear-gradient(135deg, rgba(9,11,47,0.15), transparent),
    linear-gradient(to bottom right, #8f9775, #c9cdb9);
}
.howto-index-card-image--smoke {
  background: linear-gradient(135deg, rgba(60,29,45,0.12), transparent),
    linear-gradient(to bottom right, #d4cfc6, #bcc2aa);
}
.howto-index-card-image--gutters {
  background: linear-gradient(135deg, rgba(9,11,47,0.18), transparent),
    linear-gradient(to bottom right, #bcc2aa, #c1ab75);
}
.howto-index-card-image--duct-cleaning {
  background: linear-gradient(135deg, rgba(9,11,47,0.15), transparent),
    linear-gradient(to bottom right, #c9cdb9, #8f9775);
}
.howto-index-card-image--attic-fan {
  background: linear-gradient(135deg, rgba(60,29,45,0.12), transparent),
    linear-gradient(to bottom right, #d4cfc6, #bcc2aa);
}
.howto-index-card-image--gfci {
  background: linear-gradient(135deg, rgba(9,11,47,0.15), transparent),
    linear-gradient(to bottom right, #c1ab75, #c9cdb9);
}
.howto-index-card-image--disposal {
  background: linear-gradient(135deg, rgba(9,11,47,0.12), transparent),
    linear-gradient(to bottom right, #8f9775, #c1ab75);
}
.howto-index-card-image--fridge-coils {
  background: linear-gradient(135deg, rgba(9,11,47,0.18), transparent),
    linear-gradient(to bottom right, #bcc2aa, #8f9775);
}
.howto-index-card-image--range-hood {
  background: linear-gradient(135deg, rgba(60,29,45,0.15), transparent),
    linear-gradient(to bottom right, #c1ab75, #bcc2aa);
}
.howto-index-card-image--sprinkler-test {
  background: linear-gradient(135deg, rgba(9,11,47,0.12), transparent),
    linear-gradient(to bottom right, #8f9775, #c9cdb9);
}
.howto-index-card-image--winterize-sprinkler {
  background: linear-gradient(135deg, rgba(9,11,47,0.18), transparent),
    linear-gradient(to bottom right, #c9cdb9, #c1ab75);
}
.howto-index-card-image--winterize-spigots {
  background: linear-gradient(135deg, rgba(60,29,45,0.12), transparent),
    linear-gradient(to bottom right, #bcc2aa, #c9cdb9);
}
.howto-index-card-image--door-seals {
  background: linear-gradient(135deg, rgba(9,11,47,0.15), transparent),
    linear-gradient(to bottom right, #c1ab75, #8f9775);
}
.howto-index-card-image--fire-extinguisher {
  background: linear-gradient(135deg, rgba(60,29,45,0.18), transparent),
    linear-gradient(to bottom right, #d4cfc6, #c1ab75);
}

.howto-index-card-body {
  padding: 1.25rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.howto-index-card-meta {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--mk-sage-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
}

.howto-index-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--mk-navy);
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.howto-index-card-desc {
  font-size: 0.9rem;
  color: var(--mk-muted);
  line-height: 1.5;
  flex: 1;
  margin-bottom: 0.85rem;
}

.howto-index-card-cta {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--mk-claret);
}

.howto-index-card-coming {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mk-muted);
  background: var(--mk-sage);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  align-self: flex-start;
}

/* ─── Footer ────────────────────────────────────────────────────── */

.howto-footer {
  background: var(--mk-navy);
  padding: 2rem 0;
  display: flex;
  align-items: center;
}

.howto-footer .container-xxl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.howto-footer .navbar-brand {
  color: #fff;
  font-size: 1.1rem;
}

.howto-footer .navbar-brand span {
  color: #fff;
  font-size: 1.1rem;
}

.howto-footer p {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.8rem;
  margin: 0;
}