/* ALMI Face v0.1  -  market shell (self-contained) */
:root{
  --blue:#0B3A73; --ice:#D8EBF9; --green:#54A936; --brass:#B6872A;
  --ink:#121724; --panel:#19203a; --channel:#E8E9EA; --deny:#9A2B2B;
  --line:rgba(18,23,36,.12); --line-dark:rgba(255,255,255,.1);
  --soft:rgba(18,23,36,.68); --ice-soft:rgba(216,235,249,.72);
  --disp:"Michroma",system-ui,sans-serif;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --radius:16px; --max:1100px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--sans); color:var(--ink); line-height:1.55;
  background:var(--channel); min-height:100vh;
}
img{max-width:100%; display:block}
a{color:var(--blue); text-underline-offset:3px}
a:hover{color:var(--ink)}
.spine{
  position:fixed; left:0; top:0; width:6px; height:100%; z-index:50;
  background:linear-gradient(180deg,var(--blue) 0%,#1D5663 45%,var(--green) 80%,var(--ink) 100%);
}
.shell{max-width:var(--max); margin:0 auto; padding:0 20px}
.eyebrow{
  font-family:var(--disp); font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass); margin:0 0 10px;
}
h1,h2,h3{line-height:1.2; font-weight:600}
h1{font-family:var(--disp); font-size:clamp(1.55rem,4.2vw,2.35rem); letter-spacing:.03em; margin:0 0 12px}
h2{font-family:var(--disp); font-size:clamp(1.1rem,2.8vw,1.45rem); letter-spacing:.04em; margin:0 0 10px}
h3{font-size:1.05rem; margin:0 0 8px}
.lede{font-size:1.08rem; color:var(--soft); max-width:48ch; margin:0 0 20px}
.sub{color:var(--soft); font-size:.95rem}

/* top nav */
.topnav{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 0; border-bottom:1px solid var(--line); margin-bottom:0;
  position:sticky; top:0; z-index:40;
  background:rgba(232,233,234,.92); backdrop-filter:blur(12px);
}
.topnav .brand{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit;
}
.topnav .brand img.mark{width:40px; height:40px; border-radius:10px}
.topnav .brand .name{
  font-family:var(--disp); font-size:13px; letter-spacing:.2em; margin:0;
}
.topnav .brand .line{font-size:11px; color:var(--brass); margin:2px 0 0}
.topnav .links{display:flex; flex-wrap:wrap; gap:6px 14px; margin-left:auto; align-items:center}
.topnav .links a{
  font-size:.84rem; font-weight:500; color:var(--soft); text-decoration:none;
}
.topnav .links a:hover,.topnav .links a[aria-current="page"]{color:var(--ink)}
.topnav .links a.cta{
  background:var(--blue); color:#fff; padding:8px 14px; border-radius:999px;
}
.topnav .links a.cta:hover{color:#fff; filter:brightness(1.08)}
.allow-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--green);
}
.allow-pill i{
  width:8px; height:8px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 3px rgba(84,169,54,.22);
}

/* hero */
.hero-face{
  display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center;
  padding:36px 0 48px;
}
@media(max-width:860px){.hero-face{grid-template-columns:1fr; padding-top:24px}}
.hero-card{
  border-radius:20px; overflow:hidden; border:1px solid #3f3f46;
  background:var(--ink); box-shadow:0 28px 70px rgba(18,23,36,.28);
}
.hero-card img.hero{width:100%; height:auto; max-height:280px; object-fit:cover; object-position:center 40%}
.hero-card .bar{display:flex; align-items:center; gap:12px; padding:14px 16px; color:var(--ice)}
.hero-card .bar .name{font-family:var(--disp); font-size:14px; letter-spacing:.18em; margin:0}
.hero-card .bar .line{font-size:12px; color:var(--brass); margin:3px 0 0}
.hero-card .bar .sub{font-size:11px; color:#a1a1aa; margin:4px 0 0; font-family:var(--mono)}

/* buttons */
.btn-row{display:flex; flex-wrap:wrap; gap:10px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:999px; font:inherit; font-weight:600; font-size:.92rem;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:transform .12s, filter .12s;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--blue); color:#fff}
.btn-primary:hover{color:#fff; filter:brightness(1.06)}
.btn-brass{background:linear-gradient(135deg,#8a6420,var(--brass)); color:#0c1016; border:0}
.btn-brass:hover{color:#0c1016}
.btn-ghost{background:#fff; color:var(--blue); border-color:var(--line)}
.btn-ghost:hover{color:var(--ink); border-color:rgba(11,58,115,.35)}
.btn-block{width:100%}

/* sections */
section.block{padding:40px 0}
section.block.dark{
  background:var(--ink); color:var(--ice);
  margin:0 calc(50% - 50vw); padding-left:max(20px, calc(50vw - var(--max)/2));
  padding-right:max(20px, calc(50vw - var(--max)/2));
}
section.block.dark .sub, section.block.dark .lede{color:var(--ice-soft)}
section.block.dark a{color:var(--ice)}
.sec-head{margin-bottom:20px}
.sec-head .hint{font-size:.85rem; color:var(--soft)}

/* cards */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.2rem 1.25rem; display:flex; flex-direction:column; gap:6px;
  text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s, transform .15s;
}
a.card:hover{
  border-color:rgba(11,58,115,.3); box-shadow:0 14px 40px rgba(18,23,36,.1);
  transform:translateY(-2px);
}
.card .tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue); margin:0;
}
.card p{margin:0; color:var(--soft); font-size:.92rem; flex:1}
.card .price{
  font-family:var(--mono); font-size:1.1rem; font-weight:600; color:var(--ink); margin-top:8px;
}
.card .meta{font-size:.78rem; color:#7a8494; font-family:var(--mono)}
.card.featured{border-color:rgba(182,135,42,.45); background:linear-gradient(180deg,#fff,rgba(216,235,249,.4))}

.panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.35rem 1.4rem;
}
.panel.dark{background:var(--panel); border-color:var(--line-dark); color:var(--ice)}
.panel.dark p,.panel.dark .sub{color:var(--ice-soft)}

label{display:block; margin:12px 0 4px; font-weight:600; font-size:.9rem}
input,textarea,select{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px;
  font:inherit; background:#fff; color:var(--ink);
}
input:focus,textarea:focus,select:focus{
  outline:2px solid rgba(11,58,115,.22); border-color:var(--blue);
}

.fine{font-size:.82rem; color:#666; margin:12px 0 0}
.foot{
  margin-top:48px; padding:28px 0 48px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px 20px; justify-content:space-between;
  font-size:.8rem; color:#666;
}
.foot a{color:var(--blue); text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot .mark{height:28px; display:inline-block; vertical-align:middle; margin-right:6px}

.score{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:11px; color:var(--green);
}
.score b{font-size:13px}
.chip-row{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0}
.chip{
  font-size:12px; padding:5px 10px; border-radius:999px;
  background:rgba(11,58,115,.08); color:var(--blue); border:1px solid rgba(11,58,115,.12);
}
.note{
  border-left:3px solid var(--green); padding:10px 14px;
  background:rgba(84,169,54,.08); border-radius:0 10px 10px 0;
  font-size:.92rem; color:var(--soft); margin:0 0 16px;
}
.provisional{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--brass);
}