/**
 * Professionals hub + NVMe explainer (mockup, dev only)
 *
 * Calmer register of the same brand: white and light-grey surfaces, one dark hero,
 * magenta reserved for the primary action, orange as a thin rule/accent only,
 * no RGB imagery, tabular numerals, sharp corners throughout.
 *
 * Loaded only by page-professionals.php and page-nvme-explained.php.
 *
 * @package TheCpuHub
 */

.pro {
    --pro-ink: #101010;
    --pro-ink-2: #1c1c1c;
    --pro-text: #1a1a1a;
    --pro-muted: #5a5a5a;
    --pro-line: #e3e3e3;
    --pro-surface: #f6f6f6;
    --pro-white: #ffffff;
    --pro-magenta: #dc4f91;
    --pro-magenta-dark: #c43f7e;
    --pro-orange: #e9622a;
    --pro-good: #1f7a4d;
    --pro-warn: #9a5b00;
    --pro-max: 1200px;
    --pro-gutter: 24px;

    background: var(--pro-white);
    color: var(--pro-text);
    font-family: var(--font-family, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: 16px;
    line-height: 1.65;
    font-variant-numeric: tabular-nums;
    overflow-x: clip;
}

body.pro-body { background: #ffffff; color: #1a1a1a; }

.pro *,
.pro *::before,
.pro *::after { border-radius: 0; box-sizing: border-box; }

.pro__wrap {
    max-width: var(--pro-max);
    margin: 0 auto;
    padding: 0 var(--pro-gutter);
}

.pro__section { padding: 88px 0; }
.pro__section--grey { background: var(--pro-surface); }
.pro__section--tight { padding: 56px 0; }

.pro h1, .pro h2, .pro h3, .pro h4 { color: var(--pro-ink); letter-spacing: -0.015em; text-wrap: balance; }
.pro h2 { font-size: clamp(26px, 2.6vw, 32px); font-weight: 700; line-height: 1.15; margin: 0 0 16px; }
.pro h3 { font-size: 20px; font-weight: 650; line-height: 1.3; margin: 0 0 8px; }
.pro p { margin: 0 0 16px; }

.pro__eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pro-muted);
    padding-left: 14px;
    border-left: 3px solid var(--pro-orange);
    margin-bottom: 16px;
}

.pro__lede { font-size: 19px; color: var(--pro-muted); max-width: 720px; }
.pro__head { max-width: 760px; margin-bottom: 48px; }

/* Buttons ---------------------------------------------------------------- */

.pro__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Same gradient as prod's .btn-primary, so the primary action reads as one system site-wide. */
.pro__btn--primary { background: linear-gradient(135deg, var(--pro-magenta), var(--pro-orange)); color: #fff; }
.pro__btn--primary:hover,
.pro__btn--primary:focus-visible { background: linear-gradient(135deg, var(--pro-magenta-dark), #d4551f); color: #fff; }
.pro__btn--ghost { border-color: currentColor; color: inherit; background: transparent; }
.pro__btn--ghost:hover,
.pro__btn--ghost:focus-visible { background: rgba(255, 255, 255, 0.08); }
.pro__btn:focus-visible { outline: 3px solid var(--pro-orange); outline-offset: 2px; }

.pro__link {
    color: var(--pro-ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--pro-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.pro__link:hover { color: var(--pro-magenta-dark); }

/* Hero ------------------------------------------------------------------- */

.pro-hero {
    background: var(--pro-ink);
    color: #f2f2f2;
    padding: 104px 0 0;
    border-bottom: 1px solid #2a2a2a;
}
.pro-hero .pro__eyebrow { color: #b8b8b8; }
.pro-hero h1 {
    color: #fff;
    font-size: clamp(34px, 5vw, 60px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.025em;
    max-width: 880px;
    margin: 0 0 24px;
}
.pro-hero--article { padding-bottom: 56px; }
.pro-hero--article .pro-hero__lede { margin-bottom: 12px; }
.pro-hero__lede { font-size: clamp(17px, 1.6vw, 20px); color: #c9c9c9; max-width: 680px; margin-bottom: 36px; }
.pro-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 72px; }

.pro-hero__facts {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #2c2c2c;
}
.pro-hero__fact {
    flex: 1 1 200px;
    padding: 28px 24px 32px 0;
    margin-right: 24px;
}
.pro-hero__fact strong {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 6px;
}
.pro-hero__fact span { font-size: 15px; color: #a9a9a9; }

/* Use-case cards --------------------------------------------------------- */

.pro-uses { display: flex; flex-wrap: wrap; gap: 1px; background: var(--pro-line); border: 1px solid var(--pro-line); }
.pro-use {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    background: var(--pro-white);
    padding: 32px 28px;
    min-width: 0;
}
.pro-use__icon { width: 28px; height: 28px; color: var(--pro-orange); margin-bottom: 20px; }
.pro-use__icon svg { width: 28px; height: 28px; stroke-width: 1.75; }
.pro-use__apps { font-size: 14px; color: var(--pro-muted); margin-bottom: 16px; }
.pro-use__key { font-size: 15px; font-weight: 600; color: var(--pro-ink); border-left: 3px solid var(--pro-orange); padding-left: 10px; margin-bottom: 16px; }
.pro-use__list { list-style: none; margin: 0 0 24px; padding: 0; font-size: 15px; }
.pro-use__list li { padding: 7px 0; border-top: 1px solid var(--pro-line); display: flex; justify-content: space-between; gap: 12px; }
.pro-use__list li span:first-child { color: var(--pro-muted); }
.pro-use__list li span:last-child { font-weight: 600; text-align: right; }
.pro-use__cta { margin-top: auto; font-size: 15px; }

/* Tiers ------------------------------------------------------------------ */

.pro-tiers { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.pro-tier {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    background: var(--pro-white);
    border: 1px solid var(--pro-line);
    border-top: 4px solid var(--pro-ink);
    padding: 32px 28px;
    min-width: 0;
}
.pro-tier--featured { border-top-color: var(--pro-orange); box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.35); }
.pro-tier__tag {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pro-orange);
    margin-bottom: 8px;
    min-height: 18px;
}
.pro-tier__name { font-size: 26px; font-weight: 700; margin: 0 0 4px; }
.pro-tier__for { color: var(--pro-muted); font-size: 15px; margin-bottom: 20px; min-height: 50px; }
.pro-tier__price { font-size: 15px; color: var(--pro-muted); margin-bottom: 20px; }
.pro-tier__price strong { font-size: 30px; color: var(--pro-ink); font-weight: 700; margin-left: 4px; }
.pro-tier__specs { margin: 0 0 24px; padding: 0; list-style: none; font-size: 15px; }
.pro-tier__specs li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--pro-line); }
.pro-tier__specs li span:first-child { flex: 0 0 88px; color: var(--pro-muted); }
.pro-tier__specs li span:last-child { flex: 1; font-weight: 550; }
.pro-tier .pro__btn { margin-top: auto; }
.pro-tier__btn--dark { background: var(--pro-ink); color: #fff; }
.pro-tier__btn--dark:hover, .pro-tier__btn--dark:focus-visible { background: #333; color: #fff; }

.pro-note {
    margin-top: 28px;
    padding: 16px 20px;
    border-left: 3px solid var(--pro-orange);
    background: var(--pro-white);
    font-size: 15px;
    color: var(--pro-muted);
}
.pro__section--grey .pro-note { background: var(--pro-white); }
.pro-note strong { color: var(--pro-ink); }

/* Storage choice --------------------------------------------------------- */

.pro-split { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.pro-split > * { flex: 1 1 380px; min-width: 0; }

.pro-drives { display: flex; flex-wrap: wrap; gap: 16px; }
.pro-drive {
    flex: 1 1 240px;
    border: 1px solid var(--pro-line);
    padding: 24px;
    background: var(--pro-white);
    min-width: 0;
}
.pro-drive--fastest { border-color: var(--pro-ink); outline: 1px solid var(--pro-ink); }
.pro-drive__label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pro-muted); }
.pro-drive h3 { font-size: 24px; margin: 4px 0 12px; }
.pro-drive ul { margin: 0 0 12px; padding-left: 18px; font-size: 15px; }
.pro-drive li { margin-bottom: 6px; }
.pro-drive__best { font-size: 14px; color: var(--pro-muted); border-top: 1px solid var(--pro-line); padding-top: 12px; margin: 0; }

/* Explainer -------------------------------------------------------------- */

.pro-explain { display: flex; flex-wrap: wrap; gap: 1px; background: var(--pro-line); border: 1px solid var(--pro-line); margin-bottom: 40px; }
.pro-explain__item { flex: 1 1 260px; background: var(--pro-white); padding: 28px; min-width: 0; }
.pro-explain__num { font-size: 13px; font-weight: 700; color: var(--pro-orange); letter-spacing: 0.08em; margin-bottom: 8px; }
.pro-explain__item p { font-size: 15.5px; color: #333; margin: 0; }

.pro-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--pro-line); background: var(--pro-white); }
.pro-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.pro-table caption { text-align: left; padding: 16px 20px; font-size: 14px; color: var(--pro-muted); caption-side: bottom; border-top: 1px solid var(--pro-line); }
.pro-table th, .pro-table td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--pro-line); vertical-align: top; }
.pro-table thead th { background: var(--pro-ink); color: #fff; font-weight: 600; font-size: 14px; }
.pro-table tbody th { font-weight: 600; color: var(--pro-muted); width: 32%; }
.pro-table .is-good { color: var(--pro-good); font-weight: 600; }
.pro-table .is-warn { color: var(--pro-warn); font-weight: 600; }

/* Write-endurance bar (TBW) */
.pro-bars { margin: 32px 0 0; padding: 0; list-style: none; }
.pro-bars li { margin-bottom: 18px; }
.pro-bars__label { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; margin-bottom: 6px; }
.pro-bars__label strong { color: var(--pro-ink); }
.pro-bars__track { height: 14px; background: var(--pro-surface); border: 1px solid var(--pro-line); }
.pro-bars__fill { height: 100%; background: var(--pro-ink); }
.pro-bars__fill--light { background: #9a9a9a; }

/* Trust strip ------------------------------------------------------------ */

.pro-trust { display: flex; flex-wrap: wrap; border-top: 1px solid var(--pro-line); border-bottom: 1px solid var(--pro-line); }
.pro-trust__item { flex: 1 1 220px; padding: 28px 24px 28px 0; display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.pro-trust__item svg { flex: 0 0 24px; width: 24px; height: 24px; color: var(--pro-ink); stroke-width: 1.75; margin-top: 3px; }
.pro-trust__item strong { display: block; color: var(--pro-ink); font-size: 16px; }
.pro-trust__item span { font-size: 14.5px; color: var(--pro-muted); }

/* CTA -------------------------------------------------------------------- */

.pro-cta { background: var(--pro-ink); color: #eaeaea; padding: 80px 0; }
.pro-cta__inner { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.pro-cta h2 { color: #fff; margin-bottom: 8px; }
.pro-cta p { color: #bdbdbd; margin: 0; max-width: 620px; }
.pro-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.pro-mock-flag {
    background: #fff4e5;
    color: #6b4200;
    font-size: 13px;
    text-align: center;
    padding: 8px 16px;
    border-bottom: 1px solid #f1d4a8;
}

/* Article (NVMe explained) ---------------------------------------------- */

.pro-article { max-width: 760px; margin: 0 auto; }
.pro-article h2 { font-size: clamp(24px, 2.6vw, 30px); margin-top: 56px; }
.pro-article h3 { margin-top: 32px; }
.pro-article ul, .pro-article ol { padding-left: 22px; margin: 0 0 16px; }
.pro-article li { margin-bottom: 8px; }
.pro-article .pro-table-wrap { margin: 24px 0; }
.pro-article__meta { font-size: 14px; color: #a9a9a9; margin-top: 8px; }
.pro-article__toc { background: var(--pro-surface); border-left: 3px solid var(--pro-ink); padding: 20px 24px; margin: 0 0 40px; font-size: 15px; }
.pro-article__toc ol { margin: 8px 0 0; }
.pro-article__sources { font-size: 14px; color: var(--pro-muted); border-top: 1px solid var(--pro-line); margin-top: 56px; padding-top: 24px; }
.pro-article__sources a { color: var(--pro-muted); word-break: break-word; }
.pro-article code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: var(--pro-surface); padding: 1px 5px; overflow-wrap: anywhere; }
.pro-article__sources ul { margin: 8px 0 0; padding-left: 18px; }
.pro-article__sources li { margin-bottom: 4px; }
.pro-article .pro-explain { margin: 24px 0; }
.pro-details { margin: 16px 0 24px; border: 1px solid var(--pro-line); background: var(--pro-white); }
.pro-details > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: 15px; color: var(--pro-ink); list-style-position: inside; }
.pro-details > summary:focus-visible { outline: 3px solid var(--pro-orange); outline-offset: 2px; }
.pro-details[open] > summary { border-bottom: 1px solid var(--pro-line); }
.pro-article .pro-details .pro-table-wrap { margin: 0; border: 0; }
.pro-keypoint { border: 1px solid var(--pro-ink); padding: 20px 24px; margin: 24px 0; background: var(--pro-white); }
.pro-keypoint p:last-child { margin: 0; }

/* Product-page panel (dark single-product summary) --------------------- */

.pro-fit {
    margin: 16px 0;
    padding: 18px 20px;
    background: #1a1a1a;
    border: 1px solid #2e2e2e;
    border-left: 3px solid #e9622a;
    color: #e5e5e5;
    font-family: var(--font-family, "Inter", sans-serif);
    font-size: 14px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
.pro-fit * { border-radius: 0; }
.pro-fit__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 6px; }
.pro-fit__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #e9622a; }
.pro-fit__tier { font-size: 16px; font-weight: 650; color: #fff; }
.pro-fit__specs { color: #b8b8b8; margin: 0 0 12px; }
.pro-fit__uses { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pro-fit__use { display: flex; gap: 8px; padding: 5px 10px; border: 1px solid #333; font-size: 13px; }
.pro-fit__use span:last-child { font-weight: 600; }
.pro-fit__use--yes { border-color: #3d6b52; }
.pro-fit__use--yes span:last-child { color: #7fd1a3; }
.pro-fit__use--ok span:last-child { color: #d9d9d9; }
.pro-fit__use--no { opacity: 0.55; }
.pro-fit__drive, .pro-fit__links { margin: 0 0 6px; color: #b8b8b8; }
.pro-fit__links { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.pro-fit a { color: #fff; text-decoration: underline; text-decoration-color: #e9622a; text-underline-offset: 3px; }
.pro-fit a:hover { color: #dc4f91; }
.pro-fit a:focus-visible { outline: 2px solid #e9622a; outline-offset: 2px; }

body.pro-preview-body { background: #101010; color: #f0f0f0; }
.pro-preview { background: #101010; color: #f0f0f0; font-family: var(--font-family, "Inter", sans-serif); padding-bottom: 64px; overflow-x: clip; }
.pro-preview .pro-mock-flag { margin-bottom: 32px; }
.pro-preview__grid { max-width: 1400px; margin: 0 auto; padding: 0 24px; display: flex; flex-wrap: wrap; gap: 32px; }
.pro-preview__summary { flex: 1 1 560px; min-width: 0; border-top: 1px solid #2e2e2e; padding-top: 20px; }
.pro-preview__title { font-size: 22px; font-weight: 600; color: #f8fafc; line-height: 1.3; margin: 0 0 8px; }
.pro-preview__price { font-size: 24px; font-weight: 700; color: #dc4f91; margin: 0 0 8px; }
.pro-preview__price small { font-size: 14px; }
.pro-preview__stub { font-size: 12px; color: #6f6f6f; border: 1px dashed #333; padding: 8px 12px; margin: 0; }
.pro-preview__none { font-size: 14px; color: #9a9a9a; margin: 16px 0; padding: 12px 16px; border: 1px dashed #444; }

/* Mobile ----------------------------------------------------------------- */

@media (max-width: 720px) {
    .pro { --pro-gutter: 16px; }
    .pro__section { padding: 56px 0; }
    .pro-hero { padding-top: 64px; }
    .pro-hero__actions { margin-bottom: 48px; }
    .pro-hero__actions .pro__btn { flex: 1 1 100%; }
    .pro-hero__fact { flex-basis: 45%; padding: 20px 12px 20px 0; margin-right: 0; }
    .pro-hero__fact strong { font-size: 24px; }
    .pro-use { padding: 24px 20px; }
    .pro-use .cpv-card-img { margin: -24px -20px 20px; } /* match the mobile card padding */
    .pro-tier { padding: 28px 20px; }
    .pro-tier__for { min-height: 0; }
    .pro-split { gap: 32px; }
    .pro-cta { padding: 56px 0; }
    .pro-cta__actions, .pro-cta__actions .pro__btn { width: 100%; }
    .pro-trust__item { flex-basis: 100%; padding: 18px 0; border-bottom: 1px solid var(--pro-line); }
    .pro-trust__item:last-child { border-bottom: 0; }
    .pro-preview__grid { padding: 0 16px; }
    .pro-preview__summary { flex-basis: 100%; }
    .pro-table { min-width: 0; font-size: 14px; }
    .pro-table--wide { font-size: 13px; }
    .pro-table--wide th, .pro-table--wide td { padding: 10px 6px; }
    .pro-table th, .pro-table td { padding: 12px 10px; }
    .pro-table caption { padding: 12px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .pro__btn { transition: none; }
}