@font-face{
    font-family: 'Public Pixel';
    src: url('../PublicPixel.woff2') format('woff2'),
         url('../PublicPixel.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
/* allow synthetic bold if the font lacks it */
html { font-synthesis: weight; }   /* default in most browsers anyway */

  body{
    font-size:16px;
    background-color:#48326f;
    color:#ffffff;
    font-family: "Fira Code", monospace;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-weight: 400;
  font-style: normal;
    text-transform: uppercase;
  }

  h1,h2,h3,h4,h5{
      font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
  }

  summary{
    font-weight:800;
  }


  .pricing-tile h3{
    font-weight:800;
    font-family: "Fira Code", monospace;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  }
  .hero{
    background-image:url('../bg-hero.png');
    background-size:cover;
    background-position:center;
    min-height:100svh; /* better on mobile than 100vh */
  }

.info{
  background:#ffffff;
  color:#48326f;
}

.info table tr td{
  border:1px solid #ffffff;
  padding:20px;
  background:#48326f;
  color:#ffffff;
}

  .logo{ max-width:600px; }
  .btn{ padding:20px; }

  /* Countdown container (works with your .framed styles) */
  #countdown{
    display:block;
    max-width:min(900px,92vw);
    margin-inline:auto;
    white-space:normal;
    line-height:1.05;
  }

  /* Grid: 4 across desktop, 2×2 on mobile */
  .cd-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:clamp(8px,2vw,18px);
    align-items:end;
    justify-items:center;
  }
  @media (max-width:576px){
    .cd-grid{ grid-template-columns:repeat(2,1fr); }
    #countdown{ padding:8px 10px; } /* optional tighter padding in frame */
  }

  .cd-cell{
    display:flex;
    flex-direction:column;
    align-items:center;
    font-family:inherit; /* keep your pixel font */
  }

  .cd-value{
    font-size:clamp(24px,8vw,56px);
    line-height:1;
    min-width:2ch;       /* prevents “00” jitter */
    text-align:center;
  }

  .cd-label{
    margin-top:4px;
    font-size:clamp(10px,2.8vw,14px);
    text-transform:uppercase;
    letter-spacing:.08em;
    opacity:.95;
  }
  

  .agree{
    font-size:0.75rem;
  }

  /* Sections */
.section { padding: 4rem 0; }

/* Pricing tiles sit on your purple, inverted inside */
.pricing-tile {
  border: 1px solid #ffffff;
  background: #48326f;
  color: #ffffff;
  padding: 24px;
}
.pricing-tile ul { margin: 0; padding-left: 1.2rem; }
.display-price { font-size: clamp(24px, 6vw, 40px); margin: 0 0 8px; }

/* Simple FAQ accordion using <details> */
details.faq {
  border: 1px solid #ffffff22;
  padding: 14px 16px;
}
details.faq summary {
  cursor: pointer;
  list-style: none;
}
details.faq summary::-webkit-details-marker { display: none; }

/* Minor spacing tweaks on info blocks */
.info.section .pricing-tile { border-color: #ffffff; }

/* Remove default triangle (cross-browser) */
details.faq summary { list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }

/* Place a + icon on the right of each summary */
details.faq summary{
  position: relative;
  padding-right: 2rem;      /* space for the icon */
  cursor: pointer;
}

/* Plus (closed) → Minus (open). Uses your current color + font. */
details.faq summary::after{
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: inherit;     /* keeps the pixel vibe */
  font-size: 1.25em;        /* tweak to taste */
  line-height: 1;
}

/* When opened, swap to a minus (U+2212, not an em dash) */
details.faq[open] summary::after{
  content: "−";
}

/* Nice focus state for keyboard users */
details.faq summary:focus{
  outline: 2px dotted currentColor;
  outline-offset: 4px;
}