/*
Theme Name: Trustyy Landing
Theme URI: https://example.com/trustyy-landing
Author: Your Studio
Author URI: https://example.com
Description: A single-page marketing theme converted from a Figma design for a Shopify review-collection app. Includes a full hero, how-it-works, features, testimonials, pricing, and FAQ layout, plus lightweight blog templates that share the same design tokens.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: trustyy
Tags: one-column, custom-logo, custom-menu, featured-images, translation-ready

Trustyy Landing WordPress Theme is distributed under the terms of the GNU GPL.
*/
a[href^="#"] {
    scroll-behavior: smooth !important;
}
body {
  margin: 0;
  line-height: normal;
}
a {
   text-decoration: none;
}
:root {
  /* Figma Variables */

  /* Spacing */
  --Border-Radius-200: 8px;

  /* Color */
  --Color-avatar-one-bg-fill: #fbcffb;
  --Color-avatar-one-text-on-bg-fill: #791a79;

  /* Font */
  --Body-Body-1-fontFamily: Manrope, Arial, sans-serif;
  --Body-Body-1-fontFamily1: Bricolage Grotesque, Arial, sans-serif;
  --Body-Body-2-fontFamily: Manrope, Arial, sans-serif;
  --Heading-H2-fontFamily: Bricolage Grotesque, Arial, sans-serif;
  --Heading-H3-fontFamily: Bricolage Grotesque, Arial, sans-serif;
  --Heading-H4-fontFamily: Bricolage Grotesque, Arial, sans-serif;
  --Heading-H5-fontFamily: Bricolage Grotesque, Arial, sans-serif;
  --Heading-H6-fontFamily: Bricolage Grotesque, Arial, sans-serif;
  --Label-Label-1-fontFamily: Manrope, Arial, sans-serif;
  --Label-Label-1-fontFamily1: Bricolage Grotesque, Arial, sans-serif;
  --Label-Label-2-fontFamily: Manrope, Arial, sans-serif;
  --Title-Title-1-fontFamily: Bricolage Grotesque, Arial, sans-serif;

  /* Common Style Variables */

  /* Color */
  --color-black: #000;
  --color-darkgray: #ababab;
  --color-darkolivegreen-100: #393303;
  --color-darkolivegreen-200: rgba(57, 51, 3, 0.5);
  --color-dimgray-100: #78716c;
  --color-dimgray-200: #727272;
  --color-dimgray-300: #6e6e6e;
  --color-dimgray-400: #545454;
  --color-floralwhite-100: #fbf7ec;
  --color-floralwhite-200: #faf7ec;
  --color-gainsboro-100: #e6e6e6;
  --color-gainsboro-200: #e7e5e4;
  --color-gainsboro-300: #dedede;
  --color-gold-100: #fbe41b;
  --color-gold-200: #decb21;
  --color-gold-300: #e2cb05;
  --color-goldenrod: #c3b21d;
  --color-gray-100: #212121;
  --color-gray-200: #1e1e1e;
  --color-gray-300: #1f1c01;
  --color-gray-400: #141101;
  --color-lemonchiffon-100: #fff9c5;
  --color-lemonchiffon-200: #fff1bf;
  --color-lightgray-100: #ccc;
  --color-lightgray-200: #cacaca;
  --color-olive-100: #ab9900;
  --color-olive-200: #8f8000;
  --color-olive-300: #897d12;
  --color-white: #fff;
  --color-whitesmoke: #f5f5f5;

  /* Gap */
  --gap-4: 4px;
  --gap-8: 8px;
  --gap-10: 10px;
  --gap-11: 11px;
  --gap-12: 12px;
  --gap-13: 13px;
  --gap-16: 16px;
  --gap-20: 20px;
  --gap-24: 24px;
  --gap-28: 28px;
  --gap-32: 32px;
  --gap-40: 40px;
  --gap-48: 48px;
  --gap-64: 64px;
  --gap-6_6: 6.6px;

  /* Padding */
  --padding-5: 5px;
  --padding-6: 6px;
  --padding-8: 8px;
  --padding-12: 12px;
  --padding-16: 16px;
  --padding-20: 20px;
  --padding-22: 22px;
  --padding-23: 23px;
  --padding-24: 24px;
  --padding-26: 26px;
  --padding-30: 30px;
  --padding-31: 31px;
  --padding-32: 32px;
  --padding-36: 36px;
  --padding-40: 40px;
  --padding-48: 48px;
  --padding-52: 52px;
  --padding-60: 60px;
  --padding-78: 78px;
  --padding-80: 80px;
  --padding-156: 156px;

  /* BorderRadius */
  --br-6: 6px;
  --br-8: 8px;
  --br-12: 12px;
  --br-24: 24px;
  --br-32: 32px;
  --br-40: 40px;

  /* Font */
  --font-inter: Inter, Arial, sans-serif;

  /* FontSize */
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-26: 26px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;

  /* Borders */
  --border-1: 1px solid var(--color-gainsboro-300);
  --border-2: 1px solid var(--color-gold-300);
  --border-3: 1px solid var(--color-lemonchiffon-100);
  --border-4: 1px solid var(--color-lemonchiffon-200);
  --border-5: 0.8px solid var(--color-gainsboro-300);
  --border-11: 1px solid var(--color-gainsboro-100);

  /* Shadows */
  --shadow-drop: 0px 4px 35.7px rgba(194, 194, 194, 0.25);
  --shadow-drop-1: 0px 0.8px 0px rgba(0, 0, 0, 0.25);

  /* WidthHeights */
  --height-1: 1px;
  --height-18: 18px;
  --height-20: 20px;
  --height-24: 24px;
  --height-33: 33px;
  --height-40: 40px;
  --max-w-1200: 1200px;
  --min-w-320: 320px;
  --width-1: 1px;
  --width-18: 18px;
  --width-20: 20px;
  --width-24: 24px;
  --width-33: 33px;
  --width-40: 40px;
  --width-448: 448px;
  --width-802: 802px;
  --width-31_5: 31.5px;

  /* LineHeights */
  --lh-19: 19px;
  --lh-20: 20px;
  --lh-22: 22px;
  --lh-23: 23px;
  --lh-24: 24px;
  --lh-28: 28px;
  --lh-29: 29px;
  --lh-30: 30px;
  --lh-38: 38px;
  --lh-48: 48px;

  /* LetterSpacings */
  --ls--0_15: -0.15px;
  --ls--0_16: -0.16px;
  --ls--0_18: -0.18px;
  --ls--0_2: -0.2px;
  --ls--0_3: -0.3px;
}

.v1 {
  width: 100%;
  position: relative;
  background-color: var(--color-floralwhite-100);
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;
  /*gap: var(--gap-48);*/
  gap:0px!important;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  font-size: var(--fs-20);
  color: var(--color-gray-200);
  font-family: var(--Heading-H6-fontFamily);
}
.header-content-parent {
  align-self: stretch;
  background-color: var(--color-gray-400);
  justify-content: center;
  padding: var(--padding-12) var(--padding-8);
  gap: var(--gap-24);
  top: 0;
  z-index: 99;
  position: sticky;
  text-align: center;
  font-size: var(--fs-18);
  color: var(--color-white);
  font-family: var(--Body-Body-1-fontFamily);
}
.header-content,
.header-content-parent,
.new-label {
  display: flex;
  align-items: center;
}
.header-content {
  gap: var(--gap-8);
}
.new-label {
  cursor: pointer;
  border: 0;
  padding: 2px var(--padding-12);
  background-color: var(--color-gold-200);
  border-radius: var(--br-8);
  justify-content: center;
}
.new-label:hover {
  background-color: var(--color-olive-100);
}
.new {
  font-size: var(--fs-18);
  font-family: var(--Body-Body-1-fontFamily);
  color: var(--color-gray-100);
  text-align: center;
}
.get-more-retention,
.learn-more,
.new,
.trustyy {
  position: relative;
  line-height: var(--lh-28);
  font-weight: 500;
}
.get-more-retention,
.learn-more {
  color: var(--color-lightgray-100);
}
.learn-more {
  font-size: var(--fs-16);
  letter-spacing: var(--ls--0_18);
  line-height: var(--lh-22);
  font-family: var(--Label-Label-1-fontFamily);
  color: var(--color-gold-200);
}
.content-wrapper-parent,
.frame-parent {
  align-items: center;
  justify-content: center;
}
.frame-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: 0 var(--padding-156);
  gap: var(--gap-48);
  z-index: 2;
}
.content-wrapper-parent {
  gap: var(--gap-40);
}
.content-wrapper,
.content-wrapper-parent,
.feature-block {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.content-wrapper {
  align-items: flex-start;
  gap: var(--gap-40);
  text-align: center;
  font-size: var(--fs-16);
  color: var(--color-gray-200);
  font-family: var(--Label-Label-1-fontFamily);
}
.feature-block {
  align-items: center;
  gap: var(--gap-24);
}
.image-4472-parent {
  box-shadow: 0 4px 13.5px rgba(158, 158, 158, 0.25);
  border-radius: 11px;
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  padding: var(--padding-12);
  gap: 18px;
}
.image-4472-icon {
  width: 172px;
  position: relative;
  border-radius: 5.7px;
  max-height: 100%;
  object-fit: cover;
}
.rating-from-real {
  position: relative;
  letter-spacing: var(--ls--0_18);
  line-height: var(--lh-22);
  font-weight: 500;
}
.trust-description-block {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 120px;
  gap: var(--gap-24);
  font-size: 56px;
  font-family: var(--Title-Title-1-fontFamily);
}
.build-trust-through-container {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  letter-spacing: -0.8px;
  /*line-height: 88px;*/
  font-weight: 500;
  font-family: inherit;
}

.authentic-reviews {
  color: var(--color-olive-300);
}
.trustyy-collects-unlimited {
  align-self: stretch;
  position: relative;
  font-size: var(--fs-18);
  line-height: var(--lh-28);
  font-weight: 500;
  font-family: var(--Body-Body-1-fontFamily);
  color: var(--color-dimgray-300);
}
.trustyy-button-primary-parent {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-12);
}
.trustyy-button-primary {
  cursor: pointer;
  border: 0;
  padding: var(--padding-12) var(--padding-16);
  background-color: var(--color-darkolivegreen-100);
  border-radius: var(--br-12);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-10);
      width: fit-content;
}
.try-trustyy-for {
  position: relative;
  font-size: var(--fs-18);
  line-height: var(--lh-28);
  font-weight: 500;
  font-family: var(--Body-Body-1-fontFamily);
  color: var(--color-white);
  text-align: center;
}
.button-icon-container {
  border-radius: var(--br-8);
  background-color: var(--color-gold-200);
  display: flex;
  align-items: center;
  padding: var(--padding-8);
}
.button-icon {
  height: var(--height-24);
  width: var(--width-24);
  position: relative;
}
.trustyy-button-primary2 {
  cursor: pointer;
  border: 0;
  padding: var(--padding-12) var(--padding-16);
  background-color: var(--color-darkolivegreen-200);
  align-self: stretch;
  width: 241px;
  border-radius: var(--br-12);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: var(--gap-10);
}
.try-trustyy-for2 {
  position: relative;
  font-size: var(--fs-18);
  line-height: var(--lh-28);
  font-weight: 500;
  font-family: var(--Body-Body-1-fontFamily);
  color: var(--color-white);
  text-align: center;
  flex-shrink: 0;
}
.frame-wrapper {
  border-radius: var(--br-8);
  background-color: var(--color-gold-200);
  display: none;
  align-items: center;
  padding: var(--padding-8);
  flex-shrink: 0;
}
.app-rating-block-parent {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-20);
  max-width: 1440px;
}
.app-rating-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--gap-8);
}
.rating {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  line-height: var(--lh-24);
  font-weight: 600;
  font-family: inherit;
}
.star-and-store-name {
  display: flex;
  align-items: center;
  gap: 5px;
  text-align: center;
  font-size: var(--fs-18);
  font-family: var(--Body-Body-1-fontFamily);
}
.star-icon {
  height: 15.8px;
  width: 16.5px;
  position: relative;
}
.frame-child {
  align-self: stretch;
  width: var(--width-1);
  position: relative;
  border-right: 1px solid var(--color-lightgray-200);
  box-sizing: border-box;
}
.no-transaction-fee {
  position: relative;
  font-size: var(--fs-18);
  line-height: var(--lh-28);
  font-weight: 500;
  font-family: var(--Body-Body-1-fontFamily);
  text-align: center;
}
.frame-item {
  height: 58px;
  width: var(--width-1);
  position: relative;
  border-right: 1px solid var(--color-lightgray-200);
  box-sizing: border-box;
}
.shopify-flow-admin-wrapper {
  display: flex;
  align-items: center;
  text-align: center;
  font-size: var(--fs-18);
  font-family: var(--Body-Body-1-fontFamily);
}
.group-1707484478-1 {
  width: 1041.6px;
  position: relative;
  max-height: 908.98px;
  object-fit: cover;
  max-width: var(--max-w-1200);
}
.trusted-by-display,
.trusted-by-display-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.trusted-by-display-parent {
  gap: 1px;
  max-width: 100%;
  z-index: 1;
}
.trusted-by-display {
  background-color: var(--color-white);
  border-top: var(--border-1);
  border-bottom: var(--border-1);
  padding: var(--padding-80) var(--padding-32);
  gap: var(--gap-40);
  text-align: center;
  font-size: var(--fs-18);
  color: var(--color-gray-200);
  font-family: var(--Body-Body-1-fontFamily);
}
.trusted-by-300 {
  position: relative;
  line-height: var(--lh-28);
}
.image-4496-icon {
  align-self: stretch;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
}
.how-it-works-header,
.how-it-works-header-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.how-it-works-header-parent {
  background-color: var(--color-whitesmoke);
  justify-content: center;
  padding: 56px var(--padding-156);
  gap: 56px;
}
.how-it-works-header {
  gap: var(--gap-24);
  text-align: center;
  font-size: var(--fs-18);
  color: var(--color-gray-200);
  font-family: var(--Body-Body-1-fontFamily);
}
.how-it-works-title-container {
  border-radius: var(--br-8);
  background-color: var(--color-white);
  border: var(--border-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-12) var(--padding-16);
}
.three-steps-from {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: var(--fs-40);
  letter-spacing: var(--ls--0_3);
  line-height: var(--lh-48);
  font-weight: 500;
  font-family: var(--Heading-H3-fontFamily);
}
.step-item-one {
  width: 100%;
  border-radius: var(--br-40);
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--padding-48) var(--padding-40);
  box-sizing: border-box;
  gap: var(--gap-64);
  max-width: 1440px;
}
.step-detail-container-one {
  flex: 1;
  border-radius: var(--br-8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-24) var(--padding-22) var(--padding-24)
    var(--padding-24);
  box-sizing: border-box;
  gap: var(--gap-32);
  min-width: var(--min-w-320);
  text-align: left;
  font-size: var(--fs-48);
  color: var(--color-gray-200);
  font-family: var(--Heading-H2-fontFamily);
}
.step-item-element {
  margin: 0;
  position: relative;
  font-size: inherit;
  letter-spacing: -0.4px;
  line-height: 58px;
  font-weight: 600;
  font-family: inherit;
}
.install-embedd-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  font-size: var(--fs-32);
  font-family: var(--Heading-H4-fontFamily);
}
.install-embedd {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  letter-spacing: var(--ls--0_2);
  line-height: var(--lh-38);
  font-weight: 700;
  font-family: inherit;
}
.add-trustyy-from,
.try-trustyy-for3 {
  position: relative;
  font-size: var(--fs-18);
  line-height: var(--lh-28);
  font-weight: 500;
}
.add-trustyy-from {
  align-self: stretch;
  font-family: var(--Body-Body-1-fontFamily);
  color: var(--color-dimgray-400);
}
.try-trustyy-for3 {
  font-family: var(--Body-Body-1-fontFamily1);
  color: var(--color-white);
  text-align: center;
}
.scene-1-4-1,
.scene-1-4-12 {
  height: 492px;
  flex: 1.1031;
  position: relative;
  border-radius: var(--br-24);
  min-width: var(--min-w-320);
  max-width: 600px;
  max-height: 600px;
}
.scene-1-4-12 {
  box-shadow: var(--shadow-drop);
}
.features-description-block,
.features-header-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.features-header-parent {
  background-color: var(--color-white);
  border-top: var(--border-1);
  border-bottom: var(--border-1);
  padding: var(--padding-80) var(--padding-156);
  gap: var(--gap-40);
  text-align: left;
  font-size: var(--fs-24);
  color: var(--color-gray-200);
  font-family: var(--Heading-H5-fontFamily);
}
.features-description-block {
  gap: var(--gap-16);
  font-size: var(--fs-40);
  font-family: var(--Heading-H3-fontFamily);
}
.everything-you-need {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  letter-spacing: var(--ls--0_3);
  line-height: var(--lh-48);
  font-weight: 500;
  font-family: inherit;
}
.features-grid {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 var(--padding-80);
  box-sizing: border-box;
  gap: var(--gap-40);
  max-width: var(--max-w-1200);
}
.feature-item-one,
.features-row-one {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-32);
}
.features-row-one {
  align-self: stretch;
  text-align: left;
  font-size: var(--fs-24);
  color: var(--color-gray-200);
  font-family: var(--Heading-H5-fontFamily);
}
.feature-item-one {
  flex: 1;
  border-radius: var(--br-32);
  background-color: var(--color-white);
  border: var(--border-1);
  box-sizing: border-box;
  flex-direction: column;
  padding: var(--padding-24);
  min-width: 352px;
}
.feature-visual-one {
  align-self: stretch;
  position: relative;
  border-radius: var(--br-24);
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
}
.seven-review-widgets-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-11);
}
.seven-review-widgets {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  letter-spacing: var(--ls--0_15);
  line-height: var(--lh-30);
  font-weight: 600;
  font-family: inherit;
}
.feature-item-three,
.rectangle-parent {
  border-radius: var(--br-32);
  background-color: var(--color-white);
  border: var(--border-1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-24);
}
.feature-item-three {
  align-self: stretch;
  height: 576.1px;
  padding: var(--padding-24);
}
.rectangle-parent {
  flex: 1;
  padding: var(--padding-24);
  min-width: 355px;
}
.testimonials-header-parent {
  align-self: stretch;
  background: #FBF7EC;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px var(--padding-156);
  gap: 56px;
}
.testimonial-carousel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 56px;
  max-width: var(--max-w-1200);
}
.review-card-item {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  gap: var(--gap-24);
  text-align: left;
  font-size: var(--fs-16);
  color: var(--color-black);
  font-family: var(--Label-Label-1-fontFamily);
}
.frame-group,
.star-rating-block-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.frame-group {
  flex: 1;
  border-radius: var(--br-24);
  background-color: var(--color-white);
  border: var(--border-3);
  padding: var(--padding-22) var(--padding-23) var(--padding-22)
    var(--padding-24);
  gap: var(--gap-24);
}
.star-rating-block-parent {
  align-self: stretch;
  gap: var(--gap-13);
}
.star-rating-block {
  display: flex;
  align-items: center;
  gap: var(--gap-6_6);
}
.starfilledicon-1-1 {
  height: var(--height-24);
  width: var(--width-24); 
  position: relative;
}
.line-div,
.set-up-in {
  align-self: stretch;
  position: relative;
}
.set-up-in {
  letter-spacing: var(--ls--0_18);
  line-height: var(--lh-22);
    font-size: var(--fs-16);
}
.line-div {
  height: var(--height-1);
  border-top: var(--border-11);
  box-sizing: border-box;
}
.reviewer-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--gap-13);
  text-align: center;
  font-size: var(--fs-13);
  color: var(--Color-avatar-one-text-on-bg-fill);
  font-family: var(--font-inter);
}
.avatar,
.initials {
  height: var(--height-40);
  width: var(--width-40);
  display: flex;
}
.avatar {
  border-radius: var(--Border-Radius-200);
  background-color: var(--Color-avatar-one-bg-fill);
  align-items: flex-start;
}
.initials {
  position: relative;
  line-height: var(--lh-28);
  font-weight: 600;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.reviewer-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-4);
  text-align: left;
  font-size: var(--fs-24);
  color: var(--color-gray-200);
  font-family: var(--Heading-H5-fontFamily);
}
.single-review-card,
.skincare-store- {
  font-size: var(--fs-16);
  font-family: var(--Label-Label-1-fontFamily);
}
.skincare-store- {
  align-self: stretch;
  position: relative;
  letter-spacing: var(--ls--0_18);
  line-height: var(--lh-22);
  font-weight: 500;
}
.single-review-card {
  width: 1130px;
  max-width: 1130px;
  border-radius: var(--br-24);
  background-color: var(--color-white);
  border: var(--border-3);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-22) var(--padding-23);
  gap: var(--gap-24);
  text-align: left;
  color: var(--color-black);
}

/* -----------------------------------------------------------
   Testimonials — split layout + auto-scrolling review slider
   Append to the end of style.css (it must come after the
   original .testimonials-header-parent / .frame-group rules).
----------------------------------------------------------- */

.testimonials-split {
	align-items: center;
	justify-content: center;
	overflow: hidden; /* keeps the mask edges tidy on small screens */
}

.testimonials-split-inner {
	width: 100%;
	max-width: var(--max-w-1200);
	display: grid;
	grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
	gap: var(--gap-64);
	align-items: center;
}

/* ---------- Left column ---------- */
.testimonials-intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gap-32);
	text-align: left;
	font-size: var(--fs-18);
	color: var(--color-gray-200);
	font-family: var(--Body-Body-1-fontFamily);
}
.testimonials-intro .feature-block {
	align-items: flex-start;
	gap: var(--gap-24);
}
.testimonials-intro .three-steps-from {
	align-self: auto;
	text-align: left;
}

/* ---------- Slider viewport start ---------- */
.testimonial-marquee {
	position: relative;
	height: clamp(420px, 64vh, 660px);
	overflow: hidden;
	cursor: grab;
	touch-action: none;              /* lets us drag vertically without scrolling the page */
	-webkit-user-select: none;
	user-select: none;
	/* soft fade at the top and bottom edges */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 11%, #000 89%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 11%, #000 89%, transparent 100%);
}
.testimonial-marquee:focus-visible {
	outline: 2px solid var(--color-gold-200);
	outline-offset: 6px;
	border-radius: var(--br-24);
}
.testimonial-marquee.is-dragging {
	cursor: grabbing;
}

.testimonial-marquee-track {
	display: flex;
	flex-direction: column;
	gap: var(--gap-24);
	will-change: transform;
}

/* Cards keep their original look, but must not stretch inside the track */
.testimonial-marquee .frame-group {
	flex: 0 0 auto;
	width: 100%;
	box-sizing: border-box;
}
.testimonial-marquee .frame-group * {
	-webkit-user-drag: none;
}

/* Avatar colour variants (the base .avatar tokens stay untouched) */
.avatar.avatar--two   { background-color: #D8ECFB; }
.avatar.avatar--two   .initials { color: #12456F; }
.avatar.avatar--three { background-color: #DCF3DC; }
.avatar.avatar--three .initials { color: #1F5B2E; }
.avatar.avatar--four  { background-color: #FDE7CF; }
.avatar.avatar--four  .initials { color: #7A4310; }
.avatar.avatar--five  { background-color: #E6E1FB; }
.avatar.avatar--five  .initials { color: #3B2B7A; }
.avatar.avatar--six   { background-color: #FBE0E0; }
.avatar.avatar--six   .initials { color: #7A1D1D; }

/* ---------- No JS / reduced motion: plain scroll list ---------- */
.testimonial-marquee.is-static {
	cursor: auto;
	touch-action: auto;
	overflow-y: auto;
	overscroll-behavior: contain;
}

@media (prefers-reduced-motion: reduce) {
	.testimonial-marquee {
		cursor: auto;
		touch-action: auto;
		overflow-y: auto;
	}
}

/* ---------- Tablet / mobile: horizontal slider ---------- */
@media (max-width: 900px) {
	.testimonials-split-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--gap-32);
	}
	.testimonials-intro {
		align-items: center;
		text-align: center;
	}
	.testimonials-intro .feature-block { align-items: center; }
	.testimonials-intro .three-steps-from { text-align: center; }

	.testimonial-marquee {
		height: auto;
		touch-action: pan-y;         /* horizontal drag here, page still scrolls vertically */
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
	}
	.testimonial-marquee.is-static { overflow-x: auto; overflow-y: hidden; }
	.testimonial-marquee-track {
		flex-direction: row;
		align-items: stretch;
	}
	.testimonial-marquee .frame-group {
		width: min(78vw, 340px);
	}
}
/* ---------- Slider viewport end ---------- */



.pricing-header,
.pricing-header-parent,
.pricing-subtitle-block {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pricing-header-parent {
  background-color: var(--color-floralwhite-100);
  border-top: var(--border-1);
  border-bottom: var(--border-1);
  padding: var(--padding-80) var(--padding-156);
  gap: var(--gap-40);
}
.pricing-header,
.pricing-subtitle-block {
  justify-content: center;
}
.pricing-header {
  gap: var(--gap-24);
  text-align: center;
  font-size: var(--fs-18);
  color: var(--color-gray-200);
  font-family: var(--Body-Body-1-fontFamily);
}
.pricing-subtitle-block {
  gap: var(--gap-16);
  font-size: var(--fs-40);
  font-family: var(--Heading-H3-fontFamily);
}
.all-plans-include {
  align-self: stretch;
  height: 56px;
  position: relative;
  font-size: var(--fs-18);
  line-height: var(--lh-28);
  font-weight: 500;
  font-family: var(--Body-Body-1-fontFamily);
  color: var(--color-dimgray-300);
  display: inline-block;
}
.pricing-plans-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-40);
  max-width: var(--max-w-1200);
}
.section-starterplan {
  height: 649px;
  flex: 1;
  border-radius: var(--br-24);
  background-color: var(--color-white);
  border: 1px solid var(--color-gainsboro-200);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-32) var(--padding-31) var(--padding-32)
    var(--padding-32);
  gap: var(--gap-24);
  text-align: left;
  font-size: var(--fs-14);
  color: var(--color-dimgray-100);
  font-family: var(--Label-Label-2-fontFamily);
}
.plan-headers-block {
  gap: var(--gap-12);
}
.headermargin,
.plan-headers-block {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.header,
.plan-name-block {
  align-self: stretch;
  display: flex;
  gap: var(--gap-8);
}
.header {
  flex-direction: column;
  align-items: flex-start;
}
.plan-name-block {
  align-items: center;
}
.starter {
  position: relative;
  letter-spacing: var(--ls--0_16);
  line-height: var(--lh-20);
  font-weight: 500;
}
.free,
.free-to-install2 {
  align-self: stretch;
  position: relative;
}
.free {
  margin: 0;
  font-size: var(--fs-32);
  letter-spacing: var(--ls--0_2);
  line-height: var(--lh-38);
  font-weight: 600;
  font-family: var(--Heading-H4-fontFamily);
  color: var(--color-gray-200);
}
.free-to-install2 {
  line-height: var(--lh-20);
  font-family: Manrope;
  color: var(--color-dimgray-400);
}
.email-review-requests {
  align-self: stretch;
  position: relative;
  font-size: var(--fs-18);
  line-height: var(--lh-28);
  font-weight: 500;
  font-family: var(--Body-Body-1-fontFamily);
  color: var(--color-gray-200);
}
.trustyy-button-primary7 {
  cursor: pointer;
  border: 0;
  padding: var(--padding-12) var(--padding-16);
  background-color: var(--color-darkolivegreen-200);
  align-self: stretch;
  border-radius: var(--br-12);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-10);
}
.pricing-dividers {
  align-self: stretch;
  height: var(--height-1);
  position: relative;
  border-top: 1px solid var(--color-darkgray);
  box-sizing: border-box;
}
.item,
.list {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
}
.list {
  flex-direction: column;
  gap: var(--gap-24);
  font-size: var(--fs-16);
  color: var(--color-gray-200);
  font-family: var(--Body-Body-2-fontFamily);
}
.item {
  gap: var(--gap-12);
}
.feature-bullet-one {
  height: var(--height-20);
  width: var(--width-20);
  position: relative;
}
.use-all-review {
  flex: 1;
  position: relative;
  line-height: var(--lh-24);
  font-weight: 500;
}
.headermargin-parent,
.section-starterplan2 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.section-starterplan2 {
  flex: 1;
  border-radius: var(--br-24);
  background-color: var(--color-gray-200);
  padding: var(--padding-32);
  position: relative;
  isolation: isolate;
  gap: var(--gap-24);
  text-align: left;
  font-size: var(--fs-16);
  color: var(--color-white);
  font-family: var(--Label-Label-2-fontFamily);
}
.headermargin-parent {
  gap: var(--gap-12);
  z-index: 0;
  flex-shrink: 0;
  font-size: var(--fs-14);
}
.billed-monthly,
.h22 {
  align-self: stretch;
  position: relative;
}
.h22 {
  margin: 0;
  font-size: var(--fs-32);
  letter-spacing: var(--ls--0_2);
  line-height: var(--lh-38);
  font-weight: 600;
  font-family: var(--Heading-H4-fontFamily);
}
.billed-monthly {
  line-height: var(--lh-20);
  font-family: Manrope;
}
.unlimited-email-review {
  align-self: stretch;
  position: relative;
  font-size: var(--fs-18);
  line-height: var(--lh-28);
  font-weight: 500;
  font-family: var(--Body-Body-1-fontFamily);
}
.trustyy-button-primary8 {
  cursor: pointer;
  border: 0;
  padding: var(--padding-12) var(--padding-16);
  background-color: var(--color-goldenrod);
  align-self: stretch;
  border-radius: var(--br-12);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  flex-shrink: 0;
}
.trustyy-button-primary8:hover {
  background-color: var(--color-olive-200);
}
.start-15-days {
  position: relative;
  font-size: var(--fs-18);
  line-height: var(--lh-28);
  font-weight: 500;
  font-family: var(--Body-Body-1-fontFamily);
  color: var(--color-black);
  text-align: center;
}
.section-starterplan-child {
  width: 479px;
  height: var(--height-1);
  position: relative;
  border-top: 1px solid var(--color-darkgray);
  box-sizing: border-box;
  z-index: 2;
  flex-shrink: 0;
}
.list2 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-24);
  z-index: 3;
  flex-shrink: 0;
  font-family: var(--Body-Body-2-fontFamily);
}
.most-popular-wrapper {
  width: 183px;
  margin: 0 !important;
  position: absolute;
  top: -30px;
  left: calc(50% - 92px);
  box-shadow: 0 9px 0 var(--color-gold-200);
  border-radius: 123px;
  background-color: var(--color-white);
  border: 4px solid var(--color-gold-100);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  white-space: nowrap;
  z-index: 4;
  flex-shrink: 0;
  color: var(--color-black);
  font-family: var(--Label-Label-1-fontFamily);
}
.most-popular {
  position: relative;
  letter-spacing: var(--ls--0_18);
  line-height: var(--lh-22);
}
.faq-header-parent,
.faq-subtitle-block {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.faq-header-parent {
  background-color: var(--color-white);
  padding: var(--padding-80) var(--padding-156);
  box-sizing: border-box;
  gap: var(--gap-40);
  max-width: 100%;
  text-align: left;
  font-size: var(--fs-16);
  color: var(--color-gray-200);
  font-family: var(--Label-Label-1-fontFamily1);
}
.faq-subtitle-block {
  justify-content: center;
  gap: var(--gap-8);
  font-size: var(--fs-40);
  font-family: var(--Heading-H3-fontFamily);
}
.faq-question-container {
  width: 100%;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-32);
  max-width: 800px;
}
.faq-block,
.faq-question-container,
.faq-question-list {
  display: flex;
  align-items: center;
}
.faq-question-list {
  width: var(--width-802);
  max-width: 802px;
  border-radius: var(--br-12);
  background-color: var(--color-floralwhite-200);
  border: var(--border-4);
  box-sizing: border-box;
  justify-content: space-between;
  padding: var(--padding-22) var(--padding-24);
  gap: var(--gap-20);
}
.faq-block {
  box-shadow: var(--shadow-drop-1);
  border-radius: var(--br-6);
  background-color: var(--color-white);
  border: var(--border-5);
  padding: var(--padding-5) var(--padding-6);
}
.faq-toggle-item-one {
  height: var(--height-18);
  width: var(--width-18);
  position: relative;
}
.faq-question-list2 {
  width: var(--width-802);
  max-width: 100%;
  border-radius: var(--br-12);
  background-color: var(--color-floralwhite-200);
  border: var(--border-4);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--padding-22) var(--padding-24);
  gap: var(--gap-20);
}

/*==== custom FAQ start ===*/
/* ----- FAQ accordion ----- */
.faq-question-list2.faq-item {
	display: block;
	padding: 0;
	overflow: hidden;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.faq-question-list2.faq-item.is-open {
	background-color: var(--color-white);
	border-color: var(--color-gold-300);
}

.faq-item-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-20);
	padding: var(--padding-22) var(--padding-24);
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.faq-item-trigger .will-the-widgets {
	width: auto;
	flex: 1;
	max-width: none;
}
.faq-item-trigger .frame-wrapper2 {
	flex-shrink: 0;
	height: var(--height-33);
}
.faq-item-trigger:focus-visible {
	outline: 2px solid var(--color-gold-200);
	outline-offset: -4px;
	border-radius: var(--br-12); 
}

/* Rotate the toggle glyph when open.
   Use 45deg instead if Faq-Toggle-Item-One.svg is a plus sign. */
/*.faq-toggle-item-one {*/
/*	transition: transform 0.3s ease;*/
/*}*/
/*.faq-item.is-open .faq-toggle-item-one {*/
/*	transform: rotate(180deg);*/
/*}*/


.faq-toggle-item-one {
	transition: transform 0.3s ease;
}
.faq-icon-vert {
	transition: opacity 0.2s ease, transform 0.2s ease;
	transform-origin: center;
}
.faq-item.is-open .faq-icon-vert {
	opacity: 0;
	transform: scaleY(0);
}

.faq-item-panel {
	overflow: hidden;
	height: 0;
	transition: height 0.3s ease;
}
.faq-item-panel[hidden] {
	display: block; /* we animate height instead of toggling display */
	height: 0;
}
.faq-item-panel-inner {
	padding: 0 var(--padding-24) var(--padding-22);
}
.faq-item-panel-inner p {
	margin: 0;
	font-family: var(--Body-Body-1-fontFamily);
	font-size: var(--fs-16);
	line-height: var(--lh-24);
	font-weight: 500;
	color: var(--color-dimgray-300);
}

/* No JS: every answer stays readable */
.no-js .faq-item-panel { height: auto; }

@media (prefers-reduced-motion: reduce) {
	.faq-item-panel,
	.faq-toggle-item-one { transition: none; }
}

@media (max-width: 450px) {
	.faq-item-trigger { padding: var(--padding-16); gap: var(--gap-12); }
	.faq-item-panel-inner { padding: 0 var(--padding-16) var(--padding-16); }
}
/*=== Custom FAQ end ===*/
.will-the-widgets {
  width: var(--width-448);
  position: relative;
  letter-spacing: var(--ls--0_18);
  line-height: var(--lh-22);
  font-weight: 500;
  display: inline-block;
  flex-shrink: 0;
  max-width: 100%;
}
.faq-toggle-item-two,
.frame-wrapper2 {
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.frame-wrapper2 {
  width: var(--width-31_5);
  box-shadow: var(--shadow-drop-1);
  border-radius: var(--br-6);
  border: var(--border-5);
  box-sizing: border-box;
  padding: var(--padding-5) var(--padding-6);
}
.faq-toggle-item-two {
  align-self: stretch;
  flex-direction: column;
  padding: 56px var(--padding-156);
  gap: 56px;
}
.faq-toggle-item-three {
  gap: var(--gap-24);
  text-align: center;
  font-size: var(--fs-40);
  color: var(--color-gray-200);
  font-family: var(--Heading-H3-fontFamily);
}
.faq-toggle-item-four,
.faq-toggle-item-three {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.website-banner-1-1 {
  width: 100%;
  position: relative;
  border-radius: 17.4px;
  max-width: var(--max-w-1200);
  overflow: hidden;
  max-height: 675px;
  object-fit: cover;
}
.footer-content-wrapper-parent {
  align-self: stretch;
  background-color: var(--color-gray-300);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px var(--padding-156);
  box-sizing: border-box;
  gap: var(--gap-24);
  max-width: 100%;
  z-index: 0;
  text-align: left;
  font-size: var(--fs-16);
  color: var(--color-white);
  font-family: var(--Body-Body-2-fontFamily);
}
.footer-content-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-20);
  max-width: var(--max-w-1200);
}
.footer-brand-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-32) var(--padding-20) var(--padding-32)
    var(--padding-32);
  box-sizing: border-box;
  gap: var(--gap-24);
  min-width: 647px;
  max-width: 100%;
}
.group-7-1 {
  width: 225px;
  height: 73px;
  position: relative;
}
.product-reviews {
  position: relative;
  line-height: var(--lh-24);
  font-weight: 500;
}
.footer-navigation-collection {
  display: flex;
  align-items: flex-start;
  gap: 51px;
  max-width: 100%;
  color: var(--color-gold-200);
  font-family: var(--Label-Label-1-fontFamily1);
}
.navigation-column-set {
  align-self: stretch;
  width: 106px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-24);
}
.products {
  align-self: stretch;
  position: relative;
  letter-spacing: var(--ls--0_18);
  line-height: var(--lh-22);
  font-weight: 600;
}
.navigation-links-list {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-10);
  font-size: var(--fs-14);
  color: var(--color-white);
  font-family: var(--Label-Label-2-fontFamily);
}
.review-features {
  align-self: stretch;
  position: relative;
  letter-spacing: var(--ls--0_16);
  line-height: var(--lh-20);
  font-weight: 500;
  color: #FFFFFF;
}
.company-parent {
  width: 106px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-24);
}
.frame-child4 {
  align-self: stretch;
  height: var(--height-1);
  position: relative;
  border-top: 1px solid var(--color-dimgray-200);
  box-sizing: border-box;
}
.container,
.container2 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.container {
  height: var(--height-24);
}
.container2 {
  opacity: 0.6;
}
.trustyy-by-easy {
  align-self: stretch;
  position: relative;
  line-height: var(--lh-24);
  font-weight: 500;
}
@media screen and (max-width: 1400px) {
  .group-1707484478-1 {
    max-width: 100%;
  }
  .how-it-works-header-parent {
    padding-top: var(--padding-36);
    padding-bottom: var(--padding-36);
    box-sizing: border-box;
  }
  .step-item-one {
    flex-wrap: wrap;
  }
  .step-detail-container-one {
    flex: 1;
  }
  .scene-1-4-1,
  .scene-1-4-12 {
    width: 100%;
  }
  .features-header-parent {
    padding-top: var(--padding-52);
    padding-bottom: var(--padding-52);
    box-sizing: border-box;
  }
  .features-grid {
    max-width: 100%;
  }
  .features-row-one {
    flex-wrap: wrap;
  }
  .testimonials-header-parent {
    padding-top: var(--padding-36);
    padding-bottom: var(--padding-36);
    box-sizing: border-box;
  }
  .testimonial-carousel {
    max-width: 100%;
  }
  .review-card-item {
    flex-wrap: wrap;
  }
  .pricing-plans-container {
    flex-wrap: wrap;
    max-width: 100%;
  }
  .website-banner-1-1 {
    max-width: 100%;
  }
  .footer-content-wrapper {
    flex-wrap: wrap;
    max-width: 100%;
  }
  .footer-brand-identity,
  .footer-navigation-collection {
    flex: 1;
  }
}
@media screen and (max-width: 1200px) {
  .trust-description-block {
    padding-left: var(--padding-60);
    padding-right: var(--padding-60);
    box-sizing: border-box;
  }
  .app-rating-block-parent {
    flex-wrap: wrap;
  }
  .frame-child,
  .frame-item {
    width: 100%;
    height: var(--height-1);
    border-top: 1px solid var(--color-lightgray-200);
    box-sizing: border-box;
  }
  .how-it-works-header-parent {
    padding-top: var(--padding-23);
    padding-bottom: var(--padding-23);
    box-sizing: border-box;
  }
  .step-item-one {
    gap: var(--gap-32);
  }
  .features-header-parent {
    padding-top: 34px;
    padding-bottom: 34px;
    box-sizing: border-box;
  }
  .features-grid {
    padding-left: var(--padding-40);
    padding-right: var(--padding-40);
    box-sizing: border-box;
  }
  .feature-item-one,
  .rectangle-parent {
    min-width: 100%;
  }
  .faq-header-parent,
  .faq-toggle-item-two,
  .pricing-header-parent {
    padding-top: var(--padding-52);
    padding-bottom: var(--padding-52);
    box-sizing: border-box;
  }
  .faq-toggle-item-two {
    padding-top: var(--padding-36);
    padding-bottom: var(--padding-36);
  }
  .footer-brand-identity {
    min-width: 100%;
  }
}
@media screen and (max-width: 825px) {
  .v1 {
    /*gap: var(--gap-24);*/
  }
  .header-content-parent {
    display: none;
  }
  .frame-parent {
    gap: var(--gap-24);
    padding-left: var(--padding-78);
    padding-right: var(--padding-78);
    box-sizing: border-box;
  }
  .content-wrapper,
  .content-wrapper-parent {
    gap: var(--gap-20);
  }
  .trust-description-block {
    padding-left: var(--padding-30);
    padding-right: var(--padding-30);
    box-sizing: border-box;
  }
  .build-trust-through-container {
    font-size: 58px;
    line-height: 70px;
  }
  .trustyy-button-primary-parent {
    flex-wrap: wrap;
  }
  .trusted-by-display {
    gap: var(--gap-20);
  }
  .how-it-works-header-parent {
    gap: var(--gap-28);
    padding: var(--padding-20) var(--padding-78);
    box-sizing: border-box;
  }
  .three-steps-from {
    font-size: var(--fs-32);
    line-height: var(--lh-38);
  }
  .step-item-one {
    padding-top: var(--padding-31);
    padding-bottom: var(--padding-31);
    box-sizing: border-box;
  }
  .step-detail-container-one,
  .step-item-one {
    gap: var(--gap-16);
  }
  .step-item-element {
    font-size: 38px;
    line-height: 46px;
  }
  .install-embedd {
    font-size: var(--fs-26);
    line-height: var(--lh-30);
  }
  .scene-1-4-1,
  .scene-1-4-12 {
    max-width: 100%;
  }
  .features-header-parent {
    gap: var(--gap-20);
    padding: var(--padding-22) var(--padding-78);
    box-sizing: border-box;
  }
  .everything-you-need {
    font-size: var(--fs-32);
    line-height: var(--lh-38);
  }
  .features-grid {
    gap: var(--gap-20);
  }
  .features-row-one {
    gap: var(--gap-16);
    flex-direction: column;
  }
  .feature-item-one,
  .feature-item-three,
  .rectangle-parent {
    gap: var(--gap-16);
    padding-top: var(--padding-20);
    padding-bottom: var(--padding-20);
    box-sizing: border-box;
  }
  .feature-item-three,
  .rectangle-parent {
    padding-top: var(--padding-26);
    padding-bottom: var(--padding-26);
  }
  .rectangle-parent {
    padding-top: var(--padding-20);
    padding-bottom: var(--padding-20);
  }
  .testimonials-header-parent {
    gap: var(--gap-28);
    padding: var(--padding-23) var(--padding-78);
    box-sizing: border-box;
  }
  .testimonial-carousel {
    gap: var(--gap-28);
  }
  .pricing-header-parent {
    gap: var(--gap-20);
    padding: 34px var(--padding-78);
    box-sizing: border-box;
  }
  .pricing-plans-container {
    gap: var(--gap-20);
  }
  .section-starterplan {
    padding-top: 21px;
    padding-bottom: 21px;
    box-sizing: border-box;
  }
  .free {
    font-size: var(--fs-26);
    line-height: var(--lh-30);
  }
  .section-starterplan2 {
    padding-top: 21px;
    padding-bottom: 21px;
    box-sizing: border-box;
  }
  .h22 {
    font-size: var(--fs-26);
    line-height: var(--lh-30);
  }
  .faq-header-parent {
    gap: var(--gap-20);
    padding: 34px var(--padding-78);
    box-sizing: border-box;
  }
  .faq-question-container {
    max-width: 100%;
  }
  .faq-question-list2 {
    flex-wrap: wrap;
  }
  .faq-toggle-item-two {
    gap: var(--gap-28);
    padding: var(--padding-23) var(--padding-78);
    box-sizing: border-box;
  }
  .footer-content-wrapper-parent {
    padding-left: var(--padding-78);
    padding-right: var(--padding-78);
    box-sizing: border-box;
  }
  .footer-navigation-collection {
          flex-wrap: wrap;
        min-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        text-align: center;
  }
  .footer-brand-identity {
    display: flex;
    align-content: center;
    align-items: center;
    text-align: center;
}

}
@media screen and (max-width: 450px) {
  .frame-parent {
    padding-left: var(--padding-20);
    padding-right: var(--padding-20);
    box-sizing: border-box;
  }
  .build-trust-through-container {
    font-size: 43px;
    line-height: 53px;
  }
  .rating {
    font-size: var(--fs-16);
    line-height: var(--lh-19);
  }
  .how-it-works-header-parent {
    padding-left: var(--padding-20);
    padding-right: var(--padding-20);
    box-sizing: border-box;
  }
  .three-steps-from {
    font-size: var(--fs-24);
    line-height: var(--lh-29);
  }
  .step-detail-container-one {
    padding-top: var(--padding-20);
    padding-bottom: var(--padding-20);
    box-sizing: border-box;
  }
  .step-item-element {
    font-size: 29px;
    line-height: 35px;
  }
  .install-embedd {
    font-size: var(--fs-19);
    line-height: var(--lh-23);
  }
  .features-header-parent {
    padding-left: var(--padding-20);
    padding-right: var(--padding-20);
    box-sizing: border-box;
  }
  .everything-you-need {
    font-size: var(--fs-24);
    line-height: var(--lh-29);
  }
  .seven-review-widgets {
    font-size: var(--fs-19);
    line-height: var(--lh-24);
  }
  .pricing-header-parent,
  .testimonials-header-parent {
    padding-left: var(--padding-20);
    padding-right: var(--padding-20);
    box-sizing: border-box;
  }
  .free,
  .h22 {
    font-size: var(--fs-19);
    line-height: var(--lh-23);
  }
  .faq-header-parent {
    padding-left: var(--padding-20);
    padding-right: var(--padding-20);
    box-sizing: border-box;
  }
  .faq-question-container {
    gap: var(--gap-16);
  }
  .faq-question-list {
    flex-wrap: wrap;
  }
  .faq-toggle-item-two {
    padding-left: var(--padding-20);
    padding-right: var(--padding-20);
    box-sizing: border-box;
  }
  .footer-content-wrapper-parent {
    padding: var(--padding-36) var(--padding-20);
    box-sizing: border-box;
  }
  .footer-navigation-collection {
    gap: 25px;
  }
}

/* -----------------------------------------------------------
   Theme additions: accessibility, converted-element resets
----------------------------------------------------------- */
.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 1000;
	background: var(--color-gray-400);
	color: var(--color-white);
	padding: 0.8em 1.2em;
}
.skip-link:focus { top: 0; }

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px; overflow: hidden;
}

:focus-visible {
	outline: 2px solid var(--color-gold-200);
	outline-offset: 2px;
}

a.learn-more,
a.review-features {
	text-decoration: none;
	cursor: pointer;
	display: inline-block;
	background: none;
	border: none;
}

button.new-label,
button.trustyy-button-primary,
button.trustyy-button-primary2,
button.trustyy-button-primary7,
button.trustyy-button-primary8 {
	font: inherit;
}



/* -----------------------------------------------------------
   Blog / inner-page templates (index, single, page, 404)
   Reuses the same tokens as the landing page for consistency.
----------------------------------------------------------- */
.site-simple-header {
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--padding-16) var(--padding-32);
	background-color: var(--color-floralwhite-100);
	border-bottom: var(--border-1);
}
.site-simple-header .brand {
	font-family: var(--Heading-H4-fontFamily);
	font-weight: 700;
	font-size: var(--fs-24);
	color: var(--color-gray-200);
	text-decoration: none;
}
.site-simple-nav ul {
	list-style: none;
	display: flex;
	gap: var(--gap-24);
	margin: 0;
	padding: 0;
}
.site-simple-nav a {
	font-family: var(--Body-Body-1-fontFamily);
	font-weight: 500;
	color: var(--color-gray-200);
	text-decoration: none;
}
.site-simple-nav a:hover { color: var(--color-olive-300); }

.blog-wrap {
	width: 100%;
	max-width: var(--max-w-1200);
	margin: 0 auto;
	padding: var(--padding-60) var(--padding-32) var(--padding-80);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--gap-48);
	box-sizing: border-box;
	font-family: var(--Body-Body-1-fontFamily);
	color: var(--color-gray-200);
}
.blog-wrap.no-sidebar { grid-template-columns: minmax(0, 720px); justify-content: center; }

.blog-post-card {
	padding: var(--padding-32) 0;
	border-bottom: var(--border-1);
}
.blog-post-card:first-child { padding-top: 0; }
.blog-post-card .post-eyebrow {
	font-family: var(--Body-Body-1-fontFamily);
	font-size: var(--fs-14);
	color: var(--color-olive-300);
	font-weight: 600;
	margin-bottom: var(--gap-8);
}
.blog-post-card h2 {
	font-family: var(--Heading-H4-fontFamily);
	font-size: var(--fs-32);
	margin: 0 0 var(--gap-8);
}
.blog-post-card h2 a { color: var(--color-gray-200); text-decoration: none; }
.blog-post-card h2 a:hover { color: var(--color-olive-300); }
.blog-post-card .post-excerpt { font-size: var(--fs-16); color: var(--color-dimgray-300); }

.single-post-header { margin-bottom: var(--gap-32); }
.single-post-header h1 {
	font-family: var(--Heading-H2-fontFamily);
	font-size: var(--fs-48);
	letter-spacing: var(--ls--0_3);
	margin: 0 0 var(--gap-12);
	    font-weight: 600;
}
.single-post-meta {
	font-family: var(--Body-Body-1-fontFamily);
	font-size: var(--fs-14);
	color: var(--color-dimgray-300);
}
.single-post-content { font-size: var(--fs-18); line-height: var(--lh-28); }
.single-post-content h2 { font-family: var(--Heading-H4-fontFamily); margin-top: 1.6em; }
.single-post-content img { max-width: 100%; border-radius: var(--br-24); }

.page-content-wrap {
	    width: 100%;
    max-width: var(--max-w-1200);
    margin: 0 auto;
	padding: var(--padding-60) var(--padding-32) var(--padding-80);
	font-family: var(--Body-Body-1-fontFamily);
	color: var(--color-gray-200);
}

.widget-area .widget {
	background: var(--color-whitesmoke);
	border-radius: var(--br-24);
	padding: var(--padding-24);
	margin-bottom: var(--gap-24);
}
.widget-title {
	font-family: var(--Heading-H5-fontFamily);
	font-size: var(--fs-20);
	margin: 0 0 var(--gap-16);
}

.pagination-simple {
	display: flex;
	gap: var(--gap-12);
	margin-top: var(--gap-32);
	font-family: var(--Body-Body-1-fontFamily);
}
.pagination-simple a,
.pagination-simple span {
	padding: var(--padding-8) var(--padding-16);
	border-radius: var(--br-8);
	border: var(--border-1);
	text-decoration: none;
	color: var(--color-gray-200);
}
.pagination-simple .current { background: var(--color-darkolivegreen-100); color: var(--color-white); border-color: var(--color-darkolivegreen-100); }

.error-404-wrap {
	text-align: center;
	padding: var(--padding-156) var(--padding-32);
	max-width: 600px;
	margin: 0 auto;
}
.error-404-wrap h1 { font-family: var(--Heading-H2-fontFamily); font-size: var(--fs-48); }

@media (max-width: 820px) {
	.blog-wrap { grid-template-columns: 1fr; }
	.site-simple-nav { display: none; }
}

.search-form {
	display: flex;
	gap: var(--gap-8);
	max-width: 420px;
	margin: var(--gap-16) 0;
}
.search-form input[type="search"] {
	flex: 1;
	padding: var(--padding-12) var(--padding-16);
	border-radius: var(--br-12);
	border: var(--border-1);
	font-family: var(--Body-Body-1-fontFamily);
	font-size: var(--fs-16);
}

/* -----------------------------------------------------------
   Hero product mockup — matches the reference screenshot's
   overlapping review-widget composition. Background is a
   hardcoded static image (assets/images/hero-bg-black.jpg);
   reviewer/product photos are stylized placeholders since no
   real photography was provided for those.
----------------------------------------------------------- */
.hero-mockup {
	width: 100%;
	max-width: var(--max-w-1200);
	margin: 0 auto;
	position: relative;
	box-sizing: border-box;
	padding: 64px 40px 64px!important; 
	border-radius: var(--br-40);
	overflow: hidden;
	background-image:
		linear-gradient(0deg, rgba(20,17,1,0.55), rgba(20,17,1,0.15)),
		url("https://trustyyapp.com/wp-content/uploads/2026/08/website-greatest-assets.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-mockup-main-card {
	position: relative;
	z-index: 1;
	max-width: 900px;
	background: var(--color-white);
	border-radius: var(--br-24);
	box-shadow: var(--shadow-drop);
	padding: var(--padding-32);
	box-sizing: border-box;
}
.hero-mockup-summary-row {
	display: flex;
	align-items: flex-start;
	gap: var(--gap-24);
	padding-bottom: var(--padding-24);
	border-bottom: var(--border-11);
	flex-wrap: wrap;
}
.hero-mockup-photo {
	width: 150px;
	height: 150px;
	border-radius: var(--br-12);
	flex-shrink: 0;
	background: linear-gradient(150deg, #cdbf8e 0%, #8c8060 100%);
	overflow: hidden;
}
.hero-mockup-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hero-mockup-title-block { flex: 1 1 220px; min-width: 200px; }
.hero-mockup-title-block h3,
.hero-mockup-widget-card h3 {
	font-family: var(--Heading-H4-fontFamily);
	font-size: var(--fs-24);
	font-weight: 700;
	margin: 0 0 var(--gap-8);
	color: var(--color-gray-200);
}
.hero-mockup-score {
	font-family: var(--Heading-H3-fontFamily);
	font-size: var(--fs-40);
	font-weight: 700;
	color: var(--color-gray-200);
	line-height: 1;
	margin-bottom: var(--gap-8);
}
.hero-mockup-stars { color: var(--color-gold-300); font-size: var(--fs-20); margin-bottom: var(--gap-8); }
.hero-mockup-count { font-size: var(--fs-16); color: var(--color-dimgray-300); }
.hero-mockup-bars { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; min-width: 220px; }
.hero-mockup-bar-row { display: grid; grid-template-columns: 56px 1fr 34px; align-items: center; gap: 10px; font-size: var(--fs-14); color: var(--color-gray-200); }
.hero-mockup-bar-row b { font-weight: 400; color: var(--color-gray-200); text-align: right; }
.hero-mockup-bar-track { height: 6px; border-radius: 3px; background: var(--color-gainsboro-100); overflow: hidden; }
.hero-mockup-bar-fill { height: 100%; background: var(--color-gold-300); border-radius: 3px; }
.hero-mockup-bars-compact .hero-mockup-bar-row { font-size: 10px; grid-template-columns: 34px 1fr 22px; gap: 6px; }
.hero-mockup-bars-compact .hero-mockup-bar-track { height: 4px; }

.hero-mockup-reviews-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	margin-top: var(--padding-24);
}
.hero-mockup-review {
	display: flex;
	gap: var(--gap-12);
	align-items: flex-start;
	padding: 0 var(--padding-24) var(--padding-24) 0;
}
.hero-mockup-reviews-row .hero-mockup-review:nth-child(1) { grid-row: 1; grid-column: 1; }
.hero-mockup-reviews-row .hero-mockup-review:nth-child(2) { grid-row: 2; grid-column: 1; padding-top: var(--padding-24); border-top: var(--border-11); }
.hero-mockup-reviews-row .hero-mockup-review:nth-child(3) { grid-row: 1 / span 2; grid-column: 2; padding-left: var(--padding-24); border-left: var(--border-11); flex-direction: column; }
.hero-mockup-review-thumb {
	width: 100%;
	height: 90px;
	border-radius: var(--br-8);
	background: var(--color-gainsboro-200);
	margin-bottom: var(--gap-12);
}
.hero-mockup-review-name { font-size: var(--fs-16); font-weight: 700; color: var(--color-gray-200); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hero-mockup-verified { color: #2E7D46; font-size: 13px; }
.hero-mockup-date { font-weight: 400; color: var(--color-dimgray-300); font-size: var(--fs-13); margin-left: auto; }
.hero-mockup-review-stars { color: var(--color-gold-300); font-size: 13px; margin: 4px 0 8px; }
.hero-mockup-review p { font-size: var(--fs-14); color: var(--color-dimgray-300); margin: 0; line-height: 1.5; }

.hero-mockup-widget-card {
	position: absolute;
	z-index: 2;
	right: 40px;
	bottom: 56px;
	width: 300px;
	max-width: calc(100% - 80px);
	background: var(--color-white);
	border-radius: var(--br-24);
	box-shadow: var(--shadow-drop);
	padding: var(--padding-24);
	box-sizing: border-box;
}
.hero-mockup-widget-card .hero-mockup-score { font-size: var(--fs-26); }
.hero-mockup-widget-card .hero-mockup-count { font-size: var(--fs-13); margin-bottom: var(--gap-12); }
.hero-mockup-write-btn {
	width: 100%;
	margin-top: var(--gap-12);
	padding: var(--padding-12);
	background: var(--color-gray-400);
	color: var(--color-white);
	border: none;
	border-radius: var(--br-8);
	font-family: var(--Body-Body-1-fontFamily);
	font-weight: 500;
	font-size: var(--fs-14);
	cursor: pointer;
}
.hero-mockup-widget-meta {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--color-dimgray-300);
	margin-top: var(--gap-16);
	padding-bottom: var(--gap-12);
	border-bottom: var(--border-11);
}
.hero-mockup-widget-review { display: flex; gap: var(--gap-8); padding-top: var(--gap-12); }
.hero-mockup-widget-review .hero-mockup-review-name,
.hero-mockup-widget-review .hero-mockup-review-stars,
.hero-mockup-widget-review p { font-size: 11px; }
.hero-mockup-widget-review .avatar { width: 26px; height: 26px; }
.hero-mockup-widget-photos { display: flex; gap: 6px; margin-top: var(--gap-8); }
.hero-mockup-widget-photos span { width: 34px; height: 34px; border-radius: 6px; background: var(--color-gainsboro-200); display: inline-block; }
.hero-mockup-store-reply {
	margin-top: var(--gap-12);
	padding: var(--padding-12);
	background: var(--color-whitesmoke);
	border-radius: var(--br-8);
}
.hero-mockup-store-reply b { font-size: 11px; color: var(--color-gray-200); }
.hero-mockup-store-reply p { font-size: 11px; color: var(--color-dimgray-300); margin: 4px 0 0; line-height: 1.4; }

@media (max-width: 900px) {
	.hero-mockup-widget-card { position: static; width: 100%; max-width: none; margin-top: var(--gap-24); }
	.hero-mockup { padding: 40px 20px; }
	.hero-mockup-reviews-row { grid-template-columns: 1fr; }
	.hero-mockup-reviews-row .hero-mockup-review:nth-child(2),
	.hero-mockup-reviews-row .hero-mockup-review:nth-child(3) {
		grid-column: 1;
		padding-left: 0;
		border-left: none;
		padding-top: var(--padding-24);
		border-top: var(--border-11);
	}
}
@media (max-width: 600px) {
	.hero-mockup-summary-row { flex-direction: column; }
	.hero-mockup-photo { width: 100%; height: 160px; }
}

.trusted-by-logos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap-40);
	flex-wrap: wrap;
	width: 100%;
}
.trusted-by-logos span {
	font-family: var(--Heading-H4-fontFamily);
	font-weight: 600;
	font-size: var(--fs-20);
	color: var(--color-darkgray);
	white-space: nowrap;
	opacity: 0.85;
}

/*===== Logo slider code start =======*/
.logo-marquee {
	width: 100%;
	overflow: hidden;
	/* Fades the edges so logos don't pop in/out abruptly */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.logo-track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: var(--gap-64);
	padding-right: var(--gap-64); /* keeps spacing even across the seam */
	animation: trustyy-marquee 40s linear infinite;
}

.logo-marquee:hover .logo-track { animation-play-state: paused; }

.logo-item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.logo-item img {
	height: 40px;
	width: auto;
	display: block;
	object-fit: contain;
	opacity: 0.85;
}

@keyframes trustyy-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.logo-track { animation: none; justify-content: center; flex-wrap: wrap; }
}

@media (max-width: 825px) {
	.logo-track { gap: var(--gap-40); padding-right: var(--gap-40); animation-duration: 28s; }
	.logo-item img { height: 32px; }
}
/*===== Logo slider code end  =======*/

/* -----------------------------------------------------------
   Our Widgets section (new — not present in the original
   Figma export, added to match the updated reference design)
----------------------------------------------------------- */
.widgets-header-parent {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--color-white);
	padding: var(--padding-80) var(--padding-156);
	gap: var(--gap-40);
	box-sizing: border-box 
}
.widget-tabs {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap-8);
	flex-wrap: wrap;
}
.widget-tab {
	font-family: var(--Label-Label-1-fontFamily);
	font-size: var(--fs-18);
	font-weight: 500;
	color: var(--color-dimgray-300);
	background: none!important;
	border: none!important;
	border-radius: var(--br-8);
	padding: var(--padding-8) var(--padding-16);
	cursor: pointer;
}
.widget-tab.is-active {
	background: none!important;
	border-color: none!important;
	color: var(--color-gray-200);
}
.widget-showcase {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap-32);
	flex-wrap: wrap;
	background: var(--color-whitesmoke);
	border-radius: var(--br-32);
	padding: var(--padding-32);
	max-width: 720px;
	width: 100%;
	box-sizing: border-box;
}
.widget-showcase-photo svg { width: 220px; height: auto; border-radius: var(--br-24); display: block; }
.widget-showcase-card { max-width: 300px; }
.widget-showcase-card h3 { font-size: var(--fs-20); line-height: 1.3; margin-bottom: var(--gap-8); }
.widget-showcase-stars { color: var(--color-gold-300); font-size: var(--fs-14); margin-bottom: var(--gap-8); }
.widget-showcase-stars span { color: var(--color-dimgray-300); margin-left: 6px; }
.widget-showcase-price { font-family: var(--Heading-H5-fontFamily); font-size: var(--fs-24); font-weight: 600; margin-bottom: var(--gap-16); }
.widget-showcase-add,
.widget-showcase-buy {
	display: block;
	width: 100%;
	padding: var(--padding-12);
	margin-bottom: var(--gap-8);
	border-radius: var(--br-12);
	font-family: var(--Body-Body-1-fontFamily);
	font-weight: 500;
	font-size: var(--fs-14);
	cursor: pointer;
}
.widget-showcase-add { background: var(--color-white); border: var(--border-1); color: var(--color-gray-200); }
.widget-showcase-buy { background: var(--color-darkolivegreen-100); border: none; color: var(--color-white); }

@media (max-width: 825px) {
	.widgets-header-parent { padding: var(--padding-52) var(--padding-32); }
}

/* ----- Our Widgets: tab panels ----- */
.widget-showcase-panels {
	width: 100%;
	max-width: 720px;
	box-sizing: border-box;
	    padding-bottom: 80px;
}

.widget-showcase-panel {
	display: none;
	padding: 0px!important;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}
.widget-showcase-panel.is-active {
	display: block;
	animation: trustyy-tab-fade 0.28s ease;
}
.widget-showcase-panel[hidden] { display: none; }

.widget-showcase-panel img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--br-24);
	box-shadow: 0 257.19px 144.804px 0 rgba(0, 0, 0, 0.00), 0 164.256px 131.837px 0 rgba(0, 0, 0, 0.01), 0 92.934px 110.224px 0 rgba(0, 0, 0, 0.05), 0 41.064px 82.128px 0 rgba(0, 0, 0, 0.09), 0 10.807px 45.386px 0 rgba(0, 0, 0, 0.10)!important;
}

.widget-showcase-panel:focus-visible {
	outline: 2px solid var(--color-gold-200);
	outline-offset: 4px;
}

.widget-tab:hover { color: var(--color-gray-200); }
.widget-tab { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }

@keyframes trustyy-tab-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.widget-showcase-panel.is-active { animation: none; }
}

@media (max-width: 600px) {
	.widget-tabs { gap: 6px; }
	.widget-tab { padding: var(--padding-6) var(--padding-12); }
	.widget-showcase-panel { padding: var(--padding-12); border-radius: var(--br-24); }
}
/* -----------------------------------------------------------
   How It Works accordion (restructured from the original
   3-column layout to match the updated reference design)
----------------------------------------------------------- */
.steps-accordion {
	width: 100%;
	max-width: 1000px;
	display: flex;
	flex-direction: column;
	gap: var(--gap-16);
}
.step-accordion-item {
	background: var(--color-white);
	border-radius: var(--br-24);
	overflow: hidden;
}
.step-accordion-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--gap-24);
	padding: var(--padding-24) var(--padding-32);
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
}
.step-accordion-number {
	font-family: var(--Heading-H2-fontFamily);
	font-size: var(--fs-48);
	font-weight: 600;
	color: var(--color-lightgray-100);
}
.step-accordion-item.is-open .step-accordion-number { color: var(--color-olive-300); }
.step-accordion-title {
	font-family: var(--Heading-H4-fontFamily);
	font-size: var(--fs-24);
	font-weight: 700;
	color: var(--color-gray-200);
}
.step-accordion-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}
.step-accordion-item.is-open .step-accordion-panel { max-height: 640px; }
.step-accordion-panel-inner {
	padding: 0 var(--padding-32) var(--padding-32);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gap-16);
}
.step-accordion-visual { width: 100%; display: flex; justify-content: center; padding-top: var(--gap-16); }

.app-embed-mockup {
	width: 100%;
	max-width: 420px;
	background: var(--color-gray-400);
	border-radius: var(--br-24);
	padding: var(--padding-20);
	box-sizing: border-box;
}
.app-embed-mockup-bar { display: flex; gap: 6px; margin-bottom: var(--gap-16); }
.app-embed-mockup-bar span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.25); display: inline-block; }
.app-embed-mockup-label { color: var(--color-lightgray-100); font-size: var(--fs-13); margin-bottom: var(--gap-12); font-family: var(--font-inter); }
.app-embed-mockup-row {
	display: flex;
	align-items: center;
	gap: var(--gap-12);
	background: rgba(255,255,255,0.06);
	border-radius: var(--br-12);
	padding: var(--padding-12);
}
.app-embed-mockup-icon {
	width: 32px; height: 32px; border-radius: 8px;
	background: var(--color-gold-200);
	color: var(--color-gray-400);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-family: var(--Heading-H4-fontFamily);
}
.app-embed-mockup-row-title { color: var(--color-white); font-size: var(--fs-14); font-weight: 600; }
.app-embed-mockup-row-sub { color: var(--color-lightgray-100); font-size: 11px; }
.app-embed-mockup-toggle {
	margin-left: auto;
	width: 32px; height: 18px; border-radius: 10px;
	background: var(--color-gold-200);
	position: relative;
} 
.app-embed-mockup-toggle::after {
	content: "";
	position: absolute; top: 2px; right: 2px;
	width: 14px; height: 14px; border-radius: 50%; background: var(--color-white);
}

.built-for-shopify-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #D7EBF0;
    color: #1E1E1E;
    font-family: var(--Body-Body-1-fontFamily);
    font-size: var(--fs-14);
    font-weight: 600;
    padding: 8px 16px;
    margin-bottom: var(--gap-16);
    border-radius: 5.677px;
    border: 1.135px solid #B5E0FF;
}

.built-for-shopify-badge svg {
    width: 15px;
    height: 15px;
}
/* -----------------------------------------------------------
   Blog listing page (home.php)
----------------------------------------------------------- */
.blog-index { background: var(--color-floralwhite-100); }

.blog-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 80px 64px;
	gap: var(--gap-24);
	border-top-left-radius: var(--br-32);
	border-top-right-radius: var(--br-32);
	border-bottom-left-radius: 56px;
	border-bottom-right-radius: 56px;
	text-align: center;
	
	  background-image: url('https://trustyyapp.com/wp-content/uploads/2026/08/Vector-1-1.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100%;
    
}
.blog-hero-pill {
	background: rgba(255,255,255,0.74);
	border: none;
	border-radius: var(--br-12);
	padding: 16px 38px;
	font-family: var(--Body-Body-1-fontFamily);
	font-weight: 700;
	font-size: var(--fs-16);
	color: var(--color-gray-200);
	cursor: default;
}
.blog-hero-title {
	font-family: var(--Heading-H2-fontFamily);
	font-weight: 600;
	font-size: var(--fs-48);
	max-width: 740px;
	margin: 0;
	color: var(--color-gray-200);
}
@media (min-width: 900px) { .blog-hero-title { font-size: 56px; } }

.blog-index-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--padding-32) var(--padding-40);
	box-sizing: border-box;
}
@media (min-width: 1100px) { .blog-index-inner { padding-left: var(--padding-156); padding-right: var(--padding-156); } }

.blog-image-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg,#E7DFC4,#CFC59B); border-radius: inherit; }

.blog-featured-card {
	display: flex;
	align-items: center;
	background: var(--color-white);
	border-radius: var(--br-24);
	margin: var(--gap-40) 0 80px;
	gap: var(--gap-40);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	flex-wrap: wrap;
}
.blog-featured-image { flex: 1 1 320px; height: 306px; min-width: 280px; }
.blog-featured-image img, .blog-featured-image .blog-image-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--br-24); }
.blog-featured-body { flex: 1 1 320px; padding: var(--padding-24); display: flex; flex-direction: column; gap: var(--gap-16); }
.blog-featured-body h2 { font-family: var(--Heading-H3-fontFamily); font-size: var(--fs-32); margin: 0; color: var(--color-gray-200);font-weight: 500; }
.blog-featured-body p { font-family: var(--Body-Body-1-fontFamily); font-size: var(--fs-18); color: var(--color-dimgray-300); margin: 0; }

.blog-post-meta { display: flex; align-items: center; gap: var(--gap-8); flex-wrap: wrap; }
.blog-post-meta img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.blog-post-meta span { font-family: var(--Body-Body-1-fontFamily); font-size: var(--fs-14); color: var(--color-gray-200);font-weight: 500; }

.blog-topics { display: flex; flex-direction: column; align-items: center; gap: var(--gap-24); text-align: center; margin-bottom: var(--gap-48); }
.blog-topics h2 { font-family: var(--Heading-H3-fontFamily); font-size: var(--fs-48); margin: 0; color: var(--color-gray-200); }
.blog-search-form {
	display: flex;
	align-items: center;
	background: var(--color-white);
	border-radius: 999px;
	padding: 14px 20px;
	gap: var(--gap-8);
	width: 100%;
	max-width: 640px;
	box-sizing: border-box;
}
.blog-search-form input {
	flex: 1;
	border: none;
	background: none;
	font-family: var(--Body-Body-1-fontFamily);
	font-size: var(--fs-16);
	color: var(--color-gray-200);
	outline: none;
}
.blog-search-form input::placeholder { color: #999; }
.blog-topic-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-12); max-width: 900px; }
.blog-topic-pill {
	flex-shrink: 0;
	border-radius: 999px;
	padding: 8px 16px;
	font-family: var(--Body-Body-1-fontFamily);
	font-size: var(--fs-16);
	text-decoration: none;
	background: rgba(81,74,5,0.11);
	color: #140018;
}
.blog-topic-pill.is-active { background: var(--color-gray-200); color: var(--color-white); }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-24); margin-bottom: var(--gap-48); }
.blog-grid-card { display: flex; flex-direction: column; background: var(--color-white); border-radius: var(--br-24); overflow: hidden; text-decoration: none; color: inherit; gap: var(--gap-24); }
.blog-grid-image { width: 100%; height: 203px; }
.blog-grid-image img, .blog-grid-image .blog-image-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-grid-body { padding: 0 var(--padding-24) var(--padding-24); display: flex; flex-direction: column; gap: var(--gap-16); }
.blog-grid-body h3 { font-family: var(--Heading-H4-fontFamily); font-size: var(--fs-24); font-weight: 600; margin: 0; color: var(--color-gray-200); }

.blog-load-more { display: flex; justify-content: center; margin-bottom: var(--gap-48); }
.blog-load-more a {
	background: rgba(57,51,3,0.5);
	color: var(--color-white);
	border-radius: var(--br-12);
	padding: 18px 40px;
	font-family: var(--Body-Body-1-fontFamily);
	font-size: var(--fs-18);
	text-decoration: none;
}

.blog-cta-banner {
	display: flex;
	align-items: center;
	background: #FFF2AA;
	border-radius: var(--br-32);
	padding: var(--padding-48) var(--padding-32);
	gap: var(--gap-48);
	flex-wrap: wrap;
}
.blog-cta-text { flex: 1 1 320px; display: flex; flex-direction: column; gap: var(--gap-32); }
.blog-cta-text h2 { font-family: var(--Heading-H3-fontFamily); font-size: var(--fs-40); max-width: 480px; margin: 0; color: var(--color-gray-200); }
.blog-cta-image {
	flex: 1 1 320px;
	height: 300px;
	border-radius: var(--br-32);
	/*background: linear-gradient(135deg, #cdbf8e 0%, #8c8060 100%);*/
}

@media (max-width: 900px) {
	.blog-grid { grid-template-columns: repeat(2, 1fr); }
	.blog-hero { padding: 48px 24px; }
	.blog-index-inner { padding-left: var(--padding-20); padding-right: var(--padding-20); }
}
@media (max-width: 600px) {
	.blog-grid { grid-template-columns: 1fr; }
	.blog-featured-card { flex-direction: column; }
	.blog-featured-image { width: 100%; }
	.blog-cta-image {height: auto!important;}
}

/* -----------------------------------------------------------
   Single blog post (single.php)
----------------------------------------------------------- */
.blog-single { background: var(--color-floralwhite-100); }
.blog-single-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: var(--padding-80) var(--padding-40);
	display: flex;
	align-items: flex-start;
	gap: 56px;
	box-sizing: border-box;
	flex-wrap: wrap;
}

.blog-single-sidebar {
	flex: 0 0 313px;
	max-width: 313px;
	display: flex;
	flex-direction: column;
	gap: var(--gap-32);
	position: sticky;
	top: 24px;
}
.blog-toc {
	background: var(--color-white);
	border-radius: var(--br-16);
	padding: var(--padding-16);
}


.blog-toc a.is-active {
	color: var(--color-olive-300);
	font-weight: 700;
	background: rgba(57, 51, 3, 0.06);
	border-radius: var(--br-8);
}


.blog-toc h2 { font-family: var(--Heading-H5-fontFamily); font-size: var(--fs-20); font-weight: 700; margin: 0 0 var(--gap-12); color: var(--color-gray-200); }
.blog-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.blog-toc li { border-top: var(--border-11); }
.blog-toc li:first-child { border-top: none; }
.blog-toc a { display: block; padding: var(--padding-12); font-family: var(--Body-Body-1-fontFamily); font-size: var(--fs-16); color: var(--color-gray-200); text-decoration: none; }
.blog-toc a:hover { color: var(--color-olive-300); }

.blog-sidebar-cta {
	background: #FFF2AA;
	border-radius: var(--br-24);
	padding: var(--padding-20);
	display: flex;
	flex-direction: column;
	gap: var(--gap-24);
}
.blog-sidebar-cta-image { width: 100%;  }
.blog-sidebar-cta h3 { font-family: var(--Heading-H5-fontFamily); font-size: var(--fs-24); margin: 0; color: var(--color-gray-200); }

.blog-single-article { flex: 1 1 480px; min-width: 280px; display: flex; flex-direction: column; gap: var(--gap-32); }
.blog-single-header h1 { font-family: var(--Heading-H2-fontFamily); font-size: var(--fs-48); font-weight: 600; margin: 0 0 var(--gap-16); color: var(--color-gray-200); }
.blog-single-thumbnail { width: 100%; border-radius: var(--br-24); overflow: hidden; }
.blog-single-thumbnail img, .blog-single-thumbnail .blog-image-placeholder { width: 100%; height: 480px; object-fit: cover; display: block; }

.blog-single-content { font-family: var(--Body-Body-1-fontFamily); font-size: var(--fs-18); line-height: 1.7; color: var(--color-gray-200); }
.blog-single-content p { margin: 0 0 1.3em; }
.blog-single-content h2 { font-family: var(--Heading-H3-fontFamily); font-size: var(--fs-40); font-weight: 600; margin: 1em 0 0.6em; }
.blog-single-content h2:first-child { padding-top: 0; border-top: none; margin-top: 0; }
.blog-single-content h3 { font-family: var(--Heading-H4-fontFamily); font-size: var(--fs-32); font-weight: 600; margin: 1em 0 0.6em; }
.blog-single-content img { max-width: 100%; border-radius: var(--br-24); }
.blog-single-content ul, .blog-single-content ol { padding-left: 1.4em; }
.blog-single-content a { color: var(--color-olive-300); }
.blog-single-content blockquote { margin: 1.6em 0; padding: 0.2em 0 0.2em 1.3em; border-left: 3px solid var(--color-gold-300); font-style: italic; color: var(--color-dimgray-300); }

@media (max-width: 1000px) {
	.blog-single-sidebar { flex: 1 1 100%; max-width: none; position: static; flex-direction: row; }
	.blog-single-inner { flex-direction: column; }
}
@media (max-width: 700px) {
	.blog-single-sidebar { flex-direction: column; }
	.blog-single-inner { padding: var(--padding-40) var(--padding-20); }
	.blog-single-header h1 { font-size: var(--fs-32); }
	.blog-single-content h2 { font-size: var(--fs-26); }
}


  .hiw { padding: 56px 24px; }

  .hiw-head { text-align: center; margin-bottom: 56px; }
  .hiw-pill {
    display: inline-block;
    background: #fff;
    border: 1px solid #e2cb05;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 18px;
    font-weight: 500;
  }
  .hiw-head h2 {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.3px;
    margin: 24px 0 0;
  }

  .hiw-box {
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
    border-radius: 40px;
    padding: 64px;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 64px;
    align-items: center;
  }

  /* ---- left: steps ---- */
  .step {
    position: relative;
    padding: 24px 0;
    border-bottom: 1px solid #dedede;
  }
  .step:first-child { padding-top: 0; }

  .step-btn {
    width: 100%;
    display: block;
    padding: 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
  }
  .step-num {
    display: block;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    opacity: 0.35;
  }
  .step.active .step-num { opacity: 1; }
  .step-title {
    display: block;
    font-size: 24px;
    font-weight: 700;
    margin-top: 16px;
  }

  .step-body { display: none; }
  .step.active .step-body { display: block; }
  .step-body p {
    font-size: 18px;
    line-height: 28px;
    color: #545454;
    margin: 16px 0 24px;
  }

  .step-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #393303;
    color: #fff;
    border: 0;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
  }
  .step-cta span {
    background: #decb21;
    color: #141101;
    border-radius: 8px;
    padding: 6px 10px;
    line-height: 1;
  }

  /* progress line on the divider */
  .step-bar {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 0;
    background: #e2cb05;
  }

  /* ---- right: video ---- */
  .hiw-media {
    position: relative;
    background: #fbf7ec;
    border-radius: 32px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
  }
  .hiw-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  @media (max-width: 900px) {
    .hiw-box {
      grid-template-columns: 1fr;
      gap: 32px;
      padding: 24px;
      border-radius: 32px;
    }
    .hiw-media { order: -1; aspect-ratio: 16 / 10; }
    .hiw-head h2 { font-size: 28px; }
    .step-num { font-size: 32px; }
    .step-title { font-size: 20px; }
  }
  
/*===== Custom header start===*/
/* -----------------------------------------------------------
   Floating pill header (desktop + mobile)
----------------------------------------------------------- */
.site-header {
	align-self: stretch;
	width: 100%;
	box-sizing: border-box;
	padding: var(--gap-48) var(--padding-32);
	background-color: var(--color-floralwhite-100);
	z-index: 98;
}

.site-header-inner {
    max-width: 750px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--gap-24);
    box-sizing: border-box;
    padding: var(--padding-12) var(--padding-12) var(--padding-12) var(--padding-24);
    background: var(--color-white);
    border: var(--border-1);
    border-radius: 14px;
    box-shadow: 0 6px 0 rgba(214, 206, 176, 0.35), var(--shadow-drop);
    justify-content: space-between;
}
 
/* ---- brand ---- */ 
.site-header-brand {
	/*display: inline-flex;*/
	/*align-items: center;*/
	/*gap: 2px;*/
	/*text-decoration: none;*/
	/*margin-right: auto;*/
}
.site-header-brand img,
.site-header-brand .custom-logo {
	height: 30px; 
	width: auto;
	display: block;
}
.site-header-mark {
	display: inline-flex;
	/*width: 18px;*/
	color: var(--color-olive-100);
}
.site-header-mark svg {height: auto;     width: 207px !important; }
.site-header-wordmark {
	font-family: var(--Heading-H4-fontFamily);
	font-size: var(--fs-26);
	font-weight: 600;
	letter-spacing: -0.3px;
	color: var(--color-olive-100);
	line-height: 1;
}

/* ---- desktop nav ---- */
.site-header-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--gap-28);
}
.site-header-nav a {
	display: inline-flex;
	align-items: center;
	gap: var(--gap-8);
	font-family: var(--Body-Body-1-fontFamily);
	font-size: var(--fs-16);
	font-weight: 500;
	color: var(--color-gray-200);
	text-decoration: none;
	white-space: nowrap;
}
.site-header-nav a:hover { color: var(--color-olive-300); }
.site-header-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ---- CTA ---- */
.site-header-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--gap-10);
	padding: var(--padding-8) var(--padding-8) var(--padding-8) var(--padding-20);
	background: var(--color-gold-100);
	border: 0;
	border-radius: var(--br-12);
	font-family: var(--Body-Body-1-fontFamily);
	font-size: var(--fs-16);
	font-weight: 600;
	color: var(--color-gray-400);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}
.site-header-cta:hover { background: var(--color-gold-200); }
.site-header-cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--br-8);
	background: var(--color-gray-400);
	color: var(--color-white);
	flex-shrink: 0;
}
.site-header-cta-icon svg { width: 18px; height: 18px; }

/* ---- hamburger ---- */
.site-header-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--br-8);
	cursor: pointer;
	color: var(--color-gray-200);
}
.site-header-toggle-bars {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 20px;
}
.site-header-toggle-bars span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.25s ease, opacity 0.2s ease;
}
.site-header-toggle[aria-expanded="true"] .site-header-toggle-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header-toggle[aria-expanded="true"] .site-header-toggle-bars span:nth-child(2) { opacity: 0; }
.site-header-toggle[aria-expanded="true"] .site-header-toggle-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- mobile panel ---- */
.site-header-mobile {
	max-width: var(--max-w-1200);
	margin: var(--gap-12) auto 0;
	padding: var(--padding-20);
	box-sizing: border-box;
	background: var(--color-white);
	border: var(--border-1);
	border-radius: var(--br-24);
	box-shadow: var(--shadow-drop);
	display: flex;
	flex-direction: column;
	gap: var(--gap-16);
}
.site-header-mobile[hidden] { display: none; }
.site-header-mobile ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.site-header-mobile li { border-top: var(--border-11); }
.site-header-mobile li:first-child { border-top: none; }
.site-header-mobile a {
	display: block;
	padding: var(--padding-12) var(--padding-12);
	font-family: var(--Body-Body-1-fontFamily);
	font-size: var(--fs-18);
	font-weight: 500;
	color: var(--color-gray-200);
	text-decoration: none;
}
.site-header-cta--block { justify-content: space-between; width: 100%; box-sizing: border-box; }

.site-header a:focus-visible,
.site-header button:focus-visible {
	outline: 2px solid var(--color-gold-200);
	outline-offset: 3px;
}

/* ---- breakpoints ---- */
@media (max-width: 900px) {
	.site-header { padding: var(--gap-12) var(--padding-20); }
	.site-header-inner { padding: var(--padding-8) var(--padding-8) var(--padding-8) var(--padding-16); }
	.site-header-nav,
	.site-header-inner > .site-header-cta { display: none; }
	.site-header-toggle { display: inline-flex; }
	.site-header-wordmark { font-size: var(--fs-24); }
}

@media (min-width: 901px) {
	.site-header-mobile { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.site-header-toggle-bars span,
	.site-header-cta { transition: none; }
}
/*===== Custom header end===*/


/* Responsive css start =========== */
/* ===========================================================
   FRONT PAGE — RESPONSIVE FIXES
   Must stay last in style.css (it overrides earlier media queries).
=========================================================== */

/* ---------- 1. Global guards ---------- */
*, *::before, *::after { box-sizing: border-box; }

/*html, body { overflow-x: hidden; max-width: 100%; }*/
html, body { max-width: 100%; }
body { overflow-x: clip; } 

img, svg, video, iframe {
	max-width: 100%;
	height: auto;
}

/* Fluid section rhythm — one knob for the whole page */
:root {
	--sec-x: clamp(20px, 6vw, 156px);
	--sec-y: clamp(40px, 5vw, 80px);
}

/* ---------- 2. Fluid section padding ---------- */
.frame-parent {
	padding-left: var(--sec-x);
	padding-right: var(--sec-x);
	gap: clamp(24px, 4vw, 48px);
}
.trusted-by-display        { padding: var(--sec-y) var(--sec-x); }
.hiw                       { padding: var(--sec-y) var(--sec-x); }
.features-header-parent,
.widgets-header-parent,
.pricing-header-parent,
.faq-header-parent,
.testimonials-header-parent,
.faq-toggle-item-two,
.footer-content-wrapper-parent {
	padding-left: var(--sec-x);
	padding-right: var(--sec-x);
	padding-top: var(--sec-y);
	padding-bottom: var(--sec-y);
}
.features-grid { padding-left: 0; padding-right: 0; }
footer.footer-content-wrapper-parent {
    padding: 32px 0;
}
/* ---------- 3. Fluid typography ---------- */
.build-trust-through-container {
	font-size: clamp(32px, 6vw, 56px);
	line-height: 1.15;
	letter-spacing: clamp(-0.8px, -0.1vw, -0.3px);
}
.three-steps-from,
.everything-you-need,
.hiw-head h2 {
	font-size: clamp(24px, 4vw, 40px);
	line-height: 1.2;
}
h2.three-steps-from {
    border-bottom: 1px solid #E3E3E3;
    padding-bottom: 40px;
}

.seven-review-widgets      { font-size: clamp(19px, 2.2vw, 24px); line-height: 1.3; }
.free, .h22                { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; }
.step-num                  { font-size: clamp(28px, 4vw, 40px); }
.step-title                { font-size: clamp(19px, 2.4vw, 24px); }
.trusted-by-300            { font-size: clamp(16px, 2vw, 18px); }

/* ---------- 4. Kill fixed heights / widths ---------- */
.section-starterplan,
.feature-item-three        { height: auto; }
.all-plans-include         { height: auto; }
.section-starterplan-child { width: 100%; }
.will-the-widgets          { width: auto; max-width: 100%; }
.single-review-card,
.faq-question-list,
.faq-question-list2        { width: 100%; max-width: 100%; }
.trustyy-button-primary2   { width: auto; max-width: 100%; }
.footer-brand-identity     { min-width: 0; }
.feature-item-one,
.rectangle-parent          { min-width: 0; }
.step-detail-container-one,
.scene-1-4-1,
.scene-1-4-12              { min-width: 0; }

/* ---------- 5. Hero ---------- */
.trust-description-block {
	padding-left: 0;
	padding-right: 0;
}
.hero-mockup {
	padding: clamp(20px, 4vw, 64px) clamp(16px, 3vw, 40px) !important;
	border-radius: clamp(16px, 3vw, 40px);
}
.hero-mockup img {
	width: 100%;
	height: auto;
	display: block;
}
.built-for-shopify-badge { font-size: clamp(12px, 1.6vw, 14px); }

.trustyy-button-primary-parent { flex-wrap: wrap; }
.trustyy-button-primary,
.trustyy-button-primary2 { flex: 0 1 auto; }

/* ---------- 6. How it works ---------- */
.hiw-box {
	padding: clamp(24px, 4vw, 64px);
	gap: clamp(24px, 4vw, 64px);
	border-radius: clamp(24px, 3vw, 40px);
}
.step-cta { flex-wrap: wrap; font-size: clamp(15px, 1.8vw, 18px); }

/* ---------- 7. Features ---------- */
.features-row-one { flex-wrap: wrap; }
.feature-visual-one { width: 100%; }

/* ---------- 8. Widgets tabs ---------- */
.widget-showcase-panels { max-width: 100%; }
.widget-tabs { gap: 8px; }

/* ---------- 9. Pricing ---------- */
.pricing-plans-container { flex-wrap: wrap; align-items: stretch; }
.section-starterplan,
.section-starterplan2 {
	flex: 1 1 320px;
	padding: clamp(20px, 3vw, 32px);
}
.section-starterplan2 { margin-top: 40px; }
.use-all-review { font-size: clamp(14px, 1.8vw, 16px); }

/* ---------- 10. Footer ---------- */
.footer-content-wrapper { flex-wrap: wrap; row-gap: var(--gap-32); }
.footer-brand-identity {
	flex: 1 1 320px;
	padding: clamp(16px, 3vw, 32px);
}
.footer-navigation-collection { flex: 1 1 280px; gap: clamp(24px, 4vw, 51px); }

/* ===========================================================
   BREAKPOINTS
=========================================================== */

@media (max-width: 1100px) {
	.hiw-box { grid-template-columns: 1fr; }
	.hiw-media { order: -1; }
}

@media (max-width: 900px) {
	.frame-parent { gap: var(--gap-24); }
	.trusted-by-display { gap: var(--gap-24); }
	.section-starterplan2 { margin-top: 48px; }
	.footer-brand-identity { flex-basis: 100%; }
}

@media (max-width: 700px) {
	.faq-question-list2 { flex-wrap: nowrap; }
	.pricing-plans-container { gap: var(--gap-24); }
	.list, .list2 { gap: var(--gap-16); }
	.item { gap: var(--gap-8); }
	.step-cta { justify-content: center; }
}

@media (max-width: 480px) {
	.trustyy-button-primary,
	.trustyy-button-primary2,
	.trustyy-button-primary7,
	.trustyy-button-primary8 { 
	    /*width: 100%;*/
	    } 
	/*.trustyy-button-primary-parent { flex-direction: column; align-items: stretch; }*/

	.most-popular-wrapper {
		width: 160px;
		left: calc(50% - 80px);
		top: -26px;
		padding: 8px;
	}
	.hiw-box { padding: 20px; }
	.widget-tab { padding: 6px 10px; }
	.reviewer-details .seven-review-widgets { font-size: 18px; }
	.set-up-in { font-size: 15px; }
}
/* Responsive css end =========== */


/* ===========================================================
   Blog listing — responsive + filter states
   Loaded after style.css, so these win.
=========================================================== */

.blog-index { --blog-gutter: clamp(20px, 6vw, 156px); overflow-x: clip; }
.blog-index *, .blog-index *::before, .blog-index *::after { box-sizing: border-box; }
.blog-index img { max-width: 100%; height: auto; display: block; }

.blog-index-inner {
	padding-left: var(--blog-gutter);
	padding-right: var(--blog-gutter);
}

/* ---- Hero ---- */
.blog-hero { padding: clamp(40px, 7vw, 80px) clamp(20px, 5vw, 64px); }
.blog-hero-title { font-size: clamp(28px, 6vw, 56px); line-height: 1.15; }
.blog-hero-pill {
	display: inline-block;
	padding: clamp(12px, 2vw, 16px) clamp(24px, 4vw, 38px);
	font-size: clamp(14px, 1.6vw, 16px);
}

/* ---- Featured card ---- */
.blog-featured-card[hidden] { display: none; }
.blog-featured-image { height: auto; aspect-ratio: 16 / 11; }
.blog-featured-image img,
.blog-featured-image .blog-image-placeholder { height: 100%; object-fit: cover; }
.blog-featured-body h2 { font-size: clamp(22px, 3vw, 32px); line-height: 1.22; }
.blog-featured-body p  { font-size: clamp(15px, 1.7vw, 18px); line-height: 1.6; }

/* ---- Topics ---- */
.blog-topics h2 { font-size: clamp(26px, 4.5vw, 48px); line-height: 1.2; }
.blog-search-form { padding: clamp(12px, 1.8vw, 14px) clamp(16px, 2vw, 20px); }
.blog-search-form input { min-width: 0; -webkit-appearance: none; appearance: none; }
.blog-search-form:focus-within { box-shadow: 0 0 0 2px var(--color-gold-200); }
.blog-search-icon { display: inline-flex; flex-shrink: 0; }
.blog-search-icon svg { width: 22px; height: 22px; }

/* Pills are <button> now — reset the browser defaults */
button.blog-topic-pill {
	border: none;
	font-family: var(--Body-Body-1-fontFamily);
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
button.blog-topic-pill:hover:not(.is-active) { background: rgba(81, 74, 5, 0.2); }
.blog-topic-pill:focus-visible { outline: 2px solid var(--color-gold-200); outline-offset: 2px; }

/* ---- Grid ---- */
.blog-grid-image { height: auto; aspect-ratio: 16 / 9; }
.blog-grid-body h3 { font-size: clamp(19px, 2vw, 24px); line-height: 1.25; }
.blog-grid.is-loading { opacity: 0.45; pointer-events: none; transition: opacity 0.2s ease; }
.blog-grid-card { animation: blog-fade-in 0.35s ease both; }

@keyframes blog-fade-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

/* ---- Empty state + load more ---- */
.blog-empty {
	text-align: center;
	font-family: var(--Body-Body-1-fontFamily);
	font-size: clamp(15px, 1.8vw, 18px);
	color: var(--color-dimgray-300);
	padding: clamp(32px, 6vw, 64px) 0;
	margin: 0;
}
.blog-empty[hidden] { display: none; }

.blog-load-more-btn {
	background: rgba(57, 51, 3, 0.5);
	color: var(--color-white);
	border: none;
	border-radius: var(--br-12);
	padding: clamp(14px, 2vw, 18px) clamp(36px, 6vw, 77px);
	font-family: var(--Body-Body-1-fontFamily);
	font-size: clamp(16px, 1.8vw, 18px);
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.blog-load-more-btn:hover:not(:disabled) { background: var(--color-darkolivegreen-100); }
.blog-load-more-btn:disabled { opacity: 0.6; cursor: default; }
.blog-load-more-btn[hidden] { display: none; }

/* ---- CTA banner ---- */
.blog-cta-text h2 { font-size: clamp(24px, 3.6vw, 40px); line-height: 1.2; }
.blog-cta-image { height: auto; background: none; }
.blog-cta-image img { width: 100%; border-radius: var(--br-32); }

/* ===========================================================
   Breakpoints
=========================================================== */
@media (max-width: 1024px) {
	.blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.blog-featured-card { flex-direction: column; align-items: stretch; gap: 0; }
	.blog-featured-image { width: 100%; aspect-ratio: 16 / 9; }
	/*.blog-cta-banner { flex-direction: column; }*/
	.blog-cta-image { order: -1; width: 100%; }
	section.blog-cta-banner {   padding: 24px; gap:24px;}
}

@media (max-width: 560px) {
	.blog-grid { grid-template-columns: minmax(0, 1fr); }
	.blog-hero { padding-left: 20px; padding-right: 20px; }
	.blog-topic-pills { gap: 8px; }
	.blog-topic-pill { padding: 7px 13px; font-size: 14px; }
	.blog-load-more-btn { width: 100%; }
	.blog-post-meta { flex-wrap: wrap; }
	/*.trustyy-button-primary { width: 100%; }*/
}

@media (prefers-reduced-motion: reduce) {
	.blog-grid-card { animation: none; }
	.blog-grid.is-loading { transition: none; }
}
figure.wp-block-table table {
    border-collapse: collapse; 
}
.wp-block-table tr td, .wp-block-table tr th {
    border: 1px solid #decb21;
    font-size: var(--fs-18);
    padding: 5px 5px;
}





/* =============================================================
   BLOG SECTION — HOME PAGE
   Append this block to the end of style.css so it wins over
   any earlier rules with matching selectors.
============================================================= */

.blog-home-header-parent {
	align-self: stretch;
	background-color: var(--color-white);
	border-top: var(--border-1);
	border-bottom: var(--border-1);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--sec-y, var(--padding-80)) var(--sec-x, var(--padding-156));
	gap: var(--gap-40);
	box-sizing: border-box;
}

.blog-home-carousel-wrap {
	position: relative;
	width: 100%;
	max-width: var(--max-w-1200);
	display: flex;
	align-items: center;
	gap: var(--gap-16);
}

.blog-home-carousel {
	flex: 1;
	display: flex;
	gap: var(--gap-24);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	padding: 4px 4px 12px;
	margin: -4px -4px -12px;
	scrollbar-width: none;
}
.blog-home-carousel::-webkit-scrollbar { display: none; }
.blog-home-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.blog-home-carousel:focus-visible {
	outline: 2px solid var(--color-gold-200);
	outline-offset: 4px;
	border-radius: var(--br-24);
}

.blog-home-card {
	flex: 0 0 calc((100% - 2 * var(--gap-24)) / 3);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	background: var(--color-white);
	border: var(--border-1);
	border-radius: var(--br-24);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.blog-home-card:hover {
	box-shadow: var(--shadow-drop);
	/*transform: translateY(-2px);*/
}
.blog-home-card img,
.blog-home-card .blog-image-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	-webkit-user-drag: none;
}
.blog-home-card-image {
	width: 100%;
	aspect-ratio: 16 / 10;
	background: var(--color-gainsboro-100);
}
.blog-home-card-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gap-8);
	padding: var(--padding-24);
}
.blog-home-card-eyebrow {
	font-family: var(--Body-Body-1-fontFamily);
	font-size: var(--fs-14);
	font-weight: 600;
	color: var(--color-olive-300);
}
.blog-home-card-body h3 {
	margin: 0;
	font-family: var(--Heading-H4-fontFamily);
	font-size: var(--fs-20);
	line-height: 1.3;
	font-weight: 700;
	color: var(--color-gray-200);
}
.blog-home-card-body p {
	margin: 0;
	font-family: var(--Body-Body-1-fontFamily);
	font-size: var(--fs-16);
	line-height: var(--lh-24);
	color: var(--color-dimgray-300);
}
.blog-home-card-date {
	font-family: var(--Body-Body-1-fontFamily);
	font-size: var(--fs-13);
	color: var(--color-dimgray-100);
}

.blog-home-nav {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-white);
	border: var(--border-1);
	box-shadow: var(--shadow-drop);
	color: var(--color-gray-200);
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}
.blog-home-nav:hover:not(:disabled) { background: var(--color-whitesmoke); }
.blog-home-nav:disabled { opacity: 0.35; cursor: default; }
.blog-home-nav:focus-visible {
	outline: 2px solid var(--color-gold-200);
	outline-offset: 2px;
}
a.trustyy-button-primary2.blog {
    width: max-content;
    background: #393303;
    margin: 0 auto;
}
/* ---------- Breakpoints: 3 → 2 → 1 (peeking) cards ---------- */
@media (max-width: 900px) {
	.blog-home-card { flex-basis: calc((100% - var(--gap-24)) / 2); }
}
@media (max-width: 600px) {
	.blog-home-header-parent { padding-left: var(--padding-20); padding-right: var(--padding-20); }
	.blog-home-carousel-wrap { gap: var(--gap-8); }
	.blog-home-card { flex-basis: 82%; }
	.blog-home-nav { width: 36px; height: 36px; }
	.blog-home-nav svg { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.blog-home-carousel { scroll-behavior: auto; }
	.blog-home-card { transition: none; }
}