/* ── Practice page — dark, violet/magenta. Shared by all practice pages. ───── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Inter:wght@400;500;600;700&display=swap');
:root {
  --bg:      #08060c;
  --bg-2:    #120d1c;
  --text:    #ECE7F2;
  --text-dim:#9A90A8;
  --violet:  #B026FF;
  --magenta: #E0007A;
  --line:    rgba(176,38,255,.22);
  --serif:   'Fraunces', Georgia, serif;
  --sans:    'Inter', system-ui, sans-serif;
  --maxw:    760px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--sans); background: var(--bg); color: var(--text);
  line-height: 1.7; font-size: 17px; -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(60vw 40vw at 85% -10%, rgba(224,0,122,.16), transparent 60%),
    radial-gradient(50vw 45vw at 5% 5%, rgba(176,38,255,.18), transparent 55%);
  background-attachment: fixed;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding: 2.2rem 1.4rem 5rem; }
.back {
  display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 3.5rem; transition: color .2s;
}
.back:hover { color: var(--violet); }
.eyebrow {
  font-size: .74rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: var(--magenta); margin-bottom: 1rem;
}
h1 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 7vw, 4rem);
  line-height: 1.02; letter-spacing: -.01em; margin-bottom: 2rem;
  background: linear-gradient(100deg, var(--text) 30%, var(--violet));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lede { font-size: 1.22rem; color: var(--text); margin-bottom: 2rem; }
p { margin-bottom: 1.3rem; color: #cfc7da; }
p strong { color: var(--text); font-weight: 600; }
.rule { height: 1px; background: var(--line); margin: 3rem 0; border: 0; }
.panel {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.6rem 1.8rem; margin: 2.4rem 0;
}
.panel h2 {
  font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--violet); margin-bottom: 1rem;
}
.practice-photo { margin: 0 0 2rem; }
.practice-photo img {
  display: block; width: 100%; max-height: 70vh; object-fit: cover;
  border-radius: 14px; border: 1px solid var(--line);
}
.panel ul { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.panel li {
  color: #cfc7da; padding: .5rem 0 .5rem 1.1rem; position: relative;
  border-bottom: 1px solid rgba(176,38,255,.09);
}
.panel li:last-child { border-bottom: 0; }
.panel li::before { content: '·'; position: absolute; left: 0; color: var(--violet); }
.panel li a { color: var(--violet); border-bottom: 1px solid transparent; }
.panel li a:hover { color: var(--magenta); border-bottom-color: var(--magenta); }
.panel p:last-child { margin-bottom: 0; }
.todo { color: var(--text-dim); font-style: italic; font-size: .95rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.6rem; }
.btn {
  font-weight: 600; font-size: .95rem; padding: .9rem 1.6rem; border-radius: 999px;
  transition: transform .15s, box-shadow .2s; border: 1px solid transparent;
}
.btn-solid { color: #0a0410; background: var(--text); }
.btn-solid:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(176,38,255,.28); }
.btn-ghost { color: var(--violet); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--violet); color: var(--magenta); }
.legal { margin-top: 4rem; font-size: .8rem; color: var(--text-dim); }