/* ============================================================
   lytom-comply.css — Visual theme for Lytom Comply pages
   Matches homepage palette. No copy or structure changes.
   ============================================================ */

:root {
  --teal:        #0d9488;
  --teal-dark:   #0f766e;
  --teal-light:  #f0fdfa;
  --charcoal:    #3c4147;
  --charcoal-mid: #4e555e;
  --on-dark:     #ffffff;
  --on-dark-sub: rgba(255, 255, 255, 0.68);
  --on-dark-muted: rgba(255, 255, 255, 0.45);
  --card-border: #e2e8f0;
  --card-bg:     #ffffff;
  --band-bg:     #f8fafc;
}

/* --- Base page surface ------------------------------------ */

body {
  background: #ffffff;
}

a { color: var(--teal-dark); }
a:visited { color: var(--teal-dark); }
a:hover { color: var(--teal); }

::selection {
  background: var(--teal-light);
  color: var(--text);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
details:focus-visible {
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.3);
}

.btn:focus-visible,
.nav-cta:focus-visible {
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.3), 0 0 0 4px rgba(13, 148, 136, 0.15);
}

/* --- Navigation ------------------------------------------- */

.site-nav {
  background: var(--charcoal);
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

.brand-wordmark {
  color: var(--on-dark);
}

.brand-wordmark-sub {
  color: var(--on-dark-sub);
}

.site-nav .brand img {
  height: 48px;
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
}

@media (max-width: 540px) {
  .site-nav .brand img {
    height: 42px;
    width: auto;
    object-fit: contain;
  }
}

.nav-link {
  color: var(--on-dark-sub);
}
.nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-dark);
  text-decoration: none;
}

.nav-signin > summary {
  color: var(--on-dark-sub);
}
.nav-signin > summary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-dark);
}
.nav-signin[open] > summary {
  background: rgba(255, 255, 255, 0.1);
  color: var(--on-dark);
}

.nav-signin-panel {
  background: #ffffff;
  border-color: var(--card-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.nav-signin-panel a:hover {
  background: var(--band-bg);
}

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

.hero {
  background: var(--charcoal);
  padding-bottom: clamp(32px, 5vw, 56px);
}

.hero h1 {
  color: var(--on-dark);
}

.hero .sub {
  color: var(--on-dark-sub);
}

.hero .trial-micro {
  color: var(--on-dark-muted);
}

.hero .tick-strip {
  color: var(--on-dark-muted);
  margin-bottom: var(--space-4);
}

.hero .tick svg {
  color: var(--teal);
}

.hero .btn-secondary {
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--on-dark);
  background: transparent;
}
.hero .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--on-dark);
}
.hero .btn-secondary:visited {
  color: var(--on-dark);
}

/* --- Buttons & accents ------------------------------------ */

.btn-primary {
  background: var(--teal);
  color: #ffffff;
  border-color: var(--teal);
}
.btn-primary:visited { color: #ffffff; }
.btn-primary:hover {
  background: var(--teal-dark);
  color: #ffffff;
  border-color: var(--teal-dark);
}

.btn-secondary:hover {
  background: var(--band-bg);
  border-color: var(--teal);
  color: var(--text);
}

.eyebrow {
  color: var(--teal);
}

/* --- Quick answers ---------------------------------------- */

.quick-answers {
  background: var(--band-bg);
  border-top-color: var(--card-border);
  border-bottom-color: var(--card-border);
}

.quick-answers .qa-card {
  background: var(--card-bg);
  border-color: var(--card-border);
}

/* --- Sections --------------------------------------------- */

.section {
  background: #ffffff;
}

.section-band {
  background: var(--band-bg);
}

/* --- Feature grid ----------------------------------------- */

.feature-card {
  border-color: var(--card-border);
}
.feature-card:hover {
  border-color: var(--teal);
}

.feature-card .feature-icon {
  background: var(--teal-light);
  color: var(--teal);
}

/* --- Two-column info blocks ------------------------------- */

.two-col > div {
  border-color: var(--card-border);
}

/* --- Pricing table ---------------------------------------- */

.pricing-table table {
  border-color: var(--card-border);
}

.pricing-table thead tr {
  border-bottom-color: var(--teal) !important;
}

.pricing-table tbody tr {
  border-bottom-color: var(--card-border) !important;
}

/* --- Page CTA box ----------------------------------------- */

.page-cta {
  background: var(--card-bg);
  border-color: var(--card-border);
}

.page-cta .micro a {
  color: var(--teal-dark);
}

/* --- Feature section screenshot --------------------------- */

.features-shot {
  padding: 0 0 clamp(32px, 5vw, 48px);
  background: transparent;
}

.features-shot .screenshot-frame {
  max-width: 1080px;
  margin: 0 auto;
}

/* --- Pricing section cost card ---------------------------- */

.section-band .qa-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: clamp(18px, 2vw, 24px);
}

.section-band .qa-card h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text);
  line-height: 1.3;
}

.section-band .qa-card p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

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

.faq-section {
  background: var(--band-bg);
}

.faq-item {
  border-top-color: var(--card-border);
}
.faq-item:last-of-type {
  border-bottom-color: var(--card-border);
}

.faq-item > summary:focus-visible {
  outline-color: var(--teal);
}

.faq-item > p a {
  color: var(--teal-dark);
}

/* --- Lytom family band ------------------------------------ */

.lytom-family-band {
  background: linear-gradient(180deg, var(--band-bg), #ffffff);
  border-top-color: var(--card-border);
  border-bottom-color: var(--card-border);
}

.family-card {
  border-color: var(--card-border);
}

a.family-card:hover,
a.family-card:focus-visible {
  border-color: var(--teal);
  box-shadow: 0 8px 24px rgba(13, 148, 136, 0.1);
}

.family-card.is-current {
  border-color: var(--teal);
  background: var(--teal-light);
}

.family-card-tag {
  background: var(--teal);
  color: #ffffff;
}

.family-card-link {
  color: var(--teal-dark);
}

/* --- Related links ---------------------------------------- */

.related {
  border-top-color: var(--card-border);
}

.related h3 {
  color: var(--teal);
}

.related a {
  color: var(--teal-dark);
}

/* --- Related reading ------------------------------------ */

.related-reading {
  background: #ffffff;
  border-top-color: var(--card-border);
}

.related-reading .related-card {
  border-color: var(--card-border);
}

.related-reading .related-card:hover {
  border-color: var(--teal);
}

.related-reading .related-card .related-tag {
  color: var(--teal);
}

.related-reading .related-card .related-link {
  color: var(--teal-dark);
}

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

.site-footer {
  border-top-color: var(--card-border);
}

.footer-brand .footer-signin a:hover,
.footer-grid a:hover,
.footer-bottom a:hover {
  color: var(--teal-dark);
}

.footer-brand .brand-wordmark-sub {
  color: var(--teal-dark);
}

/* --- Article / SEO pages (page-main) ---------------------- */

.page-main .breadcrumb a {
  color: var(--teal-dark);
}
.page-main .breadcrumb a:hover {
  color: var(--teal);
}

.page-main .tick-strip .tick svg {
  color: var(--teal);
}

.page-main .feature-list li,
.page-main .types-list li {
  border-color: var(--card-border);
}
.page-main .feature-list li:hover,
.page-main .types-list li:hover {
  border-color: var(--teal);
}