/* Matches Stage 4 app chrome and its Action/Feature colour definitions. */
:root { color-scheme: light; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #253447; background: #fff; --ink: #253447; --yellow: #ffdb57; --sky: #8dcdff; --mint: #93e6c5; --coral: #ffa18c; --pink: #ff96bd; --peach: #ffb578; }
* { box-sizing: border-box; }
body { margin: 0; }
body::before { content: ""; display: block; height: 8px; background: linear-gradient(to right, var(--yellow) 0% 16.67%, var(--sky) 16.67% 33.33%, var(--mint) 33.33% 50%, var(--coral) 50% 66.67%, var(--pink) 66.67% 83.33%, var(--peach) 83.33% 100%); }
main { max-width: 860px; margin: auto; padding: 42px 28px; }
header { padding-bottom: 14px; }
.brand { font-size: 1.15rem; font-weight: 900; letter-spacing: .28em; color: var(--ink); margin: 0 0 32px; }
h1 { font-size: clamp(2.25rem, 7vw, 3.5rem); font-weight: 900; line-height: 1.1; margin: 0 0 16px; letter-spacing: -.035em; }
.date { color: #536071; font-size: .95rem; }
.intro { font-size: 1.08rem; line-height: 1.75; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); border-radius: 22px; box-shadow: 0 4px 0 var(--ink); padding: 22px 24px; margin-top: 26px; }
section { margin-top: 32px; padding-bottom: 22px; border-bottom: 1px solid #dce0e5; }
section:last-child { border-bottom: 0; }
h2 { color: var(--ink); font-size: 1.35rem; font-weight: 850; line-height: 1.35; margin: 0 0 12px; }
p { line-height: 1.8; margin: 12px 0; }
a { color: #1759b4; text-underline-offset: .2em; overflow-wrap: anywhere; }
a:hover { color: var(--ink); text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 2px; background: var(--sky); }
::selection { background: var(--sky); color: var(--ink); }
.package { overflow-wrap: anywhere; }
footer { border-top: 2px solid var(--ink); margin-top: 24px; padding-top: 20px; color: var(--ink); font-size: .9rem; font-weight: 700; }
@media (max-width: 480px) { main { padding: 28px 20px; } section { margin-top: 26px; } .brand { margin-bottom: 26px; } .intro { padding: 18px; } }
@media print { body::before { display: none; } main { max-width: none; padding: 0; } .intro { background: white; box-shadow: none; } a { color: black; } }