/* ProCustom Group — site components (light theme) */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--pcg-bg);
  color: var(--pcg-text);
  font-family: var(--pcg-font-body);
  font-size: 16px;
  line-height: 1.6;
}
a { color: var(--pcg-red); }
a:hover { color: var(--pcg-red-hover); }
img { max-width: 100%; height: auto; }

.container { max-width: 1440px; margin: 0 auto; padding-left: var(--pcg-gutter); padding-right: var(--pcg-gutter); }
@media (max-width: 720px) { .container { padding-left: 20px; padding-right: 20px; } }

.kicker { font-family: var(--pcg-font-mono); font-size: 13px; color: var(--pcg-red); letter-spacing: 0.12em; }
.meta   { font-family: var(--pcg-font-mono); font-size: 12px; color: var(--pcg-text-dim); letter-spacing: 0.08em; }

/* nav */
.nav { display: flex; align-items: center; gap: 36px; padding: 18px var(--pcg-gutter); border-bottom: 1px solid var(--pcg-border); }
.nav__logo img { height: 68px; width: auto; max-width: none; display: block; }
.nav__links { display: flex; gap: 28px; font-size: 14px; color: var(--pcg-text-muted); margin-left: 12px; }
.nav__links a { color: inherit; text-decoration: none; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--pcg-text); }
.nav__links a[aria-current="page"] { border-bottom: 2px solid var(--pcg-red); padding-bottom: 4px; }
.nav__cta { margin-left: auto; }
/* Laptop widths: the full menu plus the quote button overran the window
   (about 1100px), so tighten everything before the phone layout takes over. */
@media (min-width: 901px) and (max-width: 1280px) {
  .nav { gap: 18px; }
  .nav__logo img { height: 52px; }
  .nav__links { gap: 16px; margin-left: 0; font-size: 13px; }
  .nav__cta .btn { padding: 12px 16px; font-size: 13px; }
}
@media (min-width: 901px) and (max-width: 1000px) {
  .nav { padding-left: 32px; padding-right: 32px; gap: 14px; }
  .nav__links { gap: 13px; }
}
@media (max-width: 900px) { .nav { flex-wrap: wrap; gap: 16px; } .nav__cta { margin-left: 0; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--pcg-touch);
  padding: 14px 28px; font-family: var(--pcg-font-display); font-size: 15px; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.btn--primary { background: var(--pcg-red); color: #fff; }
.btn--primary:hover { background: var(--pcg-red-hover); color: #fff; }
.btn--ghost { border-color: var(--pcg-border-strong); color: var(--pcg-text); background: transparent; }
.btn--ghost:hover { border-color: var(--pcg-text-muted); color: var(--pcg-text); }

/* sections */
.section { border-top: 1px solid var(--pcg-border); padding-top: 40px; padding-bottom: 56px; }
.section__head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.section__title { font-family: var(--pcg-font-display); font-size: 28px; text-transform: uppercase;
  letter-spacing: 0.04em; margin: 0; }

/* platform selector */
.platforms { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.platform { border: 1px solid var(--pcg-border); background: transparent; padding: 18px;
  display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer;
  font: inherit; color: inherit; text-align: center; }
.platform:hover { border-color: var(--pcg-border-strong); }
.platform[aria-pressed="true"] { border-color: var(--pcg-red); background: var(--pcg-surface-selected); }
.platform__img { background: var(--pcg-well); padding: 8px; }
.platform__img img { width: 92px; height: 92px; object-fit: contain; display: block; }
.platform__name { font-family: var(--pcg-font-display); font-size: 18px; letter-spacing: 0.06em; }
.platform__type { font-size: 12px; color: var(--pcg-text-muted); line-height: 1.4; }

.platform-detail { margin-top: 20px; border: 1px solid var(--pcg-border-strong); background: var(--pcg-surface);
  padding: 28px 32px; display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.platform-detail__info { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 8px; }
.platform-detail__name { font-family: var(--pcg-font-display); font-size: 26px; text-transform: uppercase; }
.platform-detail__blurb { font-size: 14px; color: var(--pcg-text-muted); }
.platform-detail__specs { display: flex; gap: 28px; font-family: var(--pcg-font-mono); font-size: 13px; }
.spec { display: flex; flex-direction: column; gap: 6px; }
.spec__label { color: var(--pcg-text-dim); font-size: 11px; }

/* process */
.process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.step { border-top: 2px solid var(--pcg-border-strong); padding: 18px 4px; display: flex; flex-direction: column; gap: 8px; }
.step:first-child { border-top-color: var(--pcg-red); }
.step__num { font-family: var(--pcg-font-mono); font-size: 12px; color: var(--pcg-red); }
.step__name { font-family: var(--pcg-font-display); font-size: 18px; letter-spacing: 0.04em; }
.step__desc { font-size: 13px; color: var(--pcg-text-muted); }

/* trusted strip */
.trusted { display: flex; align-items: center; gap: 40px; padding-top: 40px; padding-bottom: 40px; border-top: 1px solid var(--pcg-border); }

/* footer */
.footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 26px var(--pcg-gutter); border-top: 1px solid var(--pcg-border);
  font-family: var(--pcg-font-mono); font-size: 12px; color: var(--pcg-text-dim); }

/* page header */
.page-head { padding-top: 56px; padding-bottom: 8px; display: flex; flex-direction: column; gap: 14px; }
.page-head__title { font-family: var(--pcg-font-display); font-size: clamp(30px, 4vw, 44px);
  font-weight: 600; text-transform: uppercase; margin: 0; }
.page-head__sub { font-size: 16px; color: var(--pcg-text-muted); max-width: var(--pcg-text-wide); margin: 0; }

/* forms */
.form-layout { display: flex; gap: 40px; padding-top: 24px; padding-bottom: 64px; align-items: flex-start; }
@media (max-width: 900px) { .form-layout { flex-direction: column; } }
.panel { border: 1px solid var(--pcg-border-strong); background: var(--pcg-surface); padding: 32px; }
.panel--form { flex: 1.3; display: flex; flex-direction: column; gap: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 720px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.input, .textarea { background: var(--pcg-bg); border: 1px solid var(--pcg-border-strong);
  color: var(--pcg-text); padding: 14px 16px; font-family: var(--pcg-font-body); font-size: 14px; width: 100%; }
.textarea { resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--pcg-text-faint); }
.input:focus, .textarea:focus { outline: 2px solid var(--pcg-red); outline-offset: -1px; }
.field-label { font-family: var(--pcg-font-mono); font-size: 12px; color: var(--pcg-text-muted); letter-spacing: 0.08em; }
.chips-row { display: flex; gap: 10px; flex-wrap: wrap; }
.chip-btn { border: 1px solid var(--pcg-border-strong); background: transparent; padding: 12px 20px;
  min-height: var(--pcg-touch); font-family: var(--pcg-font-display); font-size: 14px;
  letter-spacing: 0.06em; cursor: pointer; color: inherit; }
.chip-btn[aria-pressed="true"] { border-color: var(--pcg-red); background: var(--pcg-surface-selected); }
.form-note { font-family: var(--pcg-font-mono); font-size: 12px; color: var(--pcg-text-dim); }
.form-ok { font-family: var(--pcg-font-mono); font-size: 13px; color: var(--pcg-green); }
.side-rail { flex: 0.8; display: flex; flex-direction: column; gap: 20px; }
.rail-card { border: 1px solid var(--pcg-border); padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.rail-card__title { font-family: var(--pcg-font-display); font-size: 20px; letter-spacing: 0.05em;
  text-transform: uppercase; margin: 0; }
.rail-step { display: flex; gap: 14px; font-size: 13px; color: var(--pcg-text-muted); }
.rail-step b { color: var(--pcg-text); font-weight: 600; }
.rail-step__num { font-family: var(--pcg-font-mono); font-size: 12px; color: var(--pcg-red); min-width: 24px; }

/* notice */
.notice { border: 1px solid var(--pcg-red); background: rgba(156,30,36,0.06); padding: 14px 18px;
  font-size: 13px; line-height: 1.6; }
.notice__tag { font-family: var(--pcg-font-mono); color: var(--pcg-red); font-size: 12px; letter-spacing: 0.08em; }
.inline-check { display: flex; gap: 10px; }
.inline-check .input { flex: 1; min-width: 0; }

/* Stacked variant. The RMA status check needs two fields and a button, which
   will not fit across a sidebar rail — side by side they collapse to a pair of
   unreadable boxes with the placeholders clipped away. */
.inline-check--stack { flex-direction: column; align-items: stretch; }
.inline-check--stack .btn { align-self: flex-start; }

/* about page */
.prose { max-width: var(--pcg-text-wide); display: flex; flex-direction: column; gap: 14px; }
.prose p { margin: 0; color: var(--pcg-text-muted); }
.badges { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.badges img { height: 72px; width: auto; background: #fff; border: 1px solid var(--pcg-border); padding: 8px; }

/* faq */
.faq { max-width: var(--pcg-text-wide); display: flex; flex-direction: column; gap: 0; }
.faq__item { border-bottom: 1px solid var(--pcg-border); }
.faq__item:first-child { border-top: 2px solid var(--pcg-ink, var(--pcg-text)); }
.faq__q { cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative;
  font-family: var(--pcg-font-display); font-size: 19px; letter-spacing: 0.02em; color: var(--pcg-text); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--pcg-font-mono); font-size: 20px; color: var(--pcg-red); line-height: 1; }
.faq__item[open] .faq__q::after { content: "−"; }
.faq__q:hover { color: var(--pcg-red); }
.faq__q:focus-visible { outline: 2px solid var(--pcg-red); outline-offset: 2px; }
.faq__a { padding: 0 44px 22px 0; color: var(--pcg-text-muted); font-size: 15px; }
.faq__a p { margin: 0 0 12px; }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a ul { margin: 0 0 12px; }

/* product grid */
.prod-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1240px) { .prod-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .prod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prod { border: 1px solid var(--pcg-border); display: flex; flex-direction: column; text-decoration: none;
  color: inherit; transition: border-color 0.2s ease, transform 0.2s ease; }
.prod:hover { border-color: var(--pcg-red); transform: translateY(-3px); }
.prod__img { background: var(--pcg-well); height: 118px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.prod__img img { max-width: 82%; max-height: 82%; width: auto; height: auto; object-fit: contain; }
.prod__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.prod__name { font-family: var(--pcg-font-display); font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.25; }
.prod__tag { font-family: var(--pcg-font-mono); font-size: 10px; color: var(--pcg-text-dim); letter-spacing: 0.05em; }

/* capability list */
.caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
@media (max-width: 820px) { .caps { grid-template-columns: minmax(0, 1fr); } }
.cap { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--pcg-border); }
.cap__mark { font-family: var(--pcg-font-mono); font-size: 12px; color: var(--pcg-red); padding-top: 2px; }
.cap__text { font-size: 14px; color: var(--pcg-text-muted); line-height: 1.55; }
.cap__text b { color: var(--pcg-text); font-weight: 600; }

/* contact */
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-card { border: 1px solid var(--pcg-border); padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.contact-card__label { font-family: var(--pcg-font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--pcg-text-dim); }
.contact-card__value { font-size: 17px; line-height: 1.5; }
.contact-card__value a { text-decoration: none; }

/* ============ layered composition ============ */

/* full-bleed hero */
.hero-full { position: relative; min-height: 56vh; max-height: 640px; display: flex; align-items: center;
  overflow: hidden; background: #08090b; }
.hero-full__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center center; transform: scale(1.05); animation: heroSettle 2s cubic-bezier(.2,.6,.2,1) forwards; }
@keyframes heroSettle { to { transform: scale(1); } }
/* SF-0036: on a wide screen the photo stays within the red credentials band
   below it (same width, same edges), instead of filling the window - where
   cover-scaling cropped the products. Right-anchored: the photo's subject is
   on the right, the headline sits over its dark left side. */
@media (min-width: 901px) {
  .hero-full__img { width: calc(min(100%, 1440px) - 2 * var(--pcg-gutter)); right: auto;
    left: calc((100% - min(100%, 1440px)) / 2 + var(--pcg-gutter)); object-position: right center;
    /* A photo's black is rarely exactly the band's; fade the side edges so no seam shows. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); }
}
.hero-full__scrim { position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(8,9,11,0.80) 0%, rgba(8,9,11,0.55) 30%, rgba(8,9,11,0.10) 55%, rgba(8,9,11,0) 75%); }
@media (max-width: 900px) { .hero-full__scrim {
  background: linear-gradient(to top, rgba(8,9,11,0.95) 0%, rgba(8,9,11,0.72) 46%, rgba(8,9,11,0.25) 100%); } }
.hero-full__content { position: relative; z-index: 1; width: 100%; max-width: 1440px; margin: 0 auto;
  padding: 56px var(--pcg-gutter); color: #f4f5f6; display: flex; flex-direction: column; gap: 18px; }
.hero-full__content > * { max-width: min(560px, 42%); }
@media (max-width: 900px) { .hero-full__content > * { max-width: 100%; } }
.hero-full .kicker { color: #ff6a72; }
.hero-full__title { font-family: var(--pcg-font-display); font-size: clamp(38px, 5.2vw, 72px);
  line-height: 1.0; font-weight: 600; text-transform: uppercase; margin: 0; max-width: 12ch; text-wrap: balance; }
.hero-full__title em { font-style: normal; color: #ff6a72; }
.hero-full__sub { font-size: 18px; line-height: 1.6; color: #ccd1d6; max-width: 460px; margin: 0; }
.hero-full__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.hero-full .btn--ghost { border-color: rgba(255,255,255,0.5); color: #f4f5f6; }
.hero-full .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
@media (max-width: 720px) { .hero-full { min-height: 62vh; }
  .hero-full__content { padding: 56px 20px 44px; } }

/* credential slab overlapping the hero */
.cred-band { max-width: 1440px; margin: -40px auto 0; padding: 0 var(--pcg-gutter); position: relative; z-index: 2; }
.cred-band__inner { background: var(--pcg-red); color: #fff; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); box-shadow: 0 18px 40px rgba(20,22,26,0.18); }
.cred { padding: 22px 24px; border-left: 1px solid rgba(255,255,255,0.2); }
.cred:first-child { border-left: none; }
.cred__label { font-family: var(--pcg-font-mono); font-size: 10px; letter-spacing: 0.14em;
  opacity: 0.8; display: block; margin-bottom: 5px; }
.cred__value { font-family: var(--pcg-font-display); font-size: 17px; letter-spacing: 0.05em;
  text-transform: uppercase; line-height: 1.2; display: block; }
@media (max-width: 980px) { .cred-band { margin-top: -20px; }
  .cred-band__inner { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cred:nth-child(3) { border-left: none; }
  .cred:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.2); } }
@media (max-width: 560px) { .cred-band__inner { grid-template-columns: minmax(0,1fr); }
  .cred { border-left: none; } .cred + .cred { border-top: 1px solid rgba(255,255,255,0.2); } }

/* silhouette band divider */
.silhouette { position: relative; height: 190px; margin-top: 8px; overflow: hidden;
  display: flex; align-items: center; }
.silhouette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.silhouette__text { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; width: 100%;
  padding: 0 var(--pcg-gutter); color: #fff; }
.silhouette__text p { font-family: var(--pcg-font-display); font-size: clamp(20px, 2.6vw, 32px);
  text-transform: uppercase; letter-spacing: 0.03em; margin: 0; max-width: 20ch; line-height: 1.15; }
@media (max-width: 720px) { .silhouette { height: 150px; } }

/* offset two-column feature */
.offset { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 0; align-items: center; }
.offset__media { display: flex; justify-content: center; }
/* Never scale a photograph beyond its natural size: the source is 600px and
   upscaling it just makes it soft. */
.offset__media img { width: 100%; max-width: 600px; height: auto; display: block; }
.offset__panel { background: var(--pcg-surface); border: 1px solid var(--pcg-border);
  padding: 44px 44px; margin-left: -56px; position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) { .offset { grid-template-columns: minmax(0,1fr); }
  .offset__panel { margin-left: 0; margin-top: -28px; padding: 32px 24px; } }

/* scroll reveals */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: .08s; } .reveal--d2 { transition-delay: .16s; } .reveal--d3 { transition-delay: .24s; }

/* hover depth */
.platform { transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease; }
.platform:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20,22,26,0.10); }

@media (prefers-reduced-motion: reduce) {
  .hero-full__img { animation: none; transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .platform:hover, .prod:hover, .industry:hover { transform: none; }
}

/* ============ mobile refinements ============ */
@media (max-width: 900px) {
  .nav { flex-wrap: wrap; gap: 12px; padding: 14px 20px; align-items: center; }
  .nav__logo { flex: 1 1 auto; min-width: 0; }
  .nav__cta { margin-left: auto; }
  .nav__cta .btn { padding: 11px 14px; font-size: 12px; letter-spacing: 0.05em; }
  /* links become a single scrollable row rather than a ragged wrap */
  .nav__links { order: 3; width: 100%; margin-left: 0; gap: 20px; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: 2px; border-top: 1px solid var(--pcg-border); padding-top: 12px; }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a { white-space: nowrap; font-size: 13px; }
}
@media (max-width: 720px) {
  .hero-full__title { font-size: clamp(30px, 8.5vw, 44px); max-width: 100%; }
  .hero-full__sub { font-size: 15px; }
  .hero-full__actions { gap: 10px; }
  .hero-full__actions .btn { flex: 1; min-width: 0; padding: 14px 12px; font-size: 13px;
    letter-spacing: 0.05em; text-align: center; }
  .cred-band { margin-top: 0; padding: 0; }
  .cred-band__inner { box-shadow: none; }
  .silhouette__text p { font-size: 18px; max-width: 16ch; }
  .page-head { padding-top: 36px; }
  .section { padding-top: 32px; padding-bottom: 36px; }
  .form-layout { gap: 24px; padding-bottom: 44px; }
  .panel { padding: 22px 18px; }
  .rail-card { padding: 20px 18px; }
  .platform__img img { width: 74px; height: 74px; }
  .prod__img { height: 96px; }
  .footer { flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px 20px; }
}
@media (max-width: 420px) {
  .nav__cta { order: 4; width: 100%; margin-left: 0; }
  .nav__cta .btn { width: 100%; }
  .prod-grid { gap: 10px; }
  .prod__name { font-size: 12px; }
}

/* form feedback */
.notice--ok { border-color: var(--pcg-green); background: rgba(30,138,96,0.07); }
.notice--ok .notice__tag { color: var(--pcg-green); }
.notice--error { border-color: #b3261e; background: rgba(179,38,30,0.06); }
.notice--error .notice__tag { color: #b3261e; }
.notice ul { margin: 8px 0 0; padding-left: 20px; }
.notice li { margin-bottom: 4px; }
.notice p { margin: 6px 0 0; }
#rfq-result, #rma-result { display: block; width: 100%; }

/*
  htmx announces "request in flight" only by adding classes - htmx-request on
  the element that fired it and on whatever hx-indicator names - so a page with
  no rules for them stays visually inert for the whole request, and
  hx-disabled-elt leaves a button that is dead but pixel-identical to a live
  one. That reads as "nothing happened" and earns a second press.

  On the RMA status lookup a second press is not merely untidy: each attempt
  spends ~1.5s of server CPU deriving a key and one of ten rate-limiter slots,
  so a visitor pressing again because they saw nothing is walking toward
  locking themselves out of checking their own repair. Hence the rules live
  here, keyed on the classes rather than on any one button's id, so every form
  on the site gets the feedback rather than only the two that were named.
*/
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* Toggled with display, not opacity: an invisible-but-present indicator still
   occupies its line and would shift the layout under the visitor's cursor on
   every request. The compound selector is needed because htmx puts
   htmx-request on the indicator itself when hx-indicator names it directly. */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: block; }

/* rma status lookup */
.status-msg { margin: 12px 0 0; font-size: 13px; color: var(--pcg-text-muted); line-height: 1.55; }
.status-msg--warn { color: var(--pcg-text); }
.status-result { margin-top: 14px; border: 1px solid var(--pcg-border-strong); background: var(--pcg-surface); padding: 18px; }
.status-result__head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.status-result__num { font-family: var(--pcg-font-mono); font-size: 12px; color: var(--pcg-text-dim); letter-spacing: 0.1em; }
.status-result__label { font-family: var(--pcg-font-display); font-size: 19px; text-transform: uppercase; letter-spacing: 0.03em; }
.status-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.status-step { display: flex; align-items: center; gap: 12px; padding: 7px 0; position: relative; }
.status-step__dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--pcg-border-strong);
  background: var(--pcg-bg); flex: none; }
.status-step__name { font-size: 13px; color: var(--pcg-text-faint); }
.status-step.is-done .status-step__dot { background: var(--pcg-green); border-color: var(--pcg-green); }
.status-step.is-done .status-step__name { color: var(--pcg-text-muted); }
.status-step.is-current .status-step__dot { background: var(--pcg-red); border-color: var(--pcg-red);
  box-shadow: 0 0 0 4px rgba(156,30,36,0.15); }
.status-step.is-current .status-step__name { color: var(--pcg-text); font-weight: 600; }

/* product detail */
.product-hero { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center;
  padding-top: 24px; padding-bottom: 48px; }
@media (max-width: 900px) { .product-hero { grid-template-columns: minmax(0,1fr); gap: 24px; } }
.product-hero__media { background: var(--pcg-well); padding: 36px; display: flex; align-items: center; justify-content: center; }
.product-hero__media img { max-width: 100%; height: auto; display: block; }
.product-hero__copy { display: flex; flex-direction: column; gap: 16px; }
.product-hero__blurb { margin: 0; color: var(--pcg-text-muted); font-size: 16px; line-height: 1.65; }
.product-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.spec-table { border: 1px solid var(--pcg-border); }
.spec-row { display: grid; grid-template-columns: 170px minmax(0,1fr); font-family: var(--pcg-font-mono); font-size: 13px; }
.spec-row + .spec-row { border-top: 1px solid var(--pcg-border); }
.spec-row__k { padding: 11px 16px; color: var(--pcg-text-dim); border-right: 1px solid var(--pcg-border); }
.spec-row__v { padding: 11px 16px; }
.solution-list { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 36px; }
@media (max-width: 820px) { .solution-list { grid-template-columns: minmax(0,1fr); } }
.solution { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0;
  border-bottom: 1px solid var(--pcg-border); font-size: 14px; color: var(--pcg-text-muted); line-height: 1.5; }
.solution__mark { width: 6px; height: 6px; background: var(--pcg-red); flex: none; margin-top: 7px; }

/* solution detail */
.sol-layout { display: grid; grid-template-columns: 1.5fr 0.8fr; gap: 44px; align-items: start; }
/* No photos in the rail: it is only small cards, so the words get the room. */
@media (min-width: 901px) { .sol-layout:not(:has(.sol-hero)) { grid-template-columns: minmax(0, 1fr) 340px; } }
/* Beside a rail the text fills its column - the rail already bounds it. */
.sol-layout .article, .sol-layout .page-head__sub { max-width: none; }
@media (max-width: 900px) { .sol-layout { grid-template-columns: minmax(0,1fr); gap: 28px; } }
.sol-rail { display: flex; flex-direction: column; gap: 18px; }
.spec-bullets { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pcg-border); }
.spec-bullets li { padding: 12px 0 12px 22px; border-bottom: 1px solid var(--pcg-border); position: relative;
  font-size: 14px; color: var(--pcg-text-muted); line-height: 1.55; }
.spec-bullets li::before { content: ""; position: absolute; left: 0; top: 19px; width: 7px; height: 1px;
  background: var(--pcg-red); }
.partno-row { display: flex; gap: 10px; flex-wrap: wrap; }
.partno { font-family: var(--pcg-font-mono); font-size: 13px; border: 1px solid var(--pcg-border-strong);
  background: var(--pcg-surface); padding: 9px 14px; }
.sol-parent { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--pcg-text); }
.sol-parent img { width: 54px; height: 54px; object-fit: contain; background: var(--pcg-well); padding: 5px; }
.solution a { text-decoration: none; color: var(--pcg-text-muted); }
.solution a:hover { color: var(--pcg-red); }

/* editorial */
.article { max-width: var(--pcg-text-wide); }
.article p { margin: 0 0 16px; color: var(--pcg-text-muted); font-size: 16px; line-height: 1.7; }
.article__h2 { font-family: var(--pcg-font-display); font-size: 24px; text-transform: uppercase;
  letter-spacing: 0.02em; margin: 34px 0 12px; color: var(--pcg-text); }
.article__h3 { font-family: var(--pcg-font-display); font-size: 19px; letter-spacing: 0.02em;
  margin: 26px 0 10px; color: var(--pcg-text); }
.article__list { margin: 0 0 12px; padding-left: 20px; color: var(--pcg-text-muted); font-size: 16px; line-height: 1.7; }

/* standards */
.std-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
@media (max-width: 900px) { .std-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .std-grid { grid-template-columns: minmax(0,1fr); } }
.std-card { border: 1px solid var(--pcg-border); padding: 22px; display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: inherit; transition: border-color .2s ease, transform .2s ease; }
.std-card:hover { border-color: var(--pcg-red); transform: translateY(-3px); }
.std-card__name { font-family: var(--pcg-font-display); font-size: 20px; letter-spacing: 0.03em; }
.std-card__desc { font-size: 13px; color: var(--pcg-text-muted); line-height: 1.55; }

/* blog listing */
.feature-post { display: block; border: 1px solid var(--pcg-border-strong); border-left: 4px solid var(--pcg-red);
  background: var(--pcg-surface); padding: 32px 34px; text-decoration: none; color: inherit;
  transition: border-color .2s ease, transform .2s ease; margin-bottom: 28px; }
.feature-post:hover { transform: translateY(-2px); }
.feature-post:hover .feature-post__title { color: var(--pcg-red); }
.feature-post__meta { display: flex; align-items: center; gap: 14px; font-family: var(--pcg-font-mono);
  font-size: 12px; letter-spacing: 0.08em; color: var(--pcg-text-dim); margin-bottom: 12px; }
.feature-post__tag { color: var(--pcg-red); }
.feature-post__title { font-family: var(--pcg-font-display); font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15; margin: 0 0 12px; text-wrap: balance; max-width: 24ch; }
.feature-post__excerpt { margin: 0 0 16px; color: var(--pcg-text-muted); font-size: 16px;
  line-height: 1.65; max-width: 62ch; }
.feature-post__more { font-family: var(--pcg-font-mono); font-size: 13px; color: var(--pcg-red); }

.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .post-grid { grid-template-columns: minmax(0, 1fr); } }
.post-tile { border: 1px solid var(--pcg-border); padding: 22px; display: flex; flex-direction: column;
  gap: 10px; text-decoration: none; color: inherit; transition: border-color .2s ease, transform .2s ease; }
.post-tile:hover { border-color: var(--pcg-red); transform: translateY(-3px); }
.post-tile__date { font-family: var(--pcg-font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--pcg-text-dim); text-transform: uppercase; }
.post-tile__title { font-family: var(--pcg-font-display); font-size: 18px; line-height: 1.25;
  letter-spacing: 0.01em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; }
.post-tile:hover .post-tile__title { color: var(--pcg-red); }
.post-tile__excerpt { font-size: 13px; color: var(--pcg-text-muted); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.article__lead strong { color: var(--pcg-text); font-weight: 600; }
.article__h3 + .article__lead, .article__lead + .article__lead { margin-top: -4px; }
.article > p:first-child { font-size: 17px; color: var(--pcg-text); }

/* child cards (customizations under a platform, items under a category) */
.child-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .child-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px) { .child-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.child-card { border: 1px solid var(--pcg-border); display: flex; flex-direction: column;
  text-decoration: none; color: inherit; transition: border-color .2s ease, transform .2s ease; }
.child-card:hover { border-color: var(--pcg-red); transform: translateY(-3px); }
.child-card:hover .child-card__name { color: var(--pcg-red); }
.child-card__img { background: var(--pcg-well); height: 132px; display: flex; align-items: center;
  justify-content: center; overflow: hidden; }
.child-card__img img { max-width: 84%; max-height: 84%; width: auto; height: auto; object-fit: contain; }
.child-card__placeholder { width: 42px; height: 42px; border: 1px dashed var(--pcg-border-strong); }
.child-card__name { padding: 14px 16px; font-size: 13px; line-height: 1.4; color: var(--pcg-text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sol-hero { background: var(--pcg-well); padding: 22px; display: flex; align-items: center; justify-content: center; }
.sol-hero img { max-width: 100%; height: auto; display: block; }

/* trusted strip — a marquee fed from the admin (Logos) */
.trusted__marquee { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 60px, #000 calc(100% - 60px), transparent); mask-image: linear-gradient(to right, transparent, #000 60px, #000 calc(100% - 60px), transparent); }
/* The track holds two identical runs; -50% lands the second exactly where the
   first began, so the loop has no seam. Duration scales with nothing - a longer
   list simply moves at the same speed over a longer distance. */
.trusted__track { display: flex; align-items: center; gap: 56px; width: max-content; animation: trusted-scroll 40s linear infinite; }
.trusted__marquee:hover .trusted__track, .trusted__marquee:focus-within .trusted__track { animation-play-state: paused; }
.trusted__logo { display: flex; align-items: center; justify-content: center; height: 56px; }
.trusted__logo img { max-height: 40px; width: auto; max-width: 160px; object-fit: contain; filter: grayscale(1); opacity: .62; transition: filter .2s, opacity .2s; }
.trusted__marquee:hover .trusted__logo img { filter: grayscale(0); opacity: 1; }
@keyframes trusted-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Motion is a preference, not a detail: the strip still shows, it just sits still. */
@media (prefers-reduced-motion: reduce) { .trusted__track { animation: none; flex-wrap: wrap; width: auto; } }

/* FAQ search (SF-0007) */
.faq-search { max-width: 560px; margin: 0 0 28px; display: flex; flex-direction: column; gap: 6px; }
.faq-search[hidden], .faq-group[hidden], .faq__item[hidden], .faq-search__none[hidden] { display: none; }
.faq-search__none { margin: 6px 0 0; color: var(--pcg-text-muted); font-size: 15px; }

/* Products drop-down in the menu (SF-0008) */
.nav__drop { position: relative; display: inline-flex; white-space: nowrap; }
.nav__caret { font-size: 10px; margin-left: 2px; }
.nav__menu { display: none; position: absolute; top: 100%; left: -14px; z-index: 40; min-width: 230px;
  padding: 8px 0; margin-top: 8px; background: var(--pcg-bg); border: 1px solid var(--pcg-border);
  box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }  /* hover bridge */
.nav__menu a { display: block; padding: 8px 16px; white-space: nowrap; color: var(--pcg-text-muted); }
.nav__menu a:hover, .nav__menu a:focus { color: var(--pcg-text); background: var(--pcg-surface); }
.nav__drop:hover .nav__menu, .nav__drop:focus-within .nav__menu { display: block; }
.prod-group { scroll-margin-top: 24px; }
@media (max-width: 900px) { .nav__menu, .nav__caret { display: none !important; } }

/* Insight photos (SF-0015/0016) */
.article-hero { display: block; width: 100%; max-height: 460px; object-fit: cover; margin: 0 0 8px; border: 1px solid var(--pcg-border); }
.feature-post__img { display: block; margin: -32px -34px 20px -34px; }
.feature-post__img img, .post-tile__img img { display: block; width: 100%; object-fit: cover; }
.feature-post__img img { max-height: 340px; }
.post-tile__img { display: block; margin: -22px -22px 14px; }
.post-tile__img img { height: 170px; }

/* Editor HTML in articles (SF-0014) - same look as the old block format */
.article__html p, .article__html div { margin: 0 0 16px; color: var(--pcg-text-muted); font-size: 16px; line-height: 1.7; }
.article__html > :first-child { font-size: 17px; color: var(--pcg-text); }
.article__html h2 { font-family: var(--pcg-font-display); font-size: 22px; text-transform: uppercase; letter-spacing: 0.02em; margin: 30px 0 10px; color: var(--pcg-text); }
.article__html h3, .article__html h4 { font-family: var(--pcg-font-display); font-size: 19px; margin: 24px 0 8px; color: var(--pcg-text); }
.article__html ul, .article__html ol { margin: 0 0 14px; padding-left: 22px; color: var(--pcg-text-muted); font-size: 16px; line-height: 1.7; }
.article__html strong, .article__html b { color: var(--pcg-text); font-weight: 600; }
.article__html blockquote { margin: 0 0 16px; padding: 4px 0 4px 16px; border-left: 3px solid var(--pcg-red); color: var(--pcg-text); }
.article__html pre { background: var(--pcg-surface); padding: 12px 14px; overflow-x: auto; font-size: 14px; }
.article__html a { text-decoration: underline; }

/* FAQ search highlight (SF-0017) */
mark.faq-hit { background: #f7d6d8; color: var(--pcg-text); font-weight: 600; padding: 0 1px; border-radius: 2px; }

/* Header with a photo on the right (SF-0020, aligned in SF-0027): text and
   photo share a top edge, the photo has no frame and keeps its whole shape,
   sitting against the right edge of the content column. */
.page-head--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 42%); gap: 48px; align-items: start; }
.page-head--split .page-head__title { margin-bottom: 18px; }
.page-head__intro { max-width: none; }
.page-head__intro .article__html > :first-child { font-size: 17px; }
.page-head__img { display: block; width: 100%; height: auto; max-height: 380px; object-fit: contain; object-position: right top; }
@media (max-width: 820px) { .page-head--split { grid-template-columns: 1fr; } }

/* Quotation form choices (SF-0025): real radios/checkboxes styled as tap targets */
.rfq-group { border: 0; padding: 0; margin: 4px 0 6px; min-width: 0; }
.rfq-group legend { margin-bottom: 10px; padding: 0; }
.chip-opt { position: relative; cursor: pointer; }
.chip-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-opt span { display: inline-block; border: 1px solid var(--pcg-border-strong); padding: 12px 20px; font-family: var(--pcg-font-mono);
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pcg-text-muted); transition: border-color .15s, background .15s; }
.chip-opt:hover span { border-color: var(--pcg-text-muted); }
.chip-opt input:checked + span { border-color: var(--pcg-red); background: var(--pcg-surface-selected); color: var(--pcg-text); }
.chip-opt input:focus-visible + span { outline: 2px solid var(--pcg-red); outline-offset: 2px; }
/* Screen size only for laptop/tablet; detail boxes only when ticked. */
.rfq-screen, .rfq-detail { display: none; }
#rfq-form:has(input[name=product_type][value=laptop]:checked) .rfq-screen,
#rfq-form:has(input[name=product_type][value=tablet]:checked) .rfq-screen { display: block; }
#rfq-form:has(input[name="extras[]"][value=software]:checked) .rfq-detail--software,
#rfq-form:has(input[name="extras[]"][value=peripherals]:checked) .rfq-detail--peripherals { display: block; margin-top: 10px; }
.rfq-quoting { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; border-left: 3px solid var(--pcg-red); background: var(--pcg-surface); margin-bottom: 6px; }
.rail-card--email { border-color: var(--pcg-red); }

/* SF-0034: product / sub-page rail and partner badge */
.rail-card__note { margin: 0; font-size: 14px; color: var(--pcg-text-muted); line-height: 1.6; }
.ds-form { display: flex; flex-direction: column; gap: 10px; }
.ds-sent { margin: 0; font-size: 14px; line-height: 1.6; }
.page-title-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.page-title-row .page-head__title { margin: 0; }
.partner-badge { flex: none; width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--pcg-border); background: #fff;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden; padding: 12px; box-sizing: border-box; }
.partner-badge img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
@media (max-width: 600px) { .partner-badge { width: 56px; height: 56px; padding: 9px; } }

/* RMA address question: while it is open its own buttons are the way on, so
   the main Submit steps aside rather than offering a third, ambiguous choice.
   Editing the address clears the question (rma.blade.php) and Submit returns. */
#rma-form:has(#rma-address-check .notice) #rma-submit { display: none; }