:root {
  color-scheme: light;
  --page: #F4F6F4;
  --ink: #06301E;
  --green: #0E7C4A;
  --wordmark: #0B6A3F;
  --lime: #C6F36B;
  --text: #1C211E;
  --muted: #4C544E;
  --line: #687069;
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--page); }
body { margin: 0; color: var(--text); background: var(--page); font-family: "Manrope", Arial, sans-serif; }
a { color: inherit; }
.page {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  padding: 40px 64px 48px;
  overflow: clip;
  background: var(--page);
}
.site-header {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 43px;
  flex: 0 0 43px;
}
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.brand__mark { width: 40px; height: 40px; display: block; }
.brand__wordmark { font: 800 28px/36px "Onest", Arial, sans-serif; letter-spacing: -0.7px; color: var(--wordmark); }
.social { display: flex; align-items: center; gap: 16px; }
.social__label { color: var(--muted); font: 600 16px/24px "Manrope",Arial,sans-serif; white-space: nowrap; }
.social__links { display: flex; align-items: center; gap: 8px; }
.social__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 43px;
  padding: 8px 12px 8px 16px;
  border: 1.5px solid var(--line); border-radius: 999px;
  text-decoration: none; font: 600 16px/24px "Manrope",Arial,sans-serif;
  color: var(--text); background: transparent; white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease;
}
.social__link[href]:hover { background: #E1E9E2; border-color: #0E7C4A; }
.social__link:focus-visible { outline: 3px solid #0E7C4A; outline-offset: 3px; }
.social__link:not([href]) { cursor: not-allowed; }
.social__arrow { width: 20px; height: 20px; flex: 0 0 20px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* The hero only places the composition. All corner offsets belong to .tag-scene. */
.hero {
  --scene-scale: 1;
  --tag-width: 640px;
  --tag-height: 463px;
  --scene-top-space: 140px;
  --scene-bottom-space: 135px;
  position: relative;
  flex: 1 0 auto;
  min-height: calc((var(--tag-height) + var(--scene-top-space) + var(--scene-bottom-space)) * var(--scene-scale));
}
.tag-scene {
  position: absolute;
  isolation: isolate;
  left: 50%;
  top: 50%;
  width: var(--tag-width);
  height: var(--tag-height);
  transform: translate(-50%, -50%) scale(var(--scene-scale));
  transform-origin: center;
}
.illustration {
  position: absolute;
  display: block;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  height: auto;
  object-fit: contain;
}
.illustration--bell {
  width: 300px;
  left: -148px;
  top: -122px;
}
.illustration--basket {
  width: 300px;
  right: -145px;
  bottom: -105px;
  z-index: 5;
}
.price-tag {
  position: absolute;
  z-index: 3;
  inset: 0;
  transform: rotate(-4deg);
  width: 100%;
  height: 100%;
  padding: 28px 32px;
  display: flex; flex-direction: column; align-items: stretch; gap: 16px;
  border-radius: 16px;
  background: var(--lime);
  color: var(--ink);
  box-shadow: 0 20px 40px rgba(5, 48, 31, .18);
}
.price-tag__top { display:flex; justify-content:space-between; align-items:center; height:40px; flex:0 0 40px; }
.brand--tag .brand__wordmark { color: var(--ink); }
/* The brand SVG is green like the header logo; darken it on the lime card. */
.brand--tag .brand__mark { filter: brightness(.45) saturate(.9); }
.price-tag__hole { width:20px; height:20px; border-radius:50%; background:var(--page); flex-shrink:0; }
.price-tag__product { display:flex; flex-direction:column; gap:2px; flex:0 0 54px; }
.price-tag__product h1 { font: 700 20px/28px "Manrope",Arial,sans-serif; margin:0; }
.price-tag__product p { font: 400 16px/24px "Manrope",Arial,sans-serif; margin:0; }
.countdown { display:flex; align-items:flex-start; gap:20px; flex:0 0 200px; }
.countdown__days { display:block; font: 800 232px/200px "Onest","Arial Black",Arial,sans-serif; letter-spacing:-10px; font-variant-numeric:tabular-nums; min-width:258px; white-space:nowrap; }
.countdown__days--long { font-size: 165px; letter-spacing: -6px; min-width:258px; }
.countdown__rest { padding-top:24px; display:flex; flex-direction:column; gap:8px; white-space:nowrap; }
.countdown__hms { font:800 48px/48px "Onest","Arial Black",Arial,sans-serif; letter-spacing:-1.5px; font-variant-numeric:tabular-nums; }
.countdown__label { font:500 20px/30px "Manrope",Arial,sans-serif; }
.price-tag__divider { flex:0 0 1px; height:1px; width:100%; background:rgba(6,48,30,.68); }
.price-tag__footer { display:flex; justify-content:space-between; align-items:flex-end; height:48px; flex:0 0 48px; }
.price-tag__date-block { display:flex; flex-direction:column; }
.price-tag__date-block time { font:700 16px/24px "JetBrains Mono",monospace; }
.price-tag__date-block span { font:400 16px/24px "JetBrains Mono",monospace; }
.barcode { width:143px; height:36px; flex-shrink:0; background:repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 3px, var(--ink) 3px 5px, transparent 5px 8px, var(--ink) 8px 9px, transparent 9px 11px, var(--ink) 11px 14px, transparent 14px 17px, var(--ink) 17px 18px, transparent 18px 21px); }
.site-footer { flex: 0 0 auto; min-height:30px; display:flex; justify-content:center; align-items:center; position:relative; z-index:8; }
.site-footer__lead { margin:0; max-width:100%; color:var(--muted); text-align:center; font:500 20px/30px "Manrope",Arial,sans-serif; }
.social--footer { display:none; }
.sr-only { border:0; clip:rect(0,0,0,0); clip-path: inset(50%); height:1px; overflow:hidden; padding:0; position:absolute; white-space:nowrap; width:1px; }

@media (min-width: 751px) and (max-width: 1220px) {
  .page { padding: 30px 40px 36px; }
  .site-footer__lead { font-size:17px; }
  .hero { --scene-scale: .84; }
  .social__label { font-size:14px; }
  .social__link { font-size:14px; padding:6px 10px 6px 13px; min-height:40px; }
}
@media (min-width: 751px) and (max-height: 780px) {
  .page { padding-top:22px; padding-bottom:24px; }
  .hero { --scene-scale: .8; }
}

@media (min-width: 751px) and (max-width: 1024px) {
  .hero { --scene-scale: .70; }
}

@media (max-width: 750px) {
  .page { padding: 16px 16px 24px; }
  .site-header { flex: 0 0 40px; height:40px; }
  .social--header { display:none; }
  .hero {
    --tag-width: 340px;
    --tag-height: 295px;
    --scene-top-space: 70px;
    --scene-bottom-space: 110px;
  }
  /* On phones the whole composition sits near the top, with free space below. */
  .tag-scene { top: calc((var(--scene-top-space) + var(--tag-height) / 2) * var(--scene-scale)); }
  .illustration--bell { width:170px; left:-80px; top:-30px; }
  .illustration--basket { width:170px; right:-55px; bottom:-85px; }
  .price-tag {
    padding:18px 20px; gap:12px; border-radius:12px;
  }
  .price-tag__top { flex:0 0 32px; height:32px; }
  .brand--tag { gap:6.4px; }
  .brand--tag .brand__mark { width:32px;height:32px; }
  .brand--tag .brand__wordmark { font-size:22.4px; line-height:29px; letter-spacing:-.56px; }
  .price-tag__hole { width:14px;height:14px; }
  .price-tag__product { flex:0 0 46px; }
  .price-tag__product h1 { font-size:16px; line-height:24px; font-weight:600; }
  .price-tag__product p { font-size:14px; line-height:20px; }
  .countdown { flex:0 0 88px; gap:12px; }
  .countdown__days { font-size:96px; line-height:88px; letter-spacing:-4px; min-width:107px; }
  .countdown__days--long { font-size:65px; min-width:107px; letter-spacing:-2px; }
  .countdown__rest { padding-top:8px; gap:4px; }
  .countdown__hms { font-size:28px; line-height:32px; letter-spacing:-.5px; }
  .countdown__label { font-size:16px; font-weight:600; line-height:24px; }
  .price-tag__footer { flex:0 0 44px; height:44px; }
  .price-tag__date-block time { font-size:16px;line-height:24px; }
  .price-tag__date-block span { font-size:13px;line-height:20px; }
  .barcode { width:101px;height:26px; }
  .site-footer { flex-direction:column; flex:0 0 auto; min-height:143px; justify-content:center; gap:16px; }
  .site-footer__lead { font-weight:400; font-size:16px; line-height:24px; max-width:358px; }
  .social--footer { display:flex; flex-direction:column; gap:12px; }
}

@media (max-width:365px) {
  .hero { --scene-scale: .86; }
  .site-footer__lead { font-size: clamp(13px, 4vw, 16px); }
}
@media (max-width:750px) and (max-height:710px) {
  .page { padding-top:12px; padding-bottom:14px; }
  .hero { --scene-top-space: 55px; --scene-bottom-space: 105px; }
  .site-footer { flex-basis:auto; min-height:132px; gap:10px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none !important; }
}

/* Three social buttons: keep them legible at 390px and wrap on narrow phones. */
@media (max-width: 750px) {
  .social--footer { width: 100%; }
  .social--footer .social__links {
    max-width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 8px;
  }
  .social--footer .social__link {
    min-height: 42px;
    gap: 5px;
    padding: 7px 9px 7px 11px;
    font-size: 14px;
    line-height: 22px;
  }
  .social--footer .social__arrow { width: 18px; height: 18px; flex-basis: 18px; }
}