/* ============================================================================
   TikGrow — policy / support pages. Depends on assets/site.css for the tokens,
   header, buttons and footer, so these pages and the landing page are one site.
   Long-form rules only live here.
   ========================================================================= */

.policy{position:relative;isolation:isolate;padding-block:clamp(24px,3.5vw,40px) clamp(56px,7vw,88px)}
/* Same aurora wash as the hero, at a fraction of the strength. */
.policy::before{content:"";position:absolute;inset:0 0 auto;height:420px;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 100% at 50% -20%,rgba(255,61,119,.13),transparent 66%),
             radial-gradient(44% 86% at 86% -10%,rgba(139,92,246,.11),transparent 64%)}
/* A reading measure, not the 1120px marketing grid. */
.policy > .wrap{max-width:54rem}

/* --------------------------------------------------------------- content --- */
.policy h1{font-size:clamp(2rem,1.55rem + 1.9vw,2.75rem);margin-bottom:10px}
.policy h2{font-size:clamp(1.25rem,1.14rem + .45vw,1.4375rem);margin:clamp(38px,4.5vw,52px) 0 12px;
  scroll-margin-top:90px}
.policy h3{font-size:1.0625rem;margin:26px 0 8px}
.policy p,.policy li{color:var(--text-2);line-height:1.75}
.policy p + p{margin-top:14px}
.policy strong{color:var(--text);font-weight:700}
.policy a:not(.btn){color:var(--violet-bright);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(167,139,250,.45);transition:text-decoration-color .16s var(--ease)}
.policy a:not(.btn):hover{text-decoration-color:currentColor}

/* ------------------------------------------------------- policy switcher --- */
.policy .policy-nav{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:clamp(28px,4vw,40px);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.policy .policy-nav::-webkit-scrollbar{display:none}
.policy .policy-nav a{flex:0 0 auto;padding:8px 15px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--card);color:var(--text-3);font-weight:600;font-size:var(--fs-sm);white-space:nowrap;
  text-decoration:none;
  transition:color .16s var(--ease),border-color .16s var(--ease),background-color .16s var(--ease)}
.policy .policy-nav a:hover{color:var(--text);border-color:var(--line-strong)}
.policy .policy-nav a[aria-current="page"]{color:var(--text);border-color:rgba(255,61,119,.4);
  background:rgba(255,61,119,.12)}
@media(min-width:900px){
  .policy .policy-nav{mask-image:none;-webkit-mask-image:none}
}


.policy .meta{color:var(--text-dim);font-size:var(--fs-sm);margin-bottom:20px}
.policy .lead{color:var(--text-2);font-size:var(--fs-lead);line-height:1.68;margin-bottom:8px}

.policy ul,.policy ol{padding-left:22px;margin:12px 0}
.policy li{margin:8px 0}
.policy li::marker{color:var(--text-dim)}

/* Callout ----------------------------------------------------------------- */
.policy .note{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:20px 22px;margin:22px 0;box-shadow:var(--shadow-card)}
.policy .note > :first-child{margin-top:0}
.policy .note > :last-child{margin-bottom:0}
.policy .note p{margin:8px 0}
.policy .note ul{margin:8px 0}

/* Table -------------------------------------------------------------------- */
.policy .table-wrap{margin:18px 0;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:auto hidden;-webkit-overflow-scrolling:touch;background:var(--card-alt)}
.policy table{width:100%;min-width:34rem;border-collapse:collapse;font-size:var(--fs-sm)}
.policy th,.policy td{text-align:left;padding:13px 16px;vertical-align:top;
  border-bottom:1px solid var(--line)}
.policy th{background:var(--surface);color:var(--text);font-weight:700;white-space:nowrap}
.policy td{color:var(--text-2);line-height:1.65}
.policy tbody tr:last-child td{border-bottom:0}

/* Numbered walkthrough ----------------------------------------------------- */
.policy .steps{list-style:none;padding:0;margin:20px 0;counter-reset:step}
.policy .steps li{position:relative;padding-left:48px;margin:18px 0;counter-increment:step;
  min-height:32px}
.policy .steps li::before{content:counter(step);position:absolute;left:0;top:-1px;
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-size:var(--fs-sm);font-weight:800;color:#fff;background:var(--brand);
  box-shadow:0 6px 16px -6px rgba(255,61,119,.7)}

/* Contact cards ------------------------------------------------------------ */
.policy .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0}
@media(max-width:640px){.policy .cards{grid-template-columns:1fr}}
.policy .card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-card);
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.policy .card:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.policy .card h2{margin:0 0 8px;font-size:1.125rem}
.policy .card p{margin:0 0 14px}
.policy .card .email{margin-top:auto}
.policy .card .btn{margin-top:16px;align-self:flex-start}
.policy .email{font-weight:700;word-break:break-word}

.policy .btn{margin:8px 0}