.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.features{padding:0 6% 100px;background:radial-gradient(ellipse at 73% 38%,#6d378b33,transparent 50%),var(--bg)}
.plan-scene{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:850px;height:100svh;max-height:1250px;gap:40px}
.plan-scene::before{content:"";position:absolute;inset:0 calc(-6% / .88);z-index:-1;pointer-events:none;background:linear-gradient(0deg,var(--bg),transparent 26%,transparent 82%,var(--bg)),linear-gradient(90deg,#100d1370,#100d1320 65%),url("assets/burger-background.png") center/cover no-repeat;mask-image:linear-gradient(to bottom,#000 0%,#000 65%,#000b 78%,#0003 91%,transparent 100%)}
.features-heading{margin:12px 0 22px}
.features-heading h2{margin-bottom:12px}
.features-heading p{margin:0}
.plan-copy h2{font-size:clamp(48px,5.5vw,90px);line-height:1.08;margin-bottom:28px}
.plan-copy p{font-size:clamp(18px,1.7vw,25px);line-height:1.6;color:var(--muted)}
@media(min-width:701px){.plan-visual{grid-column:1;grid-row:1}.plan-copy{grid-column:2;grid-row:1;text-align:left}}
.plan-visual{position:relative;height:700px;display:grid;place-items:center;isolation:isolate;overflow:clip;overflow-clip-margin:35px}
.plan-device::after{content:"";position:absolute;inset:48% 5% 30%;border:1px solid #bc8bff;border-radius:16px;background:#9b56ff15;box-shadow:0 0 26px #a85cff55;opacity:var(--arrival,0);pointer-events:none}
.plan-visual::before{content:"";position:absolute;width:80%;height:80%;border-radius:50%;background:radial-gradient(ellipse,#8642ca36,transparent 65%);z-index:-1}
.plan-device{width:270px;margin:0;border:3px solid #736578;padding:7px;border-radius:40px;background:#17131c;transform:perspective(1200px) rotateY(-15deg) rotateZ(9deg);box-shadow:30px 40px 60px #0008}
.plan-device img{width:100%;height:auto;border-radius:30px}
.plan-meal{position:absolute;left:0;top:54%;display:flex;align-items:center;gap:16px;padding:16px;border:1px solid #be8bff;border-radius:20px;background:linear-gradient(120deg,#39224ef5,#211629f5);box-shadow:0 0 30px #9455dd45,0 20px 40px #0006;transform:rotate(-4deg);max-width:100%}
.plan-meal{transform-origin:left center}
@media(min-width:701px){.plan-meal{transform:rotate(-4deg) scale(1.4)}}
.plan-meal>img{width:84px;height:84px;object-fit:cover;border-radius:12px}
.plan-meal>div{display:flex;flex-direction:column;gap:8px}
.plan-meal-label{font-size:9px;letter-spacing:.12em;color:#c899ff}
.plan-meal strong{font-size:17px;line-height:1.25;font-weight:600}
.plan-meal>div>span:last-child{font-size:11px;color:#c8b9d4}
.plan-check{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#8b46ff;font-size:15px;margin:0 4px}
.feature-grid{gap:0;position:relative;padding-top:0}
.feature{border:0;border-radius:0;background:none;box-shadow:none;padding:20px clamp(24px,3vw,50px);transition:none}
.feature+.feature{border-left:1px solid #a774dc80}
.feature:hover{transform:none}
.feature svg{width:72px;height:72px;margin-bottom:30px;filter:none}
.feature h3{font-size:26px}
@media(max-width:1050px) and (min-width:701px){.plan-scene{gap:10px}.plan-device{width:240px}.plan-meal{left:-30px;gap:10px;padding:12px}.plan-meal>img{width:65px;height:65px}.feature{padding-inline:22px}.feature h3{font-size:22px}}
@media(max-width:700px){
  .features{padding:0 24px 20px}
  .plan-scene{grid-template-columns:1fr;grid-template-rows:auto auto;height:auto;min-height:0;max-height:none;gap:5px;padding-top:45px}
  .plan-scene::before{inset:0 -24px;background-position:center,center,58% center}
  .features-heading{margin:10px 0 12px}
  .features-heading h2{font-size:32px;margin-bottom:10px}
  .plan-copy{text-align:center}
  .plan-copy h2{font-size:46px;margin-bottom:20px}
  .plan-copy p{font-size:17px;margin-bottom:0}
  .plan-visual{height:540px}
  .plan-device{width:230px;border-radius:33px}
  .plan-device img{border-radius:23px}
  .plan-meal{left:0;top:53%;gap:10px;padding:12px;width:100%;transform:rotate(-3deg)}
  .plan-meal>img{width:64px;height:72px}
  .plan-meal strong{font-size:16px}
  .plan-check{margin-left:auto;flex-shrink:0}
  .feature-grid{padding-top:0;gap:0;max-width:440px}
  .feature{padding:26px 8px;text-align:center}
  .feature ul{display:table;margin-inline:auto}
  .feature li{padding-left:0}
  .feature li::before{position:static;display:inline-block;margin:0 9px 3px 0}
  .feature+.feature{border-left:0;border-top:1px solid #a774dc80}
  .feature svg{width:68px;height:68px;margin-bottom:24px}
  .feature h3{font-size:25px}
}
