/* ----- reset ----- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

/* ----- tokens ----- */
:root{
    --bg:#f9f9f7;
    --ink:#222;
    --accent:#266e8e;
    --accent-light:#e8f4f8;
    --radius:.5rem;
    --gap:1.25rem;
    --font:"Inter",system-ui,sans-serif;
}

body{
    display:flex;flex-direction:column;min-height:100%;
    font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.5;
}
header,footer{text-align:center;padding:var(--gap) calc(var(--gap)*.75);}
header h1{font-size:1.9rem;font-weight:600;color:var(--accent);letter-spacing:.5px}

main{flex:1;display:flex;flex-direction:column;align-items:center;padding:var(--gap)}

/* ----- generic card ----- */
.card{
    width:100%;max-width:52ch;background:var(--accent-light);
    border-radius:var(--radius);padding:calc(var(--gap)*1.25);
    box-shadow:0 4px 10px rgba(0,0,0,.07);
}
.card h2{font-size:1.4rem;margin-bottom:.75rem}
.card ul{list-style:disc inside;margin-left:.25rem}
.card li+li{margin-top:.45rem}
.cta{
    margin-top:var(--gap);display:inline-block;background:var(--accent);color:#fff;
    padding:.55rem 1.25rem;border-radius:var(--radius);text-decoration:none;
    font-weight:500;transition:transform .15s ease
}
.cta:hover,.cta:focus{transform:translateY(-2px)}

/* ----- bundle grid ----- */
.bundle-grid{
    display:grid;gap:var(--gap);margin-top:var(--gap);
    width:100%;max-width:938px
}
@media(min-width:700px){.bundle-grid{grid-template-columns:repeat(3,1fr)}}

.bundle{
    background:#fff;border:2px solid var(--accent-light);border-radius:var(--radius);
    padding:calc(var(--gap)*1);display:flex;flex-direction:column;justify-content:space-between
}
.bundle h3{font-size:1.25rem;margin-bottom:.5rem;color:var(--accent)}
.price{font-size:1.1rem;font-weight:600;margin:-.25rem 0 .75rem}
.bundle ul{list-style:disc;margin-left:1rem}
.bundle li+li{margin-top:.35rem}
.bundle .cta{align-self:flex-start;margin-top:var(--gap)}