@import '/assets/app/shared/styles/page.589979b091b4b083.css';

/* The Philosophy of René Girard, rebuilt from its Carrd original (girardcourse.com, captured
   November 12, 2026). Carrd sized everything in rem against a root that steps down with the
   window (18pt, then 13pt at 1680px, then 11pt at 980px), so the same root steps are kept
   and every measurement below is Carrd's own rem value. Carrd declared "light only", but the
   page itself is dark: these colours are the page's, not the app theme's. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/app/pages/girard-course/fonts/manrope-latin.8760c4774489e4ba.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/app/pages/girard-course/fonts/open-sans-latin.e807dee2426166ad.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/app/pages/girard-course/fonts/open-sans-italic-latin.851c14db057e20c2.woff2') format('woff2');
}

html.page-girard-course {
  color-scheme: light;
  font-size: 18pt;
  background-color: #191919;
}

/* The Enroll buttons glide down to the syllabus signup, as Carrd's did. */
@media (prefers-reduced-motion: no-preference) {
  html.page-girard-course {
    scroll-behavior: smooth;
  }
}

/* Carrd's page background: a field of faint dots under a near-opaque charcoal wash, fixed
   behind the content. */
.page-girard-course body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  overflow-wrap: break-word;
  background-color: #191919;
  background-image: linear-gradient(rgba(25, 25, 25, 0.941), rgba(25, 25, 25, 0.941)), url('/assets/app/pages/girard-course/dots.2243af896f5cd49c.svg');
  background-size: auto, cover;
  background-position: 0 0, center;
  background-repeat: repeat, no-repeat;
  background-attachment: fixed;
  color: #c9c9c9;
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  line-height: 1;
}

/* The shared stylesheet spaces headings, paragraphs and lists for prose; this page sets its
   own rhythm, so those margins and markers start from nothing. */
.girard :where(h1, h2, h3, p, ol, ul, li, figure) {
  margin: 0;
  padding: 0;
}

/* The shared stylesheet also gives headings, paragraphs and list items their own typeface and
   line height. Here they take the page's, from the class on them or on their container. */
.girard :where(h1, h2, h3, p, li) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.girard :where(ol, ul) {
  list-style: none;
}

.girard img {
  display: block;
  max-width: 100%;
  height: auto;
}

.girard a {
  color: #a979c7;
  text-decoration: none;
}

.girard a:hover {
  color: #ae10e6;
}

.girard a:focus-visible,
.girard button:focus-visible {
  outline: 2px solid #c9a8ff;
  outline-offset: 2px;
}

/* The page column: as wide as the window less a 1rem margin each side, up to 100rem. */
.girard {
  box-sizing: border-box;
  width: 100%;
  max-width: 102rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Type, by Carrd's text styles. */
.girard-eyebrow {
  color: #c9c9c9;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: 0.075rem;
  text-transform: uppercase;
}

.girard-title {
  color: #ffffff;
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.025rem;
}

.girard-lede {
  color: rgba(255, 255, 255, 0.561);
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.025rem;
}

.girard-heading {
  color: #ffffff;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.025rem;
  text-align: center;
}

.girard-subheading {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.025rem;
}

.girard-copy {
  color: #c9c9c9;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.025rem;
  text-align: left;
}

.girard-copy p + p {
  margin-top: 1rem;
}

.girard-note {
  color: rgba(255, 255, 255, 0.561);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.875;
  letter-spacing: 0.025rem;
  text-align: center;
}

/* A band is one of Carrd's full-width containers: a background, and content capped at the
   band's width, with the padding inside that cap. */
.girard-band {
  display: flex;
  justify-content: center;
  background-color: #3b3b3b;
}

.girard-band.is-textured {
  background-color: #303030;
  background-image: url('/assets/app/pages/girard-course/noise.3584114837b3ba6d.svg');
  background-size: 512px;
  background-position: center;
  background-repeat: repeat;
}

.girard-band.is-deep {
  background-color: #242424;
}

.girard-band-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--band-width, 80rem);
  padding: var(--band-pad-top, 6rem) var(--band-pad-x, 6rem) var(--band-pad-bottom, 6rem);
}

/* The hero: the title and signup on a purple wash over a photograph, and the Scapegoat filling
   the right-hand 36% from edge to edge. The columns are Carrd's: a 5rem margin, 64% of the
   padded width less half the 12rem gutter for the text, half the gutter, then the painting. */
.girard-hero {
  display: grid;
  grid-template-columns: 5rem calc(64% - 12.4rem) 6rem minmax(0, 1fr);
  min-height: 45rem;
  background-color: #2b0041;
  background-image: linear-gradient(188deg, #2b0041 35%, rgba(128, 0, 255, 0.831) 79%), url('/assets/app/pages/girard-course/hero-background.780dcec477af1fd3.jpg');
  background-size: cover, cover;
  background-position: 0 0, center;
  background-repeat: repeat, no-repeat;
  background-attachment: fixed;
}

.girard-hero-text {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  padding-block: 8rem;
}

.girard-hero-text > * + * {
  margin-top: 1.125rem;
}

.girard-hero-text > .girard-lede {
  margin-top: 2rem;
}

.girard-hero-text > .girard-signup {
  margin-top: 2.875rem;
}

.girard-hero-image {
  position: relative;
  grid-column: 4;
  grid-row: 1;
}

.girard-hero-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The syllabus signup, used twice: an email field and a pill button under it. */
.girard-signup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  width: 30rem;
  max-width: 100%;
}

.girard-signup.is-centered {
  align-items: center;
  margin-inline: auto;
}

/* Carrd's honeypot: hidden from people, so only a bot that fills every field ever sets it. */
.girard-honeypot {
  display: none;
}

.girard-signup input[type='email'] {
  box-sizing: border-box;
  width: 100%;
  height: 3.375rem;
  margin: 0;
  padding: 0 1.18125rem 0 calc(0.025rem + 1.18125rem);
  border: 0;
  border-radius: 2rem;
  background-color: rgba(255, 255, 255, 0.161);
  box-shadow: none;
  color: #ffffff;
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 3.375rem;
  letter-spacing: 0.025rem;
  appearance: none;
  outline: 0;
}

.girard-signup input[type='email']:focus {
  box-shadow: 0 0 0 1px #ffffff, inset 0 0 0 1px #ffffff;
}

.girard-signup input[type='email']::placeholder {
  color: #ffffff;
  opacity: 0.55;
}

.girard-signup button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 9.625rem;
  max-width: 100%;
  height: 3.375rem;
  margin: 0;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 2rem;
  background-color: #ffffff;
  box-shadow: none;
  color: #242424;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 3.375rem;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.girard-signup button:hover {
  background-color: rgba(255, 255, 255, 0.69);
}

.girard-signup button:disabled {
  cursor: progress;
  opacity: 0.69;
}

.girard-signup button svg {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin-left: 0.5em;
  margin-right: -0.125em;
  fill: #242424;
}

.girard-signup-status {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.025rem;
}

.girard-signup.is-centered .girard-signup-status {
  text-align: center;
}

/* Our promise. */
.girard-promise {
  --band-width: 50rem;

  text-align: center;
}

.girard-promise .girard-heading {
  margin-top: 1.25rem;
}

.girard-divider {
  box-sizing: border-box;
  height: 1rem;
  margin: 1.25rem 0 0;
  border: 0;
  background: linear-gradient(#ffffff, #ffffff) center / 9rem 5px no-repeat;
}

.girard-promise-text {
  margin-top: 1.75rem;
  color: #c9c9c9;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.025rem;
}

/* René Girard, Lecturer and the syllabus: two equal columns, centred on each other. */
.girard-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 6.125rem;
  align-items: center;
}

.girard-split .girard-copy {
  margin-top: 1.75rem;
}

.girard-portrait {
  justify-self: center;
  width: 40rem;
  max-width: 100%;
  height: 28.125rem;
  overflow: hidden;
  border-radius: 1rem;
}

.girard .girard-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Curriculum: Carrd's numbered list, the number in bold Manrope ahead of each week. */
.girard-curriculum {
  --band-width: 75rem;
}

.girard-weeks {
  width: 35rem;
  max-width: 100%;
  margin-top: 1.25rem;
  color: #ffffff;
  counter-reset: week;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.025rem;
}

.girard-weeks li {
  display: flex;
  counter-increment: week;
}

.girard-weeks li + li {
  margin-top: 0.75rem;
}

.girard-weeks li::before {
  flex-shrink: 0;
  min-width: 0.9375rem;
  margin-right: 0.78125rem;
  content: counter(week) '.';
  font-family: 'Manrope', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 2.1875rem;
}

/* The two full-width paintings between sections. */
.girard .girard-gallery img {
  width: 100%;
  height: 20rem;
  object-fit: cover;
  object-position: center;
}

/* The Course Experience. */
.girard-experience-intro {
  --band-width: 48rem;
}

.girard-experience-intro .girard-note {
  margin-top: 0.75rem;
}

.girard-experience {
  --band-width: 75rem;
  --band-pad-top: 2rem;
  --band-pad-bottom: 2rem;
}

/* Carrd adds a fixed 100px under the second row of the experience columns. */
.girard-experience.is-last {
  --band-pad-bottom: calc(2rem + 100px);
}

.girard-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 5.75rem;
  align-items: start;
}

.girard-columns .girard-copy {
  margin-top: 1.75rem;
}

/* Reviews of Past Courses: three portraits a row, each with its name and quote. */
.girard-reviews-intro {
  --band-width: 75rem;
}

.girard-reviews {
  --band-width: 45rem;
  --band-pad-x: 1rem;
  --band-pad-top: 0rem;
  --band-pad-bottom: calc(2rem + 100px);
}

.girard-review-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 3.75rem;
  align-items: start;
}

.girard-review-row + .girard-review-row {
  margin-top: calc(50px + 2rem);
}

.girard .girard-review img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
  border-radius: 1rem;
}

.girard-review p {
  margin-top: 1rem;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.025rem;
  text-align: left;
}

/* Enroll and the two prices. */
.girard-enroll {
  --band-width: 45rem;
}

.girard-plans-band {
  --band-width: 60rem;
  --band-pad-x: 1rem;
  --band-pad-top: 0rem;
  --band-pad-bottom: 100px;
}

.girard-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 3.75rem;
  align-items: start;
}

.girard-plan {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 1rem;
  border-radius: 1rem;
  background-color: #fbf7ff;
  text-align: center;
}

.girard-plan-name,
.girard-plan-price {
  padding: 0.5rem;
  border-bottom: 1px solid #ffffff;
  color: #ffffff;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.025rem;
}

.girard-plan-name {
  background-color: #9800f0;
}

.girard-plan-price {
  background-color: #c9a8ff;
}

.girard-plan-features {
  padding: 1.5rem;
  color: #000000;
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.025rem;
  text-align: left;
}

.girard-plan-features li {
  display: flex;
}

.girard-plan-features li + li {
  margin-top: 0.5rem;
}

.girard-plan-features li::before {
  flex-shrink: 0;
  min-width: 0.9375rem;
  height: 1.75rem;
  margin-right: 0.625rem;
  background: url('/assets/app/pages/girard-course/check.38c05649301610be.svg') left 60% / contain no-repeat;
  content: '';
}

.girard-plan-features strong {
  font-weight: 400;
}

.girard-plan-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  box-sizing: border-box;
  width: 8.875rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  border-radius: 2rem;
  background-color: #9800f0;
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 2.5rem;
  transition: background-color 0.25s ease;
}

.girard .girard-plan-button,
.girard .girard-plan-button:hover {
  color: #ffffff;
}

.girard-plan-button:hover {
  background-color: #c9a8ff;
}

.girard-plan-button svg {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin-left: 0.5em;
  margin-right: -0.125em;
  fill: #ffffff;
}

/* The syllabus: the study guide's cover beside the second signup. */
.girard-syllabus .girard-cover {
  justify-self: center;
  border-radius: 1rem;
}

.girard-syllabus-signup {
  text-align: center;
}

.girard-syllabus-signup .girard-subheading {
  text-align: center;
}

.girard-syllabus-signup .girard-signup {
  margin-top: 2.875rem;
}

/* Below 1280px Carrd stops fixing the hero photograph, as it does on every touch screen. */
@media (max-width: 1280px), (hover: none) {
  .girard-hero {
    background-attachment: scroll;
  }

  .page-girard-course body {
    background-attachment: scroll;
  }
}

@media (max-width: 1680px) {
  html.page-girard-course {
    font-size: 13pt;
  }
}

/* Tablets: the hero stacks, the Scapegoat across the top and the title under it. */
@media (max-width: 980px) {
  html.page-girard-course {
    font-size: 11pt;
  }

  .girard-hero {
    grid-template-columns: 5rem minmax(0, 1fr) 5rem;
  }

  .girard-hero-image {
    grid-column: 1 / -1;
    grid-row: 1;
    height: 35rem;
  }

  .girard-hero-text {
    grid-column: 2;
    grid-row: 2;
    padding-block: 6rem 8rem;
  }
}

/* Phones: no page margin, narrower padding, every row of columns stacked. */
@media (max-width: 736px) {
  .girard {
    padding-inline: 0;
  }

  .girard-title {
    font-size: 2.5rem;
    letter-spacing: -0.021875rem;
  }

  .girard-hero {
    grid-template-columns: 2rem minmax(0, 1fr) 2rem;
    min-height: 33.75rem;
  }

  .girard-hero-image {
    height: 37.5rem;
  }

  .girard-hero-text {
    padding-block: 3rem 3.5rem;
  }

  .girard-hero-text > .girard-lede {
    margin-top: 1.5rem;
  }

  .girard-hero-text > .girard-signup,
  .girard-syllabus-signup .girard-signup {
    margin-top: 2.15625rem;
  }

  /* Every band's phone padding, then the bands Carrd padded differently. */
  .girard-band {
    --band-pad-x: 2rem;
    --band-pad-top: 3.5rem;
    --band-pad-bottom: 3.5rem;
  }

  .girard-band.girard-experience {
    --band-pad-top: 2rem;
    --band-pad-bottom: 2rem;
  }

  .girard-band.girard-experience.is-last {
    --band-pad-bottom: calc(2rem + 100px);
  }

  .girard-band.girard-reviews {
    --band-pad-x: 1rem;
    --band-pad-top: 0rem;
    --band-pad-bottom: calc(2rem + 100px);
  }

  .girard-band.girard-plans-band {
    --band-pad-top: 0rem;
    --band-pad-bottom: 100px;
  }

  .girard-divider {
    margin-top: 1.875rem;
  }

  .girard-promise-text,
  .girard-split .girard-copy,
  .girard-columns .girard-copy {
    margin-top: 1.3125rem;
  }

  .girard-experience-intro .girard-note {
    margin-top: 0.5625rem;
  }

  .girard-split {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6rem;
  }

  .girard-portrait {
    height: 35.15625rem;
  }

  .girard .girard-gallery img {
    height: 15rem;
  }

  .girard-columns {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 5.75rem;
  }

  .girard-review-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3.75rem;
  }

  .girard-review p {
    margin-top: 0.75rem;
    font-size: 1.25rem;
    letter-spacing: 0.021875rem;
  }

  .girard-plans {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3rem;
  }
}

@media (max-width: 480px) {
  .girard-hero-image {
    height: 30rem;
  }

  .girard-hero-text > * + * {
    margin-top: 0.984375rem;
  }

  .girard-signup button {
    width: 100%;
    max-width: 32rem;
  }

  .girard-portrait {
    height: 28.125rem;
  }

  .girard-plan-button {
    width: 10.375rem;
  }
}

@media (max-width: 360px) {
  .girard-hero {
    grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
    min-height: 22.5rem;
  }

  .girard-hero-image {
    height: 26.25rem;
  }

  .girard-hero-text {
    padding-block: 2.25rem 2.625rem;
  }

  .girard-heading {
    font-size: 2rem;
  }

  .girard-band {
    --band-pad-x: 1.5rem;
    --band-pad-top: 2.625rem;
    --band-pad-bottom: 2.625rem;
  }

  .girard-band.girard-experience {
    --band-pad-x: 1.5rem;
    --band-pad-top: 1.5rem;
    --band-pad-bottom: 1.5rem;
  }

  .girard-band.girard-experience.is-last {
    --band-pad-bottom: calc(1.5rem + 100px);
  }

  .girard-band.girard-reviews {
    --band-pad-x: 0.75rem;
  }

  .girard-band.girard-plans-band {
    --band-pad-x: 1.5rem;
  }

  .girard-portrait {
    height: 24.609375rem;
  }
}