/* ==========================================
   "What a week looks like" (coaching.html)
   A made-up example week, built from the public site's tokens.
========================================== */

.ex-week{
    width:min(100%, 960px);
    margin:0 auto;
    display:grid;
    gap:18px;
}
.ex-badge{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:0 auto;
    padding:8px 16px;
    max-width:100%;
    text-align:center;
    font-size:13px;
    font-weight:700;
    color:var(--text);
    background:color-mix(in srgb, var(--amber, #C9AD84) 14%, transparent);
    border:1px solid color-mix(in srgb, var(--amber, #C9AD84) 35%, transparent);
    border-radius:999px;
}
.ex-card{
    padding:20px 22px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg, 18px);
    min-width:0;
}
.ex-card-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:4px 14px;
    margin-bottom:12px;
}
.ex-card-head h3{ margin:0; font-size:20px; }
.ex-meta{ color:var(--text-secondary); font-size:13px; }

/* The week */
.ex-days{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.ex-day{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:10px 12px;
    background:var(--surface-light);
    border:1px solid var(--border);
    border-left:3px solid transparent;
    border-radius:12px;
}
.ex-day.is-key{ border-left-color:var(--primary); }
.ex-dow{
    flex:0 0 38px;
    padding-top:1px;
    font-weight:800;
    font-size:13px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--primary);
}
.ex-what{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; color:var(--text); font-size:15px; line-height:1.4; }
.ex-what small{ color:var(--text-secondary); font-size:13px; overflow-wrap:anywhere; }
.ex-rest{ color:var(--text-secondary); }

/* Up close + check-in */
.ex-two{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }
.ex-steps{ list-style:none; margin:0 0 12px; padding:0; display:grid; gap:8px; }
.ex-steps li{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:10px 12px;
    background:var(--surface-light);
    border:1px solid var(--border);
    border-radius:12px;
}
.ex-steps strong{ color:var(--text); }
.ex-steps span{ color:var(--text-secondary); font-size:14px; }
.ex-why{ margin:8px 0 0; color:var(--text-secondary); font-size:14px; line-height:1.5; }
.ex-why strong{ color:var(--text); }
.ex-checkin{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:0 0 12px; }
.ex-checkin div{
    padding:10px 8px;
    text-align:center;
    background:var(--surface-light);
    border:1px solid var(--border);
    border-radius:12px;
}
.ex-checkin dt{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-secondary); }
.ex-checkin dd{ margin:4px 0 0; font-weight:700; color:var(--text); font-size:14px; }
.ex-quote{ margin:0 0 12px; color:var(--text-secondary); font-style:italic; line-height:1.5; }
.ex-reply{
    padding:12px 14px;
    background:color-mix(in srgb, var(--primary) 10%, transparent);
    border-left:3px solid var(--primary);
    border-radius:10px;
    color:var(--text-secondary);
    font-size:14px;
    line-height:1.5;
}
.ex-reply strong{ color:var(--text); }
.ex-reply p{ margin:4px 0 0; }
.ex-foot{ margin:0; text-align:center; color:var(--text-secondary); font-size:14px; line-height:1.5; }

@media (max-width:760px){
    .ex-two{ grid-template-columns:1fr; }
    .ex-card{ padding:16px; }
}