:root {
  --violet: #5055a8;
  --blue: #2184d0;
  --ink: #343a52;
  --pale: #f5f7fc;
  --light-blue: #eaf4ff;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); font-family: Arial, Helvetica, sans-serif; background: white; }
.container { width: min(1080px, calc(100% - 48px)); margin: 0 auto; }
.hero { position: relative; overflow: hidden; min-height: 228px; padding: 30px 0 25px; background: var(--violet); color: white; }
.hero__accent { position: absolute; right: -12px; top: 0; width: 280px; height: 100%; background: var(--blue); clip-path: polygon(18% 0, 100% 0, 100% 100%); }
.hero .container { position: relative; z-index: 1; }
.brand { display: flex; align-items: center; gap: 20px; font-size: 28px; font-weight: 800; letter-spacing: .16em; }
.brand__logo { width: 100px; height: 62px; object-fit: contain; }
.brand__divider { width: 2px; height: 46px; background: rgba(255,255,255,.28); }
.eyebrow { margin: 24px 0 10px; color: #c4cbf0; font-size: 16px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(38px, 5vw, 56px); font-weight: 900; letter-spacing: -.045em; line-height: 1; text-transform: uppercase; }
h1 span { color: #acb3ed; }
.intro { display: grid; min-height: 585px; place-items: center; padding: 80px 0; background: var(--pale); border-bottom: 1px solid #e0e5f1; text-align: center; }
.intro__content { display: grid; justify-items: center; }
.status { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 28px; padding: 12px 26px; border: 2px solid #cfe3fb; border-radius: 999px; color: var(--blue); background: #edf6ff; font-size: 16px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.status span { width: 13px; height: 13px; border-radius: 50%; background: var(--blue); }
.intro h2 { margin: 0; color: var(--violet); font-size: clamp(32px, 4vw, 53px); font-weight: 900; letter-spacing: -.055em; line-height: 1.07; }
.intro h2 span { color: var(--blue); }
.intro__email { margin-top: 58px; color: var(--blue); font-size: clamp(24px, 2.35vw, 34px); font-weight: 900; letter-spacing: -.04em; line-height: 1; text-decoration: none; }
.intro__email:hover, .intro__email:focus-visible { text-decoration: underline; }
.ordering { padding: 30px 0 26px; }
.ordering > h2 { display: flex; align-items: center; gap: 16px; margin: 0 0 19px; color: var(--violet); font-size: clamp(25px, 3vw, 39px); letter-spacing: -.04em; line-height: 1.1; }
.cart { display: grid; width: 55px; height: 55px; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--violet); color: white; font-family: Georgia, serif; font-size: 43px; font-weight: 700; transform: rotate(180deg); }
.ordering__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.card { min-height: 190px; padding: 22px 30px; border-radius: 20px; }
.card h3 { margin: 0 0 15px; font-size: 17px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.card--light { border: 3px solid #cfe3fb; background: #f4f9ff; }
.card--light h3 { color: var(--blue); }
.card ol { margin: 0; padding-left: 27px; font-size: 21px; line-height: 1.6; }
.card--violet { background: var(--violet); color: white; }
.card--violet h3 { color: #c5cbf2; }
.card ul { margin: 0; padding: 0; list-style: none; font-size: 21px; line-height: 1.75; }
.card li::marker { font-weight: 800; }
.card--violet li::before { content: '✓'; margin-right: 15px; color: #c6cdf4; font-weight: 900; }
footer { position: relative; overflow: hidden; min-height: 130px; background: var(--violet); color: white; }
.footer__accent { position: absolute; left: 0; width: 330px; height: 100%; background: var(--blue); clip-path: polygon(0 0, 62% 0, 100% 100%, 0 100%); }
.footer__content { position: relative; z-index: 1; display: flex; min-height: 130px; align-items: center; justify-content: flex-end; gap: 26px; }
.footer__content p { margin: 0; font-size: 19px; font-weight: 700; }
footer a { color: white; text-decoration: none; }
footer a:hover, footer a:focus-visible { text-decoration: underline; }
.footer__logo { width: 86px; height: 53px; object-fit: contain; }

/* Keep the complete one-page announcement visible on standard desktop screens. */
@media (min-width: 721px) and (min-height: 700px) {
  body {
    display: grid;
    min-height: 100svh;
    grid-template-rows: clamp(160px, 19vh, 228px) minmax(310px, 1fr) auto clamp(92px, 11vh, 130px);
  }

  .hero { min-height: 0; padding: 22px 0; }
  .eyebrow { margin-top: 17px; }
  .intro { min-height: 0; padding: 28px 0; }
  .status { margin-bottom: clamp(18px, 3vh, 28px); }
  .intro__email { margin-top: clamp(28px, 4vh, 58px); }
  .ordering { padding: 18px 0; }
  .ordering > h2 { margin-bottom: 14px; }
  .card { min-height: 0; padding: 18px 30px; }
  .card h3 { margin-bottom: 8px; }
  .card ol, .card ul { line-height: 1.45; }
  footer, .footer__content { min-height: 0; }
}

@media (min-width: 721px) and (max-height: 820px) {
  .brand { font-size: 24px; }
  .brand__logo { width: 88px; height: 55px; }
  .eyebrow { font-size: 14px; }
  .intro h2 { font-size: clamp(31px, 4.4vw, 45px); }
  .intro__email { font-size: clamp(22px, 2.2vw, 29px); }
  .ordering > h2 { font-size: 31px; }
  .card ol, .card ul { font-size: 18px; }
}

@media (max-width: 720px) {
  .container { width: min(100% - 32px, 540px); }
  .hero { min-height: auto; padding: 24px 0 34px; }
  .hero__accent { width: 150px; opacity: .9; }
  .brand { gap: 10px; font-size: 18px; letter-spacing: .1em; }
  .brand__logo { width: 78px; }
  .brand__divider { height: 34px; }
  .eyebrow { margin-top: 30px; font-size: 12px; letter-spacing: .17em; }
  .intro { min-height: 430px; padding: 58px 0; }
  .status { margin-bottom: 24px; padding: 10px 17px; font-size: 12px; }
  .intro h2 br { display: none; }
  .intro__email { margin-top: 34px; font-size: 24px; }
  .ordering { padding: 32px 0; }
  .ordering__cards { grid-template-columns: 1fr; gap: 16px; }
  .card { min-height: auto; padding: 22px; border-radius: 16px; }
  .card ol, .card ul { font-size: 18px; }
  footer { min-height: 116px; }
  .footer__accent { width: 170px; }
  .footer__content { min-height: 116px; gap: 10px; }
  .footer__content p { font-size: 14px; text-align: right; }
  .footer__logo { width: 67px; flex: 0 0 auto; }
}