/* Matcha design tokens - the values behind learnwithmatcha.com */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500&display=swap');

:root {
  /* --- surface + ink --- */
  --mt-black: #000;
  --mt-dark: #080808;
  --mt-white: #fff;
  --mt-off: #fafafa;
  --mt-ink: #171719;
  --mt-grey: #393939;
  --mt-mute: #8a8a8c;
  --mt-line: #e9e9e7;
  --mt-body-dark: #c2c2c4;

  /* --- brand --- */
  --mt-accent: #ff6a2b;
  --mt-matcha: #8fc04e;
  --mt-matcha-deep: #6d9a2f;

  /* --- type --- */
  --mt-font-sans: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mt-font-serif: Georgia, "Times New Roman", "Iowan Old Style", serif;
  --mt-weight-light: 300;
  --mt-weight-regular: 400;
  --mt-size-display: clamp(40px, 4.34vw, 82px);
  --mt-size-h2: clamp(29px, 2.54vw, 48px);
  --mt-size-h3: clamp(22px, 1.7vw, 32px);
  --mt-size-body: 15px;
  --mt-size-small: 14px;
  --mt-size-eyebrow: 11px;
  --mt-track-display: -0.06em;
  --mt-track-heading: -0.04em;
  --mt-track-eyebrow: 0.16em;

  /* --- layout --- */
  --mt-pad: clamp(20px, 5.55vw, 105px);
  --mt-section-y: clamp(64px, 6.35vw, 120px);
  --mt-nav-h: 64px;
  --mt-radius: 8px;
  --mt-radius-pill: 50px;

  /* --- veils: darken imagery so text stays legible --- */
  --mt-veil-card: linear-gradient(to top, rgba(8,8,8,.94) 6%, rgba(8,8,8,.62) 38%, rgba(8,8,8,.20) 72%, rgba(8,8,8,.10) 100%);
  --mt-veil-panel: linear-gradient(to top, rgba(8,8,8,.97) 6%, rgba(8,8,8,.72) 34%, rgba(8,8,8,.05) 62%);
  --mt-veil-hero: linear-gradient(to top, rgba(0,0,0,.92) 4%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.34) 70%, rgba(0,0,0,.5) 100%);

  /* --- gradient art ---
     Sampled from the brand's gradient photography and rebuilt as CSS, so they
     scale to any size with no image asset. */
  --mt-gradient-amber: linear-gradient(to bottom,
    #d67a5d 0%, #e4b691 11%, #ecce97 22%, #f1e0af 33%, #e89e61 44%,
    #c75e47 55%, #b66f68 66%, #b17c7d 77%, #a97d80 88%, #68485a 100%);
  --mt-gradient-blue: linear-gradient(to bottom,
    #97b0b9 0%, #99aeb6 11%, #7192a5 22%, #4e7892 33%, #5a788a 44%,
    #7f8f98 55%, #51768b 66%, #325b6f 77%, #234858 88%, #223849 100%);
  --mt-gradient-sage: linear-gradient(to bottom,
    #d8ded0 0%, #b6c4ac 18%, #8d9a86 42%, #5d6a5c 70%, #20241f 100%);
  --mt-gradient-ink: linear-gradient(to bottom,
    #3a3a3f 0%, #232327 45%, #101012 100%);

  /* film grain laid over gradient art */
  --mt-grain: radial-gradient(rgba(255,255,255,.13) .6px, transparent .6px);
  --mt-grain-size: 3px 3px;
}

/* Matcha component styles. Every rule is prefixed `mt-` so the system can drop
   into any host page without colliding with app CSS. */

/* Every component root carries the brand font itself. Depending on a wrapper
   class would silently render the whole system in Times wherever a host page
   forgot it - the failure is invisible until someone looks at a screenshot. */
.mt-ann, .mt-nav, .mt-hero, .mt-section, .mt-eyebrow, .mt-h2, .mt-headrow,
.mt-btn, .mt-rail, .mt-card, .mt-arrow, .mt-arrows, .mt-pillars, .mt-pillar,
.mt-statement, .mt-gradient, .mt-panel, .mt-panel-pair, .mt-dotfield,
.mt-acc, .mt-acc summary, .mt-footer, .mt-burger {
  font-family: var(--mt-font-sans);
  font-weight: var(--mt-weight-light);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.mt-ann *, .mt-nav *, .mt-hero *, .mt-section *, .mt-card *, .mt-pillar *,
.mt-statement *, .mt-panel *, .mt-dotfield *, .mt-acc *, .mt-footer * {
  box-sizing: border-box;
}
/* the wordmark is the deliberate exception - it is set in serif */
.mt-wordmark { font-family: var(--mt-font-serif); }

.mt-root, .mt-scope { font-family: var(--mt-font-sans); font-weight: var(--mt-weight-light);
  -webkit-font-smoothing: antialiased; color: var(--mt-white); background: var(--mt-black); }
.mt-scope *, .mt-scope *::before, .mt-scope *::after { box-sizing: border-box; }
.mt-scope a { color: inherit; text-decoration: none; }
/* these render as <a> when given href, so they must reset link styling themselves */
/* Links inherit their surface's ink - but buttons must NOT, or `color: inherit`
   outranks .mt-btn--solid and paints white text on the white pill. */
.mt-nav a:not(.mt-btn), .mt-ann a:not(.mt-btn), .mt-footer a:not(.mt-btn),
.mt-panel a:not(.mt-btn), a.mt-card, .mt-card a:not(.mt-btn) {
  color: inherit; text-decoration: none; }
a.mt-btn { text-decoration: none; }

/* ---------- Wordmark ---------- */
.mt-wordmark { color: var(--mt-white); font-family: var(--mt-font-serif); font-size: 24px; font-weight: var(--mt-weight-regular);
  letter-spacing: -.015em; line-height: 1; display: inline-block; }
.mt-wordmark--sm { font-size: 18px; }
.mt-wordmark--lg { font-size: 34px; }
.mt-wordmark i { font-style: italic; color: var(--mt-matcha); font-size: 1.06em;
  letter-spacing: -.03em; padding-right: .02em; }
.mt-wordmark--onLight { color: var(--mt-ink); }
.mt-wordmark--onLight i { color: var(--mt-matcha-deep); }

/* ---------- Button ---------- */
.mt-btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  border-radius: var(--mt-radius-pill); font-family: var(--mt-font-sans); font-size: 14px;
  font-weight: var(--mt-weight-regular); letter-spacing: -.01em; padding: 11px 24px;
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s; }
.mt-btn--solid { background: var(--mt-white); color: var(--mt-ink); }
.mt-btn--solid:hover { background: #e2e2e0; }
.mt-btn--ghost { border-color: rgba(255,255,255,.45); color: var(--mt-white); background: transparent; }
.mt-btn--ghost:hover { border-color: var(--mt-white); background: rgba(255,255,255,.08); }
.mt-btn--onLight.mt-btn--ghost { border-color: rgba(23,23,25,.38); color: var(--mt-ink); }
.mt-btn--onLight.mt-btn--ghost:hover { background: var(--mt-ink); color: var(--mt-white); border-color: var(--mt-ink); }
.mt-btn--sm { padding: 9px 17px; font-size: 13px; }
.mt-btn--lg { padding: 19px 40px; font-size: 17px; letter-spacing: -.02em; }

/* ---------- AnnouncementBar ---------- */
.mt-ann { background: var(--mt-white); color: var(--mt-ink); display: flex; align-items: center;
  justify-content: center; gap: 16px; min-height: 44px; font-size: 12px; letter-spacing: -.01em;
  padding: 10px var(--mt-pad); flex-wrap: wrap; text-align: center; }
.mt-ann b { font-weight: var(--mt-weight-regular); }
.mt-ann a { color: #6b6b6d; }
.mt-ann a:hover { color: var(--mt-ink); }

/* ---------- NavBar ---------- */
.mt-nav { color: var(--mt-white); position: sticky; top: 0; z-index: 100; display: flex; align-items: center;
  padding: 0 var(--mt-pad); height: var(--mt-nav-h); background: transparent;
  transition: background .35s ease, color .35s ease; }
.mt-nav--solid { background: var(--mt-black); }
.mt-nav--light { background: var(--mt-white); color: var(--mt-ink); }
.mt-nav__links { display: flex; gap: 32px; font-size: 13px; letter-spacing: -.01em; margin-left: 56px; }
.mt-nav__links a { opacity: .9; }
.mt-nav__links a:hover { opacity: 1; }
.mt-nav__right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.mt-burger { display: none; flex-direction: column; gap: 5px; background: none; color: inherit;
  border: 0; cursor: pointer; padding: 6px; width: 34px; height: 34px;
  align-items: center; justify-content: center; }
.mt-burger span { width: 20px; height: 1px; background: currentColor; display: block; }
@media (max-width: 1000px) { .mt-nav__links { display: none; } .mt-burger { display: flex; } }

/* ---------- Hero ---------- */
.mt-hero { color: var(--mt-white); position: relative; overflow: hidden; background: var(--mt-black);
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(560px, 50.7vw, 959px); padding: 0 var(--mt-pad) clamp(44px, 4.6vw, 88px);
  margin-top: calc(-1 * var(--mt-nav-h)); }
.mt-hero--full { min-height: 100vh; min-height: 100svh; }
.mt-hero__media { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none; }
.mt-hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--mt-veil-hero); }
.mt-hero__glow { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(1100px 620px at 74% 34%, rgba(255,255,255,.07), transparent 62%); }
.mt-hero__inner { position: relative; z-index: 2; display: grid;
  grid-template-columns: 1.4fr .8fr; gap: clamp(30px, 5vw, 80px);
  align-items: end; width: 100%; padding-top: calc(var(--mt-nav-h) + 24px); }
.mt-hero__title { font-size: var(--mt-size-display); font-weight: var(--mt-weight-light);
  line-height: 1.05; letter-spacing: var(--mt-track-display); margin: 0; }
.mt-hero__sub { font-size: clamp(15px, 1.06vw, 20px); line-height: 1.4; letter-spacing: -.02em;
  color: var(--mt-off); max-width: 30ch; margin: 0; }
.mt-hero__actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
@media (max-width: 1000px) {
  .mt-hero__inner { grid-template-columns: 1fr; align-items: start; gap: 28px; }
}

/* ---------- Section / headings ---------- */
.mt-section { padding: var(--mt-section-y) var(--mt-pad); }
.mt-section--dark { background: var(--mt-dark); color: var(--mt-white); }
.mt-section--light { background: var(--mt-off); color: var(--mt-ink); }
.mt-section--white { background: var(--mt-white); color: var(--mt-ink); }
.mt-eyebrow { font-size: var(--mt-size-eyebrow); letter-spacing: var(--mt-track-eyebrow);
  text-transform: uppercase; color: var(--mt-mute); margin: 0 0 24px; }
.mt-h2 { font-size: var(--mt-size-h2); font-weight: var(--mt-weight-light); line-height: 1.05;
  letter-spacing: var(--mt-track-heading); margin: 0; }
.mt-headrow { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 26px; flex-wrap: wrap; }

/* ---------- MediaCard + CardRail ---------- */
.mt-rail { display: flex; gap: 14px; margin-top: 44px; overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
.mt-rail::-webkit-scrollbar { display: none; }
.mt-card { position: relative; flex: 0 0 clamp(280px, 41.5vw, 780px); aspect-ratio: 1/0.98;
  border-radius: var(--mt-radius); padding: 34px; display: flex; flex-direction: column;
  justify-content: space-between; scroll-snap-align: start; overflow: hidden;
  color: var(--mt-white); background: #1e1e20; background-size: cover; background-position: center;
  transition: transform .3s ease; }
.mt-card:hover { transform: translateY(-4px); }
.mt-card__num { font-size: 11px; letter-spacing: var(--mt-track-eyebrow); opacity: .7; }
.mt-card__title { font-size: clamp(23px, 2.12vw, 40px); font-weight: var(--mt-weight-light);
  line-height: 1.15; letter-spacing: var(--mt-track-heading); max-width: 22ch; margin: 0;
  color: var(--mt-white); }
.mt-card__tag { font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  opacity: .75; margin-top: 12px; }
.mt-card__go { position: absolute; top: 24px; right: 24px; font-size: 19px; opacity: .9; }
.mt-arrows { display: flex; gap: 8px; }
.mt-arrow { width: 44px; height: 44px; border-radius: var(--mt-radius-pill);
  border: 1px solid var(--mt-line); background: transparent; display: flex; align-items: center;
  justify-content: center; cursor: pointer; font-size: 16px; color: var(--mt-ink);
  font-family: var(--mt-font-sans); transition: background .2s, border-color .2s, opacity .2s; }
.mt-arrow:hover { background: var(--mt-ink); border-color: var(--mt-ink); color: var(--mt-white); }
.mt-arrow:disabled { opacity: .25; cursor: default; background: transparent;
  border-color: var(--mt-line); color: var(--mt-ink); }

/* ---------- Pillars ---------- */
.mt-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--mt-line); border: 1px solid var(--mt-line); margin-top: 48px; }
.mt-pillar { background: var(--mt-white); padding: clamp(24px, 2.1vw, 40px); min-height: 230px;
  display: flex; flex-direction: column; justify-content: space-between; transition: background .25s; }
.mt-pillar:hover { background: #fbfbfa; }
.mt-pillar__k { font-size: 11px; letter-spacing: var(--mt-track-eyebrow);
  text-transform: uppercase; color: var(--mt-accent); }
.mt-pillar__title { font-size: clamp(18px, 1.32vw, 25px); font-weight: var(--mt-weight-light);
  letter-spacing: var(--mt-track-heading); line-height: 1.15; margin: 18px 0 10px; color: var(--mt-ink); }
.mt-pillar__body { font-size: var(--mt-size-small); line-height: 1.5; color: var(--mt-grey);
  letter-spacing: -.01em; margin: 0; }
@media (max-width: 1000px) { .mt-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .mt-pillars { grid-template-columns: 1fr; } }

/* ---------- Statement ---------- */
.mt-statement { background: var(--mt-white); padding: clamp(90px, 15vh, 180px) var(--mt-pad);
  display: flex; align-items: center; justify-content: center; }
.mt-statement__text { font-size: var(--mt-size-display); font-weight: var(--mt-weight-light);
  line-height: 1.05; letter-spacing: -.05em; text-align: center; max-width: 17ch;
  color: var(--mt-ink); margin: 0; }
.mt-statement__text .mt-dim { color: #e4e4e2; }

/* ---------- Gradient art ---------- */
.mt-gradient { position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--mt-radius); }
.mt-gradient__art { position: absolute; inset: 0; z-index: -2; background-size: cover;
  background-position: center; }
.mt-gradient--amber .mt-gradient__art { background-image: var(--mt-gradient-amber); }
.mt-gradient--blue .mt-gradient__art { background-image: var(--mt-gradient-blue); }
.mt-gradient--sage .mt-gradient__art { background-image: var(--mt-gradient-sage); }
.mt-gradient--ink .mt-gradient__art { background-image: var(--mt-gradient-ink); }
.mt-gradient__grain { position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: var(--mt-grain); background-size: var(--mt-grain-size); }
.mt-gradient__veil { position: absolute; inset: 0; z-index: -1; background: var(--mt-veil-panel); }

.mt-panel { display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  text-align: center; padding: 44px 8% clamp(30px, 3.4vw, 64px); min-height: 420px; color: var(--mt-white); }
.mt-panel > * { flex: 0 0 auto; }
.mt-panel__title { font-size: clamp(23px, 2.12vw, 40px); font-weight: var(--mt-weight-light);
  line-height: 1.13; letter-spacing: var(--mt-track-heading); max-width: 16ch; margin: 0;
  color: var(--mt-white); }
.mt-panel__body { margin: 14px 0 0; font-size: clamp(14px, .95vw, 18px); line-height: 1.45;
  letter-spacing: -.01em; color: var(--mt-body-dark); max-width: 34ch; }
.mt-panel__action { margin-top: clamp(20px, 1.7vw, 32px); }
.mt-panel-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 1.6vw, 30px); }
@media (max-width: 820px) { .mt-panel-pair { grid-template-columns: 1fr; } }

/* ---------- DotField ---------- */
.mt-dotfield { position: relative; background: var(--mt-dark); overflow: hidden;
  padding: clamp(70px, 6.35vw, 120px) var(--mt-pad); color: var(--mt-white); }
.mt-dotfield__dots { position: absolute; inset: 0; opacity: .45;
  background-image: radial-gradient(rgba(255,255,255,.32) 1px, transparent 1px);
  background-size: 34px 34px; }
.mt-dotfield__accent { position: absolute; inset: 0; opacity: .85;
  background-image: radial-gradient(var(--mt-accent) 1.6px, transparent 1.6px);
  background-size: 204px 136px; background-position: 32px 46px; }
.mt-dotfield__inner { position: relative; }
.mt-dotfield__body { margin-top: 20px; font-size: clamp(14px, .95vw, 18px); line-height: 1.5;
  color: var(--mt-body-dark); max-width: 46ch; letter-spacing: -.01em; }

/* ---------- Accordion ---------- */
.mt-acc { border-top: 1px solid var(--mt-line); margin-top: 44px; }
.mt-acc details { border-bottom: 1px solid var(--mt-line); }
.mt-acc summary { list-style: none; cursor: pointer; padding: 26px 0; display: flex;
  align-items: center; justify-content: space-between; gap: 20px; font-size: var(--mt-size-h3);
  font-weight: var(--mt-weight-light); letter-spacing: var(--mt-track-heading);
  line-height: 1.15; color: var(--mt-ink); }
.mt-acc summary::-webkit-details-marker { display: none; }
.mt-acc__plus { font-size: 22px; font-weight: var(--mt-weight-light); color: var(--mt-mute);
  transition: transform .28s; }
.mt-acc details[open] .mt-acc__plus { transform: rotate(45deg); }
.mt-acc__body { padding: 0 0 28px; max-width: 64ch; font-size: var(--mt-size-body);
  line-height: 1.55; color: var(--mt-grey); letter-spacing: -.01em; }

/* ---------- Footer ---------- */
.mt-footer { background: var(--mt-dark); border-top: 1px solid rgba(255,255,255,.12);
  padding: clamp(48px, 4.2vw, 80px) var(--mt-pad) 32px; color: var(--mt-white); }
.mt-footer__grid { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: 32px; }
.mt-footer__blurb { font-size: var(--mt-size-small); color: #a6a6a8; max-width: 30ch;
  line-height: 1.5; margin: 14px 0 0; }
.mt-footer__col h5 { font-size: 11px; letter-spacing: var(--mt-track-eyebrow);
  text-transform: uppercase; color: var(--mt-mute); margin: 0 0 16px; font-weight: var(--mt-weight-light); }
.mt-footer__col a { display: block; font-size: var(--mt-size-small); color: #dcdcde;
  margin-bottom: 10px; letter-spacing: -.01em; }
.mt-footer__col a:hover { color: var(--mt-white); }
.mt-footer__bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12px; color: var(--mt-mute); }
@media (max-width: 1000px) { .mt-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .mt-footer__grid { grid-template-columns: 1fr; } }