/*
 * BirdGigs - Stone (v7)
 * Loads AFTER style.css. Contains: base + Bootstrap overrides, the Stone
 * nav / footer / cookie bar, and the homepage (sn-* classes).
 * Tokens (--fph-*, --accent, --radius ...) are defined in style.css.
 */

/* ── BASE ─────────────────────────────────────────────────── */
html { background: var(--fph-bg); }
body {
  font-family: var(--fph-font);
  background: var(--fph-bg);
  color: var(--fph-dark);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2 { font-weight: 300; letter-spacing: -.035em; text-wrap: balance; line-height: 1.12; }
h3, h4, h5, h6 { font-weight: 500; letter-spacing: 0; line-height: 1.25; }
h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.2rem; }
p  { color: var(--fph-mid); line-height: 1.7; }
a  { color: var(--fph-dark); }
a:hover { color: var(--accent); }
strong, b { font-weight: 500; }
.lead { font-size: 1.15rem; color: var(--fph-muted); line-height: 1.7; font-weight: 300; }
.container { max-width: 1160px; padding-left: 24px; padding-right: 24px; }
.container-fluid { max-width: 1160px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.visually-hidden-focusable:focus { position: absolute; left: 8px; top: 8px; z-index: 2000; background: var(--fph-dark); color: var(--fph-bg); padding: 8px 14px; }
.fph-a1, .fph-a2, .fph-a3, .fph-a4, .fph-a5 { animation: none; }
::selection { background: var(--accent-tint); color: var(--fph-dark); }

/* Bootstrap 5.3 root variables -> Stone */
:root {
  --bs-body-font-family: var(--fph-font);
  --bs-body-color: var(--fph-dark);
  --bs-body-bg: var(--fph-bg);
  --bs-border-color: var(--fph-border);
  --bs-border-radius: 2px; --bs-border-radius-sm: 2px; --bs-border-radius-lg: 2px;
  --bs-border-radius-xl: 2px; --bs-border-radius-xxl: 2px; --bs-border-radius-pill: 2px;
  --bs-link-color: var(--accent); --bs-link-hover-color: var(--fph-dark);
  --bs-primary: #3E5F68; --bs-primary-rgb: 62,95,104;
  --bs-success: #4F6B55; --bs-success-rgb: 79,107,85;
  --bs-danger: #9A4B3F;  --bs-danger-rgb: 154,75,63;
  --bs-warning: #A87A2E; --bs-warning-rgb: 168,122,46;
  --bs-secondary-color: var(--fph-muted);
  --bs-emphasis-color: var(--fph-dark);
}
.text-muted, .text-body-secondary { color: var(--fph-muted) !important; }
.text-success { color: var(--ok-ink) !important; }
.text-danger  { color: var(--danger) !important; }
.text-warning { color: var(--warn-ink) !important; }
.text-primary { color: var(--accent) !important; }
.text-dark    { color: var(--fph-dark) !important; }
.bg-light, .bg-body-tertiary { background-color: var(--fph-subtle) !important; }
.bg-white { background-color: var(--fph-white) !important; }
.bg-dark  { background-color: var(--fph-dark) !important; }
.bg-primary { background-color: var(--accent) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--fph-border) !important; }
.rounded, .rounded-1, .rounded-2, .rounded-3, .rounded-4, .rounded-5, .rounded-pill, .rounded-circle { border-radius: var(--radius) !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn {
  font-family: var(--fph-font); font-weight: 500; font-size: .95rem; letter-spacing: 0;
  border-radius: var(--radius); padding: .72rem 1.35rem; line-height: 1.4;
  transition: background .2s, color .2s, border-color .2s; box-shadow: none;
}
.btn-sm { padding: .5rem 1.05rem; font-size: .9rem; }
.btn-lg { padding: .9rem 1.7rem; font-size: 1rem; }
.btn-primary, .btn-accent, .btn-dark, .btn-success {
  background: var(--accent); border: 1px solid var(--accent); color: var(--on-accent);
}
.btn-primary:hover, .btn-accent:hover, .btn-dark:hover, .btn-success:hover,
.btn-primary:focus-visible, .btn-dark:focus-visible,
.btn-primary:active, .btn-dark:active, .btn-accent:active {
  background: var(--fph-dark); border-color: var(--fph-dark); color: var(--fph-bg);
}
.btn-ghost, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary, .btn-outline-accent, .btn-light, .btn-secondary {
  background: transparent; border: 1px solid var(--fph-edge); color: var(--fph-dark);
}
.btn-ghost:hover, .btn-outline-primary:hover, .btn-outline-dark:hover, .btn-outline-secondary:hover,
.btn-outline-accent:hover, .btn-light:hover, .btn-secondary:hover,
.btn-ghost:active, .btn-outline-dark:active {
  background: var(--fph-dark); border-color: var(--fph-dark); color: var(--fph-bg);
}
.btn-danger, .btn-outline-danger { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
.btn-danger:hover, .btn-outline-danger:hover { background: var(--danger); border-color: var(--danger); color: var(--fph-white); }
.btn:disabled, .btn.disabled { opacity: .5; }
.btn-link { color: var(--accent); }

/* ── FORMS ────────────────────────────────────────────────── */
.form-control, .form-select, .input-group-text {
  background-color: var(--fph-white); color: var(--fph-dark);
  border: 1px solid var(--fph-edge); border-radius: var(--radius);
  font-family: var(--fph-font); font-size: .97rem; font-weight: 400; padding: .65rem .9rem;
}
.form-control::placeholder { color: var(--fph-faint); }
.form-control:focus, .form-select:focus {
  background-color: var(--fph-white); color: var(--fph-dark);
  border-color: var(--accent); box-shadow: none; outline: 2px solid var(--accent); outline-offset: 1px;
}
.form-control:disabled, .form-select:disabled { background: var(--fph-subtle); }
.form-label { font-size: .9rem; font-weight: 500; color: var(--fph-dark); margin-bottom: 6px; }
.form-text, .form-hint { color: var(--fph-muted); font-size: .85rem; }
.form-check-input { border: 1px solid var(--fph-edge); background-color: var(--fph-white); border-radius: var(--radius); }
.form-check-input[type=radio] { border-radius: 50%; }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { box-shadow: none; outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.form-range::-webkit-slider-thumb { background: var(--accent); }
.is-invalid { border-color: var(--danger) !important; }
.invalid-feedback { color: var(--danger); }

/* ── ALERTS / BADGES / MISC BOOTSTRAP ─────────────────────── */
.alert { border-radius: var(--radius); border: 1px solid var(--fph-border); font-size: .95rem; }
.alert-success { background: var(--ok-bg);     color: var(--ok-ink);   border-color: #B7C9BA; }
.alert-danger  { background: var(--danger-bg); color: var(--danger);   border-color: var(--danger-line); }
.alert-warning { background: var(--warn-bg);   color: var(--warn-ink); border-color: var(--warn-line); }
.alert-info, .alert-primary { background: var(--accent-light); color: var(--accent); border-color: var(--accent-tint); }
.badge { border-radius: var(--radius); font-weight: 500; }
.badge.bg-primary, .badge.bg-dark { background: var(--fph-dark) !important; color: var(--fph-bg) !important; }
.badge.bg-success { background: var(--ok-bg) !important; color: var(--ok-ink) !important; }
.badge.bg-danger  { background: var(--danger-bg) !important; color: var(--danger) !important; }
.badge.bg-warning { background: var(--warn-bg) !important; color: var(--warn-ink) !important; }
.badge.bg-secondary, .badge.bg-info, .badge.bg-light { background: var(--fph-subtle) !important; color: var(--fph-mid) !important; }
.card { background: var(--fph-white); border: 1px solid var(--fph-border); border-radius: var(--radius); }
.card-header, .card-footer { background: transparent; border-color: var(--fph-border); }
.list-group-item { background: var(--fph-white); border-color: var(--fph-border); }
.dropdown-menu { background: var(--fph-white); border: 1px solid var(--fph-edge); border-radius: var(--radius); box-shadow: none; padding: 6px 0; font-size: .92rem; }
.dropdown-item { color: var(--fph-dark); padding: .45rem 1rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--fph-subtle); color: var(--fph-dark); }
.dropdown-divider { border-color: var(--fph-border); }
.modal-content { background: var(--fph-white); border: 1px solid var(--fph-edge); border-radius: var(--radius); box-shadow: none; }
.modal-header, .modal-footer { border-color: var(--fph-border); }
.nav-tabs { border-bottom: 1px solid var(--fph-border); }
.nav-tabs .nav-link { color: var(--fph-muted); border: 0; border-bottom: 2px solid transparent; border-radius: 0; font-weight: 500; }
.nav-tabs .nav-link:hover { color: var(--fph-dark); border-bottom-color: var(--fph-edge); }
.nav-tabs .nav-link.active { color: var(--fph-dark); background: transparent; border-bottom-color: var(--fph-dark); }
.nav-pills .nav-link { border-radius: var(--radius); color: var(--fph-mid); }
.nav-pills .nav-link.active { background: var(--accent); color: var(--on-accent); }
.page-link { color: var(--fph-dark); background: var(--fph-white); border-color: var(--fph-border); border-radius: var(--radius); }
.page-link:hover { background: var(--fph-subtle); color: var(--fph-dark); }
.page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.breadcrumb { font-size: .9rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--fph-faint); }
.progress { background: var(--fph-subtle); border-radius: var(--radius); }
.progress-bar { background: var(--accent); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--fph-dark); --bs-table-border-color: var(--fph-border); --bs-table-hover-bg: var(--fph-subtle); }
.table th { font-size: .85rem; }
hr { border-color: var(--fph-border); opacity: 1; }

/* ── NAV ──────────────────────────────────────────────────── */
.sn-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.sn-nav { position: sticky; top: 0; z-index: 1030; background: var(--fph-bg); border-bottom: 1px solid var(--fph-border); }
.sn-nav-inner { display: flex; align-items: center; gap: 32px; height: var(--fph-nav-h); }
.sn-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; color: var(--fph-dark); text-decoration: none; white-space: nowrap; }
.sn-logo:hover { color: var(--fph-dark); }
.sn-logo svg { width: 26px; height: 26px; color: var(--accent); flex: none; }
.sn-nav-links { display: flex; gap: 26px; font-size: .93rem; }
.sn-nav-links a { color: var(--fph-muted); text-decoration: none; white-space: nowrap; }
.sn-nav-links a:hover, .sn-nav-links a.active { color: var(--fph-dark); }
.sn-nav-search { margin-left: auto; display: flex; align-items: center; width: 210px; background: var(--fph-white); border: 1px solid var(--fph-edge); border-radius: var(--radius); }
.sn-nav-search:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.sn-nav-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: .9rem; padding: .5rem .7rem; color: var(--fph-dark); }
.sn-nav-search input:focus-visible { outline: none; }
.sn-nav-search button { border: 0; background: transparent; color: var(--fph-muted); padding: 0 .7rem; display: grid; place-items: center; cursor: pointer; }
.sn-nav-search button:hover { color: var(--fph-dark); }
.sn-nav-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: .93rem; }
.sn-nav-search + .sn-nav-actions { margin-left: 0; }
.sn-signin { color: var(--fph-dark); text-decoration: none; }
.sn-signin:hover { color: var(--accent); }
.sn-user-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; color: var(--fph-dark); font: inherit; font-size: .93rem; padding: 4px 0; }
.fph-icon-btn { position: relative; display: inline-flex; align-items: center; color: var(--fph-muted); padding: 6px; text-decoration: none; }
.fph-icon-btn:hover, .fph-icon-btn.active { color: var(--fph-dark); }
.fph-badge { position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font-size: .68rem; line-height: 16px; text-align: center; font-weight: 500; }
.fph-av-sm { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius); background: var(--fph-subtle); color: var(--fph-dark); font-size: .85rem; font-weight: 500; }
.fph-hamburger { background: transparent; border: 1px solid var(--fph-edge); }
.fph-hamburger span { background: var(--fph-dark); }
@media (max-width: 991px) {
  .sn-nav-links, .sn-nav-search, .sn-signin, .sn-user-name { display: none !important; }
  .sn-nav-inner { gap: 16px; }
  .sn-nav-actions { gap: 12px; }
}
@media (min-width: 992px) { .fph-hamburger { display: none !important; } }
@media (max-width: 991px) { .sn-nav-inner { justify-content: space-between; } .sn-nav-actions { margin-left: auto; } }

/* mobile menu */
.fph-mobile-menu { background: var(--fph-bg); border-left: 1px solid var(--fph-edge); box-shadow: none; }
.fph-mm-links a { color: var(--fph-dark); border-bottom: 1px solid var(--fph-border); font-weight: 400; }
.fph-mm-links a:hover { background: var(--fph-subtle); color: var(--fph-dark); }
.fph-mm-note { font-size: .78rem; color: var(--accent); margin-left: 6px; }
.fph-mm-badge { background: var(--accent); color: var(--on-accent); }
.fph-mm-search form { background: var(--fph-white); border: 1px solid var(--fph-edge); border-radius: var(--radius); }
.fph-mm-search input { background: transparent; }
.fph-mm-backdrop { background: rgba(29,39,43,.4); }

/* category strip */
.sn-catstrip { border-bottom: 1px solid var(--fph-border); background: var(--fph-bg); }
.sn-catstrip .sn-wrap { display: flex; gap: 28px; overflow-x: auto; padding-top: 14px; padding-bottom: 14px; font-size: .9rem; scrollbar-width: none; white-space: nowrap; }
.sn-catstrip .sn-wrap::-webkit-scrollbar { display: none; }
.sn-catstrip a { color: var(--fph-muted); text-decoration: none; }
.sn-catstrip a:hover, .sn-catstrip a[aria-current] { color: var(--fph-dark); }
.sn-catstrip a[aria-current] { border-bottom: 1px solid var(--fph-dark); }

/* ── FOOTER ───────────────────────────────────────────────── */
.sn-foot { border-top: 1px solid var(--fph-border); padding: 64px 0 36px; font-size: .95rem; margin-top: 0; background: var(--fph-bg); }
.sn-foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.sn-foot h5 { font-size: .97rem; font-weight: 500; margin-bottom: 14px; letter-spacing: 0; }
.sn-foot ul { list-style: none; padding: 0; margin: 0; }
.sn-foot li { margin: 8px 0; }
.sn-foot li a { color: var(--fph-muted); text-decoration: none; }
.sn-foot li a:hover { color: var(--fph-dark); }
.sn-foot-blurb { color: var(--fph-muted); margin-top: 14px; max-width: 32ch; font-size: .95rem; }
.sn-foot-legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--fph-border); color: var(--fph-muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .88rem; }
.sn-foot-legal nav { display: flex; gap: 18px; flex-wrap: wrap; }
.sn-foot-legal a { color: var(--fph-muted); text-decoration: none; }
.sn-foot-legal a:hover { color: var(--fph-dark); }
@media (max-width: 940px) { .sn-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sn-foot-grid { grid-template-columns: 1fr; } }

/* ── HOMEPAGE ─────────────────────────────────────────────── */
.sn-hero { text-align: center; padding: 104px 0 96px; }
.sn-hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); max-width: 15ch; margin: 0 auto 22px; }
.sn-lead { margin: 0 auto 34px; color: var(--fph-muted); font-size: 1.15rem; font-weight: 300; max-width: 52ch; }
.sn-modes { display: flex; justify-content: center; gap: 28px; margin-bottom: 14px; }
.sn-mode { background: none; border: 0; border-bottom: 1px solid transparent; padding: 4px 0; color: var(--fph-muted); font: inherit; font-size: .93rem; cursor: pointer; }
.sn-mode:hover { color: var(--fph-dark); }
.sn-mode.active { color: var(--fph-dark); border-bottom-color: var(--fph-dark); }
.sn-search { display: flex; background: var(--fph-white); border: 1px solid var(--fph-edge); border-radius: var(--radius); padding: 6px; max-width: 640px; margin: 0 auto; }
.sn-search[hidden] { display: none; }
.sn-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; padding: .7rem 1.1rem; color: var(--fph-dark); }
.sn-search input::placeholder { color: var(--fph-muted); }
.sn-search input:focus-visible { outline: none; }
.sn-search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.sn-search .btn { border-radius: 0; }
.sn-popular { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 18px auto 0; font-size: .9rem; color: var(--fph-muted); max-width: none; }
.sn-popular a { color: var(--fph-muted); text-decoration: none; border-bottom: 1px solid var(--fph-border); }
.sn-popular a:hover { color: var(--fph-dark); border-color: var(--fph-dark); }
.sn-watch-row { margin: 18px auto 0; max-width: none; }
.sn-watch { background: none; border: 0; border-bottom: 1px solid var(--fph-edge); padding: 0 0 1px; font: inherit; font-size: .9rem; color: var(--fph-dark); cursor: pointer; }
.sn-watch:hover { border-color: var(--fph-dark); }
.sn-watch span { color: var(--fph-muted); margin-left: 6px; }
.sn-glance { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--fph-edge); margin-top: 80px; text-align: left; background: var(--fph-white); }
.sn-glance a { display: block; padding: 30px 32px; border-right: 1px solid var(--fph-edge); text-decoration: none; color: var(--fph-dark); }
.sn-glance a:last-child { border-right: 0; }
.sn-glance a:hover { background: var(--fph-bg); color: var(--fph-dark); }
.sn-glance .sn-price { display: block; font-size: 2.6rem; font-weight: 300; color: var(--accent); letter-spacing: -.03em; line-height: 1.1; }
.sn-glance b { display: block; font-weight: 500; margin-top: 6px; }
.sn-d { font-size: .9rem; color: var(--fph-muted); }

.sn-trust { border-block: 1px solid var(--fph-border); }
.sn-trust ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; padding: 22px 0; font-size: .9rem; color: var(--fph-muted); list-style: none; margin: 0; }

.sn-sec { padding: 92px 0; }
.sn-sec-flush { padding-top: 0; }
.sn-alt { background: var(--fph-white); border-block: 1px solid var(--fph-border); }
.sn-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; }
.sn-sec-head p { color: var(--fph-muted); margin-top: 10px; max-width: 62ch; }
.sn-tlink { border-bottom: 1px solid currentColor; padding-bottom: 1px; font-size: .95rem; display: inline-block; color: var(--fph-dark); text-decoration: none; }
.sn-tlink:hover { color: var(--accent); }
.sn-inline { color: var(--fph-dark); text-decoration: underline; text-underline-offset: 3px; }

.sn-tiers { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--fph-edge); }
.sn-tier { background: var(--fph-white); border-right: 1px solid var(--fph-edge); padding: 44px 36px; display: flex; flex-direction: column; gap: 12px; }
.sn-tier:last-child { border-right: 0; }
.sn-price { font-size: 3.6rem; line-height: 1; font-weight: 300; letter-spacing: -.04em; color: var(--accent); }
.sn-tier h3 { font-size: 1.15rem; font-weight: 500; }
.sn-tier p { color: var(--fph-muted); font-size: .97rem; flex: 1; }
.sn-tier .sn-tlink { align-self: flex-start; margin-top: 8px; }

.sn-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sn-path { border: 1px solid var(--fph-edge); padding: 40px; background: var(--fph-bg); }
.sn-path h3 { font-size: 1.4rem; font-weight: 300; letter-spacing: -.02em; }
.sn-path p { color: var(--fph-muted); margin-top: 10px; }
.sn-path ul { margin: 22px 0 28px; padding: 0; display: grid; gap: 10px; color: var(--fph-muted); font-size: .97rem; list-style: none; }
.sn-path li { padding-left: 24px; position: relative; }
.sn-path li::before { content: ""; position: absolute; left: 0; top: .8em; width: 12px; height: 1px; background: var(--accent); }

.sn-cgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--fph-border); border: 1px solid var(--fph-border); }
.sn-cgrid a { background: var(--fph-bg); padding: 28px; display: block; text-decoration: none; color: var(--fph-dark); }
.sn-cgrid a:hover { background: var(--fph-white); }
.sn-cgrid h4 { font-size: 1.2rem; font-weight: 300; letter-spacing: -.01em; margin-bottom: 6px; }
.sn-cgrid p { color: var(--fph-muted); font-size: .92rem; margin: 0; }

.sn-sgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 24px; }
.sn-card { display: block; text-decoration: none; color: var(--fph-dark); }
.sn-card:hover { color: var(--fph-dark); }
.sn-thumb { aspect-ratio: 3/2; background: var(--fph-accent-soft, var(--accent-tint)); position: relative; overflow: hidden; }
.sn-thumb::before, .sn-thumb::after { content: ""; position: absolute; }
.sn-thumb::before { width: 70%; aspect-ratio: 1; background: var(--accent); opacity: .85; left: -12%; bottom: -32%; }
.sn-thumb::after { width: 40%; aspect-ratio: 1; background: var(--fph-edge); right: 10%; top: 14%; opacity: .7; }
.sn-card:nth-child(2n) .sn-thumb::before { left: auto; right: -14%; bottom: -26%; width: 60%; }
.sn-card:nth-child(3n) .sn-thumb::after { left: 12%; right: auto; width: 30%; }
.sn-thumb:has(img)::before, .sn-thumb:has(img)::after { display: none; }
.sn-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sn-card-body { margin-top: 14px; }
.sn-meta { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--fph-muted); }
.sn-meta small { margin-left: auto; font-size: .85rem; }
.sn-card h3 { font-size: 1.08rem; font-weight: 500; margin-top: 8px; line-height: 1.35; }
.sn-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.sn-from { margin-top: 8px; font-size: .92rem; color: var(--fph-muted); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: none; }
.sn-from b { color: var(--fph-dark); font-weight: 500; }
.sn-from-r { display: inline-flex; gap: 10px; align-items: center; font-size: .85rem; }
.sn-chip { border: 1px solid var(--fph-edge); padding: 0 8px; font-size: .78rem; color: var(--fph-mid); }
.sn-av { width: 30px; height: 30px; border-radius: var(--radius); background: var(--accent-tint); display: inline-grid; place-items: center; font-size: .9rem; color: var(--fph-dark); flex: none; font-style: normal; overflow: hidden; font-weight: 400; }
.sn-av.sm { width: 30px; height: 30px; }
.sn-av.lg { width: 56px; height: 56px; font-size: 1.3rem; }
.sn-av img { width: 100%; height: 100%; object-fit: cover; }

.sn-seller-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sn-seller { display: flex; gap: 18px; align-items: flex-start; padding: 24px; border: 1px solid var(--fph-edge); background: var(--fph-white); text-decoration: none; color: var(--fph-dark); }
.sn-seller:hover { background: var(--fph-bg); color: var(--fph-dark); }
.sn-seller h3 { font-size: 1.15rem; margin-bottom: 2px; }
.sn-seller p { color: var(--fph-muted); font-size: .9rem; margin: 0; line-height: 1.5; }
.sn-seller .sn-tlink { margin-top: 10px; font-size: .9rem; }

.sn-job { display: grid; grid-template-columns: 1fr auto auto; gap: 32px; align-items: center; padding: 24px 0; border-top: 1px solid var(--fph-border); text-decoration: none; color: var(--fph-dark); }
.sn-jobs .sn-job:last-child { border-bottom: 1px solid var(--fph-border); }
.sn-job h3 { font-size: 1.2rem; font-weight: 500; }
.sn-job:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.sn-tag, .sn-bidn { font-size: .88rem; color: var(--fph-muted); }
.sn-cap { font-size: 1.45rem; font-weight: 300; color: var(--accent); min-width: 5.5rem; text-align: right; }
.sn-jobs-cta { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

.sn-bids-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.sn-bids-sec p { margin-top: 16px; color: var(--fph-muted); }
.sn-bids { background: var(--fph-white); border: 1px solid var(--fph-edge); padding: 30px; }
.sn-bids-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--fph-edge); }
.sn-bids-head h3 { font-size: 1.1rem; font-weight: 500; }
.sn-bids-head span { color: var(--fph-muted); font-size: .88rem; }
.sn-bid { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--fph-border); }
.sn-who { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sn-who small { color: var(--fph-muted); font-size: .85rem; }
.sn-amt { font-size: 1.5rem; font-weight: 300; }
.sn-bid.win .sn-amt { color: var(--accent); }
.sn-pick { font-size: .8rem; border: 1px solid var(--accent); color: var(--accent); padding: 1px 10px; }
.sn-bids-foot { margin-top: 18px; font-size: .92rem; color: var(--fph-muted); }

.sn-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; list-style: none; padding: 0; margin: 0; }
.sn-step { border-top: 2px solid var(--fph-dark); padding-top: 20px; }
.sn-n { font-size: 1.7rem; font-weight: 300; color: var(--accent); line-height: 1; }
.sn-step h3 { font-size: 1.1rem; font-weight: 500; margin: 14px 0 8px; }
.sn-step p { color: var(--fph-muted); font-size: .95rem; }

.sn-ent { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; background: var(--accent); color: var(--on-accent); padding: 56px; }
.sn-ent h2 { color: var(--on-accent); }
.sn-ent p { margin-top: 10px; color: var(--on-accent); opacity: .85; }
.sn-ent .btn { background: var(--on-accent); color: var(--accent); border-color: var(--on-accent); }
.sn-ent .btn:hover { background: transparent; color: var(--on-accent); border-color: var(--on-accent); }

@media (max-width: 940px) {
  .sn-hero { padding: 64px 0; }
  .sn-glance { grid-template-columns: 1fr; margin-top: 48px; }
  .sn-glance a { border-right: 0; border-bottom: 1px solid var(--fph-edge); }
  .sn-glance a:last-child { border-bottom: 0; }
  .sn-tiers, .sn-paths, .sn-seller-grid, .sn-bids-sec, .sn-job { grid-template-columns: 1fr; }
  .sn-tier { border-right: 0; border-bottom: 1px solid var(--fph-edge); }
  .sn-tier:last-child { border-bottom: 0; }
  .sn-sgrid, .sn-cgrid { grid-template-columns: repeat(2, 1fr); }
  .sn-steps { grid-template-columns: repeat(2, 1fr); }
  .sn-bids-sec { gap: 36px; }
  .sn-job { gap: 6px; } .sn-cap { text-align: left; }
  .sn-sec { padding: 64px 0; }
  .sn-path, .sn-ent { padding: 32px; }
}
@media (max-width: 560px) {
  .sn-sgrid, .sn-cgrid, .sn-steps { grid-template-columns: 1fr; }
  .sn-search { flex-direction: column; gap: 6px; }
  .sn-search .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── PAGE-LEVEL: dark bands become slate, dark chips become accent ──────── */
.fph-band-dark, .op-bs-hero, .op-porto-hero, .op-port-hero, .op-sp-cover-wrap, .op-sp-cover-default, .op-calc-result {
  background: var(--accent); color: var(--on-accent);
}
.op-sp-cover-wrap, .op-sp-cover-default { background: linear-gradient(135deg, var(--accent) 0%, #2F4A52 100%); }
.fph-band-dark h1, .fph-band-dark h2, .fph-band-dark h3, .op-bs-hero h1, .op-bs-hero h2, .op-bs-hero h3,
.op-porto-hero h1, .op-port-hero h1, .op-port-hero h2 { color: var(--on-accent); }
.fph-band-dark p, .op-bs-hero p, .op-port-hero p, .op-porto-hero p { color: rgba(243,245,244,.82); }
.fph-band-dark .btn-primary, .op-bs-hero .btn-primary, .op-port-hero .btn-primary, .op-porto-hero .btn-primary {
  background: var(--on-accent); border-color: var(--on-accent); color: var(--accent);
}
.fph-band-dark .btn-primary:hover, .op-bs-hero .btn-primary:hover, .op-port-hero .btn-primary:hover {
  background: transparent; color: var(--on-accent); border-color: var(--on-accent);
}
.fph-band-dark .btn-ghost, .op-bs-hero .btn-ghost, .op-port-hero .btn-ghost, .op-porto-hero .btn-ghost,
.op-bs-hero .btn-outline-light, .op-porto-hero .op-porto-ghost-btn {
  background: transparent; color: var(--on-accent); border: 1px solid rgba(243,245,244,.6);
}
.fph-band-dark .btn-ghost:hover, .op-bs-hero .btn-ghost:hover, .op-port-hero .btn-ghost:hover, .op-porto-hero .btn-ghost:hover {
  background: var(--on-accent); color: var(--accent); border-color: var(--on-accent);
}
.op-bid-count-badge, .op-explore-mode-count, .op-port-price-badge, .op-sp-price-tag, .fph-tier { background: var(--accent); color: var(--on-accent); }
.op-sp-avatar-initials, .fph-avatar, .op-apply-step-num { background: var(--accent); color: var(--on-accent); }
.fph-footer { background: var(--fph-bg); color: var(--fph-muted); }
.fph-gig-thumb-placeholder, .op-sp-work-thumb-ph, .op-port-card-noimg { color: var(--fph-faint); }

/* ── PAGE-LEVEL: shared components in Stone ─────────────────────────────── */
.fph-card, .fph-stat, .fph-dash-sidebar, .fph-gig-card, .op-job-card, .op-bid-card, .op-order-summary,
.op-sp-contact-card, .op-sp-review-card, .op-sp-work-card, .op-port-card, .op-portfolio-item-card, .op-bid-form-card,
.op-calc-card, .op-level-card, .op-role-card, .op-step-card, .op-auth-card {
  background: var(--fph-white); border: 1px solid var(--fph-edge); border-radius: var(--radius); box-shadow: none;
}
.fph-card:hover, .fph-gig-card:hover, .op-job-card:hover, .op-sp-work-card:hover, .op-port-card:hover { border-color: var(--fph-dark); transform: none; box-shadow: none; }
.fph-gig-title, .op-job-title { font-weight: 500; }
.fph-pill, .op-budget-badge, .op-deadline-badge, .fph-tag, .seller-level-badge { border-radius: var(--radius); }
.fph-tag { color: var(--fph-muted); }
.fph-section, .fph-section-hd { background: transparent; }
.fph-eyebrow, .op-section-label, .op-sp-section-label, .op-filter-label { font-size: .85rem; color: var(--fph-muted); letter-spacing: 0; text-transform: none; }
.fph-cell { background: var(--fph-bg); border: 0; }
.op-hero-mode-tab, .op-explore-mode-btn, .op-port-cat-tab, .op-porto-tab { border-radius: var(--radius); }
.op-status-banner { border-radius: var(--radius); }
.fph-order-timeline, .fph-timeline-step { font-weight: 400; }
.notif-item, .fph-message { border-radius: var(--radius); }

/* explainer modal (How it works) */
.op-ex-modal, .op-ex-gig, .op-ex-job, .op-ex-bid, .op-ex-escrow, .op-ex-pill, .op-ex-cap, .op-ex-close, .op-ex-dots button { border-radius: var(--radius) !important; box-shadow: none !important; }
.op-ex-modal { background: var(--fph-white); border: 1px solid var(--fph-edge); }
.op-ex-title { font-weight: 300; letter-spacing: -.02em; }
.op-ex-kicker { text-transform: none; letter-spacing: 0; color: var(--fph-muted); }

/* admin */
.admin-sidebar { background: var(--fph-dark); }
.admin-sidebar a { color: rgba(243,245,244,.72); }
.admin-sidebar a:hover, .admin-sidebar a.active { color: var(--fph-white); background: rgba(243,245,244,.08); }
.admin-brand { color: var(--fph-white); font-weight: 500; }

.op-earnings-card { background: rgba(243,245,244,.08); border: 1px solid rgba(243,245,244,.28); border-radius: var(--radius); color: var(--on-accent); }
.op-bs-hero .fph-pill { background: transparent; border: 1px solid rgba(243,245,244,.5); color: var(--on-accent); }

/* AI tools hero (same slate band as the other page heroes) */
.op-ai-hero { background: var(--accent); color: var(--on-accent); padding: 80px 0; }
.op-ai-hero .lead, .op-ai-hero .text-soft, .op-ai-hero .fph-eyebrow { color: rgba(243,245,244,.82) !important; }
.op-ai-hero .btn-dark, .op-ai-hero .btn-primary { background: var(--on-accent); border-color: var(--on-accent); color: var(--accent); }
.op-ai-hero .btn-dark:hover, .op-ai-hero .btn-primary:hover { background: transparent; color: var(--on-accent); border-color: var(--on-accent); }
.op-ai-hero .btn-ghost { background: transparent; color: var(--on-accent); border: 1px solid rgba(243,245,244,.6); }
.op-ai-hero .btn-ghost:hover { background: var(--on-accent); color: var(--accent); border-color: var(--on-accent); }
.admin-content { min-width: 0; overflow-x: auto; }