.what-is-hiai-body * {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}

.what-is-hiai-body *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.what-is-hiai-body *::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
}

.what-is-hiai-body *::-webkit-scrollbar-track {
  background: transparent;
}

/* Network Error Popup Notification */

.network-error-popup-icon svg {
    width: 100%;
    height: 100%;
    fill: #ef4444;
}

/* Add this CSS with unique class names */

.accountinfo span{
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

   /* Mobile view */

@media (max-width: 500px){
    .container-gsheets .ehead h2 {
        font-size: 22px;
    }
    .container-gsheets .ehead .hiai{
        font-size: 22px;
    }
    .container-gsheets .settingbtn{
        height: 15px;
    }
    .container-gsheets .emenu{
        font-size: 20px;
    }
    .container-gsheets .list-panel{
        grid-template-columns: 150px 1fr;
    }
}

/* --- Hero Section --- */
.whats-hiai {
    text-align: center;
    width: 80%;
    min-height: calc(100vh - 80px);
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.whats-hiai-hiai {
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
}

.whats-hiai h1 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

/* --- Paragraph styles scoped to what-is-hiai page --- */
.what-is-hiai-body p {
  font-size: 1.125rem;
  color: rgb(107, 114, 128);
  line-height: 1.6;
  margin: 0px auto;
}

/* ==========================================================================
   AI POWERED EMAIL CLIENT SECTION
   ========================================================================== */

.ai-powered {
  position: relative;
  height: 600px;
  min-height: 100vh;
}

.ai-powered-title {
  font-size: 2.5em;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.hiai-inbox{
  font-weight: 500;
}
.ai-powered-description {
  width: 45%;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.ai-powered-description h2,
.ai-powered-description p {
  padding-left: 15px;
}

.ai-powered .container {
  max-height: 950px;
}

.whats-demo-container {
  transform: scale(0.55) translateY(-50%);
  position: absolute;
  transform-origin: top left;
  top: 50%;
  left: 10px;
  padding-left: 5vw;
  padding-right: 5vw;
}

@media (max-width: 900px) {
  .ai-powered-description { width: 35%; }
  .ai-powered .whats-demo-container {
    width: 111%;
    max-width: none;
  }
  .ai-powered .container {
    max-width: none;
  }
  .ai-powered .ehead h2 {
    transform: scale(0.7);
  }
  .ai-powered .main-slider {
    grid-template-columns: minmax(400px, 35%) minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .ai-powered {
    height: 450px;
    margin-top: 80px;
    margin-bottom: 40px;
  }
  .ai-powered-title {
    font-size: 1.8em;
    margin-bottom: 5px;
  }
  .ai-powered .whats-demo-container {
    width: 150%;
    transform: scale(0.40) translateY(-50%);
  }
  .ai-powered {
    height: 400px;
  }
  .mobile-hide {
    display: none;
  }

  .madeasy h2{
    font-size: 2rem;
  }
  .pl-header h2{
    font-size: 2rem !important;
  }
}

@media (max-width: 500px) {
  .ai-powered {
    position: relative;
    display: flex;
    gap: 20px;
    padding: 10px;
    height: auto;
    padding-bottom: 48vh;
    margin-top: 5px;
    min-height: 0;
  }
  .ai-powered-description h2,p{
    padding-left: 0px;
  }
  .ai-powered-title {
    font-size: 2rem;
  }
  .ai-powered-description {
    position: static;
    width: 100%;
    transform: none;
    text-align: center;
  }
  .ai-powered .whats-demo-container {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    transform: scale(0.50);
    transform-origin: bottom left;
    width: calc(200% - 5vw);
    top: inherit;
    bottom: 0;
  }
  .whats-demo-container .list-panel{
        grid-template-columns: 200px 1fr !important;
  }
}

/* ==========================================================================
   GOOGLE SHEETS INTEGRATION SECTION
   ========================================================================== */

.gsheets {
  display: grid;
  grid-template-columns: 47% 47%;
  padding: 30px;
  gap: 6%;
}

.container-gsheets {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  border-radius: 20px;
  max-height: 808px;
}

.container-gsheets .email-list {
  box-shadow: none;
  min-height: 720px;
}
.container-gsheets .account-list {
  min-height: 720px;
}
.container-gsheets .email-list-content{
  min-height: 610px;
}
.container-gsheets .account-list {
  filter: blur(1px);
  opacity: 0.5 !important;
}

.gsheets-integration-section {
  position: relative;
}

.customer-sheetsheet {
  display: flex;
  align-items: center;
  position: relative;
}

/* ==========================================================================
   CUSTOMER ORDERS SHEET STYLES
   ========================================================================== */

.co-section * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.co-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: absolute;
  top: -2.5rem;
}

/* --- Orders Sheet Container --- */
.orders-sheet-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: 1px solid #e5e7eb;
  max-width: 950px;
  margin: 0 auto;
}

.orders-sheet-header {
  background: #0F9D58;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.orders-traffic-lights {
  display: flex;
  gap: 0.5rem;
}

.orders-sheet-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.orders-traffic-light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.orders-traffic-light.red { background: #ff5f57; }
.orders-traffic-light.yellow { background: #ffbd2e; }
.orders-traffic-light.green { background: #28ca42; }

.orders-sheet-box-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.orders-sheet-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.orders-sheet-toolbar {
  background: #f9fbfd;
  border-bottom: 1px solid #e0e0e0;
  padding: 0.5rem 1rem;
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: #5f6368;
}

.orders-toolbar-item {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}

.orders-toolbar-item:hover {
  background: #e8eaed;
}

.orders-formula-bar {
  background: white;
  border-bottom: 1px solid #e0e0e0;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
}

.orders-cell-ref {
  background: #f1f3f4;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  color: #5f6368;
  font-family: monospace;
  min-width: 40px;
  text-align: center;
  flex-shrink: 0;
}

.orders-formula-content {
  color: #202124;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Orders Spreadsheet (Scrollable) --- */
.orders-spreadsheet {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 580px;
  overflow-y: auto;
}

.orders-spreadsheet-inner {
  min-width: 920px;
}

/* --- Column Headers --- */
.orders-column-headers {
  display: grid;
  grid-template-columns: 40px 85px 145px 200px 155px 75px 110px 95px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
  font-size: 0.625rem;
  color: #5f6368;
  font-weight: 500;
  position: sticky;
  top: 0;
  z-index: 10;
}

.orders-col-header {
  padding: 0.5rem 0.375rem;
  text-align: center;
  border-right: 1px solid #e0e0e0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orders-col-header:first-child {
  border-right: 1px solid #e0e0e0;
}

/* --- Sheet Rows --- */
.orders-sheet-row {
  display: grid;
  grid-template-columns: 40px 85px 145px 200px 155px 75px 110px 95px;
  border-bottom: 1px solid #e0e0e0;
  font-size: 0.75rem;
  transition: background 0.2s;
}

.orders-sheet-row.orders-header-row {
  background: #f8f9fa;
  font-weight: 600;
  color: #202124;
  position: sticky;
  top: 21px;
  z-index: 9;
}

.orders-sheet-row.orders-selected {
  background: #e8f5e9;
}

/* --- Row Numbers --- */
.orders-row-number {
  background: #f8f9fa;
  color: #5f6368;
  text-align: center;
  padding: 0.75rem 0.375rem;
  border-right: 1px solid #e0e0e0;
  font-size: 0.625rem;
  position: sticky;
  left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.orders-sheet-row.orders-header-row .orders-row-number {
  z-index: 11;
}

/* --- Cells --- */
.orders-cell {
  padding: 0.75rem;
  border-right: 1px solid #e0e0e0;
  color: #202124;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.15s;
  display: flex;
  align-items: center;
}

.orders-cell:last-child { border-right: none; }
.orders-cell.orders-mono { font-family: 'SF Mono', Monaco, monospace; font-size: 0.7rem; }
.orders-cell.orders-email { color: #1a73e8; font-size: 0.68rem; }
.orders-cell.orders-tracking { color: #5f6368; font-size: 0.68rem; }
.orders-cell.orders-muted { color: #9ca3af; }
.orders-cell:hover { background: rgba(0, 0, 0, 0.02); }
.orders-sheet-row.orders-selected .orders-cell:hover { background: rgba(15, 157, 88, 0.15); }

/* --- Status Colors --- */
.orders-cell.orders-status-delivered { color: #0F9D58; font-weight: 600; }
.orders-cell.orders-status-shipped { color: #1976d2; font-weight: 600; }
.orders-cell.orders-status-processing { color: #f57c00; font-weight: 600; }
.orders-cell.orders-status-pending { color: #f9a825; font-weight: 600; }
.orders-cell.orders-status-issue { color: #dc2626; font-weight: 600; }

/* --- Customer Orders Animations --- */
.co-fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: coFadeIn 0.6s ease forwards;
  width: 100%;
}

.co-fade-in-delay-1 { animation-delay: 0.1s; }
.co-fade-in-delay-2 { animation-delay: 0.2s; }
.co-fade-in-delay-3 { animation-delay: 0.3s; }

@keyframes coFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Customer Orders Responsive --- */
@media (max-width: 768px) {
  .orders-sheet-container { max-width: 100%; }
  .orders-sheet-header { padding: 0.4rem 0.6rem; gap: 0.4rem; }
  .orders-traffic-lights { gap: 0.25rem; }
  .orders-traffic-light { width: 7px; height: 7px; }
  .orders-sheet-icon { width: 13px; height: 13px; }
  .orders-sheet-box-title { font-size: 0.7rem; gap: 0.3rem; }
  .orders-sheet-toolbar { padding: 0.25rem 0.5rem; font-size: 0.65rem; gap: 0.5rem; }
  .orders-formula-bar { padding: 0.25rem 0.5rem; gap: 0.4rem; font-size: 0.65rem; }
  .orders-cell-ref { font-size: 0.6rem; padding: 0.15rem 0.35rem; min-width: 30px; }
  .orders-column-headers {
    grid-template-columns: 28px 68px 100px 145px 120px 58px 90px 78px;
    font-size: 0.55rem;
  }
  .orders-col-header { padding: 0.35rem 0.25rem; }
  .orders-sheet-row {
    grid-template-columns: 28px 68px 100px 145px 120px 58px 90px 78px;
    font-size: 0.65rem;
  }
  .orders-row-number { font-size: 0.55rem; padding: 0.5rem 0.25rem; }
  .orders-cell { padding: 0.5rem 0.375rem; font-size: 0.65rem; }
  .orders-cell.orders-mono,
  .orders-cell.orders-email,
  .orders-cell.orders-tracking { font-size: 0.6rem; }
  .orders-spreadsheet { max-height: 500px; }
  .container-gsheets { max-height: 720px; }
  .container-gsheets .email-list-content {
    height: calc(80dvh - 135px);
    min-height: 600px;
  }
  .orders-sheet-row[data-row="11"] { display: none; }
}
@media (max-height: 800px) {
  .orders-sheet-row[data-row="11"] { display: none; }
}
@media (max-width: 480px) {
  .orders-spreadsheet { max-height: 380px; }
  .co-label { opacity: 0.5; }
  .orders-cell { padding: 0.4rem 0.3rem; font-size: 0.6rem; }
  .orders-cell.orders-mono,
  .orders-cell.orders-email,
  .orders-cell.orders-tracking { font-size: 0.55rem; }
  .orders-column-headers {
    grid-template-columns: 24px 58px 88px 128px 105px 50px 80px 68px;
    font-size: 0.5rem;
  }
  .orders-sheet-row {
    grid-template-columns: 24px 58px 88px 128px 105px 50px 80px 68px;
  }
}

@media (max-width: 375px) {
  .orders-spreadsheet-inner { min-width: 850px; }
  .orders-cell { padding: 0.5rem 0.4rem; font-size: 0.6rem; }
}

/* ==========================================================================
   MADE EASY SECTION (5-step boxes)
   ========================================================================== */

.madeasy * { margin: 0; padding: 0; box-sizing: border-box; }

.madeasy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 10px;
}

.madeasy h2 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  text-align: center;
}

.madeasy-gradient-text {
  background: linear-gradient(135deg, #1976D2 0%, #2196F3 50%, #64B5F6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.madeasy-desc {
  text-align: center;
  width: 80%;
  margin: auto;
  margin-bottom: 35px;
}

/* --- Wide (3-column) Layout --- */
:root {
  --box-w: 27vw;
  --box-h: 190px;
  --gap-x: 70px;
  --row-gap: 40px;
  --step-y: calc(var(--box-h) * 0.25);
}

.container-madeeasy {
  position: relative;
  width: calc(var(--box-w) * 3 + var(--gap-x) * 2);
  height: calc(var(--step-y) * 4 + var(--box-h) * 2 + var(--row-gap));
  margin-top: 10px;
  margin-bottom: 10px
}

.box {
  position: absolute;
  width: var(--box-w);
  height: var(--box-h);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.06);
  border-radius: 18px;
  background: #fff;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation-timing-function: ease-in-out;
}

.box.box-4 { height: 200px; }
.box.box-5 { height: 240px; }

/* --- Box Header & Content --- */
.box-header {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  right: 4px;
  width: calc(100% + 14px);
}

.hi-icon {
  height: 24px;
  width: 24px;
  flex-shrink: 0;
}

.box-title {
  font-size: 20px;
  font-weight: 500;
  color: #111;
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
  margin: 0;
  gap: 2px;
}

.body-text {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.4);
  font-weight: 300;
}

/* --- Step Number Badge --- */
.number {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.3);
  letter-spacing: 0.05em;
  border: 1.5px solid #ccc;
  border-radius: 100%;
  padding: 4px;
  position: absolute;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 10px;
  top: 10px;
  transition: border-color 0.3s ease, color 0.3s ease;
}

@media (min-width: 1150px) {
  .number { display: flex; }
}

/* --- 3-Column Positions --- */
.box-1, .box-5 { left: 0; }
.box-2, .box-4 { left: calc(var(--box-w) + var(--gap-x)); }
.box-3          { left: calc((var(--box-w) + var(--gap-x)) * 2); }

.box-1 { top: 0; }
.box-2 { top: var(--step-y); }
.box-3 { top: calc(var(--step-y) * 4); }
.box-4 { top: calc(var(--step-y) * 2 + var(--box-h) + var(--row-gap)); }
.box-5 { top: calc(var(--step-y) * 3 + var(--box-h) + var(--row-gap)); }

/* --- Box Highlight Animations --- */
.box-1 { animation: box-1 16s linear infinite; }
.box-2 { animation: box-2 16s linear infinite; }
.box-3 { animation: box-3 16s linear infinite; }
.box-4 { animation: box-4 16s linear infinite; }
.box-5 { animation: box-5 16s linear infinite; }

@keyframes box-1 {
  0%      { box-shadow: 0 0 0 1px rgba(59,130,246,0.75), 0 1px 3px rgba(59,130,246,0.12), 0 8px 24px rgba(59,130,246,0.2); }
  87.5%   { box-shadow: 0 0 0 1px rgba(59,130,246,0.75), 0 1px 3px rgba(59,130,246,0.12), 0 8px 24px rgba(59,130,246,0.2); }
  89.375% { box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.06); }
  100%    { box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.06); }
}
@keyframes box-2 {
  0%, 5%  { box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.06); }
  6.5%    { box-shadow: 0 0 0 1px rgba(59,130,246,0.75), 0 1px 3px rgba(59,130,246,0.12), 0 8px 24px rgba(59,130,246,0.2); }
  87.5%   { box-shadow: 0 0 0 1px rgba(59,130,246,0.75), 0 1px 3px rgba(59,130,246,0.12), 0 8px 24px rgba(59,130,246,0.2); }
  89.375% { box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.06); }
  100%    { box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.06); }
}
@keyframes box-3 {
  0%, 22%  { box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.06); }
  23.5%    { box-shadow: 0 0 0 1px rgba(59,130,246,0.75), 0 1px 3px rgba(59,130,246,0.12), 0 8px 24px rgba(59,130,246,0.2); }
  87.5%    { box-shadow: 0 0 0 1px rgba(59,130,246,0.75), 0 1px 3px rgba(59,130,246,0.12), 0 8px 24px rgba(59,130,246,0.2); }
  89.375%  { box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.06); }
  100%     { box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.06); }
}
@keyframes box-4 {
  0%, 39%  { box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.06); }
  40.5%    { box-shadow: 0 0 0 1px rgba(59,130,246,0.75), 0 1px 3px rgba(59,130,246,0.12), 0 8px 24px rgba(59,130,246,0.2); }
  87.5%    { box-shadow: 0 0 0 1px rgba(59,130,246,0.75), 0 1px 3px rgba(59,130,246,0.12), 0 8px 24px rgba(59,130,246,0.2); }
  89.375%  { box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.06); }
  100%     { box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.06); }
}
@keyframes box-5 {
  0%, 56%  { box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.06); }
  57.5%    { box-shadow: 0 0 0 1px rgba(59,130,246,0.75), 0 1px 3px rgba(59,130,246,0.12), 0 8px 24px rgba(59,130,246,0.2); }
  87.5%    { box-shadow: 0 0 0 1px rgba(59,130,246,0.75), 0 1px 3px rgba(59,130,246,0.12), 0 8px 24px rgba(59,130,246,0.2); }
  89.375%  { box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.06); }
  100%     { box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.06); }
}

/* --- Number Badge Animations --- */
.box-1 .number { animation: number-1 16s linear infinite; }
.box-2 .number { animation: number-2 16s linear infinite; }
.box-3 .number { animation: number-3 16s linear infinite; }
.box-4 .number { animation: number-4 16s linear infinite; }
.box-5 .number { animation: number-5 16s linear infinite; }

@keyframes number-1 {
  0%      { border-color: #3b82f6; color: #3b82f6; opacity: 0.8; }
  87.5%   { border-color: #3b82f6; color: #3b82f6; opacity: 0.8; }
  89.375% { border-color: #ccc; color: rgba(0, 0, 0, 0.3); opacity: 0.5; }
  100%    { border-color: #ccc; color: rgba(0, 0, 0, 0.3); opacity: 0.5; }
}
@keyframes number-2 {
  0%, 5%  { border-color: #ccc; color: rgba(0, 0, 0, 0.3); opacity: 0.5; }
  6.5%    { border-color: #3b82f6; color: #3b82f6; opacity: 0.8; }
  87.5%   { border-color: #3b82f6; color: #3b82f6; opacity: 0.8; }
  89.375% { border-color: #ccc; color: rgba(0, 0, 0, 0.3); opacity: 0.5; }
  100%    { border-color: #ccc; color: rgba(0, 0, 0, 0.3); opacity: 0.5; }
}
@keyframes number-3 {
  0%, 22%  { border-color: #ccc; color: rgba(0, 0, 0, 0.3); opacity: 0.5; }
  23.5%    { border-color: #3b82f6; color: #3b82f6; opacity: 0.8; }
  87.5%    { border-color: #3b82f6; color: #3b82f6; opacity: 0.8; }
  89.375%  { border-color: #ccc; color: rgba(0, 0, 0, 0.3); opacity: 0.5; }
  100%     { border-color: #ccc; color: rgba(0, 0, 0, 0.3); opacity: 0.5; }
}
@keyframes number-4 {
  0%, 39%  { border-color: #ccc; color: rgba(0, 0, 0, 0.3); opacity: 0.5; }
  40.5%    { border-color: #3b82f6; color: #3b82f6; opacity: 0.8; }
  87.5%    { border-color: #3b82f6; color: #3b82f6; opacity: 0.8; }
  89.375%  { border-color: #ccc; color: rgba(0, 0, 0, 0.3); opacity: 0.5; }
  100%     { border-color: #ccc; color: rgba(0, 0, 0, 0.3); opacity: 0.5; }
}
@keyframes number-5 {
  0%, 56%  { border-color: #ccc; color: rgba(0, 0, 0, 0.3); opacity: 0.5; }
  57.5%    { border-color: #3b82f6; color: #3b82f6; opacity: 0.8; }
  87.5%    { border-color: #3b82f6; color: #3b82f6; opacity: 0.8; }
  89.375%  { border-color: #ccc; color: rgba(0, 0, 0, 0.3); opacity: 0.5; }
  100%     { border-color: #ccc; color: rgba(0, 0, 0, 0.3); opacity: 0.5; }
}

/* --- HI Icon Animations --- */
.box-1 .hi-icon { animation: hi-icon-1 16s linear infinite; }
.box-2 .hi-icon { animation: hi-icon-2 16s linear infinite; }
.box-3 .hi-icon { animation: hi-icon-3 16s linear infinite; }
.box-4 .hi-icon { animation: hi-icon-4 16s linear infinite; }
.box-5 .hi-icon { animation: hi-icon-5 16s linear infinite; }

@keyframes hi-icon-1 {
  0%      { color: #3b82f6; opacity: 0.8; }
  87.5%   { color: #3b82f6; opacity: 0.8; }
  89.375% { color: #ccc; opacity: 0.5; }
  100%    { color: #ccc; opacity: 0.5; }
}
@keyframes hi-icon-2 {
  0%, 5%  { color: #ccc; opacity: 0.5; }
  6.5%    { color: #3b82f6; opacity: 0.8; }
  87.5%   { color: #3b82f6; opacity: 0.8; }
  89.375% { color: #ccc; opacity: 0.5; }
  100%    { color: #ccc; opacity: 0.5; }
}
@keyframes hi-icon-3 {
  0%, 22%  { color: #ccc; opacity: 0.5; }
  23.5%    { color: #3b82f6; opacity: 0.8; }
  87.5%    { color: #3b82f6; opacity: 0.8; }
  89.375%  { color: #ccc; opacity: 0.5; }
  100%     { color: #ccc; opacity: 0.5; }
}
@keyframes hi-icon-4 {
  0%, 39%  { color: #ccc; opacity: 0.5; }
  40.5%    { color: #3b82f6; opacity: 0.8; }
  87.5%    { color: #3b82f6; opacity: 0.8; }
  89.375%  { color: #ccc; opacity: 0.5; }
  100%     { color: #ccc; opacity: 0.5; }
}
@keyframes hi-icon-5 {
  0%, 56%  { color: #ccc; opacity: 0.5; }
  57.5%    { color: #3b82f6; opacity: 0.8; }
  87.5%    { color: #3b82f6; opacity: 0.8; }
  89.375%  { color: #ccc; opacity: 0.5; }
  100%     { color: #ccc; opacity: 0.5; }
}

/* --- Arrow SVG Styles --- */
svg.arrows {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

svg.arrows path.arrow-bg {
  stroke: #ddd;
  fill: none;
  stroke-width: 1.5px;
  stroke-linecap: round;
}

svg.arrows path:not([id]):not(.arrow-bg) {
  stroke: #3b82f6;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

svg.arrows path:nth-child(3) { animation: arrow-1 16s linear infinite; }
svg.arrows path:nth-child(5) { animation: arrow-2 16s linear infinite; }
svg.arrows path:nth-child(7) { animation: arrow-3 16s linear infinite; }
svg.arrows path:nth-child(9) { animation: arrow-4 16s linear infinite; }

marker#ah1 path, marker#ah2 path, marker#ah3 path, marker#ah4 path {
  stroke: #3b82f6;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}

marker#ah1-bg path, marker#ah2-bg path, marker#ah3-bg path, marker#ah4-bg path {
  stroke: #ddd;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}

marker#ah1 path { animation: marker-1 16s linear infinite; }
marker#ah2 path { animation: marker-2 16s linear infinite; }
marker#ah3 path { animation: marker-3 16s linear infinite; }
marker#ah4 path { animation: marker-4 16s linear infinite; }

@keyframes marker-1 {
  0%, 2.875% { stroke-dashoffset: 20; }
  4.375% { stroke-dashoffset: 0; }
  87.5% { stroke-dashoffset: 0; }
  89.375% { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 20; }
}
@keyframes marker-2 {
  0%, 19.875% { stroke-dashoffset: 20; }
  21.375% { stroke-dashoffset: 0; }
  87.5% { stroke-dashoffset: 0; }
  89.375% { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 20; }
}
@keyframes marker-3 {
  0%, 36.875% { stroke-dashoffset: 20; }
  38.375% { stroke-dashoffset: 0; }
  87.5% { stroke-dashoffset: 0; }
  89.375% { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 20; }
}
@keyframes marker-4 {
  0%, 53.875% { stroke-dashoffset: 20; }
  55.375% { stroke-dashoffset: 0; }
  87.5% { stroke-dashoffset: 0; }
  89.375% { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 20; }
}

@keyframes arrow-1 {
  0% { stroke-dashoffset: 1000; opacity: 1; }
  12.5% { stroke-dashoffset: 0; opacity: 1; }
  87.5% { stroke-dashoffset: 0; opacity: 1; }
  89.375% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1000; opacity: 0; }
}
@keyframes arrow-2 {
  0%, 16.875% { stroke-dashoffset: 1000; opacity: 1; }
  29.375% { stroke-dashoffset: 0; opacity: 1; }
  87.5% { stroke-dashoffset: 0; opacity: 1; }
  89.375% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1000; opacity: 0; }
}
@keyframes arrow-3 {
  0%, 33.75% { stroke-dashoffset: 1000; opacity: 1; }
  46.25% { stroke-dashoffset: 0; opacity: 1; }
  87.5% { stroke-dashoffset: 0; opacity: 1; }
  89.375% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1000; opacity: 0; }
}
@keyframes arrow-4 {
  0%, 50.625% { stroke-dashoffset: 1000; opacity: 1; }
  63.125% { stroke-dashoffset: 0; opacity: 1; }
  87.5% { stroke-dashoffset: 0; opacity: 1; }
  89.375% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1000; opacity: 0; }
}

/* --- Made Easy Responsive: Mobile (stacked) --- */
@media (max-width: 435px) {
  .container-gsheets .esearch { display: none; }
  .container-gsheets .emenu { display: none; }
  .container-gsheets .settingbtn { display: none; }
  .container-gsheets .enav { height: 50px; }
  .container-gsheets .email-list {
    min-height: 0px;
  }
}

@media (max-width: 960px) {
  .gsheets .account-list { display: none; }
  .gsheets .list-panel { display: inherit; }
  .gsheets {
    display: grid;
    grid-template-columns: 42% 42%;
    padding: 30px;
    gap: 16%;
  }
}

@media (max-width: 600px) {
  .gsheets { padding: 10px; }
  .container-gsheets .hiai { font-size: 20px; }
  .container-gsheets .ehead h2 { font-size: 20px; }
  .container-gsheets .emenu { height: 20px; }
  .container-gsheets .settingbtn { height: 16px; }

  .madeasy h2{
    font-size: 1.8rem;
  }
  .pl-header h2{
    font-size: 1.8rem !important;
  }
}

/* --- Made Easy Responsive: Narrow (2-column) --- */
@media (min-width: 501px) and (max-width: 900px) {
  :root {
    --box-w: 38vw;
    --box-h: 200px;
    --gap-x: 70px;
    --row-gap: 80px;
    --step-y: calc(var(--box-h) * 0.25);
  }
  .container-madeeasy {
    width: calc(var(--box-w) * 2 + var(--gap-x));
    height: calc(var(--box-h) * 3 + var(--row-gap) * 2);
  }
  .box-1 { left: 0; top: 0; }
  .box-2 { left: calc(var(--box-w) + var(--gap-x)); top: var(--step-y); }
  .box-3 { left: 0; top: calc(var(--box-h) + var(--row-gap)); }
  .box-4 { left: calc(var(--box-w) + var(--gap-x)); top: calc(var(--box-h) + var(--row-gap) + var(--step-y)); }
  .box-5 { left: 0; top: calc((var(--box-h) + var(--row-gap)) * 2); }
}

/* --- Made Easy Responsive: Various breakpoints --- */

@media (max-width: 1000px) {
  .desk-hide { display: none; }
  :root { --box-h: 240px; }
  .box.box-4 { height: 260px; }
  .box.box-5 { height: 300px; }
}

@media (max-width: 900px) {
  .desk-hide { display: none; }
  :root { --box-h: 200px; }
  .box.box-4 { height: 200px; }
  .box.box-5 { height: 240px; }
}

@media (max-width: 1151px) {
  .box-title { font-size: 18px; }
}
@media (max-width: 800px) {
  .body-text { font-size: 12px; }
}

@media (max-width: 650px) {
  .box-title { font-size: 16px; }
  .body-text { font-size: 11px; }
  :root { --box-h: 180px; }
  .box.box-4 { height: 190px; }
  .box.box-5 { height: 240px; }
}
@media (max-width: 500px) {
  :root {
    --box-w: 85vw;
    --box-h: 220px;
    --arrow-gap: 40px;
  }
  .container-madeeasy {
    width: var(--box-w);
    height: calc(var(--box-h) * 5 + var(--arrow-gap) * 4);
  }
  .box-1, .box-2, .box-3, .box-4, .box-5 { left: 0; }
  .box-1 { top: 0; }
  .box-2 { top: calc((var(--box-h) + var(--arrow-gap)) * 1); }
  .box-3 { top: calc((var(--box-h) + var(--arrow-gap)) * 2); }
  .box-4 { top: calc((var(--box-h) + var(--arrow-gap)) * 3); }
  .box-5 { top: calc((var(--box-h) + var(--arrow-gap)) * 4); }
  .container-gsheets .container {
    width: var(--box-w);
    height: calc(var(--box-h) * 3 + 200px + 240px + var(--arrow-gap) * 4);
  }
  .box.box-4 { height: 190px; }
  .box.box-5 { height: 220px; }
  .box-title { font-size: 16px; }
  .body-text { font-size: 11px; }
  .gsheets {
    grid-template-columns: 45% 45%;
    gap: 10%;
  }
}

/* ==========================================================================
   TAB SECTION (Customers / Products chips + branch)
   ========================================================================== */

.tab-branch-container {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

/* --- Chips --- */
.chips {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #e5e7eb;
  background: #fefefe;
  padding: 9px 20px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: border-color 0.22s ease, color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
  flex: 1;
  justify-content: center;
  white-space: nowrap;
}

.chip svg {
  transition: transform 0.22s ease, stroke 0.22s ease;
  flex-shrink: 0;
}

.chip:hover {
  border-color: #a7f3d0;
  color: #374151;
}

.chip:hover svg { transform: scale(1.12); }

.chip.active {
  border-color: #00c853;
  color: #0a7c38;
  background: #f0fdf4;
  box-shadow: 0 0 0 4px rgba(0,200,83,0.09), 0 2px 8px rgba(0,200,83,0.12);
}

.chip.active svg {
  transform: scale(1.15);
  stroke: #0f9d58;
}

/* --- Branch SVG connector --- */
.branch-wrap {
  display: flex;
  justify-content: center;
  overflow: visible;
  height: 64px;
  width: 100%;
}

.branch-wrap svg {
  width: 100%;
  height: 64px;
  overflow: visible;
}

.branch-path {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  transition: stroke 0.3s ease, stroke-dasharray 0.3s ease, opacity 0.3s ease;
}

.branch-path.active {
  stroke: #00c853;
  stroke-dasharray: 4 4;
  filter: drop-shadow(0 0 4px rgba(0,200,83,0.4));
  opacity: 1;
}

.branch-path.inactive {
  stroke: #d1fae5;
  stroke-dasharray: 4 4;
  filter: none;
  opacity: 0.6;
}

.merge-dot {
  transition: fill 0.3s ease;
}

/* --- PL Header --- */
.pl-header { text-align: center; margin-top: 0; margin-bottom: 0; }

.pl-header h2 {
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 1rem;
  color: #111827;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.25em;
  flex-wrap: wrap;
}

.pl-word {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease;
}

.pl-word.fading { opacity: 0; }

.pl-header p {
  font-size: 1.1rem;
  color: #6b7280;
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.65;
}

.pl-desc { transition: opacity 0.25s ease, transform 0.3s ease; }
.pl-desc.fading { opacity: 0; transform: translateY(7px); }

/* --- Chip nudge animation --- */
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-2px); }
  50% { transform: translateY(0); }
  70% { transform: translateY(-1px); }
}

.chip.hint {
  animation: nudge 0.5s ease;
  border-color: #d1fae5;
}

.tab-content {
  margin-top: 2rem;
  transition: opacity 0.25s ease;
}

.tab-content.fading { opacity: 0; }

/* --- SR Only --- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* --- Tab Section Responsive --- */
@media (max-width: 480px) {
  .demo { padding: 40px 20px 36px; }
  .chip { padding: 8px 14px; font-size: 0.8125rem; }
}

@media (min-width: 1200px) {
  .chip { padding: 12px 20px; font-size: 0.9375rem; }
}

/* ==========================================================================
   AI MODELS SECTION (AIM)
   ========================================================================== */

.aim-section {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #fff;
  color: #0f172a;
  width: 100%;
  padding: 6rem 1.5rem;
  overflow: hidden;
  box-sizing: border-box;
}

.aim-section *, .aim-section *::before, .aim-section *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.aim-container {
  position: relative;
  max-width: 62rem;
  margin: 0 auto;
}

/* --- AIM Desktop --- */
.aim-desktop {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 600px;
  position: relative;
}

.aim-bubbles-col {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.aim-bubbles-left { left: 0; }
.aim-bubbles-right { right: 0; }

.aim-center-text {
  text-align: center;
  max-width: 32rem;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

.aim-center-text h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.aim-center-text p {
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.aim-center-text p:last-child { margin-bottom: 0; }

/* --- AIM Mobile --- */
.aim-mobile {
  display: flex;
  position: relative;
  min-height: 550px;
  align-items: center;
  justify-content: center;
}

.aim-mobile .aim-center-text {
  max-width: 24rem;
  padding: 0 2rem;
}

@media (max-width: 767px) {
  .aim-p-wide {
    margin-left: -3rem;
    margin-right: -3rem;
  }
}

.aim-corner { position: absolute; }
.aim-corner-tl { top: 0.5rem; left: 0; transform: translateX(-20%); }
.aim-corner-tr { top: 0.5rem; right: 0; transform: translateX(20%); }
.aim-corner-bl { bottom: 0.5rem; left: 0; transform: translateX(-20%); }
.aim-corner-br { bottom: 0.5rem; right: 0; transform: translateX(20%); }

@media (max-width: 530px) {
  .aim-corner-tl { top: -2rem; }
  .aim-corner-tr { top: -2rem; }
  .aim-corner-bl { bottom: -2rem; }
  .aim-corner-br { bottom: -2rem; }
}
@media (max-width: 767px) {
  .aim-section { overflow: hidden; }
}
@media (max-width: 500px) {
  .aim-corner-tl { top: -4rem; }
  .aim-corner-tr { top: -4rem; }
  .aim-corner-bl { bottom: -4rem; }
  .aim-corner-br { bottom: -4rem; }
  .aim-section{
    overflow-x: clip;
    overflow-y: visible;
  }
}
@media (max-width: 450px) {
  .aim-corner-tl { top: -5rem; }
  .aim-corner-tr { top: -5rem; }

  .madeasy h2{
    font-size: 1.6rem;
  }
  .pl-header h2{
    font-size: 1.6rem !important;
  }
}

/* --- AIM Bubble --- */
.aim-bubble {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px -6px rgba(0,0,0,0.12);
  animation: aim-float 5s ease-in-out infinite;
}

.aim-bubble img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.aim-bubble .aim-fallback {
  font-weight: 600;
  color: #fff;
  user-select: none;
}

.aim-bg-chatgpt { background-color: #10a37f; }
.aim-bg-deepseek { background-color: #4d6bfe; }
.aim-bg-claude { background-color: #f6e3dd; }
.aim-bg-gemini { background: linear-gradient(to right, #b76990, #497fe4); }

@keyframes aim-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.aim-delay-0 { animation-delay: 0s; }
.aim-delay-1 { animation-delay: 0.8s; }
.aim-delay-2 { animation-delay: 1.5s; }
.aim-delay-3 { animation-delay: 2.2s; }

/* Mobile bubble sizes */
.aim-bm-chatgpt { width: 130px; height: 130px; }
.aim-bm-deepseek { width: 100px; height: 100px; }
.aim-bm-claude   { width: 125px; height: 125px; }
.aim-bm-gemini   { width: 105px; height: 105px; }
.aim-bm-chatgpt .aim-fallback { font-size: 0.85rem; }
.aim-bm-deepseek .aim-fallback { font-size: 0.7rem; }
.aim-bm-claude .aim-fallback   { font-size: 0.85rem; }
.aim-bm-gemini .aim-fallback   { font-size: 0.75rem; }

/* Desktop bubble sizes */
.aim-bd-chatgpt { width: 130px; height: 130px; }
.aim-bd-deepseek { width: 90px; height: 90px; }
.aim-bd-claude   { width: 135px; height: 135px; }
.aim-bd-gemini   { width: 105px; height: 105px; }
.aim-bd-chatgpt .aim-fallback { font-size: 0.95rem; }
.aim-bd-deepseek .aim-fallback { font-size: 0.75rem; }
.aim-bd-claude .aim-fallback   { font-size: 0.95rem; }
.aim-bd-gemini .aim-fallback   { font-size: 0.8rem; }

@media (min-width: 640px) and (max-width: 767px) {
  .aim-bm-chatgpt { width: 150px; height: 150px; }
  .aim-bm-deepseek { width: 115px; height: 115px; }
  .aim-bm-claude   { width: 145px; height: 145px; }
  .aim-bm-gemini   { width: 120px; height: 120px; }
}

@media (min-width: 768px) {
  .aim-desktop { display: flex; }
  .aim-mobile  { display: none; }
  .aim-bubbles-col { gap: 2rem; }
}

@media (min-width: 1024px) {
  .aim-bd-chatgpt { width: 160px; height: 160px; }
  .aim-bd-deepseek { width: 110px; height: 110px; }
  .aim-bd-claude   { width: 155px; height: 155px; }
  .aim-bd-gemini   { width: 130px; height: 130px; }
  .aim-bd-chatgpt .aim-fallback { font-size: 1.1rem; }
  .aim-bd-deepseek .aim-fallback { font-size: 0.85rem; }
  .aim-bd-claude .aim-fallback   { font-size: 1.1rem; }
  .aim-bd-gemini .aim-fallback   { font-size: 0.95rem; }
  .aim-bubbles-col { gap: 2.5rem; }
}

@media (min-width: 1280px) {
  .aim-bd-chatgpt { width: 185px; height: 185px; }
  .aim-bd-deepseek { width: 125px; height: 125px; }
  .aim-bd-claude   { width: 180px; height: 180px; }
  .aim-bd-gemini   { width: 145px; height: 145px; }
  .aim-bd-chatgpt .aim-fallback { font-size: 1.2rem; }
  .aim-bd-deepseek .aim-fallback { font-size: 0.9rem; }
  .aim-bd-claude .aim-fallback   { font-size: 1.2rem; }
  .aim-bd-gemini .aim-fallback   { font-size: 1rem; }
}

@media (max-width: 1200px) {
  .aim-section { padding: 4rem 1.5rem; }
}

/* ==========================================================================
   PI SECTIONS (Who this helps, Privacy, etc.)
   ========================================================================== */

.pi-wrap *, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.pi-wrap {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #111;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.pi-section { padding: 0 1.5rem; }
.pi-section .pi-wrap { padding-top: 3rem; padding-bottom: 3rem; }
.pi-section + .pi-section .pi-wrap { border-top: 1px solid #e5e5e5; }

.pi-heading {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #111;
  line-height: 1.15;
  width: 80%;
  max-width: 600px;
  margin: auto;
  border-bottom: 1px solid #ccc;
  margin-bottom: 2.5rem;
  padding-bottom: 20px;
}

/* --- Three-Column Grid --- */
.pi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.pi-grid .pi-icon { width: 24px; height: 24px; color: #111; margin-bottom: 1rem; }
.pi-grid .pi-card-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #737373; margin-bottom: 0.75rem; }
.pi-grid .pi-card-desc { font-size: 0.9375rem; line-height: 1.7; color: #737373; }

/* --- Two-Column Content --- */
.pi-content {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 4rem;
  align-items: start;
}

.pi-left { display: flex; align-items: center; gap: 0.75rem; }
.pi-left .pi-icon { width: 26px; height: 26px; min-width: 26px; color: #111; }
.pi-left h2 { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; color: #111; }

.pi-right p { font-size: 0.9375rem; line-height: 1.8; color: #737373; margin-bottom: 1.25rem; }
.pi-right p:last-child { margin-bottom: 0; }
.pi-right strong { font-weight: 500; color: #555; }

/* --- Expandable Content --- */
.pi-expandable { overflow: hidden; }

.pi-expandable-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
  opacity: 0;
}

.pi-expandable-body.pi-expanded { max-height: 600px; opacity: 1; }

.pi-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #999;
  cursor: pointer;
  transition: color 0.2s ease;
}
.pi-expand-btn:first-child { padding-bottom: 120px;}

.pi-expand-btn:hover { color: #555; }
.pi-expand-btn svg { width: 14px; height: 14px; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.pi-expand-btn.pi-expanded svg { transform: rotate(180deg); }

.pi-expand-btn.pi-expanded {
  opacity: 0;
  pointer-events: none;
  margin-top: 0;
  height: 0;
  padding: 0;
  transition: opacity 0.2s ease;
} 

/* --- PI Responsive --- */
@media (max-width: 768px) {
  .pi-grid { grid-template-columns: 1fr; }
  .pi-content { grid-template-columns: 1fr; gap: 1.5rem; }
  .pi-left h2 { font-size: 1.2rem; }
  .pi-left .pi-icon { width: 20px; height: 20px; min-width: 20px; }
  .pi-heading { font-size: 1.75rem; margin-bottom: 2.5rem; }
  .pi-section .pi-wrap { padding-top: 2rem; padding-bottom: 2rem; }
}