:root { --ink: #242c35; --soft: #606771; --line: #dcdedb; --accent: #2f5597; --on-accent: #ffffff; --bg: #f7f7f2; --surface: #fff; --tint: #e9eef4; }
@media (prefers-color-scheme: dark) { :root { --ink: #eceee9; --soft: #abb3bc; --line: #39414a; --accent: #8fb0ea; --on-accent: #141414; --bg: #181e24; --surface: #222a32; --tint: #293542; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.8 system-ui, "Malgun Gothic", sans-serif; word-break: keep-all; overflow-wrap: anywhere; }
a { color: var(--accent); text-underline-offset: 4px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
header, main, footer { width: min(100%, 1120px); margin-inline: auto; padding-inline: 32px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 25px; border-bottom: 1px solid var(--line); }
.home { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-weight: 800; letter-spacing: -.04em; font-size: 20px; }
.home svg { width: 40px; height: 26px; color: var(--accent); }
.brand-note { font-size: 12px; color: var(--soft); }
main { padding-top: 64px; }
main:has(form), main:has(> ol), main:has(> h2) { max-width: 760px; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(30px, 4vw, 48px); line-height: 1.25; letter-spacing: -.055em; margin-bottom: 24px; }
h2 { font-size: 22px; line-height: 1.5; letter-spacing: -.035em; margin: 38px 0 12px; }
p { margin-bottom: 16px; }
li + li { margin-top: 10px; }
ul, ol { padding-left: 22px; }
.eyebrow { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.hero { position: relative; padding: 28px 0 52px; max-width: 860px; }
.hero h1 { font-size: clamp(40px, 6.5vw, 76px); line-height: 1.2; letter-spacing: -.065em; margin: 20px 0 24px; }
.hero h1 span { color: var(--accent); }
.story, .lead { font-size: 18px; color: var(--soft); line-height: 1.85; }
.hero-note { display: flex; align-items: center; gap: 9px; margin-top: 34px; font-size: 12px; color: var(--soft); }
.note-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--accent); }
.course-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.card { display: block; color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); transition: transform .25s ease, box-shadow .25s ease; }
.card:nth-child(2) { margin-top: 56px; }
.card-body { padding: 28px; }
.card h2 { font-size: 27px; margin: 8px 0 18px; }
.card-outcome { min-height: 54px; }
.card-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 24px; }
.card-link { font-size: 13px; font-weight: 700; color: var(--accent); }
.card-link span { margin-left: 8px; font-size: 20px; }
.price { font-size: 25px; font-weight: 750; letter-spacing: -.04em; margin: 0; }
.small, .note { font-size: 14px; color: var(--soft); }
.closing-note { text-align: center; padding: 76px 0 12px; color: var(--soft); font-size: 14px; }
.course-art { height: 282px; position: relative; overflow: hidden; isolation: isolate; }
.art-caption, .art-signature { position: absolute; z-index: 2; font-size: 11px; letter-spacing: .04em; }
.art-caption { top: 20px; left: 24px; }
.art-signature { right: 24px; bottom: 18px; padding: 2px 7px; border-radius: 4px; background: #fffffff0; }
.office-art { background: #dce6e9; color: #36566b; background-image: linear-gradient(#b7c9cf40 1px, transparent 1px), linear-gradient(90deg,#b7c9cf40 1px,transparent 1px); background-size: 24px 24px; }
.paper { position: absolute; width: 160px; height: 190px; left: calc(50% - 80px); top: 61px; border: 1px solid #fff; border-radius: 3px; background: #fafbf8; box-shadow: 0 2px 3px #25364220, 0 17px 30px #25364226; }
.paper-back { transform: translate(-32px,-8px) rotate(-12deg); background: #e8eeef; }
.paper-front { transform: rotate(7deg); padding: 20px; }
.paper-title { display: block; color: #304657; font-size: 11px; font-weight: 700; margin-bottom: 17px; }
.paper-line { display: block; height: 3px; width: 100%; background: #a9b9c3; margin-bottom: 7px; }
.paper-line.short { width: 62%; }
.paper-grid { height: 63px; margin-top: 15px; background: repeating-linear-gradient(0deg,transparent 0 14px,#cbd6dc 14px 15px),repeating-linear-gradient(90deg,transparent 0 38px,#cbd6dc 38px 39px); border: 1px solid #cbd6dc; }
.paper-seal { position: absolute; bottom: 13px; right: 15px; color: #2f5597; font-size: 24px; }
.music-art { background: #e7e3f1; color: #554670; }
.record { width: 208px; height: 208px; position: absolute; top: 56px; left: calc(50% - 64px); border-radius: 50%; background: repeating-radial-gradient(circle,#3c3e50 0 1px,#262938 2px 5px); box-shadow: 0 16px 25px #26293830; transform: rotate(-15deg); }
.record-label { position: absolute; inset: 68px; background: #d2c4e5; border-radius: 50%; display: flex; justify-content: center; align-items: center; text-align: center; font: 700 12px/1.2 system-ui,sans-serif; color: #362949; }
.wave { position: absolute; width: 90%; left: -9%; top: 84px; color: #fff; filter: drop-shadow(0 1px 2px #33264030); }
.product-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; padding: 16px 0 56px; border-bottom: 1px solid var(--line); }
.product-hero .course-art { border-radius: 14px; transform: rotate(2deg); }
.hero-price { margin-top: 28px; font-size: 22px; font-weight: 700; }
.hero-price span { display: inline-block; font-size: 13px; color: var(--soft); font-weight: 400; }
.product-body { max-width: 680px; margin: 0 auto; }
.product-body section:not(.buy) { padding: 20px 0; border-bottom: 1px solid var(--line); }
.product-body section h2 { margin-top: 20px; }
.buy { background: var(--tint); border: 1px solid var(--line); border-radius: 16px; padding: 28px; margin-top: 48px; }
.buy .price { margin-bottom: 15px; }
.btn { display: block; width: 100%; padding: 16px 20px; border: 0; border-radius: 8px; background: var(--accent); color: var(--on-accent); font: 700 16px/1.5 system-ui,"Malgun Gothic",sans-serif; text-align: center; text-decoration: none; cursor: pointer; transition: transform .2s ease; }
.btn:disabled { opacity: .6; cursor: wait; }
.other { text-align: center; margin-top: 26px; }
form, #done { margin-top: 28px; border: 1px solid var(--line); border-radius: 14px; padding: 28px; background: var(--surface); }
label { display: block; margin: 0 0 22px; font-size: 14px; font-weight: 600; }
input[type=email], input:not([type]) { display: block; width: 100%; padding: 13px; margin-top: 8px; border: 1px solid var(--line); border-radius: 7px; font: inherit; background: var(--bg); color: var(--ink); }
.check { display: flex; align-items: start; gap: 10px; margin-top: 20px; font-size: 13px; }
.check input { margin: 6px 0 0; accent-color: var(--accent); }
details { margin: 20px 0; font-size: 13px; color: var(--soft); }
summary { cursor: pointer; }
#error { margin: 18px 0 0; }
dl { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 4px 18px; margin: 12px 0; }
dt { color: var(--soft); }
dd { margin: 0; }
footer { border-top: 1px solid var(--line); margin-top: 90px; padding-block: 32px 48px; font-size: 12px; color: var(--soft); }
footer a { color: var(--ink); }
footer > p { margin-bottom: 26px; }
.skip { position: fixed; top: 10px; left: 10px; z-index: 10; padding: 10px; background: var(--surface); transform: translateY(-180%); }
.skip:focus { transform: none; }
@media (hover:hover) { .card:hover { transform: translateY(-5px); box-shadow: 0 12px 28px #17293a12; } .btn:hover { transform: translateY(-2px); } }
@media (max-width: 700px) {
  header, main, footer { padding-inline: 20px; }
  header { padding-block: 20px; }
  .home { font-size: 18px; gap: 9px; }
  .home svg { width: 32px; }
  .brand-note { font-size: 10px; }
  main { padding-top: 36px; }
  .hero { padding-top: 14px; padding-bottom: 36px; }
  .story, .lead { font-size: 16px; }
  .hero-note { font-size: 11px; }
  .course-grid, .product-hero { grid-template-columns: 1fr; gap: 24px; }
  .card:nth-child(2) { margin-top: 0; }
  .card-body { padding: 24px; }
  .card h2 { font-size: 24px; }
  .course-art { height: 252px; }
  .art-caption { left: 20px; }
  .paper { top: 49px; height: 178px; }
  .record { top: 40px; }
  .product-hero { padding-top: 0; padding-bottom: 36px; }
  .product-hero .course-art { transform: none; }
  .hero-price { margin-bottom: 0; }
  .buy, form, #done { padding: 20px; }
  .closing-note { padding-top: 42px; }
  footer { margin-top: 64px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Content-led course discovery: restrained color and legible reading pages. */
:root{--bg:#f7f7f3;--ink:#202b2c;--soft:#596868;--line:#d8dfda;--accent:#245e5a;--on-accent:#fff;--tint:#eef2ed}
@media(prefers-color-scheme:dark){:root{--bg:#121918;--ink:#ecf0e9;--soft:#b3bfba;--line:#354440;--accent:#b6dcd0;--on-accent:#14211d;--surface:#1c2622;--tint:#22312a}}
html{scroll-padding-top:30px}header,main,footer{max-width:1180px}header{border-bottom:0;padding-block:28px}header nav{display:flex;gap:24px;font-size:14px}header nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}.home{font-weight:700}.home svg{width:34px}main{padding-top:40px}.hero{max-width:100%;padding:32px 0 65px}.hero h1{font-size:clamp(36px,5.2vw,65px);letter-spacing:-.06em;line-height:1.25}.hero h1 span{color:var(--ink)}.hero .story{font-size:18px;line-height:1.7}.hero-action{display:inline-flex;align-items:center;gap:32px;background:var(--accent);color:var(--on-accent);text-decoration:none;padding:14px 22px;border-radius:5px;font-weight:650;min-height:50px;margin:16px 0}.hero-action:hover{filter:brightness(.94)}
.audiences{padding:10px 0 60px}.audiences h2{font-size:24px;margin:0 0 28px}.audience-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.audience-grid>a,.audience-grid>div{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line);padding:24px 0;color:var(--ink);text-decoration:none}.audience-grid strong{font-size:19px}.audience-grid span{font-size:14px;color:var(--soft)}.audience-grid b{font-size:13px;font-weight:550;margin-top:10px;color:var(--accent)}.audience-grid>div b{color:var(--soft)}.section-intro{margin:24px 0}.section-intro h2{margin:0 0 28px;font-size:29px}.section-intro .eyebrow{margin-bottom:12px}.card{border-radius:8px;border:1px solid var(--line)}.card:nth-child(2){margin-top:0}.card h2{font-size:25px}.card-outcome{min-height:0}.course-art{height:255px}.music-art{background:#dfe8e5;color:#314d44}.card-body{padding:28px}.sharing{max-width:740px;padding-block:55px 0}.sharing p{color:var(--soft)}.back-link{display:inline-block;min-height:44px;margin-bottom:22px;color:var(--soft);text-decoration:none}.product-hero{gap:60px;padding-bottom:48px}.product-hero h1{font-size:clamp(32px,4.5vw,50px)}.product-hero .course-art{transform:none;border-radius:8px}.product-body{max-width:760px}.product-body section:not(.buy){padding:22px 0}.product-body section h2{font-size:22px;margin-top:14px}.product-body li{line-height:1.9}.text-link{display:inline-block;min-height:44px;font-size:14px}.buy{border-radius:8px;padding:30px}.availability{font-size:15px;font-weight:600}.empty-state{max-width:700px;margin:auto;padding:25px 0 70px}.empty-state h1{font-size:clamp(28px,4vw,40px)}.empty-state>p:last-child{margin-top:18px;font-size:14px}footer{margin-top:70px}footer>p{font-size:13px}
@media(max-width:700px){header,main,footer{padding-inline:22px}header{padding-block:14px;gap:12px}header nav{gap:14px;font-size:13px}.home{font-size:17px}.home svg{width:26px}main{padding-top:22px}.hero{padding:20px 0 40px}.hero .story{font-size:16px}.hero-action{font-size:14px}.audience-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px}.audience-grid strong{font-size:18px}.audience-grid span{font-size:13px}.audiences{padding-bottom:26px}.audiences h2{font-size:22px}.section-intro h2{font-size:25px}.card-body{padding:23px}.course-grid{gap:26px}.product-hero{gap:25px}.product-hero .course-art{height:225px}.product-body section h2{font-size:21px}.sharing{padding-top:35px}.sharing h2{font-size:25px}footer{margin-top:52px}.buy{padding:24px}}