/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

:root{
    --bg:#1B1F3B; --tabbar:#b54872; --tab-pill:#f7e9ee; --tab-text:#2a2230;
    --tab-muted:#f7e9ee; --card:#f7e0ea; --card-text:#151c2a;
    --shadow:0 6px 18px rgba(0,0,0,.08); --r-lg:16px; --r-pill:999px;
  }
  body{margin:0;background:var(--bg);color:var(--card-text);font-family:ui-serif,Georgia,serif}



  /* hide radios */
  .tabs input{position:absolute;opacity:0;pointer-events:none}

  /* tab bar */
  .tabbar{display:flex;gap:.75rem;padding:1.25rem;background:var(--tabbar)}
  .tabbar label{
    padding:.6rem 1rem;border-radius:var(--r-pill);cursor:pointer;
    color:var(--tab-muted);font:600 14px/1.2 ui-sans-serif,system-ui;
    letter-spacing:.02em;user-select:none
  }

.tabbar {
  display: flex;
  gap: .75rem;
  padding: 1.25rem;
  background: var(--tabbar);
  justify-content: center; /* ⬅ centers the tabs */
}

  /* active pill */
  #t1:checked ~ .tabbar label[for=t1],
  #t2:checked ~ .tabbar label[for=t2],
  #t3:checked ~ .tabbar label[for=t3]{
    background:var(--tab-pill);color:var(--tab-text);box-shadow:var(--shadow)
  }

  /* panels */
  .panels{padding:1.25rem 1.25rem 2rem}
  .panel{display:none}
  #t1:checked ~ .panels #p1,
  #t2:checked ~ .panels #p2,
  #t3:checked ~ .panels #p3{display:block}

  /* card grid */
  .grid{display:grid;gap:1.25rem}
  @media(min-width:800px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);
        padding:1.25rem 1.25rem 1.5rem;min-height:160px}
  .chip{font:700 12px/1 ui-sans-serif,system-ui;text-transform:uppercase;
        letter-spacing:.06em;opacity:.8;margin-bottom:.75rem}
  .card h3{margin:0;font-size:clamp(20px,2.2vw,28px);line-height:1.25}


.kicker {
text-transform: uppercase;
  font-size:16px;
  color: #B64775;
  font-family: Roboto, sans-serif;
}

.magentamode
{color: #FFD8E4 !important;}

.btn-wrapper {
 display: flex;
  justify-content: flex-end; /* pushes .btn-arrow to right */
  padding: 20px;
}


.btn-arrow {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 350px; /* adjust to match design */

  
  }

.btn-arrow-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
    

  
  }

  .btn-inkwell {
    background: #1B1F3B; /* dark navy */
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 18px;
    padding: 18px 24px;
    border: none;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    cursor: pointer;
    transition: background 0.3s ease;
    text-decoration: none;
    
  }

  .btn-inkwell:hover {
    background: #7F3252; /* slightly lighter navy on hover */
  }

  .btn-inkwell-box {
    background: #B64775; /* dark navy */
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 16px;
    padding: 18px 24px;
    border: none;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top:20px;
   
  }

  .btn-inkwell-box:hover {
    background: #7F3252; /* slightly lighter navy on hover */
  }


.btn-inkwell .btn-text {
  display: flex;
  align-items: center;    /* centers text vertically inside */
}

.btn-inkwell img {
  width: 24px;
  height: 24px;
  align-self: center;     /* override stretch so it stays centered */
  display: block;
}

.widget-span.cell_1756982487398-padding, .widget-span.cell_1756982497269-padding {margin-left:30px;}






.cell_17569818951234-background-layers, .cell_1756982487398-background-layers, .cell_1756982497269-background-layers {
  border-radius:16px;
}

  .btn-inkwell img {
    height: 20px;  /* adjust arrow size */
    width: auto;
  }


.scribble-list, .scribble-list2 {
    list-style:none;
    padding:0;
    margin:0;
    max-width: 720px;
  }

li.scribble-item::before, li.scribble-item2::before { display: none; padding-left: 0; }


  .scribble-item {
    position:relative;
    padding: 10px 18px 18px 0; /* space for arrow */
    margin: 10px 0;
  }

/* underline */
.scribble-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20px; /* adjust to the image height */
  background-image: url("https://23829299.fs1.hubspotusercontent-na1.net/hubfs/23829299/scribbleline.svg");
  background-repeat: no-repeat; /* prevents tiling */
  background-size: contain;     /* scales image proportionally */
  background-position: center bottom; /* positions underline neatly */
}

.scribble-link {
  display: flex !important;
  align-items: center;
  width: 100% !important;          /* <-- make the row fill the li */
  text-decoration: none;
  color: inherit;
  gap: 16px;
  /* remove space-between; margin-left:auto will handle the push */
}



  .scribble-title {
    font-family: Roboto, sans-serif;
    font-weight:300;
    font-size: 18px;
    line-height:1.2;
    text-transform: uppercase;
    flex: 1 1 auto;  
    min-width: 0;  
  }



  .scribble-arrow {
    flex:0 0 auto;
    height:20px;   /* adjust arrow size */
    width:auto;
    color:#B64775 !important;
    margin-left: auto; 
  }



  .scribble-link:hover .scribble-title{
    opacity:.85;
  }

:root {
  --hsacc-panel: #151a2f;
  --hsacc-panel-2:#0c1022;
  --hsacc-ink: #e7e9f5;
  --hsacc-muted:#adb3c8;
  --hsacc-accent:#cf5c86;
  --hsacc-accent-2:#7b6dff;
  --hsacc-lavender:#d7d2e6;
  --hsacc-lavender-ink:#1f1b2e;
  --hsacc-radius: 20px;
}


.hsacc-wrap {
  display: grid;
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
  font-family: Inter, Arial, sans-serif;
  color: var(--hsacc-ink);
}

/* Panel shell */
.hsacc-panel {
  background: var(--hsacc-panel);
  border-radius: var(--hsacc-radius);
  overflow: hidden;
}
.hsacc-panel summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 26px;
  font-size: 28px;
  font-weight: 600;
}
.hsacc-panel summary::-webkit-details-marker { display: none; }
.hsacc-panel:not([open]) summary {
  background: var(--hsacc-panel-2);
}

/* Title styles */
.hsacc-label {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.hsacc-kicker { font-weight: 700; }
.hsacc-pink { color: var(--hsacc-accent); }
.hsacc-purple { color: var(--hsacc-accent-2); }

/* Chevron */
.hsacc-chev {
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--hsacc-ink);
  border-bottom: 2px solid var(--hsacc-ink);
  transform: rotate(45deg);
  transition: transform .25s ease;
}
.hsacc-panel[open] .hsacc-chev { transform: rotate(-135deg); }

/* Expanded content */
.hsacc-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 0 26px 26px;
}
@media (max-width: 900px) {
  .hsacc-content { grid-template-columns: 1fr; }
}
.hsacc-lead {
  color: var(--hsacc-muted);
  margin: 16px 0;
  font-size: 18px;
}
.hsacc-btn {
  display: inline-block;
  background: var(--hsacc-accent);
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
}

/* Right side card */
.hsacc-note-card {
  background: var(--hsacc-lavender);
  color: var(--hsacc-lavender-ink);
  border-radius: 14px;
  padding: 18px;
}
.hsacc-note-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hsacc-note-card li {
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.5;
}

#widget_1757517534850.accordion_features_section.layout_one .accordion_inner_section::before, 
.accordion_features_section.layout_one .accordion_inner_section::after { background:none;
}

#playbook_box.accordion_features_section.accordion_wrapper {max-width:1400px;}

#widget_1757517534850.accordion_features_section.layout_one .image-box img {padding-left:20px !important;}

#widget_1757517534850.accordion_features_section.layout_one .row {
    flex-direction: row-reverse !important;
  }

.accordion_features_section .accordion_wrapper {padding:0px;}

.tabs h3 {font-weight:500;}

.cell_17575277478715-background-layers {border-radius:30px;}
#hs_cos_wrapper_widget_1757527776673 input[type="text"], #hs_cos_wrapper_widget_1757527776673 input[type="email"], #hs_cos_wrapper_widget_1757527776673 select {border-radius:8px}

.card a:hover, .scribble-link:hover {color:#7F3252 !important;}

.card h3 {font-family: Georgia, Palatino, Times, 'Times New Roman', serif;}

.accordion_features_section.layout_one .accordion-content.open { height: auto; max-height: none;}



.scribble-container2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;   /* wider spacing between columns */
  row-gap: 1rem;      /* vertical space between rows */
  max-width: 1200px;  /* make container wider overall */
  margin: 0 auto;     /* center it */
  align-items: start; /* keeps arrows aligned by row height */
  font-family: 'Roboto', sans-serif;
  margin-top:35px;
}




.scribble-container2 .scribble-item2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px; /* line height — adjust if needed */
  background-image: url("https://21149294.fs1.hubspotusercontent-na1.net/hubfs/21149294/scribbleline.svg");
  background-repeat: no-repeat;
  background-size: 100% auto; /* ✅ makes the line stretch full width */
  background-position: left bottom; /* ✅ start the line from left edge */
}


/* kill the UL left padding so text + line start at the same x */
.scribble-container2 .scribble-list2 {
  list-style: none;
  position: relative;
  padding: 0;   /* <-- this is the key fix */
  margin: 0;
}


.scribble-container2 .scribble-item2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 2.25rem; /* leaves space for arrow */
  bottom: 0.1rem; /* keeps line close but not touching text */
  height: 10px;
  background: url("https://21149294.fs1.hubspotusercontent-na1.net/hubfs/21149294/scribbleline.svg") no-repeat left bottom;
  background-size: 100% 100%;
}


/* room on the right for the arrow, no left padding */
.scribble-container2 .scribble-item2 {
  position: relative;
  padding: 0 2.25rem 1.5rem 0; /* right = arrow space, bottom = space for line */
}

/* line sits under the text, starts at the same left edge */
.scribble-container2 .scribble-item2::after {
  content: "";
  position: absolute;
  left: 0;                 /* aligns with text start */
  right: 2.25rem;          /* stops before arrow */
  bottom: 0.1rem;          /* nudge as needed */
  height: 10px;
  background: url("https://21149294.fs1.hubspotusercontent-na1.net/hubfs/21149294/scribbleline.svg") no-repeat left bottom;
  background-size: 100% 100%;
}

/* keep link layout tidy (optional) */
.scribble-container2 .scribble-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}








@media (max-width: 767px){
.widget-span.cell_1756982487398-padding, .widget-span.cell_1756982497269-padding {margin-left:0;}
  
  .site-footer-module-2-padding > #hs_cos_wrapper_site-footer-module-2 {text-align:center;}

  
  #hs_cos_wrapper_widget_1757339761811_ > p {text-align:center !important;}

 .btn-wrapper {
    justify-content: flex-end;
   padding:0px;
  }
  
    .btn-arrow {
    width: 100%;       /* stretch to full container */
    max-width: 100%;   /* prevent overflow */
  }
  
    .scribble-container2 {
    grid-template-columns: 1fr;

}
  
  #hs_cos_wrapper_module_176131611695810 {
    padding-left:0px !IMPORTANT;
   PADDING-top:50px !IMPORTANT;
  }
  
   #hs_cos_wrapper_module_176131611695810 IMG {
     WIDTH:500PX;
}