/* TESORIN shared surface system
   Keeps website cards consistent while preserving intentionally different
   product mockups, dark panels, legal documents, and editorial rows. */
@import url('/assets/css/sketches.css');

:root {
  --site-card-radius: 32px;
  --site-card-padding: 32px;
  --site-card-bg: #ffffff;
  --site-card-border: rgba(11,11,11,.10);
  --site-card-shadow: 0 1px 2px rgba(11,11,11,.025), 0 18px 44px -34px rgba(11,11,11,.22);
  --site-card-shadow-hover: 0 1px 2px rgba(11,11,11,.03), 0 24px 54px -34px rgba(11,11,11,.28);
  --site-compact-radius: 20px;
  --site-compact-shadow: 0 1px 2px rgba(11,11,11,.02), 0 14px 34px -30px rgba(11,11,11,.20);
}

/* Standard marketing / information cards. */
.card,
.legal-card,
.trust-card,
.belief,
.border-card,
.safety-card,
.deletion-step,
.links-card {
  box-sizing: border-box;
  padding: var(--site-card-padding);
  border: 1px solid var(--site-card-border);
  border-radius: var(--site-card-radius);
  background: var(--site-card-bg);
  box-shadow: var(--site-card-shadow);
}

.card:hover,
.legal-card:hover,
.trust-card:hover,
.belief:hover,
.border-card:hover,
.safety-card:hover,
.deletion-step:hover,
.links-card:hover {
  box-shadow: var(--site-card-shadow-hover);
}

/* Keep card typography and spacing consistent without changing content. */
.legal-card h3,
.safety-card h3 {
  margin-top: 18px;
}

.legal-card .tag + h3 {
  margin-top: 0;
}

.legal-card p,
.trust-card p,
.belief p,
.safety-card p,
.deletion-step p {
  margin-top: 12px;
}

/* Legal-information pages use one card family above flat document rows.
   Their rules are structural and intentionally retained for scanability. */
.legal-glance-grid {
  align-items: stretch;
}

.legal-glance-grid > .legal-card {
  height: 100%;
}

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

.legal-row:last-child {
  border-bottom-color: var(--site-card-border);
}

.legal-body > :first-child {
  margin-top: 0;
}

/* Regional split is one card. Individual cells are not nested cards. */
.split {
  border: 1px solid var(--site-card-border);
  border-radius: var(--site-card-radius);
  background: var(--site-card-bg);
  box-shadow: var(--site-card-shadow);
  overflow: hidden;
}

.split-cell {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  transform: none;
}

.split-cell:hover {
  box-shadow: none;
  transform: none;
}

/* Editorial marketing rows use whitespace, alignment, and alternation instead
   of repeated horizontal rules. */
.company-principle {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  border: 0;
  transform: none;
}

.company-principle:hover {
  box-shadow: none;
  transform: none;
}

/* Official links live inside one outer card. Rows stay flat. */
.official-link {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  transform: none;
}

.official-link:hover {
  box-shadow: none;
  transform: none;
}

/* Compact interaction surfaces. */
.q,
.safety-note {
  border: 1px solid var(--site-card-border);
  border-radius: var(--site-compact-radius);
  background: #ffffff;
  box-shadow: var(--site-compact-shadow);
}

/* Features page keeps product media distinct, while its page rhythm follows
   the site. Vertical spacing does the section separation. */
.feature-detail-layout > .spread {
  box-sizing: border-box;
  padding-top: 84px;
  padding-bottom: 84px;
  border-top: 0;
}

.feature-detail-layout > .spread:first-of-type {
  padding-top: 24px;
}

.feature-detail-layout > .spread .spread-grid {
  grid-template-columns: minmax(0,1fr) minmax(292px,.92fr);
  gap: clamp(42px,5vw,68px);
  align-items: center;
}

.feature-detail-layout > .spread .spread-grid > div:first-child {
  min-width: 0;
}

.feature-detail-layout > .spread .spread-grid > div:first-child > p:not(.sub),
.feature-detail-layout > .spread .spread-grid > div:first-child > ul {
  max-width: 50ch;
}

.feature-detail-layout > .tesorin-feature-text-only .spread-grid,
.feature-detail-layout > .tesorin-feature-text-only .tesorin-feature-grid-text-only {
  grid-template-columns: minmax(0,760px);
  justify-content: start;
  align-items: start;
}

.feature-page-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--site-card-border);
  color: var(--ink, #191714);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
  transition: border-color .2s ease, gap .2s ease;
}

.feature-page-link:hover {
  gap: 11px;
  border-bottom-color: currentColor;
}

/* Dark-panel cards intentionally use their local design system. */
.price-board .price-card,
.about-card .about-mini-card {
  border-radius: 24px;
}

/* Legal-document pages deliberately use their own document layout. */
body.terms-document .card,
body.terms-document .legal-card,
body.terms-document .links-card {
  padding: initial;
  border: initial;
  border-radius: initial;
  background: initial;
  box-shadow: initial;
}

@media (max-width: 980px) {
  .feature-detail-layout > .spread {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .feature-detail-layout > .spread .spread-grid,
  .feature-detail-layout > .spread.flip .spread-grid {
    grid-template-columns: minmax(0,1fr);
    gap: 40px;
    align-items: start;
  }
}

@media (max-width: 720px) {
  :root {
    --site-card-radius: 26px;
    --site-card-padding: 26px;
  }

  .links-card {
    padding: 26px;
  }

  .legal-glance-grid {
    gap: 14px;
  }

  .legal-row {
    padding-top: 34px;
    padding-bottom: 34px;
  }

  .feature-detail-layout > .spread {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .feature-detail-layout > .spread:first-of-type {
    padding-top: 18px;
  }

  .feature-page-link {
    margin-top: 22px;
  }
}