/* CAGO home page only (loaded after styles.css) */
/* division cards on home */
.division { position: relative; border: 1px solid var(--border); border-radius: 18px; padding: 34px 30px; background: #fff; display: flex; flex-direction: column; gap: 12px; cursor: pointer; }
/* whole card is clickable (data-href, handled in the inline script on index.html); text stays selectable. hover/focus outlines the card in blue */
.division:hover, .division:has(.btn:focus-visible) { box-shadow: 0 8px 30px rgba(37, 99, 235, 0.12); }
.division:not(.flagship):hover, .division:not(.flagship):has(.btn:focus-visible) { box-shadow: 0 8px 30px rgba(234, 179, 8, 0.18); }
/* hover ring: an SVG rect traced around the card. pathLength=1 so the dash math is size independent.
   Draws clockwise from the top-left with damping at the end; un-hover runs the same transition backwards. */
.division .ring { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); pointer-events: none; overflow: visible; }
.division .ring rect { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: butt; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0s linear 0.9s; }
.division:not(.flagship) .ring rect { stroke: #EAB308; }
.division:hover .ring rect, .division:has(.btn:focus-visible) .ring rect { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0s; }
/* touch devices have no hover: the ring draws when the card scrolls fully into view (class set by the inline script) and undraws when it leaves */
@media (hover: none) {
  .division.inview .ring rect { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0s; }
  .division.inview { box-shadow: 0 8px 30px rgba(37, 99, 235, 0.12); }
  .division:not(.flagship).inview { box-shadow: 0 8px 30px rgba(234, 179, 8, 0.18); }
}
.division h2, .division p, .division li { cursor: text; }
.division .tag { align-self: flex-start; font-size: 11.5px; font-weight: 800; letter-spacing: 1px; padding: 4px 12px; border-radius: 999px; text-transform: uppercase; }
.division.flagship .tag { background: var(--tint); color: var(--blue-dark); }
.division:not(.flagship) .tag { background: #FEF9C3; color: #B45309; }
.division h2 { font-size: 24px; font-weight: 800; }
.division p { color: var(--body); font-size: 15.5px; }
.division ul { padding-left: 20px; color: var(--body); font-size: 14.5px; }
.division .btn { align-self: flex-start; margin-top: 8px; }

.division:hover { transform: translateY(-4px); }