/* ==========================================================================
   DocuStacker — Design System & Site Styles
   ========================================================================== */

:root {
  /* Color palette — plum & periwinkle brand system */
  --color-bg: #ffffff;
  --color-bg-subtle: #f8f7fb;
  --color-bg-inset: #f1eef8;
  --color-ink: #1c1530;
  --color-ink-soft: #564f6e;
  --color-ink-faint: #8d86a3;
  --color-border: #e9e6f2;
  --color-border-strong: #d9d4e8;

  --color-primary: #40315f;
  --color-primary-dark: #2c2245;
  --color-primary-tint: #f1eefa;

  --color-accent: #5b5fe0;
  --color-accent-dark: #4448b8;
  --color-accent-tint: #eeeefb;
  --color-stack-2: #8f8de8;
  --color-stack-3: #c9c7f5;

  --color-success: #0a8f6a;
  --color-success-tint: #e7f9f2;

  --color-navy-900: #170f26;
  --color-navy-800: #1f1735;
  --color-navy-700: #2b2148;

  /* Typography */
  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(28, 21, 48, 0.06);
  --shadow-md: 0 8px 24px rgba(28, 21, 48, 0.08);
  --shadow-lg: 0 24px 64px rgba(28, 21, 48, 0.14);
  --shadow-primary: 0 12px 28px rgba(91, 95, 224, 0.32);

  /* Layout */
  --container: 1200px;
  --header-height: 76px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-bg);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, p {
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Focus states — accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-tint);
  padding: 7px 14px;
  border-radius: var(--radius-full);
}

.section-head {
  max-width: 640px;
  margin-bottom: 56px;
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-top: 16px;
  color: var(--color-ink);
}

.section-head p {
  margin-top: 16px;
  font-size: 17px;
  color: var(--color-ink-soft);
}

section {
  padding: 100px 0;
}

@media (max-width: 900px) {
  section {
    padding: 72px 0;
  }
  .section-head {
    margin-bottom: 40px;
  }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(91, 95, 224, 0.4);
}

.btn-secondary {
  background: #fff;
  color: var(--color-ink);
  border-color: var(--color-border-strong);
}

.btn-secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--color-ink);
}

.btn-ghost:hover {
  color: var(--color-primary);
}

.btn-dark {
  background: var(--color-navy-900);
  color: #fff;
}

.btn-dark:hover {
  background: #000;
  transform: translateY(-1px);
}

.btn-lg {
  padding: 16px 30px;
  font-size: 16px;
}

.btn svg {
  width: 18px;
  height: 18px;
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */

.logo {
  display: inline-flex;
  align-items: center;
}

.logo-img {
  display: block;
  height: 45px;
  width: auto;
}

.ds-logo-icon {
  display: block;
  height: 20px;
  width: auto;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--color-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 40px;
}

.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-ink-soft);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.nav-link:hover {
  color: var(--color-ink);
  background: var(--color-bg-inset);
}

.nav-item.has-dropdown {
  position: relative;
}

.nav-link .chev {
  width: 14px;
  height: 14px;
  transition: transform 0.2s var(--ease);
}

.nav-item.has-dropdown:hover .chev,
.nav-item.has-dropdown:focus-within .chev {
  transform: rotate(180deg);
}

.dropdown::before {
  /* Invisible bridge over the gap between the nav link and the dropdown
     panel below it. Without this, moving the cursor straight down through
     that gap drops :hover for an instant, the panel starts its closing
     transition, then snaps back open once the cursor lands on it. */
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 320px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}

.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-md);
  transition: background-color 0.18s var(--ease);
}

.dropdown a:hover {
  background: var(--color-bg-subtle);
}

.dropdown .dd-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-primary-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.dropdown .dd-icon svg {
  width: 18px;
  height: 18px;
}

.dropdown .dd-text strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 2px;
}

.dropdown .dd-text span {
  font-size: 13px;
  color: var(--color-ink-faint);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
}

.mobile-nav-toggle svg {
  width: 20px;
  height: 20px;
}

/* Mobile nav panel */
.mobile-nav {
  display: none;
  position: fixed;
  inset: var(--header-height) 0 0 0;
  background: #fff;
  z-index: 1000;
  overflow-y: auto;
  padding: 24px;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s linear 0.2s; height:100vh;
}

.mobile-nav.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-nav a {
  display: block;
  padding: 14px 6px;
  font-weight: 700;
  font-size: 17px;
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav .mobile-sub {
  display: flex;
  flex-direction: column;
  padding-left: 16px;
}

.mobile-nav .mobile-sub a {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ink-soft);
  border-bottom: none;
  padding: 10px 6px;
}

.mobile-nav-cta {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-nav-cta .btn {
  width: 100%;
}

@media (max-width: 960px) {
  .main-nav {
    display: none;
  }
  .header-actions .btn-secondary,
  .header-actions .btn-ghost {
    display: none;
  }
  .mobile-nav-toggle {
    display: inline-flex;
  }
  .mobile-nav {
    display: block;
  }
}

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

.hero {
  padding: 84px 0 110px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(760px 420px at 82% -10%, rgba(91, 95, 224, 0.1), transparent 60%),
    var(--color-bg);
}

/* Inner (non-homepage) pages that reuse the rich .hero layout — tighter
   top spacing so the breadcrumb/eyebrow sit close under the sticky nav. */
.hero.hero-inner {
  padding-top: 56px;
}

.hero .container {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: 56px;
  align-items: center;
}

.hero-copy h1 {
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-top: 20px;
}

.hero-copy h1 .accent {
  color: var(--color-accent);
}

/* Keeps "Simple Document Management" from breaking mid-phrase on wider
   screens, where there's room for it. Below 560px there usually isn't —
   forcing it to stay on one line there would just push the H1 (and the
   rest of the page) wider than the viewport, so it's allowed to wrap
   like normal text once space gets tight. */
.keep-together {
  white-space: nowrap;
}

@media (max-width: 560px) {
  .keep-together {
    white-space: normal;
  }
}

.hero-copy p.lead {
  margin-top: 22px;
  font-size: 18px;
  color: var(--color-ink-soft);
  max-width: 520px;
}

.hero-benefits {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.hero-benefits.center-list {
  justify-content: center;
}

.hero-benefits li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-ink);
}

.hero-benefits svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.hero-cta {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-proof {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero-proof .avatars {
  display: flex;
}

.hero-proof .avatars span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -10px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.hero-proof .avatars span:first-child {
  margin-left: 0;
}

.hero-proof p {
  font-size: 13.5px;
  color: var(--color-ink-faint);
  font-weight: 600;
}

.hero-proof strong {
  color: var(--color-ink);
}

/* Dashboard mockup */
.hero-visual {
  position: relative;
}

.mockup-glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(480px 320px at 60% 30%, rgba(91, 95, 224, 0.18), transparent 70%);
  z-index: 0;
}

.dashboard {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.dashboard-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

.dashboard-titlebar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border-strong);
}

.dashboard-titlebar .search-pill {
  margin-left: 14px;
  flex: 1;
  height: 24px;
  border-radius: var(--radius-full);
  background: #fff;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: var(--color-ink-faint);
  font-size: 12px;
}

.dashboard-titlebar .search-pill svg {
  width: 12px;
  height: 12px;
}

.dashboard-body {
  display: grid;
  grid-template-columns: 168px 1fr;
  min-height: 420px;
}

.dashboard-sidebar {
  background: var(--color-navy-900);
  color: #cfd6ea;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dashboard-sidebar .ds-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 800;
  font-size: 13.5px;
  padding: 4px 8px 18px;
}

.dashboard-sidebar .ds-logo svg {
  width: 20px;
  height: 20px;
}

.ds-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #aab3cb;
}

.ds-nav-item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.ds-nav-item.active {
  background: var(--color-accent);
  color: #fff;
}

.ds-storage {
  margin-top: auto;
  padding: 12px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 11px;
}

.ds-storage .bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.14);
  margin: 8px 0 6px;
  overflow: hidden;
}

.ds-storage .bar i {
  display: block;
  height: 100%;
  width: 62%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-full);
}

.dashboard-main {
  padding: 20px 22px;
}

.dm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.dm-row h4 {
  font-size: 14px;
  color: var(--color-ink);
}

.dm-row .tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-tint);
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.dm-folders {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}

.dm-folder {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dm-folder svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}

.dm-folder span {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-ink);
}

.dm-folder small {
  font-size: 10px;
  color: var(--color-ink-faint);
  font-weight: 600;
}

.dm-table {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}

.dm-table-head,
.dm-table-row {
  display: grid;
  grid-template-columns: 1.8fr 0.8fr 0.8fr 0.9fr;
  align-items: center;
  padding: 10px 14px;
  gap: 8px;
}

.dm-table-head {
  background: var(--color-bg-subtle);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dm-table-row {
  border-top: 1px solid var(--color-border);
  font-size: 12px;
}

.dm-file {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-ink);
}

.dm-file-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
}

.dm-file-icon.pdf { background: #ef5757; }
.dm-file-icon.doc { background: #2b6bff; }
.dm-file-icon.xls { background: #1aa672; }
.dm-file-icon.img { background: #9b6bff; }

.dm-status {
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: var(--radius-full);
  display: inline-block;
  width: fit-content;
}

.dm-status.approved { background: var(--color-success-tint); color: var(--color-success); }
.dm-status.review { background: #fff4e0; color: #b8791a; }
.dm-status.shared { background: var(--color-primary-tint); color: var(--color-primary); }

.dm-avatars {
  display: flex;
}

.dm-avatars span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -8px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
}

.dm-avatars span:first-child {
  margin-left: 0;
}

.dm-table-row .dm-date {
  color: var(--color-ink-faint);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Feature band (checklist + intro + feature grid, replaces the old
   trust strip / problem-solution / features / how-it-works sections)
   -------------------------------------------------------------------------- */

.feature-band {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-subtle);
}

.feature-band-head {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

.feature-band-head h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.check-row {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 32px;
}

.check-row li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--color-primary-dark);
}

.check-row svg {
  width: 19px;
  height: 19px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.feature-band-head > p {
  margin-top: 22px;
  font-size: 16.5px;
  color: var(--color-ink-soft);
}

.feature-band-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
}

.feature-band-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.feature-band-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--color-primary-tint);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.feature-band-icon svg {
  width: 21px;
  height: 21px;
}

.feature-band-card p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-ink-soft);
}

.feature-band-card p strong {
  color: var(--color-ink);
}

.feature-band-foot {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 48px auto 0;
  text-align: center;
  font-size: 16px;
  color: var(--color-ink-soft);
}

.feature-band-cta {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: 24px;
}

.feature-band-blob {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.feature-band-blob.blob-a {
  background: var(--color-accent-tint);
  top: 5%;
  left: 4%;
}

.feature-band-blob.blob-b {
  background: var(--color-primary-tint);
  bottom: -5%;
  right: 4%;
}

@media (max-width: 900px) {
  .feature-band-grid {
    grid-template-columns: 1fr;
  }
  .check-row {
    gap: 10px 20px;
  }
}

/* --------------------------------------------------------------------------
   Industry solutions
   -------------------------------------------------------------------------- */

.solutions {
  background: var(--color-bg-subtle);
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.solutions-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
  margin-inline: auto;
}

.solution-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 30px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.solution-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.solution-tag {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
}

/* Wraps one or more .solution-tag pills on a card. A blog post can
   belong to more than one category, so this lays multiple tags out on
   one row (each keeping its own text styling) instead of stacking them
   as separate flex-column items inside .blog-card / .blog-featured-body. */
.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 14px;
}

.blog-tags .solution-tag {
  margin-bottom: 0;
}

.solution-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.solution-card p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--color-ink-soft);
  flex: 1;
}

.solution-link {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--color-primary);
}

.solution-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s var(--ease);
}

.solution-card:hover .solution-link svg {
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .solutions-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Why DocuStacker — alternating text / visual rows
   -------------------------------------------------------------------------- */

.why-alt {
  position: relative;
  overflow: hidden;
}

.why-alt-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.why-alt-row + .why-alt-row {
  margin-top: 96px;
}

.why-alt-row.reverse .why-alt-visual {
  order: -1;
}

.why-alt-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
}

.why-alt-text h2 {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.why-alt-text p {
  margin-top: 16px;
  font-size: 16px;
  color: var(--color-ink-soft);
}

.why-alt-visual {
  position: relative;
}

.why-alt-blob {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}

.why-alt-row:nth-child(1) .why-alt-blob { background: var(--color-primary-tint); top: -10%; right: 10%; }
.why-alt-row:nth-child(2) .why-alt-blob { background: var(--color-accent-tint); bottom: -10%; left: 10%; }

.mini-mockup {
  position: relative;
  z-index: 1;
  max-width: 460px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .why-alt-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .why-alt-row.reverse .why-alt-visual {
    order: 0;
  }
  .why-alt-row + .why-alt-row {
    margin-top: 56px;
  }
}

/* --------------------------------------------------------------------------
   Security / trust
   -------------------------------------------------------------------------- */

.security {
  background: var(--color-navy-900);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.security::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 380px at 88% 10%, rgba(91, 95, 224, 0.35), transparent 60%);
  pointer-events: none;
}

.security .container {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}

.security .eyebrow {
  background: rgba(255, 255, 255, 0.1);
  color: #cfd6ea;
}

.security h2 {
  font-size: clamp(28px, 3.6vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-top: 16px;
}

.security > .container > div:first-child > p {
  margin-top: 16px;
  color: #b9c1d9;
  font-size: 16.5px;
  max-width: 460px;
}

.security-note {
  margin-top: 22px;
  font-size: 12.5px;
  color: #8892ad;
  border-left: 2px solid rgba(255, 255, 255, 0.18);
  padding-left: 12px;
}

.security-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.security-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 22px;
}

.security-card .icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(91, 95, 224, 0.22);
  color: #b9b7f2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.security-card .icon-badge svg {
  width: 19px;
  height: 19px;
}

.security-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}

.security-card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: #a9b1c9;
}

@media (max-width: 900px) {
  .security .container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .security-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   FAQ preview
   -------------------------------------------------------------------------- */

.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--color-ink);
}

.faq-question .plus {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease), border-color .25s var(--ease);
}

.faq-question .plus::before,
.faq-question .plus::after {
  content: "";
  position: absolute;
  background: var(--color-ink);
  transition: transform 0.25s var(--ease);
}

.faq-question .plus::before {
  width: 9px;
  height: 1.5px;
}

.faq-question .plus::after {
  width: 1.5px;
  height: 9px;
}

.faq-item.is-open .faq-question .plus {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.faq-item.is-open .faq-question .plus::before,
.faq-item.is-open .faq-question .plus::after {
  background: #fff;
}

.faq-item.is-open .faq-question .plus::after {
  transform: scaleY(0);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease);
}

.faq-answer p {
  padding: 0 22px 20px;
  font-size: 15.5px;
  color: var(--color-ink-soft);
  max-width: 640px;
}

.faq-more {
  text-align: center;
  margin-top: 32px;
}

.faq-more a {
  font-weight: 700;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.faq-more svg {
  width: 16px;
  height: 16px;
}

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

.final-cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  color: #fff;
  text-align: center;
  border-radius: var(--radius-xl);
  margin: 0 24px;
  padding: 72px 24px;
  position: relative;
  overflow: hidden;
}

.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(480px 260px at 15% 20%, rgba(255, 255, 255, 0.18), transparent 60%);
}

.final-cta-inner {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
}

.final-cta h2 {
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.final-cta p {
  margin-top: 16px;
  font-size: 16.5px;
  color: rgba(255, 255, 255, 0.86);
}

.final-cta .hero-cta {
  justify-content: center;
  margin-top: 30px;
}

.final-cta .btn-primary {
  background: #fff;
  color: var(--color-primary-dark);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.final-cta .btn-primary:hover {
  background: #f1f3ff;
}

.final-cta .btn-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.final-cta .btn-secondary:hover {
  border-color: #fff;
  color: #fff;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--color-navy-900);
  color: #b9c1d9;
  padding: 80px 0 32px;
  margin-top: 100px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand .logo {
  color: #fff;
}

.footer-brand p {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #8892ad;
  max-width: 280px;
}

.footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col a {
  font-size: 14.5px;
  color: #b9c1d9;
  transition: color 0.2s var(--ease);
}

.footer-col a:hover {
  color: #fff;
}

.footer-bottom {
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: #7c85a1;
}

.footer-bottom ul {
  display: flex;
  gap: 20px;
}

.footer-bottom a:hover {
  color: #fff;
}
.footer-brand .ds-logo {
    display: flex;
    gap: 5px;
    align-items: center; font-weight: 700;
}
.footer-brand .ds-logo .ds-logo-icon {
    height: 34px;
}
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 32px;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   Responsive — hero & sections
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .hero .container {
    grid-template-columns: 1fr;
  }
  .hero-visual {
    order: -1;
  }
  .dm-folders {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 720px) {
  .hero {
    padding: 48px 0 64px;
  }
  .dashboard-body {
    grid-template-columns: 1fr;
  }
  .dashboard-sidebar {
    display: none;
  }
  .dm-folders {
    grid-template-columns: repeat(2, 1fr);
  }
  .dm-table-head {
    display: none;
  }
  .dm-table-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px;
  }
  .final-cta {
    margin: 0 12px;
    padding: 56px 20px;
  }
}

/* --------------------------------------------------------------------------
   Inner / placeholder pages (Phase 1 stub)
   -------------------------------------------------------------------------- */

.page-hero {
  padding: 56px 0 56px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

.page-hero h1 {
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 760px;
}

.page-hero p {
  margin-top: 16px;
  font-size: 17px;
  color: var(--color-ink-soft);
  max-width: 620px;
}

.page-hero.is-centered .container {
  text-align: center;
}

.page-hero.is-centered h1,
.page-hero.is-centered p:not(.breadcrumbs) {
  margin-left: auto;
  margin-right: auto;
}

.page-hero.is-centered .breadcrumbs {
  text-align: left;
}

.breadcrumbs {
  margin-bottom: 18px;
  font-size: 13.5px;
  color: var(--color-ink-faint);
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumbs a {
  color: var(--color-ink-faint);
  font-weight: 600;
}

.breadcrumbs a:hover {
  color: var(--color-primary);
}

.placeholder-content {
  padding: 72px 0 100px;
}

.placeholder-box {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: 48px;
  text-align: center;
  background: var(--color-bg-subtle);
}

.placeholder-box h2 {
  font-size: 22px;
  margin-bottom: 10px;
}

.placeholder-box p {
  color: var(--color-ink-soft);
  max-width: 520px;
  margin: 0 auto 20px;
}

.related-links {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.related-links a {
  padding: 10px 18px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  font-size: 14px;
  font-weight: 600;
}

.related-links a:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Shared content components — used across industry landing pages
   -------------------------------------------------------------------------- */

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.info-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.info-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 26px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.info-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.info-card .icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--color-primary-tint);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.info-card .icon-badge svg {
  width: 21px;
  height: 21px;
}

.info-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}

.info-card p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.info-card.is-problem .icon-badge {
  background: #fdf1ef;
  color: #c34f3a;
}

@media (max-width: 900px) {
  .info-grid,
  .info-grid.cols-2 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .info-grid,
  .info-grid.cols-2 {
    grid-template-columns: 1fr;
  }
}

/* Document-type chips */

.doctype-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.doctype-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-ink);
}

.doctype-chip svg {
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .doctype-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .doctype-grid {
    grid-template-columns: 1fr;
  }
}

/* Workflow steps */

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}

.workflow-grid::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--color-border-strong) 0 8px, transparent 8px 16px);
  z-index: 0;
}

.workflow-step {
  position: relative;
  z-index: 1;
  text-align: left;
}

.workflow-num {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: 20px;
}

.workflow-num svg {
  width: 28px;
  height: 28px;
}

.workflow-step .step-index {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-ink-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.workflow-step h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.workflow-step p {
  font-size: 15.5px;
  color: var(--color-ink-soft);
}

@media (max-width: 900px) {
  .workflow-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
  }
  .workflow-grid::before {
    display: none;
  }
}

@media (max-width: 560px) {
  .workflow-grid {
    grid-template-columns: 1fr;
  }
}

/* Industry hero secondary note (used in place of the homepage avatar proof strip) */

.industry-proof {
  margin-top: 28px;
  font-size: 14.5px;
  color: var(--color-ink-faint);
}

/* --------------------------------------------------------------------------
   Pricing page
   -------------------------------------------------------------------------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
}

.pricing-card.is-featured {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.pricing-badge {
  position: absolute;
  top: -13px;
  left: 28px;
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--radius-full);
}

.pricing-card h3 {
  font-size: 20px;
  font-weight: 800;
}

.pricing-card .pricing-desc {
  margin-top: 8px;
  font-size: 15px;
  color: var(--color-ink-soft);
  min-height: 42px;
}

.pricing-price {
  margin-top: 20px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.pricing-price .amount {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.pricing-price .period {
  font-size: 14.5px;
  color: var(--color-ink-faint);
  font-weight: 600;
}

.pricing-card .btn {
  margin-top: 24px;
  width: 100%;
  justify-content: center;
}

.pricing-features {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--color-ink-soft);
}

.pricing-features svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-accent);
}

@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */

.contact-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group.full {
  grid-column: 1 / -1;
}

.form-group label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-ink);
}

.form-group .optional {
  font-weight: 500;
  color: var(--color-ink-faint);
}

.form-group input,
.form-group select,
.form-group textarea {
  font-family: inherit;
  font-size: 14.5px;
  color: var(--color-ink);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: #fff;
}

.form-note {
  grid-column: 1 / -1;
  margin-top: -4px;
  font-size: 13px;
  color: var(--color-ink-faint);
  background: var(--color-bg-subtle);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

/* Added for the Core PHP contact form: success confirmation and inline
   field-error states. The static prototype had no backend, so it never
   needed either. */
.form-note.is-success {
  color: var(--color-success);
  background: var(--color-success-tint);
  border-style: solid;
  border-color: var(--color-success);
  font-weight: 600;
}

.form-error {
  font-size: 12.5px;
  font-weight: 600;
  color: #b3261e;
}

.contact-form .btn {
  grid-column: 1 / -1;
  justify-self: start;
}

.contact-info-card {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.contact-info-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}

.contact-info-card p {
  font-size: 15px;
  color: var(--color-ink-soft);
}

.contact-info-card + .contact-info-card {
  margin-top: 16px;
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
  .contact-form {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   FAQ hub page (all answers expanded — no accordion)
   -------------------------------------------------------------------------- */

.faq-jump-nav {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.faq-category {
  scroll-margin-top: 100px;
}

.faq-category-head {
  max-width: 640px;
  margin: 0 auto 32px;
  text-align: center;
}

.faq-category-head h2 {
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.02em;
}

.faq-full-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.faq-full-item {
  padding: 26px 0;
  border-bottom: 1px solid var(--color-border);
}

.faq-full-item:first-child {
  padding-top: 0;
}

.faq-full-item:last-child {
  border-bottom: none;
}

.faq-full-item h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 8px;
}

.faq-full-item p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-ink-soft);
}

/* --------------------------------------------------------------------------
   Legal pages (privacy policy / terms and conditions)
   -------------------------------------------------------------------------- */

.legal-content {
  max-width: 760px;
  margin: 0 auto;
}

.legal-content .legal-updated {
  font-size: 14px;
  color: var(--color-ink-faint);
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}

.legal-content section + section {
  margin-top: 40px;
}

.legal-content h2 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 12px;
}

.legal-content p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-ink-soft);
}

.legal-content p + p {
  margin-top: 14px;
}

.legal-content ul {
  margin-top: 14px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-content li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-ink-soft);
  list-style: disc;
}

.legal-content a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
}

/* Blog article body — extends .legal-content (already used for the
   Privacy Policy / Terms pages) with the extra elements long-form
   articles need: bigger H2s than a legal page's numbered sections use,
   H3 subsections, ordered lists, and simple tables. */
.article-cover {
  max-width: 760px;
  margin: 0 auto 48px;
}

.article-body h2 {
  margin-top: 40px;
  margin-bottom: 14px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.article-body h2:first-child {
  margin-top: 0;
}

.article-body h3 {
  margin-top: 28px;
  margin-bottom: 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--color-ink);
}

.article-body ol {
  margin-top: 14px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.article-body ol li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-ink-soft);
}

.article-body strong {
  color: var(--color-ink);
}

.article-body .table-wrap {
  margin-top: 20px;
  overflow-x: auto;
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.article-body th,
.article-body td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.article-body th {
  font-weight: 700;
  color: var(--color-ink);
  background: var(--color-bg-subtle);
}

.article-body td {
  color: var(--color-ink-soft);
}

/* --------------------------------------------------------------------------
   Solution pages (cloud / small business / secure) — editorial content
   blocks, distinct from the card-grid rhythm used on industry pages.
   -------------------------------------------------------------------------- */

.solution-block {
  max-width: 760px;
  margin-inline: auto;
}

.solution-block + .solution-block {
  margin-top: 32px;
}

.solution-block h2 {
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.solution-block p {
  margin-top: 16px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--color-ink-soft);
}

.solution-block ul {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.solution-block li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-ink-soft);
}

.solution-block li svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--color-success);
}

.solution-highlight {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 36px;
  max-width: 420px;
  margin: 0 auto;
}

.solution-highlight .eyebrow {
  margin-bottom: 16px;
}

.solution-highlight h3 {
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 16px;
}

.solution-highlight ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.solution-highlight li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--color-ink-soft);
}

.solution-highlight li svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--color-success);
}

@media (max-width: 900px) {
  .solution-highlight {
    padding: 28px;
  }
}

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */

/* Category filter reuses .related-links' pill styling; this just adds
   an active state so the current filter reads clearly. */
.related-links a.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Unlike .related-links' other use (a "Related" cross-link row at the
   end of a section, nothing follows it), the category nav sits above
   the featured article / grid on the same page. margin-top is zeroed
   because .blog-main already supplies matching space above it, and it
   needs its own bottom margin so content below doesn't crowd it. */
.blog-category-nav {
  margin-top: 0;
  margin-bottom: 48px;
}

/* Compact icon-only "back to blog home" pill at the start of the
   category row, so a reader inside a category page has a one-click way
   back to the /blog/ landing page without reopening the main menu. */
.related-links a.blog-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
}

.blog-home-link svg {
  width: 18px;
  height: 18px;
}

/* The section directly below the blog/category hero. The hero already
   ends with its own padding and a border, so this section doesn't need
   the standard 100px top padding on top of that — 48px keeps the gap
   above the category pills even with the 48px below them. */
.blog-main {
  padding-top: 48px;
}

/* Shared cover treatment for the featured article and every grid card.
   Renders a real image when a post has one; otherwise falls back to a
   consistent branded placeholder, so the page never looks unfinished
   and never turns into a stock-photo gallery. */
.blog-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary-tint), var(--color-accent-tint));
}

.blog-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  opacity: 0.32;
}

.blog-cover-placeholder svg {
  width: 56px;
  height: 56px;
}

.blog-meta {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--color-ink-faint);
}

.blog-read-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-primary);
}

.blog-read-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s var(--ease);
}

/* Featured article */
.blog-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  padding-bottom: 56px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--color-border);
}

.blog-featured .blog-cover {
  aspect-ratio: 4 / 3;
}

.blog-featured-body h2 {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.blog-featured-body h2 a {
  color: inherit;
}

.blog-featured-body p {
  margin-top: 14px;
  font-size: 16px;
  color: var(--color-ink-soft);
}

.blog-featured:hover .blog-read-link svg {
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .blog-featured {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Article grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.blog-card {
  display: flex;
  flex-direction: column;
}

.blog-card .blog-cover {
  margin-bottom: 20px;
}

.blog-card h3 {
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.blog-card h3 a {
  color: inherit;
}

.blog-card p {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--color-ink-soft);
  flex-grow: 1;
}

.blog-card:hover .blog-read-link svg {
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

/* Pagination */
.blog-pagination {
  margin-top: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-pagination a,
.blog-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 600;
}

.blog-pagination a {
  border: 1px solid var(--color-border-strong);
  color: var(--color-ink);
}

.blog-pagination a:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.blog-pagination .is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.blog-pagination .is-disabled {
  color: var(--color-ink-faint);
  opacity: 0.45;
}

@media (max-width: 560px) {
  .blog-pagination a,
  .blog-pagination span {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
  }
}

/* --------------------------------------------------------------------------
   Google Drive Alternative — a one-off page design, not the industry/
   solution template. The hero visualizes the page's own idea (scattered
   general storage becoming one organized system) instead of reusing the
   dashboard screenshot mockup used everywhere else.
   -------------------------------------------------------------------------- */

.gda-hero {
  position: relative;
  padding: 88px 0 96px;
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}

.gda-hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.gda-hero h1 {
  margin-top: 18px;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.gda-hero .lead {
  margin-top: 18px;
  max-width: 540px;
  font-size: 18px;
  color: var(--color-ink-soft);
}

.gda-hero .hero-cta {
  margin-top: 28px;
}

.gda-trust {
  margin-top: 22px;
  font-size: 14px;
  color: var(--color-ink-faint);
}

.switch-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 32px;
}

.switch-panel-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.switch-panel.is-before .switch-panel-label {
  color: var(--color-ink-faint);
}

.switch-panel.is-after .switch-panel-label {
  color: var(--color-primary);
}

.switch-files {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.switch-file {
  width: 44px;
  height: 54px;
  border-radius: 8px;
  background: var(--color-bg-inset);
  border: 1px solid var(--color-border-strong);
  color: var(--color-ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
}

.switch-file svg {
  width: 18px;
  height: 18px;
}

.switch-file:nth-child(2) { transform: rotate(-6deg); }
.switch-file:nth-child(3) { transform: rotate(4deg); margin-top: 6px; }
.switch-file:nth-child(4) { transform: rotate(-3deg); }
.switch-file:nth-child(5) { transform: rotate(7deg); margin-top: 3px; }

.switch-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 22px 0;
}

.switch-arrow span {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-tint);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.switch-arrow svg {
  width: 20px;
  height: 20px;
}

.switch-folders {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.switch-folder {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--color-primary-tint);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink);
}

.switch-folder .folder-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}

.switch-folder .check-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--color-success);
  margin-left: auto;
}

@media (max-width: 900px) {
  .gda-hero {
    padding: 64px 0 72px;
  }
  .gda-hero .container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Comparison chart: a plain two-column comparison rather than the
   alternating editorial rows the solution pages use, so this page reads
   as its own thing rather than a re-skinned solution page. */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.compare-column {
  position: relative;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.compare-column.is-featured {
  background: #fff;
  border: 1px solid var(--color-primary);
  box-shadow: var(--shadow-md);
}

.compare-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.compare-column h3 {
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 16px;
}

.compare-column ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.compare-column li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.compare-column li svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.compare-column.is-before li svg {
  color: var(--color-ink-faint);
}

.compare-column.is-featured li svg {
  color: var(--color-success);
}

@media (max-width: 700px) {
  .compare-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
	.logo-img {
    display: block;
    height: 30px;
    width: auto;
}
.site-header .btn{padding: 8px 14px;}
.header-actions{gap: 15px;}
  .home-hero > .container {
    display: flex;
    flex-direction: column;
  }

  .hero-copy {
    order: 1;
  }

  .hero-visual,
  .home-hero .switch-card {
    order: 2; width: 100%;
  }
}
@media (max-width: 390px) {
.site-header .btn{padding: 6px 10px;}
.header-actions{gap: 10px;}	
	
}