/* Quinine Cybersecurity: homepage section components (index.html <main>), loaded after pages.css.
   Classes: hp-trust (hero trust list), hp-cards / hp-card (product and audience cards), hp-steps /
   hp-step (connected timeline), hp-caps / hp-cap (what we test), hp-proof (evidence and proof),
   hp-faq (FAQ disclosure list), ed-founder--compact and hp-cta__note.
   Mobile first (breakpoints 640 / 768 / 1024 / 1440). Colours come only from tokens.css (and the
   pages.css --pg-* aliases); every component reads correctly on the light, paper and dark bands in
   both themes. Transitions only run under prefers-reduced-motion: no-preference. */

:root {
  --hp-card-pad: clamp(20px, 2.4vw, 28px);
  --hp-gap: clamp(16px, 2vw, 24px);
  --hp-num: 36px;
}

/* ------------------------------------------------------------------ hero: trust list, quieter Ask-AI */

/* Never wraps 2 + 1: one row only when the list itself is wide enough for all three items (about
   41.5rem of content plus gaps), otherwise a left-aligned vertical stack. Keyed to the list's own
   width through a container query, so it follows the hero column at every breakpoint. */
.hp-trust {
  container-type: inline-size;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  margin: var(--space-5) 0 0; padding: 0; list-style: none;
}
.hp-trust__item {
  flex: 0 0 100%;
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-small); line-height: 1.4; font-weight: var(--weight-strong); color: var(--color-text);
}
.hp-trust__icon {
  position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.hp-trust__icon::after {
  content: ""; position: absolute; left: 6.5px; top: 4px; width: 4px; height: 8px;
  border: solid var(--color-link); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.hero .ask-ai { margin-top: var(--space-5); padding: 6px 6px 6px 14px; gap: 8px 12px; background: transparent; }
.hero .ask-ai__label { font-size: var(--text-small); }
.hero .ask-ai__btn { width: 40px; height: 40px; }
.hero .ask-ai__btn img { width: 20px; height: 20px; }

@container (min-width: 44rem) {
  .hp-trust__item { flex: 0 1 auto; }
}

/* ------------------------------------------------------------------ cards (product, audience) */

.hp-cards {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hp-gap);
  margin: 0; padding: 0; list-style: none;
}
.hp-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
  min-width: 0; padding: var(--hp-card-pad);
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
}
.hp-card::before {
  content: ""; position: absolute; left: var(--hp-card-pad); top: -1px; width: 40px; height: 2px;
  background: var(--color-accent); border-radius: 0 0 var(--radius-xs) var(--radius-xs);
}
.hp-card > * { margin: 0; }
.hp-card__title { font-size: var(--text-h4); line-height: var(--leading-h4); letter-spacing: -0.01em; color: var(--color-ink); }
.hp-card__title a { color: inherit; text-decoration: none; }
.hp-card__title a:hover { color: var(--color-link); text-decoration: underline; }
/* Linked product cards: the title link covers the card (as on .hp-cap), the CTA to the same page
   stays on top, and the focus ring is drawn around the whole card. */
.hp-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hp-card__title a:focus-visible { outline: none; }
.hp-card__title a:focus-visible::after { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-m); }
.hp-card__cta { position: relative; z-index: 1; }
.hp-card .badge { margin-top: calc(-1 * var(--space-1)); }
.hp-card__price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2);
  padding-bottom: var(--space-3); width: 100%; border-bottom: 1px solid var(--color-line);
  color: var(--color-text-muted); font-size: var(--text-small);
}
.hp-card__price strong {
  font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.7rem); line-height: 1.15; letter-spacing: -0.02em;
  font-weight: var(--weight-heading); color: var(--color-ink);
}
.hp-card__text { color: var(--color-text); font-size: 0.97rem; line-height: 1.6; }
.hp-card__meta { color: var(--color-text-muted); font-size: var(--text-small); line-height: var(--leading-small); }
.hp-card__cta { margin-top: auto; padding-top: var(--space-2); font-weight: var(--weight-strong); }

.hp-card--plain { box-shadow: none; background: transparent; }
.ed-section--paper .hp-card--plain { background: var(--color-surface); }

/* Dark band */
.ed-section--dark .hp-card {
  background: color-mix(in srgb, var(--pg-on-dark) 5%, transparent);
  border-color: color-mix(in srgb, var(--pg-on-dark) 18%, transparent); box-shadow: none;
}
.ed-section--dark .hp-card::before { background: var(--pg-signal); }
.ed-section--dark .hp-card__title, .ed-section--dark .hp-card__title a,
.ed-section--dark .hp-card__price strong { color: var(--pg-on-dark); }
.ed-section--dark .hp-card__price { border-color: color-mix(in srgb, var(--pg-on-dark) 16%, transparent); }
.ed-section--dark .hp-card__price, .ed-section--dark .hp-card__meta,
.ed-section--dark .hp-card__text { color: var(--pg-on-dark-muted); }
.ed-section--dark .hp-card__cta { color: var(--pg-signal); }
.ed-section--dark .hp-card__title a:hover, .ed-section--dark .hp-card__cta:hover { color: var(--pg-on-dark); }
.ed-section--dark .hp-card__title a:focus-visible::after { outline-color: var(--pg-signal); }

@media (min-width: 700px) {
  .hp-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-cards--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .hp-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-cards--3 > :last-child:nth-child(odd) { grid-column: auto; }
}

/* ------------------------------------------------------------------ connected timeline */

.hp-steps {
  counter-reset: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  margin: 0; padding: 0; list-style: none;
}
.hp-step { position: relative; min-width: 0; padding: 0 0 var(--space-5) calc(var(--hp-num) + var(--space-4)); }
.hp-step:last-child { padding-bottom: 0; }
/* Connector: vertical on mobile */
.hp-step::before {
  content: ""; position: absolute; left: calc(var(--hp-num) / 2); top: calc(var(--hp-num) + 4px); bottom: 4px; width: 1px;
  background: color-mix(in srgb, var(--color-accent) 45%, transparent);
}
.hp-step:last-child::before { display: none; }
.hp-step__num {
  position: absolute; left: 0; top: 0; display: grid; place-items: center;
  width: var(--hp-num); height: var(--hp-num); border-radius: 50%;
  background: var(--color-surface); border: 1px solid var(--color-accent);
  font-family: var(--font-mono-stack); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--color-link);
}
.hp-step__title { margin: 0 0 var(--space-1); padding-top: 6px; font-size: 1.04rem; line-height: 1.35; letter-spacing: -0.01em; }
.hp-step__text { margin: 0; font-size: var(--text-small); line-height: var(--leading-small); color: var(--color-text-muted); max-width: 40ch; }
/* The last step (proof) closes the loop with a filled marker. */
.hp-step:last-child .hp-step__num { background: var(--color-accent); color: var(--color-on-accent); }

.ed-section--dark .hp-step::before { background: color-mix(in srgb, var(--pg-signal) 45%, transparent); }
.ed-section--dark .hp-step__num { background: var(--pg-dark); border-color: var(--pg-signal); color: var(--pg-signal); }
.ed-section--dark .hp-step:last-child .hp-step__num { background: var(--pg-signal); color: var(--pg-dark); }
.ed-section--dark .hp-step__title { color: var(--pg-on-dark); }
.ed-section--dark .hp-step__text { color: var(--pg-on-dark-muted); }

/* Tablet: 3 columns, horizontal connectors within each row */
@media (min-width: 640px) {
  .hp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--hp-gap); row-gap: var(--space-6); }
  .hp-step, .hp-step:last-child { padding: calc(var(--hp-num) + var(--space-4)) 0 0; }
  .hp-step::before {
    left: calc(var(--hp-num) + 8px); right: calc(-1 * var(--hp-gap) + 8px); top: calc(var(--hp-num) / 2); bottom: auto;
    width: auto; height: 1px;
  }
  .hp-step:nth-child(3n)::before { display: none; }
  .hp-step__title { padding-top: 0; }
}
/* Desktop: one connected row of six */
@media (min-width: 1024px) {
  .hp-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hp-step:nth-child(3n)::before { display: block; }
  .hp-step:last-child::before { display: none; }
  .hp-step__title { font-size: 1rem; }
}

/* ------------------------------------------------------------------ capabilities */

.hp-caps {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hp-gap);
  margin: 0; padding: 0; list-style: none;
}
.hp-cap {
  position: relative; min-width: 0; padding: var(--space-5) var(--hp-card-pad);
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
}
.hp-cap__title { margin: 0 0 var(--space-2); font-size: var(--text-h4); line-height: var(--leading-h4); letter-spacing: -0.01em; }
.hp-cap__title a { color: var(--color-ink); text-decoration: none; }
.hp-cap__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hp-cap__title a:focus-visible { outline: none; }
.hp-cap__title a:focus-visible::after { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-m); }
.hp-cap:hover { border-color: var(--color-accent); }
.hp-cap:hover .hp-cap__title a { color: var(--color-link); text-decoration: underline; }
.hp-cap__text { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--color-text-muted); }

.ed-section--dark .hp-cap { background: color-mix(in srgb, var(--pg-on-dark) 5%, transparent); border-color: color-mix(in srgb, var(--pg-on-dark) 18%, transparent); box-shadow: none; }
.ed-section--dark .hp-cap:hover { border-color: var(--pg-signal); }
.ed-section--dark .hp-cap__title a, .ed-section--dark .hp-cap:hover .hp-cap__title a { color: var(--pg-on-dark); }
.ed-section--dark .hp-cap__text { color: var(--pg-on-dark-muted); }
.ed-section--dark .hp-cap__title a:focus-visible::after { outline-color: var(--pg-signal); }

@media (min-width: 640px) {
  .hp-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .hp-caps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ evidence and proof */

.hp-proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.hp-proof__list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pg-rule); }
.hp-proof__item {
  position: relative; display: grid; gap: 2px;
  padding: var(--space-4) 0 var(--space-4) calc(18px + var(--space-4));
  border-bottom: 1px solid var(--color-line);
}
.hp-proof__item::before {
  content: ""; position: absolute; left: 0; top: calc(var(--space-4) + 3px); width: 18px; height: 18px; border-radius: var(--radius-xs);
  background: var(--color-accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.hp-proof__item::after {
  content: ""; position: absolute; left: 6.5px; top: calc(var(--space-4) + 6px); width: 4px; height: 8px;
  border: solid var(--color-link); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.hp-proof__item strong { color: var(--color-ink); font-weight: var(--weight-strong); line-height: 1.4; }
.hp-proof__item span { color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.55; }
.hp-proof__actions {
  display: grid; gap: var(--space-3); justify-items: stretch;
  padding: var(--hp-card-pad); background: var(--color-surface);
  border: 1px solid var(--color-line); border-radius: var(--radius-m);
}
.hp-proof__actions > * { margin: 0; }
.hp-proof__actions p { font-size: var(--text-small); line-height: var(--leading-small); color: var(--color-text-muted); }
.hp-proof__actions h3 { font-size: var(--text-h4); line-height: var(--leading-h4); }

.ed-section--dark .hp-proof__list { border-color: color-mix(in srgb, var(--pg-on-dark) 28%, transparent); }
.ed-section--dark .hp-proof__item { border-color: color-mix(in srgb, var(--pg-on-dark) 14%, transparent); }
.ed-section--dark .hp-proof__item::before { background: color-mix(in srgb, var(--pg-signal) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pg-signal) 50%, transparent); }
.ed-section--dark .hp-proof__item::after { border-color: var(--pg-signal); }
.ed-section--dark .hp-proof__item strong { color: var(--pg-on-dark); }
.ed-section--dark .hp-proof__item span { color: var(--pg-on-dark-muted); }
.ed-section--dark .hp-proof__actions { background: color-mix(in srgb, var(--pg-on-dark) 5%, transparent); border-color: color-mix(in srgb, var(--pg-on-dark) 18%, transparent); }

@media (min-width: 640px) and (max-width: 1023.98px) {
  .hp-proof__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-proof__actions > :not(.btn) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .hp-proof { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
  .hp-proof__actions { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}

/* Safeguard note and framework mention that follow the proof grid */
.hp-proof ~ .ed-note { margin-top: var(--space-6); }
.hp-proof ~ #frameworks { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-line); max-width: 78ch; }
.hp-proof ~ #frameworks > p:first-child { margin-bottom: var(--space-2); }
.ed-section--dark .hp-proof ~ #frameworks { border-color: color-mix(in srgb, var(--pg-on-dark) 16%, transparent); }

/* ------------------------------------------------------------------ FAQ */

.hp-faq { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(24px, 4vw, 56px); margin: 0; }
.hp-faq__item { border-bottom: 1px solid var(--color-line); }
.hp-faq__item:first-child { border-top: 1px solid var(--pg-rule); }
.hp-faq__q {
  display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: var(--space-4); align-items: center;
  padding: var(--space-4) 0; min-height: 44px; cursor: pointer; list-style: none;
  font-weight: var(--weight-strong); font-size: 1.02rem; line-height: 1.4; color: var(--color-ink);
}
.hp-faq__q::-webkit-details-marker, .hp-faq__q::marker { display: none; content: ""; }
/* Open/closed indicator: a plus inside a ring; the vertical bar collapses to make a minus. */
.hp-faq__q::after {
  content: ""; justify-self: end; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--color-line-strong); color: var(--color-link);
  background:
    linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 10px no-repeat;
}
.hp-faq__item[open] > .hp-faq__q::after {
  border-color: var(--color-accent); background-color: var(--color-accent-soft);
  background-size: 10px 2px, 2px 0;
}
.hp-faq__q:hover { color: var(--color-link); }
.hp-faq__q:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-xs); }
.hp-faq__answer { padding: 0 calc(28px + var(--space-4)) var(--space-5) 0; max-width: 68ch; color: var(--color-text); }
.hp-faq__answer > :last-child { margin-bottom: 0; }

.ed-section--dark .hp-faq__item { border-color: color-mix(in srgb, var(--pg-on-dark) 16%, transparent); }
.ed-section--dark .hp-faq__item:first-child { border-top-color: color-mix(in srgb, var(--pg-on-dark) 28%, transparent); }
.ed-section--dark .hp-faq__q { color: var(--pg-on-dark); }
.ed-section--dark .hp-faq__q::after { color: var(--pg-signal); border-color: color-mix(in srgb, var(--pg-on-dark) 40%, transparent); }
.ed-section--dark .hp-faq__item[open] > .hp-faq__q::after { border-color: var(--pg-signal); background-color: color-mix(in srgb, var(--pg-signal) 14%, transparent); }
.ed-section--dark .hp-faq__q:focus-visible { outline-color: var(--pg-signal); }

@media (max-width: 479.98px) {
  .hp-faq__answer { padding-right: 0; }
}
@media (min-width: 1024px) {
  .hp-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-faq__item:nth-child(2) { border-top: 1px solid var(--pg-rule); }
  .ed-section--dark .hp-faq__item:nth-child(2) { border-top-color: color-mix(in srgb, var(--pg-on-dark) 28%, transparent); }
}

/* ------------------------------------------------------------------ founder (compact) */

.ed-founder--compact { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.ed-founder--compact .ed-founder__photo { width: 112px; max-width: 112px; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 18%; border-radius: var(--radius-m); }
.ed-founder--compact .ed-founder__name { font-size: var(--text-h3); line-height: var(--leading-h3); }
.ed-founder--compact .ed-founder__role { margin: 2px 0 var(--space-4); }
.ed-founder--compact .ed-quote p { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem); line-height: 1.7; max-width: 70ch; }
.ed-founder--compact .ed-social { margin-top: var(--space-4); }

@media (min-width: 768px) {
  .ed-founder--compact { grid-template-columns: 180px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); }
  .ed-founder--compact .ed-founder__photo { width: 100%; max-width: 180px; aspect-ratio: 4 / 5; }
}

/* ------------------------------------------------------------------ final CTA note */

.hp-cta__note { margin: var(--space-3) 0 0; font-size: var(--text-small); line-height: var(--leading-small); color: var(--color-text-muted); max-width: 60ch; }
.ed-section--dark .hp-cta__note { color: var(--pg-on-dark-muted); }

/* ------------------------------------------------------------------ motion (opt in) and modes */

/* Linked cards (product cards with a title link, capability cards): the border steps to the accent
   and the shadow steps up on hover or keyboard focus; the 2px lift only runs with motion allowed.
   Static cards (.hp-card--plain, proof panel) never move. */
.hp-card:has(> .hp-card__title a):has(:focus-visible), .hp-cap:has(:focus-visible) { border-color: var(--color-accent); box-shadow: var(--shadow-2); }
.ed-section--dark .hp-card:has(> .hp-card__title a):has(:focus-visible), .ed-section--dark .hp-cap:has(:focus-visible) { border-color: var(--pg-signal); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .hp-card:has(> .hp-card__title a):hover { border-color: var(--color-accent); box-shadow: var(--shadow-2); }
  .hp-cap:hover { box-shadow: var(--shadow-2); }
  .ed-section--dark .hp-card:has(> .hp-card__title a):hover { border-color: var(--pg-signal); box-shadow: none; }
  .ed-section--dark .hp-cap:hover { box-shadow: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hp-card__title a, .hp-cap__title a, .hp-faq__q { transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
  .hp-card, .hp-cap {
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) ease;
  }
  .hp-card:has(> .hp-card__title a):has(:focus-visible), .hp-cap:has(:focus-visible) { transform: translateY(-2px); }
  .hp-faq__q::after { transition: background-size var(--dur-base) var(--ease-out), background-color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .hp-card:has(> .hp-card__title a):hover, .hp-cap:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .hp-card, .hp-card__title a, .hp-cap, .hp-cap__title a, .hp-faq__q, .hp-faq__q::after { transition: none; }
}
@media (forced-colors: active) {
  .hp-card, .hp-cap, .hp-proof__actions { border: 1px solid CanvasText; }
  .hp-step__num, .hp-faq__q::after { border: 1px solid CanvasText; }
  .hp-trust__icon::after, .hp-proof__item::after { border-color: CanvasText; }
  .hp-faq__q::after { background-image: linear-gradient(CanvasText, CanvasText), linear-gradient(CanvasText, CanvasText); }
}
@media print {
  .hp-faq__answer { display: block; }
  .hp-proof__actions { position: static; }
}