/* =========================================================
   portfolio.css  —  Aryal Akash Portfolio
   Scope: all classes are prefixed with pf- to avoid
   collisions with your existing utilities.css / style.css
   ========================================================= */

/* ── Reset & base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --pf-white:       #FAFAF8;
  --pf-stone:       #F4F2ED;
  --pf-stone2:      #E8E5DF;
  --pf-ink:         #1C1C1A;
  --pf-ink2:        #5A5955;
  --pf-ink3:        #9B9893;
  --pf-green:       #1D9E75;
  --pf-green-light: #E1F5EE;
  --pf-green-mid:   #9FE1CB;
  --pf-green-dark:  #0F6E56;
  --pf-radius:      10px;
  --pf-radius-lg:   14px;
  --pf-nav-h:       64px;
  --pf-serif:       'DM Serif Display', Georgia, serif;
  --pf-sans:        'Inter', system-ui, sans-serif;
  --pf-max:         900px;
}

body {
  font-family: var(--pf-sans);
  background: var(--pf-white);
  color: var(--pf-ink);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: var(--pf-sans); }

/* ── Layout helpers ──────────────────────────────────────── */
.pf-container {
  max-width: var(--pf-max);
  margin: 0 auto;
  padding: 0 2rem;
}

.pf-section        { padding: 4rem 0; }
.pf-section--tinted { background: var(--pf-stone); }

.pf-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

/* ── Typography helpers ──────────────────────────────────── */
.pf-eyebrow {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pf-green);
  font-weight: 500;
  margin-bottom: 1rem;
}

.pf-section-label {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pf-ink3);
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.pf-text-link {
  font-size: 13px;
  color: var(--pf-green);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap .15s;
}
.pf-text-link:hover { gap: 7px; }

/* ── Buttons ─────────────────────────────────────────────── */
.pf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  border-radius: var(--pf-radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background .15s, border-color .15s, color .15s;
  text-decoration: none;
}

.pf-btn--primary {
  background: var(--pf-ink);
  color: var(--pf-white);
}
.pf-btn--primary:hover { background: #2e2e2b; }

.pf-btn--ghost {
  background: transparent;
  color: var(--pf-ink);
  border: 1px solid var(--pf-stone2);
}
.pf-btn--ghost:hover { border-color: var(--pf-ink2); }

.pf-btn--sm { padding: 8px 16px; font-size: 13px; }
.pf-btn--full { width: 100%; justify-content: center; }

/* ── Chips / Tags ────────────────────────────────────────── */
.pf-chip {
  display: inline-block;
  background: var(--pf-stone);
  border: 0.5px solid var(--pf-stone2);
  border-radius: 100px;
  font-size: 11px;
  padding: 3px 10px;
  color: var(--pf-ink2);
  font-weight: 400;
}
.pf-chip--green {
  background: var(--pf-green-light);
  border-color: var(--pf-green-mid);
  color: var(--pf-green-dark);
}

.pf-tag {
  display: inline-block;
  background: var(--pf-white);
  border: 0.5px solid var(--pf-stone2);
  border-radius: 100px;
  font-size: 11px;
  padding: 3px 10px;
  color: var(--pf-ink2);
}

/* ── Navbar ──────────────────────────────────────────────── */
.pf-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(250, 250, 248, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 0.5px solid var(--pf-stone2);
  height: var(--pf-nav-h);
}

.pf-nav__inner {
  max-width: var(--pf-max);
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.pf-nav__logo {
  font-family: var(--pf-serif);
  font-size: 20px;
  color: var(--pf-ink);
  margin-right: auto;
  flex-shrink: 0;
}

.pf-nav__links {
  list-style: none;
  display: flex;
  gap: 1.75rem;
}

.pf-nav__link {
  font-size: 14px;
  color: var(--pf-ink2);
  transition: color .15s;
}
.pf-nav__link:hover,
.pf-nav__link.is-active { color: var(--pf-ink); }

/* Available pill */
.pf-avail-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--pf-green-light);
  color: var(--pf-green-dark);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 100px;
  border: 0.5px solid var(--pf-green-mid);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s;
}
.pf-avail-pill:hover { background: #c2edd9; }

.pf-avail-pill__dot {
  width: 7px;
  height: 7px;
  background: var(--pf-green);
  border-radius: 50%;
  animation: pf-pulse 2s infinite;
  flex-shrink: 0;
}
@keyframes pf-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .35; }
}

/* Mobile toggle — hidden on desktop */
.pf-nav__toggle {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--pf-ink);
  cursor: pointer;
  padding: 4px;
}

/* ── Hero ────────────────────────────────────────────────── */
.pf-hero {
  padding: 5rem 0 4rem;
}

.pf-hero__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
}

.pf-hero__h1 {
  font-family: var(--pf-serif);
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.1;
  color: var(--pf-ink);
  margin-bottom: 1.25rem;
}
.pf-hero__h1 em {
  font-style: italic;
  color: var(--pf-green);
}

.pf-hero__lead {
  font-size: 16px;
  color: var(--pf-ink2);
  max-width: 480px;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.pf-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Profile card */
.pf-hero__card {
  width: 210px;
  flex-shrink: 0;
  background: var(--pf-stone);
  border: 0.5px solid var(--pf-stone2);
  border-radius: 16px;
  padding: 1.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.pf-hero__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--pf-green-light);
  border: 1.5px solid var(--pf-green-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pf-serif);
  font-size: 26px;
  color: var(--pf-green-dark);
  margin-bottom: 4px;
}

.pf-hero__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--pf-ink);
}

.pf-hero__location {
  font-size: 12px;
  color: var(--pf-ink3);
  display: flex;
  align-items: center;
  gap: 4px;
}
.pf-hero__location i { font-size: 13px; }

.pf-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin-top: 4px;
}

/* ── Services ────────────────────────────────────────────── */
.pf-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.pf-service-card {
  background: var(--pf-stone);
  border: 0.5px solid var(--pf-stone2);
  border-radius: var(--pf-radius-lg);
  padding: 1.35rem 1.25rem;
}

.pf-service-card__icon {
  font-size: 22px;
  color: var(--pf-green);
  display: block;
  margin-bottom: .75rem;
}

.pf-service-card__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--pf-ink);
  margin-bottom: .4rem;
}

.pf-service-card__desc {
  font-size: 13px;
  color: var(--pf-ink2);
  line-height: 1.6;
}

/* ── Project cards ───────────────────────────────────────── */
.pf-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.pf-projects-grid--full {
  grid-template-columns: repeat(2, 1fr);
}

.pf-proj-card {
  background: var(--pf-white);
  border: 0.5px solid var(--pf-stone2);
  border-radius: var(--pf-radius-lg);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
.pf-proj-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.07);
}

.pf-proj-card__thumb {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}

.pf-proj-card__body {
  padding: 1rem 1.2rem 1.25rem;
}

.pf-proj-card__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: .65rem;
}

.pf-proj-card__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--pf-ink);
  margin-bottom: .35rem;
}

.pf-proj-card__desc {
  font-size: 13px;
  color: var(--pf-ink2);
  line-height: 1.6;
  margin-bottom: .75rem;
}

/* Image thumbnail (real photo from storage) */
.pf-proj-card__thumb--img {
  background: var(--pf-stone);
  padding: 0;
}
.pf-proj-card__thumb--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fallback thumb when no image is set */
.pf-proj-card__thumb--empty {
  background: var(--pf-stone);
  color: var(--pf-ink3);
  font-size: 32px;
}

/* Empty state when $projects is empty */
.pf-projects-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 4rem 0;
  color: var(--pf-ink3);
  font-size: 14px;
}
.pf-projects-empty i { font-size: 36px; }

/* ── Testimonials ────────────────────────────────────────── */
.pf-testi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pf-testi-card {
  background: var(--pf-stone);
  border: 0.5px solid var(--pf-stone2);
  border-radius: var(--pf-radius-lg);
  padding: 1.35rem 1.25rem;
}

.pf-testi-card__quote {
  font-size: 14px;
  color: var(--pf-ink2);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: .85rem;
}

.pf-testi-card__who {
  font-size: 12px;
  color: var(--pf-ink3);
  font-weight: 500;
}

/* ── CTA band ────────────────────────────────────────────── */
.pf-cta-band {
  background: var(--pf-ink);
  padding: 4rem 0;
  text-align: center;
}

.pf-cta-band__h2 {
  font-family: var(--pf-serif);
  font-size: 32px;
  color: var(--pf-white);
  margin-bottom: .75rem;
}

.pf-cta-band__sub {
  font-size: 15px;
  color: rgba(250,250,248,.65);
  margin-bottom: 2rem;
}

/* ── Page header ─────────────────────────────────────────── */
.pf-page-header {
  padding: 3.5rem 0 2rem;
  border-bottom: 0.5px solid var(--pf-stone2);
}

.pf-page-header__h1 {
  font-family: var(--pf-serif);
  font-size: clamp(30px, 4vw, 42px);
  color: var(--pf-ink);
  margin-bottom: .5rem;
}

.pf-page-header__sub {
  font-size: 15px;
  color: var(--pf-ink2);
}

/* ── Filter bar ──────────────────────────────────────────── */
.pf-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.pf-filter-btn {
  background: transparent;
  border: 0.5px solid var(--pf-stone2);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 13px;
  color: var(--pf-ink2);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.pf-filter-btn:hover,
.pf-filter-btn.is-on {
  background: var(--pf-ink);
  color: var(--pf-white);
  border-color: var(--pf-ink);
}

/* ── Blog layout ─────────────────────────────────────────── */
.pf-blog-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 3rem;
  padding-bottom: 4rem;
}

.pf-blog-main { display: flex; flex-direction: column; gap: 0; }

.pf-blog-card {
  padding: 1.75rem 0;
  border-bottom: 0.5px solid var(--pf-stone2);
}
.pf-blog-card:first-child { padding-top: 0; }
.pf-blog-card:last-child { border-bottom: none; }

.pf-blog-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: .5rem;
}

.pf-blog-card__date {
  font-size: 12px;
  color: var(--pf-ink3);
}

.pf-blog-card__title {
  font-family: var(--pf-serif);
  font-size: 22px;
  line-height: 1.25;
  color: var(--pf-ink);
  margin-bottom: .55rem;
}
.pf-blog-card__title a:hover { color: var(--pf-green); }

.pf-blog-card__excerpt {
  font-size: 14px;
  color: var(--pf-ink2);
  line-height: 1.7;
  margin-bottom: .85rem;
}

/* Sidebar */
.pf-blog-sidebar { display: flex; flex-direction: column; gap: 1.25rem; }

.pf-sidebar-card {
  background: var(--pf-stone);
  border: 0.5px solid var(--pf-stone2);
  border-radius: var(--pf-radius-lg);
  padding: 1.25rem;
}
.pf-sidebar-card--green {
  background: var(--pf-green-light);
  border-color: var(--pf-green-mid);
}

.pf-sidebar-card__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--pf-ink);
  margin-bottom: 1rem;
}

.pf-sidebar-card__body {
  font-size: 13px;
  color: var(--pf-ink2);
  line-height: 1.65;
  margin-bottom: .85rem;
}

.pf-cat-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.pf-cat-list li {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--pf-ink2);
}

.pf-cat-list li a { color: var(--pf-ink2); transition: color .15s; }
.pf-cat-list li a:hover,
.pf-cat-list li span:first-child { cursor: default; }

.pf-cat-list__count {
  font-size: 12px;
  color: var(--pf-ink3);
}

.pf-pagination { margin-top: 2rem; }

/* ── Contact ─────────────────────────────────────────────── */
.pf-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 3.5rem;
  padding-bottom: 5rem;
}

.pf-contact-info { display: flex; flex-direction: column; gap: 1.5rem; }

.pf-avail-box {
  background: var(--pf-green-light);
  border: 0.5px solid var(--pf-green-mid);
  border-radius: var(--pf-radius-lg);
  padding: 1.25rem;
}

.pf-avail-box__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--pf-green-dark);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: .4rem;
}

.pf-avail-box__desc {
  font-size: 13px;
  color: var(--pf-green-dark);
  opacity: .85;
  line-height: 1.6;
}

.pf-contact-blurb {
  font-size: 15px;
  color: var(--pf-ink2);
  line-height: 1.75;
}

.pf-contact-details {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.pf-contact-details li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--pf-ink2);
}

.pf-contact-details i {
  font-size: 18px;
  color: var(--pf-green);
  flex-shrink: 0;
}

.pf-contact-details a { color: var(--pf-ink2); transition: color .15s; }
.pf-contact-details a:hover { color: var(--pf-green); }

/* Form */
.pf-contact-form-wrap { display: flex; flex-direction: column; gap: 0; }

.pf-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pf-form-group {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: 1rem;
}

.pf-form-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--pf-ink2);
  letter-spacing: .02em;
}

.pf-form-input {
  background: var(--pf-stone);
  border: 0.5px solid var(--pf-stone2);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--pf-ink);
  font-family: var(--pf-sans);
  outline: none;
  transition: border-color .15s;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}
.pf-form-input:focus { border-color: var(--pf-green); }
.pf-form-input.is-invalid { border-color: #e24b4a; }

.pf-form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239B9893' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; }

.pf-form-textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.65;
}

.pf-form-error {
  font-size: 12px;
  color: #a32d2d;
}

/* Alerts */
.pf-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--pf-radius);
  font-size: 14px;
  margin-bottom: 1.25rem;
}
.pf-alert--success {
  background: var(--pf-green-light);
  color: var(--pf-green-dark);
  border: 0.5px solid var(--pf-green-mid);
}
.pf-alert--error {
  background: #fcebeb;
  color: #a32d2d;
  border: 0.5px solid #f7c1c1;
}

/* ── Footer ──────────────────────────────────────────────── */
.pf-footer {
  border-top: 0.5px solid var(--pf-stone2);
  padding: 3rem 0;
  background: var(--pf-white);
}

.pf-footer__inner {
  max-width: var(--pf-max);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto auto;
  gap: 1rem 3rem;
  align-items: start;
}

.pf-footer__logo {
  font-family: var(--pf-serif);
  font-size: 20px;
  color: var(--pf-ink);
}

.pf-footer__tagline {
  font-size: 13px;
  color: var(--pf-ink3);
  margin-top: 4px;
}

.pf-footer__nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  padding-top: 4px;
}

.pf-footer__nav a {
  font-size: 13px;
  color: var(--pf-ink2);
  transition: color .15s;
}
.pf-footer__nav a:hover { color: var(--pf-ink); }

.pf-footer__social {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding-top: 4px;
}

.pf-footer__social a {
  font-size: 18px;
  color: var(--pf-ink3);
  transition: color .15s;
}
.pf-footer__social a:hover { color: var(--pf-green); }

.pf-footer__copy {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--pf-ink3);
  padding-top: .5rem;
  border-top: 0.5px solid var(--pf-stone2);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .pf-nav__links {
    display: none;
    position: absolute;
    top: var(--pf-nav-h);
    left: 0; right: 0;
    background: var(--pf-white);
    border-bottom: 0.5px solid var(--pf-stone2);
    flex-direction: column;
    padding: 1rem 2rem 1.5rem;
    gap: 1rem;
  }
  .pf-nav__links.is-open { display: flex; }
  .pf-nav__toggle { display: block; }
  .pf-avail-pill { display: none; }

  .pf-hero__grid    { grid-template-columns: 1fr; }
  .pf-hero__card    { width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 12px; padding: 1.25rem; }
  .pf-hero__avatar  { width: 52px; height: 52px; font-size: 20px; }

  .pf-services          { grid-template-columns: 1fr; }
  .pf-projects-grid     { grid-template-columns: 1fr; }
  .pf-projects-grid--full { grid-template-columns: 1fr; }
  .pf-testi-grid        { grid-template-columns: 1fr; }
  .pf-blog-layout       { grid-template-columns: 1fr; }
  .pf-blog-sidebar      { order: -1; }
  .pf-contact-grid      { grid-template-columns: 1fr; gap: 2rem; }
  .pf-form-row          { grid-template-columns: 1fr; }

  .pf-footer__inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .pf-footer__copy { border-top: none; }
}


/* =========================================================
   Downloads page
   ========================================================= */

.pf-dl-stack {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-bottom: 5rem;
}

/* ── Card shell ──────────────────────────────────────────── */
.pf-dl-card {
  border: 0.5px solid var(--pf-stone2);
  border-radius: 18px;
  overflow: hidden;
  background: var(--pf-white);
}

/* ── Header band ─────────────────────────────────────────── */
.pf-dl-card__band {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.75rem 2rem;
  position: relative;
}

.pf-dl-card__band--green { background: #0F6E56; }
.pf-dl-card__band--blue  { background: #185FA5; }

.pf-dl-card__band-icon {
  font-size: 42px;
  line-height: 1;
  flex-shrink: 0;
}

.pf-dl-card__band-title {
  font-family: var(--pf-serif);
  font-size: 24px;
  color: #fff;
  font-weight: 400;
  margin-bottom: 3px;
}

.pf-dl-card__band-sub {
  font-size: 13px;
  color: rgba(255,255,255,.7);
}

/* Platform pill — sits at right end of band */
.pf-dl-platform {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 13px;
  border-radius: 100px;
  flex-shrink: 0;
  white-space: nowrap;
}

.pf-dl-platform--android {
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 0.5px solid rgba(255,255,255,.3);
}

.pf-dl-platform--blue {
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 0.5px solid rgba(255,255,255,.3);
}

/* ── Body ────────────────────────────────────────────────── */
.pf-dl-card__body {
  padding: 2rem;
}

/* ── Badges ──────────────────────────────────────────────── */
.pf-dl-badges {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.pf-dl-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
}

.pf-dl-badge--green { background: var(--pf-green-light); color: var(--pf-green-dark); border: 0.5px solid var(--pf-green-mid); }
.pf-dl-badge--blue  { background: #E6F1FB; color: #185FA5; border: 0.5px solid #B5D4F4; }
.pf-dl-badge--red   { background: #FCEBEB; color: #A32D2D; border: 0.5px solid #F7C1C1; }
.pf-dl-badge--stone { background: var(--pf-stone); color: var(--pf-ink2); border: 0.5px solid var(--pf-stone2); }

/* ── Description ─────────────────────────────────────────── */
.pf-dl-desc {
  font-size: 15px;
  color: var(--pf-ink2);
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

/* ── Feature grid ────────────────────────────────────────── */
.pf-dl-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 1.5rem;
}

.pf-dl-features--list {
  grid-template-columns: repeat(2, 1fr);
}

.pf-dl-feature {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--pf-stone);
  border: 0.5px solid var(--pf-stone2);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--pf-ink2);
}

.pf-dl-feature i {
  font-size: 15px;
  color: var(--pf-green);
  flex-shrink: 0;
}

/* ── Divider ─────────────────────────────────────────────── */
.pf-dl-divider {
  height: 0.5px;
  background: var(--pf-stone2);
  margin: 1.5rem 0;
}

/* ── Meta line ───────────────────────────────────────────── */
.pf-dl-meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--pf-ink3);
  margin-bottom: 1.75rem;
}

.pf-dl-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pf-dl-meta i { font-size: 15px; }

/* ── Download button overrides ───────────────────────────── */
.pf-btn--green {
  background: var(--pf-green);
  color: #fff;
}
.pf-btn--green:hover { background: var(--pf-green-dark); color: #fff; }

.pf-btn--download {
  padding: 13px 28px;
  font-size: 15px;
  border-radius: 12px;
}

.pf-dl-actions {
  margin-bottom: 2rem;
}

/* ── Install steps box ───────────────────────────────────── */
.pf-dl-steps {
  background: var(--pf-stone);
  border: 0.5px solid var(--pf-stone2);
  border-radius: 12px;
  padding: 1.5rem;
}

.pf-dl-steps__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--pf-ink);
  margin-bottom: 1rem;
}

.pf-dl-steps__title i { font-size: 17px; color: var(--pf-green); }

.pf-dl-steps__list {
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin-bottom: 1.25rem;
}

.pf-dl-steps__list li {
  font-size: 14px;
  color: var(--pf-ink2);
  line-height: 1.65;
}

.pf-dl-steps__list code {
  background: var(--pf-stone2);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12px;
  color: var(--pf-ink);
  font-family: var(--pf-sans);
}

/* Info / warning callouts inside steps */
.pf-dl-info,
.pf-dl-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
}

.pf-dl-info {
  background: var(--pf-green-light);
  border: 0.5px solid var(--pf-green-mid);
  color: var(--pf-green-dark);
}

.pf-dl-warning {
  background: #FFF8ED;
  border: 0.5px solid #FAC775;
  color: #633806;
}

.pf-dl-info i,
.pf-dl-warning i {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .pf-dl-card__band      { flex-wrap: wrap; padding: 1.35rem 1.25rem; }
  .pf-dl-card__body      { padding: 1.25rem; }
  .pf-dl-card__band-icon { font-size: 32px; }
  .pf-dl-platform        { margin-left: 0; }
  .pf-dl-features        { grid-template-columns: 1fr 1fr; }
  .pf-dl-features--list  { grid-template-columns: 1fr; }
  .pf-dl-meta            { gap: 1rem; }
  .pf-btn--download      { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .pf-dl-features { grid-template-columns: 1fr; }
}