/* OkayNatti shared styles: used by every page except the CozyCamp ones.
   Black background, white text, gold accents. Built to be easy to read:
   larger text, strong contrast, clear focus outlines, no background motion. */

:root{
  --bg:#0b0b0c;
  --surface:#151516;
  --surface-2:#1d1d1f;
  --line:rgba(255,255,255,0.14);
  --line-soft:rgba(255,255,255,0.09);
  --white:#ffffff;
  --text:#f4f4f1;
  --text-dim:#cfcfca;     /* body copy on dark: 12:1 contrast */
  --text-faint:#a6a6a1;   /* small labels: 7.5:1 contrast */
  --gold:#d4ac2f;
  --gold-light:#efd27a;
  --r-lg:20px;
  --r-md:14px;
  --r-sm:10px;
  --gutter:24px;
  --nav-h:72px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:var(--nav-h);}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  margin:0; color:var(--text);
  background:var(--bg);
  background-image:radial-gradient(ellipse 900px 520px at 50% -120px, rgba(212,172,47,0.10), transparent 70%);
  background-repeat:no-repeat;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces',Georgia,serif; font-weight:600; margin:0; color:var(--white); line-height:1.15;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--gold); color:#000;}
:focus-visible{outline:3px solid var(--gold-light); outline-offset:3px; border-radius:6px;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}
.skip-link{position:absolute; left:12px; top:-60px; background:var(--gold); color:#141310; padding:10px 16px; border-radius:8px; font-weight:700; z-index:999;}
.skip-link:focus{top:12px;}

.section-inner{max-width:1120px; margin:0 auto; padding:0 var(--gutter);}
.eyebrow{font-size:13px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-light); margin-bottom:14px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 26px; border-radius:100px; font-size:16px; font-weight:600;
  border:1.5px solid transparent; background:transparent; transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.btn-solid{background:var(--gold); color:#141310;}
.btn-solid:hover{background:var(--gold-light);}
.btn-outline{border-color:rgba(255,255,255,0.35); color:var(--white);}
.btn-outline:hover{border-color:var(--white); background:rgba(255,255,255,0.07);}

/* ---------- nav ---------- */
.okn-nav{
  position:sticky; top:0; z-index:200; height:var(--nav-h);
  display:flex; align-items:center; background:rgba(11,11,12,0.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{width:100%; max-width:1120px; margin:0 auto; padding:0 var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:20px;}
.nav-mark{display:flex; align-items:center;}
.nav-logo{height:46px; width:auto;}
@media (max-width:860px){ .nav-logo{height:38px;} }
.nav-links{display:flex; align-items:center; gap:6px;}
.nav-links a{
  font-size:16px; font-weight:500; color:var(--text-dim); padding:10px 14px; border-radius:10px;
  position:relative; transition:color .2s ease, background .2s ease;
}
.nav-links a:hover{color:var(--white); background:rgba(255,255,255,0.06);}
.nav-links a[aria-current="page"], .nav-links a.is-active{color:var(--white); font-weight:600;}
.nav-links a[aria-current="page"]::after, .nav-links a.is-active::after{
  content:''; position:absolute; left:14px; right:14px; bottom:3px; height:3px; border-radius:3px; background:var(--gold);
}
.nav-actions{display:flex; align-items:center; gap:12px;}
.nav-burger{
  display:none; width:48px; height:48px; border:1.5px solid var(--line); border-radius:12px;
  background:transparent; align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.nav-burger span{width:20px; height:2px; background:var(--white); border-radius:2px;}
.mobile-menu{
  position:fixed; inset:var(--nav-h) 0 0 0; z-index:190; background:var(--bg);
  display:flex; flex-direction:column; padding:20px var(--gutter) 40px; overflow-y:auto;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease, visibility .2s;
}
.mobile-menu.open{opacity:1; visibility:visible; pointer-events:auto;}
.mobile-menu a{font-family:'Fraunces',Georgia,serif; font-size:26px; color:var(--white); padding:16px 0; border-bottom:1px solid var(--line-soft);}
.mobile-menu a[aria-current="page"], .mobile-menu a.is-active{color:var(--gold-light);}
.mobile-menu .btn{margin-top:24px; align-self:flex-start; font-family:'Inter',sans-serif; font-size:16px; border-bottom:1.5px solid transparent; padding:12px 26px;}

/* ---------- breadcrumb ---------- */
.crumbs{border-bottom:1px solid var(--line-soft); background:rgba(255,255,255,0.02);}
.crumbs ol{list-style:none; margin:0 auto; max-width:1120px; padding:12px var(--gutter); display:flex; flex-wrap:wrap; gap:6px 8px; font-size:15px; color:var(--text-faint);}
.crumbs li{display:flex; align-items:center; gap:8px;}
.crumbs li + li::before{content:'/'; color:var(--text-faint);}
.crumbs a{color:var(--text-dim); text-decoration:underline; text-decoration-color:rgba(255,255,255,0.25); text-underline-offset:3px;}
.crumbs a:hover{color:var(--white);}
.crumbs [aria-current="page"]{color:var(--white); font-weight:600;}

/* ---------- page header ---------- */
.page-head{padding:64px 0 40px; text-align:center;}
.page-head h1{font-size:clamp(2.2rem,5vw,3.4rem); letter-spacing:-0.01em;}
.page-head .lead{color:var(--text-dim); font-size:19px; max-width:640px; margin:18px auto 0;}
.page-head .cta-row{display:flex; gap:14px; justify-content:center; margin-top:30px; flex-wrap:wrap;}
.page-head .logo-badge{width:72px; height:72px; margin:0 auto 20px;}
.owner-line{margin-top:16px; font-size:15px; color:var(--text-faint);}
.owner-line a{color:var(--gold-light); text-decoration:underline; text-underline-offset:3px;}

/* ---------- sections + cards ---------- */
.block{padding:48px 0; border-top:1px solid var(--line-soft);}
.block-head{max-width:640px; margin:0 0 28px;}
.block-head h2{font-size:clamp(1.6rem,3vw,2.1rem);}
.block-head p{color:var(--text-dim); margin-top:10px;}
.grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:1040px){ .grid-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .grid-4{grid-template-columns:1fr;} }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 24px; display:flex; flex-direction:column; gap:12px;
}
a.card{transition:border-color .2s ease, background .2s ease;}
a.card:hover{border-color:rgba(255,255,255,0.4); background:var(--surface-2);}
.card h3{font-size:1.35rem;}
.card p{color:var(--text-dim); font-size:16px;}
.card-logo{width:52px; height:52px; border-radius:12px; object-fit:contain;}
.card-emoji{width:52px; height:52px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:26px;}
.card-meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:2px;}
.pill{font-size:13px; font-weight:600; padding:4px 11px; border-radius:100px; border:1px solid var(--line); color:var(--text-dim);}
.pill.status-live{border-color:rgba(110,220,140,.5); color:#a5eeb7;}
.pill.status-dev{border-color:rgba(239,210,122,.5); color:var(--gold-light);}
.pill.status-soon{border-color:rgba(255,255,255,.3); color:var(--text-dim);}
.card .go{margin-top:auto; padding-top:6px; font-size:16px; font-weight:600; color:var(--gold-light);}
.facts{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:15px; margin:2px 0;}
.facts dt{color:var(--text-faint);}
.facts dd{margin:0; color:var(--text);}
.empty{color:var(--text-dim); border:1.5px dashed var(--line); border-radius:var(--r-lg); padding:26px; text-align:center;}
.platform-title{display:flex; align-items:center; gap:10px; font-family:'Inter',sans-serif; font-size:15px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin:32px 0 14px;}
.platform-title:first-of-type{margin-top:0;}

/* ---------- partners ---------- */
.partner-card .card-logo{width:64px; height:64px; background:var(--surface-2); border:1px solid var(--line); padding:6px;}
.partner-card .partner-type{font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-light);}
.partner-card .btn{margin-top:auto; align-self:flex-start;}

/* links under a list */
.see-also{margin-top:22px; color:var(--text-dim);}
.see-also a{color:var(--gold-light); font-weight:600; text-decoration:underline; text-underline-offset:3px;}

/* ---------- become-a-partner box + popup form ---------- */
.partner-cta{margin-top:28px; padding:26px; border:1px solid rgba(212,172,47,.45); border-radius:var(--r-lg); background:rgba(212,172,47,.06); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.partner-cta h3{font-size:1.35rem;}
.partner-cta p{color:var(--text-dim); margin-top:6px;}
.okn-modal{width:min(620px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:0; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); color:var(--text); overflow:auto;}
.okn-modal::backdrop{background:rgba(0,0,0,.7);}
.okn-modal-head{position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 24px; background:var(--surface); border-bottom:1px solid var(--line-soft);}
.okn-modal-head h2{font-size:1.5rem;}
.okn-modal-close{width:44px; height:44px; flex:none; border-radius:12px; border:1.5px solid var(--line); background:transparent; color:var(--white); font-size:18px;}
.okn-modal-close:hover{background:rgba(255,255,255,.07);}
.okn-form{display:flex; flex-direction:column; gap:16px; padding:22px 24px 26px;}
.okn-form-note{color:var(--text-dim); font-size:15px;}
.okn-form label{display:flex; flex-direction:column; gap:7px; font-size:15px; font-weight:600; color:var(--text);}
.okn-form input, .okn-form select, .okn-form textarea{font:inherit; font-size:16px; font-weight:400; color:var(--white); background:var(--bg); border:1.5px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; min-height:48px; width:100%;}
.okn-form textarea{resize:vertical;}
.okn-form input:focus, .okn-form select:focus, .okn-form textarea:focus{outline:none; border-color:var(--gold);}
.okn-form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.okn-form .btn{align-self:flex-start;}
.okn-form-status{color:#ffb4a8; font-size:15px; min-height:1em;}
.okn-form-done{padding:34px 24px 30px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;}
.okn-form-done p{color:var(--text-dim);}
@media (max-width:560px){ .okn-form-row{grid-template-columns:1fr;} .okn-form .btn, .partner-cta .btn{width:100%;} }

/* ---------- footer ---------- */
.okn-footer{border-top:1px solid var(--line-soft); padding:56px 0 36px; margin-top:40px;}
.footer-cols{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:28px;}
.footer-brand img{width:40px; height:auto; margin-bottom:14px;}
.footer-brand strong{display:block; font-family:'Fraunces',Georgia,serif; font-size:1.3rem; color:var(--white);}
.footer-brand p{color:var(--text-dim); font-size:15px; margin-top:6px;}
.footer-col h3{font-family:'Inter',sans-serif; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin-bottom:12px;}
.footer-col a{display:block; padding:6px 0; color:var(--text-dim); font-size:16px;}
.footer-col a:hover{color:var(--white); text-decoration:underline; text-underline-offset:3px;}
.footer-base{margin-top:36px; padding-top:24px; border-top:1px solid var(--line-soft); display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; font-size:14px; color:var(--text-faint);}

@media (max-width:860px){
  .nav-links{display:none;}
  .nav-burger{display:flex;}
  .footer-cols{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:1 / -1;}
  .page-head{padding:44px 0 30px;}
}
@media (max-width:480px){
  body{font-size:16.5px;}
  .footer-cols{grid-template-columns:1fr;}
  .page-head .cta-row .btn{width:100%;}
}