/* =========================
   Obscure Find 
   ========================= */

/* ---------- Design Tokens ---------- */
:root{
  --bg:#0f0f0f; --fg:#fff; --muted:#cfcfcf;
  --card:#141414; --line:#232323;
  --accent:#FFD34D;           /* OU ORANGE #f49021 — yellow #FFD34D */
  --scrim: rgba(0,0,0,.45);
  --radius-lg:20px; --radius-md:12px; --radius-sm:10px;

  /* Layout heights */
  --topbar-h:60px;            /* keep in sync with header height */
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;
  display:flex; min-height:100vh; justify-content:center; align-items:flex-start;
}

/* ---------- App Frame ---------- */
.wrap{
  width:100%; padding:20px 12px; display:flex; justify-content:center;
}
.app{
  width:100%; max-width:960px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:0 8px 30px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
  min-height:calc(100dvh - 40px);
  overflow-y:visible;  /* allow drawer to overlay */
  overflow-x:hidden;
  position:relative;
}

/* ---------- Sticky Topbar & Nav ---------- */
.topbar{
  position:sticky; top:0; height:var(--topbar-h);
  display:flex; align-items:center;
  padding:0; border-bottom:1px solid var(--line);
  background:var(--card); backdrop-filter:saturate(120%) blur(2px);
  z-index:900;
}
.nav{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 18px; }
.nav-left,.nav-right{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.brand-logo img{ height:28px; width:auto; display:block; }
.link{
  color:var(--muted); text-decoration:none; font-size:.95rem; padding:6px 8px; border-radius:8px;
}
.link:hover{ color:var(--accent); background:#1b1b1b; }
.user-block{ color:var(--muted); font-size:.95rem; white-space:nowrap; }
.signout{ font-size:.7rem; color:var(--muted); margin-left:4px; vertical-align:super; padding:0; text-decoration:none; }
.signout:hover{ color:var(--accent); }

/* ---------- Hamburger & Drawer (mobile) ---------- */
.hamburger{
  display:none; background:none; border:0; padding:6px; cursor:pointer; border-radius:8px;
  position:relative; z-index:1000;
}
.hamburger:focus-visible{ outline:2px solid var(--accent); }
.hamburger .bar{
  display:block; width:22px; height:2px; background:#e9e9e9; margin:4px 0;
  transition:transform .2s ease, opacity .2s ease;
}

/* Scrim */
.scrim{
  position:absolute; inset:0; background:var(--scrim);
  opacity:0; pointer-events:none; transition:opacity .18s ease;
  z-index:940; border-radius:var(--radius-lg);
}
.scrim.open{ opacity:1; pointer-events:auto; }

/* Drawer (compact, anchored to topbar’s right corner) */
.drawer{
  display:none;
  position:absolute; top:calc(var(--topbar-h) + 0px); right:12px;
  width:220px; background:#171717; border:1px solid var(--line);
  box-shadow:-4px 6px 20px rgba(0,0,0,.35);
  border-radius:var(--radius-md);
  z-index:950;
}
.drawer.open{ display:block; }

.drawer-header{
  padding:10px 14px; display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--line); position:relative;
}
.drawer-title{ font-weight:700; font-size:.95rem; }
.drawer-close{ background:none; border:0; color:#e9e9e9; font-size:1.2rem; line-height:1; cursor:pointer; }

.mobile-links{ padding:10px 14px; display:flex; flex-direction:column; gap:10px; }
.mobile-links a, .mobile-links span{ color:#e7e7e7; text-decoration:none; font-size:.95rem; }
.mobile-links a:hover{ color:var(--accent); }

.drawer--rounded-bottom .drawer-header{ border-bottom:none; padding-bottom:18px; }
.drawer--rounded-bottom .drawer-header::after{
  content:""; position:absolute; left:16px; right:16px; bottom:-1px; height:12px;
  background:#171717; border:1px solid var(--line); border-top:none;
  border-bottom-left-radius:12px; border-bottom-right-radius:12px;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.drawer--accent-top .drawer-header::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--accent); border-top-left-radius:12px; border-top-right-radius:12px;
}

/* ---------- Tabs (if you use them) ---------- */
.tabs{ display:flex; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding:0 0 8px; position:relative; z-index:500; }
.tabs-sticky{ position:sticky; top:var(--topbar-h); z-index:500; }
.tab{
  appearance:none; background:#1d1d1d; color:#eee; border:1px solid #2a2a2a;
  padding:8px 12px; border-radius:10px; font-weight:600; cursor:pointer;
}
.tab[aria-selected="true"]{ background:var(--accent); color:#111; border-color:transparent; }
.tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.tab-panels{ margin-top:14px; position:relative; z-index:500; }
.tab-panel{ display:none; position:relative; z-index:500; }
.tab-panel.active{ display:block; }

/* ---------- Main ---------- */
main{ padding:20px 18px; flex:1; }
.page{ max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
h1{ margin:0; font-size:1.5rem; }
h2{ margin:.25rem 0 1rem; font-size:1.2rem; }
p{ color:#e1e1e1; line-height:1.55; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding:12px 16px; border-radius:12px; border:1px solid #2a2a2a;
  font-weight:700; text-align:center; cursor:pointer; text-decoration:none; user-select:none;
}
.btn-primary{ background:var(--accent); color:#111; }
.btn-primary:hover{ filter:brightness(1.05); }
.btn-secondary{ background:#1f1f1f; color:#fff; }
.btn-secondary:hover{ filter:brightness(1.1); }

/* ---------- Forms (shared) ---------- */
.form{ width:100%; max-width:440px; display:grid; gap:0; margin:8px 0 0; }
.field{ margin-top:16px; }
.field:first-child{ margin-top:0; }
.field label{ display:block; margin:0 0 8px; color:var(--muted); font-weight:600; }
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid #2a2a2a;
  background:#1a1a1a; color:#fff; font-size:.95rem; outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:#4b4f58; box-shadow:0 0 0 3px rgba(244,144,33,.15);
}
.form-actions{ margin-top:18px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

/* ---------- Cards / sections ---------- */
.card{
  width:100%; background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:24px; box-shadow:0 8px 30px rgba(0,0,0,.35); margin:0 0 18px;
}
table{ width:100%; border-collapse:collapse; margin-top:10px; }
td,th{ padding:8px 6px; border-bottom:1px solid #262626; color:#ddd; text-align:left; }
th{ color:#9a9a9a; font-weight:600; }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--line); padding:12px 18px; color:var(--muted); font-size:.9rem; }
.foot-inner{ max-width:960px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footlinks{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.footlinks a{ color:#9a9a9a; text-decoration:none; }
.footlinks a:hover{ color:var(--accent); }

/* ---------- Full-bleed home (merged home_fullbleed.css) ---------- */
:root { --topbar-h: 67px; } /* extra breathing room for the home */
body.home-fullbleed .wrap{ padding:0; }
body.home-fullbleed .app{
  min-height:100svh; border:0; border-radius:0; box-shadow:none;
}
body.home-fullbleed main{ padding:0; }
body.home-fullbleed .page{
  max-width:960px; margin:0 auto;
  padding:16px 12px 18px;
  padding-left:23px; padding-right:23px; /* breathing room */
}
body.home-fullbleed .footer{
  border-top:1px solid var(--line);
  padding:12px 18px; width:100%;
}
body.home-fullbleed .card{
  background:transparent; border:0; border-radius:0; box-shadow:none;
  padding-left:0; padding-right:0;
}

/* ---------- Page-scoped helpers (from your inline <style>) ---------- */
.eyebrow{
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
  font-size:.78rem;
  margin:0 0 .25rem;
}
.lead{ font-size:1.05rem; color:#ededed; }
.benefit-lines{ display:grid; gap:8px; margin:16px 0 6px; }
.benefit-lines .line{
  border-left:3px solid var(--accent);
  padding:8px 12px; background:#171717; border-radius:12px; color:#f1f1f1;
  border:1px solid #242424; border-left-color:var(--accent);
}
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }
.list-check{ margin:0; padding-left:0; list-style:none; display:grid; gap:10px; }
.list-check li{ position:relative; padding-left:28px; line-height:1.55; color:#e8e8e8; }
.list-check li::before{ content:"✓"; position:absolute; left:0; top:2px; font-weight:900; color:var(--accent); }
.grid-2{ display:grid; gap:10px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.pill{
  border:1px solid var(--line); background:#1a1a1a; color:#eee;
  padding:12px 14px; border-radius:999px; text-align:center;
}
.guide .guide-lead{ font-weight:700; }
.guide .guide-note{
  margin-top:.5rem; padding:12px 14px; border:1px dashed #2a2a2a; border-radius:10px; background:#101010; color:#e6e6e6;
}
.final-cta{ text-align:center; }
.final-cta h2{ margin:.25rem 0 .35rem; }
.final-cta .lead{ margin-bottom:12px; }

.form-actions{ display:flex; gap:10px; flex-wrap:wrap; }
label{ display:block; margin:0 0 6px; color:#cfcfcf; font-weight:600; }

/* size inputs/areas, but NOT selects */
input, textarea{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #2a2a2a;
  background:#1a1a1a;
  color:#fff;
  font-size:.95rem;
  outline:none;
}

/* give selects only the colors */
select{
  background:#1a1a1a;
  color:#fff;
  border:1px solid #2a2a2a;
  border-radius:10px; /* keep if you like, remove if not */
}
input:focus, textarea:focus, select:focus{
  border-color:#4b4f58;
  box-shadow:0 0 0 3px rgba(244,144,33,.15);
}


/* ---------- Responsive ---------- */
@media (min-width:721px){
  .nav-left .link, .nav-right .link, .user-block { display:inline; }
  .hamburger, .drawer, .scrim { display:none; }
}
@media (max-width:720px){
  .hamburger{ display:inline-block; }
  .nav-left .link{ display:none; }
  .user-block{ display:none; }
  .nav-right .link{ display:inline-block; }
  .card{ padding:18px; }
}
@media (max-width:480px){
  .form{ max-width:100%; }
}