/* Learn pillar page. Reuses the site tokens from styles.css (--green #153d2e,
   --green-light, --cream, fonts). No new visual system, no new colors. */

/* Section 1: hero (editorial, text-led) */
.learn-hero { padding: 70px 0 90px; max-width: 980px; }
.learn-hero h1 { max-width: 900px; margin-bottom: 36px; font-size: clamp(2.9rem, 5.6vw, 5rem); line-height: .96; }
.learn-hero-copy { max-width: 680px; }
.learn-hero-copy p { margin: 0 0 20px; color: #3f4a42; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.6; }
.learn-credit { max-width: 640px; margin: 34px 0 30px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; line-height: 1.6; }

/* Section 2: three pillars */
.learn-pillars { padding: 115px 0 125px; }
.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.pillar-card { display: flex; flex-direction: column; height: 100%; padding: 32px 30px; background: var(--paper); border: 1px solid var(--line); }
.pillar-media { margin: -32px -30px 24px; overflow: hidden; }
.pillar-media img { display: block; width: 100%; height: 215px; object-fit: cover; filter: saturate(.78); }
.pillar-tag { color: var(--green-light); font: 700 12px var(--display); letter-spacing: .06em; text-transform: uppercase; }
.pillar-card h3 { margin: 12px 0 18px; font: 500 27px/1.05 var(--editorial); letter-spacing: -.02em; }
.pillar-list { margin: 0 0 22px; padding: 0 0 20px; border-bottom: 1px solid var(--line); list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; }
.pillar-list li { position: relative; padding-left: 15px; color: #3f4a42; font-size: 13.5px; line-height: 1.4; }
.pillar-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--green-light); }
.pillar-card > p { margin: auto 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

/* Section 3: beginner sequence */
.learn-sequence { padding: 115px 0 120px; }
.sequence-list { max-width: 760px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.sequence-list li { display: grid; grid-template-columns: 54px 1fr; gap: 22px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.sequence-list li span { color: var(--green-light); font: 600 14px var(--display); letter-spacing: .04em; }
.sequence-list li p { margin: 0; font: 500 clamp(1.15rem, 2vw, 1.5rem)/1.3 var(--editorial); letter-spacing: -.01em; color: var(--ink); }
.sequence-list li p em { color: var(--green-light); font-style: italic; }
.sequence-note { max-width: 720px; margin: 36px 0 0; padding: 26px 30px; background: var(--cream); color: #3f4a42; font-size: 15px; line-height: 1.65; }

/* Section 4: do you need a degree */
.learn-degree { padding: 110px 0 120px; }
.degree-copy { max-width: 760px; }
.degree-copy p { margin: 0 0 20px; color: #3f4a42; font-size: 17px; line-height: 1.7; }
.degree-fineprint { margin-top: 26px !important; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px !important; line-height: 1.65; }

/* Section 5: choose where you are */
.learn-choose { padding: 115px 0 120px; }
.choose-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.choose-card { display: flex; flex-direction: column; padding: 34px 32px; background: var(--paper); border: 1px solid var(--line); transition: transform .2s ease; }
.choose-card:hover { transform: translateY(-4px); }
.choose-card.is-primary { color: var(--paper); background: var(--green); border-color: var(--green); }
.choose-tag { color: var(--green-light); font: 700 12px var(--display); letter-spacing: .06em; text-transform: uppercase; }
.choose-card.is-primary .choose-tag { color: #c4d5c5; }
.choose-card h3 { margin: 13px 0 6px; font: 500 26px/1.05 var(--editorial); letter-spacing: -.02em; }
.choose-price { margin: 0 0 18px; color: var(--green-light); font: 700 22px var(--display); letter-spacing: -.03em; }
.choose-card.is-primary .choose-price { color: #c6d7c6; }
.choose-copy { margin: 0 0 14px; color: var(--ink); font-size: 15px; line-height: 1.6; font-weight: 500; }
.choose-card.is-primary .choose-copy { color: var(--paper); }
.choose-support { margin: 0 0 26px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.choose-card.is-primary .choose-support { color: #c8d4c9; }
.choose-btn { margin-top: auto; width: 100%; }

/* Section 6: quiz (reuses .quiz-card from styles.css) */
.learn-quiz { padding: 20px 0 115px; }
.learn-quiz .quiz-card-copy > p:not(.eyebrow) { margin-bottom: 28px; }

/* Section 7: course goes deeper */
.learn-deeper { padding: 110px 0 120px; }
.deeper-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.deeper-col { padding: 30px 28px; background: var(--paper); border: 1px solid var(--line); }
.deeper-col h3 { margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font: 700 13px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--green-light); }
.deeper-col ul { margin: 0; padding: 0; list-style: none; }
.deeper-col li { padding: 9px 0; color: #3f4a42; font-size: 14px; line-height: 1.5; border-bottom: 1px solid rgba(17,24,19,.08); }
.deeper-col li:last-child { border-bottom: 0; }
.deeper-note { max-width: 820px; margin: 40px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

/* Section 8: founder */
.learn-founder { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 9%; padding: 120px 0 125px; }
.founder-media { position: relative; max-width: 360px; }
.founder-media::after { position: absolute; content: ''; z-index: -1; right: -18px; bottom: -18px; width: 78%; height: 78%; background: var(--cream); }
.founder-media img { display: block; width: 100%; aspect-ratio: .86; object-fit: cover; filter: saturate(.8); }
.founder-copy { max-width: 600px; }
.founder-copy h2 { margin-bottom: 24px; }
.founder-copy p { margin: 0 0 22px; color: #3f4a42; font-size: 17px; line-height: 1.7; }

/* Section 9: FAQ (self-contained, does not rely on course.css) */
.learn-faq { padding: 20px 0 120px; }
.faq-list { max-width: 820px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font: 500 clamp(1.1rem, 1.8vw, 1.35rem) var(--editorial); letter-spacing: -.01em; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--green-light); font: 300 26px/1 var(--display); }
.faq-item[open] summary::after { content: '\2013'; }
.faq-item p { margin: 0 0 24px; max-width: 720px; color: #3f4a42; font-size: 15px; line-height: 1.7; }
.faq-more { max-width: 760px; margin: 34px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.faq-more a { color: var(--green-light); border-bottom: 1px solid var(--green-light); }
.faq-more a:hover { color: var(--ink); border-color: var(--ink); }

/* Mobile */
@media (max-width: 860px) {
  .pillars-grid, .choose-grid, .deeper-grid { grid-template-columns: 1fr; }
  .learn-founder { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .learn-hero { padding: 54px 0 64px; }
  .learn-pillars { padding: 78px 0 84px; }
  .pillar-list { grid-template-columns: 1fr 1fr; }
  .learn-sequence { padding: 78px 0 84px; }
  .learn-degree { padding: 76px 0 82px; }
  .learn-choose { padding: 78px 0 84px; }
  .choose-grid { gap: 14px; }
  .learn-quiz { padding: 10px 0 78px; }
  .learn-deeper { padding: 76px 0 82px; }
  .deeper-grid { gap: 14px; }
  .learn-founder { gap: 44px; padding: 84px 0 90px; }
  .founder-media { max-width: 280px; }
  .learn-faq { padding: 10px 0 82px; }
}