/* //////////////////////////////////////////////////////////////////////////
   
   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 .15s ease-out .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 .2s ease-out;
   background-color: var(--color-one);
   will-change: width;
}

.g-progress[value]::-moz-progress-bar {
   transition: width .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: .3em .8em;
   border-radius: var(--radius-full);
}

.g-tiers span.symbol {
   font-size: 85%;
   font-weight: var(--font-weight-regular);
   top: -.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: .3em .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 .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: center;
}

[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) .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 .7s ease, opacity .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 .3s ease, background-color .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: .8vw;
   gap: 6px;
}

[data-toc-clone][data-active] ul {
   display: grid;
   animation: slideTOC .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(.5rem + 1.5vw), 1.5em) }
.post-content h4 { font-size: clamp(1em, calc(.25rem + 1.5vw), 1.25em) }
.post-content h5 { font-size: clamp(.8em, 1.5vw, 1em) }
.post-content h6 { font-size: clamp(.7em, 1.2vw, .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 .15s ease, opacity .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: .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: .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 .3s ease;
}

[data-post-content] [class*="kg-bookmark"] [class*="-container"]:hover {
   opacity: .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,.013)8.1%,rgba(0,0,0,.049)15.5%,rgba(0,0,0,.104)22.5%,rgba(0,0,0,.175)29%,rgba(0,0,0,.259)35.3%,rgba(0,0,0,.352)41.2%,rgba(0,0,0,.45)47.1%,rgba(0,0,0,.55)52.9%,rgba(0,0,0,.648)58.8%,rgba(0,0,0,.741)64.7%,rgba(0,0,0,.825)71%,rgba(0,0,0,.896)77.5%,rgba(0,0,0,.951)84.5%,rgba(0,0,0,.987)91.9%,black);
   mask-image: linear-gradient(to bottom,transparent,rgba(0,0,0,.013)8.1%,rgba(0,0,0,.049)15.5%,rgba(0,0,0,.104)22.5%,rgba(0,0,0,.175)29%,rgba(0,0,0,.259)35.3%,rgba(0,0,0,.352)41.2%,rgba(0,0,0,.45)47.1%,rgba(0,0,0,.55)52.9%,rgba(0,0,0,.648)58.8%,rgba(0,0,0,.741)64.7%,rgba(0,0,0,.825)71%,rgba(0,0,0,.896)77.5%,rgba(0,0,0,.951)84.5%,rgba(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: .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 .4s cubic-bezier(.5, 0, .2, 1);
   border-radius: var(--radius-full);
   background-color: var(--color-body);
}

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

/* /////// data /////// */
[data-switch="monthly"] span.yearly,
[data-switch="yearly"] span.monthly {
   opacity: .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 .2s ease, background-color .2s ease;
}

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

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

.focus-tab[aria-selected="true"] span.trial::after {
   position: absolute;
   z-index: -1;
   content: '';
   transition: background-color .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 .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 .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 .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: .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 .2s ease, border-color .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);
   }

}