/* ============================================================
   lytom-assess.css — Visual theme for Lytom Assess 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 img {
  height: 40px;
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
}

@media (max-width: 540px) {
  .site-nav .brand img {
    height: 36px;
    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 .sub a {
  color: var(--on-dark-sub);
}
.hero .sub a:hover {
  color: var(--on-dark);
}

.hero .price-line {
  color: var(--on-dark-muted);
}
.hero .price-line strong {
  color: var(--on-dark);
}
.hero .price-line .price-from {
  color: var(--on-dark-muted);
}

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

.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);
}

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

.hero-shot {
  background: #ffffff;
}

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

/* --- Trust strip ------------------------------------------ */

.trust-strip {
  background: #ffffff;
  border-top-color: var(--card-border);
  border-bottom-color: var(--card-border);
}

a.trust-item:hover {
  background: var(--band-bg);
}

.trust-item .trust-icon {
  color: var(--teal);
}

.trust-item .trust-icon.is-brand {
  color: var(--text);
}

a.trust-item:hover strong {
  color: var(--teal-dark);
}

/* --- 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);
}

/* --- Proof rows ------------------------------------------- */

.proof-text h3 .icon {
  color: var(--teal);
}

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

/* --- Testimonials ----------------------------------------- */

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

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

.testimonial-card.placeholder {
  background: var(--teal-light);
  border-color: rgba(13, 148, 136, 0.25);
}

.testimonial-card.placeholder::before {
  background: var(--teal);
  color: #ffffff;
}

.testimonial-card.placeholder a {
  color: var(--teal-dark);
}

/* --- 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);
}

/* --- Comparison table ------------------------------------- */

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

.comparison-table th,
.comparison-table td {
  border-bottom-color: var(--card-border);
}

.comparison-table thead th {
  background: var(--teal-light);
  border-bottom-color: var(--teal);
}

.comparison-table tbody tr:nth-child(odd) td,
.comparison-table tbody tr:nth-child(odd) th {
  background: var(--band-bg);
}

.comparison-table th[scope="col"]:nth-child(2) {
  color: var(--teal-dark);
}

/* --- Closing CTA ------------------------------------------ */

.closing-cta {
  background: var(--charcoal);
}

.closing-cta h2 {
  color: var(--on-dark);
}

.closing-cta p.lead {
  color: var(--on-dark-sub);
}

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

/* --- Sticky mobile CTA ------------------------------------ */

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

/* --- 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);
}

/* --- 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);
}

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

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

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

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

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