/* A short visual sequence, with a single route into the full first-use guide. */
.start-flow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.start-flow > li { min-width: 0; overflow: hidden; padding: 20px 24px 26px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper-bright); }
.start-flow-art { display: block; width: 100%; height: auto; max-height: 168px; margin: 0 auto 18px; }
.start-flow h3 { margin: 0; font-size: clamp(21px,2vw,25px); font-weight: 750; line-height: 1.25; letter-spacing: -.025em; text-wrap: balance; }
.start-flow p { margin: 12px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.65; text-wrap: pretty; }
.start-flow-guide { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 22px; color: var(--orange-dark); }
.start-flow-guide:hover { color: var(--orange-dark); text-decoration-thickness: 2px; }
.start-flow-guide svg, .resource-library-link svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.models-heading { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(310px,.58fr); gap: clamp(34px,7vw,92px); align-items: end; max-width: none; }
.models-heading h2 { margin: 0; max-width: 750px; }
.models-intro { max-width: none; margin: 0; font-size: 18px; line-height: 1.72; }

/* These headings label permanent content, with no disclosure affordance. */
.model-family { min-height: 316px; padding-bottom: 34px; }
.model-family-head { min-height: 0; cursor: default; }
.model-family-head:hover { color: inherit; }

.resources-intro > p { margin: 0; color: rgba(255,248,242,.75); font-size: 18px; line-height: 1.72; }
.resource-library-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 16px; color: var(--orange-light); font-size: 16px; font-weight: 750; line-height: 1.4; text-underline-offset: 5px; }
.resource-library-link:hover { color: #ffb59d; }
.resource-library-link:focus-visible { outline: 2px solid var(--orange-light); outline-offset: 4px; border-radius: 3px; }

@media(max-width:1000px) {
 .start-flow { gap: 14px; }
 .start-flow > li { padding: 16px 18px 22px; }
 .models-heading { grid-template-columns: 1fr; gap: 20px; }
 .models-intro { max-width: 68ch; }
}
@media(max-width:760px) {
 .start-flow { grid-template-columns: 1fr; gap: 12px; }
 .start-flow > li { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 10px; align-items: start; padding: 18px 16px 18px 8px; border-radius: 16px; }
 .start-flow-art { width: 100%; margin: 0; padding-top: 3px; }
 .start-flow h3 { font-size: 20px; text-wrap: pretty; }
 .start-flow p { margin-top: 8px; font-size: 15px; line-height: 1.55; }
 .start-flow-guide { margin-top: 14px; font-size: 15px; }
 .models-heading { gap: 18px; }
 .models-intro, .resources-intro > p { font-size: 16px; line-height: 1.65; }
 .model-family { min-height: 0; }
 .resource-library-link { margin-top: 14px; font-size: 15px; }
 .partner-copy h2 { text-wrap: balance; }
}
@media(max-width:360px) {
 .start-flow > li { grid-template-columns: 68px minmax(0,1fr); gap: 6px; }
 .start-flow h3 { font-size: 19px; }
}

.start-flow-copy p a { color: var(--orange-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.start-flow-copy p a:hover { text-decoration-thickness: 2px; }
.start-flow-copy p a:focus-visible { outline: 2px solid var(--orange-dark); outline-offset: 3px; border-radius: 2px; }

/* The complete library follows the featured articles. */
.resource-library-nav { display: flex; justify-content: center; margin-top: 28px; }
.resource-library-nav .resource-library-link { margin-top: 0; }

/* Cards in one visual row share title, reading-time and description tracks. */
@supports (grid-template-rows: subgrid) {
 .resource-card { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
 .resource-card .resource-action { margin-top: 0; align-self: end; }
}