.btn { display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border:var(--bw) solid transparent; border-radius:var(--r-pill); font:600 1rem/1 var(--font-body); text-decoration:none; transition:transform .15s; }
.btn:hover { transform:translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }
.btn--primary { background:var(--c-accent); border-color:var(--c-accent); color:var(--c-mint); }
.btn--secondary { background:var(--c-mint); border-color:var(--c-mint); color:var(--c-accent); }
.pill { display:inline-block; padding:6px 12px; border:1px solid var(--c-accent); border-radius:var(--r-pill); font:600 .6875rem/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase; background:transparent; color:var(--c-accent); }
.card { display:flex; flex-direction:column; border:1px solid var(--c-line); border-radius:var(--r-card); background:var(--c-card); box-shadow:var(--shadow-card); overflow:hidden; text-decoration:none; color:inherit; }
.card__body { padding:20px; display:flex; flex-direction:column; gap:10px; }
.card__meta { display:flex; flex-wrap:wrap; gap:8px; }
.tile { border:1px solid var(--c-line); border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:24px; min-height:180px; display:flex; flex-direction:column; justify-content:space-between; text-decoration:none; color:inherit; }
.tile--1{background-color:var(--c-tile-1)} .tile--2{background-color:var(--c-tile-2)} .tile--3{background-color:var(--c-tile-3)} .tile--4{background-color:var(--c-tile-4)} .tile--5{background-color:var(--c-tile-5)}
.faq details { border:1px solid var(--c-line); border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:16px 20px; background:var(--c-card); }
.faq details + details { margin-top:12px; }
.faq summary { cursor:pointer; font:500 1.0625rem/1.4 var(--font-head); list-style:none; }
.notice { border:1px solid var(--c-line); border-radius:var(--r-card); padding:16px 20px; background:var(--c-tint); }
.breadcrumbs ol { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0; font-size:.9375rem; }
.breadcrumbs li + li::before { content:"/"; margin-right:8px; color:var(--c-muted); }

/* wide guide cards */
.section__head--center { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; margin-bottom: clamp(28px, 5vw, 48px); }
.section__head--center h2 { margin: 0; max-width: 24ch; }
.section__more { display: flex; justify-content: center; margin-top: 40px; }
/* guides band: two full-bleed staggered rows of wide cards, cropped at both edges with a fade */
.guides-band { --guide-w: clamp(300px, 27vw, 480px); --guide-gap: 24px; --guides-fade: clamp(24px, 6vw, 96px); --guides-inset: calc(var(--guides-fade) + 8px); overflow-x: clip; -webkit-mask-image: linear-gradient(to right, transparent, black var(--guides-fade), black calc(100% - var(--guides-fade)), transparent); mask-image: linear-gradient(to right, transparent, black var(--guides-fade), black calc(100% - var(--guides-fade)), transparent); }
.guides-row { position: relative; display: flex; justify-content: flex-start; justify-content: safe center; gap: var(--guide-gap); padding-block: 24px; padding-inline: var(--guides-inset); scroll-padding-inline: var(--guides-inset); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.guides-row::-webkit-scrollbar { display: none; }
.guides-row--b { padding-inline: calc(var(--guides-inset) + (var(--guide-w) + var(--guide-gap)) / 2); }
.guides-row.is-draggable { cursor: grab; }
.guides-row.is-dragging .card-guide-wide { cursor: grabbing; }
.guides-row.is-pressed { user-select: none; }
.guides-row.is-dragging { cursor: grabbing; }
.guides-nav { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.guides-nav[hidden] { display: none; }
.guides-nav__btn { padding: 8px 24px; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.guides-nav__btn:disabled { opacity: .4; cursor: default; transform: none; }
.card-guide-wide { flex: 0 0 var(--guide-w); display: grid; grid-template-columns: 1fr minmax(96px, 42%); gap: 16px; min-height: 190px; padding: 12px; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-card); box-shadow: var(--shadow-card); color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.card-guide-wide:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.card-guide-wide:focus-visible { box-shadow: var(--shadow-card), 0 0 0 3px var(--focus-ring); }
.card-guide-wide__text { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 8px 0 4px 8px; min-width: 0; }
.card-guide-wide__title { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font: 500 clamp(1.125rem, 1rem + .35vw, 1.375rem)/1.25 var(--font-head); }
.card-guide-wide__cta { font-size: .875rem; font-weight: 600; color: var(--c-accent); }
.card-guide-wide__tile { display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--r-inner); min-height: 120px; background-image: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,0)); }
.card-guide-wide__tile .card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-guide-wide__tile .card__icon { width: min(96px, 70%); height: auto; }
@media (max-width: 700px) {
  .guides-band { --guide-w: 80vw; --guide-gap: 16px; }
  .guides-row { justify-content: flex-start; }
  .guides-row--b { padding-inline: var(--guides-inset); }
}

/* cards v2 */
.card { transition: transform .15s, box-shadow .15s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
/* after the hover rule so the white halo from :focus-visible survives (same specificity, later wins) */
.card:focus-visible { box-shadow: var(--shadow-card), 0 0 0 3px var(--focus-ring); }
.card__body { padding: 20px 20px 16px; gap: 10px; flex: 0 0 auto; }
.card__title { display: block; }
.card__arrow { white-space: nowrap; }
.card__excerpt { color: var(--c-muted); font-size: 1rem; line-height: 1.5; }
.card__preview { display: flex; align-items: center; justify-content: center; margin: auto 12px 12px; aspect-ratio: 3/2; overflow: hidden; border-radius: var(--r-inner); background-image: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,0)); }
.card__preview .card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__preview .card__icon { width: min(120px, 45%); height: auto; }
.card--guide .card__preview { aspect-ratio: 16/10; }
.card--project .card__preview { aspect-ratio: 4/3; }
@media (prefers-reduced-motion: reduce) { .card:hover, .card-guide-wide:hover { transform: none; } }

.steps__list { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 1.5rem; }
.step { counter-increment: step; }
.step__title::before { content: counter(step) ". "; }
.step__image { max-width: 100%; height: auto; border-radius: var(--r-inner); }
.experience { margin-block: 1.5rem; }
.sources .muted { font-size: .9em; }