/**
 * /start-here/ — guided entry page styles.
 * Loaded only on the page using the Start Here template.
 *
 * Visual identity matches the rest of the site:
 *   navy heading        #0a2540
 *   gold accent         #c99a3b
 *   surface bg          #fafbfd
 *   border              #e4e7ec
 *   body text           #2b2f36
 *
 * Single-column on mobile, 2-column at >= 740px, 4-column at >= 1100px.
 * Each card is its own surface; nothing collapses behind a tab.
 */

.cw-start { padding-top: 24px; padding-bottom: 64px; }

.cw-start__head {
    max-width: 760px;
    margin: 0 0 36px;
}
.cw-start__eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c99a3b;
    margin: 12px 0 8px;
}
.cw-start__title {
    margin: 0 0 12px;
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    font-weight: 700;
    color: #0a2540;
    letter-spacing: -0.015em;
    line-height: 1.15;
}
.cw-start__lede {
    margin: 0 0 16px;
    color: #2b2f36;
    font-size: 1.05rem;
    line-height: 1.55;
}

.cw-start__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0 0 56px;
}
@media (min-width: 740px) {
    .cw-start__grid { grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (min-width: 1100px) {
    .cw-start__grid { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 18px; }
}

.cw-start-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-top: 4px solid #0a2540;
    border-radius: 8px;
    padding: 18px 18px 16px;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.cw-start-card:hover,
.cw-start-card:focus-within {
    border-top-color: #c99a3b;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(10,37,64,0.07);
}

.cw-start-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
}
.cw-start-card__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    color: #c99a3b;
}
.cw-start-card__icon svg {
    width: 32px;
    height: 32px;
    display: block;
}
.cw-start-card__task {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 700;
    color: #0a2540;
    letter-spacing: -0.005em;
    line-height: 1.25;
}

.cw-start-card__who {
    margin: 0 0 8px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #52607a;
}
.cw-start-card__label {
    font-weight: 700;
    color: #0a2540;
}
.cw-start-card__what {
    margin: 0 0 14px;
    font-size: 0.93rem;
    line-height: 1.55;
    color: #2b2f36;
}

.cw-start-card__primary {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: grid;
    gap: 8px;
}
.cw-start-card__primary-item {
    background: #fafbfd;
    border: 1px solid #e4e7ec;
    border-left: 3px solid #c99a3b;
    border-radius: 6px;
    padding: 8px 10px;
}
.cw-start-card__primary-item--guide { border-left-color: #c99a3b; }
.cw-start-card__primary-item--calc  { border-left-color: #0a2540; }
.cw-start-card__primary-kind {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #52607a;
    margin: 0 0 2px;
}
.cw-start-card__primary-link {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: #0a2540;
    text-decoration: none;
    line-height: 1.35;
}
.cw-start-card__primary-link:hover,
.cw-start-card__primary-link:focus-visible {
    color: #c99a3b;
    text-decoration: underline;
}

.cw-start-card__more {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px dashed #e4e7ec;
}
.cw-start-card__more summary {
    cursor: pointer;
    font-size: 0.83rem;
    font-weight: 600;
    color: #52607a;
    list-style: none;
    padding: 4px 0;
}
.cw-start-card__more summary::-webkit-details-marker { display: none; }
.cw-start-card__more summary::before {
    content: '+ ';
    color: #c99a3b;
    font-weight: 700;
}
.cw-start-card__more[open] summary::before { content: '\2212\00a0'; }
.cw-start-card__extras {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
}
.cw-start-card__extras li { margin: 0 0 4px; }
.cw-start-card__extras a {
    font-size: 0.88rem;
    color: #0a2540;
    text-decoration: none;
}
.cw-start-card__extras a:hover,
.cw-start-card__extras a:focus-visible {
    color: #c99a3b;
    text-decoration: underline;
}

/* Legend — explains content types */
.cw-start__legend {
    background: #fafbfd;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    padding: 24px 22px 20px;
}
.cw-start__legend-heading {
    margin: 0 0 14px;
    font-size: 1.15rem;
    color: #0a2540;
    font-weight: 700;
    border-bottom: 2px solid #c99a3b;
    padding-bottom: 8px;
}
.cw-start__legend-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 700px) {
    .cw-start__legend-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
    .cw-start__legend-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
}
.cw-start__legend-item p {
    margin: 6px 0 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #2b2f36;
}
.cw-start__legend-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 999px;
    color: #fff;
    background: #0a2540;
}
.cw-start__legend-tag--guide   { background: #0a2540; }
.cw-start__legend-tag--calc    { background: #c99a3b; }
.cw-start__legend-tag--article { background: #2b7a4e; }
.cw-start__legend-tag--gloss   { background: #52607a; }

@media (max-width: 640px) {
    .cw-start { padding-bottom: 48px; }
    .cw-start__head { margin-bottom: 24px; }
    .cw-start__title { font-size: 1.55rem; }
    .cw-start__lede { font-size: 1rem; }
    .cw-start-card { padding: 16px 14px 14px; }
    .cw-start-card__task { font-size: 1.05rem; }
    .cw-start__legend { padding: 18px 14px 14px; }
}