/* Clariviant.com hub shared design system
 * Source of truth: Clariviant Ecosystem Blueprint v1.5 (Section 9).
 * Header structural pattern derived from the author site
 *   (Dokument\Cognitive Debt\index.html), read-only pattern donor.
 * Palette: institutional navy + steel blue + Clariviant blue.
 *   The author site's cream/red is deliberately NOT imported here:
 *   person and company are two brands.
 */

/* ---------- Tokens ---------- */
:root{
  --ink:         #0A1527;   /* primary, deep navy */
  --steel:       #2B6DA1;   /* secondary, steel blue */
  --accent:      #4A90D9;   /* Clariviant blue */
  --paper:       #FFFFFF;
  --paper-2:     #F4F6F9;   /* alt-section neutral */
  --line:        #E1E5EB;
  --text:        #14161A;
  --text-soft:   #4A5363;
  --text-muted:  #6E7787;

  /* Per-product accents — applied to section theming and UI only.
   * Logo files are never recolored (Blueprint Section 10). */
  --ailedra-accent:     #4A90D9;   /* family blue */
  --aidelibra-accent:   #1F5E3F;   /* harmonized institutional green */
  --leaderbench-accent: #2B6DA1;   /* steel blue */

  --maxw: 1140px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--text);
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; height:auto; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }

/* ---------- Header (responsive pattern: nav wraps below brand on narrow) ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px 28px;
  min-height:76px;
  /* Vertical-only padding via longhand so .wrap's horizontal padding (0 32px)
   * survives. Using the shorthand `padding:14px 0` would zero the horizontal
   * sides and push the header content flush to the viewport edge, breaking
   * grid alignment with the body and footer wraps. */
  padding-top:14px;
  padding-bottom:14px;
}
.brand{
  display:flex; align-items:center; gap:14px;
  font-weight:600; letter-spacing:0.04em;
  color:var(--ink);
  font-size:15px;
  text-transform:uppercase;
}
.brand img{
  height:38px; width:auto;
  display:block;
}
.brand .bname{ display:none; }   /* the logo carries the brand; text is a fallback */

.navlinks{
  display:flex; flex-wrap:wrap; gap:24px;
  align-items:center;
}
.navlinks a{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-weight:500;
  color:var(--text-soft);
  padding:4px 0;
  border-bottom:1.5px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.navlinks a:hover,
.navlinks a[aria-current="page"]{
  color:var(--ink);
  border-bottom-color:var(--accent);
}

/* On narrow screens: brand sits on its own line; nav links stack and wrap below.
 * (Brief Section 9: with seven nav items, nothing must overflow or be clipped on a phone.) */
@media (max-width:860px){
  .nav{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }
  .navlinks{
    width:100%;
    gap:14px 22px;
    row-gap:10px;
  }
  .navlinks a{ font-size:12px; letter-spacing:0.12em; }
}

/* ---------- Sections ---------- */
main{ display:block; }
section{ padding:84px 0; border-bottom:1px solid var(--line); }
section:last-of-type{ border-bottom:none; }
section.alt{ background:var(--paper-2); }

.eyebrow{
  text-transform:uppercase;
  letter-spacing:0.24em;
  font-size:12px;
  font-weight:600;
  color:var(--steel);
  margin-bottom:18px;
}
h1, h2, h3, h4{
  color:var(--ink);
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.18;
}
h1{ font-size:clamp(2rem, 4.6vw, 3.4rem); }
h2.sec{ font-size:clamp(1.7rem, 3.6vw, 2.4rem); margin-bottom:28px; max-width:22ch; }
h3{ font-size:1.25rem; margin-bottom:10px; }
.lede{ font-size:clamp(1.15rem, 2.2vw, 1.45rem); line-height:1.45; color:var(--text); max-width:780px; }
.prose p{ max-width:760px; margin-bottom:20px; color:var(--text-soft); }
.prose p.first{ font-size:1.18rem; line-height:1.5; color:var(--text); }
.prose blockquote{
  border-left:3px solid var(--accent);
  padding:6px 0 6px 22px;
  margin:8px 0 28px;
  font-size:1.15rem; line-height:1.5;
  color:var(--text);
  max-width:760px;
}

/* ---------- Hero ---------- */
.hero{ padding:104px 0 80px; }
.hero .wordmark{
  /* Brand wordmark rendered in all caps via text-transform (display element
   * only, not body prose). Letter-spacing tuned for uppercase legibility. */
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.03em;
  line-height:1.05;
  font-size:clamp(2.4rem, 6.4vw, 4.4rem);
  color:var(--ink);
}
.hero .headline{
  font-size:clamp(1.4rem, 3vw, 2.05rem); line-height:1.32;
  font-weight:500; color:var(--ink);
  margin-top:22px; max-width:920px;
}
.hero .subline{
  font-size:clamp(1.05rem, 1.8vw, 1.2rem); line-height:1.5;
  color:var(--text-soft); margin-top:18px; max-width:760px;
}

/* ---------- Components panel (homepage three-card row) ---------- */
.components{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; margin-top:18px; }
.component{
  background:var(--paper);
  border:1px solid var(--line);
  padding:28px 26px;
  display:flex; flex-direction:column; gap:14px;
  transition:border-color .18s ease;
}
.component:hover{ border-color:var(--steel); }
.component .logo{
  height:60px; display:flex; align-items:center;
}
.component .logo img{ max-height:54px; width:auto; }
.component .pname{
  font-weight:600; letter-spacing:0.02em; font-size:1.15rem; color:var(--ink);
}
.component .pcat{
  text-transform:uppercase; letter-spacing:0.14em; font-size:11.5px;
  font-weight:600; color:var(--steel);
}
.component .pdesc{ color:var(--text-soft); font-size:0.97rem; line-height:1.55; }
.component a.more{
  margin-top:auto;
  font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  font-weight:600; color:var(--ink);
  border-bottom:1.5px solid var(--accent);
  padding-bottom:3px; align-self:flex-start;
}
.component a.more:hover{ color:var(--steel); }

@media (max-width:860px){
  .components{ grid-template-columns:1fr; gap:22px; }
}

/* ---------- Product-section page header (used by /ailedra, /aidelibra, /leaderbench) ---------- */
.product-hero{ padding:96px 0 64px; }
.product-hero .pmark{ height:84px; margin-bottom:28px; }
.product-hero .pmark img{ max-height:84px; width:auto; }
.product-hero .pcat{
  text-transform:uppercase; letter-spacing:0.18em; font-size:13px;
  font-weight:600; color:var(--steel); margin-bottom:14px;
}
.product-hero .pname{
  font-weight:700; letter-spacing:-0.01em;
  font-size:clamp(2rem, 4.4vw, 3rem);
  color:var(--ink);
}
.product-hero .ptag{
  font-size:clamp(1.15rem, 2vw, 1.35rem); line-height:1.45;
  color:var(--text); margin-top:16px; max-width:780px;
}

/* Per-product accent applied to UI chrome (not to logos) */
.theme-ailedra     .product-hero .pcat,
.theme-ailedra     .eyebrow,
.theme-ailedra     .prose blockquote{ border-color:var(--ailedra-accent); }
.theme-aidelibra   .product-hero .pcat,
.theme-aidelibra   .eyebrow{ color:var(--aidelibra-accent); }
.theme-aidelibra   .prose blockquote{ border-color:var(--aidelibra-accent); }
.theme-leaderbench .product-hero .pcat,
.theme-leaderbench .eyebrow{ color:var(--leaderbench-accent); }
.theme-leaderbench .prose blockquote{ border-color:var(--leaderbench-accent); }

/* ---------- Lists, contact, footer ---------- */
.kv{ display:grid; grid-template-columns:200px 1fr; gap:22px 28px; margin:18px 0 28px; max-width:760px; }
.kv dt{ font-weight:600; color:var(--ink); letter-spacing:0.04em; }
.kv dd{ color:var(--text-soft); }
@media (max-width:600px){ .kv{ grid-template-columns:1fr; gap:8px 0; } .kv dt{ margin-top:14px; } }

.contact-grid{ display:flex; gap:48px; flex-wrap:wrap; margin-top:12px; }
.contact-item .lbl{
  text-transform:uppercase; letter-spacing:0.18em; font-size:11px;
  font-weight:600; color:var(--steel); margin-bottom:6px;
}
.contact-item a{
  font-size:1.05rem;
  border-bottom:1.5px solid transparent;
  transition:border-color .18s ease;
}
.contact-item a:hover{ border-bottom-color:var(--accent); }

.bridge-note{
  background:var(--paper-2);
  padding:36px 32px;
  border-left:3px solid var(--accent);
  max-width:840px;
  color:var(--text);
}
.bridge-note a{ border-bottom:1.5px solid var(--accent); padding-bottom:2px; }

.btn{
  display:inline-block;
  font-weight:600; text-transform:uppercase; letter-spacing:0.14em;
  font-size:12.5px; padding:13px 24px;
  border:1.5px solid var(--ink); color:var(--ink);
  background:transparent;
  transition:background .18s ease, color .18s ease;
}
.btn:hover{ background:var(--ink); color:#fff; }
.btn.primary{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn.primary:hover{ background:var(--steel); border-color:var(--steel); }

footer{ background:var(--paper-2); border-top:1px solid var(--line); padding:32px 0; }
.foot{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:14px;
  font-size:13px; color:var(--text-muted); letter-spacing:0.02em;
}
.foot .fname{
  font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  font-size:13px; color:var(--ink);
}
.foot a{ border-bottom:1px solid transparent; transition:border-color .18s ease; }
.foot a:hover{ border-bottom-color:var(--accent); }

/* ---------- Reduced motion / print ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
@media print{
  header, footer{ position:static; background:#fff; }
  *{ background:transparent !important; color:#000 !important; }
}