/* ============================================================
   Card Dealer — holding page
   Design tokens extracted from Figma file:
   figma.com/design/AAbQAuTmXVYcOZwbZ4F20e/Card-Dealer-branding
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@400;600&family=Inter:wght@500&display=swap');

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  /* Colours */
  --clr-bg:              #ffffff;
  --clr-bg-green:        #E9FAEA;   /* middle band, from Figma Rectangle 33 */
  --clr-footer:          #0e0e0e;
  --clr-text:            #000000;
  --clr-text-wordmark:   #0c0d0d;
  --clr-text-muted:      #707070;
  --clr-text-small:      #787878;
  --clr-accent:          #6bc8f0;   /* underline accent, sign-up button */

  /* Buttons */
  --clr-btn-fj-from:     #8c3eff;
  --clr-btn-fj-to:       #7921f9;
  --clr-btn-miro:        #ffdd00;
  --clr-btn-miro-text:   #020504;
  --clr-btn-signup:      #6bc8f0;
  --clr-btn-signup-text: #03141c;
  --clr-input-border:    #d0d0d0;

  /* Card illustration — zone colours */
  --zone-yellow-bg:     #fefef3;
  --zone-yellow-border: #f8f4a3;
  --card-yellow-bg:     #f8f4a3;
  --card-yellow-border: #b4ac12;

  --zone-green-bg:      #f8fdf4;
  --zone-green-border:  #c9f8a3;
  --card-green-bg:      #c9f8a3;
  --card-green-border:  #4e9018;

  --zone-blue-bg:       #f6fcfe;
  --zone-blue-border:   #a3e3f8;
  --card-blue-bg:       #a3e3f8;
  --card-blue-border:   #0f8bb4;

  --zone-purple-bg:     #fbf9fe;
  --zone-purple-border: #c7a3f8;
  --card-purple-bg:     #c7a3f8;
  --card-purple-border: #6117c9;

  /* Typography */
  --font-main:  'Geologica', sans-serif;
  --font-brand: 'Inter', sans-serif;

  /* Layout */
  --container-max: 1200px;
  --container-pad: clamp(20px, 5vw, 80px);
}

/* ── Base ──────────────────────────────────────────────────── */
html {
  font-family: var(--font-main);
  font-weight: 400;
  color: var(--clr-text);
  background: #ffffff url('../assets/dot.svg') repeat 0 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

img { display: block; max-width: 100%; }

a { color: inherit; }

ul { list-style: disc; padding-left: 1.5em; }

/* ── Utility ───────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.hidden { display: none; }

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  text-align: center;
  padding: 88px 20px 100px;
}

.hero__brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 48px;
}

.hero__wordmark {
  font-family: var(--font-main);
  font-size: clamp(56px, 10vw, 144px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--clr-text-wordmark);
  line-height: 1;
  transform: rotate(-2.28deg);
  display: inline-block;
}

.hero__underline {
  display: block;
  width: clamp(280px, 52vw, 760px);
  height: auto;
  margin-top: -8px;
  transform: rotate(1.61deg);
}

.hero__subtitle {
  font-size: clamp(24px, 3.3vw, 48px);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--clr-text);
  max-width: 680px;
  margin: 0 auto 72px;
  line-height: 1.2;
}

.hero__available-label {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--clr-text-muted);
  margin-bottom: 32px;
}

.hero__platforms {
  display: flex;
  gap: 80px;
  justify-content: center;
  align-items: flex-end;
}

/* ── Platform blocks ───────────────────────────────────────── */
.platform-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  width: 216px;
}

.platform-block--miro { gap: 42px; }

.platform-identity {
  display: flex;
  align-items: center;
  gap: 9px;
}

.platform-identity__name {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.03em;
  color: var(--clr-text);
  white-space: nowrap;
}

.miro-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 16px;
  font-family: var(--font-main);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.03em;
  text-decoration: none;
  white-space: nowrap;
  width: 100%;
  cursor: pointer;
  border: none;
}

.btn--figjam {
  background: linear-gradient(to bottom, var(--clr-btn-fj-from), var(--clr-btn-fj-to));
  color: #ffffff;
}

.btn--miro {
  background: linear-gradient(to bottom, #ffdd00, #ffde09);
  color: var(--clr-btn-miro-text);
}

/* Solid variants for footer */
.btn--figjam-footer {
  background: var(--clr-btn-fj-from);
  color: #ffffff;
  width: auto;
}

.btn--miro-footer {
  background: var(--clr-btn-miro);
  color: var(--clr-btn-miro-text);
  width: auto;
}

/* ── Middle content section ────────────────────────────────── */
.mid-section {
  position: relative;
  isolation: isolate;
  padding: 108px 0 100px;
}

/* Angled green band with hard drop-shadow beneath */
.mid-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--clr-bg-green);
  clip-path: polygon(0 28px, 100% 0, 100% calc(100% - 28px), 0 100%);
  filter: drop-shadow(0px 4px 0px #6b6b6b);
  z-index: -1;
}

.mid-section__inner {
  display: flex;
  gap: 63px;
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.mid-section__copy {
  flex: 0 0 420px;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.6;
  color: var(--clr-text);
}

.mid-section__copy p { margin-bottom: 1.2em; }
.mid-section__copy p:last-child { margin-bottom: 0; }

/* ── Card illustration ─────────────────────────────────────── */
/*
  DOM targets for future animation:
    .card-illustration  — root container
    .zone               — each coloured zone (4 total, classes: --yellow --green --blue --purple)
    .card               — individual card element (3 per zone, 12 total)
*/
.card-illustration {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 4px 4px 0 #137e19;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 21px;
  flex-shrink: 0;
}

.card-row {
  display: flex;
  gap: 21px;
}

.zone {
  position: relative;
  width: 232px;
  height: 118px;
  border-radius: 4px;
  border: 2.1px solid;
  flex-shrink: 0;
  overflow: visible;
}

.zone--yellow { background: var(--zone-yellow-bg); border-color: var(--zone-yellow-border); }
.zone--green  { background: var(--zone-green-bg);  border-color: var(--zone-green-border);  }
.zone--blue   { background: var(--zone-blue-bg);   border-color: var(--zone-blue-border);   }
.zone--purple { background: var(--zone-purple-bg); border-color: var(--zone-purple-border); }

.card {
  position: absolute;
  width: 42px;
  height: 63px;
  border-radius: 4px;
  border: 2.1px solid;
  top: 26px;
}

.zone--yellow .card { background: var(--card-yellow-bg); border-color: var(--card-yellow-border); }
.zone--green  .card { background: var(--card-green-bg);  border-color: var(--card-green-border);  }
.zone--blue   .card { background: var(--card-blue-bg);   border-color: var(--card-blue-border);   }
.zone--purple .card { background: var(--card-purple-bg); border-color: var(--card-purple-border); }

.card:nth-child(1) { left: 11px; }
.card:nth-child(2) { left: 62px; }
.card:nth-child(3) { left: 112px; }

.zone--yellow .card:nth-child(1) { transform: rotate(-3deg); }
.zone--yellow .card:nth-child(2) { transform: rotate(1deg);  }
.zone--yellow .card:nth-child(3) { transform: rotate(3deg);  }

.zone--green .card:nth-child(1) { transform: rotate(1deg);  }
.zone--green .card:nth-child(2) { transform: rotate(-3deg); }
.zone--green .card:nth-child(3) { transform: rotate(3deg);  }

.zone--blue .card:nth-child(1) { transform: rotate(2deg);  }
.zone--blue .card:nth-child(2) { transform: rotate(-1deg); }
.zone--blue .card:nth-child(3) { transform: rotate(-4deg); }

.zone--purple .card:nth-child(1) { transform: rotate(1deg);  }
.zone--purple .card:nth-child(2) { transform: rotate(-2deg); }
.zone--purple .card:nth-child(3) { transform: rotate(-1deg); }

/* ── Email capture ─────────────────────────────────────────── */
.email-section {
  text-align: center;
  padding: 100px 20px;
}

.email-section__heading {
  font-size: clamp(28px, 3.3vw, 48px);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--clr-text);
  max-width: 680px;
  margin: 0 auto 32px;
  line-height: 1.15;
}

.email-section__subheading {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--clr-text);
  margin-bottom: 24px;
}

.email-form {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: stretch;
  margin-bottom: 20px;
}

.email-input {
  padding: 14px 16px;
  font-family: var(--font-main);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--clr-text);
  background: #ffffff;
  border: 2px solid var(--clr-input-border);
  border-radius: 8px;
  width: 355px;
  outline: none;
  transition: border-color 0.15s;
}

.email-input:focus { border-color: var(--clr-accent); }

.btn--signup {
  padding: 14px 16px;
  background: var(--clr-btn-signup);
  color: var(--clr-btn-signup-text);
  border-radius: 8px;
  font-family: var(--font-main);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.03em;
  white-space: nowrap;
  cursor: pointer;
  border: none;
}

.email-form__thank-you {
  display: none;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--clr-text);
  margin-bottom: 20px;
  padding: 14px 24px;
}

.email-form__small {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--clr-text-small);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.6;
}

.email-form__small a {
  color: var(--clr-text-small);
  text-decoration: underline;
}

/* ── Footer ────────────────────────────────────────────────── */
.footer {
  background: var(--clr-footer);
  color: #ffffff;
  overflow: hidden;
}

.footer__main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 88px var(--container-pad) 64px;
  max-width: 1440px;
  margin: 0 auto;
}

.footer__brand { position: relative; }

.footer__wordmark {
  font-family: var(--font-main);
  font-size: clamp(36px, 4.8vw, 69px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #ffffff;
  display: inline-block;
  transform: rotate(-2.28deg);
  line-height: 1;
}

.footer__underline {
  display: block;
  width: clamp(160px, 25vw, 360px);
  height: auto;
  margin-top: -8px;
  transform: rotate(1.61deg);
}

.footer__platforms {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 32px 44px;
  align-items: center;
}

/* display:contents lets children participate directly in the grid above */
.footer__platform-row {
  display: contents;
}

.footer__platform-identity {
  display: flex;
  align-items: center;
  gap: 9px;
}

.footer__platform-name {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.03em;
  color: #ffffff;
  white-space: nowrap;
}

.footer__miro-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer__bottom {
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 32px var(--container-pad) 40px;
}

.footer__policy {
  display: flex;
  gap: 32px;
  justify-content: center;
  margin-bottom: 14px;
}

.footer__policy a {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__copyright {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #ffffff;
}

/* ── Policy pages ──────────────────────────────────────────── */
.policy-nav {
  background: var(--clr-bg);
  border-bottom: 1px solid #e8e8e8;
  padding: 20px var(--container-pad);
}

.policy-nav a {
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--clr-text-muted);
  text-decoration: none;
}

.policy-nav a:hover { text-decoration: underline; }

.policy-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 40px 80px;
}

.policy-page h1 {
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
  line-height: 1.1;
}

.policy-page .last-updated {
  font-size: 14px;
  color: var(--clr-text-muted);
  margin-bottom: 48px;
}

.policy-page h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 40px 0 12px;
}

.policy-page p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 16px;
}

.policy-page ul {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 16px;
}

.policy-page li { margin-bottom: 4px; }

.policy-page strong { font-weight: 600; }

.policy-page hr {
  border: none;
  border-top: 1px solid #e8e8e8;
  margin: 32px 0;
}

.policy-footer {
  background: var(--clr-bg);
  border-top: 1px solid #e8e8e8;
  padding: 20px var(--container-pad);
  text-align: center;
}

.policy-footer a {
  font-size: 14px;
  color: var(--clr-text-muted);
  text-decoration: none;
}

.policy-footer a:hover { text-decoration: underline; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .mid-section__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .mid-section__copy {
    flex: none;
    width: 100%;
  }

  .card-illustration {
    align-self: center;
  }
}

@media (max-width: 760px) {
  .card-illustration {
    zoom: 0.85;
  }
}

@media (max-width: 520px) {
  .card-illustration {
    zoom: 0.73;
  }
}

@media (max-width: 420px) {
  .card-illustration {
    zoom: 0.62;
  }
}

@media (max-width: 640px) {
  .footer__main {
    flex-direction: column;
    align-items: center;
    gap: 52px;
  }

  .footer__brand {
    text-align: center;
  }

  .footer__policy {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .hero__platforms {
    flex-direction: column;
    gap: 48px;
    align-items: center;
  }

  .platform-block {
    width: 100%;
    max-width: 260px;
  }

  .email-form {
    flex-direction: column;
    align-items: stretch;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .email-input { width: 100%; }

  .footer__platforms {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .footer__platform-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }
}