:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #10261f; background: #f8f5ed; }
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.55; }
a { color: #176b4d; text-underline-offset: 3px; }
a:hover { color: #0d5038; }
:focus-visible { outline: 3px solid #176b4d; outline-offset: 3px; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 3; padding: .5rem; background: white; }
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #d7ddd8; padding: .8rem max(1rem, calc((100vw - 1000px)/2)); background: #fffdf8; }
.brand { display: flex; align-items: center; gap: .7rem; color: #10261f; font-size: 1.3rem; font-weight: 850; text-decoration: none; }
.brand img { border-radius: .55rem; }
.tag, .eyebrow { color: #176b4d; font-weight: 850; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.tag { border: 1px solid #176b4d; border-radius: 100px; padding: .3rem .6rem; white-space: nowrap; }
.wrap { width: min(100% - 2rem, 1000px); margin: 0 auto; padding: clamp(2rem, 6vw, 5rem) 0 5rem; min-height: 62vh; }
.welcome { max-width: 700px; }
h1 { font-size: clamp(2.5rem, 7vw, 5.3rem); line-height: 1.05; letter-spacing: -.055em; margin: .5rem 0 1rem; }
h2 { font-size: 1.35rem; line-height: 1.2; margin: 0 0 .6rem; }
.lead { font-size: clamp(1.35rem, 4vw, 2rem); font-weight: 750; margin: 0; }
.sample-note { max-width: 870px; padding: .75rem 1rem; border-left: 4px solid #176b4d; background: #e8eee5; font-size: .93rem; }
.actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }
.actions a { display: grid; grid-template-rows: auto 1fr auto; gap: .5rem; min-height: 195px; padding: 1.3rem; border: 1px solid #cbd7cf; border-radius: 18px; background: white; box-shadow: 0 10px 26px #10261f0d; color: #10261f; text-decoration: none; }
.actions a:hover { border-color: #176b4d; background: #f2f7ef; }
.actions strong { font-size: 1.42rem; }
.actions small { color: #52635d; font-size: .92rem; }
.actions b { justify-self: end; color: #176b4d; }
.session, .fine, .back { color: #52635d; font-size: .92rem; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin: 1.5rem 0; }
.card { padding: clamp(1.15rem, 3vw, 1.7rem); border: 1px solid #d7ddd8; border-radius: 18px; background: white; margin: 1rem 0; }
.card .eyebrow { margin-top: 0; }
.inline { font-weight: 750; }
form { max-width: 700px; }
label { display: block; margin: 1rem 0; font-weight: 700; }
textarea, input:not([type="checkbox"]):not([type="hidden"]) { display: block; width: 100%; margin-top: .4rem; padding: .75rem; font: inherit; border: 1px solid #7f9587; border-radius: 9px; background: #fff; color: #10261f; }
textarea { resize: vertical; }
.check { display: flex; align-items: flex-start; gap: .6rem; font-weight: 500; }
.check input { margin-top: .35rem; accent-color: #176b4d; }
button, .button { display: inline-block; padding: .8rem 1.2rem; border: 1px solid #176b4d; border-radius: 10px; color: #fff; background: #176b4d; font: inherit; font-weight: 750; text-decoration: none; cursor: pointer; }
button:hover, .button:hover { background: #0d5038; color: white; }
.secondary { background: white; color: #176b4d; }
.secondary:hover { background: #e8eee5; color: #10261f; }
.quiet { background: transparent; color: #176b4d; }
.quiet:hover { color: white; }
.buttons { display: flex; flex-wrap: wrap; gap: .7rem; }
.status { padding: .8rem; border-radius: 8px; background: #e8eee5; }
footer { padding: 2rem max(1rem, calc((100vw - 1000px)/2)); background: #10261f; color: #fff; }
footer a { color: #d6f05d; }
footer .sample-note { color: #10261f; }
footer .quiet { color: #d6f05d; border-color: #d6f05d; }
@media(max-width: 700px) { .actions,.grid { grid-template-columns: 1fr; } .actions a { min-height: 0; grid-template-columns: 2rem 1fr auto; grid-template-rows: auto auto; gap: 0 .75rem; } .actions a span { grid-row: span 2; } .actions a strong { grid-column: 2; } .actions a small { grid-column: 2; } .actions a b { grid-row: 1 / 3; grid-column: 3; align-self: center; } }