/* ============================================================
   IKITAI — policy pages
   ============================================================

   These pages are read by two people: a customer deciding whether to trust a
   brand with ₹2,648, and a Razorpay reviewer checking a list. Both are served by
   the same thing — plain, high-contrast, generously spaced text that looks like
   it was written rather than generated. So this file deliberately does not
   inherit the storefront's display type, grain overlays or red glow. A policy
   page that tries to look like a product page reads as marketing, and a policy
   page that reads as marketing is the one people stop believing.

   Measure is capped so a line lands near 75 characters, verified in the browser
   rather than trusted from the `ch` unit. Legal text is the longest unbroken
   reading anyone does on this site, and the storefront's full-width container is
   unreadable at that length.
*/

.legal-page {
  background: var(--black-soft);
  min-height: 100vh;
}

.legal-wrap {
  /* `ch` resolves against this element's own 1rem font while the copy inside
     renders smaller, so the obvious 68ch measured out at ~93 characters a line —
     well past the point where the eye reliably finds the start of the next one.
     This is the value that measures ~75 in the browser, which is what matters. */
  max-width: 56ch;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-2xl);
}

/* --- Masthead --- */
.legal-head {
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--grey-light);
  transition: color var(--duration-fast);
}

.legal-back:hover { color: var(--white); }

.legal-logo {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.22em;
  color: var(--white);
  margin: var(--space-md) 0 var(--space-sm);
}

.legal-logo span { color: var(--red-bright); }

.legal-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--white);
  margin-bottom: var(--space-sm);
}

.legal-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--grey-muted);
  letter-spacing: 0.06em;
}

/* --- Body copy --- */
.legal-wrap h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  color: var(--white);
  margin: var(--space-xl) 0 var(--space-sm);
}

.legal-wrap h3 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--bone);
  margin: var(--space-lg) 0 var(--space-xs);
}

/* 1rem, not the 0.92rem used elsewhere on the site. This is the only long-form
   reading on ikitai.co and it is the text someone reads when they already have a
   problem; small type is where policies go to be skipped. */
.legal-wrap p,
.legal-wrap li {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--grey-light);
  margin-bottom: var(--space-sm);
}

.legal-wrap strong { color: var(--white); font-weight: 500; }

.legal-wrap a {
  color: var(--bone);
  border-bottom: 1px solid rgba(196, 30, 30, 0.5);
  transition: border-color var(--duration-fast);
}

.legal-wrap a:hover { border-color: var(--red-glow); }

.legal-wrap ul, .legal-wrap ol {
  padding-left: 1.2rem;
  margin-bottom: var(--space-md);
}

.legal-wrap li { margin-bottom: var(--space-xs); }

/* --- Definition rows (address, contact, entity details) --- */
.legal-facts {
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--space-md);
  margin: var(--space-md) 0 var(--space-lg);
}

.legal-facts div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* `display: grid` above beats the UA stylesheet's `[hidden] { display: none }`,
   which silently defeated the GSTIN row's `data-business-if`. A row that is meant
   to disappear when a value is absent was rendering the placeholder instead —
   i.e. advertising a GSTIN the business may not have. */
.legal-facts div[hidden],
.legal-wrap [hidden] { display: none; }

.legal-facts div:last-child { border-bottom: 0; }

/* Scoped to the direct children of a row. An unscoped `span:first-child` also
   matched the <span> inside a row's <a>, so "preorder@ikitai.co" rendered as a
   grey uppercase mono column label instead of the value it is. */
.legal-facts dt,
.legal-facts > div > span:first-child {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grey-muted);
  padding-top: 2px;
}

.legal-facts dd,
.legal-facts > div > span:last-child,
.legal-facts > div > a {
  font-size: 0.9rem;
  color: var(--white);
  margin: 0;
}

/* --- The unfilled-value marker ---
   Loud on purpose. An unset registered name or address is not a cosmetic gap:
   it is the thing that fails Razorpay's review and breaches the E-Commerce
   Rules. It should be impossible to look at a staging build and not notice. */
.legal-placeholder {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--red-glow);
  background: rgba(139, 26, 26, 0.16);
  border: 1px dashed var(--red-bright);
  padding: 1px 6px;
}

/* --- Callout for the one clause people actually need to find --- */
.legal-note {
  border-left: 2px solid var(--red-bright);
  background: var(--grey-dark);
  padding: var(--space-md);
  margin: var(--space-md) 0 var(--space-lg);
}

.legal-note p:last-child { margin-bottom: 0; }

/* --- Cross-links between the policies --- */
.legal-nav {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.legal-nav a {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grey-light);
  border-bottom: 0;
  /* 13px of vertical padding on a 0.7rem line gives a 44px tap target. These are
     the only navigation on the page and they are read on a phone. */
  padding: 13px 0;
}

.legal-nav a:hover { color: var(--white); }

.legal-nav a[aria-current="page"] { color: var(--red-bright); }

@media (max-width: 600px) {
  .legal-wrap { padding-top: var(--space-lg); }

  /* Two columns at 11rem each cannot fit a long address on a phone, so the
     label sits above the value instead of beside it. */
  .legal-facts div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}