/* The creator programme's pages: /creators/, /creators/apply/, /creators/terms/.
   The site's look (support page): the gradient ground, section bands, the
   apex cards and the accordions; site-colour.css gives each section its
   colour (cp-c1 … cp-c5). */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --font-display: 'Inter', sans-serif;
  --primary: #409ed7; --primary-rgb: 64, 158, 215;
  --gradient-hero: radial-gradient(ellipse at 55% 55%, #0f2450 0%, #09162d 62%, #0b1120 100%);
  --apex-bg: linear-gradient(135deg, rgba(20, 38, 71, 0.9) 0%, rgba(13, 28, 56, 0.94) 100%);
  --apex-border: 1px solid rgba(255, 255, 255, 0.10);
  --apex-shadow: 0 4px 14px rgba(0, 0, 0, 0.30);
  --apex-radius: 10px;
}
body {
  font-family: 'Inter', sans-serif;
  background: var(--gradient-hero); background-attachment: fixed;
  color: #cbd5e1; min-height: 100vh; line-height: 1.6; overflow-x: hidden;
}
a { color: #5dbdf0; text-decoration: none; }
a:hover { color: #8ed2f7; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 760px; }

.tr-sec { position: relative; z-index: 0; padding-top: 2.5rem; padding-bottom: 2.5rem; }
.tr-sec::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 100vw; transform: translateX(-50%);
  background: var(--sec-bg); z-index: -1;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.tr-sec--a { --sec-bg: #10213e; }
.tr-sec--b { --sec-bg: #09162d; }

/* hero */
.cr-hero-sec {
  background:
    radial-gradient(75% 60% at 15% 100%, rgba(64, 158, 215, 0.20), transparent 70%),
    radial-gradient(70% 80% at 100% 0%, rgba(96, 82, 200, 0.14), transparent 70%),
    linear-gradient(135deg, #0d1c38, #09162d);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.cr-hero { text-align: center; padding: 3rem 0 2.75rem; }
.cr-hero h1 {
  font-family: var(--font-display); font-weight: 800; color: #fff;
  font-size: clamp(32px, 5vw, 48px); letter-spacing: -0.02em; margin-bottom: .5rem; text-wrap: balance;
}
.cr-hero .sub { color: #96adcf; font-size: 17px; max-width: 640px; margin: 0 auto 1.5rem; text-wrap: pretty; }
.cr-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--primary); color: #fff !important; font-weight: 700; font-size: 16px;
  padding: .75rem 1.7rem; border-radius: .55rem; border: 0; cursor: pointer; font-family: inherit;
  box-shadow: 0 4px 16px rgba(64, 158, 215, 0.35);
  transition: background .15s ease, transform .15s ease;
}
.cr-cta:hover { background: #5aaee0; transform: translateY(-1px); }
.cr-cta[disabled] { opacity: .6; cursor: default; transform: none; }
.cr-cta--ghost { background: rgba(255, 255, 255, 0.06); box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.14); }
.cr-cta--ghost:hover { background: rgba(255, 255, 255, 0.10); }
.cr-hero .acts { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.cr-hero .note { margin-top: .9rem; font-size: 14px; color: #94a3b8; }

/* headings + cards */
.tr-h2 {
  font-family: var(--font-display); font-weight: 800; color: #fff;
  font-size: clamp(20px, 3vw, 30px); letter-spacing: -0.01em; margin-bottom: .35rem; text-wrap: balance;
}
.tr-h2-sub { color: #96adcf; font-size: 16px; margin-bottom: 1.5rem; max-width: 70ch; }
.cr-card {
  background: var(--apex-bg); border: var(--apex-border);
  border-radius: var(--apex-radius); box-shadow: var(--apex-shadow);
  padding: 1.2rem 1.35rem;
}
.cr-card h3 { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 17px; margin-bottom: .4rem; line-height: 1.35; }
.cr-card p { font-size: 15.5px; margin-bottom: .5rem; }
.cr-card p:last-child, .cr-card ul:last-child { margin-bottom: 0; }
.cr-card ul { padding-left: 1.2rem; font-size: 15.5px; }
.cr-card li { margin-bottom: .3rem; }
.cr-card strong { color: #e2e8f0; }
.cr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .9rem; }

/* the three steps */
.cr-step { position: relative; padding-top: 1.35rem; }
.cr-step .n {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font-weight: 800; font-size: 15px; color: var(--c, #5dbdf0);
  background: rgba(var(--c-rgb, 64, 158, 215), .14); border: 1px solid rgba(var(--c-rgb, 64, 158, 215), .5);
  margin-bottom: .7rem;
}

/* the tiers */
.cr-tiers { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.cr-tiers-wrap { overflow-x: auto; border-radius: var(--apex-radius); border: var(--apex-border); box-shadow: var(--apex-shadow); background: var(--apex-bg); }
.cr-tiers th, .cr-tiers td { padding: .85rem 1.2rem; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 15.5px; }
.cr-tiers tr:last-child td { border-bottom: 0; }
.cr-tiers th { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; }
.cr-tiers td.rate { font-size: 22px; font-weight: 800; color: #fff; }
.cr-tiers td.tier { font-weight: 700; color: #e2e8f0; }
.cr-tiers tr:nth-child(1) td.rate { color: #5dbdf0; }
.cr-tiers tr:nth-child(2) td.rate { color: #34d17a; }
.cr-tiers tr:nth-child(3) td.rate { color: #c76bd6; }
.cr-fine { font-size: 14px; color: #94a3b8; margin-top: .8rem; max-width: 75ch; }
.cr-example {
  margin-top: 1rem; padding: .9rem 1.1rem; border-radius: var(--apex-radius);
  background: rgba(52, 209, 122, 0.08); border: 1px solid rgba(52, 209, 122, 0.30); color: #cfe9da; font-size: 15px;
}
.cr-example strong { color: #fff; }

/* questions */
.cr-qs { display: flex; flex-direction: column; gap: .6rem; }
.cr-q { background: var(--apex-bg); border: var(--apex-border); border-radius: var(--apex-radius); box-shadow: var(--apex-shadow); overflow: hidden; border-left: 3px solid rgba(var(--c-rgb, 64, 158, 215), .45); }
.cr-q > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: .95rem 1.35rem .95rem 2.6rem; position: relative;
  font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 16px; line-height: 1.35;
}
.cr-q > summary::-webkit-details-marker { display: none; }
.cr-q > summary::before {
  content: ''; position: absolute; left: 1.15rem; top: 1.3rem; width: .5rem; height: .5rem;
  border-right: 2px solid var(--c, #5dbdf0); border-bottom: 2px solid var(--c, #5dbdf0);
  transform: rotate(-45deg); transition: transform .18s ease;
}
.cr-q[open] > summary::before { transform: rotate(45deg); top: 1.15rem; }
.cr-q[open] > summary { color: var(--c, #5dbdf0); }
.cr-a { padding: 0 1.35rem 1.15rem 2.6rem; font-size: 15.5px; }
.cr-a p { margin-bottom: .5rem; }
.cr-a p:last-child { margin-bottom: 0; }

/* the closing band */
.cr-end { text-align: center; padding: 3rem 0 3.5rem; }
.cr-end h2 { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: clamp(22px, 3vw, 30px); margin-bottom: .5rem; }
.cr-end p { color: #96adcf; margin-bottom: 1.25rem; }

/* the form */
.cr-form { display: grid; gap: 1.1rem; }
.cr-field { display: grid; gap: .35rem; align-content: start; }   /* beside a field with a hint, the box keeps its height */
.cr-field > label, .cr-legend { font-size: 14px; font-weight: 700; color: #e2e8f0; }
.cr-field .hint { font-size: 13px; color: #94a3b8; }
.cr-input, .cr-select, .cr-text {
  width: 100%; font: inherit; font-size: 15.5px; color: #e2e8f0;
  background: rgba(9, 22, 45, 0.7); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: .5rem;
  padding: .65rem .8rem;
}
.cr-input::placeholder, .cr-text::placeholder { text-transform: none; color: #64748b; }
.cr-input:focus, .cr-select:focus, .cr-text:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(64, 158, 215, .22); }
.cr-text { min-height: 120px; resize: vertical; }
.cr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cr-chan { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: .5rem; align-items: center; }
.cr-chan + .cr-chan { margin-top: .5rem; }
.cr-chan.one { grid-template-columns: 160px minmax(0, 1fr); }
.cr-x[hidden] { display: none; }
.cr-x { background: none; border: 1px solid rgba(255, 255, 255, 0.14); color: #94a3b8; border-radius: .45rem; width: 38px; height: 38px; cursor: pointer; font-size: 18px; }
.cr-x:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.cr-add { background: none; border: 0; color: #5dbdf0; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: .3rem 0; justify-self: start; }
.cr-check { display: flex; gap: .6rem; align-items: flex-start; font-size: 15px; }
.cr-check input { width: 18px; height: 18px; margin-top: .2rem; accent-color: var(--primary); flex: none; }
.cr-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cr-msg { font-size: 14.5px; padding: .7rem .9rem; border-radius: .5rem; display: none; }
.cr-msg.err { display: block; background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .4); color: #fecaca; }
.cr-done { text-align: center; padding: 1rem 0; }
.cr-done h2 { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 26px; margin-bottom: .5rem; }

/* rules */
.cr-rules h2 { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 20px; margin: 1.6rem 0 .5rem; }
.cr-rules h2:first-child { margin-top: 0; }
.cr-rules p, .cr-rules li { font-size: 15.5px; }
.cr-rules ul { padding-left: 1.2rem; }
.cr-rules li { margin-bottom: .35rem; }
.cr-rules strong { color: #e2e8f0; }

@media (max-width: 767px) {
  .tr-sec { padding-top: 1.9rem; padding-bottom: 1.9rem; }
  .cr-hero { padding: 2.25rem 0 2rem; }
  .cr-two { grid-template-columns: 1fr; }
  .cr-chan { grid-template-columns: minmax(0, 1fr) auto; }
  .cr-chan.one { grid-template-columns: minmax(0, 1fr); }
  .cr-chan .cr-select { grid-column: 1 / -1; }
  .cr-tiers th, .cr-tiers td { padding: .7rem .8rem; }
  .cr-q > summary { padding-left: 2.4rem; }
  .cr-a { padding-left: 2.4rem; }
}