/* =============================================================
   NOWA POLICY — branded stylesheet (moderate treatment)
   Built on assets/tokens.css. Storybook warmth, kept legible for
   long-form legal copy: cream canvas, one white "paper" pxcard per
   page, stepped pixel corners + hard offset shadow, Onest headings,
   Noto Sans body, coral-only accents. No Tiny5 (pet-world only), no
   dark "night" surfaces (heavy for reading).
   ============================================================= */

/* ---- page canvas + subtle graph-paper ---- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--color-warm-parchment);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  color: var(--color-deep-ink);
  font-family: var(--font-noto-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  padding: clamp(20px, 5vw, 56px) 18px 64px;
}

/* ---- the stepped-corner primitive (medium notch, 12px) ---- */
.pxcard {
  position: relative; border: 0; border-radius: 0; background: transparent;
  --pxbg: var(--surface-pure-white);
  --pxborder: var(--color-chalk-surface);
}
.pxcard::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(var(--pxbg), var(--pxbg)) 1px 1px / calc(100% - 2px) calc(100% - 2px) no-repeat,
    var(--pxborder);
  clip-path: polygon(0 12px,6px 12px,6px 6px,12px 6px,12px 0,calc(100% - 12px) 0,calc(100% - 12px) 6px,calc(100% - 6px) 6px,calc(100% - 6px) 12px,100% 12px,100% calc(100% - 12px),calc(100% - 6px) calc(100% - 12px),calc(100% - 6px) calc(100% - 6px),calc(100% - 12px) calc(100% - 6px),calc(100% - 12px) 100%,12px 100%,12px calc(100% - 6px),6px calc(100% - 6px),6px calc(100% - 12px),0 calc(100% - 12px));
}
.pxcard > * { position: relative; z-index: 1; }

/* ---- brand header ---- */
.pol-top {
  max-width: var(--page-max-width-narrow);
  margin: 0 auto 24px; padding: 0 4px;
  display: flex; align-items: baseline; gap: 12px;
}
.pol-mark {
  font-family: var(--font-onest); font-weight: var(--font-weight-black);
  font-size: var(--text-heading); letter-spacing: -0.02em;
  color: var(--color-deep-ink); text-decoration: none; line-height: 1;
}
.pol-mark::after { content: "."; color: var(--color-coral-flame); }
.pol-eyebrow {
  font-family: var(--font-onest); font-weight: var(--font-weight-bold);
  font-size: var(--text-caption); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-slate-mid);
}

/* ---- the document "paper" ---- */
.policy-doc {
  max-width: var(--page-max-width-narrow);
  margin: 0 auto;
  filter: drop-shadow(var(--px-shadow-3));
}
.policy-inner { padding: clamp(24px, 5vw, 56px); }

/* ---- typography inside the doc ---- */
.policy-inner h1 {
  font-family: var(--font-onest); font-weight: var(--font-weight-black);
  font-size: var(--text-heading-xl); line-height: var(--leading-display-tight);
  letter-spacing: -0.02em; margin: 0 0 12px; color: var(--color-deep-ink);
}
.policy-inner h1::after {
  content: ""; display: block; width: 64px; height: 6px; margin-top: 14px;
  background: var(--color-coral-flame);
  clip-path: polygon(0 0,100% 0,100% 4px,calc(100% - 4px) 4px,calc(100% - 4px) 100%,4px 100%,4px 4px,0 4px);
}
.policy-inner h2 {
  font-family: var(--font-onest); font-weight: var(--font-weight-semibold);
  font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm);
  letter-spacing: -0.01em; margin: 2.2rem 0 .5rem; color: var(--color-deep-ink);
  padding-left: 14px; position: relative;
}
.policy-inner h2::before {
  content: ""; position: absolute; left: 0; top: .18em; width: 5px; height: .95em;
  background: var(--color-coral-flame);
}
.policy-inner h3 {
  font-family: var(--font-onest); font-weight: var(--font-weight-semibold);
  font-size: var(--text-subheading); margin: 1.3rem 0 .3rem; color: var(--color-slate-mid);
}
.policy-inner p, .policy-inner li {
  font-family: var(--font-noto-sans); font-size: var(--text-body);
  line-height: var(--leading-body); color: var(--color-deep-ink);
}
.policy-inner ul { padding-left: 1.3rem; }
.policy-inner li { margin: .4rem 0; }
.policy-inner strong { font-weight: var(--font-weight-bold); }
.policy-inner a { color: var(--color-coral-flame); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 150ms var(--ease-out-strong); }
.policy-inner a:hover { border-bottom-color: var(--color-coral-flame); }
.policy-inner .updated {
  color: var(--color-mist-body); font-size: var(--text-body-sm);
  margin: 0 0 2rem; font-family: var(--font-noto-sans);
}
.policy-inner hr { border: 0; border-top: 1px solid var(--grid-line); margin: 2.2rem 0; }

/* legalese callout (ToS "AS IS" / liability blocks) */
.policy-inner .legal {
  background: var(--color-bright-paper);
  border-left: 4px solid var(--color-amber-signal);
  border-radius: var(--radius-sm);
  padding: .9rem 1.1rem; font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm); color: var(--color-slate-mid);
}

/* ---- footer ---- */
.pol-foot {
  max-width: var(--page-max-width-narrow);
  margin: 28px auto 0; padding: 0 6px;
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  font-family: var(--font-noto-sans); font-size: var(--text-body-sm);
  color: var(--color-mist-body);
}
.pol-foot a { color: var(--color-coral-flame); text-decoration: none; font-weight: var(--font-weight-semibold); }
.pol-foot a:hover { text-decoration: underline; }
.pol-back {
  font-family: var(--font-onest); font-weight: var(--font-weight-bold);
  display: inline-flex; align-items: center; gap: 6px;
}

/* =============================================================
   INDEX (cover) — clickable pxcard tiles (Tier-2 affordance)
   ============================================================= */
.pol-hero { max-width: var(--page-max-width-content); margin: 0 auto 32px; padding: 0 4px; }
.pol-hero h1 {
  font-family: var(--font-onest); font-weight: var(--font-weight-black);
  font-size: var(--text-display-alt); line-height: var(--leading-display-tight);
  letter-spacing: -0.025em; margin: 6px 0 10px;
}
.pol-hero p { max-width: 46ch; color: var(--color-slate-mid); font-size: var(--text-subheading); margin: 0; }
.pol-grid {
  max-width: var(--page-max-width-content); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px; padding-right: 8px; padding-bottom: 8px; /* room for offset shadow */
}
.pol-tile {
  display: block; text-decoration: none; color: inherit;
  filter: drop-shadow(var(--px-shadow));
  transition: transform 110ms var(--ease-out-strong), filter 110ms var(--ease-out-strong);
}
.pol-tile .pt-in { padding: 20px 20px 22px; }
.pol-tile .pt-kicker {
  font-family: var(--font-onest); font-weight: var(--font-weight-bold);
  font-size: var(--text-caption); letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-coral-flame);
}
.pol-tile h2 {
  font-family: var(--font-onest); font-weight: var(--font-weight-semibold);
  font-size: var(--text-heading-sm); margin: 6px 0 6px; color: var(--color-deep-ink); line-height: 1.25;
}
.pol-tile p { margin: 0; font-size: var(--text-body-sm); color: var(--color-slate-mid); line-height: var(--leading-body-sm); }
/* Tier-2 clickable hover: coral border + lift (corner-accurate via inset polygon) */
@media (hover: hover) and (pointer: fine) {
  .pol-tile:hover { transform: translateY(-5px); filter: drop-shadow(var(--px-shadow-hover)); }
  .pol-tile:hover { --pxborder: var(--color-coral-flame); }
  .pol-tile:hover::before { background: var(--color-coral-flame); }
  .pol-tile:hover .pxcard::before,
  a.pol-tile:hover > .pxcard { }
}
/* the tile IS the pxcard host */
.pol-tile.pxcard:hover::after {
  content: ""; position: absolute; inset: 0; z-index: 0; width: auto; height: auto;
  background: var(--pxbg);
  clip-path: polygon(4px 16px,10px 16px,10px 10px,16px 10px,16px 4px,calc(100% - 16px) 4px,calc(100% - 16px) 10px,calc(100% - 10px) 10px,calc(100% - 10px) 16px,calc(100% - 4px) 16px,calc(100% - 4px) calc(100% - 16px),calc(100% - 10px) calc(100% - 16px),calc(100% - 10px) calc(100% - 10px),calc(100% - 16px) calc(100% - 10px),calc(100% - 16px) calc(100% - 4px),16px calc(100% - 4px),16px calc(100% - 10px),10px calc(100% - 10px),10px calc(100% - 16px),4px calc(100% - 16px));
}

@media (prefers-reduced-motion: reduce) {
  .pol-tile, .policy-inner a { transition: none; }
  .pol-tile:hover { transform: none; }
}