* { box-sizing: border-box; }
    html, body { margin: 0; }
    body { font-family: var(--font-body); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; }
    a { color: inherit; }
    a:hover { color: inherit; }
    .px { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
    .hp-h1 { font-family: var(--font-headline); text-transform: uppercase; line-height: 1.02; letter-spacing: -0.015em; margin: 0; font-size: clamp(36px, 4.6vw, 62px); }
    .hp-h2 { font-family: var(--font-headline); text-transform: uppercase; font-size: clamp(26px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.01em; margin: 0; color: var(--text-strong); }
    .hp-h3 { font-family: var(--font-headline); text-transform: uppercase; font-size: 20px; letter-spacing: -0.005em; margin: 0; color: var(--text-strong); }
    .hp-body { font-size: 16px; line-height: 1.6; color: var(--text-muted); margin: 0; }
    .hp-eyebrow { font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--stor-red); margin-bottom: 14px; }
    .hp-eyebrow--light { color: var(--stor-yellow); }
    .hp-note { margin-top: 26px; font-size: 15px; color: var(--text-subtle); font-style: italic; max-width: 64ch; }
    .hp-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.93); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-subtle); }
    .hp-header__in { display: flex; align-items: center; height: 66px; }
    .hp-logo { height: 28px; display: block; }
    .hp-nav { display: flex; align-items: center; gap: 26px; margin-left: 34px; }
    .hp-nav a { font-size: 15px; font-weight: 500; color: var(--text-body); text-decoration: none; }
    .hp-nav a:hover, .hp-nav a[aria-current="page"] { color: var(--stor-red); }
    .hp-header__right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
    .hp-lane { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--text-muted); text-decoration: none; border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 7px 14px; background: transparent; transition: color .15s, border-color .15s, background .15s; }
    .hp-lane:hover { color: var(--stor-red); border-color: var(--stor-red); background: rgba(192,22,22,.05); }
    .hp-burger { display: none; background: none; border: 0; cursor: pointer; color: var(--text-strong); padding: 4px; }
    .hp-hero { background: var(--stor-red); color: #fff; padding: clamp(52px, 7vw, 92px) 0; overflow: hidden; }
    .hp-hero__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }
    .hp-hero .hp-h1 { color: #fff; max-width: 15ch; }
    .hp-hero__sub { font-size: 19px; line-height: 1.6; color: rgba(255,255,255,.92); margin: 24px 0 32px; max-width: 48ch; }
    .hp-hero__cta.stor-btn { background: #fff; color: var(--stor-red); border-color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.14); }
    .hp-hero__cta.stor-btn:hover { background: #f2e7e4; }
    /* lid reveal */
    /* modified-atmosphere concept image */
    .mafx { position: relative; aspect-ratio: 4/3.4; border-radius: var(--radius-lg); background: radial-gradient(125% 115% at 50% 12%, #a81717 0%, var(--red-700) 52%, #660e0e 100%); box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 34px; }
    .mafx__jar { position: relative; width: 70%; height: 60%; border-radius: 12px 12px 18px 18px; overflow: hidden; background: linear-gradient(118deg, rgba(255,255,255,.22), rgba(255,255,255,.05) 46%, rgba(255,255,255,.15)); border: 2px solid rgba(255,255,255,.55); box-shadow: inset 0 0 26px rgba(255,255,255,.16), inset 0 -14px 26px rgba(0,0,0,.22), 0 14px 30px rgba(0,0,0,.28); }
    .mafx__lid { position: absolute; left: -6%; right: -6%; top: -7%; height: 15%; border-radius: 12px 12px 6px 6px; background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.28)); border: 2px solid rgba(255,255,255,.6); box-shadow: 0 6px 14px rgba(0,0,0,.22); z-index: 4; }
    .mafx__lid::after { content: ""; position: absolute; inset: 4px; border-radius: 8px 8px 4px 4px; border: 2px solid rgba(192,22,22,.8); }
    .mafx__food { position: absolute; left: 6%; right: 6%; bottom: 6%; top: 54%; border-radius: 6px 6px 10px 10px; background: radial-gradient(circle at 18% 34%, #a6cd6f 0 5%, transparent 6%), radial-gradient(circle at 40% 26%, #7fae53 0 4.5%, transparent 5.5%), radial-gradient(circle at 60% 34%, #93bd60 0 5%, transparent 6%), radial-gradient(circle at 80% 28%, #6fa048 0 4.5%, transparent 5.5%), radial-gradient(circle at 30% 64%, #8bb857 0 5%, transparent 6%), radial-gradient(circle at 52% 70%, #ffd54a 0 3.5%, transparent 4.5%), radial-gradient(circle at 72% 64%, #a6cd6f 0 4.5%, transparent 5.5%), linear-gradient(180deg, #7fae53, #5f9040); box-shadow: inset 0 -12px 22px rgba(0,0,0,.28), inset 0 10px 16px rgba(255,255,255,.16); }
    .mafx__gas { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe697, var(--stor-yellow) 70%); box-shadow: 0 0 9px rgba(255,199,28,.55); z-index: 2; }
    .mafx__o2 { position: absolute; z-index: 3; font-family: var(--font-body); font-size: 12px; font-weight: 700; color: rgba(255,255,255,.92); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.55); border-radius: 20px; padding: 2px 8px; }
    .mafx__glass { position: absolute; inset: 0; border-radius: 12px 12px 18px 18px; pointer-events: none; background: linear-gradient(102deg, rgba(255,255,255,.4) 0 7%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, rgba(255,255,255,.2) 100%); z-index: 5; }
    .mafx__cap { color: rgba(255,255,255,.92); font-size: 15px; font-weight: 600; text-align: center; line-height: 1.5; max-width: 38ch; }
    .mafx__cap b { color: var(--stor-yellow); font-weight: 700; }
    .hp-sec { padding: clamp(52px, 7vw, 92px) 0; }
    .hp-sec--tan { background: var(--tan-100); }
    .hp-head { max-width: 760px; margin-bottom: 46px; }
    .hp-head .hp-h2 { max-width: 22ch; }
    .hp-head .hp-body { margin-top: 16px; max-width: 62ch; }
    .hp-find { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .hp-findcard { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
    .hp-findcard__icon { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--red-50); color: var(--stor-red); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
    .hp-findcard .hp-h3 { margin-bottom: 10px; }
    .hp-findcard p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-muted); }
    .hp-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); background: #fff; }
    .hp-vs__col { padding: 34px 32px; }
    .hp-vs__col--stor { background: var(--red-50); border-right: 1px solid var(--red-200); }
    .hp-vs__tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; }
    .hp-vs__name { font-family: var(--font-headline); text-transform: uppercase; font-size: 18px; letter-spacing: -0.005em; }
    .hp-vs__col--stor .hp-vs__name { color: var(--stor-red); }
    .hp-vs__col--plain .hp-vs__name { color: var(--text-subtle); }
    .hp-vs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
    .hp-vs li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--text-muted); }
    .hp-vs__col--stor li svg { color: var(--stor-red); flex: none; margin-top: 2px; }
    .hp-vs__col--plain li svg { color: var(--neutral-400); flex: none; margin-top: 2px; }
    .flav { background: var(--neutral-900); color: #fff; }
    .flav .hp-eyebrow { color: var(--stor-yellow); }
    .flav .hp-h2 { color: #fff; }
    .flav .hp-body { color: rgba(255,255,255,.82); }
    .flav__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }
    .flav__art { position: relative; aspect-ratio: 4/3.2; border-radius: var(--radius-lg); background: radial-gradient(125% 115% at 50% 12%, #a81717 0%, var(--red-700) 52%, #660e0e 100%); box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .flav__art::before { content: ""; position: absolute; width: 68%; height: 68%; border-radius: 50%; background: radial-gradient(circle, rgba(255,199,28,.30), rgba(255,199,28,0) 62%); filter: blur(22px); pointer-events: none; }
    .flav__jar { position: relative; width: 45%; height: 66%; border: 2px solid rgba(255,255,255,.72); border-radius: 16px 16px 22px 22px; background: linear-gradient(105deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 42%, rgba(255,255,255,.11)); box-shadow: inset 0 0 22px rgba(255,255,255,.14), inset 0 -12px 26px rgba(0,0,0,.22), 0 14px 34px rgba(0,0,0,.30); overflow: hidden; }
    .flav__shine { position: absolute; top: 5%; left: 11%; width: 15%; height: 82%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 72%); filter: blur(2px); z-index: 4; pointer-events: none; }
    .flav__marinade { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(180deg, #ffd54a 0%, var(--stor-yellow) 38%, #dda12b 100%); box-shadow: inset 0 14px 20px rgba(255,255,255,.22); z-index: 1; }
    .flav__marinade::after { content: ""; position: absolute; top: -6px; left: 0; right: 0; height: 13px; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,213,74,.65)); transform-origin: center; }
    .flav__food { position: absolute; left: 50%; top: 54%; transform: translate(-50%,-50%); width: 56%; height: 40%; border-radius: 10px; z-index: 2; background: linear-gradient(160deg,#8bb45c 0%,#7fae53 42%,#5f9040 100%); background-blend-mode: normal; box-shadow: inset 0 -9px 16px rgba(0,0,0,.28), inset 0 6px 12px rgba(255,255,255,.18); border: 1px solid rgba(0,0,0,.20); }
    .flav__food::after { content: ""; position: absolute; inset: 0; border-radius: 10px; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.35), rgba(255,255,255,0) 42%), radial-gradient(circle at 70% 66%, rgba(0,0,0,.18), rgba(0,0,0,0) 46%); }
    .flav__bubble { position: absolute; bottom: 24%; width: var(--s,9px); height: var(--s,9px); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.98), rgba(255,255,255,.55) 60%, rgba(255,255,255,.15)); box-shadow: 0 0 6px rgba(255,255,255,.5); opacity: 0; z-index: 3; }
    .hp-pilot { background: var(--stor-red); color: #fff; padding: clamp(52px, 7vw, 84px) 0; text-align: center; }
    .hp-pilot .hp-h2 { color: #fff; }
    .hp-pilot__sub { font-size: 17px; color: rgba(255,255,255,.92); margin: 16px auto 28px; max-width: 56ch; }
    .hp-footer { background: var(--neutral-900); color: rgba(255,255,255,.72); padding: 44px 0 30px; }
    .hp-fnav { display: flex; flex-wrap: wrap; gap: 14px 28px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.14); }
    .hp-fnav > a { font-size: 14px; text-decoration: none; color: rgba(255,255,255,.72); }
    .hp-fnav > a:hover { color: var(--stor-yellow); }
    .hp-flane-row { display: flex; justify-content: flex-end; padding: 24px 0; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
    .hp-flane { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85) !important; text-decoration: none; border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-pill); padding: 8px 15px; transition: color .15s, border-color .15s, background .15s; }
    .hp-flane:hover { color: var(--stor-yellow) !important; border-color: var(--stor-yellow); background: rgba(255,255,255,.06); }
    .hp-fbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 24px; }
    .hp-fbar__logo { height: 24px; }
    .hp-fbar__tag { font-family: var(--font-headline); text-transform: uppercase; color: #fff; font-size: 13px; }
    .hp-fbar__marks { display: flex; gap: 8px; }
    .hp-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); background: rgba(255,255,255,.08); border-radius: var(--radius-pill); padding: 8px 14px; }
    .hp-copy { color: rgba(255,255,255,.5); font-size: 13px; width: 100%; margin-top: 4px; }
    @media (prefers-reduced-motion: no-preference) {
      .flav__marinade { animation: flavFill 5.5s ease-in-out infinite; }
      .flav__marinade::after { animation: flavSurface 3.1s ease-in-out infinite; }
      .flav__food { animation: flavBob 5.5s ease-in-out infinite; }
      .flav__bubble { animation: flavBub 5.5s ease-in infinite; }
    }
    @keyframes flavFill { 0%,14% { height: 22%; } 52%,78% { height: 64%; } 100% { height: 22%; } }
    @keyframes flavSurface { 0%,100% { transform: scaleY(1) translateY(0); } 50% { transform: scaleY(.62) translateY(1px); } }
    @keyframes flavBob { 0%,100% { transform: translate(-50%,-50%); } 50% { transform: translate(-50%,-56%); } }
    @keyframes flavBub { 0% { transform: translate(0,0) scale(.7); opacity: 0; } 10% { opacity: .95; } 45% { transform: translate(6px,-72px) scale(1); opacity: .9; } 72% { transform: translate(-4px,-122px) scale(1.05); opacity: .45; } 100% { transform: translate(3px,-150px) scale(1.1); opacity: 0; } }
    @media (max-width: 920px) {
      .hp-nav { display: none; }
      .hp-burger { display: block; }
      .hp-hero__grid, .flav__grid { grid-template-columns: 1fr; }
      .hp-find, .hp-vs { grid-template-columns: 1fr; }
      .hp-vs__col--stor { border-right: 0; border-bottom: 1px solid var(--red-200); }
    }