/* Shared styles for the Catalog Pro legal pages (privacy, terms).
   Tokens, reset and the button live in base.css — load that first. */

html{scroll-padding-top:calc(var(--nav-h) + 16px)}
body{line-height:1.68}
a{color:var(--pink)}
a:hover{color:var(--pink-dark); text-decoration:underline}

/* ---------- toolbar ---------- */
.nav{
  position:sticky; top:0; z-index:20; height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(255,255,255,.86); border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:saturate(1.6) blur(16px); backdrop-filter:saturate(1.6) blur(16px);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  width:100%; max-width:1140px; margin-inline:auto; padding-inline:var(--gutter);
}
.nav__inner img{height:38px; width:auto}
.nav__links{display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:flex-end}
.nav__links a{
  padding:9px 14px; border-radius:999px; font-size:14px; font-weight:500;
  color:var(--ink-2); white-space:nowrap; text-decoration:none;
  transition:color .22s, background-color .22s;
}
.nav__links a:hover{color:var(--pink); background:var(--pink-tint-2); text-decoration:none}
.nav__links a[aria-current="page"]{color:var(--pink); background:var(--pink-tint); font-weight:600}
@media (max-width:560px){
  .nav{height:auto; padding-block:10px}
  .nav__inner{flex-direction:column; align-items:flex-start; gap:8px}
  .nav__links{justify-content:flex-start; margin-inline:-14px}
  .nav__links a{padding:8px 12px; font-size:13px}
}

/* ---------- page head ---------- */
.doc{width:100%; max-width:820px; margin-inline:auto; padding:clamp(34px,6vw,60px) var(--gutter) 0}
.doc__head{padding-bottom:clamp(24px,4vw,36px); border-bottom:1px solid var(--line)}
.doc h1{font-size:clamp(26px,7vw,40px); font-weight:800; line-height:1.14; letter-spacing:-.03em}
.doc__sub{color:var(--ink-2); margin-top:12px; font-size:clamp(15px,2.4vw,17px)}
.stamp{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  background:var(--pink-tint); color:var(--pink); border-radius:999px;
  padding:7px 14px; font-size:12.5px; font-weight:600; line-height:1;
}

/* ---------- sections ---------- */
.doc section{margin-top:clamp(34px,5vw,48px); scroll-margin-top:calc(var(--nav-h) + 16px)}
.doc h2{
  font-size:clamp(18px,4.6vw,23px); font-weight:700; letter-spacing:-.018em; line-height:1.3;
  display:flex; gap:12px; align-items:baseline;
}
.doc h2 .n{color:var(--pink); font-weight:800; font-variant-numeric:tabular-nums; flex:none}
.doc h3{font-size:16px; font-weight:600; margin-top:20px}
.doc p{margin-top:14px; color:var(--ink-2)}
.doc p strong,.doc li strong{color:var(--ink); font-weight:600}
.doc ul.bullets{margin-top:14px; display:flex; flex-direction:column; gap:10px}
.doc ul.bullets li{display:flex; gap:12px; color:var(--ink-2)}
.doc ul.bullets li::before{
  content:""; flex:none; width:6px; height:6px; border-radius:50%;
  background:var(--pink); margin-top:11px;
}
.callout{
  margin-top:20px; background:var(--pink-tint-2); border:1px solid #F7E4EA;
  border-left:3px solid var(--pink); border-radius:var(--r); padding:16px 18px;
}
.callout p{margin-top:0; color:var(--ink)}
.callout p + p{margin-top:10px}

/* ---------- tables ---------- */
.table-wrap{
  margin-top:18px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.doc table{width:100%; border-collapse:collapse; font-size:14.5px; line-height:1.6}
.doc thead th{
  text-align:left; background:var(--bg-2); color:var(--ink-3);
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:12px 18px; border-bottom:1px solid var(--line);
}
.doc tbody td{
  padding:15px 18px; vertical-align:top; color:var(--ink-2);
  border-top:1px solid var(--line); overflow-wrap:break-word;
}
.doc tbody tr:first-child td{border-top:0}
.doc tbody td:first-child{color:var(--ink); font-weight:600; width:34%; min-width:0}
.doc tbody tr:nth-child(even){background:var(--pink-tint-2)}

/* stack into labelled blocks on small screens */
@media (max-width:640px){
  .doc thead{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
  .doc table,.doc tbody,.doc tr,.doc td{display:block; width:auto}
  .doc tbody tr{padding:15px 16px; border-top:1px solid var(--line)}
  .doc tbody tr:first-child{border-top:0}
  .doc tbody td{padding:0; border:0}
  .doc tbody td:first-child{width:auto; margin-bottom:5px}
}

/* ---------- contact block ---------- */
.contact{
  margin-top:clamp(34px,5vw,48px);
  background:linear-gradient(130deg, var(--pink-tint) 0%, var(--pink-tint-2) 60%, #fff 100%);
  border:1px solid #F7E4EA; border-radius:18px; padding:clamp(22px,4vw,30px);
}
.contact h2{margin-bottom:4px}
.contact a{font-weight:600}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line); margin-top:clamp(50px,7vw,84px); padding-block:32px}
.footer__inner{
  width:100%; max-width:1140px; margin-inline:auto; padding-inline:var(--gutter);
  display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center;
}
.footer img{height:40px; width:auto}
.footer__copy{font-size:13px; color:var(--ink-3)}
.footer__links{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; font-size:13.5px}
.footer__links a{color:var(--ink-2); text-decoration:none}
.footer__links a:hover{color:var(--pink); text-decoration:none}
@media (min-width:900px){
  .footer__inner{flex-direction:row; text-align:left}
  .footer__copy{margin-inline:auto}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.001ms !important; animation-duration:.001ms !important}
}