/* =====================================================================
   Barrdega — Editorial refresh for key inner pages
   ---------------------------------------------------------------------
   Applies the homepage's look (see css/home.css) to About, the logisticaHQ
   solution pages and the Zebra product hubs, without touching their markup
   text, URLs or SEO tags. Everything is scoped under body.page-refresh so the
   ~3,600 product pages that share styles.min.css are unaffected.

   Rule: .section--dark bands stay navy. Several of these pages put light
   inline text colors inside them, so turning them light would break contrast.

   The tokens below mirror the homepage tokens in css/home.css; keep the two
   blocks in sync if the palette changes.
   ===================================================================== */
.page-refresh {
  --rf-paper:       #F6F2EA;
  --rf-paper-deep:  #EDE6D8;
  --rf-paper-lift:  #FBF9F4;
  --rf-ink:         #0A1628;
  --rf-muted:       #4F5869;   /* 6.4:1 on paper */
  --rf-line:        #E0D6C4;
  --rf-line-strong: #C9BBA2;
  --rf-amber-ink:   #8A5A10;   /* amber that passes AA for small text */
  --rf-amber-wash:  #F3E3C3;
  --rf-r2: 6px; --rf-r3: 10px; --rf-r4: 12px;
  --rf-edge:   0 0 0 1px var(--rf-line);
  --rf-hi:     inset 0 1px 0 rgba(255,255,255,.75);
  --rf-lift-1: 0 1px 2px rgba(10,22,40,.05), 0 2px 6px rgba(10,22,40,.04);
  --rf-lift-2: 0 2px 4px rgba(10,22,40,.05), 0 14px 32px -8px rgba(10,22,40,.12);

  background: var(--rf-paper);
}

/* The shared header is transparent with a white logo, made for dark heroes.
   These heroes are light now, so the header stays in its solid navy state. */
.page-refresh .site-header { background: rgba(10, 22, 40, 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* =====================================================================
   PAGE HERO
   WHY: left-aligned editorial title on paper instead of a centered navy
   banner. The breadcrumb becomes a mono kicker line above a hairline.
   ===================================================================== */
.page-refresh .page-hero { background: var(--rf-paper); text-align: left; padding: calc(36px + var(--header-height) + 44px) 0 72px; border-bottom: 1px solid var(--rf-line); }
.page-refresh .page-hero .container { text-align: left; }
.page-refresh .breadcrumb {
  justify-content: flex-start; flex-wrap: wrap; gap: 6px 10px; padding-bottom: 28px; margin-bottom: 36px;
  border-bottom: 1px solid var(--rf-line); color: var(--rf-muted);
  font: 500 var(--text-xs)/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.page-refresh .breadcrumb a { color: var(--rf-amber-ink); }
.page-refresh .breadcrumb a:hover { color: var(--rf-ink); }
.page-refresh .page-hero h1 { color: var(--rf-ink); font-size: clamp(2.5rem, 1.1rem + 5vw, 5.5rem); font-weight: 600; line-height: .96; letter-spacing: -.045em; max-width: 16ch; text-wrap: balance; }
.page-refresh .page-hero p { color: var(--rf-muted); font-size: var(--text-lg); line-height: 1.6; max-width: 56ch; margin: 24px 0 0; }

/* Zebra hubs show two counters in the hero: set them as a ledger row. */
.page-refresh .hero-stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 44px; border-top: 1px solid var(--rf-line-strong); justify-content: flex-start; }
.page-refresh .hero-stats .stat { text-align: left; padding: 22px 44px 0 0; background: none; border: 0; }
.page-refresh .hero-stats .stat + .stat { padding-left: 28px; border-left: 1px solid var(--rf-line); }
.page-refresh .stat-number { color: var(--rf-ink); font-family: var(--font-display); font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.page-refresh .stat-label { color: var(--rf-muted); font: 500 var(--text-xs)/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; margin-top: 8px; }

/* =====================================================================
   SECTIONS (light bands only; .section--dark is left as designed)
   ===================================================================== */
.page-refresh .section:not(.section--dark) { background: var(--rf-paper); }
.page-refresh .section.section--gray { background: var(--rf-paper-deep); } /* same specificity as the :not() rule above, so source order wins */
.page-refresh .section:not(.section--dark) .section-overline { font-family: var(--font-mono); font-weight: 500; letter-spacing: .1em; color: var(--rf-amber-ink); }
.page-refresh .section:not(.section--dark) .section-header { text-align: left; max-width: none; margin-left: 0; }
.page-refresh .section:not(.section--dark) .section-header h2 { color: var(--rf-ink); font-weight: 600; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.5rem); line-height: 1.02; letter-spacing: -.035em; max-width: 18ch; }
.page-refresh .section:not(.section--dark) .section-header p { color: var(--rf-muted); max-width: 56ch; margin-left: 0; }
.page-refresh .section:not(.section--dark) .feature-text h2 { color: var(--rf-ink); font-weight: 600; letter-spacing: -.03em; }
.page-refresh .section:not(.section--dark) .feature-text p,
.page-refresh .section:not(.section--dark) .feature-list li { color: var(--rf-muted); }
.page-refresh .section:not(.section--dark) .feature-list li svg { color: var(--rf-amber-ink); }
.page-refresh .section:not(.section--dark) .feature-list li strong { color: var(--rf-ink); }
.page-refresh .section:not(.section--dark) .feature-text .section-overline { color: var(--rf-amber-ink); font-family: var(--font-mono); font-weight: 500; }
.page-refresh .feature-image img { border-radius: var(--rf-r4); box-shadow: var(--rf-edge), var(--rf-lift-2); }

/* Cards: layered hairline + inner highlight, not flat borders. */
.page-refresh .section:not(.section--dark) .solution-card,
.page-refresh .section:not(.section--dark) .office-card {
  background: var(--rf-paper-lift); border: 0; border-radius: var(--rf-r3);
  box-shadow: var(--rf-edge), var(--rf-hi), var(--rf-lift-1);
}
.page-refresh .section:not(.section--dark) .solution-card::before { background: var(--amber); height: 2px; }
.page-refresh .section:not(.section--dark) .solution-card:hover { box-shadow: var(--rf-edge), var(--rf-hi), var(--rf-lift-2); }
.page-refresh .section:not(.section--dark) .solution-card h3 { color: var(--rf-ink); font-weight: 600; }
.page-refresh .section:not(.section--dark) .solution-card p { color: var(--rf-muted); }
.page-refresh .section:not(.section--dark) .solution-card-link { color: var(--rf-ink); }
.page-refresh .section:not(.section--dark) .solution-card:hover .solution-card-link { color: var(--rf-amber-ink); }
.page-refresh .section:not(.section--dark) .product-card { background: var(--rf-paper-lift); border: 0; border-radius: var(--rf-r2); box-shadow: var(--rf-edge), var(--rf-hi), var(--rf-lift-1); }
.page-refresh .section:not(.section--dark) .product-card:hover { box-shadow: var(--rf-edge), var(--rf-hi), var(--rf-lift-2); }

/* Buttons on light bands: outline/secondary become ink outlines. */
.page-refresh .section:not(.section--dark) .btn--outline,
.page-refresh .cta-banner .btn--secondary { color: var(--rf-ink); background: var(--rf-paper-lift); border: 0; box-shadow: inset 0 0 0 1px var(--rf-line-strong), var(--rf-hi); }
.page-refresh .section:not(.section--dark) .btn--outline:hover,
.page-refresh .cta-banner .btn--secondary:hover { color: var(--rf-ink); box-shadow: inset 0 0 0 1px var(--rf-ink), var(--rf-hi); }

/* =====================================================================
   CTA — the centered navy banner becomes an oversized left-aligned line,
   matching the homepage close.
   ===================================================================== */
.page-refresh .cta-banner { background: none; border-radius: 0; padding: 72px 0 28px; text-align: left; border-top: 1px solid var(--rf-line-strong); overflow: visible; }
.page-refresh .cta-banner::before { display: none; }
.page-refresh .cta-banner h2 { color: var(--rf-ink); font-size: clamp(2.25rem, 1rem + 4.6vw, 5rem); line-height: .98; letter-spacing: -.04em; font-weight: 600; max-width: 18ch; }
.page-refresh .cta-banner p { color: var(--rf-muted); max-width: 52ch; margin-left: 0; }
.page-refresh .cta-banner > div { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; }

/* About: the history timeline on paper. */
.page-refresh .impl-timeline-content { background: var(--rf-paper-lift); border: 0; box-shadow: var(--rf-edge), var(--rf-hi), var(--rf-lift-1); border-radius: var(--rf-r3); }

@media (max-width: 768px) {
  .page-refresh .page-hero { padding-top: calc(var(--header-height) + 28px); }
  .page-refresh .hero-stats .stat { padding-right: 24px; }
}

/* =====================================================================
   ABOUT: Turn-Key Philosophy steps use photos instead of 24px icons, and
   the offices map is toned down to sit on the paper palette.
   ===================================================================== */
.page-refresh .solutions-grid--steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-refresh .solution-card-photo { margin: calc(var(--space-8) * -1) calc(var(--space-8) * -1) var(--space-5); aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--rf-r3) var(--rf-r3) 0 0; }
.page-refresh .solution-card-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .page-refresh .solutions-grid--steps { grid-template-columns: 1fr; } }
/* OSM tiles are colorful; mute them so the map reads as part of the page. */
.page-refresh #offices-map .leaflet-tile-pane { filter: grayscale(.8) contrast(.92) brightness(1.04); }
.page-refresh #offices-map { box-shadow: var(--rf-edge), var(--rf-lift-1); }

/* Partner and manufacturer logos are shown exactly as supplied: no outline,
   rounded corners, shadow or other effect (same rule as the Zebra Validated badge). */
.page-refresh .feature-image--logo img { box-shadow: none; border-radius: 0; }

/* Anthropic partner box: the wordmark on top, Clawd (the Claude Code mascot) centered below. */
.page-refresh .feature-image--stack { flex-direction: column; gap: 2rem; }
.page-refresh .feature-image--stack img.partner-mascot { max-height: 120px; width: auto; }

/* =====================================================================
   FAQ (faq.html + es/faq.html)
   WHY: ten answers read as a plain list. Here they become numbered cards
   beside a sticky filter rail, with three real facts from the answers up
   top. The inline <style> in the page is overridden by these (higher
   specificity), and everything still works with JavaScript off.
   ===================================================================== */
.page-refresh .faq-facts { display: flex; flex-wrap: wrap; margin: 44px 0 0; border-top: 1px solid var(--rf-line-strong); }
.page-refresh .faq-facts > div { padding: 22px 44px 0 0; }
.page-refresh .faq-facts > div + div { padding-left: 28px; border-left: 1px solid var(--rf-line); }
.page-refresh .faq-facts dt { color: var(--rf-ink); font-family: var(--font-display); font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.page-refresh .faq-facts dd { margin: 8px 0 0; max-width: 24ch; color: var(--rf-muted); font: 500 var(--text-xs)/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }

.page-refresh .faq-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
.page-refresh .faq-aside[hidden],
.page-refresh .faq-item[hidden],
.page-refresh .faq-empty[hidden] { display: none; }
@media (min-width: 1000px) {
  .page-refresh .faq-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 64px; }
  .page-refresh .faq-aside { position: sticky; top: calc(36px + var(--header-height) + 24px); }
}

/* Sidebar: search, topics, open/close all */
.page-refresh .faq-aside { display: grid; gap: 22px; }
.page-refresh .faq-search { position: relative; display: block; }
.page-refresh .faq-search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--rf-muted); pointer-events: none; }
.page-refresh .faq-search input {
  width: 100%; min-height: 48px; padding: 0 14px 0 42px; border: 0; border-radius: var(--rf-r2);
  background: var(--rf-paper-lift); color: var(--rf-ink); font: 400 var(--text-base)/1 var(--font-body);
  box-shadow: inset 0 0 0 1px var(--rf-line-strong), var(--rf-hi);
}
.page-refresh .faq-search input::placeholder { color: var(--rf-muted); }
.page-refresh .faq-search input:focus-visible { outline: 2px solid var(--rf-ink); outline-offset: 2px; }
.page-refresh .faq-chips { display: grid; gap: 2px; border-top: 1px solid var(--rf-line); }
.page-refresh .faq-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 14px 0 16px;
  border-bottom: 1px solid var(--rf-line); border-left: 3px solid transparent; text-align: left;
  color: var(--rf-muted); font: 500 var(--text-sm)/1.3 var(--font-body);
  transition: color 180ms linear, border-color 180ms linear, background-color 180ms linear;
}
.page-refresh .faq-chip b { color: var(--rf-muted); font: 500 var(--text-xs)/1 var(--font-mono); }
.page-refresh .faq-chip:hover { color: var(--rf-ink); background: var(--rf-paper-lift); }
.page-refresh .faq-chip.is-on { color: var(--rf-ink); border-left-color: var(--amber); background: var(--rf-paper-lift); }
.page-refresh .faq-chip:focus-visible,
.page-refresh .faq-toggle:focus-visible { outline: 2px solid var(--rf-ink); outline-offset: 2px; }
.page-refresh .faq-toggle {
  justify-self: start; min-height: 44px; padding: 0 18px; border-radius: var(--rf-r2); color: var(--rf-ink); background: var(--rf-paper-lift);
  font: 500 var(--text-sm)/1 var(--font-body); box-shadow: inset 0 0 0 1px var(--rf-line-strong), var(--rf-hi);
}
.page-refresh .faq-toggle:hover { box-shadow: inset 0 0 0 1px var(--rf-ink), var(--rf-hi); }
.page-refresh .faq-toggle:disabled { opacity: .5; cursor: default; }
.page-refresh .faq-empty { color: var(--rf-muted); font-size: var(--text-sm); }
.page-refresh .faq-empty a { color: var(--rf-ink); text-decoration: underline; text-underline-offset: 3px; }

/* The answers: numbered cards. The number is drawn by .faq-item::before from data-num,
   so it stays fixed when a filter hides other questions (a CSS counter would renumber). */
.page-refresh .faq-list { display: grid; gap: 12px; max-width: none; margin: 0; }
.page-refresh .faq-item {
  position: relative; border: 0; border-radius: var(--rf-r3); background: var(--rf-paper-lift);
  box-shadow: var(--rf-edge), var(--rf-hi), var(--rf-lift-1); transition: box-shadow 420ms var(--ease-out);
}
.page-refresh .faq-item[open] { box-shadow: inset 3px 0 0 var(--amber), var(--rf-edge), var(--rf-hi), var(--rf-lift-2); }
.page-refresh .faq-item::before {
  content: attr(data-num); position: absolute; left: 24px; top: 26px; width: 3ch; color: var(--rf-amber-ink);
  font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: .08em; pointer-events: none;
}
.page-refresh .faq-item summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 18px;
  padding: 22px 24px 22px calc(24px + 3ch + 18px); list-style: none;
  color: var(--rf-ink); font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem); font-weight: 600; line-height: 1.25; letter-spacing: -.015em;
}
.page-refresh .faq-item summary:hover { color: var(--rf-ink); }
.page-refresh .faq-item summary:focus-visible { outline: 2px solid var(--rf-ink); outline-offset: -2px; border-radius: var(--rf-r3); }
.page-refresh .faq-item summary::after {
  content: '+'; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--rf-ink);
  font-size: 1.25rem; font-weight: 400; line-height: 1; box-shadow: inset 0 0 0 1px var(--rf-line-strong);
  transition: transform 360ms var(--ease-out), background-color 200ms linear, color 200ms linear;
}
.page-refresh .faq-item[open] summary::after { transform: rotate(45deg); background: var(--rf-ink); color: var(--rf-paper-lift); box-shadow: none; }
.page-refresh .faq-item .faq-answer { padding: 0 24px 26px calc(24px + 3ch + 18px); color: var(--rf-muted); }
.page-refresh .faq-item .faq-answer p { max-width: 64ch; line-height: 1.75; margin-bottom: var(--space-3); }
.page-refresh .faq-item .faq-answer strong { color: var(--rf-ink); font-weight: 600; }
.page-refresh .faq-item .faq-answer ul { display: grid; gap: 8px; margin: 0 0 var(--space-4); max-width: 64ch; list-style: none; padding: 0; }
.page-refresh .faq-item .faq-answer li { position: relative; padding-left: 20px; line-height: 1.65; }
.page-refresh .faq-item .faq-answer li::before { content: ""; position: absolute; left: 0; top: .7em; width: 7px; height: 7px; background: var(--amber); }
@media (max-width: 640px) {
  .page-refresh .faq-item::before { left: 18px; top: 24px; }
  .page-refresh .faq-item summary { padding: 20px 18px 20px calc(18px + 3ch + 14px); }
  .page-refresh .faq-item .faq-answer { padding: 0 18px 22px calc(18px + 3ch + 14px); }
}
/* Smooth open/close where the browser supports animating <details> height. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .page-refresh .faq-item::details-content { block-size: 0; overflow: clip; transition: block-size 420ms var(--ease-out), content-visibility 420ms allow-discrete; }
  .page-refresh .faq-item[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .page-refresh .faq-item, .page-refresh .faq-item summary::after, .page-refresh .faq-chip { transition: none; }
  .page-refresh .faq-item::details-content { transition: none; }
}

/* =====================================================================
   SUPPORT: large illustrated channel panels (replacing 24px icons)
   WHY: the three contact channels deserve real presence. Each card opens
   with a full-width panel; colors come from classes because SVG
   attributes can't use CSS variables. Decorative only (aria-hidden).
   ===================================================================== */
.page-refresh .solution-card-photo svg { display: block; width: 100%; height: 100%; }
.page-refresh .solution-card-art { background: var(--rf-paper-deep); box-shadow: inset 0 -1px 0 var(--rf-line); }
.page-refresh .solution-card-art .art-halo { fill: var(--rf-paper-lift); }
.page-refresh .solution-card-art .art-lift { fill: var(--rf-paper-lift); }
.page-refresh .solution-card-art .art-ink { fill: var(--rf-ink); }
.page-refresh .solution-card-art .art-amber { fill: var(--amber); }
.page-refresh .solution-card-art .art-stroke { stroke: var(--rf-ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.page-refresh .solution-card-art .art-stroke-soft { stroke: var(--rf-line-strong); stroke-width: 2; }
.page-refresh .solution-card-art .art-none { fill: none; }
.page-refresh .solution-card-art .art-ink-line { stroke: var(--rf-line-strong); stroke-width: 3; stroke-linecap: round; fill: none; }
.page-refresh .solution-card-art .art-lift-line { stroke: var(--rf-paper-lift); stroke-width: 3; stroke-linecap: round; fill: none; transform: translate(0, -8px); }
.page-refresh .solution-card-art .art-wave { fill: none; stroke-width: 4; stroke-linecap: round; }
.page-refresh .solution-card-art .art-amber-stroke { stroke: var(--amber); }
.page-refresh .solution-card-art .art-ink-wave { stroke: var(--rf-ink); opacity: .35; }
.page-refresh .solution-card-art .art-ink-fill-soft { fill: var(--rf-line-strong); }