/* ============================================================
   VOCSO Learn brand reskin — navy-led, orange accent.

   Two orange product pages already exist (StackRoom is warm orange +
   cream, PeopleGrid is white + orange), so a third would make the family
   look like one page repeated. Here the LMS's own top-bar navy leads and
   its orange stays as the accent, which keeps all thirteen product
   screenshots sitting naturally on the page while the page itself reads
   clearly different from its siblings.

   Palette is taken from the app: navy #022f50 (top bar), orange #ea580c
   (buttons, active states), green #059669 (Completed chips).

   Scoped to .vocso-learn-page so it never touches another product page.
   NOTE: no global --color-* overrides — those cascade into shared
   components (footer, buttons) and spread colour where it is not wanted.
   The --vl-* names below are local to this page and cannot collide.

   NOTE: the product name is still a placeholder. When it is decided,
   rename this file and swap .vocso-learn-page along with the .php.
   ============================================================ */

.vocso-learn-page {
  --vl-navy: #022f50;
  --vl-navy-deep: #01203a;
  --vl-navy-ink: #011526;
  --vl-orange: #ea580c;
  --vl-orange-dark: #c2410c;
  --vl-orange-lt: #fb923c;
  --vl-soft: #f1f5f9;
  --vl-soft-deep: #e2e8f0;
  --vl-green: #059669;
}

/* Product-suite "Coming soon" badge -> cool tint on this page */
.vocso-learn-page .vocso-related-products .product-soon-badge {
  background: #dbeafe;
  color: var(--vl-navy);
}

/* ---- hardcoded-colour overrides from product-layout.css ---- */

/* The primary CTA keeps the app's orange: it is the one thing on the page
   that has to pull the eye, and navy-on-navy would bury it. */
body.vocso-learn-page .speedupmysite-btn {
  background-color: var(--vl-orange) !important;
  border: 0.2rem solid var(--vl-orange) !important;
  background-image: url(../images/white-next-arrow.svg);
  background-repeat: no-repeat;
}

body.vocso-learn-page .speedupmysite-btn:hover {
  background-color: var(--vl-navy) !important;
  border: 0.2rem solid var(--vl-navy) !important;
}

.vocso-learn-page .btn-proposal.secondary-btn {
  border: 0.2rem solid var(--vl-navy) !important;
}

.vocso-learn-page .btn-proposal.secondary-btn:hover {
  border: 0.2rem solid var(--vl-orange) !important;
}

.vocso-learn-page .industry-icon,
.vocso-learn-page .feature-icon {
  color: var(--vl-navy);
}

.vocso-learn-page .vocso-stack-card:hover .vocso-toggle-btn {
  background: var(--vl-navy) url(../images/white-next-arrow.svg) no-repeat;
}

.vocso-learn-page .stack-table tbody tr:hover {
  background: rgba(2, 47, 80, 0.05);
}

.vocso-learn-page .genai-related-links a:hover .explore-btn {
  color: var(--vl-orange);
}

.vocso-learn-page .cta-card {
  background:
    radial-gradient(at 0% 0%, rgba(2, 47, 80, 0.22) 0%, transparent 50%),
    radial-gradient(at 100% 100%, rgba(234, 88, 12, 0.12) 0%, transparent 55%),
    var(--vl-soft);
}

.vocso-learn-page .cta-eyebrow {
  background: rgba(2, 47, 80, 0.10);
}

.vocso-learn-page .related-intro-card {
  background:
    radial-gradient(circle at 20% 95%, rgba(234, 88, 12, 0.95) 0 18%, transparent 18.5%),
    linear-gradient(145deg, var(--vl-navy) 0%, var(--vl-navy-deep) 100%);
  box-shadow: 0 2rem 4.8rem rgba(2, 47, 80, 0.26);
}

.vocso-learn-page .intro-pattern,
.vocso-learn-page .dot-pattern.blue {
  background-image: radial-gradient(var(--vl-orange-lt) 1.6px, transparent 1.6px);
}

.vocso-learn-page .intro-circle {
  background: rgba(251, 146, 60, 0.84);
}

.vocso-learn-page .service-icon {
  box-shadow: 0 1rem 2.4rem rgba(2, 47, 80, 0.10);
}

.vocso-learn-page .industry-visual-bg {
  background:
    radial-gradient(circle at 30% 30%, rgba(234, 88, 12, 0.30), transparent 34%),
    radial-gradient(circle at 75% 45%, rgba(2, 47, 80, 0.30), transparent 36%),
    linear-gradient(135deg, rgba(2, 47, 80, 0.55), #020202 62%);
}

/* Hero and demo-video grounds: a cool wash, not the default green.
   The navy side (left, and the base glow) runs 30% stronger than the first
   pass — the frame read too washed out against the white page. The warm
   right-hand glow is unchanged so the two sides stay distinct. */
.vocso-learn-page .banner-wrap,
.vocso-learn-page .sales-video-card {
  background:
    radial-gradient(at 15% 20%, rgba(2, 47, 80, 0.21) 0px, transparent 50%),
    radial-gradient(at 85% 25%, rgba(234, 88, 12, 0.16) 0px, transparent 45%),
    radial-gradient(at 50% 90%, rgba(2, 47, 80, 0.10) 0px, transparent 95%),
    #ffffff;
}

.vocso-learn-page .datasense-trust-badge__label {
  background: var(--vl-navy);
}

.vocso-learn-page .datasense-trust-badge__arrow {
  color: var(--vl-orange);
}

.vocso-learn-page .datasense-section-badge {
  border: 1px solid rgba(2, 47, 80, 0.16);
  color: var(--vl-navy);
  box-shadow: 0 1rem 2.8rem rgba(2, 47, 80, 0.07);
}

.vocso-learn-page .datasense-feature-icon {
  background: var(--vl-soft);
  color: var(--vl-navy);
}

.vocso-learn-page .datasense-feature-card:nth-child(2) .datasense-feature-icon {
  color: var(--vl-orange-dark);
}

/* Product-preview cards -> cool tint (the default is a light green) */
.vocso-learn-page .datasense-feature-card {
  background: #eef3f8;
}

.darkmode .vocso-learn-page .datasense-feature-card {
  background: var(--color-neutral-dark);
}

.vocso-learn-page .ds-usecases-section {
  background: rgba(226, 232, 240, 0.75);
}

.darkmode .vocso-learn-page .ds-usecases-section {
  background: var(--color-secondary);
}

.vocso-learn-page .ds-usecases-header span,
.vocso-learn-page .ds-capabilites-cat {
  color: var(--vl-orange-dark);
}

.vocso-learn-page .ds-status-pill span {
  background: linear-gradient(135deg, var(--vl-orange), var(--vl-navy));
}

.vocso-learn-page .ds-compare-row.active,
.vocso-learn-page .ds-inventory-item span {
  background: var(--vl-soft);
}

.vocso-learn-page .ds-line-chart span,
.vocso-learn-page .ds-forecast-bars span {
  background: linear-gradient(90deg, var(--vl-navy), var(--vl-orange));
}

.vocso-learn-page .ds-forecast-visual {
  background:
    radial-gradient(circle at 80% 25%, rgba(2, 47, 80, 0.12), transparent 34%),
    #ffffff;
}

.vocso-learn-page .sales-star {
  color: var(--vl-orange);
}

.vocso-learn-page .sales-play-btn span {
  border-left: 1.8rem solid var(--vl-orange);
}

.vocso-learn-page .ds-query-box {
  color: var(--vl-navy);
}

.vocso-learn-page .ds-outcome-box {
  border: 1px solid rgba(2, 47, 80, 0.09);
}

.vocso-learn-page .ds-outcome-box:hover {
  box-shadow: 0 1.8rem 4.5rem rgba(2, 47, 80, 0.11);
}

.vocso-learn-page .ds-outcome-icon {
  box-shadow: inset 0 0 0 1px rgba(2, 47, 80, 0.07);
}

.vocso-learn-page .outcome-speed h3,
.vocso-learn-page .outcome-cost h3,
.vocso-learn-page .outcome-accuracy h3,
.vocso-learn-page .outcome-sql h3 {
  color: var(--vl-navy);
}

.vocso-learn-page .outcome-sql .ds-outcome-icon {
  color: var(--vl-orange-dark);
}

.vocso-learn-page .ds-outcomes-btn:hover {
  background: var(--vl-navy-deep);
}

/* "Real impact" and security bands -> cool wash (default is a light green) */
.vocso-learn-page .ds-outcomes-section,
.vocso-learn-page .topology {
  background: var(--vl-soft);
}

.darkmode .vocso-learn-page .ds-outcomes-section {
  background: var(--color-secondary);
}

.darkmode .vocso-learn-page .topology {
  background: var(--color-black-fixed);
}

.vocso-learn-page .compare-col-left {
  background: rgba(2, 47, 80, 0.06);
}

.darkmode .vocso-learn-page .compare-col-left {
  background: var(--color-border);
}

.vocso-learn-page .compare-col-head,
.vocso-learn-page .compare-cell,
.vocso-learn-page .feature-cell {
  border-bottom: 1px solid rgba(2, 47, 80, 0.09);
}

.vocso-learn-page .compare-cell-left {
  border-color: rgba(2, 47, 80, 0.09);
}

.darkmode .vocso-learn-page .feature-cell,
.darkmode .vocso-learn-page .compare-cell,
.darkmode .vocso-learn-page .compare-cell-left,
.darkmode .vocso-learn-page .compare-col-head {
  border-bottom: 1px solid #35383c;
}

/* The "ours" column header sits on a black band. The template writes it in
   bright green, which is off-palette here; white reads cleanest and lets the
   product name carry the column on its own. */
.vocso-learn-page .compare-col-head-green {
  color: #ffffff;
}

.vocso-learn-page .head-icon-green {
  color: var(--vl-green);
  box-shadow: 0 0.6rem 1.8rem rgba(5, 150, 105, 0.10);
}

/* Row ticks stay green: that is the pass signal the app itself uses. */
.vocso-learn-page .cell-status.status-green {
  color: var(--vl-green);
}

.vocso-learn-page .v3-content {
  box-shadow: 0 1.8rem 4.5rem rgba(2, 47, 80, 0.09);
}

.vocso-learn-page .v3-content strong,
.vocso-learn-page .v3-chip-row span {
  color: var(--vl-navy);
  border: 1px solid rgba(2, 47, 80, 0.28);
}

/* Problem-section insight card -> deep navy with a warm corner glow */
.vocso-learn-page .v3-insight-card {
  background:
    radial-gradient(circle at 12% 15%, rgba(234, 88, 12, 0.26), transparent 32%),
    linear-gradient(135deg, var(--vl-navy) 0%, var(--vl-navy-ink) 100%);
  box-shadow: 0 2.6rem 7rem rgba(2, 47, 80, 0.28);
}

/* The card is dark now, but the template writes its copy in black (it was
   designed against a bright green card). Every text layer inside has to be
   lifted, or the whole panel reads as empty. The eyebrow rule deliberately
   excludes .v3-progress so the percentage labels keep their own colours. */
.vocso-learn-page .v3-insight-card > div:not(.v3-progress) > span {
  color: rgba(255, 255, 255, 0.72);
}

.vocso-learn-page .v3-insight-card h3 {
  color: #ffffff;
}

.vocso-learn-page .v3-insight-card p {
  color: #d7e3ee;
}

.vocso-learn-page .v3-progress b {
  color: rgba(255, 255, 255, 0.82);
}

/* The bars climb from a faint wash to the orange punchline. The first two are
   translucent white rather than navy: navy bars on a navy card disappeared. */
.vocso-learn-page .v3-progress div:nth-child(1) span { background: rgba(255, 255, 255, 0.14); }
.vocso-learn-page .v3-progress div:nth-child(2) span { background: rgba(255, 255, 255, 0.22); }
.vocso-learn-page .v3-progress div:nth-child(3) span { background: var(--vl-soft-deep); color: var(--vl-navy); }
.vocso-learn-page .v3-progress div:nth-child(4) span { background: #fdf1e7; color: var(--vl-orange-dark); }
.vocso-learn-page .v3-progress div:nth-child(5) span { background: var(--vl-orange); color: #ffffff; }

.vocso-learn-page .gcard .tag {
  color: var(--vl-navy);
  border: 1px solid rgba(2, 47, 80, 0.28);
}

.vocso-learn-page .gcard .ic,
.vocso-learn-page p.lbl span {
  color: var(--vl-navy);
}

.vocso-learn-page .enclave-badge {
  background: var(--vl-orange);
}

.vocso-learn-page .gengine {
  background: linear-gradient(160deg, var(--vl-navy) 0%, var(--vl-navy-ink) 100%);
  border: 1px solid rgba(234, 88, 12, 0.35);
}

.vocso-learn-page .gengine::before {
  background: radial-gradient(80% 60% at 50% 0%, rgba(234, 88, 12, 0.22), transparent 60%);
}

.vocso-learn-page .gengine .shield {
  background: rgba(234, 88, 12, 0.16);
  border: 1px solid rgba(234, 88, 12, 0.40);
}

.vocso-learn-page .gengine p {
  color: #d7e3ee;
}

.vocso-learn-page .gengine .retention {
  color: var(--vl-orange-lt);
  border: 1px solid rgba(234, 88, 12, 0.50);
  background: rgba(234, 88, 12, 0.12);
}

/* the "02" index sits on the navy card, so it needs the warm accent to read */
.vocso-learn-page .genguine-number {
  color: var(--vl-orange-lt);
}

.vocso-learn-page .glasswrap > .gcol:first-of-type::after,
.vocso-learn-page .glasswrap > .gcol:last-of-type::before {
  background: radial-gradient(circle at 5px 50%, rgba(2, 47, 80, 0.95) 2.6px, transparent 3px);
}

/* "How it works" methodology: step numbers and eyebrow */
.vocso-learn-page .process-number,
.vocso-learn-page .ai-process-eyebrow {
  color: var(--vl-orange-dark);
}

/* There is no product mark yet. The template's stand-in, highlight-icon.png,
   is DataSense's own shape, so it is no more neutral than the PeopleGrid mark
   it replaced -- neither belongs on this page.

   The "how it works" bullets now use black-tick-arrow.svg, a plain checkmark
   the industry accordion on this same page already uses. It ships black, and
   the template tints it green, so this chain rebuilds it in navy. The value
   is solved, not eyeballed: it lands on exactly rgb(2, 47, 80). Scoped to
   .ai-process-card on purpose -- the accordion keeps the shared default. */
.vocso-learn-page .ai-process-card .process-points li img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(61%) saturate(984%) hue-rotate(170deg) brightness(75%) contrast(105%);
}

/* The six matrix cards drop the icon altogether and take a plain accent bar
   drawn in CSS. It needs no asset, cannot be mistaken for anyone's logo, and
   the <img> is only hidden -- drop a real mark in later and it comes back by
   deleting these two rules. */
.vocso-learn-page .deploy-sym-v3-matrix article > span img {
  display: none;
}

.vocso-learn-page .deploy-sym-v3-matrix article > span {
  display: block;
  width: 3.2rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--vl-orange);
  margin-bottom: 4.6rem;
}

/* Department tabs: active and hover label. The template kept the original
   tab ids, so these still match even though the labels are LMS roles now. */
.vocso-learn-page #tab-ceo:checked ~ .ds-dept-tabs label[for="tab-ceo"],
.vocso-learn-page #tab-sales:checked ~ .ds-dept-tabs label[for="tab-sales"],
.vocso-learn-page #tab-finance:checked ~ .ds-dept-tabs label[for="tab-finance"],
.vocso-learn-page #tab-hr:checked ~ .ds-dept-tabs label[for="tab-hr"],
.vocso-learn-page #tab-procurement:checked ~ .ds-dept-tabs label[for="tab-procurement"],
.vocso-learn-page #tab-support:checked ~ .ds-dept-tabs label[for="tab-support"],
.vocso-learn-page .ds-dept-tabs label:hover {
  color: var(--vl-navy);
}

/* ============================================================
   Deliberately NOT reskinned, per the standing rule for product pages:
   the FAQ section, the closing CTA button and the industry accordion
   keep the shared default treatment on every product page.
   ============================================================ */