.home-page { max-width: 1120px; margin: 0 auto; padding: 28px 16px 56px; }
.home-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 28px; align-items: center; padding: 16px 0 54px; }
.home-eyebrow, .home-section-kicker { color: var(--kw-brand); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.home-hero h1 { margin: 9px 0 18px; color: var(--kw-text); font-size: 40px; font-size: clamp(30px, 5vw, 56px); line-height: 1.08; letter-spacing: -.035em; }
/* Three lines, each a step bluer than the one above and each drawn slightly over it: the halo in the page colour is what lets a lower line cut into the upper one instead of tangling with it. The halo is a ring of shadows, not -webkit-text-stroke: Chromium before 123 ignores paint-order on HTML text and draws the stroke over the letters, which erased the headline there. */
.home-hero h1 span { display: block; position: relative; margin-top: -.3em; line-height: 1.02; text-shadow: .07em 0 var(--kw-bg), -.07em 0 var(--kw-bg), 0 .07em var(--kw-bg), 0 -.07em var(--kw-bg), .05em .05em var(--kw-bg), -.05em .05em var(--kw-bg), .05em -.05em var(--kw-bg), -.05em -.05em var(--kw-bg), .065em .027em var(--kw-bg), -.065em .027em var(--kw-bg), .065em -.027em var(--kw-bg), -.065em -.027em var(--kw-bg), .027em .065em var(--kw-bg), -.027em .065em var(--kw-bg), .027em -.065em var(--kw-bg), -.027em -.065em var(--kw-bg); }
.home-hero h1 span:nth-child(1) { margin-top: 0; color: var(--kw-text); }
.home-hero h1 span:nth-child(2) { color: var(--kw-text); color: color-mix(in srgb, var(--kw-text) 62%, var(--kw-brand-text)); }
.home-hero h1 span:nth-child(3) { color: var(--kw-brand-text); }
.home-hero-copy > p { max-width: 670px; margin: 12px 0 0; color: var(--kw-text-secondary); font-size: 15px; line-height: 1.55; }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.btn--large { padding: 12px 20px; font-size: 15px; }
/* The two ways into the site. The site's own primary button is a pale tint, which next to a headline of this size read as one more secondary control; here the first step is a solid brand fill and the second an outline of the same size. */
.home-cta { padding: 14px 26px; border-width: 2px; font-size: 16px; font-weight: 700; justify-content: center; text-decoration: none; }
.home-cta--primary { border-color: var(--kw-brand); background: var(--kw-brand); color: #fff; box-shadow: var(--kw-shadow-md); }
.home-cta--primary:hover { border-color: var(--kw-brand-hover); background: var(--kw-brand-hover); color: #fff; }
.home-cta--secondary { border-color: var(--kw-brand-text); background: transparent; color: var(--kw-brand-text); }
.home-cta--secondary:hover { background: var(--kw-brand-light); }
.home-hero-card { border: 1px solid var(--kw-border); border-radius: var(--kw-radius-lg); background: var(--kw-surface-2); box-shadow: var(--kw-shadow-md); overflow: hidden; }
.home-hero-card > div { display: grid; gap: 3px; padding: 16px 18px; border-bottom: 1px solid var(--kw-border); }
.home-hero-card > div:last-child { border-bottom: 0; }
.home-hero-card strong { color: var(--kw-text); }
.home-hero-card span { color: var(--kw-text-secondary); font-size: 13px; }
.home-section { margin-top: 44px; }
.home-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.home-section-heading h2, .home-calendar-card h2, .home-progress h2 { margin: 4px 0 0; color: var(--kw-text); font-size: clamp(24px, 3.2vw, 34px); }
.home-question-card { padding: clamp(18px, 3vw, 30px); border: 1px solid var(--kw-border); border-radius: var(--kw-radius-lg); background: var(--kw-surface-2); }
.home-calendar-card { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); gap: 32px; align-items: center; margin-top: 52px; padding: 28px; border-radius: var(--kw-radius-lg); border: 1px solid var(--kw-border); background: linear-gradient(135deg, var(--kw-surface-2), var(--kw-surface-1)); }
.home-calendar-card p { color: var(--kw-text-secondary); line-height: 1.6; }
.home-calendar-visual { position: relative; height: 126px; border: 1px solid var(--kw-border); border-radius: var(--kw-radius-md); background: repeating-linear-gradient(90deg, transparent 0 calc(8.333% - 1px), var(--kw-border) calc(8.333% - 1px) 8.333%); }
.home-calendar-visual span { position: absolute; left: var(--home-period-start); top: 34px; width: var(--home-period-width); height: 18px; border-radius: 4px; background: var(--kw-danger); }
.home-calendar-visual span:nth-child(2) { top: 75px; }
.home-calendar-visual i { position: absolute; left: 66%; top: 0; bottom: 0; width: 2px; background: var(--kw-brand); }
/* The player spans the whole card: YouTube picks the quality by the size of the player, and a narrow one gets 360p. */
.home-video-card { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 0; }
.home-video-card p { margin: 0; }
.home-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 0; border-radius: var(--kw-radius-md); background: #000; }
.home-video img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.home-video:hover img, .home-video:focus-visible img { transform: scale(1.02); }
.home-video-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 54px; border-radius: 14px; background: var(--kw-danger); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); transform: translate(-50%, -50%); }
.home-video-play::after { content: ""; position: absolute; left: 31px; top: 15px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; }
.home-trainer-card .home-section-kicker, .home-video-card .home-section-kicker { font-size: 15px; }
.home-trainer-new { color: var(--kw-danger); }
.home-wide-button { display: flex; width: 100%; justify-content: center; }
.home-calendar-card .home-wide-button { margin-top: 24px; }
/* The still keeps its own light colours, like the board in the game: the atlas pictures are painted on white. */
.home-trainer-visual { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 4px; height: 250px; padding: 10px 12px; overflow: hidden; border: 1px solid var(--kw-border); border-radius: var(--kw-radius-md); background: #fff; color: #1A1D21; }
.home-trainer-catch { display: flex; align-items: baseline; justify-content: space-between; padding-right: 64px; font-size: 16px; }
.home-trainer-catch b:last-child { font-size: 20px; font-weight: 800; }
.home-trainer-leaf { position: absolute; top: 8px; right: 10px; display: grid; justify-items: center; width: 54px; overflow: hidden; border: 1px solid #C8CDD3; border-radius: 8px; background: #fff; line-height: 1.15; }
.home-trainer-leaf span { width: 100%; padding: 2px 0; background: #F1F3F5; color: #DC2626; font-size: 8px; font-weight: 700; text-align: center; text-transform: uppercase; }
.home-trainer-leaf strong { font-size: 20px; font-weight: 800; }
.home-trainer-leaf em { padding-bottom: 3px; color: #5C6370; font-size: 9px; font-style: normal; font-weight: 600; }
.home-trainer-visual img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.home-trainer-ruler { display: block; width: 100%; height: auto; }
.home-trainer-ruler line { stroke: #1A1D21; stroke-width: .6; }
.home-trainer-ruler text { fill: #1A1D21; font: 600 7px var(--kw-font); text-anchor: middle; }
.home-trainer-ruler path { fill: #1A1D21; }
.home-trainer-answers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
/* The answer the still is about: a zander in May is in its closed season. */
.home-trainer-answers span.is-chosen { border-color: #2563EB; background: #EFF6FF; color: #1D4ED8; }
.home-trainer-answers span { display: grid; place-items: center; min-height: 26px; padding: 2px 4px; border: 1.5px solid #C8CDD3; border-radius: 8px; font-size: 10px; font-weight: 700; line-height: 1.15; text-align: center; }
.home-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.home-guide article { padding: 20px; border: 1px solid var(--kw-border); border-radius: var(--kw-radius-lg); background: var(--kw-surface-2); }
.home-guide h3 { margin: 0 0 8px; color: var(--kw-text); font-size: 17px; }
.home-guide p { margin: 0; color: var(--kw-text-secondary); line-height: 1.62; }
.home-official-links { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 14px; padding: 14px 16px; color: var(--kw-text-secondary); font-size: 12px; }
.home-official-links span { font-weight: 700; color: var(--kw-text); }
.home-official-links a { color: var(--kw-brand); }
.home-articles-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.home-article-card { background: var(--kw-surface-2); }
.home-articles-footer { display: flex; justify-content: center; margin-top: 20px; }
.home-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; margin-top: 52px; padding: clamp(24px, 4vw, 40px); border-radius: var(--kw-radius-lg); background: var(--kw-brand); color: white; }
.home-progress .home-section-kicker, .home-progress h2, .home-progress p { color: white; }
.home-progress p { max-width: 760px; margin: 10px 0 0; line-height: 1.65; opacity: .88; }
.home-progress-actions { display: flex; flex-direction: column; gap: 9px; min-width: 210px; }
.home-progress .btn { justify-content: center; background: white; color: var(--kw-brand); border-color: transparent; }
.home-progress .btn--primary { background: var(--kw-surface-1); }

@media (max-width: 800px) {
    .home-hero { grid-template-columns: 1fr; padding-top: 0; }
    .home-hero-card { display: grid; grid-template-columns: 1fr 1fr; }
    .home-hero-card > div:nth-child(odd) { border-right: 1px solid var(--kw-border); }
    .home-calendar-card, .home-progress { grid-template-columns: 1fr; }
    .home-progress-actions { flex-direction: row; min-width: 0; flex-wrap: wrap; }
    /* In one column the kicker goes above the still, as in the video card: the text column dissolves into the card's grid. */
    .home-trainer-card { gap: 0; }
    .home-trainer-card > div:last-child { display: contents; }
    .home-trainer-card .home-section-kicker { order: -1; margin-bottom: 16px; }
    .home-trainer-card .home-trainer-visual { margin-bottom: 16px; }
    /* On a phone the section links would push the video and the trainer below the first screen,
       so the hero dissolves into the page: its headline and buttons stay on top, its paragraph and link card move below
       them and the question of the day. */
    .home-page { display: flex; flex-direction: column; }
    .home-hero, .home-hero-copy { display: contents; }
    .home-eyebrow, .home-hero h1, .home-hero-actions { order: -2; }
    .home-hero-actions { margin-bottom: 32px; }
    .home-video-card, .home-trainer-card, .home-question { order: -1; }
    .home-hero-copy > p { margin-top: 32px; }
    .home-hero-card { margin-top: 16px; }
}

@media (max-width: 560px) {
    .home-page { padding-inline: 12px; }
    .home-hero-actions { flex-direction: column; }
    .home-cta { width: 100%; }
    .home-hero-card, .home-guide-grid, .home-articles-grid { grid-template-columns: 1fr; }
    .home-hero-card > div { border-right: 0 !important; }
    .home-calendar-card { padding: 20px; }
    .home-calendar-visual { height: 100px; }
}