/* =====================================================================
   TTF | Privacy & Refund Policy page (/policies) — page styles only.
   Loaded automatically on this page. Two tabs without JavaScript:
   #privacy shows first; the link #refund switches to the refund policy.
   Phones ≤600 · tablets ≤1023 · desktop ≥1024
   ===================================================================== */

/* Tabs */
.pol-tabs {
  display: flex; justify-content: center; gap: 6px; width: fit-content; max-width: 100%; margin: 0 auto 26px;
  padding: 6px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line);
}
.pol-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px;
  color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; transition: background .2s, color .2s;
}
.pol-tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pol-tab:hover { color: var(--text); }
/* active tab: privacy by default, refund when #refund is opened */
.pol-tab-privacy { background: var(--green-soft); color: var(--g-bright); }
.pol:has(#refund:target) .pol-tab-privacy { background: none; color: var(--muted); }
.pol:has(#refund:target) .pol-tab-refund { background: var(--orange-soft); color: var(--o-bright); }

/* Panels: one at a time */
.pol-panel { scroll-margin-top: calc(var(--nav-h) + var(--hero-min) + 90px); }
.pol-panels:has(#refund:target) #privacy { display: none; }
.pol-panels:not(:has(#refund:target)) #refund { display: none; }
.pol-panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.pol-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pol-grid li {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line); transition: border-color .2s, background .2s;
}
.pol-grid li:hover { border-color: rgba(93, 187, 70, .35); background: rgba(255,255,255,.05); }
.pol-refund .pol-grid li:hover { border-color: rgba(238, 116, 48, .4); }
.pol-grid p { margin: 0; line-height: 1.8; font-size: 15px; }
.pol-dot {
  flex: none; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; position: relative;
  background: var(--green-soft); border: 1px solid rgba(93, 187, 70, .35);
}
.pol-dot::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--g-bright);
}
.pol-refund .pol-dot { background: var(--orange-soft); border-color: rgba(238, 116, 48, .4); }
.pol-refund .pol-dot::after { background: var(--o-bright); }

/* Tablets */
@media (max-width: 1023px) {
  .pol-grid { gap: 10px; }
  .pol-grid li { padding: 14px 16px; }
}
/* Phones */
@media (max-width: 680px) {
  .pol-grid { grid-template-columns: minmax(0, 1fr); }
  .pol-tabs { width: 100%; }
  .pol-tab { flex: 1; justify-content: center; padding: 10px 8px; font-size: 13.5px; white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .pol-tab, .pol-grid li { transition: none; } }