/* DealArena marketing — Terms page (the plain-English summary of /tos).
   Rides on legal.css (shared legal shell) + marketing-shell tokens.
   Namespaced under .p-terms so nothing leaks into Privacy / Security / TOS,
   which share legal.css. */

.p-terms {
  /* The design's own accents. marketing-shell's --green is brand ORANGE (see
     the note at the top of marketing-shell.css), so the real green and the
     purple have to be named locally rather than borrowed. */
  --tm-green: #0a8754;
  --tm-purple: #8b5cf6;
  --tm-brand: var(--green);
  --tm-mute: var(--ink-4);
  --tm-link: var(--green-2);
}

/* ---------- hero ---------- */
.p-terms .legal-hero h1 { max-width: 660px; }
.p-terms .tm-eyebrow { position: relative; z-index: 1; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin: 18px 0 0; }
.p-terms .legal-hero h1 { margin-top: 14px; }
.p-terms .legal-hero .lead { max-width: 620px; }

.p-terms .tm-cta {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px; margin-top: 22px;
  border-radius: 11px; background: var(--green); color: var(--on-brand, #201009);
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  text-decoration: none; box-shadow: 0 4px 0 #a83a12;
  transition: transform .1s, box-shadow .1s;
}
.p-terms .tm-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 #a83a12; }

/* hero symbol — dimensional stack of legal papers + wax seal */
.p-terms .da-mark { position: absolute; top: 10px; right: -14px; width: 262px; height: 251px; pointer-events: none; z-index: 0; }
.p-terms #tm-seal { transform-box: view-box; transform-origin: 159px 172px; transition: transform .22s cubic-bezier(.3,.7,.25,1.5); }
.p-terms #tm-topsheet { transform-box: view-box; transform-origin: 118px 196px; transition: transform .3s cubic-bezier(.3,.7,.3,1.1); }
.p-terms #tm-spark { transition: opacity .12s ease; }

/* ---------- the eight summary cards ---------- */
/* minmax(0, 1fr), not 1fr: a plain 1fr track floors at the content's
   min-content width, which is what pushed the old legal grid sideways. */
.p-terms .tm-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.p-terms .tm-card {
  border: 1px solid var(--line); border-left: 3px solid var(--tm-mute);
  border-radius: 14px; background: var(--bg-1);
  padding: 18px 18px 6px; min-width: 0;
}
.p-terms .tm-k-green { border-left-color: var(--tm-green); }
.p-terms .tm-k-brand { border-left-color: var(--tm-brand); }
.p-terms .tm-k-purple { border-left-color: var(--tm-purple); }
.p-terms .tm-k-mute { border-left-color: var(--tm-mute); }

.p-terms .tm-card-top { display: flex; align-items: baseline; gap: 9px; }
.p-terms .tm-card-top .n { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); flex: none; }
.p-terms .tm-card-top h2 { flex: 1; min-width: 0; font-family: var(--display); font-size: 18px; line-height: 1.25; letter-spacing: -.02em; font-weight: 700; margin: 0; color: var(--ink); }
.p-terms .tm-card p { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin: 10px 0 0; }
.p-terms .tm-card > a {
  display: flex; align-items: center; min-height: 44px;
  font-family: var(--mono); font-size: 11.5px; color: var(--tm-link);
  text-decoration: none; margin-top: 4px;
}
.p-terms .tm-card > a:hover { color: var(--green); }

/* ---------- the reader's clause ---------- */
.p-terms .tm-clause {
  margin-top: 26px; border-radius: 16px;
  background: linear-gradient(160deg, #16120f, #0b0908);
  border: 1px solid #2a2420; padding: 26px 24px;
}
.p-terms .tm-clause .k { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #ef5920; }
.p-terms .tm-clause h2 { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.025em; color: #f3e9da; margin: 12px 0 0; }
.p-terms .tm-clause p { font-size: 14.5px; line-height: 1.65; color: #a39d92; margin: 12px 0 0; max-width: 620px; }
.p-terms .tm-clause a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 22px; margin-top: 18px;
  border-radius: 11px; border: 1px solid #3c362f; color: #f1ede6;
  font-family: var(--mono); font-size: 13.5px; text-decoration: none;
  transition: border-color .15s, color .15s;
}
.p-terms .tm-clause a:hover { border-color: #ef5920; color: #fff; }

/* ---------- related links ---------- */
.p-terms .tm-links { display: flex; flex-direction: column; gap: 9px; margin-top: 26px; }
.p-terms .tm-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg-1); color: inherit;
  text-decoration: none; transition: border-color .15s;
}
.p-terms .tm-links a:hover { border-color: var(--green); }
.p-terms .tm-links .l { font-size: 15px; min-width: 0; }
.p-terms .tm-links .g { font-family: var(--mono); font-size: 11.5px; color: var(--tm-link); flex: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .p-terms .da-mark { width: 188px; height: 170px; top: 2px; }
  .p-terms .tm-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 720px) {
  .p-terms .da-mark { display: none; }
}
@media (max-width: 620px) {
  .p-terms .tm-cta { display: flex; width: 100%; padding: 0 16px; }
  .p-terms .tm-card { padding: 16px 15px 4px; }
  .p-terms .tm-clause { padding: 22px 18px; }
  .p-terms .tm-clause a { display: flex; width: 100%; padding: 0 16px; }
}