coveragebook_components 0.11.0 → 0.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 29730794e3c5501354de9f57c07423e1f9fd1ec80db368092acaba185b5ba0c5
-  data.tar.gz: 9ab94ad3c96f43b6562b8b5bab40db8255cd38c11e1cc44ae9481836a64dec06
+  metadata.gz: bbeeed5148a322ea32398e0521d72f398dfdcd08cfb6bee476c32bd3df7fbc55
+  data.tar.gz: 36b58e768841a56e6d50eb66bf1d754a25b4730e9601b6030bbeb272ffa70caf
 SHA512:
-  metadata.gz: ca177f8da7beb576fe8f9506826738a756cbefb8247c32e5801a1bb46dafea18966912e2e5ee9007bb1fafc6bbcbeda479ac6ff78dfebea8786a55748408e2f4
-  data.tar.gz: 14fdf4491b2032639fc4865c5c6a9fcf0134ffebe28a260bd6be8e58c3237e5e79afc28a4ed8b2686dad3b2a650cd71414edf0c4837ec3f64fe5812b07e22a4a
+  metadata.gz: 96aca4f58f5f4d69d8d7b1a004d1f6e07789ab8d33b4860c6a4d631e9f3724013f104434adb1cfaf212aa57e1f50d9f6353c46f4abcfbaf8c425cce1cf2b6e64
+  data.tar.gz: 3045072e7e9230b73662d16169b35e2325ba4b1ee3c497a8a5b8f1867219d7a1e45ff85205c04255950ba25328662c5c302f3f0301d37e333340348721da3a51

data/app/assets/build/coco/app.css

@@ -776,6 +776,26 @@ select{
   overflow: hidden;
   border-radius: 9999px;
 }
+@supports (aspect-ratio: 1 / 1){
+
+  [data-coco][data-component="avatar"]{
+    aspect-ratio: 1 / 1;
+  }
+}
+@supports not (aspect-ratio: 1 / 1){
+
+  [data-coco][data-component="avatar"]::before{
+    content: "";
+    float: left;
+    padding-top: calc(100% / (1 / 1));
+  }
+
+  [data-coco][data-component="avatar"]::after{
+    clear: left;
+    content: "";
+    display: block;
+  }
+}
 [data-coco][data-component="avatar"] img{
   width: 100%;
   border-radius: 9999px;
@@ -796,6 +816,43 @@ select{
   height: 2rem;
   width: 2rem;
 }
+[data-coco][data-component="avatar"][data-size="full"]{
+  height: 100%;
+  width: 100%;
+}
+[data-coco][data-component="badge"]{
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  border-radius: 0.5rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+    width: -moz-min-content;
+    width: min-content;
+}
+[data-coco][data-component="badge"] .badge-icon{
+  margin-right: 0.25rem;
+}
+[data-coco][data-component="badge"][data-size="sm"]{
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 16px;
+}
+[data-coco][data-component="badge"][data-size="md"]{
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+}
 .coco-button-wrapper{
   display: contents !important;
 }
@@ -889,6 +946,12 @@ select{
 [data-coco].coco-button.with-icon[data-collapsed="true"] .button-content {
         display: none;
       }
+/* Floating */
+[data-coco].coco-button[data-floating="true"]{
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 /* Themes */
 [data-coco].coco-button[data-theme]{
   overflow: hidden;
@@ -3202,6 +3265,206 @@ select{
     }
 [data-coco][data-component="stack"] {
   }
+[data-coco][data-component="app-contact-callout"]{
+  border-radius: 1rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 231 226 / var(--tw-bg-opacity));
+  container-type: inline-size;
+}
+[data-coco][data-component="app-contact-callout"] .callout-container{
+  width: 100%;
+  -moz-column-gap: 1.5rem;
+       column-gap: 1.5rem;
+  padding: 1.5rem;
+}
+[data-coco][data-component="app-contact-callout"] .callout-avatar{
+  float: right;
+  margin-left: 1.5rem;
+  flex: none;
+  align-self: flex-start;
+      width: 100px;
+}
+[data-coco][data-component="app-contact-callout"] .callout-blurb > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+[data-coco][data-component="app-contact-callout"] .callout-blurb{
+  font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+}
+[data-coco][data-component="app-contact-callout"] .callout-blurb h1,
+      [data-coco][data-component="app-contact-callout"] .callout-blurb h2,
+      [data-coco][data-component="app-contact-callout"] .callout-blurb h3,
+      [data-coco][data-component="app-contact-callout"] .callout-blurb h4,
+      [data-coco][data-component="app-contact-callout"] .callout-blurb h5,
+      [data-coco][data-component="app-contact-callout"] .callout-blurb h6{
+  font-family: merriweather, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 20px;
+}
+[data-coco][data-component="app-contact-callout"] .callout-action{
+  margin-top: 1rem;
+}
+[data-coco][data-component="app-contact-callout"] .callout-tel,
+    [data-coco][data-component="app-contact-callout"] .callout-number{
+  display: flex;
+  align-items: center;
+}
+[data-coco][data-component="app-contact-callout"] .callout-tel{
+  margin-top: 1rem;
+  -moz-column-gap: 1rem;
+       column-gap: 1rem;
+}
+[data-coco][data-component="app-contact-callout"] .callout-tel .coco-icon{
+  display: none;
+}
+[data-coco][data-component="app-contact-callout"] .callout-numbers{
+  -moz-column-gap: 2.5rem;
+       column-gap: 2.5rem;
+}
+[data-coco][data-component="app-contact-callout"] .callout-number{
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+  white-space: nowrap;
+}
+@container (min-width: 600px) {
+      [data-coco][data-component="app-contact-callout"] .callout-container{
+    display: flex;
+    align-items: center;
+  }
+
+      [data-coco][data-component="app-contact-callout"] .callout-numbers{
+    display: flex;
+    align-items: center;
+  }
+        [data-coco][data-component="app-contact-callout"] .callout-tel .coco-icon{
+    display: flex;
+  }
+
+      [data-coco][data-component="app-contact-callout"] .callout-avatar{
+    float: none;
+    margin-left: 0px;
+  }
+    }
+@container (min-width: 800px) {
+      [data-coco][data-component="app-contact-callout"] .callout-container{
+    -moz-column-gap: 1.5rem;
+         column-gap: 1.5rem;
+  }
+
+      [data-coco][data-component="app-contact-callout"] .callout-main{
+    display: flex;
+    width: 100%;
+    align-items: center;
+    -moz-column-gap: 1.5rem;
+         column-gap: 1.5rem;
+  }
+
+      [data-coco][data-component="app-contact-callout"] .callout-action{
+    margin-left: auto;
+    margin-top: 0px;
+    flex: none;
+        width: -moz-min-content;
+        width: min-content;
+  }
+
+      [data-coco][data-component="app-contact-callout"] .callout-avatar{
+    flex: none;
+    align-self: center;
+        width: 120px;
+  }
+    }
+@container (min-width: 1100px) {
+      [data-coco][data-component="app-contact-callout"] .callout-container{
+    -moz-column-gap: 2.5rem;
+         column-gap: 2.5rem;
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
+      [data-coco][data-component="app-contact-callout"] .callout-main{
+    -moz-column-gap: 2.5rem;
+         column-gap: 2.5rem;
+  }
+
+      [data-coco][data-component="app-contact-callout"] .callout-avatar {
+        width: 140px;
+      }
+
+  [data-coco][data-component="app-contact-callout"] .callout-blurb{
+    font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 28px;
+  }
+
+  [data-coco][data-component="app-contact-callout"] .callout-blurb h1,
+        [data-coco][data-component="app-contact-callout"] .callout-blurb h2,
+        [data-coco][data-component="app-contact-callout"] .callout-blurb h3,
+        [data-coco][data-component="app-contact-callout"] .callout-blurb h4,
+        [data-coco][data-component="app-contact-callout"] .callout-blurb h5,
+        [data-coco][data-component="app-contact-callout"] .callout-blurb h6{
+    font-family: merriweather, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 24px;
+  }
+    }
+[data-coco][data-component="app-faqs"]{
+  container-type: inline-size;
+}
+[data-coco][data-component="app-faqs"] .faqs-entries > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+[data-coco][data-component="app-faqs"] .faqs-entry {
+      -moz-column-break-inside: avoid;
+           break-inside: avoid;
+    }
+[data-coco][data-component="app-faqs"] .faqs-question{
+  margin-bottom: 0.5rem;
+  font-family: merriweather, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 20px;
+}
+[data-coco][data-component="app-faqs"] .faqs-answer > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+[data-coco][data-component="app-faqs"] .faqs-answer{
+  font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 16px;
+  line-height: 24px;
+}
+[data-coco][data-component="app-faqs"] .faqs-answer a[href]{
+  --tw-text-opacity: 1;
+  color: rgb(26 136 113 / var(--tw-text-opacity));
+}
+[data-coco][data-component="app-faqs"] .faqs-answer a[href]:active{
+  --tw-text-opacity: 1;
+  color: rgb(13 97 89 / var(--tw-text-opacity));
+}
+@container (min-width: 700px) {
+      [data-coco][data-component="app-faqs"] .faqs-entries {
+        -moz-columns: 2;
+             columns: 2;
+        -moz-column-gap: 2rem;
+             column-gap: 2rem;
+      }
+    }
+@container (min-width: 900px) {
+      [data-coco][data-component="app-faqs"] .faqs-entries {
+        -moz-column-gap: 3rem;
+             column-gap: 3rem;
+      }
+    }
 [data-coco][data-component="app-header"]{
   container-type: inline-size;
 }
@@ -3456,6 +3719,132 @@ select{
   --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+[data-coco][data-component="app-plan-picker"]{
+  container-type: inline-size;
+}
+[data-coco][data-component="app-plan-picker"] .plan-picker-controls > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+[data-coco][data-component="app-plan-picker"] .plan-picker-controls > *{
+  margin-left: auto;
+  margin-right: auto;
+}
+[data-coco][data-component="app-plan-picker"] .plan-picker-controls .plan-picker-view-toggle{
+  display: none;
+}
+[data-coco][data-component="app-plan-picker"] .plan-picker-slider{
+  position: relative;
+}
+[data-coco][data-component="app-plan-picker"] .plan-picker-slider-container{
+  overflow-x: clip;
+}
+[data-coco][data-component="app-plan-picker"] .plan-picker-plans{
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  row-gap: 2rem;
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+[data-coco][data-component="app-plan-picker"] .plan-picker-view-toggle-mobile .coco-button{
+  margin-left: auto;
+  margin-right: auto;
+}
+[data-coco][data-component="app-plan-picker"] .plan-picker-pagination{
+  display: none;
+}
+[data-coco][data-component="app-plan-picker"] [data-component="app-plan-card"]{
+  height: 100%;
+}
+[data-coco][data-component="app-plan-picker"].slider-active .plan-picker-pagination{
+  position: absolute;
+  top: 50%;
+  left: 0px;
+  right: 0px;
+  display: flex;
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  align-items: center;
+  justify-content: space-between;
+}
+@container (min-width: 420px) {
+      [data-coco][data-component="app-plan-picker"] .plan-picker-controls{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+      [data-coco][data-component="app-plan-picker"] .plan-picker-controls > :not([hidden]) ~ :not([hidden]){
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0px * var(--tw-space-y-reverse));
+  }
+
+        [data-coco][data-component="app-plan-picker"] .plan-picker-controls > *{
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+
+      [data-coco][data-component="app-plan-picker"] .plan-picker-plans{
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    -moz-column-gap: 1rem;
+         column-gap: 1rem;
+  }
+    }
+@container (min-width: 984px) {
+        [data-coco][data-component="app-plan-picker"] .plan-picker-controls .plan-picker-view-toggle{
+    display: block;
+  }
+
+      [data-coco][data-component="app-plan-picker"] .plan-picker-plans{
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    -moz-column-gap: 1.5rem;
+         column-gap: 1.5rem;
+  }
+
+      [data-coco][data-component="app-plan-picker"] .plan-picker-view-toggle-mobile{
+    display: none;
+  }
+        [data-coco][data-component="app-plan-picker"].slider-active .plan-picker-plans {
+          grid-template-columns: repeat(20, calc((100% - 4.5rem) / 4));
+        }
+        [data-coco][data-component="app-plan-picker"].slider-active .plan-picker-slider {
+          padding-left: 72px;
+          padding-right: 72px;
+        }
+    }
+@container (min-width: 1200px) {
+      [data-coco][data-component="app-plan-picker"] .plan-picker-plans{
+    -moz-column-gap: 2rem;
+         column-gap: 2rem;
+  }
+        [data-coco][data-component="app-plan-picker"].slider-active .plan-picker-plans {
+          grid-template-columns: repeat(20, calc((100% - 6rem) / 4));
+        }
+    }
+@media (min-width: 1540px) {
+        [data-coco][data-component="app-plan-picker"].slider-active .plan-picker-pagination{
+    position: absolute;
+    top: 50%;
+    left: 0px;
+    right: 0px;
+    display: flex;
+    --tw-translate-y: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    align-items: center;
+    justify-content: space-between;
+          margin-left: -72px;
+          margin-right: -72px;
+          width: calc(100% + 144px);
+  }
+
+        [data-coco][data-component="app-plan-picker"].slider-active .plan-picker-slider {
+          padding-left: 0;
+          padding-right: 0;
+        }
+    }
 [data-coco][data-component="app-sidebar-nav-item"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
@@ -3477,6 +3866,12 @@ select{
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
+[data-coco][data-component="app-sidebar-nav-item"].\!active{
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
 [data-coco][data-component="app-sidebar-nav-item"] .nav-item-icon{
   margin-left: auto;
   margin-right: auto;
@@ -5634,6 +6029,237 @@ select{
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+[data-coco][data-component="app-option-bar"]{
+  border-width: 1px;
+  border-color: rgba(0, 12, 39, 0.1);
+  background-color: rgba(0, 12, 39, 0.06);
+  padding: 0.25rem;
+
+    border-radius: 44px;
+    width: -moz-fit-content;
+    width: fit-content;
+}
+[data-coco][data-component="app-option-bar"] .option-bar-buttons{
+  display: flex;
+  align-items: center;
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+      width: -moz-fit-content;
+      width: fit-content;
+}
+[data-coco][data-component="app-option-bar"] .option-bar-buttons .coco-button{
+  border-style: none !important;
+}
+[data-coco][data-component="app-option-bar"] .option-bar-buttons .selected{
+  pointer-events: none;
+}
+[data-coco][data-component="app-plan-card"]{
+  position: relative;
+  max-width: 32rem;
+  border-radius: 1rem;
+  border-width: 1px;
+  border-color: rgba(0, 12, 39, 0.18);
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  container-type: inline-size;
+    min-width: 192px;
+}
+[data-coco][data-component="app-plan-card"] .plan-container > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
+}
+[data-coco][data-component="app-plan-card"] .plan-container{
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+[data-coco][data-component="app-plan-card"] .plan-badge{
+  position: absolute;
+  top: 0px;
+  left: 1.25rem;
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+[data-coco][data-component="app-plan-card"] .plan-promo{
+  --tw-text-opacity: 1;
+  color: rgb(26 136 113 / var(--tw-text-opacity));
+  font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 16px;
+}
+[data-coco][data-component="app-plan-card"] .plan-header > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+}
+[data-coco][data-component="app-plan-card"] .plan-name{
+  font-family: merriweather, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 30px;
+}
+[data-coco][data-component="app-plan-card"] .plan-price{
+  font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+}
+[data-coco][data-component="app-plan-card"] .plan-info *{
+  font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 14px;
+  line-height: 20px;
+}
+[data-coco][data-component="app-plan-card"] .plan-benefits > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+[data-coco][data-component="app-plan-card"] .plan-benefits{
+  border-top-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+[data-coco][data-component="app-plan-card"] .plan-benefit{
+  display: flex;
+  font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 16px;
+}
+[data-coco][data-component="app-plan-card"] .plan-benefit .coco-icon{
+  margin-right: 0.25rem;
+  margin-top: 0.125rem;
+  --tw-text-opacity: 1;
+  color: rgb(26 136 113 / var(--tw-text-opacity));
+}
+[data-coco][data-component="app-plan-card"] .plan-benefit-detail{
+  flex-grow: 1;
+}
+[data-coco][data-component="app-plan-card"][data-active="true"]{
+  --tw-border-opacity: 1;
+  border-color: rgb(26 136 113 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 231 226 / var(--tw-bg-opacity));
+}
+@container (min-width: 230px) {
+      [data-coco][data-component="app-plan-card"] .plan-container > :not([hidden]) ~ :not([hidden]){
+    --tw-space-y-reverse: 0;
+    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+  }
+      [data-coco][data-component="app-plan-card"] .plan-container{
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    padding-top: 2rem;
+  }
+
+      [data-coco][data-component="app-plan-card"] .plan-badge{
+    left: 1.5rem;
+  }
+
+  [data-coco][data-component="app-plan-card"] .plan-name{
+    font-family: merriweather, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+    font-weight: 700;
+    font-size: 28px;
+    line-height: 36px;
+  }
+
+      [data-coco][data-component="app-plan-card"] .plan-benefits{
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+    }
+@container (min-width: 280px) {
+      [data-coco][data-component="app-plan-card"] .plan-container{
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
+      [data-coco][data-component="app-plan-card"] .plan-badge{
+    left: 2.5rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 20px;
+  }
+
+  [data-coco][data-component="app-plan-card"] .plan-name{
+    font-family: merriweather, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+    font-weight: 700;
+    font-size: 32px;
+    line-height: 40px;
+  }
+
+  [data-coco][data-component="app-plan-card"] .plan-price{
+    font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 28px;
+  }
+
+  [data-coco][data-component="app-plan-card"] .plan-info *{
+    font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+      [data-coco][data-component="app-plan-card"] .plan-benefits > :not([hidden]) ~ :not([hidden]){
+    --tw-space-y-reverse: 0;
+    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
+  }
+
+  [data-coco][data-component="app-plan-card"] .plan-benefit{
+    font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 20px;
+  }
+
+  [data-coco][data-component="app-plan-card"] .coco-button .button-content{
+    font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 20px;
+  }
+
+    [data-coco][data-component="app-plan-card"] .coco-button .button-icon [data-component="icon"],[data-coco][data-component="app-plan-card"] .coco-button .button-toggle{
+    height: 1.25rem;
+    width: 1.25rem;
+  }
+
+    [data-coco][data-component="app-plan-card"] .coco-button[data-theme]{
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
+      [data-coco][data-component="app-plan-card"] .coco-button[data-theme].icon-only .button-icon,[data-coco][data-component="app-plan-card"] .coco-button[data-theme][data-collapsed="true"] .button-icon{
+    margin-left: -0.5rem;
+    margin-right: -0.5rem;
+  }
+
+    [data-coco][data-component="app-plan-card"] .coco-button[data-theme|="text"]{
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+      [data-coco][data-component="app-plan-card"] .coco-button[data-theme|="text"].icon-only .button-icon,[data-coco][data-component="app-plan-card"] .coco-button[data-theme|="text"][data-collapsed="true"] .button-icon{
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+    }
 [data-coco][data-component="app-seamless-textarea"]{
   color: currentColor;
 }