/* Milky Lane · Terms & Conditions · page-specific components only.
   ------------------------------------------------------------------
   These pages used to be a standalone microsite with their own shell,
   which is how both Round 1 sweeps missed them. They now load the real
   site stylesheets and this file carries only what is specific to a
   T&C page: the deal header, the numbered fine-print list, the deal
   index cards and the alcohol notice.

   Removed from here because the main stylesheets own them now:
   html, body, .wrap, .site-header, .site-footer, .spray.
   .tc-hero was renamed .tc-hero - the main site has its own .tc-hero. */

/* Milky Lane · Terms & Conditions site · shared styles (v2) */

:root {
  --ml-black: #050505;
  --ml-panel: #0E0E10;
  --ml-panel-2: #131316;
  --ml-panel-hi: #17171C;
  --ml-pink: #FF8CE0;
  --ml-pink-hot: #FF8CE0;
  --ml-blue: #5BD0E6;
  --ml-yellow: #FFD93D;
  --ml-white: #FFFFFF;
  --ml-dim: #B7B7BD;
  --rule: rgba(255,255,255,0.10);
  --rule-pink: rgba(255,140,224,0.35);
  --display: 'Anton', 'Bebas Neue', Impact, sans-serif;
  --body: 'Inter', system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ================================================================
   HEADER — Milky Lane brand lockup
   ================================================================ */
/* ================================================================
   HERO — landing page
   ================================================================ */
.tc-hero {
  padding: 12px 0 44px;
  position: relative;
}

.tc-hero .eyebrow {
  display: inline-block;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--ml-blue);
  padding: 6px 12px;
  background: rgba(91,208,230,0.12);
  border-radius: 999px;
  margin-bottom: 20px;
}

.tc-hero h1 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(56px, 12vw, 96px);
  line-height: 0.88;
  letter-spacing: -2px;
  margin-bottom: 20px;
}

.tc-hero h1 .pink { color: var(--ml-pink); }
.tc-hero h1 .blue { color: var(--ml-blue); }
.tc-hero h1 .stroke {
  -webkit-text-stroke: 2px var(--ml-white);
  color: transparent;
}

.tc-hero .lede {
  color: var(--ml-dim);
  font-size: 15px;
  max-width: 540px;
  line-height: 1.6;
}

.tc-hero .lede strong { color: var(--ml-white); font-weight: 600; }

/* Pink drip divider */
.rule-drip {
  display: block;
  width: 60px;
  height: 3px;
  background: var(--ml-pink);
  border-radius: 2px;
  margin: 24px 0 40px;
  box-shadow: 0 0 12px rgba(255,162,203,0.6);
  position: relative;
}
.rule-drip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 20px;
  width: 3px;
  height: 8px;
  background: var(--ml-pink);
  border-radius: 0 0 2px 2px;
  box-shadow: 0 0 6px rgba(255,162,203,0.5);
}

/* ================================================================
   DEAL LIST — landing page
   ================================================================ */
.deal-list {
  display: grid;
  gap: 12px;
}

.day-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 10px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.day-heading:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.day-heading h2 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--ml-pink);
  line-height: 1;
}

.day-heading .count {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--ml-dim);
  text-transform: uppercase;
  padding: 3px 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
}

.deal-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: linear-gradient(180deg, var(--ml-panel-2) 0%, var(--ml-panel) 100%);
  border: 1px solid var(--rule);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ml-white);
  overflow: hidden;
  transition: all 0.2s ease;
  position: relative;
}

.deal-card:hover {
  border-color: var(--ml-pink);
  background: linear-gradient(180deg, var(--ml-panel-hi) 0%, var(--ml-panel-2) 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -12px rgba(255,82,169,0.35);
}

.deal-card .day-strip {
  flex: 0 0 auto;
  width: 62px;
  background: linear-gradient(180deg, rgba(255,162,203,0.14) 0%, rgba(255,162,203,0.06) 100%);
  border-right: 1px solid var(--rule-pink);
  display: grid;
  place-items: center;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--ml-pink);
}

.deal-card .info {
  flex: 1;
  min-width: 0;
  padding: 16px 12px 16px 18px;
}

.deal-card .name {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 0.5px;
  color: var(--ml-white);
  line-height: 1.1;
  margin-bottom: 4px;
}

.deal-card .summary {
  font-size: 13px;
  color: var(--ml-dim);
  line-height: 1.45;
}

.deal-card .go {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0 20px;
  font-family: var(--display);
  font-size: 22px;
  color: var(--ml-pink);
  border-left: 1px solid var(--rule);
  background: rgba(255,162,203,0.04);
  transition: background 0.2s;
}

.deal-card:hover .go {
  background: rgba(255,82,169,0.14);
  color: var(--ml-pink-hot);
}

/* ================================================================
   COMING SOON cards — blurred summary
   ================================================================ */
.deal-card.soon {
  cursor: default;
}
.deal-card.soon:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--rule);
  background: linear-gradient(180deg, var(--ml-panel-2) 0%, var(--ml-panel) 100%);
}
.deal-card.soon .day-strip {
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border-right-color: var(--rule);
  color: var(--ml-dim);
}
.deal-card.soon .name {
  filter: blur(5px);
  color: var(--ml-white);
  opacity: 0.75;
  user-select: none;
}
.deal-card.soon .summary {
  filter: blur(4px);
  color: var(--ml-dim);
  user-select: none;
  opacity: 0.85;
}
.deal-card.soon .go {
  background: rgba(255,217,61,0.10);
  color: var(--ml-yellow);
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 2.5px;
  padding: 0 18px;
  border-left-color: rgba(255,217,61,0.3);
}
.deal-card.soon:hover .go {
  background: rgba(255,217,61,0.10);
  color: var(--ml-yellow);
}

/* ================================================================
   DEAL T&C PAGE
   ================================================================ */
.deal-header {
  padding: 20px 0 40px;
  position: relative;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--ml-dim);
  text-decoration: none;
  margin-bottom: 28px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  border: 1px solid var(--rule);
  transition: all 0.2s;
}
.back-link:hover {
  color: var(--ml-pink);
  border-color: var(--rule-pink);
  background: rgba(255,162,203,0.08);
}
.back-link::before { content: '←'; font-size: 13px; }

.deal-meta {
  display: inline-block;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--ml-blue);
  padding: 6px 12px;
  background: rgba(91,208,230,0.12);
  border-radius: 999px;
  margin-bottom: 20px;
}

.deal-header h1 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(48px, 10vw, 84px);
  line-height: 0.88;
  letter-spacing: -1.5px;
  margin-bottom: 24px;
}
.deal-header h1 .pink { color: var(--ml-pink); }
.deal-header h1 .blue { color: var(--ml-blue); }

.deal-offer {
  padding: 20px 24px;
  background:
    radial-gradient(500px 300px at 100% 0%, rgba(255,82,169,0.15), transparent 60%),
    linear-gradient(180deg, rgba(255,162,203,0.10) 0%, rgba(255,162,203,0.04) 100%);
  border: 1px solid var(--rule-pink);
  border-radius: 14px;
  color: var(--ml-white);
  line-height: 1.6;
  font-size: 15px;
}
.deal-offer strong { color: var(--ml-pink); font-weight: 700; }

/* ================================================================
   T&C content
   ================================================================ */
.tc-heading {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 26px;
  letter-spacing: 1px;
  color: var(--ml-white);
  margin: 44px 0 4px;
  position: relative;
  padding-bottom: 4px;
}
.tc-heading::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--ml-pink);
  border-radius: 2px;
  margin-top: 10px;
  box-shadow: 0 0 8px rgba(255,162,203,0.5);
}

.tc-list {
  list-style: none;
  padding: 0;
  counter-reset: tc;
  margin-top: 20px;
}

.tc-list > li {
  position: relative;
  padding: 14px 0 14px 44px;
  border-bottom: 1px solid var(--rule);
  counter-increment: tc;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ml-dim);
}

.tc-list > li:last-child { border-bottom: none; }

.tc-list > li::before {
  content: counter(tc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 14px;
  font-family: var(--display);
  font-size: 15px;
  color: var(--ml-pink);
  letter-spacing: 1px;
  font-weight: 400;
}

.tc-list li strong { color: var(--ml-white); font-weight: 600; }
.tc-list li em { color: var(--ml-blue); font-style: normal; font-weight: 500; }

/* ================================================================
   Alcohol warning box
   ================================================================ */
.alcohol-warning {
  margin: 32px 0 0;
  padding: 18px 20px;
  background:
    radial-gradient(400px 200px at 100% 0%, rgba(91,208,230,0.15), transparent 60%),
    rgba(91,208,230,0.06);
  border: 1px solid rgba(91,208,230,0.35);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ml-dim);
}
.alcohol-warning strong {
  color: var(--ml-blue);
  text-transform: uppercase;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 6px;
  font-family: var(--display);
  font-size: 13px;
}

/* ================================================================
   Footer
   ================================================================ */
.updated-tag {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 2px;
  font-family: var(--display);
  text-transform: uppercase;
  color: var(--ml-dim);
}

/* =============================================================
   B3 · the retired star, replaced with the brand drip mark.
   This microsite has its own stylesheet and never loaded
   ml-polish.css, which is why the sweep that replaced 205 stars
   across the main site never reached these six pages.
   Same construction as ml-polish.css: a mask so the mark takes
   currentColor and sits correctly on the baseline.
   ============================================================= */


/* Nested points inside a clause. They must not touch the clause counter -
   see the note on .tc-list > li. Lettered so a sub-point can still be cited
   as, say, "clause 3(b)". */
.tc-list ol,
.tc-list ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  counter-reset: tcsub;
}
.tc-list ol > li,
.tc-list ul > li {
  position: relative;
  padding: 6px 0 6px 34px;
  border-bottom: 0;
  counter-increment: tcsub;
  font-size: 14px;
  line-height: 1.6;
}
.tc-list ol > li::before,
.tc-list ul > li::before {
  content: "(" counter(tcsub, lower-alpha) ")";
  position: absolute;
  left: 6px;
  top: 6px;
  font-family: var(--body);
  font-size: 13px;
  color: var(--ml-dim);
}