/* ==========================================================================
   Legal pages: personvern and vilkar (sn-legal__*). Uses tokens, buttons and
   container from main.css.
   ========================================================================== */

/* ---------- Hero (dark; header is transparent above it) ---------- */
.sn-legal__hero {
  position: relative;
  margin-top: calc(var(--sn-hd-h) * -1);
  padding: calc(var(--sn-hd-h) + 54px) 0 60px;
  background:
    radial-gradient(900px 420px at 85% 0%, rgba(20, 75, 173, 0.55), rgba(20, 75, 173, 0) 70%),
    var(--sn-ink);
  overflow: hidden;
}
.sn-legal__hero-inner { position: relative; }
.sn-legal__crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; font-size: 14px; }
.sn-legal__crumb { color: var(--color-text-inverse-2); transition: color var(--duration-base) ease; }
a.sn-legal__crumb { cursor: pointer; }
a.sn-legal__crumb:hover, a.sn-legal__crumb:focus-visible { color: #ffffff; text-decoration: underline; }
.sn-legal__crumb--current { color: #ffffff; font-weight: 600; }
.sn-legal__crumb-sep { width: 12px; height: 12px; opacity: 0.7; filter: brightness(0) invert(1); }
.sn-legal__hero .sn-eyebrow { line-height: 1.4; }
.sn-legal__title { max-width: 860px; margin-bottom: 22px; font-size: 56px; line-height: 1.05; color: #ffffff; }
.sn-legal__lead { max-width: 740px; font-size: 19px; line-height: 1.6; color: rgba(255, 255, 255, 0.86); }
.sn-legal__meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.sn-legal__meta li {
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
}

/* ---------- Body: contents column + document ---------- */
.sn-legal__body { background: #ffffff; }
.sn-legal__layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 70px; align-items: start; }
.sn-legal__layout > * { min-width: 0; }

.sn-legal__toc {
  position: sticky;
  top: calc(var(--sn-hd-h) + 24px);
  padding: 26px 24px;
  border: 1px solid var(--sn-line);
  border-radius: 14px;
  background: #ffffff;
}
.sn-legal__toc-title { margin-bottom: 14px; font-family: var(--sn-tight); font-size: 15px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sn-blue); }
.sn-legal__toc-list { display: grid; gap: 2px; counter-reset: legal-toc; }
.sn-legal__toc-list li { counter-increment: legal-toc; }
.sn-legal__toc-list a {
  position: relative;
  display: block;
  padding: 8px 0 8px 32px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--sn-ink);
  cursor: pointer;
  transition: color var(--duration-base) ease;
}
.sn-legal__toc-list a::before {
  content: counter(legal-toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 9px;
  font-family: var(--sn-tight);
  font-size: 13px;
  font-weight: 600;
  color: var(--sn-mute);
  transition: color var(--duration-base) ease;
}
.sn-legal__toc-list a:hover, .sn-legal__toc-list a:focus-visible { color: var(--sn-blue); }
.sn-legal__toc-list a:hover::before, .sn-legal__toc-list a:focus-visible::before { color: var(--sn-blue); }

.sn-legal__doc { max-width: 800px; }
.sn-legal__intro { margin-bottom: 44px; padding: 26px 28px; border-left: 4px solid var(--sn-blue); border-radius: 0 12px 12px 0; background: rgba(20, 75, 173, 0.05); }
.sn-legal__doc .sn-legal__intro p, .sn-legal__doc .sn-legal__note p { font-size: 17px; line-height: 1.7; color: var(--sn-ink); }

.sn-legal__sec { padding: 40px 0; border-top: 1px solid var(--sn-line); scroll-margin-top: calc(var(--sn-hd-h) + 20px); }
.sn-legal__sec:first-of-type { padding-top: 0; border-top: 0; }
.sn-legal__sec-num { display: block; margin-bottom: 10px; font-family: var(--sn-tight); font-size: 14px; font-weight: 600; letter-spacing: 0.12em; color: var(--sn-blue); }
.sn-legal__h2 { margin-bottom: 18px; font-size: 32px; line-height: 1.15; color: var(--sn-ink); overflow-wrap: anywhere; }
.sn-legal__h3 { margin: 26px 0 10px; font-size: 20px; line-height: 1.3; color: var(--sn-ink); }
.sn-legal__doc p { font-size: 17px; line-height: 1.7; color: var(--sn-mute); }
.sn-legal__doc p + p { margin-top: 14px; }
.sn-legal__doc strong { color: var(--sn-ink); }
.sn-legal__doc p + .sn-legal__list, .sn-legal__doc .sn-legal__list + p { margin-top: 14px; }

.sn-legal__doc p a, .sn-legal__list a, .sn-legal__note a {
  color: var(--sn-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--duration-base) ease;
  overflow-wrap: anywhere;
}
.sn-legal__doc p a:hover, .sn-legal__list a:hover, .sn-legal__note a:hover,
.sn-legal__doc p a:focus-visible, .sn-legal__list a:focus-visible, .sn-legal__note a:focus-visible { color: var(--sn-ink); }

/* Bullet and numbered lists */
.sn-legal__list { display: grid; gap: 10px; }
.sn-legal__list li { position: relative; padding-left: 24px; font-size: 17px; line-height: 1.65; color: var(--sn-mute); }
.sn-legal__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sn-blue);
}
.sn-legal__list--num { counter-reset: legal-num; }
.sn-legal__list--num li { padding-left: 38px; counter-increment: legal-num; }
.sn-legal__list--num li::before {
  content: counter(legal-num);
  top: 2px;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-family: var(--sn-tight);
  font-size: 13px;
  font-weight: 600;
  line-height: 26px;
  text-align: center;
  color: #ffffff;
}

/* Note box */
.sn-legal__note {
  margin-top: 20px;
  padding: 18px 22px;
  border: 1px solid var(--sn-line);
  border-left: 4px solid var(--sn-blue);
  border-radius: 10px;
  background: #ffffff;
}
.sn-legal__note p { font-size: 16px; line-height: 1.6; color: var(--sn-ink); }

/* Fact cards (retention, rights) */
.sn-legal__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.sn-legal__cards > * { min-width: 0; }
.sn-legal__card { padding: 22px 24px; border: 1px solid var(--sn-line); border-radius: 12px; background: #ffffff; }
.sn-legal__card-title { margin-bottom: 8px; font-family: var(--sn-tight); font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--sn-ink); }
.sn-legal__card p { font-size: 15px; line-height: 1.6; color: var(--sn-mute); }

/* Company facts */
.sn-legal__facts { display: grid; gap: 0; margin-top: 20px; border: 1px solid var(--sn-line); border-radius: 12px; overflow: hidden; }
.sn-legal__fact { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; padding: 16px 24px; }
.sn-legal__fact + .sn-legal__fact { border-top: 1px solid var(--sn-line); }
.sn-legal__fact > * { min-width: 0; }
.sn-legal__fact dt { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sn-mute); }
.sn-legal__fact dd { margin: 0; font-size: 17px; line-height: 1.5; color: var(--sn-ink); overflow-wrap: anywhere; }
.sn-legal__fact dd a { color: var(--sn-blue); font-weight: 600; cursor: pointer; transition: color var(--duration-base) ease; }
.sn-legal__fact dd a:hover, .sn-legal__fact dd a:focus-visible { color: var(--sn-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- CTA (light, sits above the dark footer) ---------- */
.sn-legal__cta { padding: 0 0 var(--sn-sec-y); background: #ffffff; }
.sn-legal__cta-box {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 44px 48px;
  border: 1px solid var(--sn-line);
  border-left: 6px solid var(--sn-blue);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: var(--sn-shadow);
}
.sn-legal__cta-box > * { min-width: 0; }
.sn-legal__cta-title { margin-bottom: 12px; font-size: 34px; color: var(--sn-ink); }
.sn-legal__cta-text { font-size: 17px; line-height: 1.6; color: var(--sn-mute); }
.sn-legal__cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.sn-legal__cta-label { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sn-mute); }
.sn-legal__cta-phone {
  display: inline-block;
  font-family: var(--sn-tight);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--sn-blue);
  font-variant-numeric: lining-nums tabular-nums;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--duration-base) ease, border-color var(--duration-base) ease;
}
.sn-legal__cta-phone:hover, .sn-legal__cta-phone:focus-visible { color: var(--sn-ink); border-bottom-color: var(--sn-ink); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .sn-legal__title { font-size: 50px; }
  .sn-legal__layout { grid-template-columns: 250px minmax(0, 1fr); gap: 48px; }
  .sn-legal__cta-box { padding: 38px 36px; gap: 36px; }
}
@media (max-width: 1024px) {
  .sn-legal__hero { padding-bottom: 50px; }
  .sn-legal__title { font-size: 44px; }
  .sn-legal__layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .sn-legal__toc { position: static; }
  .sn-legal__toc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .sn-legal__doc { max-width: none; }
  .sn-legal__cta-box { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 768px) {
  .sn-legal__hero { padding-top: calc(var(--sn-hd-h) + 40px); padding-bottom: 42px; }
  .sn-legal__crumbs { margin-bottom: 26px; }
  .sn-legal__title { font-size: 36px; }
  .sn-legal__lead { font-size: 17px; }
  .sn-legal__h2 { font-size: 27px; }
  .sn-legal__sec { padding: 32px 0; }
  .sn-legal__cta-title { font-size: 29px; }
  .sn-legal__cta-box { padding: 30px 26px; }
}
@media (max-width: 480px) {
  .sn-legal__hero { padding-bottom: 34px; }
  .sn-legal__title { font-size: 31px; }
  .sn-legal__lead { font-size: 16px; }
  .sn-legal__meta { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 24px; }
  .sn-legal__toc { padding: 20px 18px; }
  .sn-legal__toc-list { grid-template-columns: minmax(0, 1fr); }
  .sn-legal__intro { padding: 20px 18px; }
  .sn-legal__h2 { font-size: 24px; }
  .sn-legal__h3 { font-size: 18px; }
  .sn-legal__doc p, .sn-legal__list li { font-size: 16px; }
  .sn-legal__cards { grid-template-columns: minmax(0, 1fr); }
  .sn-legal__card { padding: 18px 18px; }
  .sn-legal__fact { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 18px; }
  .sn-legal__cta-box { padding: 24px 20px; border-left-width: 4px; }
  .sn-legal__cta-title { font-size: 25px; }
  .sn-legal__cta-phone { font-size: 28px; }
  .sn-legal__cta-actions .sn-btn { width: 100%; }
}
@media (max-width: 375px) {
  .sn-legal__title { font-size: 28px; }
  .sn-legal__h2 { font-size: 22px; }
  .sn-legal__cta-phone { font-size: 25px; }
}