/* Homepage-only layer of the bright redesign (#428), loaded last by index.html only, after its
   inline <style> blocks in <body>. Everything else from this file moved, in order, to the end of
   site-components.css in #451. What is left may compete with index.html's inline styles, so it
   still loads after them; it matches nothing on any other page. Light only. */

/* ---------- Homepage controls ---------- */
.rd-button,
html body .home-state-button,
html body .home-state-primary,
html body .home-state-secondary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px !important;
  border: 1px solid var(--ink) !important;
  border-radius: 999px !important;
  background: var(--ink) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.rd-button-secondary,
html body .home-state-button-secondary,
html body .home-state-secondary {
  background: #fff !important;
  color: var(--ink) !important;
}

.rd-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 470px);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  min-height: min(720px, calc(100vh - 90px));
  padding: 48px 0 40px;
}

.rd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.rd-stage { position: relative; flex-direction: column; min-height: 0; }

.rd-card {
  z-index: 2;
  -webkit-backdrop-filter: blur(22px);
}

.rd-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rd-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
}

.rd-trace { display: grid; gap: 6px; }

.rd-note {
  line-height: 1.25;
}

/* Signal rail */
.rd-rail {
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-top: 1px solid var(--rd-line);
  border-bottom: 1px solid var(--rd-line);
  white-space: nowrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .rd-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 32px; }
  .rd-stage { min-height: 400px; }
  
}

@media (max-width: 680px) {
  
  .rd-trace { grid-template-columns: repeat(2, 1fr); }
  .rd-card { transform: none; }
  
  .rd-note { position: static; transform: none; width: auto; }
  .rd-stage { min-height: 0; }

}

/* Oct 5 hero product-review refinement */
.rd-stage{position:relative;display:block;height:430px;min-width:0}
.rd-paper{position:absolute;z-index:0;border:1px solid rgba(21,17,26,.045);background:rgba(249,247,241,.74);box-shadow:0 18px 40px rgba(21,17,26,.035)}

.rd-lines{position:absolute;inset:0;z-index:3;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:1}

.rd-card{position:absolute;z-index:2;left:128px;top:108px;width:376px;border:1px solid #e2e5ec;border-radius:19px;background:rgba(255,255,255,.95);box-shadow:0 20px 42px rgba(21,17,26,.11),0 5px 14px rgba(21,17,26,.035);padding:14px;transform:rotate(2.4deg);order:initial;-webkit-backdrop-filter:none;backdrop-filter:none}

.rd-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;color:#667085;font-size:10px;font-weight:800}
.rd-status{display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:#fff3f8;color:#ee2a7b;padding:6px 10px;font-size:10px;font-weight:850}

.rd-control{border:0;border-radius:0;background:transparent;padding:0}
.rd-card-link{position:relative;z-index:3;display:inline-flex;align-items:center;gap:4px;min-height:24px;margin-top:6px;color:#0f172a;font-size:12px;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.rd-card-link:hover{color:#ee2a7b}
.rd-card-link:focus-visible{outline:2px solid var(--rd-violet,#6b5cff);outline-offset:3px;border-radius:4px}

.rd-trace{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px}

.rd-mini-ui{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.rd-mini-panel{border:1px solid #dfe4ed;border-radius:13px;background:rgba(255,255,255,.92);padding:10px 11px}

.rd-mini-row{display:flex;align-items:center;gap:6px;min-height:28px;border-top:1px solid #eef1f5;color:#667085;font-size:9.4px}

.mini-box{display:inline-grid;place-items:center;flex:0 0 18px;width:18px;height:18px;border:1px solid #dce2eb;border-radius:6px;background:#fff;color:#98a2b3;font-size:8px}
.mini-count{margin-left:auto;display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;font-size:8.5px;font-weight:800}

.rd-review-note{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;border:1px solid rgba(21,17,26,.055);border-radius:12px;padding:10px 13px;box-shadow:0 12px 24px rgba(21,17,26,.07);color:#111827;font-size:11px;line-height:1.08;font-weight:700}

.rd-review-icon{display:grid;place-items:center;width:31px;height:31px;border:1.9px solid currentColor;border-radius:9px;background:rgba(255,255,255,.78);font-size:13px;font-weight:800;flex:0 0 31px}
.human-icon{color:#9a3d35;font-size:16px;background:#fff}

.rd-note{position:absolute;left:-8px;right:auto;bottom:28px;z-index:5;width:178px;border:1px solid #e1d846;border-radius:8px;background:#f6ee52;padding:14px 14px 12px;box-shadow:0 12px 24px rgba(141,132,23,.13);transform:rotate(-8deg);font-size:11.5px;font-weight:760;line-height:1.25;color:#171717}

.rd-rail{overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);border-top:1px solid var(--rd-line);border-bottom:1px solid var(--rd-line);background:transparent;padding:13px 0;white-space:nowrap}
.rd-type-rail{min-height:30px;width:min(100%,1360px);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 clamp(20px,4vw,58px);color:#2a2530;font-size:13px;font-weight:800;letter-spacing:-.01em}
.rd-type-left{display:flex;align-items:center;gap:12px;min-width:0}

.rd-type-label{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;color:#5f5864;font-size:11.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}

.rd-type-dynamic{display:inline-flex;align-items:center;gap:3px;min-width:0}
.rd-type-text{display:inline-block;text-align:left}
.rd-type-cursor{display:inline-block;flex:0 0 1px;width:1px;height:17px;background:#2a2530;opacity:.72;animation:rdCursorBlink 1s steps(1,end) infinite}
@media(prefers-reduced-motion:reduce){.rd-type-cursor{animation:none!important;opacity:.45}}
@media (max-width:1180px) and (min-width:981px){
  .rd-hero{grid-template-columns:minmax(0,1fr) minmax(360px,430px);gap:26px}

  /* the card is 74px wider than the room to its right here (128px in, 376px wide, 430px stage): pull it and its paper sheets left so nothing passes the window edge */
  .rd-card{left:54px}

}
@media (max-width:980px) and (min-width:681px){
  .rd-hero{gap:18px;padding:34px 0 28px}
  .rd-hero-copy{max-width:760px}

  .rd-stage{width:520px;max-width:100%;margin:8px auto 0;transform:scale(.92);transform-origin:top center}
  .rd-note{left:4px;bottom:20px}
  .rd-rail{margin-top:-10px}
}
@media (max-width:680px){
  .rd-hero{display:block;padding:30px 0 22px}

  .rd-actions{margin-top:24px;gap:9px}
  .rd-stage{width:100%;height:auto;margin:34px 0 0;display:grid;gap:12px;transform:none}
  .rd-paper,.rd-lines,.rd-review-note{display:none}
  .rd-card{position:relative;left:auto;top:auto;width:100%;max-width:430px;margin:0 auto;transform:rotate(1.2deg);padding:13px}
  
  .rd-trace{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .rd-mini-ui{grid-template-columns:1fr;gap:8px}
  .rd-note{position:relative;left:auto;bottom:auto;width:172px;margin:-4px 0 0 max(8px,calc(50% - 180px));transform:rotate(-6deg)}
  .rd-rail{margin-top:26px;padding:8px 0}
  .rd-type-rail{font-size:12px;padding:0 18px;gap:14px}
  .rd-type-left{gap:8px}.rd-type-label{font-size:10px}
}

/* #483 (PF-01): on phones the typed phrase ran over the anchor label and off the edge. Stack it under its label (fixed height while typing); the "Applied work" heading just below replaces the anchor. */
@media(max-width:560px){.rd-type-rail{padding-top:6px;padding-bottom:6px}.rd-type-left{flex-direction:column;align-items:flex-start;gap:3px}.rd-type-anchor{display:none}}


/* Experience (Nov 6, Paige-approved split layout B): intro on the left, one quiet panel of three
   capabilities on the right. The panel and items are not links, so nothing here looks clickable. */
#ai-cs-mock .home-experience { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 58fr); column-gap: 4%; align-items: start; padding: 28px 0 8px; scroll-margin-top: 100px; }
#ai-cs-mock .experience-intro .section-kicker { margin-top: 0; }
#ai-cs-mock .experience-intro h2 { font-size: clamp(28px, 3.1vw, 40px); line-height: 1.1; letter-spacing: -.035em; margin: 0 0 18px; }
#ai-cs-mock .experience-intro p, #ai-cs-mock .experience-item p { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0; }
#ai-cs-mock .experience-intro p { max-width: 460px; }
#ai-cs-mock .experience-panel { border: 1px solid var(--border); border-radius: 18px; background: var(--card); padding: 4px 28px; }
#ai-cs-mock .experience-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 20px; align-items: start; padding: 22px 0; }
#ai-cs-mock .experience-item + .experience-item { border-top: 1px solid var(--border); }
#ai-cs-mock .experience-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: #15111a; }
#ai-cs-mock .experience-icon svg { display: block; }
#ai-cs-mock .experience-icon-delivery { background: #ffeef6; }
#ai-cs-mock .experience-icon-quality { background: #f6fcc9; }
#ai-cs-mock .experience-icon-requirements { background: #e6f9fc; }
#ai-cs-mock .experience-item h3 { font-size: 18px; line-height: 1.3; margin: 8px 0 4px; }
@media(max-width:980px) {
  #ai-cs-mock .home-experience { grid-template-columns: 1fr; row-gap: 24px; }
  #ai-cs-mock .experience-intro p { max-width: 640px; }
}
@media(max-width:560px) {
  #ai-cs-mock .home-experience { padding: 20px 0 4px; row-gap: 20px; }
  #ai-cs-mock .experience-panel { padding: 2px 18px; border-radius: 16px; }
  #ai-cs-mock .experience-item { grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; padding: 18px 0; }
  #ai-cs-mock .experience-icon { width: 36px; height: 36px; border-radius: 10px; }
  #ai-cs-mock .experience-item h3 { font-size: 17px; margin-top: 6px; }
}

/* Keep the featured project compact on phones so experience follows the introduction. */
@media(max-width:680px) {
  html body #ai-cs-mock .rd-stage { margin-top: 24px; }
  html body #ai-cs-mock .rd-stage .rd-mini-ui,
  html body #ai-cs-mock .rd-stage .rd-trace,
  html body #ai-cs-mock .rd-stage .rd-note { display: none; }
  html body #ai-cs-mock .rd-stage .rd-card { transform: none; }
  html body #ai-cs-mock .rd-stage .rd-card-top { margin-bottom: 8px; }
}

/* #588: name label and professional description above the headline (removed Nov 3, restored Nov 4). */

/* #589: view headings receive focus on user-initiated view changes; show it for keyboard users only. */
html body #ai-cs-mock [data-page] [tabindex="-1"]:focus{outline:none}
html body #ai-cs-mock [data-page] [tabindex="-1"]:focus-visible{outline:2px solid var(--rd-violet,#6b5cff);outline-offset:6px;border-radius:6px}