@import url(../misc/bulma/css/bulma.css);
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
button,
a,
input,
select,
textarea,
[role="button"],
.navbar-burger {
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* Alternative syntax */ }

:root {
  --bulma-primary-h: 264deg;
  --bulma-primary-s: 51%;
  --bulma-primary-l: 44%;
  --bulma-link-h: 183deg;
  --bulma-link-s: 89%;
  --bulma-link-l: 28%;
  --bulma-info-h: 191deg;
  --bulma-info-s: 61%;
  --bulma-info-l: 54%;
  --bulma-success-h: 158deg;
  --bulma-success-s: 44%;
  --bulma-success-l: 42%;
  --bulma-danger-h: 4deg;
  --bulma-danger-s: 77%;
  --bulma-danger-l: 40%;
  --bulma-primary-invert-l: 100%;
  --bulma-link-invert-l: 100%;
  --bulma-success-invert-l: 100%;
  --bulma-danger-invert-l: 100%;
  --bulma-family-primary: "DM Sans", sans-serif;
  --bulma-body-background-color: #F4F0F8; }

:root {
  --bulma-link-text: #6336A8; }

a {
  color: #6336A8; }
  a:hover {
    color: #18234A; }

.title {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-style: normal;
  color: #18234A; }

.label {
  color: #18234A; }

.box {
  border: 1px solid #DDD6E8;
  border-radius: 1rem;
  box-shadow: 0 12px 48px rgba(24, 35, 74, 0.08); }

.button.is-primary,
.button.is-primary:hover,
.button.is-primary:focus,
.button.is-primary:active,
.button.is-danger,
.button.is-danger:hover,
.button.is-danger:focus,
.button.is-danger:active {
  color: #fff; }

a.brand {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  text-decoration: none; }
  a.brand img {
    display: block;
    flex-shrink: 0;
    width: 3.75rem;
    height: 3.75rem; }
  a.brand span.wordmark {
    display: flex;
    flex-direction: column;
    white-space: nowrap; }
  a.brand span.name {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    font-style: normal;
    font-size: 2.1rem;
    line-height: 1;
    color: #18234A; }
  a.brand span.cell {
    color: #6336A8; }
  a.brand span.tool {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .15em;
    margin-top: 0rem;
    font-size: .8rem;
    letter-spacing: .32em;
    color: #087F86; }

[data-hero-bg] {
  position: relative;
  overflow: hidden; }
  [data-hero-bg] > canvas.pollen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; }
  [data-hero-bg] > div.container {
    position: relative;
    z-index: 1; }

p.notice {
  margin-bottom: 1.5rem;
  padding: .85rem 1rem;
  border-radius: .6rem;
  text-align: left;
  line-height: 1.5; }
  p.notice.is-success {
    background: rgba(60, 154, 120, 0.12);
    border: 1px solid rgba(60, 154, 120, 0.35);
    color: #2b6e56; }
  p.notice.is-danger {
    background: rgba(179, 38, 30, 0.07);
    border: 1px solid rgba(179, 38, 30, 0.25);
    color: #B3261E; }

p.help.is-danger {
  color: #B3261E; }

div.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden; }

span.alert-anchor {
  display: block;
  scroll-margin-top: 6rem; }

header#bar {
  background: #FFFFFF;
  border-bottom: 1px solid #DDD6E8;
  padding: .6rem 0; }

nav.site-nav {
  background: transparent;
  min-height: 0; }
  nav.site-nav a.brand {
    padding: .25rem .75rem; }
  nav.site-nav span.beta-label {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: .75rem;
    letter-spacing: .3em;
    color: rgba(99, 54, 168, 0.4);
    user-select: none; }
  nav.site-nav a.navbar-link,
  nav.site-nav a.navbar-item {
    font-weight: 600;
    color: #18234A; }
  nav.site-nav a.navbar-link:hover,
  nav.site-nav a.navbar-item:hover,
  nav.site-nav div.navbar-item.has-dropdown:hover > a.navbar-link,
  nav.site-nav div.navbar-item.has-dropdown:focus-within > a.navbar-link {
    background: transparent;
    color: #6336A8; }
  nav.site-nav a.navbar-link:not(.is-arrowless) {
    padding-inline-end: 2.1em; }
    nav.site-nav a.navbar-link:not(.is-arrowless)::after {
      width: .4em;
      height: .4em;
      margin-top: -.3em;
      inset-inline-end: 1em;
      border-width: .11em;
      border-color: #59617A; }
  nav.site-nav a.navbar-link:not(.is-arrowless):hover::after,
  nav.site-nav div.navbar-item.has-dropdown:hover > a.navbar-link::after {
    border-color: #6336A8; }
  nav.site-nav div.navbar-dropdown a.navbar-item {
    padding: .55rem 1.25rem;
    font-weight: 500; }
    nav.site-nav div.navbar-dropdown a.navbar-item:hover {
      background: #F4F0F8; }
  nav.site-nav span.soon {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .15em;
    margin-left: .4rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: #DDD6E8;
    font-size: .6rem;
    color: #59617A; }
  nav.site-nav a.button.is-rounded {
    padding-left: 1.5em;
    padding-right: 1.5em;
    font-weight: 600;
    box-shadow: 0 12px 48px rgba(24, 35, 74, 0.08); }
  nav.site-nav div.account-actions {
    display: flex;
    align-items: center;
    gap: .75rem; }
    nav.site-nav div.account-actions a.gear,
    nav.site-nav div.account-actions a.stats {
      display: flex;
      padding: .35rem;
      border-radius: 50%;
      color: #59617A;
      transition: color .2s ease, transform .4s ease; }
      nav.site-nav div.account-actions a.gear svg,
      nav.site-nav div.account-actions a.stats svg {
        width: 1.5rem;
        height: 1.5rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round; }
      nav.site-nav div.account-actions a.gear:hover,
      nav.site-nav div.account-actions a.stats:hover {
        color: #6336A8; }
    nav.site-nav div.account-actions a.gear:hover {
      transform: rotate(45deg); }
    nav.site-nav div.account-actions form {
      display: flex; }
    nav.site-nav div.account-actions button.button {
      font-weight: 600;
      border-color: #DDD6E8;
      color: #18234A; }
      nav.site-nav div.account-actions button.button:hover {
        border-color: #B9A4DC;
        color: #6336A8; }
  nav.site-nav a.navbar-burger {
    color: #18234A; }
    nav.site-nav a.navbar-burger:hover {
      background: transparent;
      color: #6336A8; }

@media screen and (min-width: 1024px) {
  nav.site-nav div.navbar-dropdown {
    min-width: 13rem;
    padding: .5rem 0;
    border: 1px solid #DDD6E8;
    border-radius: .75rem;
    box-shadow: 0 12px 48px rgba(24, 35, 74, 0.08); }
  nav.site-nav div.navbar-item.has-dropdown:focus-within > div.navbar-dropdown {
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0); } }
@media screen and (max-width: 1023px) {
  nav.site-nav div.navbar-menu.is-active {
    padding: .5rem 0 1rem 0;
    background: #FFFFFF;
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 12px 48px rgba(24, 35, 74, 0.08); }
  nav.site-nav div.navbar-item.has-dropdown > a.navbar-link {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: .75rem;
    color: #087F86; }
    nav.site-nav div.navbar-item.has-dropdown > a.navbar-link::after {
      display: none; }
  nav.site-nav div.navbar-dropdown a.navbar-item {
    padding-left: 1.75rem; } }
footer#bottom {
  background: #F4F0F8;
  border-top: 1px solid #DDD6E8;
  padding: 4rem 1.5rem 2rem 1.5rem;
  color: #59617A;
  font-size: .95rem; }
  footer#bottom p.disclaimer {
    max-width: 28rem;
    margin-top: 1rem;
    line-height: 1.6; }
  footer#bottom p.nav-heading {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .15em;
    margin-bottom: .75rem;
    font-size: .75rem;
    color: #087F86; }
    footer#bottom p.nav-heading a {
      color: inherit; }
  footer#bottom ul {
    margin: 0;
    padding: 0;
    list-style: none; }
    footer#bottom ul li {
      margin-bottom: .5rem; }
  footer#bottom nav a {
    color: #59617A;
    text-decoration: none; }
    footer#bottom nav a:hover {
      color: #6336A8;
      text-decoration: underline; }
  footer#bottom span.soon {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .15em;
    margin-left: .3rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: #DDD6E8;
    font-size: .6rem;
    vertical-align: middle;
    color: #59617A; }
  footer#bottom div.bottom-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #DDD6E8;
    font-size: .85rem; }
  footer#bottom p.copyright span.sep {
    margin: 0 .4rem; }
  footer#bottom nav.legal {
    display: flex;
    gap: 1.5rem; }
    footer#bottom nav.legal a {
      color: #59617A;
      text-decoration: none; }
      footer#bottom nav.legal a:hover {
        color: #6336A8;
        text-decoration: underline; }
    footer#bottom nav.legal a.rss {
      display: inline-flex;
      align-items: center;
      gap: .35rem; }
      footer#bottom nav.legal a.rss svg {
        width: .95em;
        height: .95em;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round; }
        footer#bottom nav.legal a.rss svg circle {
          fill: currentColor;
          stroke: none; }

@media screen and (min-width: 1024px) {
  footer#bottom nav.column {
    flex: 1 1 0;
    width: auto; } }
@media screen and (max-width: 768px) {
  a.brand img {
    width: 3rem;
    height: 3rem; }
  a.brand span.name {
    font-size: 1.7rem; }
  a.brand span.tool {
    font-size: .7rem; }

  footer#bottom {
    padding-top: 3rem; } }
.grade-great {
  --grade-bg: #3C9A78;
  --grade-text: #fff; }

.grade-okay {
  --grade-bg: #087F86;
  --grade-text: #fff; }

.grade-iffy {
  --grade-bg: #42B8D1;
  --grade-text: #fff; }

.grade-rough {
  --grade-bg: #B9A4DC;
  --grade-text: #fff; }

.grade-bad {
  --grade-bg: #6336A8;
  --grade-text: #fff; }

.grade-locked {
  --grade-bg: #B4B8C5;
  --grade-text: #fff; }

.score-pill {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  display: inline-block;
  padding: .3rem .75rem;
  border-radius: 999px;
  font-size: .8rem;
  text-align: center;
  background: var(--grade-bg);
  color: var(--grade-text); }

@property --fill {
  syntax: "<number>";
  inherits: false;
  initial-value: 0; }
.score-ring {
  --size: 10rem;
  --track: #DDD6E8;
  --inner: #FFFFFF;
  --fill: var(--score);
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: conic-gradient(var(--grade-bg) calc(var(--fill) * 1%), var(--track) 0);
  transition: --fill 1.2s cubic-bezier(0.25, 0.8, 0.25, 1); }
  .score-ring.is-empty {
    --fill: 0;
    transition: none; }
  .score-ring::before {
    content: "";
    position: absolute;
    inset: .8rem;
    border-radius: 50%;
    background: var(--inner); }
  .score-ring span.number {
    position: relative;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 3rem;
    line-height: 1;
    font-variant-numeric: lining-nums;
    letter-spacing: -.02em;
    color: #18234A; }
    @supports (text-box: trim-both cap alphabetic) {
      .score-ring span.number {
        text-box: trim-both cap alphabetic; } }
  .score-ring.is-medium {
    --size: 6.5rem; }
    .score-ring.is-medium::before {
      inset: .55rem; }
    .score-ring.is-medium span.number {
      font-size: 2.1rem; }

.dark .score-ring {
  --track: rgba(255, 255, 255, .15);
  --inner: #263055; }
  .dark .score-ring span.number {
    color: #fff; }

div.hero-intro,
div.zip-intro {
  text-align: center; }
  div.hero-intro h1.title,
  div.zip-intro h1.title {
    margin-bottom: 1rem; }
  div.hero-intro p.lead,
  div.zip-intro p.lead {
    max-width: 38rem;
    margin: 0 auto 2.5rem auto;
    color: #59617A;
    font-size: 1.15rem;
    line-height: 1.6; }
  div.hero-intro form.box,
  div.zip-intro form.box {
    max-width: 30rem;
    margin: 0 auto;
    padding: 1.5rem;
    text-align: left;
    background: #F4F0F8; }
  div.hero-intro p.help,
  div.zip-intro p.help {
    color: #59617A; }
  div.hero-intro p.notice,
  div.zip-intro p.notice {
    max-width: 30rem;
    margin: 0 auto 1.5rem auto;
    text-align: center; }
  div.hero-intro div.buttons a.button,
  div.zip-intro div.buttons a.button {
    font-weight: 600;
    box-shadow: 0 12px 48px rgba(24, 35, 74, 0.08); }

@media screen and (max-width: 768px) {
  div.hero-intro h1.title,
  div.zip-intro h1.title {
    font-size: 2.25rem; } }
section#watch {
  padding-top: 5rem;
  padding-bottom: 5rem; }
  section#watch h2.title {
    margin-bottom: 2.5rem; }
  section#watch div.indicator {
    height: 100%;
    background-color: #FFFFFF;
    background-repeat: no-repeat;
    background-position: center top, center bottom;
    background-size: 100% 100%, cover;
    border: 1px solid #DDD6E8;
    border-radius: 1rem;
    padding: 1.5rem 1.25rem 5rem 1.25rem;
    box-shadow: 0 12px 48px rgba(24, 35, 74, 0.08); }
    section#watch div.indicator.sketch-air {
      background-image: linear-gradient(to bottom, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 0.3) 100%), url(../img/sketch/air.png); }
    section#watch div.indicator.sketch-pollen {
      background-image: linear-gradient(to bottom, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 0.3) 100%), url(../img/sketch/pollen.png); }
    section#watch div.indicator.sketch-pressure {
      background-image: linear-gradient(to bottom, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 0.3) 100%), url(../img/sketch/pressure.png); }
    section#watch div.indicator.sketch-cloud {
      background-image: linear-gradient(to bottom, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 0.3) 100%), url(../img/sketch/clouds.png); }
    section#watch div.indicator.sketch-space {
      background-image: linear-gradient(to bottom, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 0.3) 100%), url(../img/sketch/solar.png); }
    section#watch div.indicator span.dot {
      display: block;
      width: .8rem;
      height: .8rem;
      border-radius: 50%;
      margin-bottom: 1rem;
      background: #6336A8; }
    section#watch div.indicator h3 {
      font-weight: 700;
      font-size: 1.05rem;
      margin-bottom: .4rem; }
    section#watch div.indicator p {
      color: #59617A;
      font-size: .95rem;
      line-height: 1.5; }
  section#watch div.column:nth-child(2) span.dot {
    background: #3C9A78; }
  section#watch div.column:nth-child(3) span.dot {
    background: #087F86; }
  section#watch div.column:nth-child(4) span.dot {
    background: #42B8D1; }
  section#watch div.column:nth-child(5) span.dot {
    background: #B9A4DC; }
  section#watch p.also {
    max-width: 36rem;
    margin: 2.5rem auto 0 auto;
    text-align: center;
    line-height: 1.7;
    color: #59617A; }

@media screen and (max-width: 768px) {
  section#watch {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem; } }
.eyebrow {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #087F86;
  font-size: .8rem;
  margin-bottom: .75rem; }

section.dark {
  background: #18234A;
  color: #F4F0F8; }
  section.dark .title {
    color: #fff; }
  section.dark .eyebrow {
    color: #42B8D1; }

section#hero {
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
  border-bottom: 1px solid #DDD6E8;
  padding-top: 5rem;
  padding-bottom: 4rem; }
  section#hero > nav.site-nav {
    position: absolute;
    top: .6rem;
    left: 0;
    right: 0;
    z-index: 3; }
  section#hero img.logo {
    display: block;
    width: 100%;
    max-width: 480px;
    margin: 0 auto 2.5rem auto; }

section#tools {
  padding-top: 5rem;
  padding-bottom: 5rem; }
  section#tools h2.title {
    margin-bottom: .75rem; }
  section#tools p.intro {
    margin-bottom: 2.5rem;
    color: #59617A; }
  section#tools .tool-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 16rem;
    padding: 1.5rem 1.25rem;
    border-radius: 1rem; }
  section#tools a.tool-card {
    background-color: #FFFFFF;
    background-image: linear-gradient(to bottom, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 0.3) 100%), var(--sketch, none);
    background-repeat: no-repeat;
    background-position: center top, center bottom;
    background-size: 100% 100%, cover;
    border: 1px solid #DDD6E8;
    box-shadow: 0 12px 48px rgba(24, 35, 74, 0.08);
    text-decoration: none;
    color: #18234A;
    transition: transform .2s ease, box-shadow .2s ease; }
    section#tools a.tool-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 48px rgba(24, 35, 74, 0.14); }
      section#tools a.tool-card:hover h3 {
        color: #6336A8; }
    section#tools a.tool-card h3 {
      font-family: "Playfair Display", serif;
      font-weight: 700;
      font-style: normal;
      font-size: 1.4rem;
      line-height: 1.2;
      margin-bottom: .5rem;
      transition: color .2s ease; }
    section#tools a.tool-card p.description {
      flex-grow: 1;
      font-size: .95rem;
      line-height: 1.55;
      color: #59617A; }
    section#tools a.tool-card span.more {
      margin-top: 1.25rem;
      font-weight: 600;
      font-size: .9rem;
      color: #6336A8; }
  section#tools div.tool-card.is-soon {
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.45);
    border: 2px dashed #DDD6E8; }
    section#tools div.tool-card.is-soon .eyebrow {
      margin-bottom: .35rem;
      color: #59617A; }
    section#tools div.tool-card.is-soon p.hint {
      font-size: .9rem;
      color: #59617A;
      opacity: .8; }
    section#tools div.tool-card.is-soon span.mark {
      display: block;
      width: 2.5rem;
      height: .5rem;
      margin-bottom: 1rem;
      background: radial-gradient(circle, #B9A4DC 0 0.22rem, transparent 0.24rem) 0 0/0.85rem 0.5rem repeat-x;
      opacity: .8; }

section#story {
  background: linear-gradient(160deg, #18234A 0%, #2A1E5A 100%);
  padding-top: 5rem;
  padding-bottom: 5rem; }
  section#story img.avatar {
    display: block;
    width: 112px;
    height: 112px;
    margin: 0 auto 1.5rem auto;
    padding: .5rem;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08), 0 12px 48px rgba(0, 0, 0, 0.22); }
  section#story div.content {
    text-align: left; }
    section#story div.content p {
      color: #C3BCD6;
      font-size: 1.1rem;
      line-height: 1.75; }
  section#story form.signup {
    margin-top: 3rem;
    padding: 2rem;
    text-align: left;
    background: #F4F0F8;
    border-radius: 1rem;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.22);
    color: #18234A; }
    section#story form.signup h3 {
      font-family: "Playfair Display", serif;
      font-weight: 700;
      font-style: normal;
      font-size: 1.5rem;
      margin-bottom: .35rem; }
    section#story form.signup p:not(.notice) {
      color: #59617A;
      margin-bottom: 1.25rem; }
    section#story form.signup p.help {
      margin: .5rem 0 0 0; }

@media screen and (max-width: 768px) {
  section#hero {
    padding-top: 4rem; }

  section#tools,
  section#story {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem; }

  section#story form.signup {
    padding: 1.5rem; } }
section#forecast-intro {
  padding-top: 4rem;
  padding-bottom: 4.5rem;
  background: #FFFFFF;
  border-bottom: 1px solid #DDD6E8; }

section#outlook {
  padding-top: 3.5rem;
  padding-bottom: 4rem; }
  section#outlook div.outlook-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin-bottom: 2rem; }
    section#outlook div.outlook-head h1.title {
      margin-bottom: 0; }
    section#outlook div.outlook-head input.input {
      width: 9rem; }
  section#outlook div.day-row {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 -1rem;
    padding: .5rem 1rem 2rem 1rem; }
  section#outlook div.later-days {
    position: relative;
    display: flex;
    gap: 1rem;
    flex: none; }
  section#outlook article.day-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 16rem;
    scroll-snap-align: start;
    background: #FFFFFF;
    border: 1px solid #DDD6E8;
    border-radius: 1rem;
    padding: 1.5rem 1.25rem 1.25rem 1.25rem;
    box-shadow: 0 12px 48px rgba(24, 35, 74, 0.08); }
    section#outlook article.day-card.is-today {
      border: 2px solid #6336A8; }
      section#outlook article.day-card.is-today p.dayname {
        color: #6336A8; }
    section#outlook article.day-card div.top {
      text-align: center; }
      section#outlook article.day-card div.top span.score-pill {
        margin-top: .75rem; }
    section#outlook article.day-card p.dayname {
      font-family: "Playfair Display", serif;
      font-weight: 700;
      font-style: normal;
      font-size: 1.35rem;
      line-height: 1.2; }
    section#outlook article.day-card p.date {
      margin-bottom: 1rem;
      font-size: .9rem;
      color: #59617A; }
    section#outlook article.day-card dl.readings {
      margin: 1rem 0 0 0;
      border-top: 1px solid #DDD6E8; }
      section#outlook article.day-card dl.readings div {
        display: flex;
        justify-content: space-between;
        gap: .5rem;
        padding: .45rem 0;
        border-bottom: 1px solid #DDD6E8;
        font-size: .85rem; }
      section#outlook article.day-card dl.readings dt {
        color: #59617A; }
      section#outlook article.day-card dl.readings dd {
        font-weight: 600;
        text-align: right; }
    section#outlook article.day-card ul.conditions {
      display: block;
      margin: 1.25rem 0 0 0;
      padding: .65rem .8rem;
      list-style: none;
      background: #F4F0F8;
      border-radius: .6rem;
      font-size: .85rem;
      color: #59617A; }
      section#outlook article.day-card ul.conditions li {
        display: block;
        text-align: center;
        white-space: nowrap; }
        section#outlook article.day-card ul.conditions li + li {
          margin-top: .2rem; }
      section#outlook article.day-card ul.conditions li.temps {
        font-size: 1.05rem; }
        section#outlook article.day-card ul.conditions li.temps strong {
          font-size: 1.35rem;
          color: #18234A; }
      section#outlook article.day-card ul.conditions li.moon {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .35rem; }
        section#outlook article.day-card ul.conditions li.moon svg.moon {
          width: 1.05rem;
          height: 1.05rem;
          flex-shrink: 0; }
        section#outlook article.day-card ul.conditions li.moon .moon-dark {
          fill: rgba(89, 97, 122, 0.3); }
        section#outlook article.day-card ul.conditions li.moon .moon-lit {
          fill: #FFFFFF; }
        section#outlook article.day-card ul.conditions li.moon .moon-rim {
          fill: none;
          stroke: #B9A4DC;
          stroke-width: 1; }
    section#outlook article.day-card p.explanation {
      margin-top: 1rem;
      font-size: .92rem;
      line-height: 1.55;
      color: #59617A; }
  section#outlook div.email-promo {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 46rem;
    margin: 2rem auto 1.5rem auto;
    padding: 1.25rem 1.5rem;
    background: #FFFFFF;
    border: 1px solid #DDD6E8;
    border-radius: 1rem;
    box-shadow: 0 12px 48px rgba(24, 35, 74, 0.08); }
    section#outlook div.email-promo svg.envelope {
      flex-shrink: 0;
      width: 2.5rem;
      height: 2.5rem;
      fill: none;
      stroke: #6336A8;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round; }
    section#outlook div.email-promo div.text {
      flex-grow: 1; }
      section#outlook div.email-promo div.text p.title {
        margin-bottom: .25rem; }
      section#outlook div.email-promo div.text p:not(.title) {
        font-size: .95rem;
        line-height: 1.5;
        color: #59617A; }
    section#outlook div.email-promo a.button {
      flex-shrink: 0;
      font-weight: 600; }
  section#outlook p.attribution {
    margin-top: .5rem;
    text-align: center;
    font-size: .85rem;
    color: #59617A; }

section#scale {
  padding-top: 5rem;
  padding-bottom: 5rem; }
  section#scale p.intro {
    max-width: 40rem;
    margin: 0 auto 1.5rem auto;
    line-height: 1.7;
    color: #C3BCD6; }
  section#scale ul.scale {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 1.75rem;
    margin: 2rem 0 2.5rem 0;
    padding: 0;
    list-style: none; }
    section#scale ul.scale li {
      font-weight: 600;
      font-size: 1.05rem;
      color: #fff; }
      section#scale ul.scale li span.score-pill {
        min-width: 3.75rem;
        margin-right: .4rem; }
  section#scale blockquote.example {
    max-width: 36rem;
    margin: 0 auto 2rem auto;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.06);
    border-left: 4px solid #42B8D1;
    border-radius: 0 .5rem .5rem 0;
    text-align: left;
    font-style: italic;
    color: #F4F0F8;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.22); }
  section#scale p.note {
    font-size: .9rem;
    color: #C3BCD6; }

section#outlook div.day-row.is-locked div.later-days > article.day-card {
  filter: blur(5px);
  opacity: .85;
  user-select: none;
  pointer-events: none; }
section#outlook div.day-row.is-locked div.locked-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1rem;
  border-radius: 1rem;
  background: rgba(244, 240, 248, 0.25); }
section#outlook div.day-row.is-locked div.locked-message {
  position: sticky;
  left: 1rem;
  width: min(22rem, 78vw);
  padding: 1.75rem 1.75rem 1.5rem 1.75rem;
  background: #FFFFFF;
  border: 1px solid #DDD6E8;
  border-radius: 1rem;
  box-shadow: 0 16px 48px rgba(24, 35, 74, 0.16);
  text-align: center; }
  section#outlook div.day-row.is-locked div.locked-message svg.lock {
    display: block;
    width: 2rem;
    height: 2rem;
    margin: 0 auto .75rem auto;
    fill: none;
    stroke: #6336A8;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round; }
  section#outlook div.day-row.is-locked div.locked-message p.title {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    font-style: normal;
    margin-bottom: 1.25rem;
    line-height: 1.3; }
  section#outlook div.day-row.is-locked div.locked-message a.button {
    font-weight: 600; }
  section#outlook div.day-row.is-locked div.locked-message p.login {
    margin-top: .9rem;
    font-size: .85rem;
    color: #59617A; }

@media screen and (min-width: 1216px) {
  section#outlook div.day-row {
    display: grid;
    grid-template-columns: calc((100% - 4rem) / 5) 1fr;
    overflow: visible; }
  section#outlook div.later-days {
    display: grid;
    grid-template-columns: repeat(4, 1fr); }
  section#outlook article.day-card {
    min-width: 0; }
  section#outlook div.day-row.is-locked div.locked-overlay {
    justify-content: center; }
  section#outlook div.day-row.is-locked div.locked-message {
    position: static; } }
@media screen and (max-width: 768px) {
  section#scale {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem; }

  section#outlook {
    padding-top: 2.5rem; }
    section#outlook article.day-card {
      flex-basis: 78vw; }
    section#outlook div.email-promo {
      flex-direction: column;
      text-align: center; } }
span.draft {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  display: inline-block;
  margin-left: .4rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: #B9A4DC;
  font-size: .65rem;
  letter-spacing: .1em;
  color: #18234A;
  vertical-align: middle; }

section#listing-head {
  background: #FFFFFF;
  border-bottom: 1px solid #DDD6E8;
  padding-top: 3.5rem;
  padding-bottom: 2.5rem; }
  section#listing-head h1.title {
    margin-bottom: .75rem; }
  section#listing-head p.lead {
    max-width: 40rem;
    font-size: 1.15rem;
    line-height: 1.6;
    color: #59617A; }
  section#listing-head nav.categories {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.75rem; }
    section#listing-head nav.categories a {
      padding: .35rem 1rem;
      border: 1px solid #DDD6E8;
      border-radius: 999px;
      background: #F4F0F8;
      font-weight: 600;
      font-size: .9rem;
      text-decoration: none;
      color: #59617A; }
      section#listing-head nav.categories a:hover {
        border-color: #B9A4DC;
        color: #6336A8; }
      section#listing-head nav.categories a.is-active {
        background: #6336A8;
        border-color: #6336A8;
        color: #fff; }

section#listing {
  padding-top: 3rem;
  padding-bottom: 5rem; }
  section#listing p.empty {
    padding: 3rem 0;
    text-align: center;
    color: #59617A; }
  section#listing nav.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2.5rem;
    color: #59617A; }

article.post-card {
  height: 100%; }
  article.post-card a {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #DDD6E8;
    border-radius: 1rem;
    box-shadow: 0 12px 48px rgba(24, 35, 74, 0.08);
    text-decoration: none;
    color: #18234A;
    transition: transform .2s ease, box-shadow .2s ease; }
    article.post-card a:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 48px rgba(24, 35, 74, 0.14); }
      article.post-card a:hover h3 {
        color: #6336A8; }
  article.post-card div.image {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center; }
  article.post-card div.body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 1.5rem; }
  article.post-card p.eyebrow {
    margin-bottom: .5rem; }
  article.post-card h3 {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.4rem;
    line-height: 1.25;
    transition: color .2s ease; }
  article.post-card p.meta {
    margin: .4rem 0 .75rem 0;
    font-size: .85rem;
    color: #59617A; }
  article.post-card p.description {
    flex-grow: 1;
    line-height: 1.6;
    color: #59617A; }
  article.post-card span.more {
    margin-top: 1rem;
    font-weight: 600;
    font-size: .9rem;
    color: #087F86; }

article#article {
  background: #FFFFFF;
  padding-top: 3.5rem;
  padding-bottom: 5rem; }
  article#article header {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #DDD6E8; }
  article#article nav.crumbs {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .15em;
    margin-bottom: 1rem;
    font-size: .75rem;
    color: #59617A; }
    article#article nav.crumbs a {
      color: #087F86;
      text-decoration: none; }
      article#article nav.crumbs a:hover {
        text-decoration: underline; }
    article#article nav.crumbs span {
      margin: 0 .4rem; }
  article#article h1.title {
    margin-bottom: .75rem;
    line-height: 1.15; }
  article#article p.meta {
    font-size: .9rem;
    color: #59617A; }
  article#article p.lead {
    margin-top: 1.25rem;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #59617A; }
  article#article img.cover {
    display: block;
    width: 100%;
    margin-bottom: 2.5rem;
    border-radius: 1rem;
    box-shadow: 0 12px 48px rgba(24, 35, 74, 0.08); }

.content.article-body {
  font-size: 1.1rem;
  line-height: 1.75;
  color: #6B7189; }
  .content.article-body h2, .content.article-body h3, .content.article-body h4 {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    font-style: normal;
    font-weight: 600;
    margin-top: 2em;
    margin-bottom: .6em;
    line-height: 1.3;
    color: #18234A; }
  .content.article-body h2 {
    font-size: 1.65rem; }
  .content.article-body h3 {
    font-size: 1.3rem; }
  .content.article-body a {
    color: #6336A8;
    text-decoration: underline;
    text-underline-offset: .15em; }
    .content.article-body a:hover {
      color: #18234A; }
  .content.article-body strong {
    color: #3B4360; }
  .content.article-body blockquote {
    margin: 2em 0;
    padding: 1.25rem 1.5rem;
    background: #F4F0F8;
    border-left: 4px solid #B9A4DC;
    border-radius: 0 .75rem .75rem 0;
    font-style: italic; }
  .content.article-body img {
    border-radius: .75rem; }
  .content.article-body code {
    padding: .1em .35em;
    border-radius: .3rem;
    background: #F4F0F8;
    font-size: .9em;
    color: #6336A8; }
  .content.article-body table {
    font-size: .95rem; }
    .content.article-body table th {
      color: #18234A;
      border-bottom: 2px solid #DDD6E8; }
    .content.article-body table td {
      border-bottom: 1px solid #DDD6E8; }
  .content.article-body hr {
    margin: 3em 0;
    background: #DDD6E8; }

section#more {
  padding-top: 4rem;
  padding-bottom: 4rem; }
  section#more h2.title {
    margin-bottom: 2rem; }

@media screen and (max-width: 768px) {
  section#listing-head,
  article#article {
    padding-top: 2.5rem; }

  article#article h1.title {
    font-size: 2.25rem; }

  .content.article-body {
    font-size: 1.05rem; } }
section#auth {
  display: flex;
  justify-content: center;
  padding-top: 4rem;
  padding-bottom: 6rem;
  background: radial-gradient(ellipse 36rem 26rem at 50% 14rem, rgba(185, 164, 220, 0.35) 0%, rgba(185, 164, 220, 0) 70%), #F4F0F8; }
  section#auth div.auth-card {
    width: 100%;
    max-width: 28rem;
    padding: 2.5rem 2.25rem 2rem 2.25rem;
    background: #FFFFFF;
    border: 1px solid #DDD6E8;
    border-radius: 1.25rem;
    box-shadow: 0 12px 48px rgba(24, 35, 74, 0.08);
    text-align: center; }
  section#auth h1.title {
    margin-bottom: .5rem; }
  section#auth p.intro {
    margin-bottom: 2rem;
    line-height: 1.6;
    color: #59617A; }
  section#auth form {
    text-align: left; }
  section#auth div.field {
    margin-bottom: 1.25rem; }
  section#auth div.label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between; }
    section#auth div.label-row a {
      font-size: .85rem; }
  section#auth span.optional {
    margin-left: .3rem;
    font-weight: 400;
    font-size: .85rem;
    color: #59617A; }
  section#auth p.help:not(.is-danger) {
    color: #59617A; }
  section#auth label.checkbox {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    line-height: 1.5;
    color: #59617A; }
    section#auth label.checkbox input {
      margin-top: .3rem;
      accent-color: #6336A8; }
  section#auth button.is-fullwidth {
    margin-top: .5rem;
    font-weight: 600; }
  section#auth p.switch {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid #DDD6E8;
    color: #59617A; }
    section#auth p.switch a {
      font-weight: 600; }

@media screen and (max-width: 768px) {
  section#auth {
    padding: 2rem 1rem 4rem 1rem; }
    section#auth div.auth-card {
      padding: 2rem 1.5rem 1.5rem 1.5rem; } }
section#account {
  padding-top: 3.5rem;
  padding-bottom: 6rem;
  background: radial-gradient(ellipse 36rem 22rem at 50% 8rem, rgba(185, 164, 220, 0.3) 0%, rgba(185, 164, 220, 0) 70%), #F4F0F8; }
  section#account h1.title {
    margin-bottom: 2rem; }
  section#account div.account-card {
    margin-bottom: 1.25rem;
    padding: 1.5rem 1.75rem;
    background: #FFFFFF;
    border: 1px solid #DDD6E8;
    border-radius: 1rem;
    box-shadow: 0 12px 48px rgba(24, 35, 74, 0.08); }
    section#account div.account-card h2 {
      font-family: "Montserrat", sans-serif;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .15em;
      margin-bottom: 1rem;
      font-size: .8rem;
      color: #087F86; }
    section#account div.account-card p {
      color: #59617A; }
  section#account dl.details div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid #DDD6E8; }
    section#account dl.details div:last-child {
      border-bottom: 0; }
  section#account dl.details dt {
    color: #59617A; }
  section#account dl.details dd {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    font-weight: 600;
    text-align: right;
    word-break: break-all; }
    section#account dl.details dd button.button {
      font-weight: 600;
      word-break: normal; }
  section#account div.two-factor > p:not(.hint) {
    margin-bottom: .5rem; }
  section#account div.two-factor > form {
    margin-top: 1.25rem; }
  section#account div.two-factor div.qr {
    display: inline-block;
    margin: .75rem 0;
    padding: .5rem;
    background: #fff;
    border: 1px solid #DDD6E8;
    border-radius: .75rem;
    line-height: 0; }
    section#account div.two-factor div.qr svg {
      width: 180px;
      height: 180px; }
  section#account div.two-factor code.tf-secret {
    user-select: all;
    font-size: .9rem;
    letter-spacing: .05em;
    word-break: break-all; }
  section#account div.two-factor ol.tf-steps {
    margin: 0 0 1rem 1.25rem; }
    section#account div.two-factor ol.tf-steps li {
      margin-bottom: 1rem; }
      section#account div.two-factor ol.tf-steps li p {
        margin-bottom: .5rem; }
  section#account div.two-factor div.recovery-codes {
    margin: 1rem 0;
    padding: 1rem 1.25rem;
    background: #F4F0F8;
    border: 1px solid #DDD6E8;
    border-radius: .75rem; }
    section#account div.two-factor div.recovery-codes ul {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .35rem 1.5rem;
      margin: .75rem 0 0 0;
      padding: 0;
      list-style: none; }
    section#account div.two-factor div.recovery-codes code {
      font-size: .95rem;
      background: transparent;
      color: #18234A; }
  section#account div.two-factor div.tf-actions {
    margin-top: 1rem; }
    section#account div.two-factor div.tf-actions [hidden] {
      display: none !important; }
    section#account div.two-factor div.tf-actions div.tf-buttons {
      margin-bottom: 0; }
      section#account div.two-factor div.tf-actions div.tf-buttons button {
        font-weight: 600; }
        section#account div.two-factor div.tf-actions div.tf-buttons button[aria-expanded="true"] {
          border-color: #B9A4DC;
          background: #F4F0F8;
          color: #6336A8; }
    section#account div.two-factor div.tf-actions form.tf-panel {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid #DDD6E8; }
  section#account details.change-email {
    margin-top: 1rem; }
    section#account details.change-email summary {
      list-style: none;
      font-weight: 600; }
      section#account details.change-email summary::-webkit-details-marker {
        display: none; }
    section#account details.change-email[open] summary {
      border-color: #B9A4DC;
      color: #6336A8; }
    section#account details.change-email form {
      margin-top: 1.25rem;
      padding-top: 1.25rem;
      border-top: 1px solid #DDD6E8; }
  section#account details.danger-zone {
    margin-top: 1rem;
    text-align: center; }
    section#account details.danger-zone summary {
      display: inline-block;
      list-style: none;
      cursor: pointer;
      font-size: .85rem;
      color: #59617A;
      text-decoration: underline;
      text-underline-offset: .2em; }
      section#account details.danger-zone summary::-webkit-details-marker {
        display: none; }
      section#account details.danger-zone summary:hover {
        color: #B3261E; }
    section#account details.danger-zone[open] summary {
      color: #B3261E; }
    section#account details.danger-zone div.danger-body {
      margin-top: 1.25rem;
      padding: 1.5rem 1.75rem;
      text-align: left;
      background: #FFFFFF;
      border: 1px solid rgba(179, 38, 30, 0.25);
      border-radius: 1rem;
      box-shadow: 0 12px 48px rgba(24, 35, 74, 0.08); }
      section#account details.danger-zone div.danger-body p {
        margin-bottom: 1rem;
        line-height: 1.6;
        color: #59617A; }
    section#account details.danger-zone button.is-danger {
      font-weight: 600; }
  section#account span.status {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .15em;
    display: inline-block;
    margin-right: .5rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: #DDD6E8;
    font-size: .7rem;
    color: #59617A; }
    section#account span.status.is-active {
      background: #3C9A78;
      color: #fff; }
  section#account div.field {
    margin-bottom: 1rem; }
  section#account label.switch {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
    cursor: pointer; }
    section#account label.switch input {
      position: absolute;
      opacity: 0;
      width: 1px;
      height: 1px; }
    section#account label.switch span.track {
      position: relative;
      flex-shrink: 0;
      width: 2.75rem;
      height: 1.5rem;
      border-radius: 999px;
      background: #DDD6E8;
      transition: background .2s ease; }
      section#account label.switch span.track::after {
        content: "";
        position: absolute;
        top: .2rem;
        left: .2rem;
        width: 1.1rem;
        height: 1.1rem;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(24, 35, 74, 0.25);
        transition: transform .2s ease; }
    section#account label.switch input:checked + span.track {
      background: #6336A8; }
      section#account label.switch input:checked + span.track::after {
        transform: translateX(1.25rem); }
    section#account label.switch input:focus-visible + span.track {
      outline: 2px solid #B9A4DC;
      outline-offset: 2px; }
    section#account label.switch span.text {
      font-weight: 600;
      color: #18234A; }
  section#account p.hint {
    margin-bottom: 1rem;
    font-size: .9rem; }
  section#account div.account-card.is-disabled {
    background: rgba(255, 255, 255, 0.55);
    box-shadow: none; }
    section#account div.account-card.is-disabled label.switch {
      cursor: not-allowed; }
      section#account div.account-card.is-disabled label.switch span.track,
      section#account div.account-card.is-disabled label.switch span.text {
        opacity: .5; }
  section#account form.logout {
    margin-top: 2rem;
    text-align: center; }
    section#account form.logout button {
      font-weight: 600; }
  section#account p.hint.timezone {
    margin: .75rem 0 0 0; }
    section#account p.hint.timezone strong {
      color: #18234A;
      font-weight: 600; }
  section#account div.subscription-actions {
    margin-top: 1rem; }
    section#account div.subscription-actions .button {
      font-weight: 600; }
    section#account div.subscription-actions form.subscribe {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: .5rem 1.25rem; }
      section#account div.subscription-actions form.subscribe a:not(.button) {
        font-size: .95rem; }
    section#account div.subscription-actions p.hint {
      margin: .5rem 0 0 0; }
  section#account div.units-choice {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1rem; }
    section#account div.units-choice label.units-option {
      display: flex;
      align-items: center;
      gap: .5rem;
      padding: .6rem .9rem;
      border: 1px solid #DDD6E8;
      border-radius: .6rem;
      cursor: pointer;
      color: #59617A; }
      section#account div.units-choice label.units-option strong {
        color: #18234A;
        margin-right: .25rem; }
      section#account div.units-choice label.units-option input {
        accent-color: #6336A8; }
      section#account div.units-choice label.units-option:has(input:checked) {
        border-color: #B9A4DC;
        background: #F4F0F8; }
  section#account.stats ul.chart-legend {
    display: flex;
    gap: 1.25rem;
    margin: 0 0 .5rem 0;
    font-size: .85rem;
    color: #59617A; }
    section#account.stats ul.chart-legend li::before {
      content: "";
      display: inline-block;
      width: .9rem;
      height: .2rem;
      margin-right: .4rem;
      vertical-align: middle;
      border-radius: .1rem; }
    section#account.stats ul.chart-legend li.accounts::before {
      background: #6336A8; }
    section#account.stats ul.chart-legend li.subscribers::before {
      background: #087F86; }
  section#account.stats svg.growth-chart {
    display: block;
    width: 100%;
    height: auto; }
    section#account.stats svg.growth-chart line.grid {
      stroke: #DDD6E8;
      stroke-width: 1; }
    section#account.stats svg.growth-chart text.axis {
      font-size: 11px;
      fill: #59617A; }
    section#account.stats svg.growth-chart polyline.line {
      fill: none;
      stroke-width: 2.5;
      stroke-linejoin: round;
      stroke-linecap: round; }
    section#account.stats svg.growth-chart .accounts {
      stroke: #6336A8; }
    section#account.stats svg.growth-chart .subscribers {
      stroke: #087F86; }
    section#account.stats svg.growth-chart circle.dot {
      fill: #FFFFFF;
      stroke-width: 2; }
  section#account.stats table.table {
    font-size: .9rem;
    background: transparent; }
    section#account.stats table.table th {
      color: #18234A; }
    section#account.stats table.table td.is-total,
    section#account.stats table.table tfoot th {
      font-weight: 700;
      color: #18234A; }
  section#account.stats > div.container > p.hint {
    text-align: center; }

@media screen and (max-width: 768px) {
  section#account {
    padding: 2.5rem 1rem 4rem 1rem; }
    section#account div.account-card {
      padding: 1.25rem; } }
input.code-input {
  letter-spacing: .3em;
  text-align: center;
  font-family: "Montserrat", sans-serif; }

section#contact {
  padding-top: 4rem;
  padding-bottom: 6rem;
  background: radial-gradient(ellipse 40rem 26rem at 70% 12rem, rgba(185, 164, 220, 0.3) 0%, rgba(185, 164, 220, 0) 70%), #F4F0F8; }
  section#contact div.intro p {
    margin-bottom: 1rem;
    line-height: 1.7;
    color: #59617A; }
  section#contact div.intro ul.prompts {
    margin: 1.5rem 0;
    padding: 0;
    list-style: none; }
    section#contact div.intro ul.prompts li {
      position: relative;
      margin-bottom: .75rem;
      padding-left: 1.5rem;
      line-height: 1.7;
      color: #59617A; }
      section#contact div.intro ul.prompts li::before {
        content: "";
        position: absolute;
        left: 0;
        top: .55em;
        width: .5rem;
        height: .5rem;
        border-radius: 50%;
        background: #B9A4DC; }
  section#contact div.contact-card {
    padding: 2rem;
    background: #FFFFFF;
    border: 1px solid #DDD6E8;
    border-radius: 1.25rem;
    box-shadow: 0 12px 48px rgba(24, 35, 74, 0.08); }
  section#contact div.field {
    margin-bottom: 1.25rem; }
  section#contact span.optional {
    margin-left: .3rem;
    font-weight: 400;
    font-size: .85rem;
    color: #59617A; }
  section#contact p.help:not(.is-danger) {
    color: #59617A; }
  section#contact p.reply-note {
    margin: -.75rem 0 1.5rem 0; }
  section#contact button.button {
    font-weight: 600;
    padding-left: 2em;
    padding-right: 2em; }

@media screen and (max-width: 768px) {
  section#contact {
    padding: 2.5rem 1rem 4rem 1rem; }
    section#contact div.contact-card {
      padding: 1.5rem; } }
section#pricing {
  padding-top: 4rem;
  padding-bottom: 6rem;
  background: radial-gradient(ellipse 44rem 26rem at 50% 14rem, rgba(185, 164, 220, 0.3) 0%, rgba(185, 164, 220, 0) 70%), #F4F0F8; }
  section#pricing p.intro {
    max-width: 36rem;
    margin: 0 auto 3rem auto;
    line-height: 1.7;
    color: #59617A; }
  section#pricing div.plan {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem 2rem 1.75rem 2rem;
    background: #FFFFFF;
    border: 1px solid #DDD6E8;
    border-radius: 1.25rem;
    box-shadow: 0 12px 48px rgba(24, 35, 74, 0.08); }
    section#pricing div.plan.is-featured {
      border: 2px solid #6336A8;
      box-shadow: 0 20px 56px rgba(99, 54, 168, 0.16);
      transform: translateY(-0.5rem); }
    section#pricing div.plan h2 {
      font-family: "Montserrat", sans-serif;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .15em;
      font-size: .85rem;
      color: #087F86; }
    section#pricing div.plan p.price {
      margin: .5rem 0 .75rem 0; }
      section#pricing div.plan p.price strong {
        font-family: "Montserrat", sans-serif;
        font-weight: 600;
        font-size: 3rem;
        line-height: 1;
        color: #18234A; }
      section#pricing div.plan p.price span {
        margin-left: .25rem;
        color: #59617A; }
    section#pricing div.plan p.description {
      margin-bottom: 1.5rem;
      line-height: 1.6;
      color: #59617A; }
    section#pricing div.plan ul.features {
      flex-grow: 1;
      margin: 0 0 2rem 0;
      padding: 0;
      list-style: none; }
      section#pricing div.plan ul.features li {
        position: relative;
        margin-bottom: .65rem;
        padding-left: 1.6rem;
        line-height: 1.5; }
        section#pricing div.plan ul.features li::before {
          content: "";
          position: absolute;
          left: .15rem;
          top: .3em;
          width: .45rem;
          height: .8rem;
          border: solid #3C9A78;
          border-width: 0 2px 2px 0;
          transform: rotate(45deg); }
    section#pricing div.plan div.cta .button {
      font-weight: 600; }
  section#pricing p.note {
    margin-top: 2.5rem;
    text-align: center;
    font-size: .9rem;
    color: #59617A; }

@media screen and (max-width: 768px) {
  section#pricing {
    padding: 2.5rem 1rem 4rem 1rem; }
    section#pricing div.plan.is-featured {
      transform: none; } }
section#error {
  display: flex;
  justify-content: center;
  padding-top: 5rem;
  padding-bottom: 7rem;
  background: radial-gradient(ellipse 36rem 26rem at 50% 14rem, rgba(185, 164, 220, 0.35) 0%, rgba(185, 164, 220, 0) 70%), #F4F0F8; }
  section#error div.error-card {
    width: 100%;
    max-width: 32rem;
    padding: 2.5rem 2.25rem;
    background: #FFFFFF;
    border: 1px solid #DDD6E8;
    border-radius: 1.25rem;
    box-shadow: 0 12px 48px rgba(24, 35, 74, 0.08);
    text-align: center; }
  section#error p.code {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    letter-spacing: .02em;
    font-size: 5rem;
    line-height: 1;
    margin-bottom: 1rem;
    color: #B9A4DC; }
  section#error h1.title {
    margin-bottom: .75rem; }
  section#error p.message {
    margin-bottom: 2rem;
    line-height: 1.6;
    color: #59617A; }
  section#error a.button {
    font-weight: 600; }

@media screen and (max-width: 768px) {
  section#error {
    padding: 2.5rem 1rem 4rem 1rem; }
    section#error div.error-card {
      padding: 2rem 1.5rem; }
    section#error p.code {
      font-size: 4rem; } }
html {
  background: #F4F0F8;
  font-size: 17px; }

body {
  color: #18234A;
  font-family: "DM Sans", sans-serif;
  font-size: 1rem; }

/*# sourceMappingURL=style.css.map */