@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Manrope:wght@400;500;600;700;800&family=Mulish:wght@400;600;800&display=swap');
* { box-sizing: border-box; }
body { margin:0; background:#EAE9F2; font-family: var(--font-sans); }
a { color: var(--action-primary); }
a:hover { color: var(--action-primary-hover); }

.phone-wrap { min-height:100vh; display:flex; justify-content:center; align-items:flex-start; padding:40px 16px; }
.phone { width:100%; max-width:400px; background:var(--surface-card); border-radius:var(--radius-2xl); box-shadow:var(--shadow-card); overflow:hidden; display:flex; flex-direction:column; }
.screen { min-height:700px; display:flex; flex-direction:column; }

/* buttons */
.btn { display:block; width:100%; border:none; border-radius:var(--radius-3xl); padding:18px; font-family:var(--font-sans); font-size:15px; font-weight:700; cursor:pointer; text-align:center; text-decoration:none; }
.btn-primary { background:var(--action-primary); color:#fff; }
.btn-primary:hover { background:var(--action-primary-hover); }
.btn-primary:disabled { opacity:0.5; cursor:not-allowed; }
.btn-tertiary { background:none; color:var(--text-primary); box-shadow:inset 0 0 0 1px var(--border-hairline); }
.btn-tertiary:hover { opacity:0.85; }
.btn-outline-danger { background:none; color:var(--red-700); box-shadow:inset 0 0 0 1px var(--red-700); font-weight:700; }
.btn-outline-neutral { background:none; color:var(--text-muted); box-shadow:inset 0 0 0 1px var(--border-strong); font-weight:400; }

/* tab bar */
.tabbar { display:flex; border-top:1px solid var(--border-hairline); flex-shrink:0; }
.tab { flex:1; border:none; background:none; border-right:1px solid var(--border-hairline); padding:12px 0 10px; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; font-family:var(--font-sans); font-size:11px; color:var(--text-muted); }
.tab:last-child { border-right:none; }
.tab.active { color: var(--action-primary); font-weight:700; }
.tab img, .tab svg { width:18px; height:18px; }
.tab:not(.active) img { filter: invert(48%) grayscale(1); }
.tab.active img { filter: invert(35%) sepia(85%) saturate(3000%) hue-rotate(340deg) brightness(100%) contrast(100%); }

/* eyebrow / text helpers */
.eyebrow { font-family:var(--font-progress); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); margin:0; }
.muted { color: var(--text-muted); }
h1,h2,h3 { font-family: var(--font-display); font-weight:400; margin:0; color: var(--ink); }
p { font-family: var(--font-sans); margin:0; color: var(--text-primary); }