.logo.face { background: var(--sun); padding: 3px; }
.logo.face img { width: 100%; height: 100%; display: block; }
.muted { color: var(--ink-2); font-weight: 500; }
.inline-link { color: var(--brand); font-weight: 700; }
.sec-head.left p { font-size: 16px; }

/* ---------- build form ---------- */
.build { display: flex; gap: 6px; max-width: 560px; margin-top: 36px; padding: 6px; background: #fff; border-radius: 99px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25); }
.build input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16.5px; color: var(--ink); padding: 0 8px 0 20px; }
.build input::placeholder { color: var(--ink-3); }
.build.center { margin: 34px auto 0; }
.build-note { margin-top: 12px; color: rgba(255, 255, 255, 0.6); font-size: 14px; }
.build select { flex: none; max-width: 42%; border: 0; outline: 0; border-radius: 99px; background: var(--bg); font: inherit; font-size: 15px; color: var(--ink); padding: 0 14px; }
.no-site { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; cursor: pointer; }
.build-note .no-site { color: #fff; }

.bstep { display: flex; align-items: center; color: var(--ink-3); transition: color 0.2s; line-height: 1.4; }
.bstep.doing, .bstep.done { color: var(--ink); }
.bmark { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--bg); margin-right: 12px; font-size: 14px; font-weight: 800; vertical-align: middle; }
.bstep.doing .bmark::after { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--brand); animation: spin 0.7s linear infinite; }
.bstep.done .bmark { background: var(--green-soft); color: var(--green); }
.bstep.done .bmark::after { content: '✓'; }
@keyframes spin { to { transform: rotate(360deg); } }
.build-done { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); animation: pop 0.5s ease; }
.build-done p { background: var(--brand-soft); border-radius: 16px; border-bottom-right-radius: 6px; padding: 12px 16px; font-size: 15px; }
.build-cta { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 10px; }
.build-done small { color: var(--ink-3); font-size: 12.5px; line-height: 1.5; display: block; }

/* ---------- sample call inside the Oscar card ---------- */
.incoming.in-card { width: 100%; margin-top: 22px; gap: 12px; padding: 14px; background: var(--sun-soft); border: 1.5px solid var(--sun); color: var(--ink); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, background 0.15s; }
.incoming.in-card:hover { background: #fff1c2; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255, 184, 3, 0.3); }
.incoming.in-card:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.in-card .in-ring { width: 38px; height: 38px; font-size: 18px; background: var(--red-soft); flex: none; }
.in-card .in-text { min-width: 0; }
.in-card .in-text small { color: var(--ink-2); }
.in-card .in-text b { display: block; }
.in-hint { display: block; margin-top: 4px; color: var(--brand); font-size: 13px; font-weight: 700; }
.in-card .in-play { flex: none; width: auto; height: auto; display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px 10px 10px; border-radius: 99px; background: var(--navy); color: #fff; font-size: 14.5px; font-weight: 800; animation: play-pulse 1.8s ease-out infinite; }
.in-play-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sun); color: #1d1600; font-size: 10px; padding-left: 2px; }
.incoming.in-card:hover .in-play { background: var(--brand); }
@keyframes play-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 184, 3, 0.7); } 70%, 100% { box-shadow: 0 0 0 12px rgba(255, 184, 3, 0); } }
@media (prefers-reduced-motion: reduce) { .in-card .in-play, .in-card .in-ring { animation: none; } }

/* ---------- niche tabs ---------- */
.ntabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 26px; }
.ntabs button { display: inline-flex; align-items: center; gap: 8px; background: var(--panel); box-shadow: var(--shadow); padding: 11px 18px; border-radius: 99px; font-weight: 700; font-size: 14.5px; transition: transform 0.15s, background 0.15s; }
.ntabs button:hover { transform: translateY(-1px); }
.ntabs button.active { background: var(--navy); color: #fff; }
.callhead { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 0 6px 14px; font-size: 16px; }
.callhead-tags { display: flex; gap: 8px; align-items: center; }
.kind { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 99px; background: var(--bg); color: var(--ink-2); white-space: nowrap; }
.kind.rec { background: var(--brand-soft); color: var(--brand); }

/* ---------- industries ---------- */
.niches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ncard { text-align: left; display: flex; flex-direction: column; background: var(--panel); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow); transition: transform 0.15s; }
button.ncard:hover, a.ncard:hover { transform: translateY(-3px); }
a.ncard { color: inherit; }
.ncard .ki { background: var(--bg); box-shadow: none; }
.ncard h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.ncard p { color: var(--ink-2); font-size: 14.5px; }
.urgent-when { margin-top: 10px; font-size: 13.5px !important; }
.urgent-when b { color: var(--red); font-weight: 700; }
.ncard-cta { margin-top: auto; padding-top: 16px; color: var(--brand); font-weight: 700; font-size: 14px; }
.soon { font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--violet); background: var(--violet-soft); padding: 3px 9px; border-radius: 99px; vertical-align: 2px; }

/* ---------- trades menu ---------- */
.nav-drop { position: relative; }
.nav-drop summary { list-style: none; cursor: pointer; color: rgba(255, 255, 255, 0.75); display: inline-flex; align-items: center; gap: 7px; }
.nav-drop summary::-webkit-details-marker { display: none; }
.nav-drop summary::after { content: ''; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.15s; }
.nav-drop[open] summary::after { transform: translateY(1px) rotate(225deg); }
.nav-drop summary:hover, .nav-drop[open] summary { color: #fff; }
.nav-menu { position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%); width: 540px; background: #fff; color: var(--ink); border-radius: 18px; box-shadow: 0 24px 60px rgba(15, 42, 68, 0.3); padding: 16px; z-index: 30; animation: menu-in 0.15s ease; }
@keyframes menu-in { from { opacity: 0; } }
.nav-menu-head { font-size: 12px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-3); padding: 2px 10px 10px; }
.nav-menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; }
.top-nav .nav-menu a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; color: var(--ink); font-weight: 700; font-size: 14.5px; }
.top-nav .nav-menu a:hover, .top-nav .nav-menu a.on { background: var(--bg); color: var(--ink); }
.nav-menu-grid span { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--bg); font-size: 15px; }
.top-nav .nav-menu .nav-menu-all { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); border-radius: 0; color: var(--brand); }
.top-nav .nav-menu .nav-menu-all:hover { background: none; color: var(--brand); }

/* ---------- trade pages ---------- */
.trade-rules { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 30px; color: var(--ink-2); font-size: 15px; text-align: center; }
.trade-rules b { color: var(--ink); }
.trade-rules b.red { color: var(--red); }
.trade-reason { background: var(--panel); box-shadow: var(--shadow); }
.trade-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin: 0 auto; }
.trade-chips a { display: inline-flex; align-items: center; gap: 8px; background: var(--bg); padding: 10px 16px; border-radius: 99px; font-weight: 700; font-size: 14.5px; color: var(--ink); transition: transform 0.15s, background 0.15s; }
.trade-chips a:hover { transform: translateY(-1px); background: var(--brand-soft); }
/* ---------- footer ---------- */
.foot-in { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.foot-links { display: flex; gap: 8px 24px; flex-wrap: wrap; justify-content: center; }
.foot-links a { color: rgba(255, 255, 255, 0.8); font-weight: 600; font-size: 14px; }
.foot-links a:hover { color: #fff; }
.foot-trades { gap: 6px 18px; max-width: 900px; }
.foot-trades a { color: rgba(255, 255, 255, 0.6); font-size: 13px; font-weight: 500; }

.build-sheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-start; justify-content: center; padding: calc(16px + env(safe-area-inset-top)) 14px 16px; background: rgba(15, 42, 68, 0.55); }
.build-sheet[hidden] { display: none; }
.build-sheet-card { position: relative; width: min(480px, 100%); background: #fff; border-radius: var(--radius); padding: 24px 18px 18px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25); animation: pop 0.25s ease; }
.build-sheet-card h2 { margin: 0 32px 6px 0; font-size: 21px; line-height: 1.25; color: var(--navy); }
.build-sheet-card p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.build-sheet-card .build { margin-top: 16px; box-shadow: none; border: 1.5px solid var(--line); }
.build-sheet-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--bg); color: var(--ink-2); font-size: 15px; cursor: pointer; }
body.sheet-open { overflow: hidden; }

.plan-over { margin: 0 0 4px; padding: 0 16px; color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.plan.pop .plan-over { color: rgba(255, 255, 255, 0.65); }

/* ---------- works with ---------- */
.works { padding: 8px 0 72px; }
.works-title { text-align: center; color: var(--ink-2); font-size: 13px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; margin: 0 0 22px; }
.works-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; }
.works-list li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; background: var(--panel); border: 1.5px solid var(--line); border-radius: 99px; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.wm { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--wm); color: #fff; font-size: 13px; font-weight: 800; }

@media (max-width: 1080px) {
  .niches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .build { flex-direction: column; border-radius: 22px; padding: 8px; }
  .build input { padding: 14px 14px; }
  .build select { max-width: none; padding: 14px; border-radius: 14px; }
  .build .btn { justify-content: center; }
  .ntabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -20px 20px; padding: 4px 20px 10px; scrollbar-width: none; }
  .ntabs button { flex: none; }
  .niches { grid-template-columns: minmax(0, 1fr); }
  .callhead { font-size: 15px; }
  .in-card .in-ring { display: none; }
  .nav-menu { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; transform: none; max-height: calc(100vh - 80px); overflow-y: auto; }
  .top-nav { gap: 16px; }
  .top-nav a.nav-account { display: inline; color: #fff; }
}
@media (max-width: 420px) {
  .top-nav { gap: 12px; font-size: 14px; }
  .brand small { display: none; }
}