/* Clear Roads — dev site shared styles (brand palette) */
:root{
  --navy:var(--ic-navy-900); --navy-2:var(--ic-navy-950); --green:var(--ic-green-600); --green-2:var(--ic-green-700);
  --blue:var(--ic-blue-600); --blue-soft:var(--ic-blue-50);
  --bg:var(--ic-cloud-50); --surface:var(--ic-white); --line:var(--ic-concrete-200);
  --ink-1:var(--ic-asphalt-950); --ink-2:var(--ic-asphalt-650); --ink-3:var(--ic-asphalt-450);
  --mono:var(--ic-font-mono); --font-en:var(--ic-font-sans); --font-fa:var(--ic-font-fa); --radius:var(--ic-radius-lg);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink-1);font-family:var(--font-en);min-height:100vh;display:flex;flex-direction:column;line-height:1.55}
body.fa{font-family:var(--font-fa)}
a{color:inherit}
.hidden{display:none!important}

/* Brand mark */
.brand{display:flex;align-items:center;gap:11px}
.mark{width:38px;height:38px;border-radius:10px;flex:0 0 auto;background:var(--navy);display:grid;place-items:center;position:relative}
.mark::before{content:"";width:15px;height:15px;border-radius:50%;border:3px solid var(--blue);background:var(--surface)}
.mark::after{content:"";position:absolute;bottom:6px;width:20px;height:7px;border-radius:0 0 14px 14px;background:var(--green)}
.wm{font-weight:700;font-size:18px;line-height:1.1;font-family:var(--font-en)}
.wm .c1{color:var(--navy)} .wm .c2{color:var(--green)}
.sub{font-family:var(--mono);font-size:11px;color:var(--blue);letter-spacing:.06em}

/* Header / nav */
header.site{background:var(--surface);border-bottom:1px solid var(--line)}
.bar{max-width:1040px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 24px}
.bar-right{display:flex;align-items:center;gap:8px}
.nav{display:flex;align-items:center;gap:4px}
.nav a{text-decoration:none;color:var(--ink-2);font-size:13.5px;font-weight:500;padding:8px 14px;border-radius:9px;transition:.15s}
.nav a:hover{background:var(--bg);color:var(--navy)}
.nav a.active{color:var(--navy);background:var(--blue-soft)}
.lang{background:transparent;border:1px solid var(--line);color:var(--ink-2);border-radius:8px;padding:7px 13px;font-size:12.5px;cursor:pointer;font-family:inherit}
.lang:hover{border-color:var(--blue);color:var(--blue)}
.back{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink-2);font-size:13px;margin-bottom:18px}
.back:hover{color:var(--navy)}

/* Main / sections */
main{flex:1;width:100%;max-width:1040px;margin:0 auto;padding:34px 24px}
.page-head{margin-bottom:26px}
.page-head h1{font-size:var(--ic-title-lg);line-height:1.1;letter-spacing:-.035em;color:var(--navy);margin-bottom:8px}
.page-head p{font-size:14px;color:var(--ink-2);max-width:60ch;line-height:1.55}
.sec{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:0 0 16px}

/* Card grid + tiles */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:14px}
.tile{position:relative;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:block;transition:border-color var(--ic-duration-fast),transform var(--ic-duration-fast),box-shadow var(--ic-duration-fast)}
a.tile:hover{border-color:var(--blue);box-shadow:0 6px 18px -10px rgba(23,58,94,.25);transform:translateY(-1px)}
.tile h3{font-size:15.5px;margin-bottom:7px;color:var(--navy)}
.tile p{font-size:13px;color:var(--ink-2);line-height:1.55}
.tile .route{font-family:var(--mono);font-size:11px;color:var(--green);margin-top:10px}
.tile.empty{cursor:default;opacity:.92}
.badge{position:absolute;top:14px;inset-inline-end:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);background:var(--blue-soft);border-radius:6px;padding:3px 8px}
.service-tile{padding-top:50px;min-height:205px;display:flex;flex-direction:column}
.service-tile h3{padding-inline-end:72px}
.service-meta{margin-top:auto;padding-top:18px;color:var(--green-2);font-size:12px;font-weight:600}
.badge-available{color:var(--green-2);background:#EAF7EE}
.badge-beta{color:#8A5A12;background:#FBF3E2}

@media (max-width:640px){
  .bar{padding:12px 16px;align-items:flex-start}
  .bar-right{align-items:flex-end;flex-direction:column}
  .nav{max-width:100%;overflow-x:auto}
  main{padding:26px 16px}
  .grid{grid-template-columns:1fr}
}

/* Knowledge / content body */
.prose{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;max-width:760px}
.prose h2{font-size:18px;color:var(--navy);margin:22px 0 10px}
.prose h2:first-child{margin-top:0}
.prose p{font-size:14px;color:var(--ink-1);line-height:1.7;margin-bottom:12px}
.prose ul{margin:0 0 12px;padding-inline-start:22px}
.prose li{font-size:14px;color:var(--ink-2);line-height:1.7}
.stub{border:1px dashed var(--line);border-radius:10px;padding:16px 18px;color:var(--ink-3);font-size:13.5px;background:var(--bg)}

/* Status panel */
.status-row{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:12px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ink-3);flex:0 0 auto}
.dot.ok{background:var(--green)} .dot.bad{background:#C0392B}

/* Footer */
footer.site{border-top:1px solid var(--line);background:var(--surface)}
.foot{max-width:1040px;margin:0 auto;padding:16px 24px;font-family:var(--mono);font-size:11px;color:var(--ink-3);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}