/* House Stack Pro skin over the shared back-of-house styles (app.css): House Stack orange on white, near-black ink and sidebar. */

:root {
  --ink: #111111;
  --ink-2: #3a3a3f;
  --ink-3: #6b6b72;
  --mist: #f6f6f7;
  --line: #e5e5ea;
  --line-2: #efeff2;
  --paper: #ffffff;
  --signal: #ffc53d;
  --ok: #0f8a6e;
  --pink: #F97316;
  --pink-press: #C2410C;
  --violet: #F97316;
  --display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --text: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --r: 12px;
  --r-lg: 20px;
}
h1, h2, h3 { font-weight: 700; letter-spacing: 0; }

/* Main buttons: the site's pink with its pressed edge. */
.btn { font-weight: 700; border-radius: 12px; }
.btn-primary { background: var(--pink); color: #fff; box-shadow: 0 3px 0 var(--pink-press); }
.btn-primary:hover { background: #EA580C; }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pink-press); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-ghost:hover { border-color: var(--violet); }

/* Sidebar in near-black. */
.side { background: #111111; color: #d4d4d8; }
.side .brand { color: #fff; }
.brand { font-family: var(--display); font-weight: 700; font-size: 20px; }
.brand b { color: var(--pink); font-weight: 700; }
.nav-item { color: #d4d4d8; }
.nav-item:hover { background: #1f1f22; color: #fff; }
.nav-item.active { background: #2a1a10; color: #fff; box-shadow: inset 3px 0 0 #F97316; }
.nav-item.active .nav-ico { color: #FB923C; }
.side-foot { border-top-color: #2a2a2e; }

/* Upgrade moments stay loud, in House Stack Pro yellow. */
.power-hero { background: radial-gradient(120% 140% at 50% -20%, #F97316 0%, #7C2D12 55%, #111111 100%); }
.power-hero p { color: #fde3cf; }
.power-hero::after { background: radial-gradient(closest-side, rgba(255, 197, 61, .3), transparent 70%); }
.power-hero-bolt { background: radial-gradient(circle at 35% 30%, #ffe29a, var(--signal)); color: #111111; }
.btn-power, .power-up-loud { background: linear-gradient(180deg, #ffe08a, var(--signal)); border-color: #e0a81e; color: #111111; }
.tier-hot { border-color: var(--signal); box-shadow: 0 0 0 4px rgba(255, 197, 61, .18), 0 18px 40px -18px rgba(200, 16, 46, .4); }
.nav-power { color: #ffd666 !important; }
.nav-power .nav-ico { color: var(--signal); }

/* Period switch on the upgrade and billing pages. */
.period-switch { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; }
.period-switch button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 700 14px var(--text); cursor: pointer; }
.period-switch button[aria-pressed="true"] { background: var(--violet); color: #fff; }
.period-switch button[aria-pressed="true"] .pill { background: #fff; }
.ok-mark { color: var(--ok); font-weight: 800; }
@media (max-width: 760px) { .tiers { grid-template-columns: 1fr; } .tier-hot { transform: none; } }

/* Sign-in pages on a soft gray ground. */
.auth-wrap { background: var(--mist); }
.auth-card { border-radius: 22px; box-shadow: 0 18px 50px -30px rgba(17, 17, 17, .3); }
.auth-card h1 { font-size: 28px; }
.auth-product { background: #FFEDD5; color: #C2410C; }

/* Notices in brand tints. */
.notice { background: #fff6dc; border-color: #ffe08a; color: #6b4a00; }
.note-upgrade { background: #FFEDD5; border: 1px solid #f3c7cf; color: #7C2D12; padding: 12px 16px; border-radius: var(--r); margin-bottom: 20px; font-size: 14px; }
.pill-accent { background: #FFEDD5; color: #C2410C; }

/* Stats: web addresses and link targets keep their own case; device names are capitalized where they are made. */
.bd-label { text-transform: none; }
.bd-label::first-letter { text-transform: uppercase; }
.breakdown-raw .bd-label::first-letter { text-transform: none; }

/* Anything hidden stays hidden, even inside flex and grid layouts. */
[hidden] { display: none !important; }
/* Tab buttons (lead page composer). */
.seg button { padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; font: 600 13.5px var(--text); color: var(--ink-2); cursor: pointer; }
.seg button.active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(24, 32, 47, .08); }
.rows { list-style: none; padding: 0; margin: 0; }
.rows > li { padding: 10px 0; border-top: 1px solid var(--line-2); }
.rows > li:first-child { border-top: 0; }