/* Kandle Student Ambassador Program: prototype styles.
   Values come from the Figma frame "Kandle" (Free Stuff (Arpan), node
   210:13296, labelled "Kandle.xyz", "Pamphlet - Design"). Self-contained:
   nothing here is shared with the portfolio site. Desktop matches the 1441px
   frame; the tablet and mobile layouts are adaptations (the file has no frames
   for them). */

:root {
  /* Colour */
  --bg: #1a1c20;            /* page */
  --bg-hero: #1b1b1b;       /* hero frame fill */
  --white: #ffffff;
  --black: #000000;
  --lime: #b4d74a;          /* ribbon front band, investors band, amounts */
  --lime-deep: #647b1f;     /* ribbon back band */
  --green: #85df59;         /* "About" kicker, "Chat with us" */
  --green-line: #8ccd56;    /* footer top rule */
  --glow: rgba(177, 216, 74, .35);
  --glow-about-a: rgba(185, 255, 0, .35);
  --glow-about-b: rgba(254, 235, 61, .35);
  --card-bg: #292c2b;       /* rgba(212,222,180,.08) over the page, flattened so it matches the art exports' baked backdrop */
  --card-line: rgba(255, 255, 255, .3);

  /* Type */
  --montserrat: "Montserrat", system-ui, sans-serif;
  --inter: "Inter", system-ui, sans-serif;
  --poppins: "Poppins", system-ui, sans-serif;

  --tagline: 31.802px;       /* "Making Crypto Fun Again" */
  --hero-date: 34.745px;
  --hero-title: 44.113px;
  --hero-lede: 20.459px;
  --ribbon-text: 50px;
  --section-title: 60.387px; /* Rewards / About / Where we are / As seen on */
  --earn-value: 52.016px;
  --earn-label: 29.157px;
  --paid-out: 51.494px;
  --start-title: 56.464px;
  --start-line: 36.243px;
  --about-copy: 35.737px;
  --game-copy: 14.541px;
  --investors: 35.406px;
  --footer-link: 30.6px;
  --footer-chat: 38.86px;

  /* Layout */
  --frame: 1440px;
  --gutter: 24px;
  --ribbon-h: 402px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font: 500 16px/1.4 var(--montserrat);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  padding: 10px 16px; background: var(--lime); color: var(--black); border-radius: 8px; font-weight: 700;
}
.skip:focus { top: 12px; }
main, footer { position: relative; }

/* Shared: soft green glow behind section titles (a blurred rectangle). */
.glow { position: absolute; left: 50%; pointer-events: none; transform: translateX(-50%); z-index: -1; }
.glow--rect { top: 0; width: 1054.271px; max-width: 100%; height: 251.792px; background: var(--glow); filter: blur(341.35px); }
main { isolation: isolate; overflow-x: clip; }

.section-title {
  font-weight: 800; font-size: var(--section-title); line-height: 94.83px;
  text-align: center; text-transform: uppercase;
}

/* ---- Hero --------------------------------------------------------------- */
.hero { position: relative; height: 881px; overflow: hidden; background: var(--bg-hero); }
.hero-bg {
  position: absolute; left: 50%; top: -5.136px; width: 1440px; min-width: 100%; height: 940.697px;
  transform: translateX(-50%); object-fit: cover; opacity: .3;
  filter: blur(4.65px); mix-blend-mode: luminosity;
}
.hero-inner { position: relative; max-width: var(--frame); margin: 0 auto; padding: 64.807px 74px 0 72px; }
.hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.hero-logo { margin-top: 5.077px; flex: none; }
.hero-logo img { width: 204.931px; height: auto; }
.hero-tagline {
  font-weight: 500; font-size: var(--tagline); line-height: 42.403px; letter-spacing: 6.3605px;
  font-variant-caps: small-caps; text-align: right; white-space: nowrap;
}
.hero-body { display: flex; align-items: flex-start; margin-top: 93.48px; }
.hero-copy { flex: none; width: 588.478px; }
.hero-date { font-size: var(--hero-date); line-height: 46.327px; font-weight: 500; }
.hero h1 {
  margin-top: 23.145px; width: 588.478px;
  font-weight: 700; font-size: var(--hero-title); line-height: 58.817px; text-transform: capitalize;
}
.hero-lede {
  margin-top: 3.925px; width: 500.663px;
  font-weight: 400; font-size: var(--hero-lede); line-height: 37.604px; text-transform: capitalize;
}
.hero-art { position: relative; flex: none; width: 830.42px; height: 474.526px; margin: 0 -38.08px 0 -86.07px; object-fit: cover; }

/* ---- Ribbons ("What you earn", "Games on Kandle") ---------------------- */
.ribbon { position: relative; height: var(--ribbon-h); pointer-events: none; }
.ribbon-band { position: absolute; top: 171.1px; transform: translate(-50%, -50%); }
.ribbon-band--back { left: calc(50% + 27.9px); width: 2073.193px; height: 130px; background: var(--lime-deep); transform: translate(-50%, -50%) rotate(-6.64deg); }
.ribbon-band--front { left: calc(50% + 31.8px); width: 1600px; height: 115px; background: var(--lime); transform: translate(-50%, -50%) rotate(-2.71deg); top: 166.1px; }
.ribbon-title {
  position: absolute; left: calc(50% + 1px); top: 171.1px; z-index: 1;
  transform: translate(-50%, -50%) rotate(-2.71deg);
  color: var(--black); font-weight: 800; font-size: var(--ribbon-text); line-height: 55.548px;
  letter-spacing: 8px; text-transform: uppercase; white-space: nowrap;
}

/* ---- What you earn ------------------------------------------------------ */
.earn { position: relative; margin-top: -184.218px; }
.earn .ribbon-title { top: 171.1px; }
.earn-grid {
  position: relative; left: 14.8px;
  display: grid; grid-template-columns: 203.908px 315.828px 293.964px; justify-content: space-between;
  width: 1097.884px; margin: -45.4px auto 0;
}
.earn-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.earn-item img { mix-blend-mode: lighten; } /* the cash export carries an opaque dark backdrop */
.earn-value { font-weight: 800; white-space: nowrap; }
.earn-label { font-weight: 500; }
.earn-item--per-user img { width: 102.582px; margin-top: 28.729px; }
.earn-item--per-user .earn-value { margin-top: 18.2px; font-size: var(--earn-value); line-height: 69.355px; letter-spacing: .1084px; }
.earn-item--per-user .earn-label { margin-top: -3.1px; font-size: var(--earn-label); line-height: 33.713px; letter-spacing: .1822px; }
.earn-item--monthly img { width: 200.277px; }
.earn-item--monthly .earn-value { margin-top: -13.7px; font-size: 47.65px; line-height: 63.533px; letter-spacing: .0993px; }
.earn-item--monthly .earn-label { margin-top: .7px; font-size: 26.71px; line-height: 30.883px; letter-spacing: .1669px; }
.earn-item--free img { width: 97.46px; margin-top: 28.829px; }
.earn-item--free .earn-value { margin-top: 17.3px; font-size: 49.421px; line-height: 65.894px; letter-spacing: .103px; }
.earn-item--free .earn-label { margin-top: 9.7px; font-size: 27.702px; line-height: 32.031px; letter-spacing: .1731px; }

/* ---- Rewards in last 30 days ------------------------------------------- */
.rewards { position: relative; margin-top: 121.6px; padding-top: 75.83px; }
.rewards-row {
  position: relative; left: 20px;
  display: grid; grid-template-columns: repeat(2, 560.361px); justify-content: center; column-gap: 63.45px;
  margin-top: 105px;
}
.reward img { width: 100%; height: auto; }
.reward p {
  margin-top: 23.4px; padding-left: 25.4%;
  font-weight: 500; font-size: var(--paid-out); line-height: 89.858px; text-transform: uppercase;
}

/* ---- Get started now ---------------------------------------------------- */
.start { position: relative; margin-top: 174.5px; padding: 0 var(--gutter); text-align: center; }
.start h2 {
  font-weight: 700; font-size: var(--start-title); line-height: 57.19px; letter-spacing: .1864px;
  text-transform: capitalize;
}
.start-list {
  display: grid; row-gap: 13.4px; max-width: 1258.863px; margin: 45.27px auto 0;
  font-weight: 500; font-size: var(--start-line); line-height: 59.683px; letter-spacing: .2062px;
  text-transform: capitalize;
}
.start-list li:last-child { max-width: 1235.92px; margin: 0 auto; }
.ring { position: absolute; z-index: -1; pointer-events: none; max-width: none; }
.ring--left { left: -59.7px; top: -150.5px; width: 258px; height: 260.085px; rotate: 53deg; }
.ring--right { right: -95.7px; top: 140.5px; width: 242.677px; height: 259.24px; }

/* ---- About -------------------------------------------------------------- */
.about { position: relative; margin-top: 182.1px; padding: 0 var(--gutter); text-align: center; }
.glow--about {
  top: 51.41px; width: 800.045px; max-width: 100%; height: 153.136px;
  background-image: linear-gradient(101.02deg, var(--glow-about-a) 1.66%, var(--glow-about-b) 100%);
  filter: blur(120.45px);
}
.about h2 { display: flex; flex-direction: column; align-items: center; }
.about-kicker {
  color: var(--green); font-weight: 800; font-size: var(--section-title); line-height: 94.83px; text-transform: uppercase;
}
.about-logo { display: flex; align-items: flex-start; gap: 17.1px; margin-top: -6.43px; }
.about-k { width: 96.129px; height: auto; }
.about-wordmark { width: 404.277px; height: auto; margin-top: 20.1px; }
.about-copy {
  max-width: 1170.65px; margin: 95.75px auto 0;
  font-weight: 500; font-size: var(--about-copy); line-height: 58.072px; letter-spacing: .1489px;
}

/* ---- Games on Kandle ---------------------------------------------------- */
.games { position: relative; margin-top: 87.1px; }
.games .ribbon-title { top: 171.1px; }
.games-grid {
  display: grid; grid-template-columns: repeat(2, 444px); justify-content: center;
  column-gap: 143px; row-gap: 114px; margin-top: 26px; padding: 0 var(--gutter);
}
.game {
  position: relative; display: flex; flex-direction: column; align-items: center;
  height: 495px; overflow: hidden;
  background: var(--card-bg); border: 2px solid var(--card-line); border-radius: 33px;
  transition: border-color .2s;
}
.game:hover { border-color: rgba(180, 215, 74, .7); }
.game p {
  font-weight: 900; font-size: var(--game-copy); line-height: 25.373px; letter-spacing: 2.6268px;
  text-align: center; text-transform: uppercase;
}
/* Art and copy offsets per card, measured from the card's top edge (minus the 2px border). */
.game--mega .game-art { width: 199.854px; margin-top: 19.588px; }
.game--mega p { width: 326.95px; margin-top: 29.56px; }
.game--coin .game-art { width: 280.526px; margin-top: 19.586px; }
.game--coin p { width: 307.15px; margin-top: 27px; }
.game--portfolio .game-art { width: 282.098px; margin-top: 37.832px; }
.game--portfolio p { width: 304.684px; margin-top: 30.36px; }
.game--highlow .game-art { width: 208.89px; margin-top: 45.542px; }
.game--highlow p { width: 293.85px; margin-top: 28.41px; }
.game-art { height: auto; }

/* ---- Where we are ------------------------------------------------------- */
.where { position: relative; margin-top: 142.6px; padding: 75.83px var(--gutter) 0; }
.bubbles { position: relative; width: 929.858px; max-width: 100%; aspect-ratio: 929.858 / 498.52; margin: 101.13px auto 0; }
.bubble { position: absolute; }
.bubble img { width: 100%; height: auto; }
.bubble--winnings { left: 50.475%; top: 0; width: 49.525%; }
.bubble--players { left: 0; top: .855%; width: 40.297%; }
.bubble--countries { left: 29.302%; top: 45.088%; width: 29.44%; }

/* ---- As seen on --------------------------------------------------------- */
.press { position: relative; margin-top: 228.5px; padding-top: 75.83px; }
.glow--press { left: calc(50% - 54.16px); }
.press-title { position: relative; left: -54.16px; }  /* off-centre in the frame; kept */
.press-glow {
  position: absolute; left: calc(50% + 6.7px); top: 560.8px; z-index: -1;
  width: 1491.26px; height: 5900.13px; max-width: none; transform: translateX(-50%); pointer-events: none;
}
.press-viewport { margin-top: 81px; }
.press-track { display: grid; row-gap: 267.4px; width: 828.124px; margin: 0 auto; }
.press-item { display: flex; flex-direction: column; align-items: center; }
.press-shot { display: block; width: 100%; transition: transform .25s, box-shadow .25s; }
.press-shot:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.press-shot img { width: 100%; height: auto; }
.press-shot-overlap { margin-top: -3.35px; }
.press-shot-overlap--binance { margin-top: -11.2px; width: 99.8% !important; }
.press-logo { height: auto; mix-blend-mode: lighten; } /* exports carry an opaque dark backdrop */
.press-item--cmc .press-logo { width: 87.1%; margin-top: 71.1px; }
.press-item--entrepreneur .press-logo { width: 63.63%; margin-top: 46.1px; }
.press-item--fe .press-logo { width: 89.43%; margin-top: 61.2px; }
.press-item--binance .press-logo { width: 74.67%; margin-top: 79.3px; }
.press-controls { display: none; }

/* ---- Investors ---------------------------------------------------------- */
.investors { position: relative; margin-top: 172.2px; height: 454px; padding-top: 58px; background: var(--lime); color: var(--black); }
.investors-title {
  width: 388px; height: 62px; margin: 0 auto;
  border: 3.5px solid var(--black); border-radius: 3px;
  font: 900 var(--investors)/54px var(--inter); letter-spacing: 11px; text-align: center; text-indent: 11px; text-transform: uppercase;
}
.investor-logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  max-width: var(--frame); margin: 36.6px auto 0; padding: 0 80.32px;
}
.investor {
  height: auto; background: var(--black);
  -webkit-mask: var(--logo) center / 100% 100% no-repeat; mask: var(--logo) center / 100% 100% no-repeat;
}
.investor--saama { --logo: url("assets/inv-saama.svg"); width: 388.814px; aspect-ratio: 388.814 / 133.668; }
.investor--cloud { --logo: url("assets/inv-cloud-capital.svg"); width: 342.644px; aspect-ratio: 342.644 / 89.919; }
.investor--pointone { --logo: url("assets/inv-pointone.svg"); width: 328.075px; aspect-ratio: 328.075 / 94.775; }
.investor--good { --logo: url("assets/inv-good-capital.svg"); width: 349.936px; aspect-ratio: 349.936 / 87.498; }
.investor--coindcx { --logo: url("assets/inv-coindcx.svg"); width: 303.766px; aspect-ratio: 303.766 / 99.646; }
/* Second row: Good Capital and CoinDCX, centred under the first. */
.investor-break { flex-basis: 100%; height: 0; }
.investor--good { margin-left: auto; translate: -11px 0; }
.investor--coindcx { margin-left: 131.9px; margin-right: auto; translate: -11px 0; }

/* ---- Footer ------------------------------------------------------------- */
.footer { margin: 113.3px 0 79.6px; border-top: 6px solid var(--green-line); border-bottom: 3px solid var(--white); }
.footer-inner {
  display: flex; justify-content: space-between; gap: 32px;
  max-width: var(--frame); margin: 0 auto; padding: 31.1px 90.6px 65.4px 66.3px;
}
.footer-logo img { width: 255.531px; height: auto; }
.footer-links { display: grid; row-gap: 42.7px; margin-top: 68px; }
.footer-links a { display: flex; width: fit-content; align-items: center; gap: 22px; font: 400 var(--footer-link)/1.3 var(--poppins); transition: color .2s; }
.footer-links a:hover, .footer-chat a:hover { color: var(--green); }
.footer-links li:nth-child(1) img { width: 43.979px; }
.footer-links li:nth-child(2) img { width: 52.774px; }
.footer-links li:nth-child(2) span { font-size: .93em; }
.footer-links li:nth-child(3) img { width: 43.979px; }
.footer-chat { display: flex; flex-direction: column; align-items: flex-start; width: 325.2px; }
.footer-chat h2 {
  align-self: center;
  color: var(--green); font: 700 var(--footer-chat)/67.812px var(--inter); letter-spacing: 3.2927px; text-transform: uppercase; white-space: nowrap;
}
.footer-chat a { display: inline-flex; align-items: center; gap: 47px; margin-top: 3.5px; font: 500 var(--footer-chat)/67.812px var(--inter); letter-spacing: 3.2927px; transition: color .2s; }
.footer-chat img { width: 51.761px; }
.footer-links img, .footer-chat img { height: auto; }

/* ---- Toast -------------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 60; width: max-content; max-width: calc(100% - 32px);
  padding: 12px 18px; border-radius: 12px; background: var(--lime); color: var(--black);
  font: 500 16px/22px var(--montserrat); box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* =========================================================================
   Tablet (≤ 1180px): adapted, no Figma frame
   ========================================================================= */
@media (max-width: 1180px) {
  :root {
    --tagline: 22px; --hero-date: 28px; --hero-title: 40px; --hero-lede: 18px;
    --ribbon-text: 38px; --section-title: 48px; --earn-value: 44px; --earn-label: 24px;
    --paid-out: 40px; --start-title: 46px; --start-line: 28px; --about-copy: 28px;
    --investors: 30px; --footer-link: 22px; --footer-chat: 30px;
    --gutter: 40px; --ribbon-h: 300px;
  }
  .section-title { line-height: 1.4; }

  .hero { height: auto; padding-bottom: 150px; }
  .hero-bg { height: 100%; top: 0; }
  .hero-inner { padding: 48px var(--gutter) 0; }
  .hero-tagline { letter-spacing: 4px; line-height: 46px; }
  .hero-body { flex-direction: column; align-items: stretch; margin-top: 64px; gap: 24px; }
  .hero-copy, .hero h1, .hero-lede { width: auto; max-width: 640px; }
  .hero h1 { line-height: 1.3; margin-top: 16px; }
  .hero-lede { line-height: 1.75; margin-top: 12px; }
  .hero-art { flex: initial; width: min(100%, 720px); height: auto; aspect-ratio: 830.42 / 474.526; margin: 0 auto; }

  .ribbon-band, .ribbon-title { top: 150px; }
  .ribbon-band--front { top: 146px; height: 96px; }
  .ribbon-band--back { height: 112px; }
  .earn { margin-top: -150px; }
  .earn .ribbon-title, .games .ribbon-title { top: 150px; }
  .ribbon-title { letter-spacing: 6px; }

  .earn-grid { left: 0; width: auto; max-width: 960px; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; padding: 0 var(--gutter); margin-top: 0; }
  .earn-item .earn-value { font-size: var(--earn-value) !important; line-height: 1.3 !important; margin-top: 16px !important; }
  .earn-item .earn-label { font-size: var(--earn-label) !important; line-height: 1.25 !important; margin-top: 4px !important; }
  .earn-item img { margin-top: 0 !important; height: 140px; width: auto !important; object-fit: contain; }
  .earn-item--per-user img, .earn-item--free img { height: 100px; margin: 20px 0 !important; }

  .rewards { margin-top: 96px; padding: 48px var(--gutter) 0; }
  .rewards-row { left: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; margin-top: 56px; max-width: 1040px; margin-inline: auto; }
  .reward p { line-height: 1.6; margin-top: 12px; }

  .start { margin-top: 120px; }
  .start h2 { line-height: 1.3; }
  .start-list { line-height: 1.6; margin-top: 32px; row-gap: 12px; }
  .ring--left { width: 200px; height: auto; left: -110px; top: -140px; }
  .ring--right { width: 220px; height: auto; right: -140px; top: 160px; }

  .about { margin-top: 140px; }
  .about-kicker { line-height: 1.4; }
  .about-logo { margin-top: 0; }
  .about-k { width: 76px; }
  .about-wordmark { width: 320px; margin-top: 16px; }
  .about-copy { line-height: 1.65; margin-top: 64px; }

  .games { margin-top: 64px; }
  .games-grid { grid-template-columns: repeat(2, minmax(0, 444px)); column-gap: 32px; row-gap: 40px; margin-top: 0; }
  .game { height: auto; min-height: 495px; padding-bottom: 32px; }
  .game p { width: auto !important; max-width: 330px; padding: 0 16px; }

  .where { margin-top: 120px; padding-top: 48px; }
  .bubbles { margin-top: 56px; }

  .press { margin-top: 140px; padding-top: 48px; }
  .press-title, .glow--press { left: 0; }
  .glow--press { left: 50%; }
  .press-viewport { margin-top: 56px; padding: 0 var(--gutter); }
  .press-track { width: min(100%, 640px); row-gap: 160px; }

  .investors { height: auto; padding: 48px var(--gutter) 56px; margin-top: 140px; }
  .investor-logos { justify-content: center; gap: 32px 56px; padding: 0; margin-top: 40px; }
  .investor { width: auto !important; height: 64px; margin: 0 !important; translate: none !important; }
  .investor-break { display: none; }
  .investor--saama { height: 88px; }

  .footer { margin-top: 96px; margin-bottom: 48px; }
  .footer-inner { padding: 32px var(--gutter) 48px; }
  .footer-logo img { width: 200px; }
  .footer-links { margin-top: 40px; row-gap: 28px; }
  .footer-links li img { width: 36px !important; }
  .footer-chat { width: auto; }
  .footer-chat a { gap: 24px; }
  .footer-chat img { width: 44px; }
}

/* =========================================================================
   Mobile (≤ 720px)
   ========================================================================= */
@media (max-width: 720px) {
  :root {
    --tagline: 13px; --hero-date: 22px; --hero-title: 32px; --hero-lede: 16px;
    --ribbon-text: 22px; --section-title: 32px; --earn-value: 40px; --earn-label: 20px;
    --paid-out: 26px; --start-title: 32px; --start-line: 19px; --about-copy: 19px;
    --game-copy: 13px; --investors: 22px; --footer-link: 17px; --footer-chat: 22px;
    --gutter: 20px; --ribbon-h: 190px;
  }
  .hero { padding-bottom: 96px; }
  .hero-inner { padding-top: 28px; }
  .hero-top { flex-direction: column; gap: 10px; }
  .hero-logo { margin-top: 0; }
  .hero-logo img { width: 150px; }
  .hero-tagline { letter-spacing: 3px; line-height: 20px; text-align: left; }
  .hero-body { margin-top: 36px; }

  .ribbon-band, .ribbon-title { top: 95px; }
  .ribbon-band--front { top: 93px; height: 60px; }
  .ribbon-band--back { height: 72px; }
  .earn { margin-top: -96px; }
  .earn .ribbon-title, .games .ribbon-title { top: 95px; }
  .ribbon-title { letter-spacing: 3.5px; line-height: 1.2; }

  .earn-grid { grid-template-columns: 1fr; row-gap: 40px; }
  .earn-item img { height: 96px; }
  .earn-item--per-user img, .earn-item--free img { height: 80px; margin: 12px 0 !important; }

  .rewards { margin-top: 64px; padding-top: 24px; }
  .glow--rect { height: 180px; }
  .rewards-row { grid-template-columns: 1fr; row-gap: 32px; margin-top: 32px; max-width: 360px; }
  .reward p { margin-top: 4px; padding-left: 0; text-align: center; padding-right: 9%; }

  .start { margin-top: 96px; }
  .start-list { margin-top: 24px; row-gap: 14px; line-height: 1.5; }
  .ring--left { width: 140px; left: -84px; top: -100px; }
  .ring--right { width: 150px; right: -100px; top: auto; bottom: -150px; }

  .about { margin-top: 112px; }
  .about-k { width: 52px; }
  .about-wordmark { width: 218px; margin-top: 11px; }
  .about-logo { gap: 10px; }
  .about-copy { margin-top: 36px; }
  .glow--about { height: 110px; filter: blur(70px); }

  .games { margin-top: 40px; }
  .games-grid { grid-template-columns: minmax(0, 400px); row-gap: 24px; }
  .game { min-height: 0; padding-bottom: 28px; border-radius: 26px; }
  .game-art { max-width: 64%; }
  .game p { letter-spacing: 2px; line-height: 23px; margin-top: 20px !important; }

  .where { margin-top: 88px; padding-top: 24px; }
  .bubbles { margin-top: 32px; }

  /* Press: one article at a time, swipe or use the arrows. */
  .press { margin-top: 96px; padding-top: 24px; }
  .press-glow { display: none; }
  .press-viewport {
    margin-top: 32px; padding: 0;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .press-viewport::-webkit-scrollbar { display: none; }
  .press-track { display: flex; gap: 16px; width: max-content; padding: 0 var(--gutter); }
  .press-item { width: calc(100vw - 2 * var(--gutter) - 24px); max-width: 360px; scroll-snap-align: center; }
  .press-shot { max-height: 520px; overflow: hidden; border-radius: 6px; }
  .press-shot:hover { transform: none; box-shadow: none; }
  .press-item .press-logo { margin-top: 20px; max-width: 220px; }
  .press-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; }
  .press-arrow {
    width: 44px; height: 44px; border: 2px solid var(--lime); border-radius: 50%;
    background: none; color: var(--lime); font: 700 20px/1 var(--montserrat); cursor: pointer;
  }
  .press-arrow:disabled { opacity: .35; cursor: default; }
  .press-dots { display: flex; gap: 8px; }
  .press-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .3); cursor: pointer; }
  .press-dots button[aria-selected="true"] { width: 26px; border-radius: 5px; background: var(--lime); }

  .investors { margin-top: 96px; padding: 40px var(--gutter) 44px; }
  .investors-title { width: min(100%, 260px); height: 48px; line-height: 40px; border-width: 3px; letter-spacing: 7px; text-indent: 7px; }
  .investor-logos { gap: 24px 28px; margin-top: 32px; }
  .investor { height: 40px; }
  .investor--saama { height: 56px; }

  .footer { margin-top: 72px; margin-bottom: 32px; border-top-width: 4px; }
  .footer-inner { flex-direction: column; gap: 40px; padding: 28px var(--gutter) 36px; }
  .footer-logo img { width: 150px; }
  .footer-links { margin-top: 28px; row-gap: 20px; }
  .footer-links a { gap: 16px; }
  .footer-links li img { width: 28px !important; }
  .footer-chat h2 { align-self: flex-start; }
  .footer-chat a { gap: 16px; margin-top: 0; }
  .footer-chat img { width: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .game, .press-shot, .toast { transition: none; }
  .press-shot:hover { transform: none; }
}