/* Openistic Landing — Dark Locked Theme (no light mode) */

/* ====== Tokens ====== */
:root{
  color-scheme: dark; /* force dark UI */

  /* Brand palette */
  --brown-sugar:#b07156;
  --china-rose:#ab4e68;
  --eggplant:#533745;
  --khaki:#9d9171;
  --lion:#c4a287;

  /* Theme */
  --bg: var(--eggplant);
  --bg-soft:#5b3f4e;
  --text:#f7f2ee;
  --muted:#d7cbd1;

  /* Surfaces & accents */
  --card:#462b36;
  --border: var(--khaki);
  --shade:#3b2430;
  --shadow:0 10px 25px rgba(0,0,0,.28);

  /* Links (body) */
  --link:#e2ccb9;           /* softened peach/linen */
  --link-hover:#e9d9cc;
  --link-underline: rgba(226,204,185,.45);

  /* Top nav links */
  --nav-link: var(--text);
  --nav-link-hover: var(--text);
  --nav-underline: rgba(226,204,185,.65);

  /* Primary button (champagne gradient) */
  --btn1:#e7d3c2;           /* champagne top */
  --btn2:#c9a78e;           /* warm taupe bottom */
  --btnText:#2e2327;        /* deep cocoa */
  --btnRing:#faeadf;        /* warm focus ring */

  --ok: var(--lion);
  --tick: var(--lion);
}

/* ====== Base ====== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, var(--shade), transparent),
    radial-gradient(900px 500px at 100% 10%, var(--shade), transparent),
    var(--bg);
}

/* Global links — calm, consistent */
a{
  color:var(--link);
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:border-color .15s ease, color .15s ease, background-color .15s ease, filter .2s ease;
}
a:hover{
  color:var(--link-hover);
  border-bottom-color:var(--link-underline);
  text-decoration:none;
}
.muted{color:var(--muted)}
.small{font-size:.9rem}

.wrap{max-width:980px; margin:0 auto; padding:24px}

/* ====== Header ====== */
.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; backdrop-filter:saturate(180%) blur(6px);
  background:linear-gradient(to bottom, rgba(0,0,0,.22), transparent);
  border-bottom:1px solid transparent;
}
.brand{
  font-weight:800; letter-spacing:.2px; font-size:1.15rem;
  padding:.35rem .6rem; border:1px solid var(--border); border-radius:10px;
  background:linear-gradient(180deg, var(--bg-soft), var(--card));
  color:var(--text);
}

/* Top nav — steady color, subtle underline on hover */
.nav a{
  margin-left:14px; padding:6px 4px; border-radius:6px;
  color:var(--nav-link);
  border-bottom:2px solid transparent;
  text-decoration:none;
}
.nav a:hover{
  color:var(--nav-link-hover);
  background:transparent;
  border-bottom-color:var(--nav-underline);
  text-decoration:none;
}

/* ====== Hero ====== */
.hero{
  padding:38px 0 8px;
  display:grid; gap:16px;
}
.hero h1{font-size: 2.2rem; line-height: .4; margin: 0;}
.cta-row{display:flex; gap:10px; flex-wrap:wrap}

/* ====== Buttons ====== */
.btn{
  display:inline-block; padding:10px 14px; border-radius:12px;
  border:1px solid var(--border);
  background:var(--card); color:var(--text); text-decoration:none; font-weight:600;
  box-shadow:var(--shadow); transform:translateZ(0);
  transition:filter .2s ease, transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn.primary{
  background:linear-gradient(180deg, var(--btn1), var(--btn2));
  color:var(--btnText);
  border-color:transparent;
  box-shadow:0 8px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.25);
}
/* stronger, more noticeable hover */
.btn.primary:hover{
  filter:brightness(1.08) saturate(1.06);
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.32);
}
.btn.primary:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--btnRing); outline-offset:2px}

/* ====== Badge slot ====== */
.badge-placeholder{
  margin:16px 0 2px; padding:14px; border:1px dashed var(--border); border-radius:14px;
  background:linear-gradient(180deg, var(--bg-soft), transparent);
}
.ghost-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:999px; border:1px solid var(--border);
  background:var(--card);
}
.ghost-badge::before{
  content:"✔"; display:inline-block; width:22px; height:22px; border-radius:50%;
  text-align:center; line-height:22px; background:var(--ok); color:#3a2a2f; font-weight:800;
}

/* ====== Cards & Lists ====== */
.card{
  margin:22px 0; padding:18px; border:1px solid var(--border);
  border-radius:16px; background:var(--card); box-shadow:var(--shadow);
}

.ticks{list-style:none; padding:0; margin:12px 0 0}
.ticks li{padding-left:0px; position:relative; margin:0px 0}
/* bullets → gold checkmark chips (matching badge vibe) */
.ticks li::before {
  content: "✓";
  position: absolute;
  transform: translateY(-20%) translateX(10%); /* shift up half height */
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tick, #c4a287);
  color: #2f2327;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 0 1px var(--border, rgba(0,0,0,.3));
}

.steps{counter-reset:step; padding-left:0; margin:12px 0 0}
.steps li{list-style:none; margin:12px 0; padding-left:40px; position:relative}
.steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:0; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; font-weight:700;
  background:var(--bg-soft); border:1px solid var(--border);
}

details{margin:12px 0}
details.thin summary{font-weight:700}
pre.code{
  overflow:auto; background:var(--bg-soft); border:1px solid var(--border);
  border-radius:12px; padding:12px; margin:10px 0 0;
  font:13px/1.5 ui-monospace,SFMono-Regular,Consolas,Monaco,monospace;
}

/* ====== Footer ====== */
.site-footer{
  margin-top:30px; padding:22px; text-align:center; color:var(--muted);
  border-top:1px solid var(--border);
}

/* ====== Reduced motion ====== */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
}

/* === Brand logo + text (header, top-left) === */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}

/* kill the old pill styles, turn brand into a clean inline cluster */
.site-header .brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0;                 /* remove pill padding */
  border:none;               /* remove pill border */
  background:none;           /* remove gradient background */
  color:var(--text);
  text-decoration:none;
  font-weight:800;
  letter-spacing:.2px;
  font-size:1.05rem;
  line-height:1;
}

/* logo image */
.site-header .brand .brand-logo{
  display:block;
  height:32px;               /* tweak if you want bigger/smaller */
  width:auto;
  border-radius:6px;         /* soft corners; remove if you want square */
}

/* text to the right of the logo */
.site-header .brand .brand-text{
  display:inline-block;
  white-space:nowrap;
}

/* subtle hover without underline shift */
.site-header .brand:hover{
  filter:brightness(1.06);
}

/* keep primary nav aligned on the right and tidy on small screens */
.site-header .nav{
  display:flex; align-items:center; gap:8px;
}
.site-header .nav a{
  margin:0;                  /* rely on gap instead of left-margins */
  padding:6px 4px;
  border-bottom:2px solid transparent;
}
.site-header .nav a:hover{
  border-bottom-color:var(--nav-underline);
}

/* mobile: let the header wrap so brand stays first line */
@media (max-width: 560px){
  .site-header{
    flex-wrap:wrap;
    padding:12px 16px;
  }
  .site-header .nav{
    width:100%;
    justify-content:flex-end;
    gap:12px;
  }
}

.hero {
  background: none; 
}

.hero-logo, .hero p, .mini {
  text-align: center;
}

.cta-row {
  display: flex;
  justify-content: center; /* centers horizontally */
  gap: 1rem;               /* space between buttons */
  margin: 1.5rem 0;
}

.hero-logo img {
  max-width: 240px;
  height:auto;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
  border-radius: 50%;
  padding: 12px;
  background: linear-gradient(135deg, #ab4e68, #533745, #b07156);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  border: 4px solid #fff;  /* clean outer edge */
}

#hero-title {
  text-align: center;
}

.badge {
  text-align: center;
  background: none;
}

/* center the <object> without inline styles */
.badge object{
  display:block;
  margin:0 auto;
  border-radius:12px;
  overflow:hidden;
  background:transparent;
}