/* Meal Planning and Shopping List case study */
.planning-page .planning-hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:60px;padding-top:70px;padding-bottom:85px;min-height:760px}
.planning-page .planning-hero h2{font-weight:700;font-size:clamp(40px,4.6vw,72px);line-height:1.07;letter-spacing:-1px;margin:22px 0 26px;max-width:700px}
.planning-hero .case-deck{max-width:470px;margin-top:26px;font-size:20px;line-height:1.6}
.planning-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.planning-phones{display:flex;align-items:center;justify-content:center;gap:24px;padding:32px;background:#e8dfd2;border-radius:10px;overflow:hidden}
.planning-phones .planning-phone{width:44%;height:auto;min-width:0;filter:drop-shadow(0 16px 15px #35291e25)}
.planning-phones .planning-phone:first-child{transform:translateY(-12px) rotate(-5deg)}
.planning-phones .planning-phone:last-child{transform:translateY(20px) rotate(5deg)}
.planning-page .case-meta{padding:36px 0 0;border-top:1px solid var(--line);border-bottom:0}
.planning-page .story>p:not(.eyebrow){max-width:790px}
.planning-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:38px}
.planning-steps>div,.planning-metric,.planning-ia>div{background:#222a2e;border-radius:var(--card-radius);padding:30px}
.planning-steps span{color:var(--accent);font-size:14px;display:block;margin-bottom:26px}
.planning-page .planning-steps h3{font-size:21px;margin-bottom:10px}
.planning-sketch{margin:40px 0 0}.planning-sketch img{display:block;width:100%;height:auto;border-radius:6px}.planning-sketch figcaption{font-size:14px;color:var(--muted);margin-top:12px}
.feature-demos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:40px}
.planning-page .launch-demo{width:100%;max-width:340px;margin:auto}.planning-page .launch-demo figcaption{font-size:16px;min-height:44px;display:flex;align-items:center;justify-content:center}
.feature-subhead{margin-top:65px;max-width:790px}.planning-page .feature-subhead h3{font-size:28px;margin-bottom:16px}
.planning-commerce{display:grid;grid-template-columns:1.6fr 1fr;gap:90px;align-items:center}.planning-commerce .planning-metric{margin-top:30px}
.planning-results,.planning-ia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:35px}.planning-metric strong{display:block;font-size:54px;line-height:1.1;letter-spacing:-1px}.planning-metric p{margin:8px 0 0;line-height:1.5}
.planning-metric{transition:transform 180ms ease}.planning-metric:hover{transform:translateY(-3px)}
.planning-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}.planning-tabs span{padding:9px 11px;border:1px solid #596167;border-radius:6px;font-size:14px}.planning-tabs .active{background:#eef5ed;color:#172219;border-color:#eef5ed}.planning-ia .ia-detail{font-size:15px;line-height:1.6;margin-top:24px}
@media(max-width:1000px){.planning-page .planning-hero{gap:30px;min-height:auto}.planning-phones{padding:28px 10px;gap:12px}.feature-demos{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}.planning-commerce{gap:35px}}
@media(max-width:700px){.planning-page .planning-hero{grid-template-columns:1fr;padding-top:40px;padding-bottom:45px}.planning-page .planning-hero h2{font-size:42px}.planning-phones{max-width:480px;margin-top:20px;padding:38px 20px}.planning-steps,.planning-results,.planning-ia,.planning-commerce{grid-template-columns:1fr}.feature-demos{grid-template-columns:1fr}.planning-page .case-meta{gap:24px}.planning-metric strong{font-size:44px}.planning-steps>div,.planning-metric,.planning-ia>div{padding:24px}.planning-commerce{gap:35px}}
@media(prefers-reduced-motion:reduce){.planning-metric{transition:none}.planning-metric:hover{transform:none}}

.planning-sketch img{max-height:600px;object-fit:contain;background:#222328}

.planning-page .launch-demo{padding:0;background:transparent;border-radius:0}

/* Research and customer feedback from the updated feature presentation. */
.planning-research{margin-top:32px;border:1px solid var(--line);border-radius:var(--card-radius)}
.planning-research summary{padding:20px 24px;cursor:pointer;font-weight:500}
.planning-research summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.planning-research-body{padding:8px 24px 28px}.planning-research-body h3{margin:12px 0 20px;font-size:28px}
.planning-research ol{padding-left:24px;display:grid;gap:20px;margin-top:28px}.planning-research h4{margin:0 0 6px;font-size:18px}.planning-research li p{margin:0;color:var(--muted)}
.planning-review{margin:36px 0 0;padding:28px 32px;border-left:2px solid var(--accent);background:#222a2e;border-radius:var(--card-radius)}
.planning-review figcaption{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}
.planning-review blockquote{margin:14px 0 0;font-size:20px;line-height:1.65;max-width:850px}
.planning-commerce>.planning-review{grid-column:1/-1;margin-top:0}
@media(max-width:700px){.planning-review{padding:24px}.planning-review blockquote{font-size:18px}}

.planning-page .feature-demos{align-items:start}.planning-page .feature-demos .launch-demo{margin:0 auto}

/* Use the portfolio’s original black case-study background. */
.planning-page{isolation:isolate;background:var(--bg)}

/* Opening cover with static phone screens. */
.planning-page>.site-header{position:absolute;inset:0 0 auto;z-index:5;border-bottom:0}
.planning-motion-cover{height:100svh;min-height:560px;position:relative}
.planning-cover-caption{position:absolute;bottom:86px;width:100%;padding:0 24px;text-align:center}
.planning-cover-caption h1{font-size:clamp(24px,2.5vw,40px);font-weight:600;margin-top:12px;letter-spacing:-1px}
.planning-cover-next{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);padding:10px}
.planning-phone-slot{width:100%;aspect-ratio:1}
.planning-phone-slot .planning-phones{width:100%;height:100%;max-width:none;margin:0;padding:32px;background:transparent;overflow:visible;transform-origin:top left}
.planning-phones.is-floating{position:fixed;left:0;top:0;z-index:4;pointer-events:none;will-change:transform}
.planning-phone-slot .planning-phones .planning-phone{max-height:90%;object-fit:contain}
@media(prefers-reduced-motion:no-preference){
 .planning-cover-caption{animation:planningCopyIn .8s ease-out .2s both}
}
@keyframes planningCopyIn{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.planning-motion-cover{display:none}.planning-page>.site-header{position:relative}}

/* Reuse the source demos’ minimal white phone frames in the cover. */
.planning-phones .planning-phone{aspect-ratio:423 / 856;flex:0 0 44%;position:relative}
.planning-phone iframe{color-scheme:light;display:block;width:100%;height:100%;position:absolute;inset:0;border:0;background:transparent;pointer-events:none}

.planning-case-photo{margin-top:55px;margin-bottom:0;container-type:inline-size}.planning-case-photo img{width:100%;height:calc(60cqw + 40px);object-fit:cover;object-position:center top;border-radius:8px}

.planning-process-photos{display:grid;grid-template-columns:1.69fr 1fr;gap:24px;margin-top:32px;align-items:start}.planning-process-photos img{width:100%;height:auto;border-radius:8px}@media(max-width:700px){.planning-process-photos{grid-template-columns:1fr;gap:20px}}

/* Exclude the pale final pixel column in the fridge photo export. */
.planning-process-fridge{overflow:hidden;border-radius:8px;aspect-ratio:1333/1000}
.planning-process-photos .planning-process-fridge img{display:block;width:calc(100% * 1334 / 1333);max-width:none;height:auto;border-radius:0}