/* Awesome Intune Tools — token system
   Two-polarity canvas: violet midnight for hero/CTA bands, white for the
   dense directory and transactional pages. Lime is scarce by design. */

:root {
  /* brand & accent */
  --primary: #150f23;
  --ink-deep: #1f1633;
  --lime: #c2ef4e;
  --pink: #fa7faa;
  --violet: #6a5fc1;
  --violet-deep: #422082;
  --violet-mid: #79628c;

  /* surface */
  --canvas-dark: #1f1633;
  --night: #150f23;
  --canvas-light: #ffffff;
  --press-light: #f0f0f0;
  --hairline-violet: #362d59;
  --hairline-cool: #cfcfdb;
  --hairline-cloud: #e5e7eb;
  --paper: #f7f7fa;

  /* text */
  --on-primary: #ffffff;
  --ink: #1f1633;
  --ink-press: #1a1a1a;
  --on-dark-muted: rgba(255, 255, 255, 0.72);
  --on-dark-faint: rgba(255, 255, 255, 0.18);
  --ink-muted: #5b5470;

  /* spacing */
  --xxs: 2px; --xs: 4px; --sm: 8px; --md: 12px;
  --lg: 16px; --xl: 24px; --xxl: 32px; --section: 96px;

  /* radius */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px;
  --r-lg: 10px; --r-xl: 12px; --r-xxl: 18px; --r-full: 9999px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas-light);
  color: var(--ink);
  font-family: Rubik, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: "Space Grotesk", Rubik, system-ui, sans-serif;
  margin: 0;
}

a { color: var(--violet); }

.wrap { width: min(1200px, 100% - 3rem); margin-inline: auto; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -9999px; background: #fff; color: var(--ink); padding: var(--md) var(--lg); z-index: 60; }
.skip:focus { left: var(--lg); top: var(--lg); }
:focus-visible { outline: 3px solid rgba(59, 130, 246, 0.5); outline-offset: 2px; }

/* ---------------- typography roles ---------------- */
.eyebrow {
  font-size: 12px; font-weight: 600; line-height: 1.8;
  letter-spacing: 0.25px; text-transform: uppercase;
  color: var(--violet-mid); margin: 0 0 var(--md);
}
.eyebrow-dark { color: rgba(255, 255, 255, 0.55); }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: Rubik, sans-serif;
  font-size: 14px; font-weight: 700; line-height: 1.14;
  letter-spacing: 0.2px; text-transform: uppercase;
  padding: var(--md) var(--lg); border-radius: var(--r-md);
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  min-height: 44px;
}
.btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn-primary:active { background: #efefef; color: var(--ink-press); }
.btn-inverted { background: var(--on-primary); color: var(--ink-deep); box-shadow: rgba(0, 0, 0, 0.08) 0 2px 8px 0; }
.btn-inverted:active { background: var(--press-light); color: var(--ink-press); }
.btn-ghost-dark {
  background: var(--on-dark-faint); color: var(--on-primary);
  border-radius: var(--r-xl); padding: var(--sm) var(--lg);
  font-weight: 500; line-height: 1.29;
}
.btn-outline { background: transparent; color: var(--ink-deep); border-color: var(--hairline-cool); font-weight: 500; }
.btn-outline:hover { border-color: var(--ink-deep); }

/* ---------------- masthead ---------------- */
.top { background: var(--canvas-dark); padding: var(--lg) 0; }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: var(--lg); flex-wrap: wrap; }
.mark {
  display: inline-flex; align-items: center; gap: var(--sm);
  color: #fff; text-decoration: none;
  font-family: "Space Grotesk", sans-serif; font-size: 17px; font-weight: 700;
}
.mark svg { width: 24px; height: 24px; color: var(--lime); flex: none; }
.top-links { display: flex; align-items: center; gap: var(--xl); }
.top-links a {
  color: var(--on-dark-muted); text-decoration: none;
  font-size: 14px; font-weight: 500; letter-spacing: 0.2px; text-transform: uppercase;
}
.top-links a:hover { color: #fff; }
.top-links .btn { color: var(--ink-deep); }

/* ---------------- hero ---------------- */
.hero {
  position: relative; background: var(--canvas-dark); color: #fff;
  padding: 84px 0 var(--section); overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 32% 68%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.5px 1.5px at 55% 18%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 74% 52%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 88% 30%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 22% 88%, rgba(255,255,255,.3), transparent),
    radial-gradient(1.5px 1.5px at 66% 82%, rgba(255,255,255,.28), transparent),
    radial-gradient(1px 1px at 45% 40%, rgba(255,255,255,.25), transparent);
}
.hero > .wrap { position: relative; z-index: 1; }
.hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem); font-weight: 700; line-height: 1.08;
  max-width: 15ch; margin-bottom: var(--xl);
}
.chip-lime {
  background: var(--lime); color: var(--ink-deep);
  border-radius: var(--r-xs); padding: 0 var(--md); white-space: nowrap;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.lede {
  font-size: 16px; font-weight: 400; line-height: 2;
  color: var(--on-dark-muted); max-width: 56ch; margin: 0 0 var(--xxl);
}

.search { max-width: 620px; }
.search-row { display: flex; gap: var(--sm); }
#q {
  flex: 1; min-width: 0;
  padding: var(--md) var(--lg); min-height: 52px;
  font: 500 16px Rubik, sans-serif; color: var(--ink-deep);
  background: #fff; border: 1px solid transparent; border-radius: var(--r-md);
}
#q::placeholder { color: #8b86a0; font-weight: 400; }
#q:focus { outline: none; box-shadow: 0 0 0 3px rgba(194, 239, 78, 0.55); }
.tally {
  margin: var(--md) 0 0; font-size: 14px; font-weight: 400;
  color: var(--on-dark-muted); font-variant-numeric: tabular-nums;
}

.chips { display: flex; flex-wrap: wrap; gap: var(--sm); margin-top: var(--xl); }
.chip {
  font-family: Rubik, sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: 0.2px; text-transform: uppercase;
  color: var(--on-dark-muted); background: transparent;
  border: 1px solid var(--hairline-violet); border-radius: var(--r-xl);
  padding: var(--sm) var(--lg); cursor: pointer; min-height: 34px;
}
.chip b { font-weight: 500; opacity: .55; margin-left: var(--xs); font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--violet-mid); color: #fff; }
.chip.on { background: var(--violet-mid); border-color: var(--violet-mid); color: #fff; }

/* ---------------- directory (light band) ---------------- */
.directory { background: var(--paper); padding: var(--section) 0; }
.layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
.rail { position: sticky; top: var(--xl); }
.rail ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline-cloud); }
.rail li { display: flex; justify-content: space-between; gap: var(--sm); border-bottom: 1px solid var(--hairline-cloud); }
.rail li a { flex: 1; padding: 10px 0; font-size: 14px; color: var(--ink-deep); text-decoration: none; }
.rail li a:hover { color: var(--violet); }
.rail li span { padding: 10px 0; font-size: 12px; color: var(--violet-mid); font-variant-numeric: tabular-nums; }
.rail-note { margin-top: var(--lg); font-size: 12px; font-weight: 400; color: var(--ink-muted); line-height: 1.6; }

.cat { margin-bottom: 64px; scroll-margin-top: var(--xl); }
.cat-head { margin-bottom: var(--xl); }
.cat-head h2 { font-size: 27px; font-weight: 500; line-height: 1.25; }
.cat-head p { margin: var(--sm) 0 0; font-size: 16px; font-weight: 400; color: var(--ink-muted); max-width: 62ch; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: var(--md); }

.tool {
  background: var(--canvas-light); border: 1px solid var(--hairline-cloud);
  border-radius: var(--r-xl); padding: var(--xl) var(--lg);
  display: flex; flex-direction: column;
}
.tool:hover { border-color: var(--violet-mid); }
.tool h3 { font-size: 18px; font-weight: 600; line-height: 1.25; margin-bottom: var(--xxs); }
.tool h3 a { color: var(--ink-deep); text-decoration: none; }
.tool h3 a:hover { text-decoration: underline; }
.by { margin: 0 0 var(--md); font-size: 14px; font-weight: 400; color: var(--violet-mid); }
.desc { margin: 0 0 var(--lg); font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--ink-muted); flex: 1; }
.meta { margin: 0; display: flex; align-items: center; gap: var(--sm); flex-wrap: wrap; }
.kind {
  font-size: 10px; font-weight: 600; line-height: 1.8; letter-spacing: 0.25px;
  text-transform: uppercase; padding: var(--xxs) var(--sm); border-radius: var(--r-xs);
  background: var(--night); color: #fff;
}
.kind-web { background: var(--violet-deep); }
.kind-guide { background: var(--violet-mid); }
.src { font-size: 12px; font-weight: 400; color: var(--ink-muted); font-family: Monaco, Menlo, "Ubuntu Mono", monospace; }

.empty { padding: 64px 0; font-size: 16px; color: var(--ink-muted); }
.empty button { font: inherit; color: var(--violet); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

/* ---------------- dark CTA band ---------------- */
.band-dark { background: var(--canvas-dark); color: #fff; padding: var(--section) 0; }
.band-dark h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); font-weight: 700; line-height: 1.1; max-width: 18ch; }
.band-dark .sub { font-size: 16px; font-weight: 400; line-height: 2; color: var(--on-dark-muted); max-width: 56ch; margin: var(--lg) 0 var(--xxl); }
.band-actions { display: flex; gap: var(--md); flex-wrap: wrap; }

/* ---------------- page shells (light transactional) ---------------- */
.page { background: var(--paper); padding: 64px 0 var(--section); }
.page-head { max-width: 62ch; margin-bottom: 40px; }
.page-head h1 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 700; line-height: 1.12; }
.page-head .intro { font-size: 16px; font-weight: 400; line-height: 1.75; color: var(--ink-muted); margin: var(--lg) 0 0; }

.split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; }

/* ---------------- form ---------------- */
.form-card {
  background: var(--canvas-light); border: 1px solid var(--hairline-cloud);
  border-radius: var(--r-xl); padding: var(--xxl);
  box-shadow: rgba(0,0,0,0.1) 0 10px 15px -3px, rgba(0,0,0,0.1) 0 4px 6px -4px;
}
.fieldset { border: 0; margin: 0 0 var(--xxl); padding: 0; }
.fieldset:last-of-type { margin-bottom: var(--xl); }
.fieldset legend {
  padding: 0; margin-bottom: var(--lg); width: 100%;
  font-size: 10px; font-weight: 600; letter-spacing: 0.25px; text-transform: uppercase;
  color: var(--violet-mid); border-bottom: 1px solid var(--hairline-cloud); padding-bottom: var(--sm);
}
.field { margin-bottom: var(--lg); }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-size: 16px; font-weight: 500; color: var(--ink-deep); margin-bottom: var(--xs); }
.field .hint { font-size: 14px; font-weight: 400; color: var(--ink-muted); margin: 0 0 var(--sm); }
.field .opt { font-weight: 400; color: var(--violet-mid); font-size: 14px; }
.field input, .field select, .field textarea {
  width: 100%; padding: var(--md); min-height: 44px;
  font: 500 16px Rubik, sans-serif; color: var(--ink-deep);
  background: #fff; border: 1px solid var(--hairline-cool); border-radius: var(--r-sm);
}
.field input::placeholder, .field textarea::placeholder { color: #a19bb0; font-weight: 400; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--violet);
  box-shadow: rgba(0, 0, 0, 0.15) 0 2px 10px inset;
}
.field textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
.field-invalid input, .field-invalid select, .field-invalid textarea { border-color: #b3261e; }
.err { color: #b3261e; font-size: 14px; font-weight: 400; margin: var(--xs) 0 0; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lg); }
.count { font-size: 12px; font-weight: 400; color: var(--ink-muted); text-align: right; margin: var(--xs) 0 0; font-variant-numeric: tabular-nums; }
.form-actions { display: flex; align-items: center; gap: var(--lg); flex-wrap: wrap; padding-top: var(--xl); border-top: 1px solid var(--hairline-cloud); }
.form-actions .note { font-size: 14px; font-weight: 400; color: var(--ink-muted); margin: 0; flex: 1; min-width: 220px; }

/* live preview */
.aside-sticky { position: sticky; top: var(--xl); display: grid; gap: var(--xl); }
.preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sm); margin-bottom: var(--md); }
.panel { background: var(--canvas-light); border: 1px solid var(--hairline-cloud); border-radius: var(--r-xl); padding: var(--xl); }
.panel h2 { font-size: 20px; font-weight: 600; margin-bottom: var(--md); }
.panel p { font-size: 14px; font-weight: 400; color: var(--ink-muted); margin: 0 0 var(--sm); line-height: 1.6; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 0 0 var(--lg) 34px; font-size: 14px; font-weight: 400; color: var(--ink-muted); line-height: 1.6; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -1px;
  width: 22px; height: 22px; border-radius: var(--r-full);
  background: var(--night); color: var(--lime);
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
}
.steps strong { color: var(--ink-deep); font-weight: 600; }

/* ---------------- sponsor tiers ---------------- */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--xl); margin: 40px 0; }
.tier { background: #fff; border: 1px solid var(--hairline-cloud); border-radius: var(--r-xl); padding: var(--xxl); display: flex; flex-direction: column; }
.tier h3 { font-size: 24px; font-weight: 500; margin-bottom: var(--md); }
.tier p { font-size: 16px; font-weight: 400; color: var(--ink-muted); line-height: 1.6; margin: 0; flex: 1; }
.tier ul { list-style: none; margin: var(--lg) 0 0; padding: 0; }
.tier li { font-size: 14px; font-weight: 400; color: var(--ink-muted); padding-left: var(--lg); position: relative; margin-bottom: var(--sm); }
.tier li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--violet-mid); }
.tier-featured { background: var(--night); border-color: var(--night); color: #fff; }
.tier-featured h3 { color: #fff; }
.tier-featured p, .tier-featured li { color: var(--on-dark-muted); }
.tier-featured li::before { background: var(--lime); }

.callout { background: #fff; border: 1px solid var(--hairline-cloud); border-left: 3px solid var(--lime); border-radius: var(--r-md); padding: var(--xl); margin: 40px 0; }
.callout h2 { font-size: 20px; font-weight: 600; margin-bottom: var(--sm); }
.callout p { font-size: 16px; font-weight: 400; color: var(--ink-muted); line-height: 1.6; margin: 0; max-width: 70ch; }

/* ---------------- footer ---------------- */
.squiggle { display: block; width: 100%; height: 14px; color: var(--lime); background: var(--canvas-dark); }
.squiggle svg { display: block; width: 100%; height: 100%; }
.foot { background: var(--canvas-dark); color: var(--on-dark-muted); padding: var(--section) 0 40px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px var(--xl); }
.foot h3 { color: #fff; font-size: 10px; font-weight: 600; letter-spacing: 0.25px; text-transform: uppercase; margin-bottom: var(--lg); }
.foot p { font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0; max-width: 40ch; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: var(--sm); }
.foot a { color: var(--on-dark-muted); text-decoration: none; font-size: 14px; font-weight: 400; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot-base { margin-top: 56px; padding-top: var(--xl); border-top: 1px solid var(--hairline-violet); font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.5); }
.foot-base a { color: rgba(255,255,255,0.5); text-decoration: underline; }

/* ---------------- responsive ---------------- */
@media (max-width: 991px) {
  .layout { grid-template-columns: 1fr; gap: var(--xl); }
  .rail { position: static; }
  .rail ul { display: none; }
  .split { grid-template-columns: 1fr; }
  .aside-sticky { position: static; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  :root { --section: 56px; }
  .wrap { width: min(1200px, 100% - 2rem); }
  .top-links { gap: var(--lg); }
  .top-links a:not(.btn) { display: none; }
  .hero { padding: 48px 0 56px; }
  .grid { grid-template-columns: 1fr; }
  .row-2 { grid-template-columns: 1fr; }
  .form-card { padding: var(--xl) var(--lg); }
  .foot-grid { grid-template-columns: 1fr; gap: var(--xl); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}