/* GradeSprint marketing site — minimal overrides on top of Bootstrap 5 */

body {
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.hero {
    padding: 4rem 0;
}

.plan-card {
    border-radius: 12px;
    height: 100%;
}

.plan-card.premium {
    border: 2px solid #3730a3;
}

/* Features page — used until real screenshots are dropped into
   /assets/screenshots/. Each placeholder names the exact file it will be
   replaced by, so swapping in the real PNG later needs no code change. */
.feature-step {
    margin-bottom: 4.5rem;
}

.feature-step .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: #3730a3;
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
}

/* A fixed-height bounding box every screenshot sits inside, regardless of
   its own native resolution — the raw device screenshots vary in size and
   aspect ratio (different emulator screens, different amounts of captured
   status bar), which without this made the page look misaligned: some
   images rendered much larger than others, and rows didn't line up.
   object-fit: contain scales each one down to fit within the box without
   cropping or distorting it, and centering it horizontally + vertically
   keeps every row's visual center at the same height. */
.feature-screenshot {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 420px;
    overflow: hidden;
}

.feature-screenshot img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Flex children default to min-width/min-height: auto, which means
       "never shrink below my own intrinsic content size" — this silently
       overrides max-width/max-height for anything sized by its own
       content, including an <img>. Found via testing: a raw device
       screenshot rendered at full native size, completely ignoring the
       420px box above, until these were added. */
    min-width: 0;
    min-height: 0;
}

.screenshot-placeholder {
    border: 2px dashed #c7c7f5;
    border-radius: 12px;
    background: #f5f5ff;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    color: #4b4b7a;
}

.screenshot-placeholder .placeholder-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.screenshot-placeholder code {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
}

.premium-badge {
    display: inline-block;
    background: #3730a3;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    margin-left: 0.5rem;
    vertical-align: middle;
}