/* Steel Ops / Harbor — live EN site chrome */
@import url("/code/fonts/fonts.css");

/* Harbor Steel palette — brand blue + teal action + copper commerce */
:root {
  --brand: #2f4a7a;
  --brand-mid: #3d6a9e;
  --brand-deep: #24385f;
  --brand-soft: #e7eef7;
  --teal: #1a7a8c;
  --teal-hover: #156574;
  --copper: #b45309;
  --copper-hover: #c2410c;
  --ink: #1c2433;
  --ink-muted: #5a6578;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --line: #d0d8e6;
  --accent-dl: var(--teal);
  --accent-dl-hover: var(--teal-hover);
  --accent-buy: var(--copper);
  --accent-buy-hover: var(--copper-hover);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06);
  --radius: 10px;
  --page-max: 1120px;
  --font-sans: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --header-h: 64px;
  --ease: 220ms ease;
  --body-size: 18px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: #fff;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: 1.65;
  background: #fff;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

a {
  color: var(--brand-mid);
  text-decoration: none;
  transition: color var(--ease);
}

a:hover {
  color: var(--brand);
  text-decoration: underline;
}

.page {
  width: 100%;
  max-width: none;
  margin: 0;
  background: #fff;
  box-shadow: none;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.page-wrap {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ----- Header / Nav ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: var(--header-h);
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: #f7f9fc;
  box-shadow: 0 1px 0 rgba(36, 56, 95, 0.04);
}

.site-header .page-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: nowrap;
  min-height: var(--header-h);
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.header-end {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem 0.9rem;
  margin-left: auto;
  min-width: 0;
}

.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.nav-burger {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.nav-burger span,
.nav-burger span::before,
.nav-burger span::after {
  display: block;
  width: 1.05rem;
  height: 2px;
  background: var(--brand-deep);
  border-radius: 1px;
  position: relative;
}

.nav-burger span::before,
.nav-burger span::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-burger span::before {
  top: -5px;
}

.nav-burger span::after {
  top: 5px;
}

.hdr-phone {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: inherit;
  line-height: 1.15;
}

.hdr-phone:hover {
  text-decoration: none;
}

.hdr-phone:hover .hdr-phone__num {
  text-decoration: underline;
}

.hdr-phone__num {
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--brand-deep);
  white-space: nowrap;
}

.hdr-cta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
}

.hdr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.32rem 0.75rem 0.24rem;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.hdr-btn:hover {
  text-decoration: none;
}

.hdr-btn-dl {
  color: #fff;
  background: var(--teal);
}

.hdr-btn-dl:hover {
  color: #fff;
  background: var(--teal-hover);
}

.hdr-btn-buy {
  color: var(--copper);
  background: #fff;
  border: 1px solid #e8c4a0;
}

.hdr-btn-buy:hover {
  color: #fff;
  background: var(--copper);
  border-color: var(--copper);
}

.ordsupp-badge {
  text-align: center;
  margin: 0.75rem 0 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--brand);
  min-width: 0;
}

.brand:hover {
  text-decoration: none;
  color: var(--brand);
}

/* Logo: plain mark, no circular pad / no gradient badge */
.brand-mark {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  width: auto;
  height: auto;
}

.brand-mark::before {
  content: none;
}

.brand-mark img {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.brand img:not(.brand-mark img) {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-text strong {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand-text .brand-line {
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Softens “Strike”: precision / on-target, not aggression */
.brand-text .brand-tagline {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--teal);
  max-width: 16rem;
  line-height: 1.25;
}

.nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.1rem;
  justify-content: flex-end;
}

.nav > a,
.nav-dd summary {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.55rem;
  color: var(--brand);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.nav-dd summary::-webkit-details-marker {
  display: none;
}

.nav-dd summary::after {
  content: "";
  margin-left: 0.35rem;
  border: 4px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
}

.nav > a:hover,
.nav-dd summary:hover,
.nav-dd[open] summary {
  text-decoration: none;
  color: var(--brand-mid);
}

.nav-dd {
  position: relative;
}

.lang-dd {
  flex: 0 0 auto;
}

.lang-dd > summary {
  letter-spacing: 0.04em;
}

.lang-dd .nav-dd-panel {
  left: auto;
  right: 0;
  min-width: 9.5rem;
}

.lang-dd .nav-dd-panel a[aria-current="page"] {
  background: var(--brand-soft);
  color: var(--brand);
}

.nav-dd-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  min-width: 17.5rem;
  padding: 0.4rem 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(28, 36, 51, 0.12);
  z-index: 20;
}

.nav-dd-panel a {
  display: block;
  padding: 0.42rem 0.95rem;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.nav-dd-panel a:hover {
  background: var(--brand-soft);
  color: var(--brand);
  text-decoration: none;
}

.nav-dd-free {
  color: var(--teal);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.nav-dd-all {
  margin-top: 0.25rem;
  border-top: 1px solid var(--line);
  color: var(--brand-mid) !important;
}

/* ----- Content chrome ----- */
.main {
  padding: 1.25rem 0 2rem;
  font-size: 1.0625rem;
  line-height: 1.65;
}

.crumbs {
  font-size: 0.88rem;
  color: #8a93a3;
  margin: 0 0 1rem;
}

.crumbs a {
  color: #6b7588;
  font-weight: 400;
}

.crumbs a:hover {
  color: var(--brand-mid);
}

h1,
.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 0.85rem;
  font-size: clamp(1.7rem, 2.4vw, 2.35rem);
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand);
  font-size: 1.45rem;
  margin: 2rem 0 1rem;
  text-align: center;
}

h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand);
  font-size: 1.1rem;
  margin: 1.25rem 0 0.5rem;
}

h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand);
  font-size: 1.02rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 1.1rem 0 0.45rem;
}

.lead {
  font-size: 1.08rem;
  color: var(--ink-muted);
  max-width: 46rem;
  margin: 0 0 1.25rem;
}

.center {
  text-align: center;
}

.divider {
  height: 1px;
  background: var(--line);
  margin: 1.75rem 0;
  border: 0;
}

/* ----- Buttons ----- */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.cta-row.center {
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.58rem 1.35rem 0.82rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04);
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(28, 36, 51, 0.12);
}

.btn-dl {
  background: var(--accent-dl);
  color: #fff;
}

.btn-dl:hover {
  background: var(--accent-dl-hover);
  color: #fff;
}

.btn-buy {
  background: var(--accent-buy);
  color: #fff;
}

.btn-buy:hover {
  background: var(--accent-buy-hover);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--brand);
  border-color: var(--line);
}

.btn-ghost:hover {
  background: var(--brand-soft);
  color: var(--brand);
}

/* ----- Home hero ----- */
.hero {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem 0 0.5rem;
  animation: hero-in 0.7s ease both;
}

.hero-brand {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -0.03em;
  margin: 0 0 0.35rem;
  line-height: 1.1;
}

.hero-visual {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0f1a2e;
  box-shadow: var(--shadow-soft);
}

.hero-visual img {
  display: block;
  width: 100%;
  min-height: 220px;
  object-fit: cover;
}

@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ----- Product grid ----- */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem 1.75rem;
}

@media (min-width: 720px) {
  .product-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.product-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 0.85rem;
  align-items: start;
}

.product-item h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.product-item p {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
}

/* ----- Product landing hero ----- */
.product-hero {
  display: grid;
  gap: 1.25rem;
  margin: 0.5rem 0 1.5rem;
  animation: hero-in 0.7s ease both;
}

.product-hero-media {
  margin: 0 -1.5rem;
  background: linear-gradient(180deg, #1a2740 0%, #243656 100%);
  border-top: 1px solid #243656;
  border-bottom: 1px solid var(--line);
}

.product-hero-media img {
  display: block;
  width: min(100%, 960px);
  margin: 0 auto;
  object-fit: contain;
  max-height: 420px;
}

.product-hero-copy {
  max-width: 40rem;
}

.product-kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-mid);
  margin-bottom: 0.4rem;
}

.promo-aside {
  margin-top: 0.5rem;
  padding: 1rem 1.1rem;
  background: var(--brand-soft);
  border-left: 3px solid var(--brand-mid);
  border-radius: 0 8px 8px 0;
}

.promo-aside p {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.35rem;
}

@media (min-width: 720px) {
  .feature-grid {
    grid-template-columns: 1fr 1fr;
  }

  .product-hero {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }

  .product-hero-media {
    margin: 0;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden;
  }
}

.feature-grid h3 {
  margin: 0 0 0.4rem;
}

.feature-grid p {
  margin: 0;
  font-size: 0.95rem;
}

.feature-icon {
  /* used inside .feature-item — sizing set there */
  vertical-align: top;
}

.comp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin: 1rem 0;
}

.comp-table th,
.comp-table td {
  border: 1px solid var(--line);
  padding: 0.55rem 0.7rem;
  vertical-align: top;
}

.comp-table th {
  background: var(--brand-soft);
  color: var(--brand);
  text-align: left;
}

.comp-table tr:nth-child(even) td {
  background: #fafbfd;
}

/* ----- Help / docs ----- */
.doc-layout {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .doc-layout {
    grid-template-columns: minmax(0, 1fr) 220px;
    align-items: start;
  }
}

.story {
  max-width: 48rem;
}

.story p {
  margin: 0 0 0.85rem;
}

.toc {
  list-style: none !important;
  margin: 0 0 1.5rem;
  padding: 0 !important;
  columns: 1;
}

@media (min-width: 640px) {
  .toc {
    columns: 2;
    column-gap: 2rem;
  }
}

.toc li {
  list-style: none !important;
  break-inside: avoid;
  margin: 0 0 0.35rem;
}

.toc a {
  font-weight: 500;
}

.toc a::before {
  content: "> ";
  color: var(--brand-mid);
  font-weight: 700;
}

.doc-section {
  margin: 1.5rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.doc-section > strong:first-child,
.doc-section h3 {
  display: block;
  margin-bottom: 0.5rem;
}

.doc-aside {
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.doc-aside h3 {
  margin-top: 0;
}

.doc-aside ul {
  margin: 0;
  padding-left: 1.1rem;
}

.doc-aside li {
  margin: 0.3rem 0;
}

blockquote {
  margin: 0.75rem 0;
  padding: 0.15rem 0 0.15rem 1rem;
  border-left: 3px solid var(--line);
  color: var(--ink);
}

/* Reviews / quotes: legacy <li> without <ul> — keep text, hide bullets */
blockquote.bq li,
.bq li {
  list-style: none;
  margin: 0.35rem 0;
  padding-left: 0;
}

/* ----- Footer ----- */
.site-footer {
  margin-top: 2rem;
  padding: 1.25rem 0 1.5rem;
  background: #eef1f6;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink-muted);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1rem;
  margin-bottom: 0.65rem;
}

.footer-nav a {
  color: var(--ink);
  font-weight: 600;
}

.lab-badge {
  display: inline-block;
  margin: 0.75rem 0 0;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #fff3e0;
  color: #e65100;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 1080px) {
  .site-header .page-wrap {
    flex-wrap: wrap;
  }

  .nav-burger {
    display: flex;
  }

  .header-end {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-left: 0;
    padding: 0.35rem 0 0.65rem;
    gap: 0.75rem;
  }

  .nav-toggle:checked ~ .header-end {
    display: flex;
  }

  .nav {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: wrap;
  }

  .nav-dd-panel {
    position: static;
    min-width: 0;
    margin: 0.25rem 0 0.15rem;
    box-shadow: none;
  }

  .hdr-phone,
  .hdr-cta {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .page-wrap {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .main {
    padding: 1rem 0 1.5rem;
  }

  .product-hero-media {
    margin: 0 -1rem;
  }
}

/* ----- Product title slider (home) ----- */
.promo-slider {
  position: relative;
  margin: 0.5rem 0 1.25rem;
  animation: hero-in 0.7s ease both;
}

.promo-slider-viewport {
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-soft);
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}

.promo-slider-viewport.is-dragging {
  cursor: grabbing;
}

.promo-slider-viewport img {
  pointer-events: none;
}

.promo-slider-track {
  display: flex;
  height: 100%;
  transition: transform 0.45s ease;
}

.promo-slide {
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
}

.promo-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent;
}

.promo-slider-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.promo-slider-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand);
  font-weight: 700;
  font-family: var(--font-sans);
  border-radius: 8px;
  min-width: 44px;
  min-height: 40px;
  cursor: pointer;
  transition: background var(--ease), transform var(--ease);
}

.promo-slider-btn:hover {
  background: var(--brand-soft);
  transform: translateY(-1px);
}

.promo-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  flex: 1;
}

.promo-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: #b8c4d8;
  cursor: pointer;
}

.promo-dots button.is-active {
  background: var(--teal);
  transform: scale(1.15);
}

.promo-caption-bar {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: var(--ink-muted);
  text-align: center;
  min-height: 1.4em;
}

/* Home: press / testimonials / client logo carousels (slick) */
.multiple-items.slider,
.variable-width.slider {
  margin: 0.75rem 0 1.5rem;
}

.multiple-items .slick-slide,
.variable-width .slick-slide {
  padding: 0 0.65rem;
}

.multiple-items img,
.variable-width img {
  display: block;
  margin: 0 auto 0.65rem;
  max-height: 72px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.variable-width img {
  max-height: 64px;
  max-width: 140px;
}

/* ----- Header variants (live CSS demos) ----- */
.site-header.hdr-a {
  /* Classic layout, no white plate — cool steel wash (no C diagonal gradient) */
  background: linear-gradient(180deg, #e8eef6 0%, #e2eaf4 100%);
  border-bottom: 1px solid var(--line);
}

.site-header.hdr-b {
  flex-wrap: wrap;
  padding: 0;
  gap: 0;
}

.site-header.hdr-b .hdr-utility {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding: 0.35rem 1.5rem;
  background: var(--brand-deep);
  font-size: 0.78rem;
}

.site-header.hdr-b .hdr-utility a {
  color: #d7e2f5;
  text-decoration: none;
  font-weight: 500;
}

.site-header.hdr-b .hdr-main {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.5rem;
  background: linear-gradient(180deg, #fff, #f5f8fc);
}

.site-header.hdr-b .nav {
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 0.2rem 0.45rem;
}

.site-header.hdr-c {
  background: linear-gradient(115deg, #e8eef8 0%, #f7fafc 45%, #e6f3f5 100%);
  border-bottom: 1px solid var(--line);
}

.site-header.hdr-c .hdr-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.site-header.hdr-c .hdr-actions .btn {
  min-height: 40px;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
}

.site-header.hdr-d {
  flex-direction: column;
  align-items: stretch;
  padding: 1.25rem 1.5rem 0.85rem;
  background: #f7f9fc;
}

.site-header.hdr-d .brand {
  justify-content: center;
  margin-bottom: 0.35rem;
}

.site-header.hdr-d .brand-text strong {
  font-size: 2rem;
}

.site-header.hdr-d .brand-text span {
  text-align: center;
}

.site-header.hdr-d .nav {
  justify-content: center;
  border-top: 1px solid var(--line);
  padding-top: 0.55rem;
  margin-top: 0.35rem;
}

/* ----- Headers gallery page ----- */
.headers-gallery {
  display: grid;
  gap: 2rem;
}

.headers-gallery figure {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.headers-gallery figcaption {
  margin-top: 0.75rem;
  font-size: 0.92rem;
  color: var(--ink-muted);
}

.headers-gallery figcaption strong {
  display: block;
  color: var(--brand);
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.headers-gallery img {
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--line);
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}

.swatch {
  width: 120px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  font-size: 0.75rem;
  text-align: center;
}

.swatch i {
  display: block;
  height: 48px;
}

.swatch span {
  display: block;
  padding: 0.35rem;
  background: #fff;
}

/* ----- Classic hdr-a + Pad texture mood (proposal demos) ----- */
/* Shared: keep classic flex layout; only background treatment changes */

.site-header.hdr-a-tex {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #e8eef6 0%, #e2eaf4 100%);
  border-bottom: 1px solid var(--line);
}

.site-header.hdr-a-tex > * {
  position: relative;
  z-index: 1;
}

/* 1) Full-bleed soft — pad image across whole header, very low contrast */
.site-header.hdr-a-tex1::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    url("/img/header-pad.jpg") center / cover no-repeat;
  opacity: 0.28;
  pointer-events: none;
}

.site-header.hdr-a-tex1::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(232, 238, 246, 0.55) 0%, rgba(226, 234, 244, 0.35) 55%, rgba(226, 234, 244, 0.5) 100%);
  pointer-events: none;
}

/* 2) Brand zone only — stronger pad visibility, fades before nav */
.site-header.hdr-a-tex2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(48%, 420px);
  z-index: 0;
  background:
    linear-gradient(100deg, rgba(180, 210, 230, 0.15) 0%, transparent 55%),
    url("/img/header-pad.jpg") left 35% center / cover no-repeat;
  opacity: 0.92;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, rgba(0, 0, 0, 0.55) 70%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 40%, rgba(0, 0, 0, 0.55) 70%, transparent 100%);
}

/* Kill white PNG plate behind bullseye on textured / steel headers */
.site-header.hdr-a-tex .brand-mark,
.site-header.hdr-a .brand-mark {
  background: transparent;
}

.site-header.hdr-a-tex .brand-mark img,
.site-header.hdr-a .brand-mark img {
  /* white plate → transparent against cool header; rings stay dark */
  mix-blend-mode: multiply;
  background: transparent;
}

/* Extra: if multiply alone is weak on bright texture patches, darken rings */
.site-header.hdr-a-tex2 .brand-mark img {
  mix-blend-mode: normal; /* transparent PNG already */
  filter: none;
}

/* 3) Bottom edge ribbon — texture as thin atmospheric strip */
.site-header.hdr-a-tex3::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  z-index: 0;
  background:
    url("/img/header-pad.jpg") center bottom / cover no-repeat;
  opacity: 0.35;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
}

/* 4) CSS-only mesh (no PNG) — SSI-friendly later */
.site-header.hdr-a-tex4::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  background-color: #e6eef6;
  background-image:
    radial-gradient(circle at 12% 40%, rgba(255, 255, 255, 0.9) 0 2px, transparent 2.5px),
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.75) 0 1.5px, transparent 2px),
    radial-gradient(circle at 48% 55%, rgba(255, 255, 255, 0.85) 0 2px, transparent 2.5px),
    radial-gradient(circle at 68% 30%, rgba(255, 255, 255, 0.7) 0 1.5px, transparent 2px),
    radial-gradient(circle at 82% 62%, rgba(255, 255, 255, 0.8) 0 2px, transparent 2.5px),
    radial-gradient(circle at 38% 78%, rgba(255, 255, 255, 0.65) 0 1.5px, transparent 2px),
    linear-gradient(115deg, transparent 0 41%, rgba(255, 255, 255, 0.35) 41% 41.4%, transparent 41.4%),
    linear-gradient(35deg, transparent 0 48%, rgba(255, 255, 255, 0.3) 48% 48.35%, transparent 48.35%),
    linear-gradient(160deg, transparent 0 62%, rgba(255, 255, 255, 0.28) 62% 62.35%, transparent 62.35%),
    linear-gradient(145deg, #d9e8f4 0%, #c5dcec 55%, #b7d5e8 100%);
  background-blend-mode: normal, normal, normal, normal, normal, normal, soft-light, soft-light, soft-light, normal;
}

/* 5) Soft island behind brand only (rounded panel + pad) */
.site-header.hdr-a-tex5 .brand {
  padding: 0.45rem 0.75rem 0.45rem 0.45rem;
  margin: -0.25rem 0;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(232, 238, 246, 0.15), rgba(232, 238, 246, 0.85)),
    url("/img/header-pad.jpg") left center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(47, 74, 122, 0.08);
}

/* Demo labels on texture page */
.tex-demo {
  margin: 0 0 1.75rem;
}

.tex-demo h3 {
  margin: 0 0 0.35rem;
}

.tex-demo p {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.tex-demo .site-header {
  border-radius: 10px;
}

/* ===== Pilot production layer (Materialize grid + live content) ===== */

#page.page,
.page#page {
  width: 100%;
  max-width: none;
  margin: 0;
  background: #fff;
  box-shadow: none;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.main {
  padding: 1.25rem 0 2rem;
  font-size: 1.0625rem;
  line-height: 1.65;
}

.bcrumps,
.crumbs {
  font-size: 0.88rem;
  color: #8a93a3;
  margin: 0 0 1rem;
}

.bcrumps a,
.crumbs a {
  color: #6b7588;
  font-weight: 400;
}

.bcrumps a:hover,
.crumbs a:hover {
  color: var(--brand-mid);
}

h1,
h1#pageName {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 0.85rem;
  font-size: clamp(1.7rem, 2.4vw, 2.35rem);
  border-bottom: none;
  padding: 0;
}

.center-align {
  text-align: center;
}

.clear {
  clear: both;
}

/* Materialize-compatible grid (subset used by product pages) */
.row {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.25rem;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.row .col {
  float: left;
  box-sizing: border-box;
  padding: 0 0.75rem;
  min-height: 1px;
}

.row .col.s4 { width: 33.3333333333%; }
.row .col.s6 { width: 50%; }
.row .col.s8 { width: 66.6666666667%; }
.row .col.s12 { width: 100%; }

@media only screen and (min-width: 601px) {
  .row .col.m3 { width: 25%; }
  .row .col.m4 { width: 33.3333333333%; }
  .row .col.m6 { width: 50%; }
  .row .col.m8 { width: 66.6666666667%; }
  .row .col.m9 { width: 75%; }
}

@media only screen and (min-width: 993px) {
  .row .col.l4 { width: 33.3333333333%; }
  .row .col.l8 { width: 66.6666666667%; }
}

/* Buttons — Harbor teal/copper over Materialize classes */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.58rem 1.35rem 0.82rem;
  border-radius: 8px;
  border: none;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  text-transform: none;
  color: #fff !important;
  background: var(--accent-dl);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04);
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
  cursor: pointer;
}

.btn:hover {
  background: var(--accent-dl-hover);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(28, 36, 51, 0.12);
}

/* Page CTAs keep the btn-large class; same metrics as header .hdr-btn */
.btn-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  height: auto;
  width: auto;
  max-width: 100%;
  padding: 0.32rem 0.75rem 0.24rem;
  border: none;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  text-decoration: none !important;
  text-transform: none;
  white-space: nowrap;
  color: #fff !important;
  background: var(--accent-dl);
  box-shadow: none;
  transform: none;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
  cursor: pointer;
}

.btn-large:hover {
  background: var(--accent-dl-hover);
  color: #fff !important;
  text-decoration: none;
  transform: none;
  box-shadow: none;
}

.btn-large.green,
.btn-large.green.darken-2,
.btn-dl .btn-large,
a.btn-large.green {
  background: var(--accent-dl) !important;
}

.btn-large.green:hover,
.btn-large.green.darken-2:hover,
a.btn-large.green:hover {
  background: var(--accent-dl-hover) !important;
}

.btn-large.orange,
.btn-large.orange.lighten-1,
a.btn-large.orange {
  background: var(--accent-buy) !important;
}

.btn-large.orange:hover,
.btn-large.orange.lighten-1:hover,
a.btn-large.orange:hover {
  background: var(--accent-buy-hover) !important;
}

.btn-large.light-blue,
.btn-large.light-blue.darken-3,
a.btn-large.light-blue {
  background: var(--brand-mid) !important;
}

.btn-large.light-blue:hover,
a.btn-large.light-blue:hover {
  background: var(--brand) !important;
}

/* Legacy table sprite buttons (download.shtml / comparison tables) */
a.rollover,
a.rollover2 {
  display: inline-block;
  width: 82px;
  height: 31px;
  margin: 0.15rem auto;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: 0 0;
  text-decoration: none !important;
}

a.rollover {
  background-image: url(/img/download_button.png);
  margin-right: 0.4em; /* gap before size text (e.g. "90 MB") */
}

a.rollover2 {
  background-image: url(/img/buy_button.png);
}

a.rollover:hover,
a.rollover2:hover {
  background-position: 0 -31px;
}

/* RU sprites are narrower (Cyrillic labels) */
html[lang="ru"] a.rollover,
html[lang="ru"] a.rollover2 {
  width: 69px;
}

/* Keep Materialize dual-class download CTAs visible (btn-dl + btn-large) */
a.btn-dl.btn-large,
a.btn-large.btn-dl,
.btn-dl.btn-large {
  background: var(--accent-dl) !important;
  color: #fff !important;
}

a.btn-dl.btn-large:hover,
a.btn-large.btn-dl:hover,
.btn-dl.btn-large:hover {
  background: var(--accent-dl-hover) !important;
}

/* Comparison / pricing tables */
.new_table {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0;
}

.new_table table {
  width: 100%;
  table-layout: fixed;
  border: 1px solid var(--line);
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 1.05rem;
}

.new_table td,
.new_table th {
  border: 1px solid var(--line);
  padding: 0.55rem 0.7rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
  vertical-align: top;
}

.new_table th {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 700;
}

.new_table tr:nth-child(even) td {
  background: #fafbfd;
}

.new_table table[width] {
  width: 100% !important;
}

.dl-table table {
  table-layout: auto;
}

.dl-table th,
.dl-table td {
  padding: 0.85rem 1rem;
  font-size: 1.05rem;
  vertical-align: middle;
}

.dl-table td:last-child {
  width: 18rem;
}

.dl-table p {
  margin: 0;
  font-size: inherit;
}

.dl-name {
  font-weight: 700;
}

.dl-desc {
  margin: 0.3rem 0 0;
  font-size: 0.92rem;
  color: var(--ink-muted);
  font-weight: 400;
}

.dl-jump {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.dl-jump li {
  margin: 0.25rem 0;
}

.dl-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
}

.dl-row + .dl-row {
  margin-top: 0.5rem;
}

.dl-ed {
  flex: 0 0 6.75rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-muted);
}

.dl-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0.18rem 0.85rem 0.38rem;
  border-radius: 8px;
  background: var(--teal);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none !important;
  white-space: nowrap;
}

.dl-link:hover {
  background: var(--teal-hover);
  color: #fff !important;
  text-decoration: none !important;
}

.dl-link::before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 20h14v-2H5v2zm7-4l5-5h-3V4h-4v7H7l5 5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 20h14v-2H5v2zm7-4l5-5h-3V4h-4v7H7l5 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.dl-size {
  color: var(--ink-muted);
  font-size: 0.92rem;
  font-weight: 600;
}

.dl-badge {
  display: inline-block;
  margin-left: 0.2rem;
  color: var(--teal);
  font-weight: 700;
  font-size: 0.88rem;
}

.dl-notes {
  margin: 1.5rem 0 0;
}

.dl-notes h2 {
  text-align: left;
  font-size: 1.15rem;
  margin: 1.25rem 0 0.5rem;
}

body.page-download h1 {
  text-align: left;
}

@media (max-width: 720px) {
  .dl-table td:last-child {
    width: auto;
  }

  .dl-ed {
    flex-basis: 100%;
  }
}

body.page-order h1,
body.page-order h2 {
  text-align: left;
}

.order-bundle {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.2rem;
  margin: 0 0 1.75rem;
  background: var(--brand-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.order-bundle img {
  flex: 0 0 auto;
  width: 120px;
  height: auto;
}

.order-bundle p {
  margin: 0;
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0 0 1.75rem;
}

.order-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0.35rem 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.order-item img {
  width: 40px;
  height: 40px;
  margin-top: 0.15rem;
}

.order-item h3 {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
  text-align: left;
}

.order-item p {
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  color: var(--ink-muted);
}

.order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.65rem;
  align-items: center;
}

.order-actions .hdr-btn {
  min-height: 2.15rem;
}

.order-sub {
  font-size: 0.9rem;
  font-weight: 600;
}

.order-perks {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
}

.order-perks li {
  margin: 0.35rem 0;
}

.order-pay {
  display: block;
  margin: 0.75rem 0 1.25rem;
  max-width: 220px;
  height: auto;
}

.order-clients {
  margin: 0 0 1.5rem;
}

.order-clients img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
}

@media (max-width: 720px) {
  .order-bundle {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Newsletter button — restyle legacy sprite link as Harbor CTA */
.subscribe {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  clear: both;
  width: auto !important;
  max-width: 100%;
  min-height: 2rem;
  height: auto !important;
  margin: 1rem 0 0;
  padding: 0.32rem 0.75rem 0.24rem !important;
  background: var(--brand) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid var(--brand-deep);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: normal;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: none;
  line-height: 1;
}

.subscribe::after {
  content: "Subscribe to newsletter";
}

html[lang="es"] .subscribe::after {
  content: "Suscribirse al boletín";
}

html[lang="de"] .subscribe::after {
  content: "Newsletter abonnieren";
}

.subscribe:hover {
  background: var(--brand-mid) !important;
  background-position: unset !important;
  color: #fff !important;
  text-decoration: none !important;
}

.subscribe-btn {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  min-height: 2rem;
  height: auto;
  justify-content: center;
  margin: 1rem 0 0;
  padding: 0.32rem 0.75rem 0.24rem;
  background: var(--brand);
  color: #fff !important;
  border: 1px solid var(--brand-deep);
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  white-space: nowrap;
  box-shadow: none;
  transform: none;
}

.subscribe-btn:hover {
  background: var(--brand-mid);
  color: #fff !important;
  text-decoration: none;
  transform: none;
  box-shadow: none;
}

.col.m3 .subscribe,
.col.m3 .subscribe-btn {
  max-width: 100%;
  margin-left: 0;
}

/* Order support block */
.ordsupp {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink);
  padding: 0.85rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.ordsupp-photo {
  float: left;
  width: 72px;
  height: auto;
  margin: 0 0.75rem 0.5rem 0;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(47, 74, 122, 0.12);
}

.ordsupp-lead {
  margin: 0 0 0.75rem;
  color: var(--ink);
}

.ordsupp-phones {
  margin: 0 0 0.75rem;
  clear: none;
}

.ordsupp p:last-child {
  margin-bottom: 0;
  clear: both;
}

.ordsupp::after {
  content: "";
  display: table;
  clear: both;
}

.col.m3 .ordsupp {
  margin-bottom: 1rem;
}

/* Story / help body */
.story {
  max-width: none;
  padding: 0;
}

.story img {
  border: 0;
  max-width: 100%;
  height: auto;
}

.responsive-img {
  max-width: 100%;
  height: auto;
}

/* Benefits + large product shot (e.g. Network File Search) */
.benefits-with-shot {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
  margin: 1rem 0 1.5rem;
}

@media (min-width: 820px) {
  .benefits-with-shot:has(.benefits-shot) {
    grid-template-columns: minmax(240px, 400px) 1fr;
  }
}

.benefits-with-shot .benefits-shot {
  display: block;
  max-width: 400px;
}

.benefits-with-shot .benefits-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.benefits-with-shot .feature-blocks {
  margin: 0;
  grid-template-columns: 1fr;
}

@media (min-width: 1100px) {
  .benefits-with-shot .feature-blocks {
    grid-template-columns: 1fr 1fr;
  }
}

a.benefits-shot {
  display: block;
  margin: 1rem 0 1.25rem;
}

a.benefits-shot img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

/* What's new callout (replaces legacy balloon table) */
.whats-new {
  margin: 1.5rem 0;
  padding: 1.15rem 1.35rem 1.25rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-mid);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(61, 106, 158, 0.08) 0%, transparent 55%),
    #f5f8fc;
}

.whats-new-title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--brand);
}

.whats-new-list {
  margin: 0;
  padding-left: 1.35rem;
  font-size: 1.08rem;
  line-height: 1.55;
}

.whats-new-list li {
  margin: 0.4rem 0;
}

/* Floated content images (cross-sell blocks, inline screenshots, etc.) */
img[align="left"],
img.fig2 {
  float: left;
  margin: 0.25rem 1rem 0.75rem 0;
}

img[align="right"],
img.fig {
  float: right;
  margin: 0.25rem 0 0.75rem 1rem;
}

/* Tiny inline icons should stay on the text line */
img[align="absmiddle"],
img[align="middle"] {
  float: none;
  margin: 0 0.25rem 0 0;
  vertical-align: middle;
}

/* Help doc layout polish */
.doc-layout .toc {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.doc-layout .toc li {
  margin: 0 0 0.35rem;
}

.doc-layout .toc a::before {
  content: "> ";
  color: var(--brand-mid);
  font-weight: 700;
  display: inline;
  border: 0;
  width: auto;
  height: auto;
  margin-right: 0.15rem;
  transform: none;
  vertical-align: baseline;
}

.doc-layout .toc img,
.doc-section-icon-legacy {
  display: none;
}

/* Product hero: slider + aside aligned */
.product-hero-row {
  display: grid;
  gap: 1.25rem;
  margin: 0.5rem 0 1.25rem;
  align-items: start;
}

@media (min-width: 900px) {
  .product-hero-row {
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, 1fr);
  }
}

.product-hero-row .promo-slider {
  margin: 0;
}

.product-hero-row .promo-slider-viewport {
  background: var(--surface);
  aspect-ratio: 4 / 3;
}

.product-hero-row .promo-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent;
}

.product-hero-aside .card {
  margin: 0;
  height: 100%;
}

/* Features — outer CSS Grid (proper rows); icon LEFT via float inside each card */
.feature-blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 1.75rem;
  margin: 1rem 0 1.5rem;
  overflow: visible;
}

@media (min-width: 720px) {
  .feature-blocks {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 980px) {
  .feature-blocks {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* 4 features: stay 2×2 instead of 3+1 */
@media (min-width: 720px) {
  .feature-blocks.cols-2 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 980px) {
  .feature-blocks.cols-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.feature-blocks::after {
  content: none;
}

.feature-item {
  display: block !important;
  float: none !important;
  width: auto !important;
  max-width: none;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0;
  overflow: hidden; /* contain icon float */
  clear: none;
}

.feature-item > img.feature-icon,
.feature-item > .feature-icon,
.feature-item > img {
  float: left !important;
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  margin: 0 12px 6px 0 !important;
  display: block !important;
}

/* Catalog shots on products.shtml — image left, text wraps right */
.product-catalog-item {
  overflow: hidden;
}

.feature-item > img.feature-icon.product-shot,
.product-catalog-item img.product-shot {
  width: min(100%, 280px) !important;
  height: auto !important;
  max-width: 280px !important;
  float: none !important;
  margin: 0 0 0.75rem !important;
  display: block !important;
}

@media (min-width: 720px) {
  .product-catalog-item img.product-shot {
    float: left !important;
    margin: 0 1rem 0.75rem 0 !important;
  }
}

/* Intro logo on products.shtml — text wraps beside logo */
.feature img.intro-logo {
  float: left;
  margin: 0 0.85rem 0.35rem 0;
}

.feature-item > div {
  display: block;
  overflow: hidden; /* text stays to the right of icon */
}

.feature-item .promo-caption {
  margin-top: 0;
  margin-bottom: 0.35rem;
}

/* Fallback: older Materialize feature tiles without feature-blocks markup */
.row > .col.s12.m6 > div > .div-image-middle + .promo-caption {
  margin-top: 0.15rem;
}
.row > .col.s12.m6 > div > .div-image-middle img {
  float: left;
  margin: 0 12px 6px 0;
}

.advantage-list {
  display: block;
  margin: 1rem 0;
}

.advantage-item {
  display: block !important;
  overflow: hidden;
  margin: 0 0 0.95rem;
}

.advantage-item > img {
  float: left !important;
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  margin: 3px 10px 0 0 !important;
  display: block !important;
}

.advantage-item > .promo-list,
.advantage-item .promo-list {
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  font-size: inherit;
  line-height: 1.5;
}

.doc-h {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.5rem 0 0.65rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--brand);
}

.doc-h img {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: block;
  position: relative;
  top: 0;
}

.doc-h strong {
  line-height: 1.35;
}

/* Comparison table: replace +/- with yes/no icons (keep text cells readable) */
.new_table td[bgcolor="#CCFFCC"],
.new_table td[bgcolor="#FFCCCC"] {
  vertical-align: middle;
  text-align: center;
}

/* Only cells with legacy +/- markup: <div align="center"><font>+/-</font>… */
.new_table td[bgcolor="#CCFFCC"] > div[align="center"] > font,
.new_table td[bgcolor="#FFCCCC"] > div[align="center"] > font {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

.new_table td[bgcolor="#CCFFCC"] > div[align="center"],
.new_table td[bgcolor="#FFCCCC"] > div[align="center"] {
  font-size: 0.88rem;
  line-height: 1.35;
}

.new_table td[bgcolor="#CCFFCC"] > div[align="center"]::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url("/img/icons/yes.svg") center / contain no-repeat;
  vertical-align: middle;
}

.new_table td[bgcolor="#FFCCCC"] > div[align="center"]::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url("/img/icons/no.svg") center / contain no-repeat;
  vertical-align: middle;
}

.new_table td[bgcolor="#CCFFCC"] {
  background: #eef8f1 !important;
}

.new_table td[bgcolor="#FFCCCC"] {
  background: #fbf0ef !important;
}

/* Help topic pages only — slightly larger reading text */
.help-topic .story,
.help-topic .story p,
.help-topic .story li,
.help-topic .story blockquote {
  font-size: 1.06rem;
  line-height: 1.6;
}

.help-topic .doc-h {
  font-size: 1.2rem;
}

.help-topic ul.toc {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.5rem;
  columns: 2;
  column-gap: 2rem;
}

.help-topic ul.toc li {
  list-style: none !important;
  break-inside: avoid;
  margin: 0 0 0.4rem;
}

.help-topic ul.toc a::before {
  content: "> ";
  color: var(--brand-mid);
  font-weight: 700;
  display: inline;
  border: 0;
  width: auto;
  height: auto;
  transform: none;
  margin-right: 0.15rem;
}

/* Awards / feature quote: float badge, text beside it */
.feature table td > p,
.feature > p {
  overflow: hidden;
}

/* Feature icons float left by default (legacy); wide shots stay full-width */
.feature img {
  float: left;
  margin: 0 1rem 0.75rem 0;
}

.feature img.responsive-img,
.feature p[align="center"] img,
.feature a.glightbox img {
  float: none;
  margin: 0.5rem 0;
}

.feature img[src*="best-soft"],
.awards-item img {
  float: left;
  margin: 0 1rem 0.75rem 0;
  vertical-align: top;
}

.cta-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin: 1.25rem 0;
}

/* Help index videos: keep 3-up, don't blow to full width */
.screenshots-grid .col.s4,
.screenshots-grid .col.m4 {
  width: 33.3333333333%;
  float: left;
}

.screenshots-grid .youtube-player {
  max-width: 100%;
}

/* Help index: allow full content width (tables + video grid) */
.doc-layout > .story.story-wide,
.story.story-wide {
  max-width: none;
}

@media (max-width: 560px) {
  .screenshots-grid .col.s4,
  .screenshots-grid .col.m4,
  .screenshots-grid .col.s12 {
    width: 100% !important;
    float: none;
  }

  .help-topic ul.toc {
    columns: 1;
  }
}

/* Help TOC: topic cards + full-width checks catalog */
.help-toc {
  margin: 1rem 0 1.5rem;
}

.help-toc-topics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 720px) {
  .help-toc-topics {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.help-toc-topics > section {
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fafbfd;
}

.help-toc-topics h3,
.help-toc-checks > h3 {
  margin: 0 0 0.65rem;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--brand);
}

.help-toc-checks > h4 {
  margin: 1rem 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--brand-deep);
  line-height: 1.3;
}

.help-toc-checks > h4:first-of-type {
  margin-top: 0.35rem;
}

.help-toc-topics h3 img,
.help-toc-checks > h3 img {
  width: 16px;
  height: 16px;
  vertical-align: -2px;
  margin-right: 0.2rem;
}

.help-toc-topics ul,
.help-toc-checks ul {
  margin: 0;
  padding-left: 1.1rem;
}

.help-toc-topics li,
.help-toc-checks li {
  margin: 0.25rem 0;
}

.help-toc-checks {
  margin: 0;
  padding: 1rem 1.1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f7faf5;
}

.help-toc-checks ul {
  columns: 1;
  column-gap: 1.75rem;
}

@media (min-width: 720px) {
  .help-toc-checks ul {
    columns: 2;
  }
}

@media (min-width: 1100px) {
  .help-toc-checks ul {
    columns: 3;
  }
}

.help-toc-checks li {
  break-inside: avoid;
}

/* Legacy class kept for any unmigrated pages */
.help-toc-grid {
  columns: 1;
  column-gap: 2rem;
}

@media (min-width: 720px) {
  .help-toc-grid {
    columns: 2;
  }
}

.help-toc-grid h3 {
  break-after: avoid;
  margin-top: 1.25rem;
}

.help-toc-grid ul {
  break-inside: avoid;
  margin: 0 0 1rem;
  padding-left: 1.1rem;
}

.help-toc-grid li {
  margin: 0.25rem 0;
}

@media (min-width: 640px) {
  .doc-layout .toc {
    columns: 2;
    column-gap: 2rem;
  }

  .doc-layout .toc li {
    break-inside: avoid;
  }
}

.doc-layout .doc-aside {
  position: sticky;
  top: 1rem;
}

/* Product landing: kill old negative margin hack */
.main .row .col[style*="margin-top"] {
  margin-top: 0 !important;
}

/* Hide lab-only demo chrome if any */
.lab-badge {
  display: none;
}

@media (max-width: 720px) {
  .main {
    padding: 1rem 0 1.5rem;
  }

  .row .col {
    width: 100% !important;
    float: none;
  }

  /* Keep help/product screenshot & video grids in columns until phone */
  .screenshots-grid .col.s4,
  .screenshots-grid .col.m4 {
    width: 33.3333333333% !important;
    float: left;
  }
}

/* Live product landing helpers */
.divider {
  height: 1px;
  overflow: hidden;
  background-color: var(--line);
  margin: 1.25rem 0;
  border: 0;
}

.promo-list {
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0.35rem 0 0.85rem;
  line-height: 1.45;
}

.collection {
  margin: 0.5rem 0 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  list-style: none;
  padding: 0;
  background: #fff;
}

.collection .collection-item,
.collection a.collection-item {
  display: block;
  background: #fff;
  line-height: 1.45;
  padding: 0.65rem 1rem;
  margin: 0;
  border-bottom: 1px solid var(--line);
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}

.collection .collection-item:last-child,
.collection a.collection-item:last-child {
  border-bottom: none;
}

.collection a.collection-item:hover {
  background: var(--brand-soft);
  text-decoration: none;
}

.collection.with-header .collection-header {
  background: var(--brand-soft);
  border-bottom: 1px solid var(--line);
  padding: 0.65rem 1rem;
  color: var(--brand);
}

.indigo-text,
.indigo-text.text-darken-4 {
  color: var(--brand) !important;
}

.div-image-middle {
  display: block;
  float: left;
  margin: 0 0.85rem 0.35rem 0;
}

.div-image-middle img {
  display: block;
  width: 48px;
  height: 48px;
}

.feature {
  padding: 0;
}

.feature h3 {
  color: var(--brand);
}

.promo-caption {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brand);
  margin: 0.35rem 0 0.5rem;
}

.card {
  position: relative;
  margin: 0.5rem 0 1rem;
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.card.lime.lighten-5 {
  background: #f7faf5;
}

.card .card-content {
  padding: 1rem 1.1rem;
}

.card .card-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brand);
  margin: 0 0 0.65rem;
  line-height: 1.3;
}

.grey-text.text-darken-4 {
  color: var(--ink) !important;
}

/* Related products sidebar list */
.prod-list {
  width: 100%;
  max-width: 22rem; /* ~352px — keep compact; do not float (subscribe/footer must stack below) */
  display: block;
  clear: both;
  background: #f7f9fc;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 0.85rem 0.65rem;
  margin: 0.5rem 0 1rem;
  box-sizing: border-box;
}

.prd-head {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brand);
  padding: 0.1rem 0.2rem 0.55rem;
  margin: 0 0 0.35rem;
  border-bottom: 1px solid var(--line);
  letter-spacing: -0.01em;
}

.prod-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0.2rem 0.75rem;
  align-items: start;
  font-size: 0.9rem;
  padding: 0.6rem 0.35rem;
  margin: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 6px;
  transition: background var(--ease);
}

.prod-item:hover {
  background: var(--brand-soft);
}

.prod-item:has(+ .prod-promo),
.prod-item:has(+ center) {
  border-bottom: none;
}

.prod-item img {
  width: 40px;
  height: 40px;
  float: none;
  display: block;
  border-radius: 6px;
}

.prod-item .clear {
  display: none;
}

.prod-text {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.4;
  font-size: 0.9rem;
}

.prod-text a {
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-mid);
  text-decoration: none;
}

.prod-text a:hover {
  color: var(--brand);
  text-decoration: underline;
}

.prod-free {
  color: var(--teal);
  font-weight: 700;
  font-size: 0.88rem;
}

.prod-list > center {
  display: block;
  margin: 0.65rem 0 0.35rem;
  font-size: 0.9rem;
}

.prod-list > center a {
  color: var(--ink-muted);
  font-weight: 500;
}

.prod-list > center a:hover {
  color: var(--brand-mid);
}

/* Bundle promo — Soft copper card */
.prod-promo {
  width: 100%;
  box-sizing: border-box;
  margin: 0.75rem 0 0.35rem;
  padding: 0;
  background: linear-gradient(165deg, #fff7ed 0%, #ffedd5 100%);
  border: 1px solid #fdba74;
  border-radius: var(--radius);
  overflow: hidden;
}

.prod-promo a {
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.65rem;
  row-gap: 0.25rem;
  align-items: start;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.4;
  transition: background var(--ease), border-color var(--ease);
}

.prod-promo a:hover {
  background: linear-gradient(165deg, #ffedd5 0%, #fed7aa 100%);
  text-decoration: none;
}

.prod-promo:hover {
  border-color: var(--copper);
}

.prod-promo-icon {
  grid-row: 1 / span 2;
  width: 32px;
  height: 32px;
  margin-top: 0.1rem;
}

.prod-promo-title {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.prod-promo-text {
  display: block;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink-muted);
  line-height: 1.4;
}

.prod-promo-save {
  color: var(--copper);
  font-weight: 700;
}

.prod-promo a:hover .prod-promo-title {
  color: var(--copper-hover);
}