/* Figma frame 2130:2177. Design-specific styles for the page.
   Everything sits in the `components` cascade layer that Tailwind declares in
   its own stylesheet, so any utility class in the markup beats these rules.
   Unlayered utilities are not needed; if the Tailwind CDN is offline these
   rules are simply the only styling and the layout still holds. */
@layer components {
  :root {
    color-scheme: dark;
    --canvas: #0a0e13;
    --panel: #10161d;
    --line: #262f39;
    --ink: #e9e6dd;
    --muted: #8b94a0;
    --red: #f02c2c;
    /* The design moved its accents from green/gold to red. The old names stay
       as aliases so every rule that references them follows the new accent;
       the prize cards re-declare the original values for themselves. */
    --green: var(--red);
    --gold: var(--red);
    --sage: var(--red);
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 24px;
  }
  body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: "IBM Plex Sans", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
  }
  h1,
  h2,
  h3,
  p {
    margin: 0;
  }
  h2,
  h3 {
    font-family: "Space Grotesk", Arial, sans-serif;
  }
  h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.36px;
  }
  h3 {
    font-size: 22px;
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: -0.2px;
  }
  p {
    color: var(--muted);
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  img {
    display: block;
    max-width: 100%;
  }
  button,
  a,
  summary {
    -webkit-tap-highlight-color: transparent;
  }
  a:focus-visible,
  summary:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 6px;
  }
  strong {
    color: var(--ink);
  }
  .container {
    width: min(1208px, calc(100% - 64px));
    margin-inline: auto;
  }
  .section {
    position: relative;
    padding-block: 88px;
  }
  .section-heading {
    margin-bottom: 42px;
    max-width: 1072px;
  }
  .section-heading .intro {
    max-width: 760px;
    margin-top: 22px;
    line-height: 1.65;
  }
  .section-heading.text-center {
    margin-inline: auto;
    text-align: center;
  }
  .section-heading.text-center .intro {
    margin-inline: auto;
  }
  .eyebrow {
    font-family: "IBM Plex Mono", monospace;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 1.2px;
    color: var(--gold);
    margin-bottom: 12px;
  }
  .panel {
    background: var(--panel);
    border: 1px solid var(--line);
  }
  .tag {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid currentColor;
    font:
      500 12px/1.5 "IBM Plex Mono",
      monospace;
    letter-spacing: 0.3px;
    color: var(--sage);
    background: #2c0f0f70;
  }
  .two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px;
  }
  .three-column {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
  .flex {
    display: flex;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-4 {
    gap: 16px;
  }
  .gap-5 {
    gap: 20px;
  }
  .gap-6 {
    gap: 24px;
  }
  .gap-8 {
    gap: 32px;
  }
  .gap-10 {
    gap: 40px;
  }
  .text-center {
    text-align: center;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-height: 45px;
    padding: 10px 22px;
    border: 1px solid #ffffff33;
    border-radius: 999px;
    background: linear-gradient(100deg, #820e0e, #f02c2c);
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
    transition:
      filter 0.18s,
      transform 0.18s;
  }
  .button:hover {
    filter: brightness(1.2);
    transform: translateY(-2px);
  }
  .button span {
    font-size: 21px;
    line-height: 1;
  }
  /* Circular badge for an icon inside a button (hero CTA arrow). Font Awesome
     owns `display` and `line-height` on its own elements, so the glyph is
     centred through FA's own `--fa-display` knob instead of a wrapper. */
  .button-icon {
    --fa-display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #000;
    font-size: 12px;
  }
  .text-link {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    font-weight: 600;
  }
  .text-link:hover {
    color: var(--gold);
  }
  .skip-link {
    position: fixed;
    top: 10px;
    left: 12px;
    z-index: 50;
    padding: 10px 18px;
    background: var(--gold);
    color: #10161d;
    transform: translateY(-160%);
  }
  .skip-link:focus {
    transform: translateY(0);
  }
  /* Hero: staggered title and original Figma artwork. */
  .hero {
    position: relative;
    min-height: 732px;
    overflow: hidden;
    background: #08110d;
  }
  .hero-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
  .site-header {
    position: relative;
    z-index: 2;
    height: 148px;
    background: linear-gradient(#0b171650, transparent);
  }
  .header-inner {
    width: min(1210px, calc(100% - 64px));
    height: 101px;
    position: relative;
  }
  .brand {
    font-family: "Source Sans 3", Arial, sans-serif;
    font-weight: 600;
    font-size: 16px;
  }
  .brand-emblem {
    position: absolute;
    left: 50%;
    top: 17px;
    transform: translateX(-50%);
    width: 100px;
    height: 113px;
  }
  .brand-emblem img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .header-cta {
    font-size: 16px;
    min-width: 225px;
    letter-spacing: 0.5px;
  }
  .hero-content {
    position: relative;
    width: min(1100px, calc(100% - 64px));
    padding-top: 145px;
    padding-bottom: 66px;
  }
  .hero-kicker {
    font:
      600 20px/1.4 "Source Sans 3",
      Arial,
      sans-serif;
    color: var(--gold);
    margin-bottom: 12px;
  }
  .hero h1 {
    font-family: "Cousine", "Courier New", monospace;
    font-weight: 400;
    font-size: clamp(56px, 6.945vw, 100px);
    line-height: 1.05;
    letter-spacing: -2.8px;
    color: white;
  }
  .hero-first {
    display: flex;
    align-items: center;
    gap: 40px;
    white-space: nowrap;
  }
  .hero-stars {
    display: flex;
    justify-content: space-between;
    width: 24%;
    height: 34px;
    font-size: 34px;
    line-height: 1;
    color: red;
  }
  .hero-second {
    display: block;
    margin-top: 5px;
    margin-left: 23.5%;
    white-space: nowrap;
  }
  .hero-symbol {
    position: absolute;
    left: 0;
    top: 300px;
    width: 196px;
    height: 81px;
    object-fit: contain;
  }
  .hero-copy {
    margin-left: 23.5%;
    margin-top: 14px;
  }
  .hero-copy p {
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: #d9ded8;
  }
  .hero-actions {
    margin-top: 27px;
    gap: 24px;
    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 18px;
  }
  .hero-actions .button {
    min-width: 212px;
  }
  .organizer-bar {
    background: #10161d;
    padding: 39px 0;
  }
  .organizer-bar p {
    font-family: "IBM Plex Mono", monospace;
    color: #d5d9d8;
    font-size: 17px;
    letter-spacing: 1px;
  }
  .organizer-bar .container {
    gap: 40px;
  }
  .organizer-logos {
    display: flex;
    align-items: center;
    gap: 36px;
  }
  .organizer-logos img {
    width: auto;
    height: 48px;
  }
  /* Program and golden ticket */
  .about {
    padding-top: 100px;
    padding-bottom: 88px;
    background: radial-gradient(
      ellipse at 100% 80%,
      #4a1a1a1a,
      transparent 45%
    );
  }
  .about h2 {
    max-width: 1040px;
  }
  .benefit-card {
    position: relative;
    padding: 38px;
  }
  .benefit-card::before {
    content: "";
    position: absolute;
    inset: -1px auto auto -1px;
    width: 12px;
    height: 12px;
    border-left: 2px solid var(--red);
    border-top: 2px solid var(--red);
  }
  /* The benefit icons have no colour rule of their own, so they take the accent
     directly; every other accent on the page comes from --gold / --green. */
  .about .benefit-icon {
    color: var(--red);
  }
  .benefit-card h3 {
    font-size: 20px;
    margin-top: 28px;
    margin-bottom: 24px;
  }
  .benefit-icon {
    font-size: 32px;
    line-height: 1;
  }
  .checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .checklist li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    color: var(--muted);
    line-height: 1.5;
  }
  .check-icon {
    flex-shrink: 0;
    margin-top: 4px;
    font-size: 15px;
    line-height: 1;
    color: var(--gold);
  }
  .terminal-label {
    border-top: 1px solid var(--line);
    padding-top: 25px;
    margin-top: 32px;
    font:
      14px/1.5 "IBM Plex Mono",
      monospace;
    overflow-wrap: anywhere;
  }
  /* Categories */
  .categories {
    padding-bottom: 116px;
    background: radial-gradient(ellipse at 0% 50%, #4a1a1a17, transparent 50%);
  }
  .category-card {
    padding: 30px 33px;
    position: relative;
    overflow: hidden;
    min-height: 346px;
    --tone: var(--red);
    background:
      /* thin white glow in the top-left corner */
      radial-gradient(60% 45% at 0% 0%, #ffffff1a, transparent 70%),
      /* larger red glow in the bottom-right corner */
        radial-gradient(
          120% 100% at 100% 100%,
          color-mix(in srgb, var(--tone) 32%, transparent),
          transparent 72%
        ),
      var(--panel);
  }
  /* Confetti overlay in the bottom-right corner — sits above the red glow but
     below the card content (children are lifted with z-index below). */
  .category-card::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(80%, 380px);
    aspect-ratio: 752 / 488;
    background: url("assets/confetti.png") right bottom / contain no-repeat;
    opacity: 0.35;
    pointer-events: none;
  }
  /* Cards 02-04 use their own artwork in that corner instead of the confetti. */
  .category-card.tone-sage::after {
    background-image: url("assets/lock.png");
  }
  .category-card.tone-bronze::after {
    background-image: url("assets/atom.png");
  }
  .category-card.tone-green::after {
    background-image: url("assets/cells.png");
  }
  /* The atom and cells line art reads heavier than the confetti/lock artwork, so
     those two cards get a smaller corner box. The box keeps the shared
     752/488 aspect ratio, so the drawing scales down uniformly with the width. */
  .category-card.tone-bronze::after,
  .category-card.tone-green::after {
    width: min(60%, 285px);
  }
  .category-card > * {
    position: relative;
    z-index: 1;
  }
  /* Per-card accent hook. All four currently resolve to the red accent; give one
     its own value here to tint a single card again. */
  .category-card.tone-red {
    --tone: var(--red);
  }
  .category-card.tone-sage {
    --tone: var(--red);
  }
  .category-card.tone-bronze {
    --tone: var(--red);
  }
  .category-card.tone-green {
    --tone: var(--red);
  }
  .category-number {
    font:
      700 30px/1 "IBM Plex Mono",
      monospace;
    color: var(--tone);
  }
  .category-card .tag {
    color: var(--tone);
    font-size: 12px;
  }
  .category-card h3 {
    margin-top: 26px;
    margin-bottom: 8px;
  }
  .category-card > p {
    line-height: 1.5;
    min-height: 48px;
  }
  .category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 17px;
    margin-top: 20px;
    border-top: 1px solid var(--line);
  }
  .category-tags span {
    padding: 6px 10px;
    border: 1px solid #ffffff12;
    background: #10161de6;
    font:
      12px/1.5 "IBM Plex Mono",
      monospace;
    color: #c8ced0;
  }
  .competition {
    padding-top: 72px;
    border-top: 1px solid #262f3940;
    background: var(--canvas) url("assets/bg-format.png") center/cover no-repeat;
  }
  .phase-card {
    padding: 32px;
  }
  .phase-card h3 {
    margin: 23px 0 13px;
  }
  .phase-card > p {
    line-height: 1.6;
  }
  .technical-box {
    background: #0b1117;
    padding: 22px 17px;
    margin-top: 22px;
    font:
      13px/1.75 "IBM Plex Mono",
      monospace;
    color: #a4acb5;
  }
  .technical-box p {
    font-size: 12px;
    margin-bottom: 7px;
  }
  .technical-box ul {
    padding-left: 20px;
    margin: 0;
  }
  .phase-card .phase-note {
    font:
      12px/1.7 "IBM Plex Mono",
      monospace;
    color: var(--gold);
    margin-top: 20px;
  }
  /* Rewards */
  .prizes {
    padding-top: 58px;
    padding-bottom: 68px;
    background:
      radial-gradient(ellipse at left top, #4a1a1a40, transparent 48%),
      radial-gradient(ellipse at right bottom, #4a1a1a30, transparent 45%);
  }
  .prize-intro {
    display: grid;
    grid-template-columns: 1fr 1.75fr;
    gap: 55px;
    align-items: center;
    padding-bottom: 62px;
    margin-bottom: 48px;
    border-bottom: 1px solid #ffffff1a;
  }
  .prize-intro .section-heading {
    margin-bottom: 5px;
  }
  .prize-intro > p {
    font-size: 15px;
    line-height: 1.6;
  }
  .total-prize {
    font-family: "Space Grotesk", sans-serif;
    color: var(--gold);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
  }
  .podiums {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    align-items: end;
  }
  .prize-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 32px 30px 24px;
    border: 1px solid #ffffff33;
    min-height: 540px;
    background: linear-gradient(160deg, #565b55, #1a2420 58%);
    --prize: #74cd5b;
    /* Prize cards keep the original gold/green accents. */
    --gold: #f6e173;
    --green: #4e8847;
    --sage: #becca3;
  }
  .prize-card > * {
    position: relative;
    z-index: 1;
  }
  .prize-card::after {
    content: "";
    position: absolute;
    right: -35%;
    bottom: 0;
    width: 100%;
    height: 65%;
    background: url("assets/throphy.png") center/contain no-repeat;
    opacity: 0.24;
    transform: rotate(-17deg);
    pointer-events: none;
  }
  .prize-card.prize-gold {
    min-height: 638px;
    --prize: var(--gold);
    background: linear-gradient(145deg, #514c25, #202419 67%);
  }
  .prize-card.prize-bronze {
    min-height: 465px;
    --prize: #d8a577;
    background: linear-gradient(145deg, #574a3c, #24201c 65%);
  }
  .prize-card h3 {
    font-size: 28px;
    color: #fff;
  }
  .prize-gold h3 {
    font-size: 36px;
  }
  .prize-amount {
    color: var(--prize);
    font:
      700 clamp(25px, 2.6vw, 38px) / 1.35 "IBM Plex Mono",
      monospace;
    letter-spacing: -1px;
    margin-top: 10px;
    white-space: nowrap;
  }
  .prize-caption {
    font:
      11px/1.6 "IBM Plex Mono",
      monospace;
    color: #e0ded1;
    margin-top: 10px;
    margin-bottom: 30px;
  }
  .prize-card .checklist {
    gap: 20px;
    margin-bottom: 35px;
  }
  .prize-card .checklist li {
    color: #e0e0d7;
    font-family: "Source Sans 3", sans-serif;
    font-size: 17px;
    line-height: 1.4;
  }
  .golden-ticket {
    margin-top: auto;
    padding: 12px 8px;
    text-align: center;
    background: linear-gradient(105deg, #9b8125, #efd057, #ae9527);
    color: #17220e;
    font:
      700 15px/1.45 "IBM Plex Mono",
      monospace;
    border: 1px solid #f7db5a;
  }
  .prize-notes {
    margin-top: 26px;
    gap: 24px;
    padding: 28px 36px;
    font-size: 15px;
  }
  .prize-notes > div {
    max-width: 800px;
  }
  .prize-notes p + p {
    margin-top: 14px;
  }
  .prize-notes .tag {
    font-size: 12px;
    white-space: nowrap;
  }
  /* Keynote and panel */
  .keynote {
    padding-bottom: 58px;
  }
  .keynote-card {
    display: grid;
    grid-template-columns: 312px minmax(0, 1fr);
    gap: 40px;
    padding: 26px;
    align-items: center;
  }
  .keynote-photo {
    position: relative;
    align-self: stretch;
    min-height: 312px;
  }
  .keynote-photo > img {
    width: 100%;
    height: 100%;
    max-height: 355px;
    object-fit: cover;
  }
  .photo-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    font:
      600 10px/1.4 "IBM Plex Mono",
      monospace;
    letter-spacing: 0.5px;
    color: #e1d3d3;
    border: 1px solid #977474;
    background: #3d2222;
    padding: 4px 8px;
  }
  .keynote-copy .eyebrow {
    font-size: 12px;
    color: var(--sage);
    margin-bottom: 8px;
  }
  .keynote-copy h3 {
    font-size: 34px;
    line-height: 1.15;
  }
  .speaker-role {
    font:
      500 13px/1.6 "IBM Plex Mono",
      monospace;
    color: var(--sage);
    margin-top: 12px;
    margin-bottom: 22px;
  }
  .keynote-copy > p:not(.eyebrow):not(.speaker-role) {
    line-height: 1.65;
  }
  .keynote-topic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #0a1016;
    border-left: 3px solid var(--green);
    padding: 18px;
    margin-top: 25px;
  }
  .tiny-label {
    font:
      11px/1.5 "IBM Plex Mono",
      monospace;
    letter-spacing: 0.5px;
    color: var(--sage);
  }
  .topic-title {
    color: var(--ink);
    font-weight: 600;
    margin-top: 5px;
    line-height: 1.4;
  }
  .keynote-topic .tag {
    color: var(--green);
    font-size: 10px;
    white-space: nowrap;
  }
  .talkshow {
    padding-top: 56px;
    padding-bottom: 64px;
  }
  .talkshow h2 {
    max-width: 890px;
  }
  .speaker-card {
    overflow: hidden;
  }
  .speaker-photo {
    position: relative;
    height: 197px;
  }
  .speaker-photo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .speaker-photo .photo-badge {
    left: 20px;
    bottom: -12px;
  }
  .speaker-copy {
    padding: 32px 20px 22px;
  }
  .speaker-copy h3 {
    font-size: 23px;
  }
  .speaker-copy .speaker-role {
    color: var(--red);
    min-height: 43px;
    margin-bottom: 18px;
  }
  .speaker-copy > p:not(.speaker-role):not(.theme-label) {
    font-size: 14px;
    line-height: 1.65;
    min-height: 115px;
  }
  .theme-label {
    border-top: 1px solid var(--line);
    padding-top: 16px;
    margin-top: 21px;
    font-size: 10px;
  }
  /* Scoring, timeline and registration */
  .criteria {
    padding-block: 82px;
    background: radial-gradient(
      ellipse at left center,
      #4a1a1a20,
      transparent 52%
    );
  }
  .criteria-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 32px;
  }
  .criterion > .flex {
    gap: 20px;
  }
  .criterion {
    grid-column: span 2;
    padding: 22px 20px;
  }
  .criterion:nth-child(4) {
    grid-column: 2 / span 2;
  }
  .criterion h3 {
    font-size: 20px;
  }
  .criterion > p {
    font-size: 13px;
    line-height: 1.65;
    margin-top: 25px;
  }
  .score {
    flex: 0 0 94px;
    width: 94px;
    height: 94px;
    padding: 7px;
    border-radius: 50%;
    background: conic-gradient(var(--red) calc(var(--score) * 1%), #ddd 0);
    transform: rotate(-90deg);
  }
  .score > span {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--panel);
    font:
      700 30px/1 "IBM Plex Mono",
      monospace;
    color: #dfe3d4;
    transform: rotate(90deg);
  }
  .score small {
    font:
      500 10px/1.4 "IBM Plex Mono",
      monospace;
    letter-spacing: 1px;
    margin-top: 4px;
    color: var(--muted);
  }
  .timeline-section {
    background:
      radial-gradient(ellipse at 0% 15%, #4a1a1a40, transparent 55%),
      radial-gradient(ellipse at 100% 80%, #4a1a1a30, transparent 50%);
    padding-block: 75px 86px;
  }
  .timeline-section .section-heading {
    margin-bottom: 54px;
  }
  .timeline {
    max-width: 760px;
    list-style: none;
    margin: 0 auto;
    padding: 0 0 0 39px;
    border-left: 1px solid #584040;
  }
  .timeline-item {
    position: relative;
    margin-bottom: 24px;
  }
  .timeline-item:last-child {
    margin-bottom: 0;
  }
  .timeline-item::before {
    content: "";
    position: absolute;
    left: -46px;
    top: 26px;
    width: 13px;
    height: 13px;
    background: var(--canvas);
    border: 2px solid var(--sage);
  }
  .timeline-item:nth-child(n + 4)::before {
    border-color: var(--green);
  }
  .timeline-item article {
    padding: 22px 25px;
  }
  .timeline-date {
    font:
      500 12px/1.5 "IBM Plex Mono",
      monospace;
    color: var(--sage);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .timeline-item h3 {
    font-size: 22px;
    margin-bottom: 8px;
  }
  .timeline-item article > p:last-child {
    font-size: 15px;
    line-height: 1.6;
  }
  .registration {
    background: #10161d;
    padding-block: 62px 82px;
  }
  .registration .section-heading {
    margin-bottom: 32px;
  }
  .registration .intro {
    margin-top: 12px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 13px;
    color: var(--sage);
  }
  .steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .step {
    display: flex;
    flex-direction: column;
    padding: 24px 20px;
    background: #090e13;
    border: 1px solid var(--line);
  }
  .step-number {
    font:
      700 36px/1.3 "IBM Plex Mono",
      monospace;
    color: var(--green);
    margin-bottom: 27px;
  }
  .step h3 {
    font-size: 18px;
    margin-bottom: 12px;
  }
  .step > p:not(.tiny-label) {
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    margin-bottom: 25px;
  }
  .step .tiny-label {
    margin-top: auto;
    border-top: 1px solid var(--line);
    padding-top: 15px;
    font-size: 10px;
  }
  .cta-section {
    padding-block: 84px 50px;
    background: radial-gradient(
      ellipse at right top,
      #4a1a1a30,
      transparent 60%
    );
  }
  .cta-panel {
    position: relative;
    overflow: hidden;
    padding: 58px 28px 64px;
    background:
      radial-gradient(ellipse at center, #4a1a1a40, transparent 70%),
      var(--panel);
  }
  .cta-panel h2 {
    max-width: 730px;
    margin: auto;
    font-size: 50px;
    line-height: 1.1;
  }
  .cta-panel > p {
    max-width: 535px;
    margin: 28px auto;
    line-height: 1.7;
  }
  .cta-panel .button {
    border-radius: 0;
    min-width: 360px;
    font-size: 16px;
    letter-spacing: 0.8px;
  }
  .faq {
    padding-top: 36px;
    padding-bottom: 64px;
  }
  .faq .section-heading {
    margin-bottom: 45px;
  }
  .faq h2 {
    font-size: 32px;
  }
  .faq-list {
    max-width: 770px;
  }
  .faq-item {
    margin-bottom: 10px;
  }
  .faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    list-style: none;
    padding: 20px 26px;
    cursor: pointer;
    font-size: 17px;
    color: var(--ink);
  }
  .faq-item summary::-webkit-details-marker {
    display: none;
  }
  .faq-item summary:hover {
    background: #231919;
  }
  .faq-indicator {
    position: relative;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
  }
  .faq-indicator::before,
  .faq-indicator::after {
    content: "";
    position: absolute;
    background: var(--green);
    width: 12px;
    height: 2px;
    left: 0;
    top: 5px;
  }
  .faq-indicator::after {
    transform: rotate(90deg);
    transition: transform 0.15s;
  }
  .faq-item[open] .faq-indicator::after {
    transform: rotate(0);
  }
  .faq-answer {
    margin: 0 26px;
    padding: 22px 0;
    border-top: 1px solid var(--line);
    font-size: 16px;
    line-height: 1.6;
    color: var(--muted);
  }
  .sponsor-bar {
    padding: 28px 0 40px;
  }
  .sponsor-bar p {
    font:
      15px/1.5 "IBM Plex Mono",
      monospace;
    color: var(--ink);
    letter-spacing: 1px;
  }
  .sponsor-bar .container {
    gap: 0;
    justify-content: space-evenly;
  }
  .sponsor-logos {
    display: contents;
  }
  .sponsor-logos img {
    width: auto;
    height: 48px;
  }
  /* The SWS mark is almost square, so at the shared height it reads far smaller
   than the two wide wordmarks; it needs the extra height the design gave it. */
  .sponsor-logos .sponsor-logo-square {
    height: 72px;
  }
  .footer-bottom {
    padding: 40px 0;
    background: #10161d;
    border-top: 1px solid #201717;
  }
  .footer-bottom p {
    font:
      12px/1.65 "IBM Plex Mono",
      monospace;
  }
  .footer-bottom p:first-child {
    max-width: 450px;
  }
  .footer-bottom p:last-child {
    white-space: nowrap;
  }
  @media (min-width: 1600px) {
    .hero-backdrop {
      object-position: center center;
    }
  }
  @media (max-width: 1100px) {
    .hero h1 {
      font-size: 6.8vw;
    }
    .hero-content {
      padding-top: 130px;
    }
    .hero-symbol {
      width: 17%;
      top: 265px;
    }
    .hero-stars {
      height: 27px;
      font-size: 27px;
    }
    .hero-copy {
      margin-top: 25px;
    }
    .hero-copy p {
      font-size: 16px;
    }
    .hero {
      min-height: 690px;
    }
    .header-cta {
      min-width: 190px;
      font-size: 14px;
    }
    .brand {
      max-width: 210px;
      font-size: 14px;
    }
    .benefit-card {
      padding: 28px;
    }
    .two-column {
      gap: 28px;
    }
    .section {
      padding-block: 68px;
    }
    .keynote-card {
      grid-template-columns: 240px minmax(0, 1fr);
      gap: 25px;
    }
    .keynote-photo {
      min-height: 280px;
    }
    .keynote-topic {
      flex-wrap: wrap;
    }
    .podiums {
      gap: 20px;
    }
    .prize-card {
      padding: 26px 20px;
      min-height: 570px;
    }
    .prize-card.prize-bronze {
      min-height: 505px;
    }
    .prize-card.prize-gold {
      min-height: 645px;
    }
    .prize-card .checklist li {
      font-size: 16px;
    }
    .prize-amount {
      font-size: 25px;
    }
    .prize-card .golden-ticket {
      font-size: 12px;
    }
    .criteria-grid {
      gap: 20px;
    }
    .criterion {
      padding: 20px 16px;
    }
    .criterion > .flex {
      flex-direction: column;
      align-items: flex-start;
    }
    .score {
      width: 86px;
      height: 86px;
      flex-basis: 86px;
    }
    .criterion h3 {
      font-size: 18px;
    }
    .steps {
      gap: 14px;
    }
    .step {
      padding: 20px 14px;
    }
    .step h3 {
      font-size: 16px;
    }
    .step > p:not(.tiny-label) {
      font-size: 12px;
    }
    .organizer-logos img {
      height: 40px;
    }
    .prize-intro {
      gap: 30px;
    }
    .total-prize {
      font-size: 35px;
    }
    .three-column {
      gap: 22px;
    }
    .speaker-copy h3 {
      font-size: 20px;
    }
    .speaker-copy {
      padding-inline: 17px;
    }
  }
  @media (max-width: 767px) {
    .container {
      width: calc(100% - 40px);
    }
    .section {
      padding-block: 54px;
    }
    h2 {
      font-size: 28px;
      line-height: 1.22;
    }
    h3 {
      font-size: 21px;
    }
    .eyebrow {
      font-size: 11px;
      letter-spacing: 1px;
    }
    .section-heading {
      margin-bottom: 28px;
    }
    .section-heading .intro {
      margin-top: 15px;
      font-size: 15px;
    }
    .two-column,
    .three-column {
      grid-template-columns: minmax(0, 1fr);
      gap: 22px;
    }
    .hero {
      min-height: 690px;
    }
    .hero-backdrop {
      object-position: 54% top;
    }
    .site-header {
      height: 134px;
    }
    .header-inner {
      width: calc(100% - 32px);
      height: 79px;
      align-items: center;
      gap: 10px;
    }
    .brand {
      flex: 1;
      min-width: 0;
      max-width: none;
      font-size: 11px;
      line-height: 1.4;
    }
    .brand-emblem {
      position: static;
      transform: none;
      flex-shrink: 0;
      width: 36px;
      height: 42px;
    }
    .button.header-cta {
      min-width: 0;
      min-height: 34px;
      font-size: 10px;
      padding: 8px 11px;
      gap: 8px;
    }
    .header-cta span {
      font-size: 14px;
    }
    .hero-content {
      width: calc(100% - 40px);
      padding-top: 115px;
      padding-bottom: 50px;
    }
    .hero-kicker {
      font-size: 14px;
      margin-bottom: 19px;
    }
    .hero h1 {
      font-size: clamp(29px, 7.35vw, 56px);
      letter-spacing: -1.3px;
      line-height: 1.16;
    }
    .hero-first {
      gap: 12px;
      flex-wrap: wrap;
    }
    .hero-stars {
      position: absolute;
      top: 78px;
      right: 0;
      width: 130px;
      height: 18px;
      font-size: 18px;
    }
    .hero-second {
      margin-left: 0;
      margin-top: 7px;
    }
    .hero-symbol {
      display: none;
    }
    .hero-copy {
      margin-left: 0;
      margin-top: 25px;
      max-width: 590px;
    }
    .hero-copy p {
      font-size: 15px;
      line-height: 1.55;
      margin-bottom: 10px;
    }
    .hero-actions {
      gap: 18px;
      font-size: 15px;
      margin-top: 28px;
    }
    .hero-actions .button {
      min-width: 180px;
    }
    .button {
      padding: 11px 17px;
      font-size: 15px;
    }
    .organizer-bar {
      padding: 28px 0;
    }
    .organizer-bar .container {
      gap: 22px;
    }
    .organizer-bar p {
      font-size: 12px;
    }
    .organizer-logos {
      justify-content: center;
      gap: 18px;
      width: 100%;
      max-width: 460px;
    }
    .organizer-logos img {
      flex: 1 1 0;
      min-width: 0;
      height: auto;
    }
    .benefit-card {
      padding: 25px;
    }
    .benefit-card h3 {
      font-size: 20px;
      margin-top: 22px;
    }
    .checklist {
      gap: 15px;
    }
    .checklist li {
      font-size: 15px;
      gap: 12px;
    }
    .terminal-label {
      font-size: 11px;
      padding-top: 22px;
      margin-top: 24px;
    }
    .category-card {
      padding: 25px;
      min-height: 0;
    }
    .category-card .tag {
      font-size: 10px;
      padding: 5px 8px;
    }
    .category-number {
      font-size: 27px;
    }
    .category-card h3 {
      margin-top: 24px;
    }
    .category-tags {
      gap: 8px;
    }
    .category-tags span {
      font-size: 10px;
      padding: 7px 9px;
      max-width: 100%;
      overflow-wrap: anywhere;
    }
    .category-card > p {
      font-size: 15px;
    }
    .phase-card {
      padding: 25px;
    }
    .phase-card .tag {
      font-size: 10px;
    }
    .phase-card > p {
      font-size: 15px;
    }
    .technical-box {
      font-size: 12px;
    }
    .prize-intro {
      grid-template-columns: 1fr;
      gap: 22px;
      padding-bottom: 28px;
      margin-bottom: 28px;
    }
    .total-prize {
      font-size: 34px;
      white-space: normal;
    }
    .prize-intro > p {
      font-size: 14px;
    }
    .podiums {
      grid-template-columns: 1fr;
      gap: 24px;
    }
    .prize-card,
    .prize-card.prize-gold,
    .prize-card.prize-bronze {
      padding: 28px;
      min-height: 0;
    }
    .prize-card h3,
    .prize-gold h3 {
      font-size: 29px;
    }
    .prize-amount {
      font-size: 32px;
    }
    .prize-caption {
      margin-bottom: 25px;
    }
    .prize-card .checklist {
      margin-bottom: 32px;
      gap: 18px;
    }
    .prize-card .checklist li {
      font-size: 17px;
    }
    .prize-card .golden-ticket {
      font-size: 14px;
    }
    .prize-notes {
      padding: 24px;
      font-size: 14px;
      gap: 22px;
    }
    .prize-notes .tag {
      font-size: 10px;
    }
    .keynote-card {
      grid-template-columns: 1fr;
      gap: 27px;
      padding: 20px;
    }
    .keynote-photo {
      max-width: 360px;
      width: 100%;
      min-height: 0;
      margin: auto;
    }
    .keynote-photo > img {
      aspect-ratio: 1;
      height: auto;
    }
    .keynote-copy h3 {
      font-size: 29px;
    }
    .keynote-copy > p {
      font-size: 15px;
    }
    .keynote-topic {
      padding: 16px;
      gap: 15px;
    }
    .speaker-photo {
      height: auto;
      aspect-ratio: 381/197;
    }
    .speaker-copy {
      padding: 29px 22px 22px;
    }
    .speaker-copy h3 {
      font-size: 24px;
    }
    .speaker-copy .speaker-role,
    .speaker-copy > p:not(.speaker-role):not(.theme-label) {
      min-height: 0;
    }
    .criteria-grid {
      grid-template-columns: 1fr;
      gap: 18px;
    }
    .criterion,
    .criterion:nth-child(4) {
      grid-column: auto;
      padding: 24px;
    }
    .criterion > .flex {
      flex-direction: row;
      align-items: center;
    }
    .criterion h3 {
      font-size: 19px;
    }
    .criterion > p {
      font-size: 14px;
      margin-top: 20px;
    }
    .score {
      flex-basis: 84px;
      width: 84px;
      height: 84px;
    }
    .timeline-section .section-heading {
      margin-bottom: 34px;
    }
    .timeline {
      margin-left: 7px;
      padding-left: 25px;
    }
    .timeline-item::before {
      left: -32px;
    }
    .timeline-item article {
      padding: 21px 20px;
    }
    .timeline-date {
      font-size: 10px;
    }
    .timeline-item h3 {
      font-size: 20px;
    }
    .timeline-item article > p:last-child {
      font-size: 14px;
    }
    .steps {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 15px;
    }
    .step {
      padding: 22px 17px;
    }
    .step:last-child {
      grid-column: 1/-1;
    }
    .step-number {
      margin-bottom: 20px;
      font-size: 32px;
    }
    .step h3 {
      font-size: 18px;
    }
    .step > p:not(.tiny-label) {
      font-size: 13px;
    }
    .cta-panel {
      padding: 38px 22px;
    }
    .cta-panel h2 {
      font-size: 34px;
    }
    .cta-panel > p {
      font-size: 15px;
      margin: 23px auto;
    }
    .cta-panel .button {
      min-width: 0;
      width: 100%;
      font-size: 13px;
      gap: 15px;
    }
    .faq h2 {
      font-size: 27px;
    }
    .faq-item summary {
      font-size: 15px;
      padding: 18px;
      gap: 18px;
    }
    .faq-answer {
      font-size: 14px;
      margin-inline: 18px;
      padding-block: 18px;
    }
    .sponsor-bar {
      padding: 10px 0 30px;
    }
    .sponsor-bar .container {
      justify-content: center;
      gap: 17px;
    }
    .sponsor-bar p {
      flex-basis: 100%;
      font-size: 12px;
    }
    .sponsor-logos img {
      flex-shrink: 0;
      width: auto;
      height: 28px;
    }
    .sponsor-logos .sponsor-logo-square {
      height: 42px;
    }
    .footer-bottom {
      padding: 28px 0;
    }
    .footer-bottom p {
      font-size: 10px;
    }
    .footer-bottom p:last-child {
      white-space: normal;
    }
  }
  @media (max-width: 380px) {
    .hero-actions {
      align-items: flex-start;
      flex-direction: column;
      gap: 16px;
    }
    .hero {
      min-height: 730px;
    }
    .brand-emblem {
      width: 32px;
      height: 37px;
    }
    .brand {
      font-size: 10px;
    }
    .header-cta {
      display: none;
    }
    .prize-amount {
      font-size: 27px;
    }
    .total-prize {
      font-size: 30px;
    }
    .steps {
      grid-template-columns: 1fr;
    }
    .step:last-child {
      grid-column: auto;
    }
    .criterion > .flex {
      gap: 15px;
    }
    .score {
      flex-basis: 72px;
      width: 72px;
      height: 72px;
    }
    .criterion h3 {
      font-size: 17px;
    }
    .cta-panel h2 {
      font-size: 29px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      transition: none !important;
    }
  }
}

/* Figma-export leftovers: the markup still carries utility classes such as
   `gap-8`, `gap-6`, `md:grid-cols-2` and `container` on layout containers whose
   spacing and columns are defined above. Tailwind's utilities now beat this
   file, so `revert-layer` cancels exactly those declarations and lets the design
   values apply again at every breakpoint. To drive one of these elements from
   Tailwind instead, delete that leftover class from the element in the markup. */
@layer utilities {
  .container {
    width: revert-layer;
  }
  .two-column,
  .three-column,
  .podiums,
  .criteria-grid,
  .steps,
  .keynote-card,
  .prize-intro,
  .category-tags,
  .hero-actions,
  .prize-notes,
  .organizer-bar .container,
  .criterion > .flex {
    gap: revert-layer;
  }
  .prize-intro,
  .steps {
    grid-template-columns: revert-layer;
  }
  .criterion {
    grid-column: revert-layer;
  }
}