@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/ibm-plex-sans-500.woff2") format("woff2");
  font-style: normal; font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/ibm-plex-sans-600.woff2") format("woff2");
  font-style: normal; font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/inter-400.woff2") format("woff2");
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/inter-500.woff2") format("woff2");
  font-style: normal; font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/inter-600.woff2") format("woff2");
  font-style: normal; font-weight: 600; font-display: swap;
}
:root {
  --black: #000000;
  --gray: #7a7a7a;
  --light-gray: #f0f0f0;
  --white: #ffffff;
  --blue: #0d30a4;
  --green: #47c97e;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--light-gray); }
body {
  min-height: 100%; margin: 0; color: var(--black);
  font-family: "Inter", Arial, sans-serif;
  background: var(--light-gray);
}
.shell { min-height: 100dvh; display: grid; place-items: center; padding: 12px; }
.card {
  width: min(100%, 760px); padding: 20px clamp(17px, 5vw, 48px) 24px;
  border: 1px solid rgba(122,122,122,.28); border-radius: 24px;
  background: var(--white); box-shadow: 0 6px 18px -10px rgba(0,0,0,.14);
}
.brand-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.brand { display: inline-flex; align-items: center; }
.brand img { display: block; width: 78px; height: auto; }
.anniversary { color: var(--gray); font-size: 9px; font-weight: 600; letter-spacing: .16em; }
.intro { padding: 20px 0 16px; text-align: center; }
.eyebrow { margin: 0 0 7px; color: var(--blue); font-size: 9px; font-weight: 600; letter-spacing: .14em; }
h1 { margin: 0; font-family: "IBM Plex Sans", Arial, sans-serif; font-size: clamp(29px, 8vw, 52px); font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.copy { max-width: 520px; margin: 10px auto 0; color: var(--gray); font-size: 13px; line-height: 1.45; }
.video-wrap { display: flex; justify-content: center; }
.video-frame {
  overflow: hidden; border: 6px solid var(--black); border-radius: 16px;
  background: var(--black); box-shadow: 0 6px 18px -10px rgba(0,0,0,.32);
}
.video-frame.portrait { width: min(67vw, 235px); max-height: 46dvh; aspect-ratio: 9 / 16; }
.video-frame.landscape { width: min(100%, 620px); aspect-ratio: 16 / 9; }
.video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.play { margin-top: 15px; color: var(--gray); text-align: center; font-size: 11px; }
.play strong { display: block; margin-top: 2px; color: var(--black); font-family: "IBM Plex Sans", Arial, sans-serif; font-size: 12px; font-weight: 600; }
footer { margin-top: 20px; text-align: center; }
.rule { width: 34px; height: 3px; margin: 0 auto 10px; border-radius: 9px; background: linear-gradient(90deg,var(--blue) 0 50%,var(--green) 50%); }
footer p { margin: 0; font-family: "IBM Plex Sans", Arial, sans-serif; font-size: 9px; font-weight: 600; letter-spacing: .10em; }
footer span { display: block; margin-top: 5px; color: var(--gray); font-size: 10px; }
.home-copy { padding: 78px 0; text-align: center; }
.home-copy h1 { max-width: 560px; margin: 0 auto; }
.home-copy p { color: var(--gray); }
@media (max-width: 430px) {
  .shell { padding: 8px; }
  .card { padding: 16px 14px 19px; border-radius: 20px; }
  .intro { padding: 15px 0 13px; }
  .copy { max-width: 350px; font-size: 12px; }
  .video-frame { border-width: 5px; border-radius: 15px; }
  footer { margin-top: 17px; }
}
@media (max-height: 700px) and (orientation: portrait) {
  .intro { padding: 11px 0 10px; }
  h1 { font-size: clamp(27px, 7vw, 38px); }
  .copy { margin-top: 7px; font-size: 11px; }
  .video-frame.portrait { max-height: 42dvh; }
  .play { margin-top: 10px; }
  footer { margin-top: 12px; }
}