/* Free guide download box (21 Oct 2026). Used on the homepage and the four sector pages.
   Colours come from each page's own tokens, so light and dark mode follow the page. */
.guide-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.guide-copy h2 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(2rem, 4.2vw, 2.9rem); line-height: 1.08; margin: 0 0 16px; }
.guide-copy > p { color: var(--muted); font-size: 1.08rem; margin: 0 0 20px; max-width: 46ch; }
.guide-doc { display: flex; gap: 18px; align-items: flex-start; margin: 0 0 20px; }
.guide-doc img { width: 128px; height: auto; border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); background: #fff; flex: none; }
.guide-doc .doc-name { font-weight: 700; margin: 0 0 4px; }
.guide-doc .doc-meta { color: var(--muted); font-size: 0.9rem; margin: 0 0 10px; }
.guide-ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.guide-ticks li { padding-left: 26px; position: relative; font-size: 0.97rem; }
.guide-ticks li::before { content: ""; position: absolute; left: 2px; top: 0.42em; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.guide-form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 0.9rem; color: var(--muted); margin: 0; }
.guide-form .check input { width: auto; margin-top: 3px; flex: none; }
.guide-done { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.guide-done .btn { justify-content: center; }
.guide-done p { margin: 0; }
.guide-done .small { font-size: 0.9rem; color: var(--muted); }
.doc-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; font-size: 0.95rem; }
.doc-links a { color: var(--ink); }
@media (max-width: 820px) {
  .guide-grid { grid-template-columns: 1fr; gap: 28px; }
  .guide-doc img { width: 96px; }
}

/* Integration guide card (Richard, 21 Oct 2026: option A's moving workflow, in option C's dark colours).
   Stays dark in both themes for contrast; the gold dot stops on each step. */
.flowcard { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
  margin-top: 28px; padding: 30px 34px; border-radius: 24px; background: #16211A; color: #F2F0E5; text-decoration: none;
  border: 1px solid rgba(224,182,74,.18); transition: transform .25s, box-shadow .25s; }
.flowcard::after { content: ""; position: absolute; right: -90px; top: -90px; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(224,182,74,.32), transparent 65%); pointer-events: none; }
.flowcard:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(10,16,8,.28); }
.flowcard > * { position: relative; z-index: 1; }
.flowcard .fc-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #E0B64A; }
.flowcard .fc-title { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; margin: 6px 0 20px; }
.flowcard .fc-meta { font-size: .88rem; color: #C9C4AE; margin-top: 14px; }
.fc-track { --c: 48px; --s: calc((100% - 2 * var(--c)) / 4);
  --p0: calc(var(--c) - 7px); --p1: calc(var(--c) - 7px + var(--s)); --p2: calc(var(--c) - 7px + 2 * var(--s));
  --p3: calc(var(--c) - 7px + 3 * var(--s)); --p4: calc(var(--c) - 7px + 4 * var(--s));
  position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 6px; }
.fc-track::before { content: ""; position: absolute; left: var(--c); right: var(--c); top: 20px; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(242,240,229,.28) 0 6px, transparent 6px 11px); }
.fc-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 84px;
  text-align: center; font-size: .78rem; font-weight: 600; color: #C9C4AE; }
.fc-node i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 1rem;
  background: #1F2C23; border: 2px solid rgba(242,240,229,.22); color: #F2F0E5; }
.fc-node.you i { border-color: #E0B64A; }
.fc-dot { position: absolute; top: 13px; left: var(--p0); width: 14px; height: 14px; border-radius: 50%; z-index: 2;
  background: #E0B64A; box-shadow: 0 0 0 6px rgba(224,182,74,.22); animation: fc-travel 5s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes fc-travel { 0%,14% { left: var(--p0); } 24%,36% { left: var(--p1); } 46%,58% { left: var(--p2); } 68%,82% { left: var(--p3); } 92%,100% { left: var(--p4); } }
.fc-go { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: #E0B64A; color: #16211A;
  font-size: 1.6rem; font-weight: 700; transition: transform .25s; }
.flowcard:hover .fc-go { transform: rotate(-45deg) scale(1.06); }
.flowcard:focus-visible { outline: 3px solid #E0B64A; outline-offset: 3px; }
@media (max-width: 760px) {
  .flowcard { grid-template-columns: 1fr; padding: 26px 20px; }
  .fc-go { display: none; }
  .fc-track { --c: 34px; }
  .fc-node { width: 56px; font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) { .fc-dot { animation: none; } }

/* The finger pointer on everything that does something when clicked, in every
   Claromai app and page (Richard, 29 Oct 2026); disabled controls say no. */
a[href], button:not(:disabled), [role="button"], summary, select:not(:disabled), label[for],
input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled), input[type="submit"]:not(:disabled),
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { cursor: pointer; }
button:disabled, input:disabled, select:disabled, [aria-disabled="true"] { cursor: not-allowed; }