/* Feature pages (workout-plan-builder.html, meal-planning-app.html). Relies on tokens.css + base.css. Editorial: hairlines, square controls, no shadows. */
.display{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;line-height:1.06;text-wrap:balance}
.display em{font-style:italic;font-weight:400;color:var(--accent)}
.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:center;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:var(--s-2);text-decoration:none;font:600 20px/1 var(--font-display);letter-spacing:-.01em;min-height:var(--tap);color:var(--ink)}
.brand-mark{color:var(--accent)}

.page-hero{padding:var(--s-2) 0 var(--s-8)}
.page-grid{display:grid;gap:var(--s-7);grid-template-columns:minmax(0,1fr);justify-items:center}
.page-copy{display:flex;flex-direction:column;gap:var(--s-5);max-width:34rem;align-items:center;text-align:center}
.page-copy h1{font-size:clamp(34px,9vw,52px)}
.lead{font-size:18px;line-height:1.55;color:var(--ink-2);max-width:32em;text-wrap:pretty}
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-3);margin-top:var(--s-2)}
.badge{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 var(--s-4) 0 14px;border-radius:var(--r-2);background:var(--ink);color:#fff;text-decoration:none;transition:background var(--d-fast) var(--ease)}
.badge:hover{background:#34322e}
.badge-ic{width:26px;height:26px}
.badge span{display:flex;flex-direction:column;line-height:1.1}
.badge small{font:500 11px/1.2 var(--font-ui);opacity:.85}
.badge b{font:600 17px/1.2 var(--font-ui);letter-spacing:-.01em}
.note{font-size:14px;line-height:1.5;color:var(--ink-3)}
.phone{width:min(240px,70vw);padding:6px;border-radius:36px;background:var(--bezel);position:relative}
.phone img{width:100%;height:auto;aspect-ratio:720/1562;object-fit:cover;border-radius:30px;background:var(--video)}
.island{position:absolute;left:50%;width:28%;height:3.6%;transform:translateX(-50%);background:#000;border-radius:999px;top:calc(6px + 1.8%)}

.prose{max-width:38rem;margin:0 auto;padding:var(--s-2) var(--gutter) var(--s-9)}
.prose h2{font:500 26px/1.2 var(--font-display);letter-spacing:-.01em;margin:var(--s-8) 0 var(--s-3);padding-top:var(--s-5);border-top:1px solid var(--line);text-wrap:balance}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--ink-2);font-size:17px;line-height:1.65;margin:0 0 var(--s-4);text-wrap:pretty}
.prose a{color:var(--accent);text-underline-offset:3px}
.more{margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--line)}

@media (min-width:960px){
  .bar{justify-content:flex-start}
  .wrap{padding-left:max(var(--s-8),env(safe-area-inset-left));padding-right:max(var(--s-8),env(safe-area-inset-right))}
  .page-hero{padding-bottom:var(--s-9)}
  .page-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-8);align-items:center;justify-items:start}
  .page-copy{align-items:flex-start;text-align:left;max-width:36rem}
  .badges{justify-content:flex-start}
  .phone{justify-self:center}
}

.footer{border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.foot{display:flex;flex-direction:column;gap:var(--s-1);align-items:center;text-align:center;padding-top:var(--s-4);padding-bottom:var(--s-4)}
.copy{color:var(--ink-3);font-size:14px}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--s-5)}
.foot nav a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--ink-2);font-size:14px;text-underline-offset:3px}
.foot nav a:hover{color:var(--ink)}
@media (min-width:720px){.foot{flex-direction:row;text-align:left;justify-content:space-between;padding-top:var(--s-2);padding-bottom:var(--s-2)}}