:root { --bg:#ffffff; --fg:#364657; --accent:#1F6FAE; --muted:#364657; }

  *{ box-sizing:border-box; }
  html,body{ height:100%; margin:0; }

  body{
    min-height:100svh; /* handles mobile browser bars */
    display:grid;
    grid-template-rows: 1fr auto; /* main | footer */
    background:var(--bg);
    color:var(--fg);
    font-family: Arial, Helvetica, sans-serif;
    text-align:center;
    overflow-x:hidden;
    padding:
      env(safe-area-inset-top,0)
      env(safe-area-inset-right,0)
      env(safe-area-inset-bottom,0)
      env(safe-area-inset-left,0);
  }

  main.container{
    grid-row:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center; /* <-- vertically centers everything */
    width:100%;
    max-width:640px;
    margin:0 auto;
    padding: clamp(16px, 4vh, 32px) 16px;
    gap:18px;
    min-height:0;
  }

  img.logo{
    display:block;
    width:min(180px, 60vw);
    height:auto;
    margin:0 auto 12px;
    object-fit:contain;
  }

  h1{
    letter-spacing:.06em;
    font-size:2rem;
    margin:0 0 .25rem;
  }

  p{
    color:var(--muted);
    margin:0 0 .75rem;
    font-size:1rem;
  }

  /* Beehiiv embed */
  .signup-wrap{ width:100%; }
  .beehiiv-embed{
    display:block;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:380px;
    border:0;
    background:transparent;
    box-shadow:none;
    border-radius:8px;
  }

  /* Adjust for shorter screens so footer never overlaps */
  @media (max-height:750px){
    .beehiiv-embed{ min-height:340px; }
  }
  @media (max-height:680px){
    .beehiiv-embed{ min-height:300px; }
    h1{ font-size:1.75rem; }
  }

  @media (max-width:480px){
    h1{ font-size:1.75rem; }
    main.container{ padding: clamp(12px, 5svh, 24px) 12px; gap:14px; }
  }

/* Handle short viewports and landscape — use outer scrollbar only */
@media (max-height: 600px) {
  body {
    display: flex;                 /* switch from grid to flex layout */
    flex-direction: column;
    min-height: 100svh;
    overflow-y: auto;              /* enable normal page scroll */
  }

  main.container {
    flex: 1 0 auto;
    justify-content: flex-start;   /* start from top, not vertically centered */
    padding: max(12px, env(safe-area-inset-top)) 16px 16px;
    gap: 10px;
    min-height: auto;
    overflow: visible;             /* removes inner scrollbar completely */
  }

  footer {
    flex-shrink: 0;                /* stay below content */
    position: relative;            /* no fixed positioning */
    margin-top: auto;              /* pushes it to bottom if space allows */
    padding: 6px 10px max(10px, env(safe-area-inset-bottom,10px));
    font-size: 0.8rem;
  }

  img.logo {
    width: min(140px, 45vw);
    margin-bottom: 10px;
  }

  h1 { font-size: 1.5rem; margin-bottom: 6px; }
  p  { font-size: .95rem; margin-bottom: 10px; }

  .beehiiv-embed {
    min-height: 280px !important;
  }
}

/* Optional ultra-short tweaks */
@media (max-height: 520px) {
  img.logo { width: min(120px, 40vw); }
  .beehiiv-embed { min-height: 250px !important; }
}

  footer{
    grid-row:2;
    width:100%;
    text-align:center;
    font-size:.85rem;
    color:var(--muted);
    padding:8px 12px max(12px, env(safe-area-inset-bottom,12px));
  }