/* //////////////////////////////////////////////////////////////////////////
   
   CSS Part II

   //////////////////////////////////////////////////////////////////////////

   I. Post/Page
   |
   ├─ 1.Global
   ├─ 2.Header
   ├─ 3.Table of Content
   ├─ 4.Content
   ├─ 5.CTA
   ├─ 6.Share
   ├─ 7.Navigation
   ├─ 8.Switch
   ├─ 9.Tiers 'Focus'
   ├─ 10.Tiers 'Cards'
   ├─ 11.Tiers 'Choice'
   └─ 12.Answers

   //////////////////////////////////////////////////////////////////////////

   I. Post/Page

   ////////////////////////////////////////////////////////////////////////// */

/* --------------------------------------------------------------------------
   1.Global
   -------------------------------------------------------------------------- */

/* Progress bar
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-progress {
  position: fixed;
  z-index: 90;
  width: 100%;
  height: 3px;
  transition: opacity 0.15s ease-out 0.3s;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  inset: 0 0 auto;
}

.g-progress,
.g-progress[value]::-webkit-progress-bar {
  background-color: transparent;
}

.g-progress[value]::-webkit-progress-value {
  transition: width 0.2s ease-out;
  background-color: var(--color-one);
  will-change: width;
}

.g-progress[value]::-moz-progress-bar {
  transition: width 0.2s ease-out;
  background-color: var(--color-one);
  will-change: width;
}

.g-progress[value="0"] {
  display: none;
}

.g-progress[value="100"] {
  opacity: 0;
}

/* /////// data /////// */
[data-context="page"] .g-progress {
  display: none;
}

/* Tiers
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-tiers span.trial,
.g-tiers span.symbol,
.g-tiers span.interval {
  position: relative;
}

.g-tiers span.trial {
  line-height: 1;
  z-index: 1;
  display: inline-block;
  padding: 0.3em 0.8em;
  border-radius: var(--radius-full);
}

.g-tiers span.symbol {
  font-size: 85%;
  font-weight: var(--font-weight-regular);
  top: -0.18em;
}

/* /////// data /////// */
[data-template="focus"] .g-tiers span.interval {
  font-size: 85%;
}

[data-template="cards"] .g-tiers span.interval,
[data-template="choice"] .g-tiers span.interval {
  display: inline;
}

[data-template="cards"] .g-tiers small.name,
[data-template="choice"] .g-tiers small.name {
  padding: 0.3em 0.8em;
  border-radius: var(--radius-full);
  background-color: var(--color-three);
}

/* Price
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-price {
  font-family: var(--font-family-subheading);
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.g-price strong {
  font-weight: var(--font-weight-bold);
}

/* Discount
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-discount-wrap {
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

.g-discount {
  display: inline-block;
  opacity: var(--opacity-caption);
  grid-column: 2;
  justify-self: center;
}

/* /////// data /////// */
[data-template="cards"] .g-discount-wrap {
  padding-bottom: calc(var(--grid-gap) / 3);
  border-bottom: var(--border);
}

[data-template="choice"] .g-discount-wrap {
  order: 2;
  padding-top: calc(var(--grid-gap) / 4);
  border-top: var(--border);
}

/* --------------------------------------------------------------------------
   2.Header
   -------------------------------------------------------------------------- */
.headline-back {
  display: inline-flex;
  transition: opacity 0.2s ease;
  opacity: var(--opacity-meta);
  grid-column: 1/-1;
  justify-self: start;
}

.headline-back:hover {
  opacity: 1;
}

.headline-back span:hover {
  text-decoration: underline;
}

/* Meta
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.headline-meta > small:first-child {
  display: inline-flex;
  gap: calc(var(--grid-gap) / 4);
}

.headline-meta > small > span:not(:first-child) {
  opacity: var(--opacity-meta);
}

.headline-meta span:not(.authors) {
  flex-shrink: 0;
}

/* /////// data /////// */
[data-subcontext="entry"] .headline-section {
  gap: calc(var(--grid-gap) / 1) calc(var(--grid-gap) / 1.2);
  grid-template-columns: 1fr var(--sidebar);
}

[data-subcontext="entry"] [data-headline-img="false"] {
  grid-template-columns: 1fr;
}

[data-subcontext="entry"] [data-style="appearance"] {
  grid-template-columns: 1fr calc(var(--sidebar) + var(--mini-gap) * 2);
}

[data-subcontext="entry"] .headline-section > div:first-of-type {
  align-content: center;
}

[data-subcontext="entry"] .headline-section > div:first-of-type,
[data-subcontext="entry"] .headline-section > div:first-of-type > div {
  gap: calc(var(--grid-gap) / 1.4);
}

[data-subcontext="entry"] .headline-content {
  gap: calc(var(--grid-gap) / 1.2);
}

[data-subcontext="entry"] .headline-content p {
  font-family: var(--font-family-subheading);
}

[data-subcontext="entry"][data-template="full"] .headline-section,
[data-subcontext="entry"][data-template="full"] .headline-content.is-compact,
[data-subcontext="entry"][data-template="split"] .headline-content,
[data-subcontext="entry"][data-template="full"]
  .headline-content:not(.is-tags) {
  grid-template-columns: 1fr;
}

[data-subcontext="entry"][data-template="full"] .headline-content,
[data-subcontext="entry"][data-template="split"]
  [data-headline-img="false"]
  .headline-content.is-tags {
  grid-template-columns: 1fr 26vw;
}

/* Image */
[data-subcontext="entry"] .headline-img-wrap {
  align-content: flex-start;
}

[data-subcontext="entry"] .headline-img {
  position: relative;
  overflow: visible;
  max-width: 100%;
  margin: 0;
  border-radius: 0;
}

[data-subcontext="entry"] .headline-img img {
  border-radius: var(--radius-medium);
}

[data-subcontext="entry"] [data-style="appearance"] .headline-img-wrap {
  position: relative;
  overflow: hidden;
  padding: calc(var(--grid-gap) / 1.5) var(--mini-gap);
  border-radius: var(--radius-large);
  will-change: transform;
}

[data-subcontext="entry"] [data-style="appearance"] .headline-img {
  position: initial;
  max-width: clamp(300px, 40vw, 600px);
  margin: 0 auto;
}

/* Figcaption */
[data-subcontext="entry"] .headline-img figcaption {
  margin: calc(var(--mini-gap) / 2) 0.3vw 0 0;
  text-align: right;
}

[data-appearance="colorful"]
  [data-subcontext="entry"]
  [data-style="appearance"]
  .headline-img
  :is(figcaption, figcaption a) {
  color: var(--g-accent-color-contrast, var(--color-font-one));
}

/* RWD — Header
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 1281px) {
  [data-subcontext="entry"] [data-style="appearance"] .headline-img figcaption {
    position: absolute;
    z-index: 1;
    right: var(--mini-gap);
    bottom: calc(var(--mini-gap) / 1.25);
    max-width: calc(
      100% - calc(var(--mini-gap) / 1.25) - calc(var(--mini-gap) / 1.25)
    );
    margin: 0;
    text-align: center;
  }
}

@media (max-width: 1280px) {
  [data-subcontext="entry"][data-template] [data-headline-img],
  [data-subcontext="entry"][data-template]
    [data-headline-img]
    .headline-content,
  [data-subcontext="entry"][data-template]
    [data-headline-img]
    .headline-content.is-tags {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .headline-meta > small:first-child {
    flex-wrap: wrap;
    gap: 2px calc(var(--grid-gap) / 4);
  }

  [data-subcontext="entry"] .headline-title {
    font-size: var(--font-size-hero);
  }

  [data-subcontext="entry"] .headline-content p {
    font-size: var(--font-size-l);
  }
}

@media (max-width: 480px) {
  .headline-meta > small:first-child {
    flex-direction: column;
  }
}

/* --------------------------------------------------------------------------
   3.Table of Content
   -------------------------------------------------------------------------- */
.toc-section {
  padding: calc(var(--grid-gap) / 4);
  border-radius: var(--radius-medium);
  gap: calc(var(--grid-gap) / 6);
}

.toc-section small {
  padding-bottom: 12px;
  transform: initial;
  border-bottom: var(--border);
}

.toc-section ul {
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0;
}

.toc-section ul li a {
  text-decoration: none;
}

.toc-section ul li a:hover {
  color: var(--color-font-one);
}

.toc-section ~ :is(h1, h2, h3, h4, h5, h6)[id] {
  scroll-margin-top: 3vh;
}

/* /////// data /////// */
[data-toc-clone] {
  position: fixed;
  z-index: 999;
  width: calc(100% - calc(var(--site-gap) * 2));
  padding: 0;
  transition: transform 0.7s ease, opacity 0.7s ease;
  transform: translateY(-50vh);
  pointer-events: none;
  opacity: 0;
  background-color: transparent;
  gap: 10px;
  inset: 3vh var(--site-gap) auto;
}

[data-toc-clone="visible"] {
  transform: translateY(0);
  opacity: 1;
}

[data-toc-clone] small {
  padding: 10px 20px;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
  border-bottom: none;
  border-radius: var(--radius-full);
  background-color: var(--color-two);
}

[data-toc-clone] small:hover {
  background-color: var(--color-three);
}

div:not([data-toc-clone]) small:hover {
  transform: none;
}

[data-toc-clone] small,
[data-toc-clone] ul li {
  pointer-events: auto;
  justify-self: end;
}

[data-toc-clone] ul {
  display: none;
  padding-top: 0.8vw;
  gap: 6px;
}

[data-toc-clone][data-active] ul {
  display: grid;
  animation: slideTOC 0.3s ease;
}

[data-toc-clone] ul li {
  font-size: var(--font-size-xxs);
  padding: 4px 14px;
  border-radius: var(--radius);
  background-color: var(--color-one);
}

[data-toc-clone] ul li::before,
[data-toc-clone] ul li a,
[data-toc-clone] ul li a:hover {
  color: var(--color-font-two);
}

/* Animation
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@keyframes slideTOC {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* RWD — Table of Content
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 480px) {
  [data-toc-clone] {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   4.Content
   -------------------------------------------------------------------------- */
.post-section {
  margin-bottom: var(--grid-gap);
}

.post-content:first-child {
  margin-top: clamp(0px, 2vw, 40px);
}

.post-content :where(img, iframe, picture, video, canvas, svg) {
  display: block;
}

.post-content :where(img, picture, video, canvas, svg) {
  max-width: 100%;
  height: auto;
}

.post-content iframe {
  width: 100%;
  border: 0;
}

/* Grid */
.post-content .kg-width-wide,
.post-content .kg-content-wide > div,
.post-content blockquote.kg-blockquote-alt {
  grid-column: wide;
}

.post-content .kg-width-full {
  grid-column: full;
}

/* Margins
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content * {
  margin-block: 0;
}

.post-content > * + * {
  margin-top: 4vh;
}

.post-content > [id] + p {
  margin-block-start: 2.4vh;
}

.post-content > * + blockquote:not([class]),
.post-content > blockquote:not([class]) + *,
.post-content > blockquote:not([class]) + [id]:not(:first-child) {
  margin-block-start: 9vh;
}

.post-content > [id]:not(:first-child),
.post-content :where(.kg-card, table) + :not(.kg-card):not(table):not([id]),
.post-content
  :where(:not(.kg-card):not(table):not([id]))
  + :is(.kg-card, table),
.post-content :where(:not(.kg-card):not([id])) + .kg-card.kg-width-full,
.post-content .kg-card.kg-width-full + :where(:not(.kg-card):not([id])) {
  margin-block-start: 7vh;
}

.post-content > * + :where(hr, blockquote, iframe),
.post-content > :where(hr, blockquote, iframe) + *,
.post-content > :where(hr, blockquote, iframe) + [id]:not(:first-child) {
  margin-block-start: 8vh;
}

.post-content
  > [class*="kg-"][class*="-full"]:not([class*="-hascaption"])
  + [class*="-full"] {
  margin-top: 0;
}

.post-content > [class*="kg-"][class*="-bookmark"] + [class*="-bookmark"] {
  margin-top: 1em;
}

/* Typo
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content h1 {
  font-size: clamp(1.7em, calc(1rem + 2vw), 2.5em);
}
.post-content h2 {
  font-size: clamp(1.4em, calc(1rem + 1.5vw), 2em);
}
.post-content h3 {
  font-size: clamp(1.1em, calc(0.5rem + 1.5vw), 1.5em);
}
.post-content h4 {
  font-size: clamp(1em, calc(0.25rem + 1.5vw), 1.25em);
}
.post-content h5 {
  font-size: clamp(0.8em, 1.5vw, 1em);
}
.post-content h6 {
  font-size: clamp(0.7em, 1.2vw, 0.85em);
}

.post-content :where(h1, h2, blockquote.kg-blockquote-alt) {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-display);
  line-height: 1.2;
}

/* General
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content a {
  transition: color 0.15s ease, opacity 0.15s ease;
  text-decoration: underline;
}

.post-content a:hover {
  color: var(--ghost-accent-color);
}

/* List */
.post-content :where(ul, ol) {
  padding-inline-start: 2ch;
}

.post-content :where(li + li, li :where(ul, ol)) {
  margin-block-start: 8px;
}

.post-content ol ol li {
  list-style-type: lower-alpha;
}

.post-content ol ol ol li {
  list-style-type: lower-roman;
}

/* hr */
.post-content hr {
  width: 100%;
  height: 1px;
  border: 0;
  background-color: var(--color-three);
}

/* Table */
.post-content table {
  display: inline-block;
  overflow-x: auto;
  width: auto;
  max-width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  background-color: transparent;
  -webkit-overflow-scrolling: touch;
}

.post-content table,
.post-content table th {
  font-size: var(--font-size-xs);
}

.post-content table th {
  background-color: var(--color-two);
}

.post-content table :where(th, td) {
  display: table-cell;
  padding: 1.5vh 1ch;
}

.post-content td {
  border-bottom: var(--border);
}

.post-content :where(th:first-child, td:first-child) {
  padding-left: 1ch;
}

.post-content :where(th:last-child, td:last-child) {
  padding-right: 1ch;
}

/* Code */
.post-content pre {
  min-width: 100%;
}

.post-content pre > code {
  display: block;
  padding: 3vh 2ch;
  white-space: pre-wrap;
}

.post-content code {
  font-size: 80%;
  padding: 2px 5px;
  background-color: var(--color-two);
}

.post-content blockquote code {
  font-size: 75%;
}

.post-content :where(blockquote code, p code) {
  border-radius: 5px;
}

/* Blockquote */
.post-content blockquote {
  margin-inline-end: 0;
  margin-inline-start: 0;
}

.post-content blockquote:not([class]) {
  line-height: 1.4;
  border-inline-start: 4px solid var(--ghost-accent-color);
  padding-inline-start: 0.8em;
}

.post-content blockquote.kg-blockquote-alt {
  font-size: var(--font-size-xxl);
  font-style: normal;
  line-height: 1.2;
  padding: 0;
}

/* Figcaptions */
.post-content figcaption {
  text-align: center;
  margin-block-start: 8px;
  padding-inline: 1ch;
}

.post-content :where(figcaption, figcaption a) {
  color: var(--color-font-one);
}

.post-content figcaption a:hover {
  opacity: 0.8;
  color: currentColor;
}

/* /////// data: reset /////// */
[data-post-content]
  [class*="kg-card"]
  :is([class*="kg-"][class*="-btn"], [class*="kg-"][class*="-button"]),
[data-post-content] [class*="kg-toggle"] [class*="-heading"] {
  font-family: var(--font-family-subheading);
  font-size: var(--font-size-r);
  font-weight: var(--font-weight-regular);
}

[data-post-content]
  [class*="kg-card"]:is([class*="-header"], [class*="-signup"])
  :is([class*="kg-"][class*="-heading"], [class*="kg-"][class*="-subheading"]) {
  font-family: var(--font-family-subheading);
}

[data-post-content]
  [class*="kg-signup"]
  :is([class*="kg-"][class*="-success"], [class*="kg-"][class*="-error"]) {
  font-weight: var(--font-weight-regular);
}

[data-post-content]
  [class*="kg-card"][class*="-full"][class*="-wide"]:not([class*="-split"])
  [class*="kg-"][class*="-heading"] {
  font-size: var(--font-size-xxxl);
}

[data-post-content]
  [class*="kg-card"]:is([class*="-header"], [class*="-signup"])
  [class*="kg-"][class*="-heading"] {
  font-size: var(--font-size-xxl);
  line-height: 1.18;
}

[data-post-content]
  [class*="kg-card"][class*="-full"]:is([class*="-header"], [class*="-signup"])
  [class*="kg-"][class*="-subheading"] {
  font-size: var(--font-size-l);
  margin-block-start: 3vh;
}

[data-post-content]
  [class*="kg-card"]:is([class*="-header"], [class*="-signup"])
  [class*="kg-"][class*="-subheading"] {
  font-size: var(--font-size-m);
}

[data-post-content] [class*="kg-toggle"] [class*="-content"] {
  font-size: var(--font-size-s);
}

[data-post-content]
  [class*="kg-signup"]
  :is([class*="kg-"][class*="-success"], [class*="kg-"][class*="-error"]) {
  font-size: var(--font-size-xxs);
}

[data-post-content] [class*="kg-signup"] [class*="kg-"][class*="-disclaimer"] {
  font-size: var(--font-size-caption);
  opacity: var(--opacity-caption);
}

/* General */
[data-post-content]
  [class*="kg-card"][class*="-full"][class*="-wide"]
  [class*="-content"] {
  padding-right: var(--grid-gap);
  padding-left: var(--grid-gap);
}

[data-post-content]
  [class*="kg-signup"]
  :is([class*="kg-"][class*="-input"], [class*="kg-"][class*="-fields"]) {
  background-color: var(--color-body);
}

[data-post-content] [class*="kg-signup"] [class*="kg-"][class*="-fields"] {
  padding: calc(var(--mini-gap) / 3);
  border: none;
}

/* Radius */
[data-post-content]
  [class*="kg-card"]
  :is(
    [class*="kg-"][class*="-btn"],
    [class*="kg-"][class*="-button"],
    [class*="kg-"][class*="-input"],
    [class*="kg-"][class*="-fields"]
  ) {
  border-radius: var(--radius-full);
}

[data-post-content] > pre > code,
[data-post-content]
  > [class*="kg-card"]:is(
    [class*="-signup"],
    [class*="-header"],
    [class*="-cta"],
    [class*="-callout"],
    [class*="-audio"],
    [class*="-toggle"],
    [class*="-callout"]
  ):not([class*="-full"]),
[data-post-content]
  [class*="kg-card"]
  [class*="kg-"][class*="-container"]:not([class*="-cta"], [class*="-gallery"]),
[data-post-content]
  [class*="kg-card"]:is(
    [class*="-image"]:not([class*="-full"], [class*="-cta"]),
    [class*="-gallery"]
  )
  img {
  overflow: hidden;
  border-radius: var(--radius-medium);
}

[data-post-content] [class*="kg-file"] [class*="-icon"]::before,
[data-post-content]
  [class*="kg-card"]:is([class*="-audio"], [class*="-product"])
  :is([class*="-thumbnail"], [class*="-image"]),
[data-post-content] [class*="kg-card"][class*="-cta"] [class*="-image"] img {
  border-radius: var(--radius);
}

/* Image & Embed */
[data-post-content]
  [class*="kg-card"][class*="-image"]:not([class*="-gallery"]),
[data-post-content] [class*="kg-card"][class*="-embed"] > div > * {
  margin-right: auto;
  margin-left: auto;
}

/* Bookmark */
[data-post-content] [class*="kg-bookmark"] [class*="-container"] {
  transition: opacity 0.3s ease;
}

[data-post-content] [class*="kg-bookmark"] [class*="-container"]:hover {
  opacity: 0.8;
}

/* Audio */
[data-post-content] [class*="kg-audio"] svg {
  fill: var(--color-one);
}

[data-post-content] [class*="kg-audio"] [class*="-thumbnail"] svg {
  fill: var(--ghost-accent-color-contrast, var(--color-one));
}

[data-post-content] [class*="kg-audio"] [class*="-rate"] {
  color: var(--color-font-one);
}

/* Background */
[data-post-content] [class*="kg-audio-card"],
[data-post-content]
  [class*="kg-card"]
  :is(
    [class*="-bookmark"] [class*="-container"],
    [class*="-product"] [class*="-container"],
    [class*="-file"] [class*="-container"]
  ) {
  color: var(--color-one);
  border: none;
  background-color: var(--color-two);
  box-shadow: none;
}

/* Dynamic color */
[data-post-content]
  [class*="kg-"]
  :is(
    [class*="kg-"][class*="-btn"],
    [class*="-product"] [class*="kg-"][class*="-button"],
    [class*="kg-"][class*="-signup"][class*="-button"].kg-style-accent
  ) {
  color: var(--ghost-accent-color-contrast) !important;
}

/* --------------------------------------------------------------------------
   5.CTA
   -------------------------------------------------------------------------- */
.cta-section h2 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-display);
}

/* /////// data /////// */
[data-teaser="true"] .post-content {
  position: relative;
}

[data-teaser="true"] .post-content::after {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  max-height: 300px;
  content: "";
  pointer-events: none;
  opacity: 1;
  background-color: var(--color-body);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 0, 0, 0.013) 8.1%,
    rgba(0, 0, 0, 0.049) 15.5%,
    rgba(0, 0, 0, 0.104) 22.5%,
    rgba(0, 0, 0, 0.175) 29%,
    rgba(0, 0, 0, 0.259) 35.3%,
    rgba(0, 0, 0, 0.352) 41.2%,
    rgba(0, 0, 0, 0.45) 47.1%,
    rgba(0, 0, 0, 0.55) 52.9%,
    rgba(0, 0, 0, 0.648) 58.8%,
    rgba(0, 0, 0, 0.741) 64.7%,
    rgba(0, 0, 0, 0.825) 71%,
    rgba(0, 0, 0, 0.896) 77.5%,
    rgba(0, 0, 0, 0.951) 84.5%,
    rgba(0, 0, 0, 0.987) 91.9%,
    black
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 0, 0, 0.013) 8.1%,
    rgba(0, 0, 0, 0.049) 15.5%,
    rgba(0, 0, 0, 0.104) 22.5%,
    rgba(0, 0, 0, 0.175) 29%,
    rgba(0, 0, 0, 0.259) 35.3%,
    rgba(0, 0, 0, 0.352) 41.2%,
    rgba(0, 0, 0, 0.45) 47.1%,
    rgba(0, 0, 0, 0.55) 52.9%,
    rgba(0, 0, 0, 0.648) 58.8%,
    rgba(0, 0, 0, 0.741) 64.7%,
    rgba(0, 0, 0, 0.825) 71%,
    rgba(0, 0, 0, 0.896) 77.5%,
    rgba(0, 0, 0, 0.951) 84.5%,
    rgba(0, 0, 0, 0.987) 91.9%,
    black
  );
}

/* --------------------------------------------------------------------------
   6.Share
   -------------------------------------------------------------------------- */
.share-wrap {
  justify-content: space-between;
  padding: calc(var(--grid-gap) / 3) calc(var(--grid-gap) / 2);
  border-radius: var(--radius-medium);
}

.share-item {
  display: flex;
  align-self: center;
}

.share-item svg {
  fill: var(--color-one);
}

/* Copy link
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.share-item.link {
  cursor: pointer;
}

.share-wrap + span.link-active {
  width: auto;
  margin-top: var(--mini-gap);
  padding: 0.3em 1em;
  text-align: center;
  color: var(--color-font-black);
  border-radius: var(--radius-full);
  background-color: var(--alert-green);
  justify-self: center;
}

/* /////// data /////// */
[data-copy-active="false"] {
  display: none;
}

[data-copy-active="true"] {
  display: inline-block;
}

/* --------------------------------------------------------------------------
   7.Navigation
   -------------------------------------------------------------------------- */
.navigation-wrap {
  gap: calc(var(--grid-gap) * 2);
  grid-template-columns: repeat(2, 1fr);
}

.navigation-title {
  font-family: var(--font-family-subheading);
}

/* /////// data /////// */
[data-order="older"] {
  text-align: right;
  grid-column: 2;
}

[data-order="newer"] {
  text-align: left;
}

/* RWD — Navigation
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 768px) {
  .navigation-wrap {
    gap: calc(var(--grid-gap) / 2);
  }

  .navigation-title {
    font-size: var(--font-size-l);
  }
}

/* --------------------------------------------------------------------------
   8.Switch
   -------------------------------------------------------------------------- */
.tiers-switch,
.tiers-switch label {
  align-items: center;
}

.tiers-switch label {
  flex-shrink: 0;
  justify-content: end;
  width: auto;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.tiers-switch input {
  position: absolute;
  z-index: 2;
  width: 0;
  height: 0;
  margin: 0;
  opacity: 0;
}

.tiers-switch input:focus-visible + span.slider {
  outline: var(--outline);
}

.tiers-switch span.slider {
  position: relative;
  width: var(--switch-size);
  height: calc(var(--switch-size) / 2);
  margin: 0 10px;
  border-radius: var(--radius-full);
  background-color: var(--color-one);
}

.tiers-switch span.slider::before {
  position: absolute;
  bottom: calc(var(--switch-size) / 12);
  left: calc(var(--switch-size) / 12);
  width: calc(var(--switch-size) / 3);
  height: calc(var(--switch-size) / 3);
  content: "";
  transition: transform 0.4s cubic-bezier(0.5, 0, 0.2, 1);
  border-radius: var(--radius-full);
  background-color: var(--color-body);
}

.tiers-switch :is(span.monthly, span.yearly) {
  transition: opacity 0.3s ease-in-out;
}

/* /////// data /////// */
[data-switch="monthly"] span.yearly,
[data-switch="yearly"] span.monthly {
  opacity: 0.5;
}

[data-switch="yearly"] span.slider::before {
  transform: translateX(calc(var(--switch-size) / 2));
}

[data-switch="yearly"] [data-period="monthly"],
[data-switch="monthly"] [data-period="yearly"],
[data-switch="monthly"] [data-discount] {
  display: none;
}

/* RWD — Switch
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 480px) {
  .tiers-switch small:first-child {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   9.Tiers 'Focus'
   -------------------------------------------------------------------------- */
.focus-tab,
.focus-panel > div {
  border-radius: var(--radius-medium);
}

.focus-wrap {
  position: relative;
  padding: calc(var(--grid-gap) / 2);
  border-radius: var(--radius-big);
  gap: calc(var(--grid-gap) / 2);
  grid-template-columns: var(--sidebar) 1fr;
}

/* Tabs
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.focus-tabs {
  z-index: 2;
  align-content: start;
  gap: calc(var(--grid-gap) / 6);
}

.focus-tab > div {
  align-self: start;
  padding: max(15px, 1vw);
  cursor: pointer;
  text-align: left;
  border: none;
  gap: calc(var(--grid-gap) / 6);
  grid-column: 1;
  justify-items: start;
}

.focus-tab {
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.focus-tab[aria-selected="false"] {
  background-color: var(--color-body);
}

.focus-tab[aria-selected="true"] span.trial {
  transition: color 0.2s ease;
  color: var(--color-font-one);
}

.focus-tab[aria-selected="true"] span.trial::after {
  position: absolute;
  z-index: -1;
  content: "";
  transition: background-color 0.2s ease;
  border-radius: var(--radius-full);
  background-color: var(--color-body);
  inset: 0;
}

/* Title & paragraph */
.focus-tab-title {
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.focus-tab-title + p {
  display: -webkit-box;
  overflow: hidden;
  width: 100%;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.focus-tab :is(h2, p) {
  transition: color 0.2s ease;
}

.focus-tab[aria-selected="false"] :is(h2, p) {
  color: var(--color-font-one);
}

/* Panel
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.focus-panel > div {
  z-index: 2;
  overflow: hidden;
}

.focus-panel-content {
  padding: max(25px, 3vw) max(15px, 3vw) max(45px, 4vw);
  border-radius: var(--radius-small);
  background-color: var(--color-body);
  gap: calc(var(--grid-gap) / 2.6);
}

.focus-panel-title {
  font-weight: var(--font-weight-display);
}

/* Prices */
.focus-prices {
  position: relative;
  gap: calc(var(--grid-gap) / 8);
  grid-template-columns: repeat(2, 1fr);
}

.focus-price {
  justify-content: center;
}

.focus-price::before {
  transition: background-color 0.2s ease;
}

.focus-price:first-of-type:last-of-type {
  pointer-events: none;
  color: var(--color-font-one);
  grid-column: span 2;
}

.focus-price:first-of-type:last-of-type::before {
  background-color: var(--color-three);
}

.focus-price :is(span, strong) {
  transition: color 0.2s ease;
}

.focus-price[aria-selected="false"][data-price],
.focus-price[aria-selected="false"][data-price] :is(span, strong) {
  color: var(--color-font-one);
}

.focus-price[aria-selected="false"]::before,
.focus-price[aria-selected="false"]:hover::before {
  background-color: var(--color-three);
}

.focus-price[aria-selected="true"]::before {
  background-color: var(--ghost-accent-color);
}

/* /////// data /////// */
[data-template="focus"] [data-panel="false"],
[data-template="focus"] [data-checkout="false"] {
  display: none;
}

/* RWD — Tiers 'Focus'
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 1280px) {
  .focus-wrap {
    gap: calc(var(--grid-gap) / 3);
    grid-template-columns: 1fr;
  }

  .focus-tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .focus-tab {
    align-self: stretch;
  }

  .focus-tabs,
  .focus-tab > div {
    gap: calc(var(--grid-gap) / 4);
  }

  .focus-panel-content {
    gap: calc(var(--grid-gap) / 1.5);
  }

  .focus-price:first-of-type:last-of-type {
    width: auto;
    padding-right: 2em;
    padding-left: 2em;
    justify-self: start;
  }
}

@media (max-width: 1024px) {
  .focus-price:first-of-type:last-of-type {
    justify-self: center;
  }
}

@media (max-width: 768px) {
  .focus-prices {
    gap: calc(var(--grid-gap) / 3);
  }

  .focus-price {
    grid-column: span 2;
  }

  .focus-tab p,
  .focus-prices > span {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   10.Tiers 'Cards'
   -------------------------------------------------------------------------- */
.cards-wrap {
  position: relative;
  overflow: hidden;
  padding: calc(var(--grid-gap) / 2);
  border-radius: var(--radius-big);
  gap: calc(var(--grid-gap) / 3);
}

/* Item
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.card-item {
  flex: 1 0 max(280px, 30%);
  max-width: 100%;
  padding: calc(var(--grid-gap) / 3) max(14px, 1.8vw) max(14px, 1.8vw);
  border-radius: var(--radius-small);
  background-color: var(--color-body);
  gap: calc(var(--grid-gap) / 1.5);
  grid-template-rows: 1fr auto;
}

.card-item > div:first-of-type {
  align-self: start;
  gap: calc(var(--grid-gap) / 3.4);
}

.card-item h2 {
  margin: calc(var(--mini-gap) / 2) 0;
}

/* Buttons */
.card-btns {
  text-align: center;
}

.card-btns > a {
  width: 100%;
  padding: 0.55em calc(var(--mini-gap) * 2);
}

.card-btns > a + span {
  display: block;
  margin-top: calc(var(--mini-gap) / 2);
  opacity: var(--opacity-caption);
}

/* /////// data /////// */
[data-subcontext="cta"] {
  padding: max(15px, 3vw);
  border-radius: var(--radius-big);
}

[data-subcontext="cta"] .cards-wrap {
  padding: 0;
  border-radius: 0;
}

[data-subcontext="cta"] .card-item {
  flex-basis: max(280px, 40%);
  gap: calc(var(--grid-gap) / 3);
}

[data-sidebar="false"] .card-item {
  flex-basis: max(280px, 40%);
}

/* --------------------------------------------------------------------------
   11.Tiers 'Choice'
   -------------------------------------------------------------------------- */
.choice-wrap {
  position: relative;
  overflow: hidden;
  padding: calc(var(--grid-gap) / 2);
  border-radius: var(--radius-big);
  gap: calc(var(--grid-gap) / 2);
}

.choice-tabs {
  gap: calc(var(--grid-gap) / 2);
}

.choice-tab {
  padding-top: 1.8vw;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
  border: 7px solid var(--color-body);
  gap: calc(var(--grid-gap) / 2.4);
  grid-template-rows: 1fr auto;
  will-change: transform;
}

.choice-tab:hover {
  border-color: var(--ghost-accent-color);
}

.choice-tab > div + div {
  align-self: start;
  gap: calc(var(--grid-gap) / 3.4);
}

.choice-checkout {
  margin-top: var(--mini-gap);
  text-align: center;
  grid-column: 1/-1;
}

.choice-btn {
  padding: max(10px, 1.2vw) max(30px, 4vw);
}

/* /////// data /////// */
[data-tab="true"].choice-tab {
  border-color: var(--ghost-accent-color);
}

[data-template="choice"] [data-checkout="false"] {
  display: none;
}

/* --------------------------------------------------------------------------
   12.Answers
   -------------------------------------------------------------------------- */
div:not(.answers-section) + .members-section {
  display: none;
}

.answers-content {
  margin-top: max(30px, 4vw);
  gap: calc(var(--grid-gap) / 3);
}

/* Card
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.answers-content .kg-card.kg-toggle-card {
  margin: 0;
  padding: 0 0 calc(var(--grid-gap) / 3);
  border-radius: 0;
  box-shadow: none;
}

.answers-content .kg-card.kg-toggle-card a {
  text-decoration: underline;
}

.answers-content .kg-card.kg-toggle-card:not(:last-of-type) {
  border-bottom: var(--border);
}

/* Heading
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.answers-content .kg-card.kg-toggle-card .kg-toggle-heading {
  position: relative;
}

.answers-content .kg-card.kg-toggle-card .kg-toggle-heading-text {
  font-family: var(--font-family-subheading);
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-regular);
  max-width: 85%;
}

.answers-content .kg-card.kg-toggle-card .kg-toggle-content p {
  font-size: var(--font-size-r);
  max-width: 1280px;
  margin-bottom: calc(var(--mini-gap) * 1.5);
}

/* Arrow
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.answers-content .kg-card.kg-toggle-card .kg-toggle-card-icon {
  position: absolute;
  top: calc(50% - 13px);
  right: 0;
  cursor: pointer;
}

.answers-content .kg-card.kg-toggle-card .kg-toggle-card-icon,
.answers-content .kg-card.kg-toggle-card .kg-toggle-card-icon svg {
  --min: 20;
  --max: 26;
  width: clamp(
    calc(var(--min) * 1px),
    calc(
      (((var(--max) - var(--min)) / var(--scale-scope)) * 100 * 1vw) +
        (
          (
              var(--min) -
                (
                  (var(--max) - var(--min)) / var(--scale-scope) *
                    var(--scale-min)
                )
            ) * 1px
        )
    ),
    calc(var(--max) * 1px)
  );
  height: clamp(
    calc(var(--min) * 1px),
    calc(
      (((var(--max) - var(--min)) / var(--scale-scope)) * 100 * 1vw) +
        (
          (
              var(--min) -
                (
                  (var(--max) - var(--min)) / var(--scale-scope) *
                    var(--scale-min)
                )
            ) * 1px
        )
    ),
    calc(var(--max) * 1px)
  );
  color: var(--color-one);
}

/* /////// data /////// */
[data-kg-toggle-state="open"] .kg-toggle-card-icon {
  transform: rotate(0);
}

/* RWD — Answers
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 480px) {
  .answers-content .kg-card.kg-toggle-card .kg-toggle-heading-text {
    font-size: var(--font-size-m);
  }
}