/* Brand chrome for signed-out pages: botanical header (wordmark + Menu),
   footer, and the shared type scale, rules, and decor used by the landing,
   pricing, FAQ, and Our Story pages. Signed-in pages keep the app navbar
   (navbar.css). Landing-only sections live in landing.css. */
:root {
  /* One type scale for every brand page; sections pick from it rather than
     setting their own sizes. On :root so the pricing, FAQ, and Our Story
     pages also work inside the signed-in app chrome. */
  --brand-fs-sm: clamp(.9375rem, .9rem + .15vw, 1rem);
  --brand-fs-body: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --brand-fs-lead: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --brand-fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  --brand-fs-h2: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);
  --brand-fs-h1: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem);
  --brand-ink: var(--color-green-800);
  /* Decor is pinned to the edges of this frame rather than the viewport, so
     on ultrawide screens it stays near the content. */
  --brand-frame: 100rem;
  --brand-gutter: max(0px, calc((100% - var(--brand-frame)) / 2));
}
.brand-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: clip;
  background-color: var(--color-meadow);
  color: var(--color-ink);
}
.brand-page > main { flex: 1; }

/* Shared pieces */
.brand-section {
  position: relative;
  padding: 3rem 1.25rem;
}
@media (min-width: 64rem) {
  .brand-section { padding-block: 4.5rem; }
}
.brand-title {
  position: relative;
  margin-inline: auto;
  text-align: center;
  font-size: var(--brand-fs-h2);
  line-height: 1.25;
  font-weight: var(--font-weight-bold);
  color: var(--brand-ink);
}
.brand-text {
  position: relative;
  font-size: var(--brand-fs-lead);
  line-height: 1.5;
}
.brand-text--center {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}
.brand-btn {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--brand-fs-lead);
  line-height: 1.2;
  padding: 1rem 1.75rem;
  border-radius: var(--radius-lg);
}
.brand-decor {
  position: absolute;
  pointer-events: none;
  user-select: none;
  max-width: none;
}

/* Ornamental rule: a line capped with an outlined diamond at each end */
.brand-rule {
  position: relative;
  width: min(27rem, 80%);
  height: 4px;
  margin: 1.5rem auto 2.5rem;
  background-color: var(--brand-ink);
}
.brand-rule::before,
.brand-rule::after {
  content: "";
  position: absolute;
  top: 50%;
  width: .6rem;
  height: .6rem;
  border: 3px solid var(--brand-ink);
  background-color: var(--color-meadow);
  transform: translateY(-50%) rotate(45deg);
}
.brand-rule::before { left: -.3rem; }
.brand-rule::after { right: -.3rem; }
.brand-rule--wide {
  width: auto;
  max-width: 70rem;
  margin: 0 auto;
}

/* Header: centered wordmark, Menu button at the right edge of the frame */
.brand-header {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  max-width: var(--brand-frame);
  margin-inline: auto;
  padding: 1.25rem 1.25rem 0;
}
/* Narrow screens: wordmark moves left so it clears the Menu button */
@media (max-width: 39.99rem) {
  .brand-header { justify-content: flex-start; }
}
.brand-header__brand { display: block; }
.brand-header__wordmark {
  width: clamp(8.5rem, 6rem + 8vw, 12.5rem);
  height: auto;
}

.brand-menu {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
}
@media (min-width: 64rem) {
  .brand-menu { right: 3rem; }
}
.brand-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  padding: .5rem 1rem;
  border: 2px solid transparent;
  border-radius: var(--radius-xl);
  background-color: var(--color-paper);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--brand-fs-body);
  color: var(--brand-ink);
  box-shadow: 0 1px 2px #19381f1a;
  transition: background-color .15s, border-color .15s;
}
@media (min-width: 48rem) {
  .brand-menu__toggle { padding: .625rem 1.25rem; }
}
.brand-menu__toggle[aria-expanded="true"] { border-color: var(--brand-ink); }
@media (hover: hover) {
  .brand-menu__toggle:hover { background-color: var(--color-white); }
}
.brand-menu__icon { width: 1.125rem; height: 1.125rem; }

/* Panel: one column on phones, the three groups side by side from tablet up */
.brand-menu__panel {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  width: min(calc(100vw - 2.5rem), 17rem);
  padding: 1rem 1.25rem 1.25rem;
  border-radius: var(--radius-lg);
  background-color: var(--color-paper);
  box-shadow: 0 10px 25px -5px #19381f40, 0 4px 6px -4px #0000001a;
  text-align: left;
}
.brand-menu__groups {
  display: grid;
  gap: 1rem;
}
@media (min-width: 48rem) {
  .brand-menu__panel { width: 34rem; padding: 1.25rem 1.5rem 1.5rem; }
  .brand-menu__groups { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
.brand-menu__heading {
  margin-bottom: .375rem;
  padding-bottom: .375rem;
  border-bottom: 2px solid var(--brand-ink);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.brand-menu__item {
  display: block;
  margin-inline: -.5rem;
  padding: .375rem .5rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  color: var(--color-ink);
}
@media (hover: hover) {
  .brand-menu__item:hover { background-color: var(--color-grey-green); }
}
.brand-menu__item[aria-current] {
  font-weight: var(--font-weight-semibold);
  color: var(--color-cta);
}
.brand-menu__account {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.25rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-grey-green);
}
.brand-menu__signin {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  color: var(--brand-ink);
}
@media (hover: hover) {
  .brand-menu__signin:hover { color: var(--color-cta); }
}

/* Masthead on inner pages: header with a lighter crop of the hero art */
.brand-masthead {
  position: relative;
  min-height: 8rem;
}
.brand-masthead__decor {
  top: 0;
  width: clamp(9rem, 22vw, 20rem);
  height: auto;
  opacity: .45;
  /* Fade the art out before it reaches the page content below */
  mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
.brand-masthead__decor--left { left: var(--brand-gutter); }
.brand-masthead__decor--right { right: var(--brand-gutter); }
@media (min-width: 64rem) {
  .brand-masthead { min-height: 10rem; }
  .brand-masthead__decor { opacity: .7; }
}
.site-main.site-main--brand {
  /* account.css loads later, so out-rank its .site-main spacing */
  position: relative;
  margin-top: 0;
  padding-bottom: 4rem;
}

/* Footer: Liz's intro + link grid, then a legal row */
.brand-footer {
  padding: 2.5rem 1.25rem 1.25rem;
  background-color: var(--color-text-muted);
  color: var(--color-paper);
}
.brand-footer__disclosure {
  max-width: 48rem;
  margin: 0 auto 2rem;
  text-align: center;
  font-size: var(--text-xs);
  opacity: .8;
}
.brand-footer__inner {
  display: grid;
  gap: 1.25rem;
  justify-items: center;
  max-width: 76rem;
  margin-inline: auto;
  text-align: center;
}
@media (min-width: 48rem) {
  .brand-footer__inner {
    grid-template-columns: 9rem minmax(0, 1fr) auto;
    gap: 2.5rem;
    justify-items: start;
    align-items: center;
    text-align: left;
  }
}
@media (min-width: 64rem) {
  .brand-footer__inner { grid-template-columns: 11rem minmax(0, 36rem) 1fr; }
}
.brand-footer__photo {
  width: 9rem;
  height: auto;
}
@media (min-width: 64rem) {
  .brand-footer__photo { width: 11rem; }
}
.brand-footer__title {
  margin-bottom: .5rem;
  font-size: var(--brand-fs-lead);
  font-weight: var(--font-weight-semibold);
}
.brand-footer__about p {
  font-size: var(--brand-fs-sm);
  line-height: 1.55;
}
.brand-footer__links {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: .75rem 3rem;
  font-family: var(--font-display);
  font-size: var(--brand-fs-body);
  font-weight: var(--font-weight-semibold);
}
@media (min-width: 64rem) {
  .brand-footer__links { justify-self: end; }
}
.brand-footer__link { transition: color .15s; }
@media (hover: hover) {
  .brand-footer__link:hover { color: var(--color-highlight); }
}
.brand-footer__link--highlight { color: var(--color-highlight); }
.brand-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.5rem;
  max-width: 76rem;
  margin: 2rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid #f8f6f033;
  font-size: var(--text-sm);
  opacity: .85;
}
.brand-footer__legal a { text-decoration: underline; text-underline-offset: 2px; }

/* Brand content pages (Our Story, Pricing, FAQ) */
.brand-page-body {
  max-width: 70rem;
  margin-inline: auto;
}
.brand-intro {
  margin-bottom: 2rem;
  text-align: center;
}
.brand-intro__title {
  font-size: var(--brand-fs-h1);
  line-height: 1.1;
  font-weight: var(--font-weight-semibold);
  color: var(--color-cta);
}
.brand-intro .brand-rule { margin-bottom: 1.5rem; }
.brand-cta {
  padding-block: 3rem 1rem;
  text-align: center;
}
.brand-cta .brand-text { margin-block: 1rem 2rem; }
.brand-page-body a:not(.btn):not([class*="__"]) {
  color: var(--color-cta);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Our Story */
.about-story {
  display: grid;
  gap: 2rem;
  justify-items: center;
  max-width: 56rem;
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .about-story {
    grid-template-columns: 15rem 1fr;
    gap: 3rem;
    align-items: start;
  }
}
.about-story__photo { width: min(15rem, 70vw); height: auto; }
.about-story__text {
  display: grid;
  gap: 1.25rem;
  font-size: var(--brand-fs-body);
  line-height: 1.65;
}
.about-story__lead {
  font-family: var(--font-display);
  font-size: var(--brand-fs-h3);
  line-height: 1.35;
  color: var(--brand-ink);
}
.about-how__steps {
  display: grid;
  gap: 2.5rem;
  max-width: 60rem;
  margin-inline: auto;
  text-align: center;
}
@media (min-width: 48rem) {
  .about-how__steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}
/* The step images have different aspect ratios; a shared height lines up
   the titles beneath them */
.about-how__image { width: auto; max-width: 100%; height: 9rem; margin: 0 auto 1rem; object-fit: contain; }
.about-how__title {
  margin-bottom: .5rem;
  font-style: italic;
  font-size: var(--brand-fs-h3);
  font-weight: var(--font-weight-medium);
  font-variation-settings: "opsz" 18;
  color: var(--brand-ink);
}
.about-how__step p { font-size: var(--brand-fs-body); line-height: 1.5; }

/* Pricing */
.pricing-plans {
  display: grid;
  gap: 1.25rem;
  margin-top: 1rem;
}
@media (min-width: 40rem) {
  .pricing-plans { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .pricing-plans { grid-template-columns: repeat(4, 1fr); }
}
.pricing-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  background-color: var(--color-paper);
  box-shadow: 0 1px 2px #19381f1a;
}
.pricing-plan--featured {
  border-color: var(--color-cta);
  box-shadow: 0 10px 25px -8px #19381f40;
}
.pricing-plan__badge {
  position: absolute;
  top: -.75rem;
  left: 50%;
  transform: translateX(-50%);
  padding: .125rem .75rem;
  border-radius: 999px;
  background-color: var(--color-cta);
  color: var(--color-paper);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pricing-plan__name {
  font-style: italic;
  font-size: var(--brand-fs-h3);
  font-weight: var(--font-weight-semibold);
  font-variation-settings: "opsz" 18;
  color: var(--brand-ink);
}
.pricing-plan__price {
  margin-top: .5rem;
  font-family: var(--font-display);
  font-size: var(--brand-fs-h2);
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
  color: var(--color-ink);
}
.pricing-plan__period {
  white-space: nowrap;
  font-size: .45em;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}
.pricing-plan__note {
  margin-top: .25rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.pricing-plan__list {
  flex: 1;
  margin: 1.25rem 0 1.5rem;
  padding-left: 1.25rem;
  list-style: disc;
  font-size: var(--brand-fs-sm);
  line-height: 1.55;
}
.pricing-plan__cta { width: 100%; text-align: center; }

.pricing-compare__scroll { overflow-x: auto; }
.pricing-compare {
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  border-collapse: collapse;
  background-color: var(--color-paper);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: var(--brand-fs-sm);
}
.pricing-compare th,
.pricing-compare td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--color-grey-green);
}
.pricing-compare thead th {
  background-color: var(--brand-ink);
  color: var(--color-paper);
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
}
.pricing-compare th[scope="row"] { text-align: left; font-weight: var(--font-weight-normal); }
.pricing-compare thead th:first-child { text-align: left; }
.pricing-compare td { width: 7rem; text-align: center; }
.pricing-compare tbody tr:last-child > * { border-bottom: 0; }
.pricing-compare__yes { color: var(--color-green-700); font-weight: var(--font-weight-bold); }
.pricing-compare__no { color: var(--color-gray-400); }
.pricing-compare__more { margin-top: 1.5rem; font-size: var(--brand-fs-body); }
/* Phones: each row stacks, the feature name full width with the Free and
   Pro values beneath it, lined up under the header's Free and Pro labels.
   Changing the display of table parts drops their table semantics in some
   browsers, so the view sets the table roles explicitly. */
@media (max-width: 39.99rem) {
  .pricing-compare thead tr,
  .pricing-compare tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--color-grey-green);
  }
  .pricing-compare tbody tr:last-child { border-bottom: 0; }
  .pricing-compare thead,
  .pricing-compare tbody { display: block; }
  .pricing-compare th,
  .pricing-compare td { width: auto; padding: .5rem 1rem; border-bottom: 0; }
  .pricing-compare thead th:first-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .pricing-compare thead th { text-align: center; }
  .pricing-compare th[scope="row"] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: .5rem 1rem;
    background-color: var(--color-gray-200);
    text-align: center;
    font-weight: var(--font-weight-bold);
  }
  .pricing-compare td { padding-bottom: .75rem; }
  /* Divides the Free and Pro values */
  .pricing-compare td + td { border-left: 2px solid var(--color-gray-300); }
}
}

/* FAQ */
.faq-page {
  display: grid;
  gap: .75rem;
  max-width: 48rem;
  margin-inline: auto;
}
.faq-page__item {
  border-radius: var(--radius-lg);
  background-color: var(--color-paper);
  box-shadow: 0 1px 2px #19381f1a;
}
.faq-page__question {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  padding: 1.125rem 1.25rem;
  font-family: var(--font-display);
  font-size: var(--brand-fs-body);
  font-weight: var(--font-weight-semibold);
  color: var(--brand-ink);
  list-style: none;
}
.faq-page__question::-webkit-details-marker { display: none; }
.faq-page__question::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.25em;
  line-height: 1;
  transition: transform .15s;
}
.faq-page__item[open] .faq-page__question::after { transform: rotate(45deg); }
.faq-page__answer {
  padding: 0 1.25rem 1.25rem;
  font-size: var(--brand-fs-body);
  line-height: 1.6;
}
.faq-page__more { margin-top: 2rem; font-size: var(--brand-fs-body); }