/* ==========================================================================
   Tehranto.Plus Pro Upgrade Suite v164
   UI/UX, Interactive Estimator, Comparison Matrix, Process Timeline,
   Service Page Editorial/Bento Grids, Case Study Metadata, Blog Search/TOC
   ========================================================================== */

:root {
  --tp-pro-navy: #0f2c6b;
  --tp-pro-navy-deep: #0a1f4d;
  --tp-pro-cyan: #2bb8d4;
  --tp-pro-cyan-soft: #7dd3e6;
  --tp-pro-cyan-deep: #14839e;
  --tp-pro-bg: #fbfaf7;
  --tp-pro-bg-soft: #f2efe8;
  --tp-pro-paper: #ffffff;
  --tp-pro-emerald: #127858;
  --tp-pro-emerald-bg: #e7f7f1;
  --tp-pro-amber: #b86b14;
  --tp-pro-amber-bg: #fef4e6;
  --tp-pro-pill-radius: 999px;
  --tp-pro-blog-top-space: 6.5rem;
  --tp-pro-matrix-label-bg: #f8f7f4;
  --tp-pro-matrix-label-heading: #f1efe9;
  --tp-pro-line: rgba(15, 44, 107, 0.12);
  --tp-pro-line-strong: rgba(15, 44, 107, 0.22);
  --tp-pro-shadow: 0 22px 60px rgba(15, 44, 107, 0.08);
  --tp-pro-shadow-lg: 0 28px 80px rgba(10, 31, 77, 0.14);
}

/* BiDi Isolation Guardrails for Mixed Persian/English Content */
.tp-bidi-ltr,
.tp-estimator-price,
.tp-estimator-badge-num,
.tp-matrix-price,
.website-project-domain {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  display: inline-block;
}

/* ==========================================================================
   1. SHARED ARCHITECTURAL SECTION PRIMITIVES (.tp-pro-*)
   ========================================================================== */
.tp-pro-container {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.tp-pro-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end;
  gap: 1.5rem 3rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

@media (max-width: 900px) {
  .tp-pro-head {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.tp-pro-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Roboto', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tp-pro-cyan-deep);
  margin-bottom: 0.85rem;
}

.tp-pro-eyebrow::before {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--tp-pro-cyan);
  border-radius: 2px;
  flex-shrink: 0;
}

body.fa .tp-pro-eyebrow {
  font-family: 'Shabnam', sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.84rem;
}

.tp-pro-title {
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(1.9rem, 3.8vw, 2.85rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--tp-pro-navy);
  margin: 0;
}

body.fa .tp-pro-title {
  font-family: 'Shabnam', sans-serif;
  line-height: 1.42;
  letter-spacing: 0;
}

.tp-pro-title em {
  color: var(--tp-pro-cyan-deep);
  font-style: italic;
}

body.fa .tp-pro-title em {
  font-style: normal;
}

.tp-pro-lead {
  font-size: 1rem;
  line-height: 1.75;
  color: #3d4f75;
  margin: 0 0 0.2rem;
  max-width: 58ch;
}

/* ==========================================================================
   2. INTERACTIVE PROJECT & PACKAGE ESTIMATOR (#estimator)
   ========================================================================== */
#estimator {
  scroll-margin-top: 76px;
}

.tp-estimator-section {
  position: relative;
  padding: clamp(4.5rem, 8vw, 7rem) 0;
  background: linear-gradient(180deg, #f6f4ee 0%, #fbfaf7 50%, #f2efe8 100%);
  border-top: 1px solid var(--tp-pro-line);
  border-bottom: 1px solid var(--tp-pro-line);
  scroll-margin-top: 76px;
}

.tp-estimator-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.tp-estimator-head-copy {
  max-width: 680px;
}

.tp-estimator-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Roboto', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tp-pro-cyan-deep);
  margin-bottom: 0.85rem;
}

.tp-estimator-kicker::before {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--tp-pro-cyan);
  border-radius: 2px;
}

body.fa .tp-estimator-kicker {
  font-family: 'Shabnam', sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.84rem;
}

.tp-estimator-title {
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(2rem, 4.4vw, 3.35rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--tp-pro-navy);
  margin: 0 0 0.9rem;
}

body.fa .tp-estimator-title {
  font-family: 'Shabnam', sans-serif;
  line-height: 1.38;
  letter-spacing: 0;
}

.tp-estimator-title em {
  color: var(--tp-pro-cyan-deep);
  font-style: italic;
}

body.fa .tp-estimator-title em {
  font-style: normal;
}

.tp-estimator-sub {
  font-size: 1.02rem;
  line-height: 1.7;
  color: #3d4f75;
  margin: 0;
}

.tp-estimator-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tp-preset-btn {
  appearance: none;
  border: 1px solid var(--tp-pro-line-strong);
  background: var(--tp-pro-paper);
  color: var(--tp-pro-navy);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tp-preset-btn:hover,
.tp-preset-btn.is-active {
  background: var(--tp-pro-navy);
  color: #ffffff;
  border-color: var(--tp-pro-navy);
  box-shadow: 0 6px 18px rgba(15, 44, 107, 0.16);
}

.tp-estimator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.85fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.tp-estimator-controls {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.tp-est-block {
  background: var(--tp-pro-paper);
  border: 1px solid var(--tp-pro-line);
  border-radius: 20px;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: 0 10px 30px rgba(15, 44, 107, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tp-est-block:hover {
  border-color: rgba(43, 184, 212, 0.4);
}

.tp-est-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.tp-est-block-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Google Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--tp-pro-navy);
  margin: 0;
}

body.fa .tp-est-block-title {
  font-family: 'Shabnam', sans-serif;
  font-size: 1.08rem;
}

.tp-est-step-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: #e8f6fa;
  color: var(--tp-pro-cyan-deep);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

body.fa .tp-est-step-pill {
  letter-spacing: 0;
  text-transform: none;
}

.tp-est-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 0.65rem;
}

.tp-est-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.85rem 0.95rem;
  border: 1.5px solid var(--tp-pro-line);
  border-radius: 14px;
  background: #fbfaf7;
  color: var(--tp-pro-navy);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: all 0.18s ease;
}

body.fa .tp-est-opt {
  text-align: right;
}

.tp-est-opt:hover {
  border-color: var(--tp-pro-cyan);
  background: #ffffff;
}

.tp-est-opt.is-selected {
  border-color: var(--tp-pro-cyan-deep);
  background: linear-gradient(160deg, #edfafc 0%, #ffffff 100%);
  box-shadow: 0 8px 20px rgba(20, 131, 158, 0.12);
}

.tp-est-opt-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--tp-pro-navy);
  line-height: 1.25;
}

.tp-est-opt-price {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--tp-pro-cyan-deep);
  direction: ltr;
  unicode-bidi: isolate;
}

.tp-est-opt-meta {
  font-size: 0.68rem;
  color: #6b7894;
  line-height: 1.35;
}

.tp-est-subcontrols {
  margin-top: 1.15rem;
  padding-top: 1.05rem;
  border-top: 1px dashed var(--tp-pro-line-strong);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tp-est-subcontrols[hidden] {
  display: none !important;
}

/* Bold Amazon-style Quantity Stepper Card (Warm grey matching Extra Services) */
.tp-est-qty-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.05rem;
  border-radius: 14px;
  background: #fbfaf7;
  border: 1.5px solid var(--tp-pro-line);
  transition: all 0.18s ease;
}

.tp-est-qty-card:hover {
  border-color: var(--tp-pro-cyan);
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(15, 44, 107, 0.06);
}

.tp-est-qty-card[hidden] {
  display: none !important;
}

.tp-est-qty-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.tp-est-qty-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--tp-pro-navy);
  line-height: 1.3;
}

.tp-est-qty-sub {
  font-size: 0.75rem;
  font-weight: 600;
  color: #4a5e85;
  line-height: 1.4;
}

.tp-est-qty-sub.is-free {
  color: #8a5d0b;
  font-weight: 700;
}

.tp-qty-stepper {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 2px solid var(--tp-pro-navy);
  border-radius: 12px;
  padding: 0.18rem;
  box-shadow: 0 4px 12px rgba(15, 44, 107, 0.1);
  flex-shrink: 0;
  direction: ltr;
  unicode-bidi: isolate;
}

.tp-qty-btn {
  appearance: none;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 9px;
  background: #f0f5fa;
  color: var(--tp-pro-navy);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, transform 0.12s ease;
  user-select: none;
}

.tp-qty-btn:hover:not(:disabled) {
  background: var(--tp-pro-navy);
  color: #ffffff;
}

.tp-qty-btn:active:not(:disabled) {
  transform: scale(0.94);
}

.tp-qty-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.tp-qty-val {
  min-width: 44px;
  padding: 0 0.45rem;
  text-align: center;
  font-family: 'Google Sans', sans-serif;
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--tp-pro-navy);
  direction: ltr;
  unicode-bidi: isolate;
}

body.fa .tp-qty-val {
  font-family: 'Shabnam', sans-serif;
}

.tp-est-smart-hint {
  margin-top: 0.85rem;
  padding: 0.72rem 0.98rem;
  border-radius: 12px;
  background: linear-gradient(160deg, #fdf6e2 0%, #f6e4b6 100%);
  border: 1px solid #d19a35;
  color: #5c4008;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.tp-est-smart-hint[hidden] {
  display: none !important;
}

.tp-est-smart-btn {
  border: 1px solid #b8860b;
  border-radius: 999px;
  background: linear-gradient(135deg, #f3d986 0%, #e4bb4f 100%);
  color: #4f3605;
  padding: 0.34rem 0.86rem;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 12px -4px rgba(138, 93, 11, 0.22);
  transition: transform 0.16s ease, filter 0.16s ease, background 0.16s ease;
}

.tp-est-smart-btn:hover {
  background: linear-gradient(135deg, #ecc968 0%, #d49c2a 100%);
  transform: translateY(-1px);
}

/* Marketing Full Department Card & Included Notice */
.tp-est-options-marketing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 0.75rem;
}

.tp-est-opt.is-dept-card {
  border-color: rgba(15, 44, 107, 0.26);
  background: linear-gradient(155deg, #f3f8fc 0%, #ffffff 100%);
}

.tp-est-opt.is-dept-card.is-selected {
  border-color: var(--tp-pro-navy);
  background: linear-gradient(155deg, #0f2c6b 0%, #14448f 100%);
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(15, 44, 107, 0.22);
}

.tp-est-opt.is-dept-card.is-selected .tp-est-opt-name {
  color: #ffffff;
}

.tp-est-opt.is-dept-card.is-selected .tp-est-opt-price {
  color: var(--tp-pro-cyan-soft);
}

.tp-est-opt.is-dept-card.is-selected .tp-est-opt-meta {
  color: rgba(255, 255, 255, 0.84);
}

.tp-est-opt.is-dept-included,
.tp-est-addon-row.is-dept-included {
  border-color: rgba(18, 120, 88, 0.42);
  background: linear-gradient(160deg, #effaf5 0%, #f5fbfd 100%);
  box-shadow: 0 4px 12px rgba(18, 120, 88, 0.08);
}

.tp-est-dept-included-note {
  margin-top: 0.8rem;
  padding: 0.65rem 0.95rem;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(43, 184, 212, 0.14) 0%, rgba(18, 120, 88, 0.1) 100%);
  border: 1px solid rgba(20, 131, 158, 0.3);
  color: var(--tp-pro-navy);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.tp-est-dept-included-note[hidden] {
  display: none !important;
}

.tp-est-dept-scope-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--tp-pro-navy);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Block 5 Add-ons with Stepper Controls */
.tp-est-addons-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.tp-est-addon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--tp-pro-line);
  border-radius: 14px;
  background: #fbfaf7;
  transition: all 0.18s ease;
}

.tp-est-addon-row.is-active {
  border-color: var(--tp-pro-cyan-deep);
  background: linear-gradient(160deg, #edfafc 0%, #ffffff 100%);
  box-shadow: 0 6px 18px rgba(20, 131, 158, 0.1);
}

.tp-est-addon-meta {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

.tp-est-addon-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--tp-pro-navy);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.tp-est-addon-sub {
  font-size: 0.74rem;
  color: #5b6b8a;
  font-weight: 600;
}

.tp-estimator-summary {
  position: sticky;
  top: 92px;
  background: linear-gradient(165deg, #0f2c6b 0%, #0a1f4d 65%, #0e3b5e 100%);
  color: #ffffff;
  border-radius: 24px;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: var(--tp-pro-shadow-lg);
  border: 1px solid rgba(125, 211, 230, 0.28);
}

.tp-sum-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tp-pro-cyan-soft);
  margin-bottom: 0.4rem;
}

body.fa .tp-sum-kicker {
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.78rem;
}

.tp-sum-title {
  font-family: 'Google Sans', sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 1.15rem;
}

body.fa .tp-sum-title {
  font-family: 'Shabnam', sans-serif;
}

.tp-sum-lines {
  list-style: none;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  padding: 1rem 0;
}

.tp-sum-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.88);
}

.tp-sum-line-price {
  font-weight: 700;
  color: var(--tp-pro-cyan-soft);
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}

.tp-sum-line.is-waived .tp-sum-line-price {
  color: #f4dfab;
}

.tp-sum-line.is-discount {
  padding: 0.45rem 0.65rem;
  border-radius: 10px;
  background: rgba(244, 223, 171, 0.16);
  border: 1px solid rgba(209, 154, 53, 0.48);
  color: #fdf2d6;
  font-weight: 700;
}

.tp-sum-line.is-discount .tp-sum-line-price {
  color: #f4dfab;
  font-weight: 800;
}

.tp-sum-line.is-dept-scope {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.42rem;
  padding: 0.65rem 0.8rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tp-sum-line.is-dept-scope > span:first-child {
  width: 100%;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.4;
}

.tp-sum-line.is-dept-scope .tp-sum-line-price {
  font-size: 0.72rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: rgba(125, 211, 230, 0.18);
  border: 1px solid rgba(125, 211, 230, 0.35);
  color: #e0f7fc;
  direction: auto;
  white-space: nowrap;
  align-self: flex-start;
}

.tp-sum-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.tp-sum-total-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.78);
}

.tp-sum-total-amount {
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(1.95rem, 3.4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}

.tp-sum-old-total {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: line-through;
  text-align: right;
  direction: ltr;
  unicode-bidi: isolate;
  margin-bottom: 0.2rem;
}

body.fa .tp-sum-old-total {
  text-align: left;
}

body.fa .tp-sum-line:not(.is-dept-scope) .tp-sum-line-price .lang-fa,
body.fa .tp-sum-old-total .lang-fa,
body.fa .tp-sum-total-amount .lang-fa,
bdi[dir="ltr"] {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  display: inline-block;
}

.tp-sum-old-total[hidden] {
  display: none !important;
}

body.fa .tp-sum-total-amount {
  font-family: 'Shabnam', sans-serif;
}

.tp-sum-savings {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding: 0.38rem 0.8rem;
  border-radius: 999px;
  background: rgba(244, 223, 171, 0.18);
  border: 1px solid rgba(209, 154, 53, 0.52);
  color: #fdf2d6;
  font-size: 0.76rem;
  font-weight: 700;
}

.tp-sum-savings[hidden] {
  display: none !important;
}

.tp-sum-dept-banner {
  margin-bottom: 1.15rem;
  padding: 0.8rem 0.95rem;
  border-radius: 14px;
  background: rgba(43, 184, 212, 0.16);
  border: 1px solid rgba(125, 211, 230, 0.38);
  font-size: 0.78rem;
  line-height: 1.5;
  color: #e0f7fc;
}

.tp-sum-dept-banner[hidden] {
  display: none !important;
}

.tp-sum-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1rem;
}

.tp-sum-btn-primary,
.tp-sum-btn-wa {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1.2rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.tp-sum-btn-primary {
  border: none;
  background: var(--tp-pro-cyan);
  color: #07204c;
  box-shadow: 0 10px 24px rgba(43, 184, 212, 0.3);
}

.tp-sum-btn-primary:hover {
  background: var(--tp-pro-cyan-soft);
  transform: translateY(-2px);
}

.tp-sum-btn-wa {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.tp-sum-btn-wa:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
}

.tp-sum-fine {
  margin-top: 0.85rem;
  font-size: 0.68rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.64);
  text-align: center;
}

@media (max-width: 960px) {
  .tp-estimator-layout {
    grid-template-columns: 1fr;
  }
  .tp-estimator-summary {
    position: static;
  }
}

/* ==========================================================================
   3. SIDE-BY-SIDE TIER COMPARISON MATRIX (#tier-comparison)
   ========================================================================== */
.tp-tier-matrix-wrap {
  margin-top: clamp(3rem, 5vw, 4.25rem);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f4ee 100%);
  border: 1px solid var(--tp-pro-line-strong);
  box-shadow: var(--tp-pro-shadow);
}

.tp-tier-matrix-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-bottom: 1.5rem;
}

.tp-tier-matrix-head h3 {
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--tp-pro-navy);
  margin: 0;
}

body.fa .tp-tier-matrix-head h3 {
  font-family: 'Shabnam', sans-serif;
  letter-spacing: 0;
  line-height: 1.38;
}

.tp-Tier-matrix-head em,
.tp-tier-matrix-head h3 em {
  color: var(--tp-pro-cyan-deep);
  font-style: italic;
}

body.fa .tp-tier-matrix-head h3 em {
  font-style: normal;
}

.tp-goal-pills,
.tp-goal-matcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.tp-goal-pill,
.tp-goal-chip {
  appearance: none;
  border: 1px solid var(--tp-pro-line-strong);
  background: var(--tp-pro-paper);
  color: #243b67;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tp-goal-pill:hover,
.tp-goal-chip:hover {
  border-color: var(--tp-pro-cyan);
  color: var(--tp-pro-navy);
}

.tp-goal-pill.is-active,
.tp-goal-chip.is-active {
  background: var(--tp-pro-navy);
  color: #ffffff;
  border-color: var(--tp-pro-navy);
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(15, 44, 107, 0.18);
}

.tp-goal-recommendation {
  margin-bottom: 1.35rem;
  padding: 0.9rem 1.2rem;
  border-radius: 14px;
  background: #e8f6fa;
  border-inline-start: 4px solid var(--tp-pro-cyan-deep);
  color: var(--tp-pro-navy);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.65;
}

.tp-goal-recommendation[hidden] {
  display: none !important;
}

.tp-tier-matrix-scroll,
.tp-matrix-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--tp-pro-line-strong);
  border-radius: 18px;
  background: var(--tp-pro-paper);
}

.tp-tier-matrix,
.tp-matrix-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  text-align: left;
}

body.fa .tp-tier-matrix,
body.fa .tp-matrix-table {
  text-align: right;
}

.tp-tier-matrix th,
.tp-tier-matrix td,
.tp-matrix-table th,
.tp-matrix-table td {
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid var(--tp-pro-line);
  font-size: 0.85rem;
  line-height: 1.45;
  vertical-align: middle;
  color: #2c3e66;
}

.tp-tier-matrix thead th,
.tp-matrix-table thead th {
  background: #f4f1ea;
  color: var(--tp-pro-navy);
  font-family: 'Google Sans', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  border-bottom: 2px solid var(--tp-pro-line-strong);
}

body.fa .tp-tier-matrix thead th,
body.fa .tp-matrix-table thead th {
  font-family: 'Shabnam', sans-serif;
}

.tp-tier-matrix tbody tr:last-child td,
.tp-tier-matrix tbody tr:last-child th,
.tp-matrix-table tbody tr:last-child td,
.tp-matrix-table tbody tr:last-child th {
  border-bottom: none;
}

.tp-tier-matrix tbody td:first-child,
.tp-matrix-table tbody th {
  font-weight: 700;
  color: var(--tp-pro-navy);
  width: 22%;
}

/* Logical column rules follow the table direction in both English and Persian. */
:is(.tp-tier-matrix, .tp-matrix-table) tr > :is(th, td) + :is(th, td) {
  border-inline-start: 1px solid var(--tp-pro-line);
}

:is(.tp-tier-matrix, .tp-matrix-table) thead tr > :first-child {
  background: var(--tp-pro-matrix-label-heading);
}

:is(.tp-tier-matrix, .tp-matrix-table) tbody tr > :first-child {
  background: var(--tp-pro-matrix-label-bg);
}

.tp-matrix-tier-name {
  display: block;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--tp-pro-navy);
}

.tp-matrix-price {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: #e8f6fa;
  color: var(--tp-pro-cyan-deep);
  font-size: 0.76rem;
  font-weight: 700;
}

/* Desktop tier names and prices share one compact header line. */
@media (min-width: 1121px) {
  :is(.tp-tier-matrix, .tp-matrix-table) thead [data-tier-col] {
    white-space: nowrap;
  }

  :is(.tp-tier-matrix, .tp-matrix-table) .tp-matrix-tier-name {
    display: inline;
  }

  :is(.tp-tier-matrix, .tp-matrix-table) .tp-matrix-price {
    margin-block-start: 0;
    margin-inline-start: 0.45rem;
    vertical-align: middle;
  }
}

.tp-tier-matrix .is-highlighted-col,
.tp-matrix-table .is-highlighted-col {
  background: rgba(43, 184, 212, 0.12) !important;
}

.tp-check,
.tp-matrix-check {
  color: var(--tp-pro-emerald);
  font-weight: 700;
}

.tp-badge-free {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--tp-pro-emerald-bg);
  color: var(--tp-pro-emerald);
  font-size: 0.74rem;
  font-weight: 700;
}

.tp-dash,
.tp-matrix-dash {
  color: #9aa3b5;
}

.tp-tier-matrix-foot {
  margin-top: 1.35rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--tp-pro-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.tp-tier-matrix-foot p {
  margin: 0;
  font-size: 0.9rem;
  color: #3d4f75;
}

.tp-tier-matrix-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

/* ==========================================================================
   4. 4-STEP HOW IT WORKS TIMELINE (#how-it-works)
   ========================================================================== */
.tp-how-section,
.tp-workflow-section {
  padding: clamp(4.5rem, 7.5vw, 6.5rem) 0;
  background: var(--tp-pro-bg);
  border-top: 1px solid var(--tp-pro-line);
}

.tp-how-grid,
.tp-workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2.25rem;
}

.tp-how-step,
.tp-workflow-step {
  position: relative;
  background: var(--tp-pro-paper);
  border: 1px solid var(--tp-pro-line);
  border-radius: 22px;
  padding: 1.85rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 12px 32px rgba(15, 44, 107, 0.05);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.tp-how-step:hover,
.tp-workflow-step:hover {
  transform: translateY(-4px);
  border-color: var(--tp-pro-cyan);
  box-shadow: 0 18px 40px rgba(15, 44, 107, 0.09);
}

.tp-how-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.2rem;
}

.tp-how-num,
.tp-workflow-num {
  font-family: 'Google Sans', sans-serif;
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(43, 184, 212, 0.42);
  letter-spacing: -0.03em;
}

body.fa .tp-how-num {
  font-family: 'Shabnam', sans-serif;
}

.tp-how-time,
.tp-workflow-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.26rem 0.72rem;
  border-radius: 999px;
  background: #e8f6fa;
  color: var(--tp-pro-cyan-deep);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.tp-how-step h3,
.tp-workflow-step h3 {
  font-family: 'Google Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--tp-pro-navy);
  margin: 0.1rem 0 0;
  line-height: 1.32;
}

body.fa .tp-how-step h3,
body.fa .tp-workflow-step h3 {
  font-family: 'Shabnam', sans-serif;
  font-size: 1.1rem;
}

.tp-how-step p,
.tp-workflow-step p {
  font-size: 0.91rem;
  line-height: 1.72;
  color: #3d4f75;
  margin: 0;
  flex: 1;
}

@media (max-width: 980px) {
  .tp-how-grid,
  .tp-workflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .tp-how-grid,
  .tp-workflow-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   5. WHY TEHRANTO.PLUS VS TRADITIONAL AGENCIES (#why-tehranto-matrix)
   ========================================================================== */
.tp-why-section {
  padding: clamp(4.5rem, 7.5vw, 6.5rem) 0;
  background: var(--tp-pro-bg-soft);
  border-top: 1px solid var(--tp-pro-line);
}

.tp-vs-grid,
.tp-economics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.65rem;
  margin-top: 2rem;
  align-items: stretch;
}

.tp-vs-card,
.tp-econ-card {
  background: var(--tp-pro-paper);
  border: 1px solid var(--tp-pro-line-strong);
  border-radius: 26px;
  padding: clamp(1.75rem, 3vw, 2.35rem);
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  box-shadow: var(--tp-pro-shadow);
}

.tp-vs-card.is-tehranto,
.tp-econ-card.is-tehranto {
  background: linear-gradient(135deg, #ffffff 0%, #eef6f8 100%);
  color: var(--tp-pro-navy);
  border: 1.5px solid rgba(20, 131, 158, 0.26);
  box-shadow: 0 18px 40px -24px rgba(15, 44, 107, 0.16);
}

.tp-vs-card-head {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.tp-vs-badge,
.tp-econ-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #f2efe8;
  color: #5c6984;
}

body.fa .tp-vs-badge {
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.78rem;
}

.tp-vs-card.is-tehranto .tp-vs-badge {
  background: rgba(20, 131, 158, 0.12);
  color: #14839e;
  border: 1px solid rgba(20, 131, 158, 0.24);
}

.tp-vs-card h3,
.tp-econ-card h3 {
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  font-weight: 700;
  color: var(--tp-pro-navy);
  margin: 0;
  line-height: 1.28;
}

body.fa .tp-vs-card h3 {
  font-family: 'Shabnam', sans-serif;
}

.tp-vs-card.is-tehranto h3,
.tp-econ-card.is-tehranto h3 {
  color: #123b66;
}

.tp-vs-list,
.tp-econ-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tp-vs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.05rem;
  border-radius: 16px;
  background: #fbfaf7;
  border: 1px solid rgba(15, 44, 107, 0.09);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.tp-vs-card.is-tehranto .tp-vs-row {
  background: #ffffff;
  border: 1px solid rgba(15, 44, 107, 0.12);
  box-shadow: 0 6px 16px -12px rgba(15, 44, 107, 0.12);
}

.tp-vs-card.is-tehranto .tp-vs-row:hover {
  transform: translateY(-1px);
  border-color: rgba(20, 131, 158, 0.38);
  box-shadow: 0 10px 22px -14px rgba(15, 44, 107, 0.18);
}

.tp-vs-row-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.tp-vs-row-info > div {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

.tp-vs-row-title {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--tp-pro-navy);
  line-height: 1.28;
}

.tp-vs-card.is-tehranto .tp-vs-row-title {
  color: #123b66;
}

.tp-vs-row-sub {
  font-size: 0.78rem;
  color: #5b6b8a;
  line-height: 1.4;
}

.tp-vs-card.is-tehranto .tp-vs-row-sub {
  color: #4a5e85;
}

.tp-vs-row-price {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.78rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  background: rgba(20, 131, 158, 0.11);
  border: 1px solid rgba(20, 131, 158, 0.25);
  color: #14839e;
  white-space: nowrap;
  unicode-bidi: isolate;
}

.tp-vs-row-price.is-expensive {
  background: #f2efe8;
  border: 1px solid rgba(15, 44, 107, 0.14);
  color: #5b6b8a;
  font-weight: 700;
}

.tp-vs-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 800;
  flex-shrink: 0;
  background: rgba(15, 44, 107, 0.08);
  color: #6b7894;
}

.tp-vs-card.is-tehranto .tp-vs-icon {
  background: rgba(43, 184, 212, 0.15);
  color: #14839e;
}

@media (max-width: 860px) {
  .tp-vs-grid,
  .tp-economics-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .tp-vs-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
  }
  .tp-vs-row-price {
    align-self: flex-start;
  }
}

/* ==========================================================================
   6. GTA LOCAL SEO COVERAGE STRIP & HOMEPAGE FAQ (#home-faq)
   ========================================================================== */
.tp-gta-strip {
  margin-top: 2rem;
  padding: 1.35rem 1.65rem;
  border-radius: 20px;
  background: var(--tp-pro-paper);
  border: 1px solid var(--tp-pro-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  box-shadow: 0 10px 26px rgba(15, 44, 107, 0.04);
}

.tp-gta-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.22rem;
}

.tp-gta-label strong {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--tp-pro-navy);
  line-height: 1.3;
}

.tp-gta-label > span {
  font-size: 0.82rem;
  font-weight: 500;
  color: #5b6b8a;
  line-height: 1.4;
}

.tp-gta-pills,
.tp-gta-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.tp-gta-pill,
.tp-gta-city {
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  background: #f2efe8;
  border: 1px solid rgba(15, 44, 107, 0.1);
  color: #1f355e;
  font-size: 0.75rem;
  font-weight: 600;
}

.tp-home-faq,
.tp-home-faq-section {
  padding: clamp(4.5rem, 7.5vw, 6.5rem) 0;
  background: var(--tp-pro-bg);
  border-top: 1px solid var(--tp-pro-line);
}

.tp-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  margin-top: 2rem;
  align-items: start;
}

.tp-faq-item {
  background: var(--tp-pro-paper);
  border: 1px solid var(--tp-pro-line);
  border-radius: 18px;
  padding: 1.2rem 1.4rem;
  box-shadow: 0 8px 24px rgba(15, 44, 107, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tp-faq-item[open] {
  border-color: var(--tp-pro-cyan);
  box-shadow: 0 14px 32px rgba(15, 44, 107, 0.08);
}

.tp-faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: 'Google Sans', sans-serif;
  font-size: 1.04rem;
  font-weight: 700;
  color: var(--tp-pro-navy);
  line-height: 1.35;
}

body.fa .tp-faq-item summary {
  font-family: 'Shabnam', sans-serif;
  font-size: 0.98rem;
}

.tp-faq-item summary::-webkit-details-marker {
  display: none;
}

.tp-faq-item summary::after {
  content: '+';
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e8f6fa;
  color: var(--tp-pro-cyan-deep);
  display: inline-grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
}

.tp-faq-item[open] summary::after {
  content: '−';
  background: var(--tp-pro-cyan);
  color: #07204c;
}

.tp-faq-item p,
.tp-faq-answer {
  margin: 0.85rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(15, 44, 107, 0.08);
  font-size: 0.92rem;
  line-height: 1.7;
  color: #3d4f75;
}

.tp-faq-answer a {
  color: var(--tp-pro-cyan-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 820px) {
  .tp-faq-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   7. SERVICE PAGES ARCHITECTURAL EDITORIAL & BENTO GRIDS
   (Transforms narrow left-aligned div.prose, div.faq, and div.guide into
   balanced full-width 1280px card grids on Video, Web, Photo, Ads & Offers)
   ========================================================================== */

/* 7A. Multi-paragraph "Why ..." Editorial Card Grid (div.prose.tp-prose-grid) */
div.prose.tp-prose-grid {
  max-width: 100% !important;
  width: 100% !important;
  display: grid !important;
  gap: 1.35rem !important;
  margin-top: 2rem !important;
  align-items: stretch !important;
}

div.prose.tp-prose-grid.tp-prose-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

div.prose.tp-prose-grid.tp-prose-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

div.prose.tp-prose-grid > p {
  margin: 0 !important;
  padding: 1.8rem 1.65rem !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 44, 107, 0.12) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 32px rgba(15, 44, 107, 0.05) !important;
  font-size: 0.97rem !important;
  line-height: 1.78 !important;
  color: #2c3e66 !important;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
}

div.prose.tp-prose-grid > p:hover {
  transform: translateY(-3px) !important;
  border-color: var(--tp-pro-cyan) !important;
  box-shadow: 0 18px 40px rgba(15, 44, 107, 0.08) !important;
}

.tp-prose-num {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  margin-bottom: 1rem !important;
  border-radius: 10px !important;
  background: #e8f6fa !important;
  color: var(--tp-pro-cyan-deep) !important;
  font-family: 'Google Sans', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}

body.fa .tp-prose-num {
  font-family: 'Shabnam', sans-serif !important;
}

div.prose.tp-prose-single {
  max-width: 860px !important;
}

@media (max-width: 960px) {
  div.prose.tp-prose-grid.tp-prose-cols-3,
  div.prose.tp-prose-grid.tp-prose-cols-2 {
    grid-template-columns: 1fr !important;
  }
}

/* 7B. Service Page FAQ 2-Column Card Grid (div.faq) */
section div.faq {
  max-width: 100% !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem 1.35rem !important;
  margin-top: 2.2rem !important;
  align-items: start !important;
}

section div.faq > details {
  border: 1px solid rgba(15, 44, 107, 0.12) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  padding: 1.25rem 1.45rem !important;
  box-shadow: 0 10px 26px rgba(15, 44, 107, 0.04) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

section div.faq > details[open] {
  border-color: var(--tp-pro-cyan) !important;
  box-shadow: 0 14px 34px rgba(15, 44, 107, 0.08) !important;
}

section div.faq > details > summary {
  font-size: 1.04rem !important;
  line-height: 1.38 !important;
  color: var(--tp-pro-navy) !important;
}

section div.faq > details > summary::after {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #e8f6fa !important;
  color: var(--tp-pro-cyan-deep) !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

section div.faq > details[open] > summary::after {
  background: var(--tp-pro-cyan) !important;
  color: #07204c !important;
}

section div.faq > details > p.a {
  margin-top: 0.85rem !important;
  padding-top: 0.85rem !important;
  border-top: 1px solid rgba(15, 44, 107, 0.08) !important;
  max-width: none !important;
}

@media (max-width: 860px) {
  section div.faq {
    grid-template-columns: 1fr !important;
  }
}

/* 7C. Service Page "The Full Guide" 6-Column Bento Grid (div.guide.tp-guide-bento) */
div.guide.tp-guide-bento {
  max-width: 100% !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 1.35rem !important;
  margin-top: 2.25rem !important;
  align-items: stretch !important;
}

.tp-guide-card {
  grid-column: span 2;
  background: #ffffff;
  border: 1px solid rgba(15, 44, 107, 0.12);
  border-radius: 22px;
  padding: 1.85rem 1.7rem;
  box-shadow: 0 12px 32px rgba(15, 44, 107, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.tp-guide-card:nth-of-type(1),
.tp-guide-card:nth-of-type(2) {
  grid-column: span 3;
}

.tp-guide-card:hover {
  transform: translateY(-4px);
  border-color: var(--tp-pro-cyan);
  box-shadow: 0 18px 42px rgba(15, 44, 107, 0.09);
}

.tp-guide-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0f2c6b 0%, #154596 100%);
  color: #ffffff;
  font-family: 'Google Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
}

body.fa .tp-guide-num {
  font-family: 'Shabnam', sans-serif;
}

.tp-guide-card h3 {
  margin: 0.15rem 0 0 !important;
  font-family: 'Google Sans', sans-serif !important;
  font-size: 1.24rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--tp-pro-navy) !important;
}

body.fa .tp-guide-card h3 {
  font-family: 'Shabnam', sans-serif !important;
  font-size: 1.12rem !important;
}

.tp-guide-card p {
  margin: 0 !important;
  font-size: 0.95rem !important;
  line-height: 1.75 !important;
  color: #3d4f75 !important;
  flex: 1;
}

.tp-guide-cta-row {
  grid-column: 1 / -1;
  margin-top: 0.35rem;
  padding: 1.15rem 1.55rem;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff 0%, #eef6f8 100%);
  border: 1.5px solid rgba(20, 131, 158, 0.24);
  box-shadow: 0 8px 24px rgba(15, 44, 107, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.tp-guide-cta-row:hover {
  border-color: rgba(20, 131, 158, 0.45);
  box-shadow: 0 12px 28px rgba(15, 44, 107, 0.08);
  transform: translateY(-1px);
}

.tp-guide-cta-row p {
  margin: 0 !important;
  width: 100%;
  font-size: 0.96rem !important;
  line-height: 1.5 !important;
}

.tp-guide-cta-row a {
  width: 100%;
  color: #123b66 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-bottom: none !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.tp-guide-cta-row a::after {
  content: "Read Guide →";
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  background: rgba(43, 184, 212, 0.16);
  color: #0e6b82;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

body.fa .tp-guide-cta-row a::after {
  content: "مطالعه راهنما ←";
  font-family: 'Shabnam', sans-serif;
}

.tp-guide-cta-row:hover a::after {
  background: #14839e;
  color: #ffffff;
}

@media (max-width: 1020px) {
  div.guide.tp-guide-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .tp-guide-card,
  .tp-guide-card:nth-of-type(1),
  .tp-guide-card:nth-of-type(2) {
    grid-column: span 1;
  }
  .tp-guide-card:last-of-type:nth-of-type(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  div.guide.tp-guide-bento {
    grid-template-columns: 1fr !important;
  }
  .tp-guide-card,
  .tp-guide-card:nth-of-type(1),
  .tp-guide-card:nth-of-type(2),
  .tp-guide-card:last-of-type:nth-of-type(odd) {
    grid-column: 1 / -1;
  }
  .tp-guide-cta-row a {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   8. PORTFOLIO WEBSITE LINKS & PHOTO ORBIT CONTROLS GUARDRAILS
   ========================================================================== */
.tp-web-portfolio-link {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}

.tp-web-portfolio-link strong {
  color: #ffffff !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tp-web-portfolio-link span {
  color: #7dd3e6 !important;
}

.tp-web-portfolio-link b {
  color: #2bb8d4 !important;
}

.tp-photo-orbit-controls {
  flex-wrap: wrap !important;
  gap: 0.65rem !important;
}

.tp-photo-orbit-filters {
  flex-shrink: 0 !important;
  max-width: 100%;
  overflow-x: auto;
}

@media (min-width: 721px) {
  html body:not(.fa) .tp-photo-orbit .tp-photo-orbit-cue .tp-photo-orbit-cue-mobile,
  html body.fa .tp-photo-orbit .tp-photo-orbit-cue .tp-photo-orbit-cue-mobile {
    display: none !important;
  }
}

@media (max-width: 720px) {
  html body:not(.fa) .tp-photo-orbit .tp-photo-orbit-cue .tp-photo-orbit-cue-desktop,
  html body.fa .tp-photo-orbit .tp-photo-orbit-cue .tp-photo-orbit-cue-desktop {
    display: none !important;
  }
}

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

/* ==========================================================================
   9. BLOG SEARCH BAR, READING PROGRESS & AUTO TABLE OF CONTENTS
   ========================================================================== */
/* Blog is intentionally search-first, without the service-page hero. */
.tp-blog-directory {
  padding-block: var(--tp-pro-blog-top-space) clamp(2rem, 4vw, 3.5rem);
}

.tp-blog-directory .tp-blog-search-wrap {
  margin-bottom: 1.25rem;
}

.tp-blog-directory .blog-filters {
  margin-top: 0;
}

.tp-blog-directory .blog-grid {
  margin-block: 2.5rem 0;
}

/* Share one intrinsic desktop track: search edges match the whole category row. */
@media (min-width: 1121px) {
  .tp-blog-directory > .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr);
  }

  .tp-blog-directory .tp-blog-search-wrap,
  .tp-blog-directory .blog-filters {
    grid-column: 2;
  }

  .tp-blog-directory .tp-blog-search-wrap {
    max-width: none;
  }

  .tp-blog-directory .blog-filters {
    flex-wrap: nowrap;
  }

  .tp-blog-directory .blog-grid {
    grid-column: 1 / -1;
  }
}

.tp-blog-search-wrap {
  width: 100%;
  max-width: 720px;
  margin: 0 auto 2.25rem;
  grid-column: 1 / -1;
}

.tp-blog-search-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 56px;
  padding: 0.45rem 0.6rem 0.45rem 1.2rem;
  border-radius: var(--tp-pro-pill-radius);
  border: 1px solid var(--line-strong, var(--tp-pro-line-strong));
  background: var(--paper, var(--tp-pro-paper));
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.fa .tp-blog-search-box {
  padding: 0.45rem 1.2rem 0.45rem 0.6rem;
}

.tp-blog-search-box:focus-within {
  border-color: var(--tp-pro-cyan);
  box-shadow: 0 0 0 3px rgba(43, 184, 212, 0.14);
}

.tp-blog-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tp-pro-cyan-deep);
  flex-shrink: 0;
}

.tp-blog-search-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--tp-pro-navy);
  font-family: inherit;
  font-size: 0.96rem;
  line-height: 1.4;
  padding: 0.35rem 0;
  -webkit-appearance: none;
  appearance: none;
}

.tp-blog-search-input::placeholder {
  color: #7b88a2;
}

.tp-blog-search-clear {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: rgba(15, 44, 107, 0.07);
  color: #4c5d7e;
  font-size: 0.78rem;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.tp-blog-search-clear[hidden] {
  display: none;
}

.tp-blog-search-clear:hover {
  background: rgba(15, 44, 107, 0.14);
  color: var(--tp-pro-navy);
}

.tp-blog-count {
  flex-shrink: 0;
  padding: 0.42rem 0.85rem;
  border-radius: var(--tp-pro-pill-radius);
  background: #f2efe8;
  border: 1px solid rgba(15, 44, 107, 0.1);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--tp-pro-navy);
  white-space: nowrap;
}

.tp-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 10050;
  background: transparent;
  pointer-events: none;
}

.tp-reading-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0f2c6b 0%, #2bb8d4 100%);
  transition: width 0.1s linear;
}

.tp-article-toc {
  margin: 1.75rem 0 2.25rem;
  padding: 1.25rem 1.4rem;
  border-radius: 16px;
  background: #f2efe8;
  border: 1px solid var(--tp-pro-line);
}

.tp-article-toc-title {
  font-family: 'Google Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tp-pro-navy);
  margin: 0 0 0.75rem;
}

body.fa .tp-article-toc-title {
  font-family: 'Shabnam', sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.tp-article-toc-list {
  margin: 0;
  padding-inline-start: 1.2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.45rem 1.2rem;
  font-size: 0.86rem;
}

.tp-article-toc-list a {
  color: #1f355e;
  text-decoration: none;
}

.tp-article-toc-list a:hover {
  color: var(--tp-pro-cyan-deep);
  text-decoration: underline;
}

/* ==========================================================================
   10. UPPER-SECTION CALCULATOR JUMP BARS & BLOG EDITORIAL ENHANCEMENTS
   ========================================================================== */
.tp-calc-jump-bar {
  position: relative;
  z-index: 2;
  margin-top: 1.5rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.35rem;
  border-radius: 18px;
  background: #fbfaf7;
  border: 1.5px solid var(--tp-pro-line-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.15rem;
  flex-wrap: wrap;
  box-shadow: 0 8px 24px rgba(15, 44, 107, 0.05);
}

.tp-calc-jump-copy {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1 1 320px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #1f355e !important;
}

.tp-calc-jump-copy span {
  color: #1f355e !important;
}

.tp-calc-jump-copy strong {
  color: var(--tp-pro-navy) !important;
  font-weight: 700;
}

.tp-calc-jump-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(43, 184, 212, 0.16) 0%, rgba(15, 44, 107, 0.08) 100%);
  border: 1px solid rgba(20, 131, 158, 0.25);
  color: #0f4c75 !important;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}

.tp-calc-jump-icon svg {
  width: 20px;
  height: 20px;
  stroke: #14839e;
}

.tp-calc-jump-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.68rem 1.2rem;
  border-radius: 999px;
  background: var(--tp-pro-navy);
  color: #ffffff !important;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 6px 16px rgba(15, 44, 107, 0.18);
}

.tp-calc-jump-btn:hover {
  transform: translateY(-1px);
  background: var(--tp-pro-cyan);
  color: #091d42 !important;
}

.tp-blog-callout {
  margin: 1.75rem 0;
  padding: 1.35rem 1.5rem;
  border-radius: 16px;
  background: #f5f2ea;
  border-inline-start: 4px solid var(--tp-pro-cyan);
  font-size: 0.98rem;
  line-height: 1.75;
  color: #1f355e;
}

.tp-blog-callout strong {
  color: var(--tp-pro-navy);
}

.tp-blog-checklist {
  margin: 1.25rem 0 1.75rem;
  padding-inline-start: 1.35rem;
  display: grid;
  gap: 0.65rem;
}

.tp-blog-checklist li {
  line-height: 1.7;
  color: #2c3e66;
}

.tp-blog-cta-box {
  margin: 2.25rem 0 1rem;
  padding: 1.5rem 1.65rem;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff 0%, #eef6f8 100%);
  border: 1.5px solid rgba(20, 131, 158, 0.25);
  box-shadow: 0 12px 28px -20px rgba(15, 44, 107, 0.14);
  color: #123b66;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.15rem;
}

.tp-blog-cta-box h3 {
  margin: 0 0 0.35rem !important;
  color: #123b66 !important;
  font-size: 1.15rem !important;
}

.tp-blog-cta-box p {
  margin: 0 !important;
  color: #354a73 !important;
  font-size: 0.92rem !important;
}

.tp-blog-cta-box a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.62rem 1.2rem;
  border-radius: 999px;
  background: rgba(20, 131, 158, 0.13);
  border: 1px solid rgba(20, 131, 158, 0.28);
  color: #0f4c75 !important;
  font-weight: 700;
  font-size: 0.86rem;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.tp-blog-cta-box a:hover {
  background: var(--tp-pro-cyan);
  color: #091d42 !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   11. PAID ADS HERO MINIMAL INDEX & PORTFOLIO WEBSITE SHOWCASE REDESIGN
   ========================================================================== */
.ads-hero .cta-row {
  margin-top: 1.35rem;
  gap: 0.7rem;
}

.ads-hero .btn {
  padding: 0.65rem 1.1rem;
  font-size: 0.86rem;
}

.tp-ads-hero-highlights {
  margin: 1.8rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.tp-ads-hero-highlights-head {
  margin-bottom: 0.65rem;
}

.tp-ads-hero-highlights-kicker {
  font-family: 'Google Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 1.7;
  color: color-mix(in srgb, var(--tp-pro-navy) 68%, #ffffff);
}

body.fa .tp-ads-hero-highlights-kicker {
  font-family: 'Shabnam', sans-serif;
  letter-spacing: 0;
}

.tp-ads-hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.4rem;
}

.tp-ads-hero-row {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) auto;
  align-items: center;
  min-height: 42px;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--tp-pro-navy) 17%, transparent);
  color: var(--tp-pro-navy);
  text-decoration: none;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.tp-ads-hero-row:hover {
  color: var(--tp-pro-cyan-deep);
  border-bottom-color: rgba(20, 131, 158, 0.38);
}

.tp-ads-hero-num {
  font-size: 0.61rem;
  font-weight: 400;
  color: color-mix(in srgb, var(--tp-pro-navy) 68%, #ffffff);
  font-variant-numeric: tabular-nums;
}

.tp-ads-hero-name {
  font-family: 'Google Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.5;
  color: inherit;
}

body.fa .tp-ads-hero-name {
  font-family: 'Shabnam', sans-serif;
}

.tp-ads-hero-meta {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--tp-pro-cyan-deep);
  white-space: nowrap;
}

/* Portfolio page: Selected Website Portfolio — calm, soft light editorial cards */
.tp-library-page .tp-web-portfolio {
  margin-top: 2.2rem !important;
  padding: 1.35rem 1.5rem !important;
  border-radius: 20px !important;
  border: 1.5px solid rgba(20, 131, 158, 0.2) !important;
  background: linear-gradient(135deg, #ffffff 0%, #eef6f8 100%) !important;
  box-shadow: 0 14px 32px -22px rgba(15, 44, 107, 0.14) !important;
}

.tp-library-page .tp-web-portfolio-label {
  margin: 0 0 0.95rem !important;
  color: #14839e !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
}

.tp-library-page .tp-web-portfolio-links {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
}

.tp-library-page .tp-web-portfolio-link {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.65rem !important;
  min-height: 54px !important;
  padding: 0.65rem 0.9rem !important;
  border-radius: 13px !important;
  border: 1px solid rgba(15, 44, 107, 0.12) !important;
  background: #ffffff !important;
  color: #123b66 !important;
  box-shadow: 0 6px 16px -12px rgba(15, 44, 107, 0.12) !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

.tp-library-page .tp-web-portfolio-link:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(20, 131, 158, 0.42) !important;
  background: #f8fcfd !important;
  box-shadow: 0 12px 24px -16px rgba(15, 44, 107, 0.2) !important;
}

.tp-library-page .tp-web-portfolio-link > span {
  display: inline-grid !important;
  place-items: center !important;
  padding: 0.2rem 0.48rem !important;
  border-radius: 7px !important;
  background: rgba(43, 184, 212, 0.13) !important;
  color: #14839e !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.tp-library-page .tp-web-portfolio-link > strong {
  color: #123b66 !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.tp-library-page .tp-web-portfolio-link > b {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: rgba(20, 131, 158, 0.1) !important;
  color: #14839e !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  transition: background 0.18s ease, color 0.18s ease !important;
}

.tp-library-page .tp-web-portfolio-link:hover > b {
  background: var(--tp-pro-cyan) !important;
  color: #091d42 !important;
}

@media (max-width: 980px) {
  .tp-library-page .tp-web-portfolio-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.tp-ads-card-list {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid rgba(15, 44, 107, 0.1);
  display: grid;
  gap: 0.42rem;
  font-size: 0.83rem;
  color: #243a63;
}

.tp-ads-card-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  line-height: 1.45;
}

.tp-ads-card-list li::before {
  content: "✓";
  color: var(--tp-pro-cyan-deep);
  font-weight: 700;
  flex-shrink: 0;
}

.tp-ads-compare-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.tp-ads-compare-card {
  padding: 1.6rem 1.5rem;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(15, 44, 107, 0.14);
  box-shadow: 0 12px 28px -20px rgba(15, 44, 107, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tp-ads-compare-tag {
  align-self: flex-start;
  padding: 0.24rem 0.68rem;
  border-radius: 999px;
  background: rgba(20, 131, 158, 0.11);
  color: var(--tp-pro-cyan-deep);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.fa .tp-ads-compare-tag {
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.78rem;
}

.tp-ads-compare-card h3 {
  margin: 0 !important;
  font-size: 1.25rem !important;
  color: var(--tp-pro-navy) !important;
}

.tp-ads-compare-card p {
  margin: 0 !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  color: #2c3e66 !important;
}

@media (max-width: 640px) {
  .tp-ads-hero-grid,
  .tp-library-page .tp-web-portfolio-links {
    grid-template-columns: 1fr !important;
  }
}



/* Required final design credit, shared across both languages and the 404. */
tehranto-footer .tp-design-credit{margin:1rem 0 0;font-size:13px;font-weight:400;line-height:1.6;color:#3d4f75;letter-spacing:0;unicode-bidi:isolate}
tehranto-footer .tp-design-credit a{color:#0f2c6b;text-decoration:underline;text-underline-offset:3px}
tehranto-footer .tp-design-credit a:focus-visible{outline:3px solid #14839e;outline-offset:3px}

/* Reality-show cover: original cached photo with native brand typography. */
.tp-show-frame {
  background: var(--tp-pro-navy-deep);
  border: 1px solid var(--tp-pro-line);
  border-radius: 20px;
  box-shadow: var(--tp-pro-shadow);
}

.tp-show-poster {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--tp-pro-paper);
  background: var(--tp-pro-navy-deep);
  text-decoration: none;
  direction: ltr;
  text-align: left;
}

.tp-show-poster > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 48%;
}

.tp-show-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(10, 31, 77, 0.08) 52%, rgba(10, 31, 77, 0.94) 100%);
  pointer-events: none;
}

.tp-show-caption {
  position: absolute;
  z-index: 1;
  inset-inline-start: clamp(1.1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  inset-inline-end: 5.75rem;
  display: grid;
  gap: 0.35rem;
  font-family: 'Google Sans', Roboto, sans-serif;
}

.tp-show-title {
  color: var(--tp-pro-paper);
  font-size: clamp(1.05rem, 2.7vw, 1.8rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.tp-show-season {
  color: var(--tp-pro-cyan-soft);
  font-size: clamp(0.7rem, 1.4vw, 0.8rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.1em;
}

.tp-show-play {
  position: absolute;
  z-index: 1;
  inset-inline-end: clamp(1.1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--tp-pro-cyan-soft);
  border-radius: 50%;
  color: var(--tp-pro-navy);
  background: var(--tp-pro-paper);
  transition: background 0.2s ease;
}

.tp-show-poster:hover .tp-show-play,
.tp-show-poster:focus-visible .tp-show-play {
  background: var(--tp-pro-cyan-soft);
}

.tp-show-poster:focus-visible {
  outline: 3px solid var(--tp-pro-paper);
  outline-offset: -5px;
  box-shadow: inset 0 0 0 8px var(--tp-pro-navy);
}

@media (prefers-reduced-motion: reduce) {
  .tp-show-play { transition: none; }
}

/* Center the complete pricing chip group when it fits; auto margins become
   zero in an overflowing row, preserving the first chip and horizontal scroll. */
.pricing-head .ads-platforms > .kw-pill:first-child {
  margin-inline-start: auto;
}

.pricing-head .ads-platforms > .kw-pill:last-child {
  margin-inline-end: auto;
}


/* Keep the provider grid and one common drift; phase adjacent columns by
   one third of a measured card, so vertical gaps remain constant while moving. */
.tp-review-section[data-review-layout="balanced"][data-review-mode="motion"][data-review-reduced="false"] .tp-review-card {
  transform: translateY(calc(var(--review-stagger-step, 0px) * var(--review-phase, 0) * -1));
}

/* Setup is a supporting one-time charge, separate from monthly management. */
.tp-ads-setup-note {margin:.6rem 0 1.25rem;font-size:.82rem;font-weight:400;line-height:1.65;color:inherit;}
.tp-ads-setup-note del {opacity:.7;margin-inline-end:.35rem;}

/* Selected calculator cards: one toggle target, including the visible remove mark. */
.tp-est-opt { padding-inline-end: 2rem; }
.tp-est-remove {
  position: absolute;
  inset-block-start: .45rem;
  inset-inline-end: .45rem;
  display: grid;
  place-items: center;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--tp-pro-navy);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
}
.tp-est-remove[hidden] { display: none; }
.tp-est-opt.is-dept-card.is-selected .tp-est-remove { color: #fff; }

/* ==========================================================================
   8. MONTHLY END-OF-MONTH COUNTDOWN & UNIFIED RED DISCOUNT PRICE HIERARCHY
   - Preserves 100% of live site buttons, card headers, and palette.
   - Light editorial inline countdown banner (only Solari flip plates dark).
   - Optically centered bottom-left floating capsule ("UP TO 50% OFF").
   - Large final discounted prices + top-tangent upper-right RED $Was & % OFF.
   - Uniform UI/UX micro-offer metadata typography.
   ========================================================================== */

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

/* --- 8A. Unified Offer RED Palette & Top-Tangent Upper-Right Price Stack --- */
:root {
  --tp-offer-red: #dc2626;
  --tp-offer-red-ink: #b91c1c;
  --tp-offer-red-bg: #fff1f2;
  --tp-offer-red-border: #f5b5b9;
  --tp-offer-red-dark-card: #ff6b6b;
  --tp-offer-red-dark-bg: rgba(239, 68, 68, 0.2);
  --tp-offer-red-dark-border: rgba(255, 107, 107, 0.46);
}

/* Primary display price containers: always LTR [Big Final Price] [Upper-Right Red Stack] */
.price-card .price-amount,
.promo-card .promo-price .amount,
.pcard .pc-price,
.photo-price-card .photo-price-value,
.dept-hero .d-price {
  direction: ltr !important;
  display: inline-flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
  line-height: 1 !important;
}

.promo-card .promo-price {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}

body.fa .promo-card .promo-price {
  align-items: flex-start !important;
}

/* Large, bold, commanding final discounted numbers that extend well below the companion stack */
.price-card .price-amount > .cur {
  display: inline-flex !important;
  align-items: flex-start !important;
  font-size: clamp(3.55rem, 4.1vw, 4.3rem) !important;
  font-weight: 800 !important;
  line-height: 0.78 !important;
  letter-spacing: -0.03em !important;
}

.promo-card .promo-price .amount > .cur {
  display: inline-flex !important;
  align-items: flex-start !important;
  font-size: clamp(3.35rem, 3.9vw, 3.95rem) !important;
  font-weight: 800 !important;
  line-height: 0.78 !important;
  letter-spacing: -0.03em !important;
}

.pcard .pc-price > .cur,
.photo-price-card .photo-price-value > .cur {
  display: inline-flex !important;
  align-items: flex-start !important;
  font-size: clamp(3.2rem, 3.7vw, 3.75rem) !important;
  font-weight: 800 !important;
  line-height: 0.78 !important;
  letter-spacing: -0.03em !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

.dept-hero .d-price > .cur {
  display: inline-flex !important;
  align-items: flex-start !important;
  font-size: clamp(3.2rem, 5.6vw, 4.4rem) !important;
  font-weight: 800 !important;
  line-height: 0.78 !important;
  letter-spacing: -0.03em !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

.pcard .pc-price > .cur > .lang-en,
body.fa .pcard .pc-price > .cur > .lang-fa,
.photo-price-card .photo-price-value > .cur > .lang-en,
body.fa .photo-price-card .photo-price-value > .cur > .lang-fa,
.dept-hero .d-price > .cur > .lang-en,
body.fa .dept-hero .d-price > .cur > .lang-fa {
  display: inline-flex !important;
  align-items: flex-start !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

/* Dollar superscript inside .cur: top-aligned cleanly with cap-top of digits */
.price-card .price-amount > .cur sup,
.promo-card .promo-price .amount > .cur sup,
.pcard .pc-price > .cur sup,
.photo-price-card .photo-price-value > .cur sup,
.dept-hero .d-price > .cur sup {
  position: static !important;
  top: auto !important;
  font-size: 0.42em !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin-top: 0.04em !important;
  margin-right: 0.06em !important;
}

/* Subpage & Photo unit suffix (e.g. / package, / month, / page, / Session) */
.pcard .pc-price > .unit,
.photo-price-card .photo-price-value > .unit,
.dept-hero .d-price > .unit {
  align-self: flex-end !important;
  margin-left: 0.04rem !important;
  margin-bottom: 0.08rem !important;
  font-size: 0.88rem !important;
  line-height: 1.1 !important;
}

/* Web Design & Paid Ads section claim-price (From $99 / page, Or from $499, From $99 / month) */
.webdesign-claim .claim-price {
  direction: ltr !important;
  display: flex !important;
  width: 100% !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 0.46rem !important;
}

body.fa .webdesign-claim .claim-price {
  justify-content: flex-end !important;
}

.webdesign-claim .claim-price .from {
  align-self: flex-end !important;
  margin-bottom: 0.22rem !important;
}

body.fa .webdesign-claim .claim-price .from {
  text-align: right !important;
  direction: rtl !important;
}

body.fa .webdesign-claim .claim-price .from,
body.fa .webdesign-claim .claim-price .unit {
  font-style: normal !important;
}

.webdesign-claim .claim-price .big {
  display: inline-flex !important;
  align-items: flex-start !important;
  font-size: clamp(3.35rem, 6.2vw, 4.7rem) !important;
  font-weight: 800 !important;
  line-height: 0.78 !important;
  letter-spacing: -0.03em !important;
}

.webdesign-claim .claim-price .big sup {
  position: static !important;
  top: auto !important;
  font-size: 0.42em !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin-top: 0.04em !important;
  margin-right: 0.06em !important;
}

.webdesign-claim .claim-price .unit {
  align-self: flex-end !important;
  margin-left: -0.08rem !important;
  margin-bottom: 0.14rem !important;
}

/* Upper-right companion stack: painted cap-top tangent (مماس از بالا) with big final digits */
.tp-price-compare {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0.2rem !important;
  margin-top: 0.21rem !important;
  flex-shrink: 0 !important;
  direction: ltr !important;
}

.webdesign-claim .claim-price .tp-price-compare {
  margin-top: 0.27rem !important;
}

.pcard .pc-price .tp-price-compare,
.photo-price-card .photo-price-value .tp-price-compare {
  margin-top: 0.17rem !important;
}

body.fa .tp-price-compare {
  margin-top: 0.14rem !important;
}

/* Old struck-through price: slim weight, smaller scale, unmistakable Offer RED + diagonal slash */
s.tp-price-was {
  position: relative !important;
  display: inline-block !important;
  text-decoration: none !important;
  font-family: 'Google Sans', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.96rem !important;
  font-weight: 450 !important;
  line-height: 0.88 !important;
  letter-spacing: -0.01em !important;
  color: var(--tp-offer-red) !important;
  padding: 0 0.08rem !important;
  white-space: nowrap !important;
}

body.fa s.tp-price-was {
  font-family: 'Shabnam', sans-serif !important;
  font-weight: 400 !important;
}

s.tp-price-was::after {
  content: "" !important;
  position: absolute !important;
  left: -2px !important;
  right: -2px !important;
  top: 52% !important;
  height: 1.5px !important;
  background: var(--tp-offer-red) !important;
  border-radius: 2px !important;
  transform: translateY(-50%) rotate(-12deg) !important;
  pointer-events: none !important;
}

/* Discount % pill directly underneath old price: unified Offer RED everywhere */
.tp-price-off-tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.13rem 0.42rem !important;
  border-radius: 999px !important;
  background: var(--tp-offer-red-bg) !important;
  border: 1px solid var(--tp-offer-red-border) !important;
  color: var(--tp-offer-red) !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body.fa .tp-price-off-tag {
  font-family: 'Shabnam', sans-serif !important;
  letter-spacing: 0 !important;
  font-size: 0.62rem !important;
}

/* Slightly scaled companion stack on $999 promo cards & subpage .pcard so big number dominates */
.promo-card .tp-price-compare s.tp-price-was,
.pcard .tp-price-compare s.tp-price-was,
.photo-price-card .tp-price-compare s.tp-price-was {
  font-size: 0.88rem !important;
}

.promo-card .tp-price-compare .tp-price-off-tag,
.pcard .tp-price-compare .tp-price-off-tag,
.photo-price-card .tp-price-compare .tp-price-off-tag {
  font-size: 0.57rem !important;
  padding: 0.11rem 0.38rem !important;
}

/* Tier Comparison Matrix Header Prices: no blue pill background; final price >= red stack height & flush bottom-aligned */
:is(.tp-tier-matrix, .tp-matrix-table) thead [data-tier-col] {
  vertical-align: top !important;
  white-space: normal !important;
}

:is(.tp-tier-matrix, .tp-matrix-table) .tp-matrix-tier-name {
  display: block !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #364b74 !important;
  margin-bottom: 0.42rem !important;
}

.tp-matrix-price {
  direction: ltr !important;
  display: inline-flex !important;
  align-items: flex-end !important;
  gap: 0.42rem !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  vertical-align: bottom !important;
}

.tp-matrix-price > .cur {
  display: inline-flex !important;
  align-items: flex-start !important;
  font-family: 'Google Sans', sans-serif !important;
  font-size: clamp(2.36rem, 2.85vw, 2.72rem) !important;
  font-weight: 800 !important;
  line-height: 0.72 !important;
  letter-spacing: -0.03em !important;
  color: var(--tp-pro-navy, #0f2c6b) !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

body.fa .tp-matrix-price > .cur {
  font-family: 'Shabnam', sans-serif !important;
  font-size: clamp(2.45rem, 2.95vw, 2.82rem) !important;
  letter-spacing: 0 !important;
  line-height: 0.7 !important;
}

.tp-matrix-price > .cur sup {
  position: static !important;
  top: auto !important;
  font-size: 0.43em !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin-top: 0.03em !important;
  margin-right: 0.05em !important;
}

.tp-matrix-price .tp-price-compare {
  margin-top: 0 !important;
  margin-bottom: 0.01rem !important;
  gap: 0.16rem !important;
}

body.fa .tp-matrix-price .tp-price-compare {
  margin-bottom: 0.08rem !important;
}

.tp-matrix-price .tp-price-compare s.tp-price-was {
  font-size: 0.8rem !important;
  line-height: 0.9 !important;
}

.tp-matrix-price .tp-price-compare .tp-price-off-tag {
  font-size: 0.53rem !important;
  padding: 0.1rem 0.36rem !important;
}

/* Compact inline price rows (Cross-service cards & Ads hero list) */
.cross .x-price,
.tp-ads-hero-meta {
  direction: ltr !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.38rem !important;
  flex-wrap: nowrap !important;
}

.cross .x-price > .cur,
.tp-ads-hero-meta > .cur {
  font-weight: 700 !important;
  line-height: 1.05 !important;
}

.tp-price-compare--sm {
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.26rem !important;
  margin-top: 0 !important;
}

s.tp-price-was.tp-price-was--sm {
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

.tp-price-compare--sm .tp-price-off-tag {
  font-size: 0.54rem !important;
  padding: 0.08rem 0.32rem !important;
}

/* #why-tehranto-matrix: Equalized Left & Right cards, aligned 5 rows, and uniform 38px centered pills */
.tp-vs-badge {
  border: 1px solid transparent;
}

@media (min-width: 861px) {
  .tp-vs-card-head {
    min-height: 76px !important;
    justify-content: flex-start !important;
  }

  .tp-vs-list {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-rows: repeat(5, 1fr) !important;
    gap: 0.78rem !important;
  }

  .tp-vs-row {
    min-height: 78px !important;
    height: 100% !important;
  }
}

.tp-vs-row-price {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 0.98rem !important;
  gap: 0.46rem !important;
  border-radius: 999px !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

body.fa .tp-vs-row-price:not(:has(.tp-price-compare--sm)):not(.is-expensive) {
  direction: rtl !important;
}

.tp-vs-row-price > .tp-vs-cur {
  display: inline-flex !important;
  align-items: center !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.tp-vs-row-price .tp-price-compare--sm {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 0 !important;
  padding-left: 0.44rem !important;
  border-left: 1px solid rgba(20, 131, 158, 0.24) !important;
}

.tp-vs-row-price s.tp-price-was.tp-price-was--sm {
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  padding: 0 !important;
  color: #d92d20 !important;
  opacity: 0.9 !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 1.4px !important;
  text-decoration-color: rgba(217, 45, 32, 0.78) !important;
}

.tp-vs-row-price s.tp-price-was::after {
  display: none !important;
}

/* Keep Cross-link & Ads hero rows extra clean on narrow widths: show red $Was cleanly without crowding */
.cross .x-price .tp-price-compare--sm .tp-price-off-tag,
.tp-ads-hero-meta .tp-price-compare--sm .tp-price-off-tag,
.tp-vs-row-price .tp-price-compare--sm .tp-price-off-tag {
  display: none !important;
}

/* Dark Navy Surfaces (Signature cards, Dept Hero, Estimator Summary — NOT light-ground Matrix Header) */
.price-card.tier-signature s.tp-price-was,
.promo-card.tier-signature s.tp-price-was,
.pcard.t-signature s.tp-price-was,
.dept-hero s.tp-price-was {
  color: var(--tp-offer-red-dark-card) !important;
}

.price-card.tier-signature s.tp-price-was::after,
.promo-card.tier-signature s.tp-price-was::after,
.pcard.t-signature s.tp-price-was::after,
.dept-hero s.tp-price-was::after {
  background: var(--tp-offer-red-dark-card) !important;
}

/* Harmonize existing <del>$399</del> on Ads setup note & Estimator old total to Offer RED */
.tp-ads-setup-note del {
  color: var(--tp-offer-red) !important;
  text-decoration-color: var(--tp-offer-red) !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}

.pcard.t-signature .tp-ads-setup-note del {
  color: var(--tp-offer-red-dark-card) !important;
  text-decoration-color: var(--tp-offer-red-dark-card) !important;
}

.tp-sum-old-total {
  color: var(--tp-offer-red-dark-card) !important;
  text-decoration-color: var(--tp-offer-red-dark-card) !important;
}

/* --- 8B. Uniform UI/UX Micro-Offer Metadata Line ("Special Offer • First order only • Till Oct 31") --- */
.tp-card-offer {
  margin-top: 0.55rem !important;
  margin-bottom: 0.15rem !important;
}

.pcard .tp-card-offer {
  margin-top: 0.45rem !important;
  margin-bottom: 0.65rem !important;
}

.promo-card .promo-price .tp-card-offer {
  margin-top: 0.42rem !important;
  margin-bottom: 0 !important;
}

.tp-micro-offer-line {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  row-gap: 0.18rem !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.005em !important;
  color: rgba(15, 36, 74, 0.68) !important;
}

body.fa .tp-micro-offer-line {
  font-family: 'Shabnam', sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.promo-card .promo-price .tp-micro-offer-line {
  justify-content: flex-end !important;
  font-size: 0.73rem !important;
}

body.fa .promo-card .promo-price .tp-micro-offer-line {
  justify-content: flex-start !important;
}

.tp-micro-offer-item {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  white-space: nowrap !important;
}

.tp-micro-offer-sep {
  display: inline-block !important;
  margin-inline: 0.38rem !important;
  font-size: 0.78em !important;
  line-height: 1 !important;
  color: currentColor !important;
  opacity: 0.5 !important;
  user-select: none !important;
}

.price-card.tier-gold .tp-micro-offer-line,
.promo-card.tier-gold .tp-micro-offer-line,
.pcard.t-gold .tp-micro-offer-line {
  color: rgba(92, 60, 10, 0.76) !important;
}

.price-card.tier-signature .tp-micro-offer-line,
.promo-card.tier-signature .tp-micro-offer-line,
.pcard.t-signature .tp-micro-offer-line,
.dept-hero .tp-micro-offer-line {
  color: rgba(226, 236, 252, 0.78) !important;
}

/* --- 8C. Light Editorial Inline Countdown Banner (.tp-offer-showcase) ---
   Symmetrical frame padding; Line 1 (micro badge + date) sits top-tangent (مماس از بالا)
   with the top edge of the dark Solari plates, while Line 2 (bold FOMO campaign headline)
   balances cleanly to the bottom edge of the timer unit labels. */
.tp-offer-showcase {
  max-width: 1080px !important;
  margin: 1.85rem auto 2.35rem !important;
  padding: 1.22rem 1.7rem 1.04rem !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #fbfaf6 0%, #f3f1ea 100%) !important;
  border: 1px solid rgba(15, 44, 107, 0.12) !important;
  box-shadow: 0 10px 30px rgba(15, 44, 107, 0.045) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 1.35rem !important;
  text-align: left !important;
}

.tp-offer-strip--start.tp-offer-showcase {
  max-width: 100% !important;
  margin: 1.35rem 0 2rem !important;
}

body.fa .tp-offer-showcase {
  direction: rtl !important;
  text-align: right !important;
}

.tp-showcase-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0.58rem !important;
  padding-top: 0.18rem !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.tp-showcase-badges {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.55rem !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.tp-off-pill-red {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.22rem 0.62rem !important;
  border-radius: 999px !important;
  background: var(--tp-offer-red-bg) !important;
  border: 1px solid var(--tp-offer-red-border) !important;
  color: var(--tp-offer-red) !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body.fa .tp-off-pill-red {
  font-family: 'Shabnam', sans-serif !important;
  letter-spacing: 0 !important;
  font-size: 0.72rem !important;
}

.tp-showcase-kicker {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  row-gap: 0.15rem !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: rgba(15, 36, 74, 0.68) !important;
}

body.fa .tp-showcase-kicker {
  font-family: 'Shabnam', sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.77rem !important;
}

.tp-showcase-headline {
  margin: 0 !important;
  max-width: none !important;
  font-family: 'Google Sans', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(1.04rem, 1.4vw, 1.22rem) !important;
  font-weight: 700 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.016em !important;
  color: var(--tp-pro-navy, #0f2c6b) !important;
}

body.fa .tp-showcase-headline {
  font-family: 'Shabnam', sans-serif !important;
  font-size: clamp(1.02rem, 1.34vw, 1.18rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
  max-width: none !important;
}

@media (min-width: 960px) {
  .tp-showcase-headline {
    white-space: nowrap !important;
  }
}

/* --- 8D. Solari Airport Mechanical Split-Flap Plates (The Single Bold Dark Focal Point) --- */
.tp-flap-board {
  direction: ltr !important;
  display: inline-flex !important;
  align-items: flex-start !important;
  align-self: flex-start !important;
  gap: 0.5rem !important;
  flex-shrink: 0 !important;
}

.tp-flap-col {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.34rem !important;
}

.tp-flap-card {
  position: relative !important;
  width: 56px !important;
  height: 54px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #102a63 0%, #0b1e48 49%, #081739 51%, #133172 100%) !important;
  border: 1px solid rgba(15, 44, 107, 0.35) !important;
  box-shadow:
    0 8px 20px rgba(11, 29, 69, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  perspective: 420px !important;
  overflow: hidden !important;
  font-family: 'Google Sans', 'Plus Jakarta Sans', sans-serif !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 1.76rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  user-select: none !important;
}

.tp-flap-half,
.tp-flap-leaf {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 50% !important;
  overflow: hidden !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

.tp-flap-half--top,
.tp-flap-leaf--top {
  top: 0 !important;
  background: linear-gradient(180deg, #15367a 0%, #0d2354 100%) !important;
  transform-origin: 50% 100% !important;
}

.tp-flap-half--bottom,
.tp-flap-leaf--bottom {
  bottom: 0 !important;
  background: linear-gradient(180deg, #0a1c44 0%, #143375 100%) !important;
  transform-origin: 50% 0% !important;
}

.tp-flap-glyph {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 200% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32) !important;
}

.tp-flap-half--top .tp-flap-glyph,
.tp-flap-leaf--top .tp-flap-glyph {
  top: 0 !important;
}

.tp-flap-half--bottom .tp-flap-glyph,
.tp-flap-leaf--bottom .tp-flap-glyph {
  top: -100% !important;
}

.tp-flap-leaf {
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.tp-flap-card.is-flipping .tp-flap-leaf {
  opacity: 1 !important;
}

.tp-flap-card.is-flipping .tp-flap-leaf--top {
  animation: tpFlapFoldTop 0.23s ease-in forwards !important;
}

.tp-flap-card.is-flipping .tp-flap-leaf--bottom {
  transform: rotateX(90deg);
  animation: tpFlapUnfoldBottom 0.23s 0.22s ease-out forwards !important;
}

@keyframes tpFlapFoldTop {
  0% { transform: rotateX(0deg); filter: brightness(1); }
  100% { transform: rotateX(-90deg); filter: brightness(0.65); }
}

@keyframes tpFlapUnfoldBottom {
  0% { transform: rotateX(90deg); filter: brightness(1.18); }
  100% { transform: rotateX(0deg); filter: brightness(1); }
}

.tp-flap-seam {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: 1.5px !important;
  margin-top: -0.75px !important;
  background: rgba(4, 11, 28, 0.72) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

.tp-flap-hinge {
  position: absolute !important;
  top: 50% !important;
  width: 3px !important;
  height: 8px !important;
  margin-top: -4px !important;
  border-radius: 1.5px !important;
  background: linear-gradient(180deg, #dbeafe 0%, #64748b 100%) !important;
  z-index: 4 !important;
  pointer-events: none !important;
}

.tp-flap-hinge--l { left: 2px !important; }
.tp-flap-hinge--r { right: 2px !important; }

.tp-flap-label {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  color: rgba(15, 36, 74, 0.58) !important;
}

body.fa .tp-flap-label {
  font-family: 'Shabnam', sans-serif !important;
  letter-spacing: 0 !important;
  font-size: 0.64rem !important;
}

/* --- 8E. Site-Wide Bottom-Left Floating Capsule (.tp-offer-float) ---
   Preserves approved bottom-left position, compact capsule size, and 999px pill frame.
   Aligns left copy, 4 dark Solari plates, Offers button, and Close button along one
   exact optical horizontal axis so nothing droops or steps vertically. */
.tp-offer-float {
  position: fixed !important;
  left: clamp(1rem, 2.2vw, 2rem) !important;
  right: auto !important;
  bottom: clamp(1rem, 2.2vw, 2rem) !important;
  z-index: 940 !important;
  max-width: calc(100vw - 32px) !important;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease !important;
}

body.fa .tp-offer-float {
  left: auto !important;
  right: clamp(1rem, 2.2vw, 2rem) !important;
}

.tp-offer-float.is-docked:not(.is-minimized) {
  opacity: 0.94 !important;
}

.tp-offer-float-card {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  min-height: 68px !important;
  padding: 13px 13px 15px 20px !important;
  border-radius: 999px !important;
  background: rgba(251, 250, 246, 0.96) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  border: 1px solid rgba(15, 44, 107, 0.14) !important;
  box-shadow:
    0 14px 36px rgba(15, 44, 107, 0.13),
    0 2px 6px rgba(15, 44, 107, 0.05) !important;
  direction: ltr !important;
}

body.fa .tp-offer-float-card {
  direction: rtl !important;
  padding: 13px 20px 15px 13px !important;
}

.tp-offer-float-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  text-decoration: none !important;
  color: inherit !important;
}

body.fa .tp-offer-float-link {
  direction: rtl !important;
}

/* Left cluster inside floating capsule: 40px tall, vertically centered with 40px tiles & 40px CTA */
.tp-offer-float-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 0.24rem !important;
  min-height: 40px !important;
}

body.fa .tp-offer-float-meta {
  direction: rtl !important;
  align-items: flex-start !important;
}

.tp-offer-float-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.15rem 0.52rem !important;
  border-radius: 999px !important;
  background: var(--tp-offer-red-bg) !important;
  border: 1px solid var(--tp-offer-red-border) !important;
  color: var(--tp-offer-red) !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.64rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body.fa .tp-offer-float-badge {
  font-family: 'Shabnam', sans-serif !important;
  letter-spacing: 0 !important;
  font-size: 0.66rem !important;
}

.tp-offer-float-dates {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  color: rgba(15, 36, 74, 0.68) !important;
  white-space: nowrap !important;
}

body.fa .tp-offer-float-dates {
  font-family: 'Shabnam', sans-serif !important;
  font-weight: 400 !important;
}

.tp-offer-float-sep {
  opacity: 0.48 !important;
  font-size: 0.8em !important;
}

/* Center cluster inside floating capsule: 40px-tall dark Solari plates on exact capsule centerline;
   tiny unit labels sit in the 15px bottom gutter via absolute positioning so they never push tiles up */
.tp-flap-board--float {
  gap: 0.32rem !important;
  height: 40px !important;
  align-items: center !important;
}

.tp-flap-board--float .tp-flap-col {
  gap: 0 !important;
  height: 40px !important;
  justify-content: center !important;
}

.tp-flap-board--float .tp-flap-card {
  width: 37px !important;
  height: 40px !important;
  border-radius: 9px !important;
  font-size: 1.06rem !important;
  box-shadow:
    0 5px 12px rgba(11, 29, 69, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.tp-flap-board--float .tp-flap-hinge {
  width: 2px !important;
  height: 6px !important;
  margin-top: -3px !important;
}

.tp-flap-board--float .tp-flap-label {
  position: absolute !important;
  top: calc(100% + 2px) !important;
  left: -4px !important;
  right: -4px !important;
  text-align: center !important;
  font-size: 0.5rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: rgba(15, 36, 74, 0.52) !important;
  pointer-events: none !important;
}

body.fa .tp-flap-board--float .tp-flap-label {
  font-size: 0.48rem !important;
  letter-spacing: 0 !important;
}

/* Right cluster inside floating capsule: 40px soft light-blue tinted button + concentric 40px close button */
.tp-offer-float-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.34rem !important;
  height: 40px !important;
  padding: 0 0.98rem !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #e7f5fc 0%, #d3ecf8 100%) !important;
  border: 1px solid rgba(20, 131, 158, 0.36) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 2px 6px rgba(15, 44, 107, 0.06) !important;
  color: #0c2b66 !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body.fa .tp-offer-float-cta {
  font-family: 'Shabnam', sans-serif !important;
  direction: rtl !important;
}

.tp-offer-float-link:hover .tp-offer-float-cta,
.tp-offer-float-link:focus-visible .tp-offer-float-cta {
  background: var(--tp-pro-navy, #0f2c6b) !important;
  border-color: var(--tp-pro-navy, #0f2c6b) !important;
  box-shadow: 0 4px 12px rgba(15, 44, 107, 0.2) !important;
  color: #ffffff !important;
}

.tp-offer-float-close {
  display: inline-grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(15, 44, 107, 0.05) !important;
  border: 1px solid rgba(15, 44, 107, 0.14) !important;
  color: var(--tp-pro-navy, #0f2c6b) !important;
  font-size: 1.08rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

.tp-offer-float-close:hover,
.tp-offer-float-close:focus-visible {
  background: rgba(15, 44, 107, 0.11) !important;
  border-color: rgba(15, 44, 107, 0.28) !important;
}

/* Minimized floating pill state */
.tp-offer-float-pill {
  display: none !important;
  align-items: center !important;
  gap: 0.55rem !important;
  height: 44px !important;
  padding: 0 1rem 0 0.55rem !important;
  border-radius: 999px !important;
  background: rgba(251, 250, 246, 0.96) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(15, 44, 107, 0.16) !important;
  box-shadow: 0 10px 26px rgba(15, 44, 107, 0.12) !important;
  color: var(--tp-pro-navy, #0f2c6b) !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}

body.fa .tp-offer-float-pill {
  font-family: 'Shabnam', sans-serif !important;
  direction: rtl !important;
  padding: 0 0.55rem 0 1rem !important;
}

.tp-offer-float.is-minimized .tp-offer-float-card {
  display: none !important;
}

.tp-offer-float.is-minimized .tp-offer-float-pill {
  display: inline-flex !important;
}

/* --- 8F. Responsive Refinements & Reduced Motion --- */
@media (max-width: 900px) {
  .tp-offer-showcase {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 1.2rem 1.2rem !important;
    gap: 1rem !important;
  }

  body.fa .tp-offer-showcase {
    text-align: center !important;
  }

  .tp-showcase-copy {
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .tp-showcase-badges {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    width: 100% !important;
  }

  .tp-showcase-kicker {
    justify-content: center !important;
    text-align: center !important;
  }

  .tp-showcase-headline {
    text-align: center !important;
    margin-inline: auto !important;
  }

  .tp-offer-showcase .tp-flap-board {
    align-self: center !important;
    justify-content: center !important;
    margin-inline: auto !important;
  }

  .promo-card .promo-price {
    align-items: flex-start !important;
  }

  .promo-card .promo-price .tp-micro-offer-line {
    justify-content: flex-start !important;
  }
}

@media (max-width: 640px) {
  .tp-flap-card {
    width: 50px !important;
    height: 52px !important;
    font-size: 1.55rem !important;
  }

  .tp-offer-float {
    left: 12px !important;
    right: auto !important;
    bottom: 14px !important;
    max-width: calc(100vw - 92px) !important;
  }

  body.fa .tp-offer-float {
    left: auto !important;
    right: 12px !important;
  }

  .tp-offer-float-card {
    min-height: 56px !important;
    padding: 9px 9px 9px 14px !important;
    gap: 0.4rem !important;
  }

  body.fa .tp-offer-float-card {
    padding: 9px 14px 9px 9px !important;
  }

  .tp-offer-float-link {
    gap: 0.55rem !important;
  }

  .tp-offer-float-dates {
    display: none !important;
  }

  .tp-offer-float-meta {
    min-height: 34px !important;
  }

  .tp-flap-board--float,
  .tp-flap-board--float .tp-flap-col {
    height: 34px !important;
    gap: 0.22rem !important;
  }

  .tp-flap-board--float .tp-flap-card {
    width: 30px !important;
    height: 34px !important;
    font-size: 0.9rem !important;
    border-radius: 7px !important;
  }

  .tp-flap-board--float .tp-flap-label {
    display: none !important;
  }

  .tp-offer-float-cta {
    display: none !important;
  }

  .tp-offer-float-close {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.98rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tp-flap-card.is-flipping .tp-flap-leaf--top,
  .tp-flap-card.is-flipping .tp-flap-leaf--bottom {
    animation: none !important;
  }
}

@media print {
  .tp-offer-float {
    display: none !important;
  }
}

/* --- 8G. Dark 4-Column Video Summary Strip (.tp-tier-strip): Large Display Prices Flush Bottom-Aligned --- */
.tp-tier-strip .tp-tier {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: end !important;
  align-content: center !important;
  gap: 0.42rem 0.95rem !important;
}

.tp-tier-strip .tp-tier-name {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: start !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

.tp-tier-strip .tp-tier-meta {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: end !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.tp-tier-strip .tp-tier-price {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  align-self: end !important;
  font-family: 'Google Sans', sans-serif !important;
  font-size: clamp(1.92rem, 2.45vw, 2.32rem) !important;
  font-weight: 800 !important;
  line-height: 0.72 !important;
  letter-spacing: -0.03em !important;
  font-variant-numeric: tabular-nums !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  margin: 0 !important;
}

body.fa .tp-tier-strip .tp-tier-price {
  font-family: 'Shabnam', sans-serif !important;
  line-height: 0.78 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 640px) {
  .tp-tier-strip .tp-tier {
    gap: 0.34rem 0.65rem !important;
  }

  .tp-tier-strip .tp-tier-price {
    font-size: clamp(1.48rem, 5.4vw, 1.74rem) !important;
  }
}

/* --- 8H. Persian Mathematical Slash Order (Price / Unit) & BiDi Isolation --- */
body.fa .lang-fa[dir="ltr"] {
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

body.fa .lang-fa[dir="rtl"] {
  direction: rtl !important;
  unicode-bidi: isolate !important;
}

body.fa .unit,
body.fa .unit .lang-fa {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  font-style: normal !important;
}

body.fa .unit .lang-fa {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0.24em !important;
}

body.fa .pl-price,
body.fa .pl-price .cur,
body.fa .pl-price .cur .lang-fa {
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

body.fa :is(.cross .x-price, .tp-ads-hero-meta):has(.lang-fa[dir="rtl"]) {
  direction: rtl !important;
}



/* ==========================================================================
   14. V179 STREAMLINED 2-BUTTON INVOICE & LIVE CALENDAR UPGRADE
   ========================================================================== */
.tp-inv-actions {
  display: flex;
  flex-direction: column;
  gap: 0.68rem;
  margin-top: 1.15rem;
}

.tp-inv-btn-consult,
.tp-inv-btn-pay {
  width: 100%;
  min-height: 52px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.05rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.25;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease;
}

.tp-inv-btn-consult {
  border: 1.5px solid #d19a35;
  background: linear-gradient(135deg, #fdf2d6 0%, #f4dfab 100%);
  color: #563d08;
  box-shadow: 0 10px 24px rgba(209, 154, 53, 0.26);
}

.tp-inv-btn-consult:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 14px 28px rgba(209, 154, 53, 0.36);
}

.tp-inv-btn-pay {
  border: 1.5px solid rgba(125, 211, 230, 0.85);
  background: #ffffff;
  color: #081e4b;
  box-shadow: 0 10px 24px rgba(4, 15, 39, 0.28);
}

.tp-inv-btn-pay:hover {
  background: #ebf9fd;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(43, 184, 212, 0.28);
}

.tp-inv-btn-pay:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.tp-inv-after-note {
  margin: 0.85rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.74rem;
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.8);
}

.tp-inv-after-note strong {
  color: #f4dfab;
  font-weight: 800;
}

/* Dedicated Full-Width Live Calendar & Online Booking Section (#booking-calendar) */
.tp-booking-hub {
  margin-top: clamp(2rem, 4vw, 2.85rem);
  padding: clamp(1.45rem, 3.2vw, 2.35rem);
  border-radius: 26px;
  background: linear-gradient(180deg, #ffffff 0%, #fdfaf1 100%);
  border: 2px solid rgba(209, 154, 53, 0.36);
  box-shadow: 0 24px 64px rgba(15, 44, 107, 0.08);
  scroll-margin-top: 84px;
  color: var(--tp-pro-navy);
}

.tp-booking-standalone-wrap {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background: var(--tp-pro-bg);
  border-top: 1px solid var(--tp-pro-line);
}

.tp-cal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.75rem;
  margin-bottom: 1.2rem;
}

.tp-cal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: #fdf2d6;
  border: 1px solid rgba(209, 154, 53, 0.5);
  color: #7a5910;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

body.fa .tp-cal-kicker {
  letter-spacing: 0;
  text-transform: none;
}

.tp-cal-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d19a35;
  box-shadow: 0 0 0 4px rgba(209, 154, 53, 0.22);
}

.tp-cal-title {
  margin: 0;
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.025em;
  color: var(--tp-pro-navy);
}

body.fa .tp-cal-title {
  font-family: 'Shabnam', sans-serif;
  letter-spacing: 0;
  line-height: 1.38;
}

.tp-cal-title em {
  color: #b07a1c;
  font-style: italic;
}

.tp-booking-hub--pay .tp-cal-title em {
  color: #0b57d0;
}

body.fa .tp-cal-title em {
  font-style: normal;
}

.tp-cal-tz-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: #f7f5f0;
  border: 1px solid #c9c2b4;
  color: #56524a;
  font-size: 0.76rem;
  font-weight: 700;
}

.tp-cal-reassure-banner {
  margin-bottom: 1.35rem;
  padding: 1rem 1.2rem;
  border-radius: 18px;
  background: linear-gradient(135deg, #fdf6e2 0%, #f7f5f0 100%);
  border: 1.5px solid rgba(209, 154, 53, 0.45);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
}

.tp-cal-reassure-text {
  flex: 1 1 420px;
  font-size: 0.88rem;
  line-height: 1.65;
  color: #0c315e;
}

.tp-cal-reassure-text strong {
  color: #7a5910;
  font-weight: 800;
}

.tp-cal-reassure-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tp-cal-reassure-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.48rem 0.9rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(15, 44, 107, 0.16);
  color: #0f2c6b;
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.tp-cal-reassure-chip:hover {
  border-color: #d19a35;
  transform: translateY(-1px);
}

/* Mode Selector Cards — Consultation Card (#1 Boldest & Largest) + Paid Session Card */
.tp-cal-modes {
  display: grid;
  grid-template-columns: 1.22fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.tp-cal-modes.is-single-mode {
  grid-template-columns: 1fr;
}

.tp-cal-mode-btn {
  appearance: none;
  text-align: inherit;
  padding: 1.15rem 1.25rem;
  border-radius: 20px;
  border: 2px solid rgba(15, 44, 107, 0.14);
  background: #ffffff;
  color: var(--tp-pro-navy);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.42rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.tp-cal-mode-btn:hover {
  border-color: var(--tp-pro-cyan);
  transform: translateY(-2px);
}

.tp-cal-mode-btn.is-consult-card {
  background: linear-gradient(160deg, #fdf2d6 0%, #f4dfab 100%);
  border-color: #d19a35;
  color: #0f2c6b;
  box-shadow: 0 16px 38px rgba(209, 154, 53, 0.16);
}

.tp-cal-mode-btn.is-consult-card.is-active {
  border-width: 2.5px;
  border-color: #b07a1c;
  box-shadow: 0 18px 44px rgba(209, 154, 53, 0.22), 0 0 0 4px rgba(209, 154, 53, 0.14);
}

.tp-cal-mode-btn.is-pay-card.is-active {
  background: #f0f9fc;
  border-width: 2.5px;
  border-color: #0f2c6b;
  box-shadow: 0 14px 34px rgba(15, 44, 107, 0.14), 0 0 0 4px rgba(43, 184, 212, 0.16);
}

.tp-cal-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.24rem 0.68rem;
  border-radius: 999px;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.fa .tp-cal-mode-pill {
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.7rem;
}

.tp-cal-mode-btn.is-consult-card .tp-cal-mode-pill {
  background: #0f2c6b;
  color: #fdf2d6;
}

.tp-cal-mode-btn.is-pay-card .tp-cal-mode-pill {
  background: #e6f4f9;
  color: #0f4c6b;
}

.tp-cal-mode-name {
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.3;
}

.tp-cal-mode-btn.is-consult-card .tp-cal-mode-name {
  font-size: 1.16rem;
  color: #0f2c6b;
}

.tp-cal-mode-desc {
  font-size: 0.8rem;
  line-height: 1.5;
  opacity: 0.88;
}

.tp-cal-mode-price {
  margin-top: 0.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
}

.tp-cal-mode-btn.is-consult-card .tp-cal-mode-price {
  background: #f1dca1;
  color: #7a5910;
}

.tp-cal-mode-btn.is-pay-card .tp-cal-mode-price {
  background: #0f2c6b;
  color: #ffffff;
}

/* Calendar + Client Form Grid */
.tp-cal-grid {
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  gap: 1.35rem;
  align-items: start;
}

.tp-cal-picker-panel,
.tp-cal-form-panel {
  padding: 1.25rem;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(15, 44, 107, 0.12);
  box-shadow: 0 8px 24px rgba(15, 44, 107, 0.04);
}

.tp-cal-step-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--tp-pro-navy);
  margin: 0 0 0.7rem;
}

.tp-cal-step-sub {
  font-size: 0.72rem;
  font-weight: 600;
  color: #5b6b88;
}

.tp-cal-dates {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.42rem;
  margin-bottom: 1.15rem;
}

.tp-cal-date-btn {
  appearance: none;
  padding: 0.52rem 0.3rem;
  border-radius: 12px;
  border: 1.5px solid rgba(15, 44, 107, 0.13);
  background: #fbfaf7;
  color: #1d3566;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  transition: all 0.18s ease;
}

.tp-cal-date-btn:hover {
  border-color: var(--tp-pro-cyan);
  background: #f0fafe;
}

.tp-cal-date-btn.is-selected {
  background: var(--tp-pro-navy);
  border-color: var(--tp-pro-navy);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(15, 44, 107, 0.22);
}

.tp-cal-date-dow {
  font-size: 0.64rem;
  font-weight: 700;
  opacity: 0.78;
  text-transform: uppercase;
}

body.fa .tp-cal-date-dow {
  text-transform: none;
}

.tp-cal-date-day {
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.15;
}

.tp-cal-date-mon {
  font-size: 0.62rem;
  opacity: 0.78;
}

.tp-cal-slots-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.48rem;
}

.tp-cal-slot-btn {
  appearance: none;
  min-height: 44px;
  padding: 0.52rem 0.45rem;
  border-radius: 12px;
  border: 1.5px solid rgba(15, 44, 107, 0.15);
  background: #ffffff;
  color: #0f2c6b;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  transition: all 0.18s ease;
  direction: ltr;
  unicode-bidi: isolate;
}

body.fa .tp-cal-slot-btn {
  direction: rtl;
}

.tp-cal-slot-btn:hover:not(:disabled) {
  border-color: #d19a35;
  background: #fdf6e2;
}

.tp-booking-hub--pay .tp-cal-slot-btn:hover:not(:disabled) {
  border-color: #5fb7cc;
  background: #edfafc;
}

.tp-cal-slot-btn.is-selected {
  background: linear-gradient(135deg, #0f2c6b 0%, #153c8d 100%);
  border-color: #d19a35;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 44, 107, 0.22);
}

.tp-booking-hub--pay .tp-cal-slot-btn.is-selected {
  border-color: #2bb8d4;
}

.tp-cal-slot-btn:disabled {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #9ca3af;
  text-decoration: line-through;
  cursor: not-allowed;
  opacity: 0.68;
}

.tp-cal-slot-tag {
  font-size: 0.6rem;
  font-weight: 700;
  color: #b07a1c;
}

.tp-booking-hub--pay .tp-cal-slot-tag {
  color: #15809b;
}

.tp-cal-slot-btn.is-selected .tp-cal-slot-tag {
  color: #f4dfab;
}

.tp-booking-hub--pay .tp-cal-slot-btn.is-selected .tp-cal-slot-tag {
  color: #c6e8f0;
}

.tp-cal-slot-btn:disabled .tp-cal-slot-tag {
  color: #9ca3af;
  text-decoration: none;
}

.tp-cal-status-bar {
  margin-top: 0.85rem;
  padding: 0.6rem 0.85rem;
  border-radius: 12px;
  background: #f6f8fb;
  font-size: 0.73rem;
  color: #495a7a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Client Booking Form Inside #booking-calendar */
.tp-cal-selected-pill {
  padding: 0.78rem 0.95rem;
  border-radius: 14px;
  background: #fdf6e2;
  border: 1.5px solid rgba(209, 154, 53, 0.48);
  margin-bottom: 0.85rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #563e0b;
}

.tp-cal-selected-pill strong {
  display: block;
  font-size: 0.84rem;
  color: #0f2c6b;
}

.tp-booking-hub--pay .tp-cal-selected-pill {
  background: #edfafc;
  border-color: #5fb7cc;
  color: #0d5970;
}

.tp-cal-attached-order {
  padding: 0.68rem 0.9rem;
  border-radius: 12px;
  background: #f3f7fc;
  border: 1px solid rgba(15, 44, 107, 0.12);
  margin-bottom: 0.9rem;
  font-size: 0.76rem;
  line-height: 1.45;
  color: #1c3564;
}

.tp-cal-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

.tp-cal-field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.tp-cal-field.is-wide {
  grid-column: 1 / -1;
}

.tp-cal-field[hidden] {
  display: none !important;
}

.tp-cal-field label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #2c3e66;
}

.tp-cal-input,
.tp-cal-textarea {
  width: 100%;
  padding: 0.68rem 0.82rem;
  border-radius: 11px;
  border: 1.5px solid rgba(15, 44, 107, 0.16);
  background: #ffffff;
  color: #0f2c6b;
  font-family: inherit;
  font-size: 0.84rem;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.tp-cal-input:focus,
.tp-cal-textarea:focus {
  border-color: #2bb8d4;
  box-shadow: 0 0 0 3px rgba(43, 184, 212, 0.14);
}

.tp-cal-ltr {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: isolate !important;
}

.tp-cal-textarea {
  min-height: 70px;
  resize: vertical;
}

.tp-cal-submit-btn {
  margin-top: 0.9rem;
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1.2rem;
  border: 1.5px solid rgba(209, 154, 53, 0.55);
  border-radius: 999px;
  background: linear-gradient(135deg, #0f2c6b 0%, #153c8d 100%);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(15, 44, 107, 0.25);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.tp-cal-submit-btn.is-pay-submit {
  border-color: rgba(43, 184, 212, 0.55);
  background: linear-gradient(135deg, #0f2c6b 0%, #16528e 100%);
  box-shadow: 0 12px 28px rgba(15, 44, 107, 0.28);
}

.tp-cal-submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.tp-cal-submit-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.tp-cal-feedback {
  margin-top: 0.75rem;
  padding: 0.8rem 0.95rem;
  border-radius: 12px;
  font-size: 0.8rem;
  line-height: 1.55;
}

.tp-cal-feedback[hidden] {
  display: none !important;
}

.tp-cal-feedback.is-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.tp-cal-confirm-card {
  margin-top: 0.85rem;
  padding: 1.15rem;
  border-radius: 18px;
  background: linear-gradient(145deg, #fdf6e2 0%, #fbfaf7 100%);
  border: 2px solid #d19a35;
  color: #4a3508;
}

.tp-cal-confirm-card[hidden] {
  display: none !important;
}

.tp-cal-confirm-card h4 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f2c6b;
}

.tp-cal-confirm-meta {
  margin: 0 0 0.85rem;
  font-size: 0.82rem;
  line-height: 1.6;
}

.tp-cal-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}

.tp-cal-confirm-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.52rem 0.95rem;
  border-radius: 999px;
  background: #0f2c6b;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
}

.tp-cal-confirm-link.is-outline {
  background: #ffffff;
  color: #7a5910;
  border: 1.5px solid #d19a35;
}

.tp-cal-confirm-contact {
  font-size: 0.75rem;
  color: #7a5910;
  border-top: 1px solid rgba(209, 154, 53, 0.3);
  padding-top: 0.65rem;
}

@media (max-width: 980px) {
  .tp-cal-modes,
  .tp-cal-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .tp-cal-dates {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .tp-cal-slots-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tp-cal-fields {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   v180 — STRICT SEPARATION OF SERVICE BOOKING VS. FREE 30-MIN CONSULTATION
   ========================================================================== */
.tp-estimator-rail {
  position: sticky;
  top: 78px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.tp-estimator-rail .tp-estimator-summary {
  position: static;
}

.tp-estimator-consult-box {
  background: linear-gradient(160deg, #fffdf7 0%, #fdf2d6 100%);
  border: 1.5px solid #d19a35;
  border-radius: 20px;
  padding: 1.15rem 1.35rem;
  box-shadow: 0 12px 28px rgba(10, 31, 77, 0.06);
  color: #0f2c6b;
}

.tp-est-consult-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a5910;
  margin-bottom: 0.35rem;
}

body.fa .tp-est-consult-kicker {
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.74rem;
}

.tp-est-consult-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d19a35;
  box-shadow: 0 0 0 3px rgba(209, 154, 53, 0.22);
}

.tp-est-consult-title {
  margin: 0 0 0.38rem;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.28;
  color: #0f2c6b;
}

body.fa .tp-est-consult-title {
  font-family: "Shabnam", sans-serif;
  line-height: 1.42;
}

.tp-est-consult-desc {
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #546482;
}

.tp-est-consult-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1.5px solid #d19a35;
  background: #ffffff;
  color: #0f2c6b;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

body.fa .tp-est-consult-link {
  font-family: "Shabnam", sans-serif;
}

.tp-est-consult-link:hover {
  background: #f4dfab;
  border-color: #2bb8d4;
  transform: translateY(-1px);
}

.tp-est-consult-link:focus-visible,
.tp-cal-topic-chip:focus-visible,
.tp-consult-sep-btn:focus-visible {
  outline: 3px solid #2bb8d4;
  outline-offset: 2px;
}

/* Service Interest Badges inside Free Consultation Form */
.tp-cal-topics-field {
  margin-bottom: 0.25rem;
}

.tp-cal-topics-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.tp-cal-topic-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 36px;
  padding: 0.38rem 0.78rem;
  border-radius: 999px;
  border: 1.5px solid rgba(15, 44, 107, 0.16);
  background: #f8fafd;
  color: #26395f;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.tp-cal-topic-chip:hover {
  border-color: #2bb8d4;
  background: #edf8fb;
  color: #0f2c6b;
}

.tp-cal-topic-chip.is-selected {
  background: #0f2c6b;
  border-color: #0f2c6b;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 44, 107, 0.18);
}

/* Separate Service Calculator & Direct Booking Box below Consultation Calendar */
.tp-consult-separate-book-box {
  margin-top: 1.65rem;
  padding: clamp(1.25rem, 2.5vw, 1.7rem) clamp(1.35rem, 3vw, 2rem);
  border-radius: 22px;
  border: 1.5px dashed rgba(15, 44, 107, 0.22);
  background: linear-gradient(135deg, #ffffff 0%, #f4f7fb 100%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.tp-consult-sep-copy {
  max-width: 680px;
}

.tp-consult-sep-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #117a94;
  margin-bottom: 0.3rem;
}

body.fa .tp-consult-sep-kicker {
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.76rem;
}

.tp-consult-sep-title {
  margin: 0 0 0.35rem;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: #0f2c6b;
}

body.fa .tp-consult-sep-title {
  font-family: "Shabnam", sans-serif;
}

.tp-consult-sep-desc {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #556480;
}

.tp-consult-sep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.65rem 1.35rem;
  border-radius: 999px;
  border: 1.5px solid #0f2c6b;
  background: #ffffff;
  color: #0f2c6b;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

body.fa .tp-consult-sep-btn {
  font-family: "Shabnam", sans-serif;
}

.tp-consult-sep-btn:hover {
  background: #0f2c6b;
  color: #ffffff;
  transform: translateY(-1px);
}

/* Calculator inline current-price + red crossed-out regular price (same font & scale, zero badge clutter) */
s.tp-est-was {
  position: relative;
  display: inline-block;
  text-decoration: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  line-height: 1;
  color: var(--tp-offer-red, #dc2626);
  margin: 0 0.24rem;
  padding: 0 0.06rem;
  white-space: nowrap;
}

s.tp-est-was::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 52%;
  height: 1.6px;
  background: var(--tp-offer-red, #dc2626);
  border-radius: 2px;
  transform: translateY(-50%) rotate(-8deg);
  pointer-events: none;
}

@media (max-width: 960px) {
  .tp-estimator-rail {
    position: static;
  }
}

@media (max-width: 640px) {
  .tp-consult-separate-book-box {
    flex-direction: column;
    align-items: stretch;
  }
  .tp-consult-sep-btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    text-align: center;
  }
}

/* ==========================================================================
   v181 — STRICT SECTION SEPARATION (CALCULATOR vs. FREE 30-MIN CONSULTATION)
   & SERVICE DROPDOWN + EMAIL-OR-MOBILE CONSULTATION FORM
   ========================================================================== */

@media (min-width: 1121px) {
  .service-hero {
    padding-top: clamp(6.8rem, 8.8vw, 7.8rem);
  }
}

.tp-consult-standalone-section {
  position: relative;
  overflow: hidden;
}

.tp-consult-standalone-section.is-band-section {
  padding: clamp(4.2rem, 7vw, 6rem) 0;
  background:
    radial-gradient(circle at 86% 14%, rgba(43, 184, 212, 0.22) 0%, transparent 46%),
    radial-gradient(circle at 12% 88%, rgba(125, 211, 230, 0.14) 0%, transparent 48%),
    linear-gradient(155deg, #08193d 0%, #0f2c6b 56%, #0d3c61 100%);
  border-top: 1px solid rgba(125, 211, 230, 0.22);
  border-bottom: 1px solid rgba(125, 211, 230, 0.18);
}

.tp-consult-standalone-section.is-dedicated-page {
  padding: clamp(2.6rem, 5vw, 4.2rem) 0 clamp(3.8rem, 6vw, 5.2rem);
  background: #eaf1f8;
  border-top: 1px solid rgba(15, 44, 107, 0.1);
  border-bottom: 1px solid rgba(15, 44, 107, 0.1);
}

.tp-consult-band-intro {
  max-width: 760px;
  margin: 0 0 clamp(1.8rem, 3vw, 2.5rem);
}

.tp-consult-band-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.75rem;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7dd3e6;
}

.tp-consult-band-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: #2bb8d4;
}

body.fa .tp-consult-band-eyebrow {
  font-family: "Shabnam", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.84rem;
}

.tp-consult-band-heading {
  margin: 0 0 0.75rem;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-wrap: balance;
}

.tp-consult-band-heading em {
  font-style: normal;
  color: #7dd3e6;
}

body.fa .tp-consult-band-heading {
  font-family: "Shabnam", sans-serif;
  letter-spacing: 0;
  line-height: 1.38;
}

.tp-consult-band-sub {
  margin: 0;
  max-width: 64ch;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(241, 247, 255, 0.84);
}

.tp-consult-standalone-section .tp-booking-hub,
.tp-paid-checkout-section .tp-booking-hub {
  margin-top: 0 !important;
}

.tp-paid-checkout-section {
  padding: clamp(3.6rem, 6vw, 5.2rem) 0;
  background: linear-gradient(180deg, #e7eff8 0%, #eff5fb 100%);
  border-top: 1px solid rgba(15, 44, 107, 0.14);
  border-bottom: 1px solid rgba(15, 44, 107, 0.1);
}

.tp-cal-select-wrap {
  position: relative;
  width: 100%;
}

.tp-cal-select-wrap::after {
  content: "▾";
  position: absolute;
  top: 50%;
  right: 0.95rem;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: #0f2c6b;
  pointer-events: none;
}

body.fa .tp-cal-select-wrap::after {
  right: auto;
  left: 0.95rem;
}

.tp-cal-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 46px;
  padding: 0.65rem 2.35rem 0.65rem 0.9rem;
  border-radius: 12px;
  border: 1.5px solid rgba(15, 44, 107, 0.18);
  background: #ffffff;
  color: #0f2c6b;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

body.fa .tp-cal-select {
  padding: 0.65rem 0.9rem 0.65rem 2.35rem;
  font-family: "Shabnam", sans-serif;
}

.tp-cal-select:hover {
  border-color: #2bb8d4;
}

.tp-cal-select:focus-visible {
  outline: none;
  border-color: #0f2c6b;
  box-shadow: 0 0 0 3px rgba(43, 184, 212, 0.25);
}

.tp-cal-contact-either-head {
  grid-column: 1 / -1;
  margin-top: 0.15rem;
  padding: 0.5rem 0.78rem;
  border-radius: 10px;
  background: #eef6fb;
  border: 1px solid rgba(43, 184, 212, 0.28);
  color: #0f2c6b;
  font-size: 0.79rem;
  font-weight: 600;
  line-height: 1.45;
}

body.fa .tp-cal-contact-either-head {
  font-family: "Shabnam", sans-serif;
  font-size: 0.81rem;
}

/* ==========================================================================
   v182 — WEB-FIRST HOMEPAGE ORDER, $1,999 CUSTOM WEB APPS TIER,
   COMPACT CATEGORIZED PORTFOLIO & CONSULTATION-FIRST CTAs
   ========================================================================== */

/* 1. Clean section separation when #webdesign precedes #pricing on Home */
#webdesign + #pricing {
  background: linear-gradient(180deg, #f8f6ef 0%, #fffefa 100%) !important;
  border-top: 1px solid rgba(15, 44, 107, 0.09);
}

/* 2. Balanced 3-box Web Design & Custom Web Apps panel on Homepage */
#webdesign .wd-priceboxes {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

#webdesign .wd-pricebox {
  padding: 1.15rem 1.35rem;
}

#webdesign .wd-pricebox--webapp {
  background: linear-gradient(140deg, #0b2154 0%, #13387d 60%, #0f4668 100%) !important;
  border: 1.5px solid rgba(43, 184, 212, 0.5) !important;
  border-radius: 16px;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(11, 33, 84, 0.14);
}

#webdesign .wd-webapp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
  padding: 0.22rem 0.62rem;
  border-radius: 999px;
  background: rgba(43, 184, 212, 0.18);
  border: 1px solid rgba(125, 211, 230, 0.36);
  color: #8ce2f2;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

body.fa #webdesign .wd-webapp-kicker {
  font-family: "Shabnam", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.74rem;
}

#webdesign .wd-pricebox--webapp .claim-price .from {
  color: rgba(226, 241, 255, 0.86) !important;
}

#webdesign .wd-pricebox--webapp .claim-price .big,
#webdesign .wd-pricebox--webapp .claim-price .cur {
  color: #ffffff !important;
}

#webdesign .wd-pricebox--webapp .claim-price sup {
  color: #7dd3e6 !important;
}

#webdesign .wd-pricebox--webapp .claim-label {
  color: rgba(241, 247, 255, 0.92) !important;
  margin-top: 0.35rem;
  font-size: 0.9rem;
  line-height: 1.55;
}

#webdesign .wd-pricebox--webapp .wd-box-condition {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(125, 211, 230, 0.24) !important;
  color: rgba(220, 238, 255, 0.88) !important;
  font-size: 0.78rem;
  line-height: 1.55;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.8rem;
}

#webdesign .wd-webapp-explore {
  color: #7dd3e6 !important;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

#webdesign .wd-webapp-explore:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

#webdesign .webdesign-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.05rem;
}

#webdesign .webdesign-features {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.15rem;
}

/* 3. Third Custom Web Apps card on /web-design */
.pcard.t-webapp {
  background: linear-gradient(155deg, #0b2154 0%, #13387d 58%, #0f4668 100%) !important;
  border-color: #2bb8d4 !important;
  color: #ffffff !important;
}

.pcard.t-webapp .pc-name {
  color: #8ce2f2 !important;
  font-weight: 700;
}

.pcard.t-webapp .pc-price {
  color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.35rem !important;
}

body.fa .pcard.t-webapp .pc-price {
  direction: rtl !important;
  align-items: flex-start !important;
}

.pcard.t-webapp .pc-price .pc-from {
  display: block;
  font-size: 0.86rem;
  font-style: italic;
  font-weight: 400;
  color: rgba(226, 241, 255, 0.84);
  line-height: 1.25;
  letter-spacing: 0.01em;
}

body.fa .pcard.t-webapp .pc-price .pc-from {
  font-family: "Shabnam", sans-serif;
  font-style: normal;
  font-size: 0.84rem;
}

.pcard.t-webapp .pc-price sup {
  color: #7dd3e6 !important;
}

.pcard.t-webapp .pc-price .unit {
  color: rgba(226, 241, 255, 0.82) !important;
  font-style: normal;
  font-size: 0.92rem;
}

.pcard.t-webapp .pc-desc {
  color: rgba(241, 247, 255, 0.9) !important;
}

.pcard.t-webapp .pc-note {
  color: #8ce2f2 !important;
  border-top-color: rgba(125, 211, 230, 0.24) !important;
}

.pcard.t-webapp .pc-actions,
.pcard.t-webapp .pc-webapp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.9rem;
  margin-top: 0.35rem;
}

.pcard.t-webapp .pc-btn-consult,
.pcard.t-webapp .pc-webapp-consult {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  background: #2bb8d4;
  color: #07204c !important;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease;
}

body.fa .pcard.t-webapp .pc-btn-consult,
body.fa .pcard.t-webapp .pc-webapp-consult {
  font-family: "Shabnam", sans-serif;
}

.pcard.t-webapp .pc-btn-consult:hover,
.pcard.t-webapp .pc-webapp-consult:hover {
  background: #7dd3e6;
  transform: translateY(-1px);
}

.pcard.t-webapp .pc-btn-more,
.pcard.t-webapp .pc-webapp-more {
  color: #8ce2f2 !important;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#webdesign .wd-pricebox--webapp .wd-webapp-links {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

#webdesign .wd-pricebox--webapp .wd-webapp-explore.is-muted {
  color: rgba(226, 241, 255, 0.86) !important;
  text-decoration: none;
}

#webdesign .wd-pricebox--webapp .wd-webapp-explore.is-muted:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

/* 4. Compact Categorized Selected Website Portfolio (Web Apps vs. Web Design) */
.website-projects-head + .tp-portfolio-group,
.tp-web-portfolio-label + .tp-portfolio-group {
  margin-top: 1.05rem;
}

.tp-portfolio-group + .tp-portfolio-group {
  margin-top: 0.72rem;
  padding-top: 0.68rem;
  border-top: 1px dashed rgba(15, 44, 107, 0.14);
}

.tp-portfolio-group-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.46rem;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4c5d7e;
  line-height: 1.3;
}

.tp-portfolio-group-label.is-webapp-label,
.tp-portfolio-group-label.tp-portfolio-group-label--webapps {
  color: #0f2c6b;
}

.tp-portfolio-group-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a3b8;
  flex-shrink: 0;
}

.tp-portfolio-group-label.is-webapp-label .tp-portfolio-group-dot,
.tp-portfolio-group-label.tp-portfolio-group-label--webapps .tp-portfolio-group-dot {
  background: #2bb8d4;
  box-shadow: 0 0 0 3px rgba(43, 184, 212, 0.2);
}

body.fa .tp-portfolio-group-label {
  font-family: "Shabnam", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.75rem;
}

.website-projects-approved .tp-portfolio-group .website-projects-grid,
.website-projects-approved .website-projects-grid--webapps {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  margin-top: 0 !important;
}

.website-projects-approved--home .workfolio-minimal .website-project-link,
.website-projects-approved--home .workfolio-minimal .website-project-link.website-project-link--webapp {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 0.45rem !important;
  min-height: 52px !important;
  padding: 0.65rem 1rem !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.website-projects-approved--home .workfolio-minimal .website-project-kind,
.website-projects-approved--home .workfolio-minimal .website-project-kind-badge {
  display: none !important;
}

.website-projects-approved--home .workfolio-minimal .website-project-name,
.website-projects-approved--home .workfolio-minimal .website-project-link--webapp .website-project-name {
  grid-column: 1 !important;
  grid-row: 1 !important;
  font-size: clamp(0.84rem, 1.04vw, 1rem) !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  min-width: 0;
}

.website-projects-approved--home .workfolio-minimal .website-project-visit,
.website-projects-approved--home .workfolio-minimal .website-project-link--webapp .website-project-visit {
  grid-column: 2 !important;
  grid-row: 1 !important;
  flex-shrink: 0;
}

.website-projects-approved .website-project-link.website-project-link--webapp {
  border: 1px solid rgba(43, 184, 212, 0.48) !important;
  background: linear-gradient(135deg, #0d255b 0%, #17418c 100%) !important;
  color: #ffffff !important;
}

.website-projects-approved--web .website-projects--hero .website-project-link.website-project-link--webapp {
  min-height: 44px !important;
  padding: 0.5rem 0.85rem !important;
}

.website-projects-approved .website-project-link.website-project-link--webapp:hover {
  background: linear-gradient(135deg, #091b44 0%, #123678 100%) !important;
  border-color: #7dd3e6 !important;
}

.website-projects-approved .website-project-link--webapp .website-project-number {
  color: #7dd3e6 !important;
  font-weight: 700;
}

.website-projects-approved--web .website-projects--hero .website-project-link--webapp .website-project-number {
  display: inline-flex !important;
  font-size: 0.66rem;
  padding: 0.12rem 0.42rem;
  border-radius: 6px;
  background: rgba(43, 184, 212, 0.2);
}

.website-projects-approved .website-project-link--webapp .website-project-name {
  color: #ffffff !important;
  min-width: 0;
}

.website-projects-approved .website-project-link--webapp .website-project-visit {
  color: #7dd3e6 !important;
  flex-shrink: 0;
}

.website-project-kind,
.website-project-kind-badge {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  background: rgba(43, 184, 212, 0.22);
  border: 1px solid rgba(125, 211, 230, 0.4);
  color: #8ce2f2;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
  flex: 0 0 auto;
}

body.fa .website-project-kind,
body.fa .website-project-kind-badge {
  font-family: "Shabnam", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.67rem;
}

@media (max-width: 1160px) {
  .website-projects-approved .tp-portfolio-group .website-projects-grid,
  .website-projects-approved .website-projects-grid--webapps {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  .website-projects-approved .tp-portfolio-group .website-projects-grid,
  .website-projects-approved .website-projects-grid--webapps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .website-projects-approved .tp-portfolio-group .website-projects-grid,
  .website-projects-approved .website-projects-grid--webapps {
    gap: 0.55rem !important;
  }

  .website-projects-approved--home .workfolio-minimal .website-project-link,
  .website-projects-approved--home .workfolio-minimal .website-project-link.website-project-link--webapp {
    min-height: 54px !important;
    padding: 0.55rem 0.68rem !important;
  }

  .website-projects-approved--home .workfolio-minimal .website-project-name,
  .website-projects-approved--home .workfolio-minimal .website-project-link--webapp .website-project-name {
    font-size: 0.79rem !important;
    line-height: 1.28 !important;
  }
}

/* Portfolio page (/portfolio) compact Web Apps separation */
.tp-web-portfolio .tp-portfolio-group + .tp-portfolio-group {
  margin-top: 0.6rem;
  padding-top: 0.58rem;
}

.tp-library-page .tp-web-portfolio-link.tp-web-portfolio-link--webapp {
  background: linear-gradient(135deg, #0d255b 0%, #17418c 100%) !important;
  border-color: rgba(43, 184, 212, 0.5) !important;
  color: #ffffff !important;
}

.tp-library-page .tp-web-portfolio-link.tp-web-portfolio-link--webapp:hover {
  background: linear-gradient(135deg, #091b44 0%, #123678 100%) !important;
  border-color: #7dd3e6 !important;
}

.tp-library-page .tp-web-portfolio-link.tp-web-portfolio-link--webapp > span,
.tp-library-page .tp-web-portfolio-link.tp-web-portfolio-link--webapp > b {
  background: rgba(125, 211, 230, 0.16) !important;
  color: #8ce2f2 !important;
}

.tp-library-page .tp-web-portfolio-link.tp-web-portfolio-link--webapp > strong {
  color: #ffffff !important;
}

/* 5. Estimator Summary Consultation-First Buttons & Web Apps Scoping Callout */
.tp-inv-btn-consult {
  appearance: none;
  width: 100%;
  min-height: 50px;
  padding: 0.78rem 1.15rem;
  border-radius: 999px;
  border: 1.5px solid #2bb8d4;
  background: linear-gradient(135deg, #2bb8d4 0%, #1aa1be 100%);
  color: #061d49;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  box-shadow: 0 10px 24px rgba(43, 184, 212, 0.28);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

body.fa .tp-inv-btn-consult {
  font-family: "Shabnam", sans-serif;
}

.tp-inv-btn-consult:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 14px 28px rgba(43, 184, 212, 0.36);
}

.tp-inv-btn-consult:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

.tp-inv-btn-consult.is-secondary-consult {
  min-height: 44px;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(125, 211, 230, 0.38);
  color: #e6f6fb;
  font-size: 0.84rem;
  box-shadow: none;
}

.tp-inv-btn-consult.is-secondary-consult:hover {
  background: rgba(43, 184, 212, 0.18);
  border-color: #7dd3e6;
}

.tp-inv-btn-pay.is-secondary-photo {
  min-height: 44px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(125, 211, 230, 0.38) !important;
  color: #ffffff !important;
  font-size: 0.83rem !important;
  box-shadow: none !important;
}

.tp-inv-btn-pay.is-secondary-photo:hover {
  background: rgba(43, 184, 212, 0.2) !important;
  border-color: #7dd3e6 !important;
}

.tp-inv-btn-pay[hidden] {
  display: none !important;
}

.tp-est-webapp-note {
  margin-top: 0.85rem;
  padding: 0.72rem 0.95rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #eef6fb 0%, #f4f8fc 100%);
  border: 1px solid rgba(20, 131, 158, 0.25);
  color: #1e335c;
  font-size: 0.84rem;
  line-height: 1.55;
}

.tp-est-webapp-note strong {
  color: #0f2c6b;
}

.tp-est-webapp-note a {
  color: #0e7490;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tp-est-webapp-note a:hover {
  color: #0f2c6b;
}


/* ==========================================================================
   v183 — LEAN CALENDAR SLOTS, DEDICATED ABOUT US (/about) & CONTACT US (/contact)
   ========================================================================== */

.tp-cal-slot-btn {
  min-height: 42px;
  padding: 0.5rem 0.45rem;
  font-size: 0.77rem;
}

.tp-cal-contact-either-head {
  margin-top: 0;
  padding: 0.15rem 0.1rem;
  border: 0;
  background: transparent;
  color: #4f6080;
  font-size: 0.76rem;
  font-weight: 600;
}

/* ---------- ABOUT US PAGE (/about & /fa/about) & CONTACT US PAGE (/contact & /fa/contact) ---------- */
body:is(.tp-about-page, .tp-contact-page) {
  margin: 0;
  background: #fbfaf7;
  color: #0f2c6b;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
}

body:is(.tp-about-page, .tp-contact-page).fa {
  font-family: "Shabnam", Tahoma, sans-serif;
  direction: rtl;
  text-align: right;
}

body:is(.tp-about-page, .tp-contact-page) .lang-fa {
  display: none;
}

body:is(.tp-about-page, .tp-contact-page).fa .lang-en {
  display: none !important;
}

body:is(.tp-about-page, .tp-contact-page).fa .lang-fa {
  display: inline;
}

.tp-about-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(6.6rem, 10vw, 8.6rem) 1.5rem clamp(3.4rem, 5.5vw, 4.6rem);
  background:
    radial-gradient(circle at 82% 18%, rgba(43, 184, 212, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 12% 85%, rgba(15, 44, 107, 0.08) 0%, transparent 48%),
    linear-gradient(180deg, #f4f8fc 0%, #fbfaf7 100%);
  border-bottom: 1px solid rgba(15, 44, 107, 0.09);
}

.tp-about-container {
  width: min(100%, 1200px);
  margin: 0 auto;
}

.tp-about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.36rem 0.85rem;
  border-radius: 999px;
  background: rgba(20, 131, 158, 0.1);
  border: 1px solid rgba(20, 131, 158, 0.24);
  color: #0e7490;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.15rem;
}

body.fa .tp-about-eyebrow {
  font-family: "Shabnam", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.8rem;
}

.tp-about-hero h1 {
  margin: 0;
  max-width: 19ch;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: clamp(2.25rem, 4.6vw, 3.85rem);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.032em;
  color: #0f2c6b;
  text-wrap: balance;
}

body.fa .tp-about-hero h1 {
  font-family: "Shabnam", sans-serif;
  max-width: 24ch;
  line-height: 1.3;
  letter-spacing: 0;
}

.tp-about-hero h1 em {
  color: #14839e;
  font-style: italic;
}

body.fa .tp-about-hero h1 em {
  font-style: normal;
}

.tp-about-lead {
  margin: 1.15rem 0 0;
  max-width: 64ch;
  color: #465675;
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.72;
}

.tp-about-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: clamp(2rem, 3.6vw, 2.8rem);
}

.tp-about-stat {
  padding: 1.15rem 1.25rem;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(15, 44, 107, 0.1);
  box-shadow: 0 10px 26px rgba(15, 44, 107, 0.04);
}

.tp-about-stat strong {
  display: block;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  color: #0f2c6b;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

body.fa .tp-about-stat strong {
  font-family: "Shabnam", sans-serif;
  letter-spacing: 0;
}

.tp-about-stat > span {
  display: block;
  margin-top: 0.35rem;
  color: #5b6b88;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.45;
}

.tp-about-section {
  padding: clamp(3.6rem, 6vw, 5.2rem) 1.5rem;
}

.tp-about-section.is-alt {
  background: #f4f2eb;
  border-top: 1px solid rgba(15, 44, 107, 0.08);
  border-bottom: 1px solid rgba(15, 44, 107, 0.08);
}

.tp-about-sec-head {
  max-width: 680px;
  margin-bottom: clamp(1.8rem, 3vw, 2.5rem);
}

.tp-about-sec-kicker {
  margin: 0 0 0.55rem;
  color: #14839e;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

body.fa .tp-about-sec-kicker {
  font-family: "Shabnam", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.8rem;
}

.tp-about-sec-head h2 {
  margin: 0;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: clamp(1.75rem, 3.2vw, 2.55rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: #0f2c6b;
  text-wrap: balance;
}

body.fa .tp-about-sec-head h2 {
  font-family: "Shabnam", sans-serif;
  line-height: 1.35;
  letter-spacing: 0;
}

.tp-about-sec-head h2 em {
  color: #14839e;
  font-style: italic;
}

body.fa .tp-about-sec-head h2 em {
  font-style: normal;
}

.tp-about-sec-head p {
  margin: 0.75rem 0 0;
  color: #4c5d7e;
  font-size: 0.98rem;
  line-height: 1.68;
}

.tp-about-pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}

.tp-about-card {
  padding: clamp(1.45rem, 2.6vw, 1.95rem);
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(15, 44, 107, 0.1);
  box-shadow: 0 12px 30px rgba(15, 44, 107, 0.045);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.tp-about-card-badge {
  align-self: flex-start;
  padding: 0.26rem 0.72rem;
  border-radius: 999px;
  background: #eaf6fa;
  color: #0e7490;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.fa .tp-about-card-badge {
  font-family: "Shabnam", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.76rem;
}

.tp-about-card h3 {
  margin: 0;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 1.22rem;
  font-weight: 700;
  color: #0f2c6b;
  line-height: 1.28;
}

body.fa .tp-about-card h3 {
  font-family: "Shabnam", sans-serif;
}

.tp-about-card p {
  margin: 0;
  color: #4c5d7e;
  font-size: 0.92rem;
  line-height: 1.68;
}

/* AI Multiplier Dark Feature Card */
.tp-about-ai-band {
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: 28px;
  background: linear-gradient(140deg, #091d49 0%, #103273 55%, #0d4b6e 100%);
  border: 1.5px solid rgba(125, 211, 230, 0.35);
  color: #ffffff;
  box-shadow: 0 24px 60px rgba(9, 29, 73, 0.2);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 2.8rem);
  align-items: center;
}

.tp-about-ai-band h2 {
  margin: 0.45rem 0 0.85rem;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
}

body.fa .tp-about-ai-band h2 {
  font-family: "Shabnam", sans-serif;
  line-height: 1.36;
}

.tp-about-ai-band h2 em {
  color: #7dd3e6;
  font-style: normal;
}

.tp-about-ai-band p {
  margin: 0;
  color: rgba(235, 245, 255, 0.88);
  font-size: 0.96rem;
  line-height: 1.72;
}

.tp-about-ai-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  background: rgba(43, 184, 212, 0.2);
  border: 1px solid rgba(125, 211, 230, 0.38);
  color: #9be7f5;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.fa .tp-about-ai-kicker {
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.76rem;
}

.tp-about-ai-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.tp-about-ai-chip {
  padding: 0.95rem 1.05rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(125, 211, 230, 0.26);
}

.tp-about-ai-chip strong {
  display: block;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
}

.tp-about-ai-chip > span {
  display: block;
  margin-top: 0.24rem;
  color: rgba(219, 238, 255, 0.8);
  font-size: 0.77rem;
  line-height: 1.45;
}

.tp-about-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.tp-about-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin-top: 2rem;
}

.tp-about-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 48px;
  padding: 0 1.35rem;
  border-radius: 999px;
  border: 1.5px solid rgba(15, 44, 107, 0.2);
  background: #ffffff;
  color: #0f2c6b;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

body.fa .tp-about-btn {
  font-family: "Shabnam", sans-serif;
}

.tp-about-btn:hover {
  transform: translateY(-1px);
  border-color: #0f2c6b;
}

.tp-about-btn.is-primary {
  background: #0f2c6b;
  border-color: #0f2c6b;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 44, 107, 0.18);
}

.tp-about-btn.is-primary:hover {
  background: #153c8d;
}

/* ---------- CONTACT US PAGE (/contact & /fa/contact) ---------- */
.tp-contact-page-hero {
  padding: clamp(6.5rem, 9.8vw, 8.2rem) 1.5rem clamp(2.6rem, 4.5vw, 3.4rem);
  background:
    radial-gradient(circle at 85% 20%, rgba(43, 184, 212, 0.15) 0%, transparent 44%),
    linear-gradient(180deg, #f3f7fc 0%, #fbfaf7 100%);
  border-bottom: 1px solid rgba(15, 44, 107, 0.09);
}

.tp-contact-hero-inner {
  width: min(100%, 1240px);
  margin: 0 auto;
}

.tp-contact-page-hero h1 {
  margin: 0;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: clamp(2.2rem, 4.4vw, 3.55rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #0f2c6b;
}

body.fa .tp-contact-page-hero h1 {
  font-family: "Shabnam", sans-serif;
  line-height: 1.3;
  letter-spacing: 0;
}

.tp-contact-page-hero h1 em {
  color: #14839e;
  font-style: italic;
}

body.fa .tp-contact-page-hero h1 em {
  font-style: normal;
}

.tp-contact-hero-sub {
  margin: 0.75rem 0 0;
  max-width: 56ch;
  color: #4f6080;
  font-size: 1rem;
  line-height: 1.65;
}

.tp-contact-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.5rem;
}

.tp-contact-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 1.28rem;
  border-radius: 999px;
  border: 1.5px solid rgba(15, 44, 107, 0.18);
  background: #ffffff;
  color: #0f2c6b;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

body.fa .tp-contact-hero-btn {
  font-family: "Shabnam", sans-serif;
}

.tp-contact-hero-btn:hover {
  transform: translateY(-1px);
  border-color: #0f2c6b;
  box-shadow: 0 8px 20px rgba(15, 44, 107, 0.08);
}

.tp-contact-hero-btn.is-primary {
  background: #0f2c6b;
  border-color: #0f2c6b;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 44, 107, 0.2);
}

.tp-contact-hero-btn.is-cyan {
  background: #e4f5f8;
  border-color: rgba(20, 131, 158, 0.38);
  color: #0a2457;
}

@media (max-width: 920px) {
  .tp-about-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tp-about-ai-band {
    grid-template-columns: 1fr;
  }
  .tp-about-values {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .tp-about-pillars,
  .tp-about-ai-chips {
    grid-template-columns: 1fr;
  }
  .tp-contact-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .tp-contact-hero-btn {
    width: 100%;
  }
}


/* ==========================================================================
   v185 — Portfolio Spacing Fix, Consolidated Homepage Video Showcase,
          Bold Subheadings & Intentional 2-Part Semantic Typography
   ========================================================================== */

/* 1. Selected Website & Web-App Portfolio — Standard Editorial Breathing Room */
.workfolio-minimal .workfolio-head h3 {
  line-height: 1.08 !important;
}

body.fa .workfolio-minimal .workfolio-head h3 {
  line-height: 1.34 !important;
}

.workfolio-head + .tp-portfolio-group {
  margin-top: clamp(1.6rem, 2.8vw, 2.15rem) !important;
}

.website-projects-head + .tp-portfolio-group,
.tp-web-portfolio-label + .tp-portfolio-group {
  margin-top: 1.35rem !important;
}

.tp-portfolio-group-label {
  margin: 0 0 0.68rem !important;
}

.tp-portfolio-group + .tp-portfolio-group {
  margin-top: 1.25rem !important;
  padding-top: 1.15rem !important;
  border-top: 1px dashed rgba(15, 44, 107, 0.15) !important;
}

/* 2. Consolidated Homepage Video Industry Rail Embedded Directly Inside #pricing */
#pricing .tp-portfolio.tp-portfolio--embedded-video {
  margin: clamp(1.5rem, 2.6vw, 2rem) 0 clamp(2.05rem, 3.3vw, 2.6rem);
  padding: clamp(1.2rem, 2.2vw, 1.55rem) clamp(1.15rem, 2.2vw, 1.65rem) clamp(1.05rem, 1.8vw, 1.35rem);
  border-radius: 26px;
  background: linear-gradient(145deg, #0c2559 0%, #0f2c6b 58%, #0d3f66 100%);
  border: 1px solid rgba(125, 211, 230, 0.24);
  box-shadow: 0 22px 54px rgba(10, 31, 77, 0.14);
}

#pricing .tp-portfolio.tp-portfolio--embedded-video .tp-section-label {
  margin: 0 0 0.85rem;
  color: rgba(232, 245, 255, 0.8);
  font-size: 0.68rem;
  font-weight: 600;
}

body.fa #pricing .tp-portfolio.tp-portfolio--embedded-video .tp-section-label {
  font-size: 0.78rem;
}

#pricing .tp-portfolio.tp-portfolio--embedded-video .tp-carousel-foot {
  margin-top: 0.9rem;
}

/* 3. Bolder Feature / Capability Subheadings & Planned 2-Line Semantic Wrapping */
.webdesign-features .wd-title,
.wd-item .wd-title {
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-weight: 700 !important;
  color: #0f2c6b !important;
  letter-spacing: -0.015em;
  line-height: 1.24;
  text-wrap: balance;
}

body.fa .webdesign-features .wd-title,
body.fa .wd-item .wd-title {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  letter-spacing: 0 !important;
  line-height: 1.42;
}

.service-list .service-title {
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-weight: 700 !important;
  color: #0f2c6b !important;
  letter-spacing: -0.022em;
  line-height: 1.22;
  text-wrap: balance;
}

body.fa .service-list .service-title {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  letter-spacing: 0 !important;
  line-height: 1.42;
}

body.fa .service-list .service-num {
  font-family: "Shabnam", Tahoma, sans-serif;
  letter-spacing: 0;
  font-size: 0.82rem;
  font-weight: 600;
}

.feats .feat .f-title,
.tp-about-card h3,
.wa-cap-card h3,
.wa-ind-card h4,
.wa-step-card h3,
.wa-arch-layer strong,
.tp-how-step h3 {
  font-weight: 700 !important;
  text-wrap: balance;
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

p,
.wd-desc,
.f-desc,
.service-desc {
  text-wrap: pretty;
}

.tp-line-split {
  display: block;
}

.tp-phrase {
  display: inline-block;
}

@media (max-width: 560px) {
  .tp-phrase {
    display: inline;
  }
}

/* 4. Video Page Quick Comparison (#tier-comparison) Button Consistency */
#tier-comparison .tp-tier-matrix-actions .btn {
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0.72rem 1.28rem;
}

body.fa #tier-comparison .tp-tier-matrix-actions .btn {
  font-family: "Shabnam", Tahoma, sans-serif;
}

/* ==========================================================================
   v186 — SEPARATE CONSULTATION CARD BELOW ESTIMATOR FINAL INVOICE
   ========================================================================== */
body:has(.tp-estimator-rail) {
  overflow-x: clip;
}

.tp-estimator-rail {
  top: 84px;
  gap: 1.05rem;
}

.tp-inv-actions[hidden] {
  display: none !important;
}

.tp-estimator-consult-box {
  background: linear-gradient(180deg, #ffffff 0%, #f2f8fc 100%);
  border: 1.5px solid rgba(20, 131, 158, 0.28);
  border-radius: 22px;
  padding: 1.25rem 1.4rem;
  box-shadow: 0 14px 30px rgba(10, 31, 77, 0.08);
  color: #0f2c6b;
}

button.tp-est-consult-link {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 46px;
  padding: 0.62rem 1.05rem;
  border-radius: 999px;
  border: 1.5px solid rgba(15, 44, 107, 0.22);
  background: #ffffff;
  color: #0f2c6b;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 0 6px 16px rgba(10, 31, 77, 0.06);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

body.fa button.tp-est-consult-link {
  font-family: "Shabnam", Tahoma, sans-serif;
}

button.tp-est-consult-link:hover {
  background: #0f2c6b;
  border-color: #0f2c6b;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15, 44, 107, 0.18);
}

button.tp-est-consult-link.is-primary-consult {
  min-height: 48px;
  background: linear-gradient(135deg, #0f2c6b 0%, #115e8c 100%);
  border-color: rgba(43, 184, 212, 0.45);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(15, 44, 107, 0.18);
}

button.tp-est-consult-link.is-primary-consult:hover {
  background: linear-gradient(135deg, #0a1f4d 0%, #0e7490 100%);
  border-color: #2bb8d4;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(15, 44, 107, 0.24);
}

/* ==========================================================================
   v187 — CONSECUTIVE MULTI-SLOT CALENDAR & WEB APPS / WEB DESIGN SEPARATION
   ========================================================================== */
.tp-cal-slot-btn.is-adjacent-next:not(:disabled) {
  border-style: dashed;
  border-color: rgba(209, 154, 53, 0.55);
  background: linear-gradient(180deg, #ffffff 0%, #fdf6e2 100%);
}

.tp-cal-slot-btn.is-adjacent-next:not(:disabled):hover {
  border-style: solid;
  border-color: #d19a35;
  background: #f4dfab;
  transform: translateY(-1px);
}

.tp-est-webapp-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem 1.3rem;
  border-radius: 16px;
  background: linear-gradient(135deg, #f5f9ff 0%, #eef7fb 100%);
  border: 1.5px solid rgba(20, 131, 158, 0.26);
}

.tp-est-webapp-copy {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.tp-est-webapp-copy strong {
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.96rem;
  font-weight: 700;
  color: #0f2c6b;
  line-height: 1.35;
}

body.fa .tp-est-webapp-copy strong {
  font-family: "Shabnam", Tahoma, sans-serif;
}

.tp-est-webapp-copy span {
  font-size: 0.82rem;
  color: #465878;
  line-height: 1.55;
}

.tp-est-webapp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

.tp-est-webapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 40px;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

body.fa .tp-est-webapp-btn {
  font-family: "Shabnam", Tahoma, sans-serif;
}

.tp-est-webapp-btn.is-primary {
  background: #0f2c6b;
  color: #ffffff !important;
  border: 1px solid #0f2c6b;
  box-shadow: 0 8px 18px rgba(15, 44, 107, 0.16);
}

.tp-est-webapp-btn.is-primary:hover {
  background: #14839e;
  border-color: #14839e;
  transform: translateY(-1px);
}

.tp-est-webapp-btn.is-ghost {
  background: #ffffff;
  color: #0f2c6b !important;
  border: 1px solid rgba(15, 44, 107, 0.22);
}

.tp-est-webapp-btn.is-ghost:hover {
  border-color: #14839e;
  color: #14839e !important;
}

@media (max-width: 780px) {
  .tp-est-webapp-card {
    flex-direction: column;
    align-items: stretch;
  }

  .tp-est-webapp-actions {
    width: 100%;
  }

  .tp-est-webapp-btn {
    flex: 1 1 auto;
  }
}

#webdesign .wd-priceboxes.wd-priceboxes--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#webapps .wd-priceboxes.wd-priceboxes--single {
  grid-template-columns: minmax(0, 1fr) !important;
}

@media (max-width: 720px) {
  #webdesign .wd-priceboxes.wd-priceboxes--pair {
    grid-template-columns: 1fr !important;
  }
}

.tp-web-portfolio-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

/* ==========================================================================
   v190 — COMPACT 54PX EQUAL-HEIGHT COUNTDOWN CAPSULE, 3-MONTH CALENDAR NAV,
          SINGLE-LINE /ABOUT STATS + FOUNDER/REVIEWS, & 3-STAGE /OFFERS PAGE
   ========================================================================== */

/* 1. Concept 03 — Compact Two-Tier Boutique Offer Card with Soft Light-Blue Countdown Tiles (v191) */
.tp-offer-float {
  left: clamp(0.85rem, 1.5vw, 1.35rem) !important;
  right: auto !important;
  bottom: clamp(1rem, 2.2vw, 2rem) !important;
}

body.fa .tp-offer-float {
  left: auto !important;
  right: clamp(0.85rem, 1.5vw, 1.35rem) !important;
}

.tp-offer-float-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 298px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  box-sizing: border-box !important;
  padding: 12px 13px !important;
  gap: 8px !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(15, 44, 107, 0.13) !important;
  box-shadow:
    0 14px 34px rgba(15, 44, 107, 0.13),
    0 2px 6px rgba(15, 44, 107, 0.05) !important;
  overflow: hidden !important;
}

.tp-offer-float-card::before {
  content: none !important;
  display: none !important;
}

body.fa .tp-offer-float-card {
  padding: 13px 13px 12px !important;
  direction: rtl !important;
}

.tp-offer-float-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.45rem !important;
  width: 100% !important;
}

.tp-offer-float-top-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  text-decoration: none !important;
  color: inherit !important;
  min-width: 0 !important;
}

.tp-offer-float-card .tp-offer-float-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 23px !important;
  padding: 0 0.56rem !important;
  border-radius: 999px !important;
  background: #fff1f3 !important;
  border: 1px solid rgba(190, 18, 60, 0.24) !important;
  color: #be123c !important;
  font-size: 0.61rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body.fa .tp-offer-float-card .tp-offer-float-badge {
  font-size: 0.64rem !important;
  letter-spacing: 0 !important;
}

.tp-offer-float-sub {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #4b5d7e !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

body.fa .tp-offer-float-sub {
  font-family: 'Shabnam', sans-serif !important;
  font-size: 0.73rem !important;
}

.tp-offer-float-close {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 50% !important;
  background: #f8fafc !important;
  border: 1px solid rgba(15, 44, 107, 0.13) !important;
  color: #0f2c6b !important;
  font-size: 0.9rem !important;
}

.tp-offer-float-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  width: 100% !important;
  height: auto !important;
}

.tp-flap-board--float {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  align-self: center !important;
  align-items: center !important;
  height: 39px !important;
  gap: 4px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.tp-flap-board--float .tp-flap-col {
  height: 39px !important;
  justify-content: center !important;
  gap: 0 !important;
}

.tp-flap-board--float .tp-flap-card,
.tp-flap-board--float .tp-flap-card--light {
  width: 37px !important;
  height: 39px !important;
  border-radius: 10px !important;
  background: #f6f5f1 !important;
  border: 1px solid #e2dfd7 !important;
  box-shadow: none !important;
  color: #0f2c6b !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 2px !important;
}

.tp-float-tile-num {
  font-family: 'Google Sans', 'Plus Jakarta Sans', sans-serif !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #0f2c6b !important;
  text-shadow: none !important;
}

.tp-float-tile-unit {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.45rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  color: #64748b !important;
}

body.fa .tp-float-tile-unit {
  font-family: 'Shabnam', sans-serif !important;
  font-size: 0.46rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.tp-flap-board--float .tp-flap-hinge,
.tp-flap-board--float .tp-flap-label {
  display: none !important;
}

.tp-offer-float-card .tp-offer-float-cta {
  flex: 1 1 auto !important;
  height: 39px !important;
  padding: 0 0.72rem !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #0f2c6b 0%, #18439c 100%) !important;
  border: 1px solid #0f2c6b !important;
  box-shadow: 0 6px 14px rgba(15, 44, 107, 0.2) !important;
  color: #ffffff !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  gap: 0.24rem !important;
  justify-content: center !important;
}

.tp-offer-float-link:hover .tp-offer-float-cta,
.tp-offer-float-link:focus-visible .tp-offer-float-cta {
  background: linear-gradient(135deg, #153988 0%, #1f53bd 100%) !important;
  border-color: #153988 !important;
  box-shadow: 0 8px 18px rgba(15, 44, 107, 0.28) !important;
  color: #ffffff !important;
}

.tp-offer-float-pill {
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  box-sizing: border-box !important;
  padding: 0 0.95rem 0 0.55rem !important;
}

body.fa .tp-offer-float-pill {
  padding: 0 0.55rem 0 0.95rem !important;
}

@media (max-width: 640px) {
  .tp-offer-float,
  body.fa .tp-offer-float {
    left: 0.75rem !important;
    right: auto !important;
    bottom: max(0.85rem, env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 78px) !important;
  }

  .tp-offer-float-card {
    width: min(268px, calc(100vw - 78px)) !important;
    padding: 9px 10px !important;
    gap: 6px !important;
    border-radius: 17px !important;
  }

  .tp-flap-board--float {
    height: 34px !important;
    gap: 3px !important;
  }

  .tp-flap-board--float .tp-flap-col,
  .tp-flap-board--float .tp-flap-card,
  .tp-flap-board--float .tp-flap-card--light {
    width: 32px !important;
    height: 34px !important;
    border-radius: 8px !important;
  }

  .tp-float-tile-num {
    font-size: 0.78rem !important;
  }

  .tp-float-tile-unit {
    font-size: 0.41rem !important;
  }

  .tp-offer-float-card .tp-offer-float-cta {
    display: inline-flex !important;
    height: 34px !important;
    padding: 0 0.52rem !important;
    font-size: 0.69rem !important;
    border-radius: 8px !important;
  }

  .tp-offer-float-pill {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }
}

/* 2. 3-Month Booking Calendar Navigation Bar (.tp-cal-nav) */
.tp-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  margin: -0.15rem 0 0.68rem;
  padding: 0.36rem 0.42rem;
  border-radius: 13px;
  background: #f4f7fc;
  border: 1px solid rgba(15, 44, 107, 0.09);
}

.tp-cal-months {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.26rem;
}

.tp-cal-month-btn {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 29px;
  padding: 0.22rem 0.62rem;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: #485b7e;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

body.fa .tp-cal-month-btn {
  font-family: "Shabnam", Tahoma, sans-serif;
  font-size: 0.73rem;
}

.tp-cal-month-btn:hover {
  background: rgba(15, 44, 107, 0.06);
  color: #0f2c6b;
}

.tp-cal-month-btn.is-active {
  background: #ffffff;
  color: #0f2c6b;
  border-color: rgba(15, 44, 107, 0.16);
  box-shadow: 0 3px 10px rgba(15, 44, 107, 0.08);
}

.tp-cal-pager {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-inline-start: auto;
}

.tp-cal-range-label {
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #4f6285;
  white-space: nowrap;
  min-width: 86px;
  text-align: center;
}

body.fa .tp-cal-range-label {
  font-family: "Shabnam", Tahoma, sans-serif;
}

.tp-cal-page-btn {
  appearance: none;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(15, 44, 107, 0.14);
  background: #ffffff;
  color: #0f2c6b;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.tp-cal-page-btn:hover:not(:disabled) {
  background: #0f2c6b;
  border-color: #0f2c6b;
  color: #ffffff;
}

.tp-cal-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

body.fa .tp-cal-page-btn svg {
  transform: scaleX(-1);
}

/* 3. /about Single-Line Stat Descriptions + Founder Portrait & Reviews Integration */
.tp-about-page {
  --bg: #faf9f7;
  --line: rgba(18, 49, 108, 0.14);
  --navy: #0f2c6b;
  --muted: #536784;
  --cyan-deep: #14839e;
  --cyan: #2bb8d4;
}

.tp-about-page .founder-message > .container {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}

.tp-about-page .founder-byline .founder-name {
  margin: 0;
  font: 500 1.25rem/1.35 "Google Sans", "Roboto", sans-serif;
  letter-spacing: -0.015em;
  color: var(--navy, #0f2c6b);
}

body.fa.tp-about-page .founder-byline .founder-name {
  font-family: "Shabnam", Tahoma, sans-serif;
  letter-spacing: 0;
}

.tp-about-page .tp-review-heading h2 {
  font-family: "Google Sans", "Roboto", sans-serif;
  font-weight: 700;
  color: #0f2c6b;
}

body.fa.tp-about-page .tp-review-heading h2 {
  font-family: "Shabnam", Tahoma, sans-serif;
  letter-spacing: 0;
  line-height: 1.28;
}

body.fa.tp-about-page .tp-review-heading h2 em {
  font-style: normal;
}

@media (min-width: 1080px) {
  .tp-about-stat {
    padding: 1.1rem 1.05rem;
  }

  .tp-about-stat > span {
    font-size: 0.77rem;
    line-height: 1.35;
    white-space: nowrap;
    letter-spacing: -0.008em;
  }

  body.fa .tp-about-stat > span {
    font-size: 0.76rem;
    letter-spacing: 0;
  }
}

/* 4. /offers 3-Stage Architectural Redesign
      Row 1: Bold First-Order Campaign + Live Countdown Hero Board (.tp-offers-hero)
      Row 2: Distinct Multi-Video Packages & Monthly Department (#promo)
      Row 3: Categorized Individual Discounted Service Rates (#discounted-services) */
.tp-offers-hero {
  position: relative;
  padding: clamp(6.6rem, 9vw, 8.2rem) 0 clamp(3.4rem, 5vw, 4.6rem);
  background:
    radial-gradient(circle at 82% 18%, rgba(43, 184, 212, 0.14), transparent 46%),
    radial-gradient(circle at 12% 75%, rgba(15, 44, 107, 0.07), transparent 48%),
    linear-gradient(180deg, #f8fafd 0%, #f5f3ec 100%);
  border-bottom: 1px solid rgba(15, 44, 107, 0.09);
  overflow: hidden;
}

.tp-offers-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
}

.tp-offers-hero-kicker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}

.tp-offers-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.34rem 0.78rem;
  border-radius: 999px;
  background: var(--tp-offer-red-bg);
  border: 1px solid var(--tp-offer-red-border);
  color: var(--tp-offer-red);
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.fa .tp-offers-hero-pill {
  font-family: "Shabnam", Tahoma, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.76rem;
}

.tp-offers-hero-deadline-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.34rem 0.85rem;
  border-radius: 999px;
  background: rgba(15, 44, 107, 0.07);
  border: 1px solid rgba(15, 44, 107, 0.14);
  color: #0f2c6b;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
}

body.fa .tp-offers-hero-deadline-tag {
  font-family: "Shabnam", Tahoma, sans-serif;
}

.tp-offers-hero-copy h1 {
  margin: 0 0 1rem;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: clamp(2.35rem, 4.5vw, 3.85rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #0f2c6b;
}

body.fa .tp-offers-hero-copy h1 {
  font-family: "Shabnam", Tahoma, sans-serif;
  line-height: 1.26;
  letter-spacing: 0;
}

.tp-offers-hero-copy h1 em {
  color: #14839e;
  font-style: italic;
}

body.fa .tp-offers-hero-copy h1 em {
  font-style: normal;
}

.tp-offers-hero-lead {
  margin: 0 0 1.25rem;
  max-width: 56ch;
  color: #3f5277;
  font-size: clamp(0.98rem, 1.25vw, 1.08rem);
  line-height: 1.68;
}

.tp-offers-hero-rules {
  list-style: none;
  margin: 0 0 1.65rem;
  padding: 0.95rem 1.15rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(15, 44, 107, 0.11);
  display: grid;
  gap: 0.5rem;
}

.tp-offers-hero-rules li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #24385e;
}

.tp-offers-hero-rules li::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: rgba(20, 131, 158, 0.15);
  color: #0e7490;
  font-size: 0.7rem;
  font-weight: 800;
  flex-shrink: 0;
}

.tp-offers-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

/* Right-side Live Countdown Showcase Card (.tp-offers-hero-board) */
.tp-offers-hero-board {
  position: relative;
  padding: clamp(1.45rem, 2.8vw, 2.05rem);
  border-radius: 26px;
  background:
    radial-gradient(circle at 88% 12%, rgba(43, 184, 212, 0.28), transparent 48%),
    linear-gradient(155deg, #0b2154 0%, #0f2c6b 55%, #091a42 100%);
  border: 1px solid rgba(125, 211, 230, 0.34);
  box-shadow:
    0 28px 64px rgba(8, 24, 62, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.tp-offers-board-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}

.tp-offers-board-live {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8ce6f8;
}

body.fa .tp-offers-board-live {
  font-family: "Shabnam", Tahoma, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.76rem;
}

.tp-offers-board-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5c6c;
  box-shadow: 0 0 0 4px rgba(255, 92, 108, 0.22);
}

.tp-offers-board-off {
  display: inline-flex;
  align-items: center;
  padding: 0.26rem 0.68rem;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.22);
  border: 1px solid rgba(255, 128, 128, 0.5);
  color: #ffd4d8;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

body.fa .tp-offers-board-off {
  font-family: "Shabnam", Tahoma, sans-serif;
  letter-spacing: 0;
}

.tp-offers-board-timer-wrap {
  padding: 1.15rem 1rem 1rem;
  border-radius: 18px;
  background: rgba(5, 15, 39, 0.46);
  border: 1px solid rgba(140, 230, 248, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.tp-flap-board--hero {
  gap: clamp(0.45rem, 1.2vw, 0.75rem) !important;
  align-self: center !important;
  justify-content: center !important;
  margin-inline: auto !important;
}

.tp-flap-board--hero .tp-flap-card {
  width: clamp(58px, 6.2vw, 76px) !important;
  height: clamp(64px, 6.8vw, 82px) !important;
  border-radius: 14px !important;
  font-size: clamp(1.75rem, 2.5vw, 2.35rem) !important;
  background: linear-gradient(180deg, #1b4294 0%, #0f2862 100%) !important;
  border: 1px solid rgba(140, 230, 248, 0.34) !important;
  box-shadow:
    0 12px 24px rgba(3, 10, 28, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

.tp-flap-board--hero .tp-flap-half--top,
.tp-flap-board--hero .tp-flap-leaf--top {
  background: linear-gradient(180deg, #1d469c 0%, #112d6b 100%) !important;
}

.tp-flap-board--hero .tp-flap-half--bottom,
.tp-flap-board--hero .tp-flap-leaf--bottom {
  background: linear-gradient(180deg, #0d2356 0%, #183d8a 100%) !important;
}

.tp-flap-board--hero .tp-flap-label {
  color: rgba(219, 238, 255, 0.82) !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  margin-top: 0.35rem !important;
}

.tp-offers-board-deadline {
  width: 100%;
  text-align: center;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.82rem;
  font-weight: 600;
  color: #dbeafe;
}

.tp-offers-board-deadline strong {
  color: #7dd3fc;
  font-weight: 800;
}

.tp-offers-board-mini-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.tp-offers-board-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.68rem 0.85rem;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  text-decoration: none;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.tp-offers-board-mini:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(140, 230, 248, 0.55);
  transform: translateY(-1px);
}

.tp-offers-board-mini-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.tp-offers-board-mini-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.32rem;
  direction: ltr;
  unicode-bidi: isolate;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.94rem;
  font-weight: 800;
  color: #7dd3fc;
}

.tp-offers-board-mini-price del {
  font-size: 0.72rem;
  font-weight: 600;
  color: #ff858d;
}

/* Row 2 (#promo): Department card spacing inside package section */
.tp-offers-dept-wrap {
  margin-top: 2rem;
}

/* Row 3 (#discounted-services): Categorized Individual Discounted Prices */
.tp-offers-catalog-sec {
  padding: clamp(4rem, 6.5vw, 5.8rem) 0;
  background: #fbfaf6;
  border-top: 1px solid rgba(15, 44, 107, 0.08);
}

.tp-offers-cat-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 2.2rem;
}

.tp-offers-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.52rem 1rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(15, 44, 107, 0.15);
  color: #0f2c6b;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(15, 44, 107, 0.04);
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

body.fa .tp-offers-cat-pill {
  font-family: "Shabnam", Tahoma, sans-serif;
}

.tp-offers-cat-pill:hover {
  background: #0f2c6b;
  border-color: #0f2c6b;
  color: #ffffff;
  transform: translateY(-1px);
}

.tp-offer-cat-block {
  margin-bottom: 2.6rem;
  padding: clamp(1.35rem, 2.6vw, 2rem);
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid rgba(15, 44, 107, 0.11);
  box-shadow: 0 16px 38px rgba(15, 44, 107, 0.045);
  scroll-margin-top: 92px;
}

.tp-offer-cat-block:last-child {
  margin-bottom: 0;
}

.tp-offer-cat-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 1.15rem;
  margin-bottom: 1.35rem;
  border-bottom: 1px solid rgba(15, 44, 107, 0.09);
}

.tp-offer-cat-kicker {
  display: inline-block;
  margin-bottom: 0.3rem;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #14839e;
}

body.fa .tp-offer-cat-kicker {
  font-family: "Shabnam", Tahoma, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.tp-offer-cat-head h3 {
  margin: 0;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 800;
  color: #0f2c6b;
}

body.fa .tp-offer-cat-head h3 {
  font-family: "Shabnam", Tahoma, sans-serif;
}

.tp-offer-cat-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.46rem 0.95rem;
  border-radius: 999px;
  background: #f2f7fc;
  border: 1px solid rgba(15, 44, 107, 0.14);
  color: #0f2c6b;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease;
}

.tp-offer-cat-link:hover {
  background: #0f2c6b;
  color: #ffffff;
}

.tp-offer-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.tp-offer-cat-grid.is-two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tp-offer-rate-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.3rem;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
  border: 1px solid rgba(15, 44, 107, 0.12);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.tp-offer-rate-card:hover {
  border-color: rgba(20, 131, 158, 0.45);
  box-shadow: 0 12px 28px rgba(15, 44, 107, 0.08);
  transform: translateY(-2px);
}

.tp-offer-rate-card.is-featured {
  background: linear-gradient(160deg, #0d255c 0%, #12347a 100%);
  border-color: rgba(125, 211, 230, 0.4);
  color: #ffffff;
}

.tp-offer-rate-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.tp-offer-rate-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #14839e;
}

body.fa .tp-offer-rate-tag {
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.72rem;
}

.tp-offer-rate-card.is-featured .tp-offer-rate-tag {
  color: #8ce6f8;
}

.tp-offer-rate-card h4 {
  margin: 0 0 0.65rem;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 1.08rem;
  font-weight: 800;
  color: #0f2c6b;
}

body.fa .tp-offer-rate-card h4 {
  font-family: "Shabnam", Tahoma, sans-serif;
}

.tp-offer-rate-card.is-featured h4 {
  color: #ffffff;
}

.tp-offer-rate-price {
  direction: ltr !important;
  display: inline-flex !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 0.45rem !important;
  line-height: 1 !important;
  margin-bottom: 0.35rem;
}

.tp-offer-rate-price > .cur {
  display: inline-flex !important;
  align-items: flex-start !important;
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: clamp(2.25rem, 2.8vw, 2.75rem) !important;
  font-weight: 800 !important;
  line-height: 0.8 !important;
  letter-spacing: -0.03em !important;
  color: #0f2c6b;
}

body.fa .tp-offer-rate-price > .cur {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  letter-spacing: 0 !important;
}

.tp-offer-rate-card.is-featured .tp-offer-rate-price > .cur {
  color: #ffffff;
}

.tp-offer-rate-price > .cur sup {
  position: static !important;
  font-size: 0.44em !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin-top: 0.04em !important;
  margin-right: 0.05em !important;
}

.tp-offer-rate-price > .unit {
  align-self: flex-end !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #55688a;
  margin-bottom: 0.06rem !important;
}

.tp-offer-rate-card.is-featured .tp-offer-rate-price > .unit {
  color: rgba(219, 238, 255, 0.82);
}

.tp-offer-rate-card.is-featured s.tp-price-was {
  color: var(--tp-offer-red-dark-card) !important;
}

.tp-offer-rate-card.is-featured s.tp-price-was::after {
  background: var(--tp-offer-red-dark-card) !important;
}

.tp-offer-rate-card.is-featured .tp-price-off-tag {
  background: var(--tp-offer-red-dark-bg) !important;
  border-color: var(--tp-offer-red-dark-border) !important;
  color: #ffd4d8 !important;
}

.tp-offer-rate-card.is-featured .tp-micro-offer-line {
  color: rgba(226, 236, 252, 0.8) !important;
}

.tp-offer-rate-desc {
  margin: 0.55rem 0 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: #46587a;
}

.tp-offer-rate-card.is-featured .tp-offer-rate-desc {
  color: rgba(226, 238, 255, 0.86);
}

.tp-offer-addons-strip {
  margin-top: 1rem;
  padding: 0.85rem 1.1rem;
  border-radius: 14px;
  background: #f4f7fc;
  border: 1px dashed rgba(15, 44, 107, 0.18);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1.25rem;
  font-size: 0.82rem;
  color: #2c4068;
}

.tp-offer-addons-strip strong {
  color: #0f2c6b;
  font-weight: 700;
}

@media (max-width: 980px) {
  .tp-offers-hero-grid {
    grid-template-columns: 1fr;
  }

  .tp-offer-cat-grid,
  .tp-offer-cat-grid.is-two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .tp-offer-cat-grid,
  .tp-offer-cat-grid.is-two-col,
  .tp-offers-board-mini-grid {
    grid-template-columns: 1fr;
  }

  .tp-flap-board--hero .tp-flap-card {
    width: 56px !important;
    height: 62px !important;
    font-size: 1.6rem !important;
  }
}




/* ==========================================================================
   v193 — 30s Alternating Bottom Widget: Concept 03 Offer Card <-> Tehranto Club
   (Tehranto Club Pill Matches Exact Height & Frame Size of Chat · Consult · Quote)
   ========================================================================== */

@keyframes tpFloatPanelEnter {
  0% {
    opacity: 0;
    transform: translateY(5px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tp-offer-float {
  left: clamp(1rem, 2.2vw, 2rem) !important;
  right: auto !important;
  bottom: clamp(1rem, 2.2vw, 2rem) !important;
  max-width: calc(100vw - 2rem) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
}

body.fa .tp-offer-float {
  left: auto !important;
  right: clamp(1rem, 2.2vw, 2rem) !important;
  align-items: flex-end !important;
}

.tp-offer-float.is-dismissed {
  opacity: 0 !important;
  transform: translateY(8px) scale(0.97) !important;
  pointer-events: none !important;
}

/* Panel visibility:
   - Desktop (> 640px): tehranto.club pill stacked independently above First-Order countdown
   - Mobile (<= 640px): single-slot 30s/30s alternation */
.tp-offer-float .tp-offer-float-card[hidden],
.tp-offer-float .tp-club-float-card[hidden] {
  display: none !important;
}

.tp-offer-float .tp-offer-float-card:not(.is-active) {
  display: none !important;
}

.tp-offer-float .tp-offer-float-card.is-active:not([hidden]) {
  display: flex !important;
  animation: tpFloatPanelEnter 0.24s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.tp-offer-float .tp-club-float-card {
  display: none !important;
  position: relative !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 214px;
  height: 54px;
  min-height: 54px;
  max-height: 54px;
  box-sizing: border-box !important;
  padding: 0 7px 0 8px !important;
  gap: 6px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(15, 44, 107, 0.13) !important;
  box-shadow:
    0 14px 34px rgba(8, 27, 67, 0.14),
    0 2px 6px rgba(15, 44, 107, 0.05) !important;
  direction: ltr !important;
  overflow: hidden !important;
}

body.fa .tp-offer-float .tp-club-float-card {
  direction: rtl !important;
  padding: 0 8px 0 7px !important;
}

.tp-offer-float .tp-club-float-card.is-active:not([hidden]) {
  display: inline-flex !important;
  animation: tpFloatPanelEnter 0.24s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

@media (min-width: 641px) {
  .tp-offer-float .tp-club-float-card:not([hidden]) {
    display: inline-flex !important;
  }
  .tp-offer-float .tp-offer-float-card:not([hidden]) {
    display: flex !important;
  }
}

.tp-offer-float .tp-club-float-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 40px !important;
  gap: 6px !important;
  text-decoration: none !important;
  color: #0f2c6b !important;
}

.tp-club-float-logo {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 50% !important;
  object-fit: contain !important;
  display: block !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 5px rgba(15, 44, 107, 0.12) !important;
}

.tp-club-float-cta {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 38px !important;
  padding: 2px 9px !important;
  gap: 2px !important;
  border-radius: 999px !important;
  background: #f6f5f1 !important;
  border: 1px solid #e2dfd7 !important;
  color: #0f2c6b !important;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
}

.tp-club-float-label {
  font-family: "Plus Jakarta Sans", -apple-system, sans-serif !important;
  font-size: 0.54rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: #64748b !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  transition: color 0.18s ease !important;
}

body.fa .tp-club-float-label {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-size: 0.55rem !important;
  letter-spacing: 0 !important;
}

.tp-club-float-domain {
  font-family: "Google Sans", "Plus Jakarta Sans", sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  color: #0f2c6b !important;
  white-space: nowrap !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  transition: color 0.18s ease !important;
}

.tp-club-float-link:hover .tp-club-float-cta,
.tp-club-float-link:focus-visible .tp-club-float-cta {
  background: linear-gradient(135deg, #0f2c6b 0%, #153c8d 100%) !important;
  border-color: #0f2c6b !important;
}

.tp-club-float-link:hover .tp-club-float-label,
.tp-club-float-link:focus-visible .tp-club-float-label {
  color: #f4dfab !important;
}

.tp-club-float-link:hover .tp-club-float-domain,
.tp-club-float-link:focus-visible .tp-club-float-domain {
  color: #ffffff !important;
}

.tp-club-float-close {
  appearance: none !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: #f6f5f1 !important;
  border: 1px solid #e2dfd7 !important;
  color: #4b5d7e !important;
  font-size: 0.9rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background 0.16s ease, color 0.16s ease !important;
}

.tp-club-float-close:hover,
.tp-club-float-close:focus-visible {
  background: #e9e5dc !important;
  color: #0f2c6b !important;
}

@media (max-width: 640px) {
  .tp-offer-float,
  body.fa .tp-offer-float {
    left: 0.75rem !important;
    right: auto !important;
    bottom: max(0.85rem, env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 78px) !important;
  }

  .tp-offer-float-card {
    width: min(268px, calc(100vw - 78px)) !important;
    padding: 9px 10px !important;
    gap: 6px !important;
    border-radius: 17px !important;
  }

  .tp-offer-float .tp-club-float-card {
    width: auto !important;
    max-width: calc(100vw - 78px) !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 6px 0 7px !important;
  }

  body.fa .tp-offer-float .tp-club-float-card {
    padding: 0 7px 0 6px !important;
  }

  .tp-offer-float .tp-club-float-link {
    height: 36px !important;
  }

  .tp-club-float-logo {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }

  .tp-club-float-cta {
    height: 34px !important;
    padding: 2px 8px !important;
  }

  .tp-offer-float-pill {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tp-offer-float .tp-offer-float-card.is-active,
  .tp-offer-float .tp-club-float-card.is-active {
    animation: none !important;
  }
}

/* --- AI Pillar Blog Editorial Figures, Comparison Matrix & Card Thumbnails (v193) --- */
.blog-card .tp-blog-card-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0d214f;
  border-bottom: 1px solid rgba(15, 44, 107, 0.1);
}

.blog-card .tp-blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog-card:hover .tp-blog-card-media img {
  transform: scale(1.035);
}

.tp-blog-figure {
  margin: 2rem 0 2.2rem;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(15, 44, 107, 0.14);
  box-shadow: 0 18px 42px rgba(15, 44, 107, 0.08);
}

.tp-blog-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 670;
  object-fit: cover;
  display: block;
}

.tp-blog-figure figcaption {
  padding: 0.82rem 1.15rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #4f5f7f;
  background: #f8fafd;
  border-top: 1px solid rgba(15, 44, 107, 0.08);
}

.tp-blog-matrix-wrap {
  margin: 1.8rem 0 2.2rem;
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid rgba(15, 44, 107, 0.15);
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 44, 107, 0.05);
}

.tp-blog-matrix {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.88rem;
  line-height: 1.55;
}

.tp-blog-matrix th,
.tp-blog-matrix td {
  padding: 0.88rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(15, 44, 107, 0.09);
}

body.fa .tp-blog-matrix th,
body.fa .tp-blog-matrix td {
  text-align: right;
}

.tp-blog-matrix thead th {
  background: linear-gradient(135deg, #0f2c6b 0%, #153c8d 100%);
  color: #ffffff;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  border-bottom: 0;
}

body.fa .tp-blog-matrix thead th {
  font-family: "Shabnam", Tahoma, sans-serif;
}

.tp-blog-matrix tbody tr:nth-child(even) td {
  background: #f9fbfd;
}

.tp-blog-matrix tbody tr:last-child td {
  border-bottom: 0;
}

.tp-blog-matrix td strong {
  color: #0f2c6b;
}

.tp-blog-prompt-card {
  margin: 1.6rem 0;
  padding: 1.25rem 1.35rem;
  border-radius: 16px;
  background: linear-gradient(160deg, #0c2254 0%, #103274 100%);
  border: 1px solid rgba(125, 211, 230, 0.35);
  color: #eaf6fc;
  box-shadow: 0 14px 32px rgba(10, 31, 77, 0.16);
}

.tp-blog-prompt-card h3 {
  margin: 0 0 0.55rem !important;
  font-size: 1.04rem !important;
  color: #8ce6f8 !important;
}

.tp-blog-prompt-card p {
  margin: 0.45rem 0 0 !important;
  color: rgba(235, 246, 255, 0.92) !important;
  font-size: 0.92rem !important;
  line-height: 1.68 !important;
}

/* ==========================================================================
   v194 — Google Workspace & Store UI Design System
   Applied to /web-apps, /web-design, and /ads (EN + /fa/*)
   Harmonized with Tehranto Navy (#0f2c6b), Royal (#0b57d0), and Cyan (#2bb8d4)
   ========================================================================== */

body.tp-gsys-page {
  --tp-g-royal: #0b57d0;
  --tp-g-royal-hover: #0842a0;
  --tp-g-royal-soft: #e8f0fe;
  --tp-g-navy: #0f2c6b;
  --tp-g-cyan: #2bb8d4;
  --tp-g-cyan-deep: #0e7490;
  --tp-g-surface: #ffffff;
  --tp-g-bento: #f8fafd;
  --tp-g-bento-alt: #f2f6fc;
  --tp-g-border: #e2e8f0;
  --tp-g-border-strong: #cbd5e1;
  --tp-g-ink: #0f172a;
  --tp-g-ink-soft: #475569;
  --tp-g-muted: #64748b;
  background: #ffffff;
  color: var(--tp-g-ink);
}

/* 1. Hero Canvas & Shared Lockup */
body.tp-gsys-page :is(header.wa-ent-hero, header.web-design-hero, header.ads-hero) {
  position: relative;
  overflow: hidden;
  padding: clamp(6.9rem, 9vw, 8.15rem) 0 clamp(2.4rem, 4vw, 3.2rem) !important;
  background:
    radial-gradient(circle at 74% 34%, rgba(43, 184, 212, 0.15) 0%, rgba(11, 87, 208, 0.07) 36%, rgba(255, 255, 255, 0) 68%),
    linear-gradient(180deg, #ffffff 0%, #f7faff 76%, #ffffff 100%) !important;
  border-bottom: 1px solid var(--tp-g-border) !important;
}

body.tp-gsys-page.fa :is(header.wa-ent-hero, header.web-design-hero, header.ads-hero) {
  background:
    radial-gradient(circle at 26% 34%, rgba(43, 184, 212, 0.15) 0%, rgba(11, 87, 208, 0.07) 36%, rgba(255, 255, 255, 0) 68%),
    linear-gradient(180deg, #ffffff 0%, #f7faff 76%, #ffffff 100%) !important;
}

body.tp-gsys-page .wa-ent-hero::before {
  opacity: 0.45;
}

.tp-g-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  max-width: 100%;
  min-width: 0;
}

.tp-g-hero-split > * {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 1024px) {
  .tp-g-hero-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
  }
}

.tp-g-lockup {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 1.1rem;
}

.tp-g-lockup-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8f0fe;
  border: 1px solid rgba(11, 87, 208, 0.14);
  box-shadow: 0 4px 12px rgba(15, 44, 107, 0.06);
  flex-shrink: 0;
}

.tp-g-lockup-icon.is-sky {
  background: #e0f2fe;
  border-color: rgba(2, 132, 199, 0.18);
}

.tp-g-lockup-icon.is-indigo {
  background: #f7f5f0;
  border-color: #c9c2b4;
}

.tp-g-lockup-icon.is-gold,
.tp-g-lockup-icon.is-emerald {
  background: #fdf2d6;
  border-color: rgba(209, 154, 53, 0.45);
}

.tp-g-lockup-name {
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tp-g-navy);
}

body.fa .tp-g-lockup-name {
  font-family: "Shabnam", Tahoma, sans-serif;
  letter-spacing: 0;
}

.tp-g-lockup-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.24rem 0.72rem;
  border-radius: 999px;
  background: var(--tp-g-royal-soft);
  color: var(--tp-g-royal);
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
}

body.fa .tp-g-lockup-badge {
  font-family: "Shabnam", Tahoma, sans-serif;
}

body.tp-gsys-page :is(.wa-ent-title, .web-design-hero h1, .ads-hero h1) {
  margin: 0 !important;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: clamp(2.25rem, 4.3vw, 3.45rem) !important;
  font-weight: 700 !important;
  line-height: 1.11 !important;
  letter-spacing: -0.028em !important;
  color: #0f172a !important;
  text-wrap: balance;
}

body.tp-gsys-page.fa :is(.wa-ent-title, .web-design-hero h1, .ads-hero h1) {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  letter-spacing: 0 !important;
  line-height: 1.36 !important;
}

body.tp-gsys-page :is(.wa-ent-title em, .web-design-hero h1 em, .ads-hero h1 em) {
  font-style: normal !important;
  color: var(--tp-g-royal) !important;
}

body.tp-gsys-page :is(.wa-ent-lead, .web-design-hero .lead, .ads-hero .lead) {
  margin: 1.05rem 0 0 !important;
  max-width: 58ch !important;
  font-size: 1.02rem !important;
  line-height: 1.68 !important;
  color: var(--tp-g-ink-soft) !important;
}

/* Google Workspace Pill CTAs */
.tp-g-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.78rem;
  margin-top: 1.65rem !important;
}

.tp-g-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.78rem 1.55rem;
  border-radius: 999px;
  background: var(--tp-g-royal) !important;
  color: #ffffff !important;
  border: 1px solid var(--tp-g-royal) !important;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(11, 87, 208, 0.22);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.tp-g-btn-primary:hover {
  background: var(--tp-g-royal-hover) !important;
  border-color: var(--tp-g-royal-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(11, 87, 208, 0.28);
}

.tp-g-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.78rem 1.48rem;
  border-radius: 999px;
  background: #ffffff !important;
  color: var(--tp-g-royal) !important;
  border: 1px solid var(--tp-g-border-strong) !important;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.tp-g-btn-outline:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: var(--tp-g-navy) !important;
}

body.fa :is(.tp-g-btn-primary, .tp-g-btn-outline) {
  font-family: "Shabnam", Tahoma, sans-serif;
}

/* Google Drive Vertical Active-Bar Interactive Tabs */
.tp-g-vtabs {
  display: grid;
  gap: 0.38rem;
  margin-top: 1.75rem;
  max-width: 540px;
}

.tp-g-vtab {
  appearance: none;
  width: 100%;
  text-align: start;
  background: transparent;
  border: 0;
  border-inline-start: 3px solid #dbe3ef;
  border-start-end-radius: 14px;
  border-end-end-radius: 14px;
  padding: 0.68rem 1rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.tp-g-vtab:hover {
  background: rgba(11, 87, 208, 0.035);
}

.tp-g-vtab.is-active {
  border-inline-start-color: var(--tp-g-royal);
  background: rgba(11, 87, 208, 0.055);
}

.tp-g-vtab:focus-visible {
  outline: 2px solid var(--tp-g-royal);
  outline-offset: 2px;
}

.tp-g-vtab-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.tp-g-vtab-title {
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #334155;
  transition: color 0.18s ease;
}

body.fa .tp-g-vtab-title {
  font-family: "Shabnam", Tahoma, sans-serif;
}

.tp-g-vtab.is-active .tp-g-vtab-title {
  color: var(--tp-g-royal);
}

.tp-g-vtab-tag {
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.14rem 0.52rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  color: #475569;
  white-space: nowrap;
  flex-shrink: 0;
}

.tp-g-vtab.is-active .tp-g-vtab-tag {
  background: #e8f0fe;
  border-color: rgba(11, 87, 208, 0.22);
  color: var(--tp-g-royal);
}

.tp-g-vtab-desc {
  display: none;
  margin-top: 0.34rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #475569;
}

.tp-g-vtab.is-active .tp-g-vtab-desc {
  display: block;
}

/* 2. HERO A (/web-apps): Interactive Orbital Software Architecture Hub */
body.tp-gsys-page .wa-arch-card.tp-g-orbit-stage {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0.5rem 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tp-g-orbit-wheel {
  position: relative;
  width: 404px;
  height: 404px;
  margin: 0.5rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tp-g-orbit-ring-outer {
  position: absolute;
  inset: 14px;
  border-radius: 9999px;
  border: 1.5px dashed rgba(11, 87, 208, 0.22);
  background: radial-gradient(circle, rgba(232, 240, 254, 0.36) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.tp-g-orbit-ring-inner {
  position: absolute;
  inset: 68px;
  border-radius: 9999px;
  border: 1.5px solid rgba(43, 184, 212, 0.3);
  background: radial-gradient(circle, rgba(43, 184, 212, 0.08) 0%, rgba(255, 255, 255, 0.5) 75%);
  pointer-events: none;
}

.tp-g-orbit-core {
  position: relative;
  z-index: 3;
  width: 118px;
  height: 118px;
  border-radius: 9999px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 44px -10px rgba(15, 44, 107, 0.18), 0 2px 10px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem;
}

.tp-g-orbit-core-label {
  margin-top: 0.32rem;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tp-g-navy);
}

.tp-g-orbit-core-sub {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--tp-g-cyan-deep);
}

.tp-g-orbit-node {
  position: absolute;
  z-index: 4;
  appearance: none;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 0.48rem 0.78rem;
  box-shadow: 0 10px 26px -8px rgba(15, 44, 107, 0.14), 0 2px 6px rgba(15, 23, 42, 0.04);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  direction: ltr;
  text-align: left;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

.tp-g-orbit-node:hover {
  border-color: #93c5fd;
  box-shadow: 0 14px 30px -8px rgba(11, 87, 208, 0.2);
}

.tp-g-orbit-node.is-active {
  border-color: var(--tp-g-royal);
  box-shadow: 0 16px 34px -6px rgba(11, 87, 208, 0.26);
}

.tp-g-orbit-node:focus-visible {
  outline: 2px solid var(--tp-g-royal);
  outline-offset: 2px;
}

/* 6 balanced orbital node positions */
.tp-g-orbit-node.pos-top {
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
}
.tp-g-orbit-node.pos-top.is-active {
  transform: translateX(-50%) scale(1.07);
}
.tp-g-orbit-node.pos-tr {
  top: 56px;
  right: -12px;
}
.tp-g-orbit-node.pos-tr.is-active {
  transform: scale(1.07);
}
.tp-g-orbit-node.pos-br {
  bottom: 56px;
  right: -12px;
}
.tp-g-orbit-node.pos-br.is-active {
  transform: scale(1.07);
}
.tp-g-orbit-node.pos-bottom {
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
}
.tp-g-orbit-node.pos-bottom.is-active {
  transform: translateX(-50%) scale(1.07);
}
.tp-g-orbit-node.pos-bl {
  bottom: 56px;
  left: -12px;
}
.tp-g-orbit-node.pos-bl.is-active {
  transform: scale(1.07);
}
.tp-g-orbit-node.pos-tl {
  top: 56px;
  left: -12px;
}
.tp-g-orbit-node.pos-tl.is-active {
  transform: scale(1.07);
}

.tp-g-node-ico {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
}
.tp-g-node-ico.c-blue { background: #0b57d0; }
.tp-g-node-ico.c-indigo { background: #56524a; }
.tp-g-node-ico.c-sky { background: #15809b; }
.tp-g-node-ico.c-emerald { background: #b07a1c; }
.tp-g-node-ico.c-cyan { background: #2bb8d4; }
.tp-g-node-ico.c-navy { background: #0f2c6b; }

.tp-g-node-txt strong {
  display: block;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.15;
  color: #0f172a;
  white-space: nowrap;
}

.tp-g-node-txt span {
  display: block;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tp-g-royal);
  white-space: nowrap;
}

.tp-g-orbit-livecard {
  width: 100%;
  max-width: 440px;
  margin: 1rem auto 0;
  padding: 0.95rem 1.2rem;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 18px 42px -12px rgba(15, 44, 107, 0.16), 0 2px 8px rgba(15, 23, 42, 0.04);
}

.tp-g-orbit-panel {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
}

.tp-g-orbit-panel.is-active {
  display: flex;
}

.tp-g-orbit-panel-kicker {
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tp-g-royal);
}

body.fa .tp-g-orbit-panel-kicker {
  font-family: "Shabnam", Tahoma, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.74rem;
}

.tp-g-orbit-panel-title {
  margin-top: 0.18rem;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f172a;
}

body.fa .tp-g-orbit-panel-title {
  font-family: "Shabnam", Tahoma, sans-serif;
}

.tp-g-orbit-panel-sub {
  margin-top: 0.16rem;
  font-size: 0.76rem;
  color: #64748b;
}

.tp-g-orbit-panel-badge {
  padding: 0.48rem 0.85rem;
  border-radius: 12px;
  background: #eef4ff;
  color: var(--tp-g-royal);
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
  direction: ltr;
}

@media (max-width: 640px) {
  .tp-g-orbit-wheel {
    width: 300px;
    height: 300px;
  }
  .tp-g-orbit-ring-outer {
    inset: 12px;
  }
  .tp-g-orbit-ring-inner {
    inset: 52px;
  }
  .tp-g-orbit-core {
    width: 90px;
    height: 90px;
  }
  .tp-g-orbit-node {
    padding: 0.36rem 0.56rem;
    border-radius: 13px;
    gap: 0.4rem;
  }
  .tp-g-node-ico {
    width: 26px;
    height: 26px;
    border-radius: 8px;
  }
  .tp-g-node-ico svg {
    width: 13px;
    height: 13px;
  }
  .tp-g-node-txt strong {
    font-size: 0.68rem;
  }
  .tp-g-node-txt span {
    font-size: 0.6rem;
  }
  .tp-g-orbit-node.pos-tr,
  .tp-g-orbit-node.pos-br {
    right: -14px;
  }
  .tp-g-orbit-node.pos-tl,
  .tp-g-orbit-node.pos-bl {
    left: -14px;
  }
  .tp-g-orbit-node.pos-tr,
  .tp-g-orbit-node.pos-tl {
    top: 40px;
  }
  .tp-g-orbit-node.pos-br,
  .tp-g-orbit-node.pos-bl {
    bottom: 40px;
  }
}

/* 3. HERO B (/web-design): Google-Store Layered Browser & Responsive/SEO Studio */
.tp-g-studio-wrap {
  position: relative;
  max-width: min(540px, 100%);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0.75rem 0;
}

.tp-g-sky-frame {
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
  padding: 1.15rem;
  border-radius: 28px;
  background: linear-gradient(145deg, #e8f2ff 0%, #dff5fb 100%);
  border: 1.5px solid #cbd5e1;
  box-shadow: 0 22px 48px -22px rgba(15, 44, 107, 0.12);
}

.tp-g-window {
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  padding: 1.1rem 1.15rem 1.2rem;
  box-shadow: 0 18px 44px -16px rgba(15, 44, 107, 0.14);
}

.tp-g-window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding-bottom: 0.78rem;
  margin-bottom: 0.95rem;
  border-bottom: 1px solid #f1f5f9;
  direction: ltr;
}

.tp-g-window-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tp-g-window-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.tp-g-window-dots span:nth-child(1) { background: #dc2626; }
.tp-g-window-dots span:nth-child(2) { background: #d19a35; }
.tp-g-window-dots span:nth-child(3) { background: #2bb8d4; }

.tp-g-window-url {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.26rem 0.78rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
}

.tp-g-window-lang {
  padding: 0.22rem 0.62rem;
  border-radius: 999px;
  background: #e8f0fe;
  color: var(--tp-g-royal);
  font-family: "Google Sans", "Shabnam", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
}

.tp-g-studio-panel {
  display: none;
  gap: 0.75rem;
}

.tp-g-studio-panel.is-active {
  display: grid;
}

.tp-g-mini-bento-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.68rem;
}

@media (max-width: 480px) {
  .tp-g-mini-bento-pair {
    grid-template-columns: 1fr;
  }
}

.tp-g-mini-card {
  padding: 0.85rem 0.92rem;
  border-radius: 16px;
  background: #f8fafd;
  border: 1px solid #e2e8f0;
}

.tp-g-mini-card.is-highlight {
  background: linear-gradient(145deg, #eff6ff 0%, #ecfeff 100%);
  border-color: #bfdbfe;
}

.tp-g-mini-kicker {
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tp-g-royal);
}

body.fa .tp-g-mini-kicker {
  font-family: "Shabnam", Tahoma, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.72rem;
}

.tp-g-mini-price {
  margin-top: 0.25rem;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 1.42rem;
  font-weight: 800;
  line-height: 1.1;
  color: #0f172a;
  direction: ltr;
}

.tp-g-mini-price small {
  font-size: 0.74rem;
  font-weight: 600;
  color: #64748b;
}

.tp-g-mini-note {
  margin-top: 0.25rem;
  font-size: 0.74rem;
  line-height: 1.45;
  color: #475569;
}

.tp-g-serp-card {
  padding: 0.85rem 0.95rem;
  border-radius: 16px;
  background: #f8fafd;
  border: 1px solid #e2e8f0;
  direction: ltr;
  text-align: left;
}

.tp-g-serp-card.is-ai {
  background: linear-gradient(135deg, #eef4ff 0%, #edfcf9 100%);
  border-color: #bae6fd;
}

.tp-g-serp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--tp-g-royal);
}

.tp-g-serp-title {
  margin-top: 0.22rem;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  color: #0f2c6b;
}

.tp-g-serp-desc {
  margin-top: 0.18rem;
  font-size: 0.73rem;
  line-height: 1.45;
  color: #475569;
}

.tp-g-vitals-float {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.8rem;
  padding: 0.72rem 0.95rem;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 26px -10px rgba(15, 44, 107, 0.12);
}

.tp-g-vitals-left {
  display: flex;
  align-items: center;
  gap: 0.68rem;
}

.tp-g-vitals-ring {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 3.5px solid #d19a35;
  background: #fdf2d6;
  color: #7a5910;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  direction: ltr;
}

.tp-g-vitals-copy strong {
  display: block;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #0f172a;
}

body.fa .tp-g-vitals-copy strong {
  font-family: "Shabnam", Tahoma, sans-serif;
}

.tp-g-vitals-copy > span {
  display: block;
  font-size: 0.72rem;
  color: #64748b;
}

.tp-g-shield-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.68rem;
  border-radius: 999px;
  background: #0f2c6b;
  color: #ffffff;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.69rem;
  font-weight: 700;
  white-space: nowrap;
}

body.fa .tp-g-shield-pill {
  font-family: "Shabnam", Tahoma, sans-serif;
}

/* 4. HERO C (/ads): Interactive Full-Funnel Google + Meta Attribution Cockpit */
.tp-g-seg-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  padding: 0.3rem;
  border-radius: 14px;
  background: #f1f5f9;
  margin-bottom: 0.9rem;
}

.tp-g-seg-btn {
  appearance: none;
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: 0.5rem 0.45rem;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  text-align: center;
}

body.fa .tp-g-seg-btn {
  font-family: "Shabnam", Tahoma, sans-serif;
}

.tp-g-seg-btn.is-active {
  background: #ffffff;
  color: var(--tp-g-royal);
  box-shadow: 0 2px 8px rgba(15, 44, 107, 0.1);
}

.tp-g-seg-btn:focus-visible {
  outline: 2px solid var(--tp-g-royal);
  outline-offset: 2px;
}

.tp-g-funnel-step {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.78rem 0.9rem;
  border-radius: 15px;
  background: #f8fafd;
  border: 1px solid #e2e8f0;
}

.tp-g-funnel-step.is-gold,
.tp-g-funnel-step.is-emerald {
  background: linear-gradient(160deg, #fdf2d6 0%, #f4dfab 100%);
  border-color: #d19a35;
}

.tp-g-funnel-step.is-navy {
  background: linear-gradient(160deg, #edfafc 0%, #d0edf4 100%);
  border-color: #5fb7cc;
}

.tp-g-mini-card.is-gold {
  background: linear-gradient(160deg, #fdf2d6 0%, #f4dfab 100%);
  border-color: #d19a35;
}

.tp-g-mini-card.is-gold .tp-g-mini-kicker {
  color: #7a5910;
}

.tp-g-funnel-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.58rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(15, 44, 107, 0.14);
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  color: #0f2c6b;
  white-space: nowrap;
  flex-shrink: 0;
  direction: ltr;
}

.tp-g-funnel-left {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.tp-g-funnel-num {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #e8f0fe;
  color: var(--tp-g-royal);
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  direction: ltr;
}

.tp-g-funnel-step.is-gold .tp-g-funnel-num,
.tp-g-funnel-step.is-emerald .tp-g-funnel-num {
  background: #b07a1c;
  color: #ffffff;
}

.tp-g-funnel-step.is-navy .tp-g-funnel-num {
  background: #0f2c6b;
  color: #ffffff;
}

.tp-g-funnel-copy strong {
  display: block;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  color: #0f172a;
}

body.fa .tp-g-funnel-copy strong {
  font-family: "Shabnam", Tahoma, sans-serif;
}

.tp-g-funnel-copy > span {
  display: block;
  margin-top: 0.14rem;
  font-size: 0.74rem;
  line-height: 1.45;
  color: #475569;
}

.tp-g-funnel-pill {
  padding: 0.24rem 0.58rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  color: #0f2c6b;
  white-space: nowrap;
  direction: ltr;
}

/* 5. Shared Google Pill Subnav Bar at Bottom of Hero */
.tp-g-pillbar-wrap {
  margin-top: clamp(1.85rem, 3vw, 2.5rem);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.tp-g-pillbar {
  width: 100%;
  max-width: min(1120px, 100%);
  min-width: 0;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0.42rem 0.55rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 30px -12px rgba(15, 44, 107, 0.11), 0 2px 6px rgba(15, 23, 42, 0.03);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tp-g-pillbar::-webkit-scrollbar {
  display: none;
}

.tp-g-pillbar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.48rem 0.95rem;
  border-radius: 999px;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease;
}

body.fa .tp-g-pillbar a {
  font-family: "Shabnam", Tahoma, sans-serif;
}

.tp-g-pillbar a:hover {
  background: #f1f5f9;
  color: #0f2c6b;
}

.tp-g-pillbar a.is-primary {
  background: #e8f0fe;
  color: var(--tp-g-royal);
  font-weight: 700;
}

/* 6. Selected Business Websites Strip (/web-design Hero) & Ads Highlights (/ads Hero) */
body.tp-gsys-page .website-projects.website-projects--hero {
  margin-top: 2.25rem !important;
  padding: 1.45rem 1.55rem !important;
  border-radius: 26px !important;
  background: #f8fafd !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 14px 36px -18px rgba(15, 44, 107, 0.09) !important;
}

body.tp-gsys-page .website-projects--hero .tp-portfolio-group {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

body.tp-gsys-page .website-projects--hero .website-projects-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)) !important;
  gap: 0.7rem !important;
}

body.tp-gsys-page .website-projects--hero .website-project-link {
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  padding: 0.72rem 0.95rem !important;
  box-shadow: 0 4px 12px rgba(15, 44, 107, 0.03) !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

body.tp-gsys-page .website-projects--hero .website-project-link:hover {
  transform: translateY(-2px) !important;
  border-color: #93c5fd !important;
  box-shadow: 0 12px 24px -10px rgba(11, 87, 208, 0.16) !important;
}

body.tp-gsys-page .tp-ads-hero-highlights {
  margin-top: 1.65rem !important;
  padding: 1.1rem 1.15rem !important;
  border-radius: 22px !important;
  background: #f8fafd !important;
  border: 1px solid #e2e8f0 !important;
}

body.tp-gsys-page .tp-ads-hero-row {
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

body.tp-gsys-page .tp-ads-hero-row:hover {
  border-color: #93c5fd !important;
  background: #f8fbff !important;
}

/* 7. Unified Google-Store Bento Body Sections across /web-apps, /web-design, /ads */
body.tp-gsys-page main > section,
body.tp-gsys-page > section {
  padding: clamp(4rem, 6vw, 5.25rem) 0 !important;
  background: #ffffff !important;
  border-bottom: 1px solid #eef2f7;
}

body.tp-gsys-page main > section:nth-of-type(even),
body.tp-gsys-page > section.soft {
  background: #f8fafd !important;
}

/* Eyebrow pills in Google Workspace style */
body.tp-gsys-page :is(.eyebrow, .wa-sec-eyebrow) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.48rem !important;
  padding: 0.32rem 0.85rem !important;
  border-radius: 999px !important;
  background: #e8f0fe !important;
  border: 1px solid rgba(11, 87, 208, 0.14) !important;
  color: var(--tp-g-royal) !important;
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.95rem !important;
}

body.tp-gsys-page .eyebrow::before {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--tp-g-royal) !important;
}

body.tp-gsys-page.fa :is(.eyebrow, .wa-sec-eyebrow) {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 0.8rem !important;
}

body.tp-gsys-page :is(section h2, .wa-sec-h2) {
  color: #0f172a !important;
  letter-spacing: -0.025em !important;
}

body.tp-gsys-page.fa :is(section h2, .wa-sec-h2) {
  letter-spacing: 0 !important;
}

body.tp-gsys-page :is(section h2 em, .wa-sec-h2 em) {
  font-style: normal !important;
  color: var(--tp-g-royal) !important;
}

/* Google Bento Pricing Cards on /web-design & /ads */
body.tp-gsys-page .cards {
  gap: 1.35rem !important;
}

body.tp-gsys-page .pcard {
  background: #f8fafd !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 26px !important;
  padding: 2rem 1.85rem !important;
  box-shadow: 0 12px 32px -16px rgba(15, 44, 107, 0.08) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

body.tp-gsys-page .pcard:hover {
  transform: translateY(-3px) !important;
  border-color: #93c5fd !important;
  box-shadow: 0 22px 44px -16px rgba(11, 87, 208, 0.15) !important;
}

body.tp-gsys-page .pcard.t-silver {
  background: linear-gradient(160deg, #f7f5f0 0%, #e9e5dc 100%) !important;
  border-color: #c9c2b4 !important;
  color: #0a1f4d !important;
}

body.tp-gsys-page .pcard.t-silver .pc-price,
body.tp-gsys-page .pcard.t-silver .pc-price .cur {
  color: #56524a !important;
}

body.tp-gsys-page .pcard.t-silver .pc-price sup {
  color: #7a756a !important;
}

body.tp-gsys-page .pcard.t-gold {
  background: linear-gradient(160deg, #fdf2d6 0%, #f4dfab 100%) !important;
  border-color: #d19a35 !important;
  color: #0a1f4d !important;
}

body.tp-gsys-page .pcard.t-gold :is(.pc-desc, .tp-ads-setup-note, .tp-ads-card-list li, .pc-features li) {
  color: #2a3f6b !important;
}

body.tp-gsys-page .pcard.t-gold .pc-price,
body.tp-gsys-page .pcard.t-gold .pc-price .cur {
  color: #7a5910 !important;
}

body.tp-gsys-page .pcard.t-gold .pc-price sup,
body.tp-gsys-page .pcard.t-gold .pc-price .unit {
  color: #b07a1c !important;
}

body.tp-gsys-page .pcard.t-diamond {
  background: linear-gradient(160deg, #edfafc 0%, #d0edf4 100%) !important;
  border-color: #5fb7cc !important;
  color: #0a1f4d !important;
}

body.tp-gsys-page .pcard.t-diamond .pc-price,
body.tp-gsys-page .pcard.t-diamond .pc-price .cur {
  color: #0d5970 !important;
}

body.tp-gsys-page .pcard.t-diamond .pc-price sup {
  color: #15809b !important;
}

body.tp-gsys-page .pcard.t-signature {
  background: linear-gradient(160deg, #0f2c6b 0%, #10506b 100%) !important;
  border-color: #0f2c6b !important;
  color: #ffffff !important;
}

body.tp-gsys-page .pcard.t-signature :is(.pc-desc, .tp-ads-setup-note, .tp-ads-card-list li, .pc-features li) {
  color: rgba(241, 245, 255, 0.92) !important;
}

body.tp-gsys-page .pcard.t-signature .pc-price,
body.tp-gsys-page .pcard.t-signature .pc-price .cur {
  color: #ffffff !important;
}

body.tp-gsys-page .pcard.t-signature .pc-price sup,
body.tp-gsys-page .pcard.t-signature .pc-price .unit {
  color: #7dd3e6 !important;
}

body.tp-gsys-page .pcard .pc-name {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #dbe3ef;
  color: var(--tp-g-royal) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

body.tp-gsys-page .pcard.t-silver .pc-name {
  background: #e6e2d8;
  border-color: #c9c2b4;
  color: #56524a !important;
}

body.tp-gsys-page .pcard.t-gold .pc-name {
  background: #f1dca1;
  border-color: #d19a35;
  color: #7a5910 !important;
}

body.tp-gsys-page .pcard.t-diamond .pc-name {
  background: #c6e8f0;
  border-color: #5fb7cc;
  color: #0d5970 !important;
}

body.tp-gsys-page .pcard.t-signature .pc-name {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(125, 211, 230, 0.45);
  color: #ffffff !important;
}

/* Google Bento Feature Cards (.feats / .feat) */
body.tp-gsys-page .feats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)) !important;
  gap: 1.15rem !important;
  margin-top: 2rem !important;
}

body.tp-gsys-page .feat {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 24px !important;
  padding: 1.6rem 1.5rem !important;
  box-shadow: 0 10px 28px -16px rgba(15, 44, 107, 0.08) !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body.tp-gsys-page .feat:hover {
  transform: translateY(-2px);
  border-color: #bfdbfe !important;
  box-shadow: 0 18px 36px -14px rgba(15, 44, 107, 0.12) !important;
}

body.tp-gsys-page .feat .f-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #e8f0fe;
  color: var(--tp-g-royal) !important;
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  margin-bottom: 0.65rem;
}

/* Web-Apps Trust Strip, Capabilities, Industries, Compare & 4-Phase Bento Refinement */
body.tp-gsys-page .wa-trust-strip {
  gap: 1rem !important;
  margin-top: 2rem !important;
}

body.tp-gsys-page .wa-trust-item {
  border-radius: 22px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 26px -16px rgba(15, 44, 107, 0.08) !important;
}

body.tp-gsys-page .wa-cap-card {
  background: #f8fafd !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 26px !important;
  box-shadow: 0 10px 28px -16px rgba(15, 44, 107, 0.07) !important;
}

body.tp-gsys-page .wa-cap-card::before {
  display: none !important;
}

body.tp-gsys-page .wa-cap-card:hover {
  border-color: #93c5fd !important;
  background: #ffffff !important;
  box-shadow: 0 20px 42px -16px rgba(11, 87, 208, 0.14) !important;
}

body.tp-gsys-page .wa-cap-icon {
  background: #e8f0fe !important;
  border-color: rgba(11, 87, 208, 0.16) !important;
}

body.tp-gsys-page .wa-cap-icon svg {
  stroke: var(--tp-g-royal) !important;
}

body.tp-gsys-page .wa-ind-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 22px !important;
  padding: 1.4rem !important;
}

body.tp-gsys-page .wa-ind-icon {
  background: #e8f0fe !important;
  color: var(--tp-g-royal) !important;
  box-shadow: none !important;
}

body.tp-gsys-page .wa-compare-col {
  border-radius: 26px !important;
}

.wa-compare-col.is-legacy,
body.tp-gsys-page .wa-compare-col.is-legacy {
  background: linear-gradient(160deg, #fdf7e7 0%, #f7e6bc 100%) !important;
  border: 1.5px solid #d19a35 !important;
  box-shadow: 0 16px 38px -22px rgba(122, 89, 16, 0.2) !important;
}

.wa-compare-col.is-legacy .wa-compare-badge {
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid #d19a35 !important;
  color: #6e4e0a !important;
}

.wa-compare-col.is-legacy h3 {
  color: #0f2c6b !important;
}

.wa-compare-col.is-legacy li {
  color: #3f3112 !important;
}

.wa-compare-col.is-legacy .wa-cmp-mark {
  background: #f1dca1 !important;
  border: 1px solid #d19a35 !important;
  color: #6e4e0a !important;
}

.wa-compare-col.is-custom,
body.tp-gsys-page .wa-compare-col.is-custom {
  border: 1.5px solid #0f2c6b !important;
  box-shadow: 0 22px 48px -22px rgba(15, 44, 107, 0.22) !important;
}

body.tp-gsys-page .wa-step-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-top: 1px solid #e2e8f0 !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 26px -16px rgba(15, 44, 107, 0.08) !important;
}

body.tp-gsys-page .wa-step-num {
  display: inline-flex;
  padding: 0.24rem 0.68rem;
  border-radius: 999px;
  background: #e8f0fe;
  color: var(--tp-g-royal) !important;
}

/* Editorial + Architecture Bento Split ("Built to be found" & "Reach people ready to buy") */
.tp-g-editorial-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(1.5rem, 3vw, 2.4rem);
  align-items: stretch;
  margin-top: 1.5rem;
}

@media (max-width: 940px) {
  .tp-g-editorial-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tp-g-editorial-grid div.prose,
.tp-g-editorial-grid div.prose.tp-prose-editorial-stack {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 0.95rem !important;
}

.tp-g-editorial-grid div.prose > p {
  margin: 0 !important;
  padding: 1.25rem 1.45rem !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 26px -18px rgba(15, 44, 107, 0.08) !important;
  font-size: 0.96rem !important;
  line-height: 1.68 !important;
  color: #334155 !important;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}

.tp-g-editorial-grid div.prose > p a {
  color: #0d5970;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tp-g-stack-card {
  background: #f8fafd;
  border: 1px solid #e2e8f0;
  border-radius: 26px;
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.8rem;
}

.tp-g-stack-row {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 0.95rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1 1 auto;
}

.tp-g-stack-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #eaf7fb;
  border: 1px solid #9bd6e5;
  color: #0d5970;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  margin: 0 !important;
  line-height: 1 !important;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
}

.tp-g-stack-row strong {
  display: block;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f172a;
}

body.fa .tp-g-stack-row strong {
  font-family: "Shabnam", Tahoma, sans-serif;
}

.tp-g-stack-row > div > span {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.82rem;
  line-height: 1.52;
  color: #475569;
}

body:not(.fa) .lang-fa,
body.fa .lang-en {
  display: none !important;
}

/* Ads Compare Bento Cards */
body.tp-gsys-page .tp-ads-compare-card {
  background: #f8fafd !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 28px -16px rgba(15, 44, 107, 0.08) !important;
}

/* FAQ Accordion Bento Cards — Full-Width 2-Column Standard Container Grid */
body.tp-gsys-page .faq {
  max-width: 100% !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem 1.35rem !important;
  align-items: start !important;
}

@media (max-width: 860px) {
  body.tp-gsys-page .faq {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.85rem !important;
  }
}

body.tp-gsys-page .faq details,
body.tp-gsys-page .tp-faq-item {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 1.15rem 1.4rem !important;
  box-shadow: 0 6px 18px -12px rgba(15, 44, 107, 0.06) !important;
}

body.tp-gsys-page .faq details[open],
body.tp-gsys-page .tp-faq-item[open] {
  border-color: #cbd5e1 !important;
  box-shadow: 0 12px 26px -14px rgba(15, 44, 107, 0.09) !important;
}

/* Cross-sell & Structured Bento Guide Grid */
body.tp-gsys-page .cross a {
  background: #f8fafd !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 22px !important;
  box-shadow: none !important;
}

body.tp-gsys-page .cross a:hover {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 14px 28px -16px rgba(15, 44, 107, 0.1) !important;
}

body.tp-gsys-page .guide.tp-g-guide-bento {
  max-width: 100% !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  margin-top: 1.85rem !important;
  align-items: stretch !important;
}

@media (max-width: 1179px) {
  body.tp-gsys-page .guide.tp-g-guide-bento {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.tp-gsys-page .guide.tp-g-guide-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  body.tp-gsys-page .guide.tp-g-guide-bento {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

body.tp-gsys-page .tp-g-guide-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  padding: 1.4rem 1.25rem;
  box-shadow: 0 8px 24px -16px rgba(15, 44, 107, 0.07);
  display: flex;
  flex-direction: column;
}

body.tp-gsys-page .tp-g-guide-card h3 {
  margin-top: 0 !important;
  font-size: 1.06rem !important;
  line-height: 1.28 !important;
  color: #0f172a !important;
}

body.tp-gsys-page .tp-g-guide-card p {
  margin-top: 0.55rem !important;
  font-size: 0.88rem !important;
  line-height: 1.62 !important;
  color: #475569 !important;
}

body.tp-gsys-page .tp-g-guide-cta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1.15rem 1.5rem;
  border-radius: 20px;
  background: #f8fafd;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 24px -18px rgba(15, 44, 107, 0.07);
  color: #334155;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

body.tp-gsys-page .tp-g-guide-cta:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 14px 30px -18px rgba(15, 44, 107, 0.12);
}

body.tp-gsys-page .tp-g-guide-cta a {
  font-family: "Google Sans", "Roboto", sans-serif;
  font-weight: 700;
  color: #0f2c6b;
  text-decoration: none;
}

body.tp-gsys-page .tp-g-guide-cta a:hover {
  color: var(--tp-g-royal);
}

body.tp-gsys-page.fa .tp-g-guide-cta a {
  font-family: "Shabnam", Tahoma, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  .tp-g-orbit-node,
  .tp-g-vtab,
  .tp-g-btn-primary,
  .tp-g-btn-outline {
    transition: none !important;
  }
}

/* ==========================================================================
   v194: BOOK ONLINE — 100% DEFAULT vs 50% DEPOSIT SELECTOR,
   DISTINCT PAID CHECKOUT HUB, & RECIPROCAL CONSULT <-> BOOK ONLINE CARDS
   ========================================================================== */

.tp-payplan-box {
  margin-top: 1rem;
  margin-bottom: 0.9rem;
  padding: 0.85rem 0.9rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.tp-payplan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.58rem;
  flex-wrap: wrap;
}

.tp-payplan-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #cbd5e1;
}

body.fa .tp-payplan-label {
  letter-spacing: 0;
  text-transform: none;
}

.tp-payplan-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.16rem 0.52rem;
  border-radius: 999px;
  background: rgba(43, 184, 212, 0.16);
  border: 1px solid rgba(43, 184, 212, 0.34);
  color: #7ee3f5;
}

.tp-payplan-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.tp-payplan-btn {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.14rem;
  padding: 0.62rem 0.72rem;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  background: rgba(9, 24, 58, 0.55);
  color: #e2e8f0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

body.fa .tp-payplan-btn {
  align-items: flex-start;
  text-align: right;
}

.tp-payplan-btn:hover {
  border-color: rgba(126, 227, 245, 0.5);
  background: rgba(15, 44, 107, 0.8);
}

.tp-payplan-btn.is-active {
  background: linear-gradient(135deg, rgba(11, 87, 208, 0.42) 0%, rgba(43, 184, 212, 0.28) 100%);
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 6px 16px -6px rgba(43, 184, 212, 0.45);
}

.tp-payplan-pct {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #93c5fd;
}

.tp-payplan-btn.is-active .tp-payplan-pct {
  background: #38bdf8;
  color: #091d47;
}

.tp-payplan-name {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  color: #f8fafc;
}

.tp-payplan-amt {
  font-size: 0.92rem;
  font-weight: 800;
  color: #7ee3f5;
  letter-spacing: -0.01em;
}

.tp-payplan-note {
  margin: 0.58rem 0 0;
  padding: 0.48rem 0.65rem;
  border-radius: 10px;
  background: rgba(244, 223, 171, 0.16);
  border: 1px solid rgba(209, 154, 53, 0.45);
  font-size: 0.75rem;
  line-height: 1.48;
  color: #fdf2d6;
}

.tp-payplan-note strong {
  color: #ffffff;
}

/* Distinct Paid Service Booking & Stripe Checkout Hub (#checkout-session) */
.tp-booking-hub--pay {
  border: 2px solid #5fb7cc !important;
  background: linear-gradient(180deg, #edfafc 0%, #ffffff 34%) !important;
  box-shadow: 0 24px 56px -24px rgba(15, 44, 107, 0.22) !important;
}

.tp-cal-head--pay {
  padding-bottom: 1.15rem;
  border-bottom: 1px solid #c6e8f0;
}

.tp-cal-kicker.is-pay-kicker {
  background: #edfafc !important;
  color: #0d5970 !important;
  border: 1px solid #5fb7cc !important;
}

.tp-cal-live-dot.is-pay-dot {
  background: #15809b !important;
  box-shadow: 0 0 0 3px rgba(43, 184, 212, 0.22) !important;
}

.tp-cal-tz-badge.is-pay-tz {
  background: #edfafc !important;
  border-color: #5fb7cc !important;
  color: #0d5970 !important;
  font-weight: 700 !important;
}

.tp-cal-attached-order {
  display: flex;
  flex-direction: column;
  gap: 0.58rem;
}

.tp-cal-payplan-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.48rem;
}

.tp-cal-payplan-chip {
  appearance: none;
  padding: 0.52rem 0.7rem;
  border-radius: 10px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: #1e293b;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
}

.tp-cal-payplan-chip:hover {
  border-color: #0f2c6b;
  color: #0f2c6b;
}

.tp-cal-payplan-chip.is-active {
  background: #0f2c6b;
  border-color: #0f2c6b;
  color: #ffffff;
  box-shadow: 0 6px 14px -5px rgba(15, 44, 107, 0.35);
}

.tp-cal-payplan-sub {
  font-size: 0.77rem;
  line-height: 1.45;
  color: #0d5970;
  background: #edfafc;
  border: 1px solid #5fb7cc;
  padding: 0.42rem 0.65rem;
  border-radius: 9px;
}

/* Reciprocal Companion Card inside Free Consultation -> Book Services Online */
.tp-consult-book-online-box {
  margin-top: 1.35rem;
  padding: 1.3rem 1.55rem;
  border-radius: 22px;
  background: linear-gradient(135deg, #edfafc 0%, #f7f5f0 100%);
  border: 1.5px solid #5fb7cc;
  box-shadow: 0 14px 32px -20px rgba(15, 44, 107, 0.16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.tp-consult-book-copy {
  flex: 1 1 380px;
  min-width: 0;
}

.tp-est-consult-kicker.is-book-kicker {
  color: #0d5970;
}

.tp-est-consult-dot.is-book-dot {
  background: #15809b;
  box-shadow: 0 0 0 3px rgba(43, 184, 212, 0.22);
}

.tp-consult-book-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 46px;
  padding: 0.72rem 1.35rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #0f2c6b 0%, #153c8d 100%);
  color: #ffffff !important;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 10px 22px -8px rgba(15, 44, 107, 0.4);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tp-consult-book-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -8px rgba(15, 44, 107, 0.52);
}

@media (max-width: 680px) {
  .tp-payplan-toggle,
  .tp-cal-payplan-bar {
    grid-template-columns: 1fr;
  }
  .tp-consult-book-online-box {
    flex-direction: column;
    align-items: stretch;
    padding: 1.15rem 1.2rem;
  }
  .tp-consult-book-btn {
    width: 100%;
  }
}

/* ==========================================================================
   v194 — 5-COLOR SIGNATURE PALETTE HARMONY (WHITE · SILVER-GREY · CHAMPAGNE GOLD · ICE BLUE · DEEP NAVY)
   + MOBILE BROWSE BY INDUSTRY CAROUSEL ZERO-EMPTY-SPACE FIX
   ========================================================================== */

/* 1. Homepage Photography 2-Card Row: Warm Silver-Grey + Champagne Gold */
.photo-price-cards .photo-price-card:nth-child(1) {
  background: linear-gradient(160deg, #f7f5f0 0%, #e9e5dc 100%) !important;
  border: 1px solid #c9c2b4 !important;
}

.photo-price-cards .photo-price-card:nth-child(1) .photo-price-value {
  color: #56524a !important;
}

.photo-price-cards .photo-price-card:nth-child(2) {
  background: linear-gradient(160deg, #fdf2d6 0%, #f4dfab 100%) !important;
  border: 1px solid #d19a35 !important;
}

.photo-price-cards .photo-price-card:nth-child(2) .photo-price-name {
  color: #7a5910 !important;
  font-weight: 700;
}

.photo-price-cards .photo-price-card:nth-child(2) .photo-price-value {
  color: #7a5910 !important;
}

.photo-price-cards .photo-price-card:nth-child(2) .photo-price-value sup {
  color: #b07a1c !important;
}

/* 2. Homepage Web Design & Web Apps 3-Card Column: Ice Blue + Champagne Gold + Deep Signature Navy */
#webdesign .wd-priceboxes .wd-pricebox:nth-child(1) {
  background: linear-gradient(160deg, #edfafc 0%, #d0edf4 100%) !important;
  border: 1px solid #5fb7cc !important;
}

#webdesign .wd-priceboxes .wd-pricebox:nth-child(2) {
  background: linear-gradient(160deg, #fdf2d6 0%, #f4dfab 100%) !important;
  border: 1px solid #d19a35 !important;
}

#webdesign .wd-priceboxes .wd-pricebox:nth-child(2) .claim-price .big {
  color: #7a5910 !important;
}

/* 3. /web-apps 4-Step Delivery Row: Silver-Grey -> Champagne Gold -> Ice Blue -> Deep Signature Navy */
body.tp-gsys-page .wa-steps-row .wa-step-card:nth-child(1) {
  background: linear-gradient(160deg, #f7f5f0 0%, #e9e5dc 100%) !important;
  border-color: #c9c2b4 !important;
}
body.tp-gsys-page .wa-steps-row .wa-step-card:nth-child(1) .wa-step-num {
  background: #e6e2d8 !important;
  color: #56524a !important;
}

body.tp-gsys-page .wa-steps-row .wa-step-card:nth-child(2) {
  background: linear-gradient(160deg, #fdf2d6 0%, #f4dfab 100%) !important;
  border-color: #d19a35 !important;
}
body.tp-gsys-page .wa-steps-row .wa-step-card:nth-child(2) .wa-step-num {
  background: #f1dca1 !important;
  color: #7a5910 !important;
}

body.tp-gsys-page .wa-steps-row .wa-step-card:nth-child(3) {
  background: linear-gradient(160deg, #edfafc 0%, #d0edf4 100%) !important;
  border-color: #5fb7cc !important;
}
body.tp-gsys-page .wa-steps-row .wa-step-card:nth-child(3) .wa-step-num {
  background: #c6e8f0 !important;
  color: #0d5970 !important;
}

body.tp-gsys-page .wa-steps-row .wa-step-card:nth-child(4) {
  background: linear-gradient(160deg, #0f2c6b 0%, #10506b 100%) !important;
  border-color: #0f2c6b !important;
  color: #ffffff !important;
}
body.tp-gsys-page .wa-steps-row .wa-step-card:nth-child(4) h3 {
  color: #ffffff !important;
}
body.tp-gsys-page .wa-steps-row .wa-step-card:nth-child(4) p {
  color: rgba(241, 245, 255, 0.9) !important;
}
body.tp-gsys-page .wa-steps-row .wa-step-card:nth-child(4) .wa-step-num {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

/* 4. /ads Platform Comparison 3-Card Row: Ice Blue + Champagne Gold + Warm Silver-Grey */
body.tp-gsys-page .tp-ads-compare-grid .tp-ads-compare-card:nth-child(1) {
  background: linear-gradient(160deg, #edfafc 0%, #d0edf4 100%) !important;
  border-color: #5fb7cc !important;
}
body.tp-gsys-page .tp-ads-compare-grid .tp-ads-compare-card:nth-child(2) {
  background: linear-gradient(160deg, #fdf2d6 0%, #f4dfab 100%) !important;
  border-color: #d19a35 !important;
}
body.tp-gsys-page .tp-ads-compare-grid .tp-ads-compare-card:nth-child(3) {
  background: linear-gradient(160deg, #f7f5f0 0%, #e9e5dc 100%) !important;
  border-color: #c9c2b4 !important;
}

/* 5. Feature Number Badges (.feats .feat .f-num) & Cross-Sell Cards (.cross a) */
.feats .feat:nth-child(4n+1) .f-num,
body.tp-gsys-page .feats .feat:nth-child(4n+1) .f-num {
  background: #e6e2d8 !important;
  color: #56524a !important;
}
.feats .feat:nth-child(4n+2) .f-num,
body.tp-gsys-page .feats .feat:nth-child(4n+2) .f-num {
  background: #f1dca1 !important;
  color: #7a5910 !important;
}
.feats .feat:nth-child(4n+3) .f-num,
body.tp-gsys-page .feats .feat:nth-child(4n+3) .f-num {
  background: #c6e8f0 !important;
  color: #0d5970 !important;
}
.feats .feat:nth-child(4n+4) .f-num,
body.tp-gsys-page .feats .feat:nth-child(4n+4) .f-num {
  background: #0f2c6b !important;
  color: #ffffff !important;
}

.cross a:nth-child(1),
body.tp-gsys-page .cross a:nth-child(1) {
  background: linear-gradient(160deg, #f7f5f0 0%, #e9e5dc 100%) !important;
  border-color: #c9c2b4 !important;
}
.cross a:nth-child(2),
body.tp-gsys-page .cross a:nth-child(2) {
  background: linear-gradient(160deg, #fdf2d6 0%, #f4dfab 100%) !important;
  border-color: #d19a35 !important;
}
.cross a:nth-child(3),
body.tp-gsys-page .cross a:nth-child(3) {
  background: linear-gradient(160deg, #edfafc 0%, #d0edf4 100%) !important;
  border-color: #5fb7cc !important;
}
.cross a:nth-child(4),
body.tp-gsys-page .cross a:nth-child(4) {
  background: linear-gradient(160deg, #0f2c6b 0%, #10506b 100%) !important;
  border-color: #0f2c6b !important;
  color: #ffffff !important;
}
.cross a:nth-child(4) .x-title,
body.tp-gsys-page .cross a:nth-child(4) .x-title {
  color: #ffffff !important;
}
.cross a:nth-child(4) .x-desc,
body.tp-gsys-page .cross a:nth-child(4) .x-desc {
  color: rgba(241, 245, 255, 0.88) !important;
}
.cross a:nth-child(4) .x-price,
body.tp-gsys-page .cross a:nth-child(4) .x-price {
  color: #7dd3e6 !important;
}
.cross a:nth-child(5),
body.tp-gsys-page .cross a:nth-child(5) {
  background: #ffffff !important;
  border-color: #c9c2b4 !important;
}

/* 6. Mobile Browse by Industry ([data-tp-carousel]) — Eliminate Left/Right Track Empty Gap */
@media (max-width: 680px) {
  .tp-carousel-track {
    direction: ltr !important;
    scroll-snap-type: none !important;
    scroll-padding-inline: 0 !important;
  }

  .tp-carousel-track::before,
  .tp-carousel-track::after {
    content: none !important;
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
  }

  .tp-carousel-track .tp-industry,
  .tp-carousel-track .tp-industry.is-near {
    flex: 1 0 58px !important;
    min-width: 58px !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }

  .tp-carousel-track .tp-industry.is-active {
    flex: 2 0 min(70vw, 258px) !important;
    scroll-snap-align: none !important;
  }

  body.fa .tp-carousel-track .tp-industry {
    direction: rtl;
  }
}


/* ==========================================================================
   v196 — ICE LIGHT BLUE ORDER SUMMARY, CHAMPAGNE GOLD COMPANION CARDS + GOLD CTAS,
   3-SOURCE REVIEW WALL HARMONY, ZERO BLUE/CYAN NEON GLOWS & VIEWPORT CONTAINMENT
   ========================================================================== */

/* 1. Book Online Summary Card (.tp-estimator-summary) — Ice Light Blue */
.tp-estimator-summary {
  background: linear-gradient(160deg, #effafd 0%, #dcf2f8 62%, #d2edf6 100%) !important;
  border: 1.5px solid #5fb7cc !important;
  color: #0f2c6b !important;
  box-shadow: 0 20px 46px -22px rgba(15, 44, 107, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

.tp-estimator-summary .tp-sum-kicker {
  color: #0b4c63 !important;
}

.tp-estimator-summary .tp-sum-title {
  color: #0f2c6b !important;
}

.tp-estimator-summary .tp-sum-lines {
  border-top-color: rgba(13, 89, 112, 0.16) !important;
  border-bottom-color: rgba(13, 89, 112, 0.16) !important;
}

.tp-estimator-summary .tp-sum-line {
  color: #1e293b !important;
}

.tp-estimator-summary .tp-sum-line-price {
  color: #0f2c6b !important;
  font-weight: 800 !important;
}

.tp-estimator-summary .tp-sum-line.is-waived .tp-sum-line-price {
  color: #0b4c63 !important;
}

.tp-estimator-summary .tp-sum-line.is-discount {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid #8ad0df !important;
  color: #0f2c6b !important;
}

.tp-estimator-summary .tp-sum-line.is-discount .tp-sum-line-price {
  color: #b91c1c !important;
}

.tp-estimator-summary .tp-sum-line.is-dept-scope {
  background: rgba(255, 255, 255, 0.84) !important;
  border: 1px solid #8ad0df !important;
}

.tp-estimator-summary .tp-sum-line.is-dept-scope > span:first-child {
  color: #0f2c6b !important;
}

.tp-estimator-summary .tp-sum-line.is-dept-scope .tp-sum-line-price {
  background: #fdf6e2 !important;
  border-color: #d19a35 !important;
  color: #6e4e0a !important;
}

.tp-estimator-summary .tp-sum-total-label {
  color: #0b4c63 !important;
  font-weight: 700 !important;
}

.tp-estimator-summary .tp-sum-old-total {
  color: #b91c1c !important;
}

.tp-estimator-summary .tp-sum-total-amount {
  color: #0f2c6b !important;
}

.tp-estimator-summary .tp-sum-savings {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid #8ad0df !important;
  color: #0b4c63 !important;
}

.tp-estimator-summary .tp-sum-dept-banner {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid #8ad0df !important;
  color: #1e293b !important;
}

.tp-estimator-summary .tp-payplan-box {
  background: rgba(255, 255, 255, 0.76) !important;
  border: 1px solid #8ad0df !important;
}

.tp-estimator-summary .tp-payplan-label {
  color: #0b4c63 !important;
}

.tp-estimator-summary .tp-payplan-badge {
  background: #ffffff !important;
  border: 1px solid #8ad0df !important;
  color: #0b4c63 !important;
}

.tp-estimator-summary .tp-payplan-btn {
  background: #ffffff !important;
  border: 1.5px solid #9fd6e3 !important;
  color: #0f2c6b !important;
  box-shadow: none !important;
}

.tp-estimator-summary .tp-payplan-btn:hover {
  border-color: #0f2c6b !important;
  background: #f8fdff !important;
}

.tp-estimator-summary .tp-payplan-pct {
  background: #e2f5fb !important;
  color: #0b4c63 !important;
}

.tp-estimator-summary .tp-payplan-name {
  color: #0f2c6b !important;
}

.tp-estimator-summary .tp-payplan-amt {
  color: #0b4c63 !important;
}

.tp-estimator-summary .tp-payplan-btn.is-active {
  background: linear-gradient(135deg, #0f2c6b 0%, #153c8d 100%) !important;
  border-color: #0f2c6b !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px -8px rgba(15, 44, 107, 0.28) !important;
}

.tp-estimator-summary .tp-payplan-btn.is-active .tp-payplan-pct {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

.tp-estimator-summary .tp-payplan-btn.is-active .tp-payplan-name {
  color: #ffffff !important;
}

.tp-estimator-summary .tp-payplan-btn.is-active .tp-payplan-amt {
  color: #e2f5fb !important;
}

.tp-estimator-summary .tp-payplan-note {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid #8ad0df !important;
  color: #1e293b !important;
}

.tp-estimator-summary .tp-payplan-note strong {
  color: #0f2c6b !important;
}

.tp-estimator-summary .tp-inv-btn-pay {
  background: linear-gradient(135deg, #0f2c6b 0%, #153c8d 100%) !important;
  border: 1.5px solid #0f2c6b !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px -8px rgba(15, 44, 107, 0.24) !important;
}

.tp-estimator-summary .tp-inv-btn-pay:hover:not(:disabled) {
  background: linear-gradient(135deg, #0a1f4d 0%, #0f2c6b 100%) !important;
  border-color: #0a1f4d !important;
  color: #ffffff !important;
  box-shadow: 0 14px 26px -8px rgba(15, 44, 107, 0.32) !important;
}

.tp-estimator-summary .tp-sum-fine,
.tp-estimator-summary .tp-inv-after-note {
  color: #274568 !important;
  border-top-color: rgba(13, 89, 112, 0.16) !important;
}

.tp-estimator-summary .tp-inv-after-note strong {
  color: #0f2c6b !important;
}

/* Reciprocal Free Consultation Box under Estimator Summary — Warm Champagne Gold + Gold CTA */
.tp-estimator-consult-box {
  background: linear-gradient(160deg, #fdf6e2 0%, #f5e2b3 100%) !important;
  border: 1.5px solid #d19a35 !important;
  color: #0f2c6b !important;
  box-shadow: 0 14px 32px -18px rgba(122, 89, 16, 0.18) !important;
}

.tp-estimator-consult-box .tp-est-consult-kicker {
  color: #6e4e0a !important;
}

.tp-estimator-consult-box .tp-est-consult-dot {
  background: #d19a35 !important;
  box-shadow: none !important;
}

.tp-estimator-consult-box .tp-est-consult-desc {
  color: #4f3a0d !important;
}

.tp-estimator-consult-box button.tp-est-consult-link,
.tp-estimator-consult-box button.tp-est-consult-link.is-primary-consult {
  background: linear-gradient(135deg, #f3d986 0%, #e4bb4f 100%) !important;
  border: 1.5px solid #b8860b !important;
  color: #4f3605 !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 20px -10px rgba(138, 93, 11, 0.24) !important;
}

.tp-estimator-consult-box button.tp-est-consult-link:hover,
.tp-estimator-consult-box button.tp-est-consult-link.is-primary-consult:hover {
  background: linear-gradient(135deg, #ecc968 0%, #d49c2a 100%) !important;
  border-color: #9a6b10 !important;
  color: #3d2803 !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgba(138, 93, 11, 0.32) !important;
}

/* Paid Session Booking Hub (#checkout-session on /book) — Warm Champagne Gold */
.tp-booking-hub--pay {
  border: 2px solid #d19a35 !important;
  background: linear-gradient(180deg, #fdf6e2 0%, #ffffff 36%) !important;
  box-shadow: 0 22px 48px -24px rgba(122, 89, 16, 0.2) !important;
}

.tp-cal-head--pay {
  border-bottom-color: #ecd7a0 !important;
}

.tp-cal-kicker.is-pay-kicker {
  background: #fdf2d6 !important;
  color: #6e4e0a !important;
  border: 1px solid #d19a35 !important;
}

.tp-cal-live-dot.is-pay-dot {
  background: #d19a35 !important;
  box-shadow: none !important;
}

.tp-booking-hub--pay .tp-cal-title em {
  color: #9a6b10 !important;
}

.tp-cal-tz-badge.is-pay-tz {
  background: #fdf2d6 !important;
  border-color: #d19a35 !important;
  color: #6e4e0a !important;
}

.tp-booking-hub--pay .tp-cal-slot-btn:hover:not(:disabled) {
  border-color: #d19a35 !important;
  background: #fdf6e2 !important;
}

.tp-booking-hub--pay .tp-cal-slot-btn.is-selected {
  background: linear-gradient(135deg, #0f2c6b 0%, #153c8d 100%) !important;
  border-color: #0f2c6b !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px -8px rgba(15, 44, 107, 0.22) !important;
}

.tp-booking-hub--pay .tp-cal-selected-pill,
.tp-cal-payplan-sub {
  background: #fdf6e2 !important;
  border-color: #d19a35 !important;
  color: #5c4008 !important;
}

/* 2. Online Consultation Calendar Hub (#booking-calendar) — Ice Light Blue (Zero Blue Glow) */
.tp-booking-hub:not(.tp-booking-hub--pay) {
  background: linear-gradient(180deg, #effafd 0%, #ffffff 42%, #e8f7fb 100%) !important;
  border: 1.5px solid #5fb7cc !important;
  box-shadow: 0 22px 48px -24px rgba(15, 44, 107, 0.12) !important;
}

.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-kicker {
  background: #e2f5fb !important;
  border: 1px solid #5fb7cc !important;
  color: #0b4c63 !important;
}

.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-live-dot {
  background: #15809b !important;
  box-shadow: none !important;
}

.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-title em {
  color: #126f8a !important;
}

.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-tz-badge {
  background: #eaf8fc !important;
  border-color: #7fc7d8 !important;
  color: #0b4c63 !important;
}

.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-reassure-banner {
  background: linear-gradient(135deg, #eaf8fc 0%, #f6fbfd 100%) !important;
  border-color: #67bfd3 !important;
}

.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-reassure-text strong {
  color: #0b4c63 !important;
}

.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-reassure-chip:hover {
  border-color: #5fb7cc !important;
}

.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slot-btn:hover:not(:disabled) {
  border-color: #5fb7cc !important;
  background: #edfafc !important;
}

.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slot-btn.is-selected {
  background: linear-gradient(135deg, #0f2c6b 0%, #153c8d 100%) !important;
  border-color: #0f2c6b !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px -8px rgba(15, 44, 107, 0.22) !important;
}

.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slot-tag {
  color: #126f8a !important;
}

.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slot-btn.is-selected .tp-cal-slot-tag {
  color: #e2f5fb !important;
}

.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slot-btn.is-adjacent-next:not(:disabled) {
  border-style: dashed !important;
  border-color: #5fb7cc !important;
  background: linear-gradient(180deg, #ffffff 0%, #e6f6fb 100%) !important;
}

.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slot-btn.is-adjacent-next:not(:disabled):hover {
  border-style: solid !important;
  border-color: #15809b !important;
  background: #d4eff6 !important;
}

.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-selected-pill {
  background: #eaf8fc !important;
  border-color: #5fb7cc !important;
  color: #0b4c63 !important;
}

/* Reciprocal Book Services Online Box under Consultation Hub — Warm Champagne Gold + Gold CTA */
.tp-consult-book-online-box {
  background: linear-gradient(160deg, #fdf6e2 0%, #f5e2b3 100%) !important;
  border: 1.5px solid #d19a35 !important;
  box-shadow: 0 14px 32px -18px rgba(122, 89, 16, 0.18) !important;
}

.tp-consult-book-online-box .tp-est-consult-kicker.is-book-kicker {
  color: #6e4e0a !important;
}

.tp-consult-book-online-box .tp-est-consult-dot.is-book-dot {
  background: #d19a35 !important;
  box-shadow: none !important;
}

.tp-consult-book-online-box .tp-est-consult-desc {
  color: #4f3a0d !important;
}

.tp-consult-book-online-box .tp-consult-book-btn {
  background: linear-gradient(135deg, #f3d986 0%, #e4bb4f 100%) !important;
  border: 1.5px solid #b8860b !important;
  color: #4f3605 !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 20px -10px rgba(138, 93, 11, 0.24) !important;
}

.tp-consult-book-online-box .tp-consult-book-btn:hover {
  background: linear-gradient(135deg, #ecc968 0%, #d49c2a 100%) !important;
  border-color: #9a6b10 !important;
  color: #3d2803 !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgba(138, 93, 11, 0.32) !important;
}

/* 3. Reviews Wall 3-Source Harmony:
      - Google: exact current Warm Neutral Grey (#f5f5f5)
      - LinkedIn: Soft Ice Light Blue
      - Airbnb: Soft Warm Champagne Gold */
.tp-review-card[data-review-source="linkedin"] {
  background: linear-gradient(160deg, #effafd 0%, #e0f4f9 100%) !important;
  border-color: #8ad0df !important;
}

.tp-review-card[data-review-source="linkedin"] .tp-review-source,
.tp-review-card[data-review-source="linkedin"] .tp-review-link {
  color: #0b4c63 !important;
}

.tp-review-card[data-review-source="linkedin"] .tp-review-initials {
  background: #d4eef5 !important;
  border-color: #85cbdb !important;
  color: #0b4c63 !important;
}

.tp-review-card[data-review-source="airbnb"] {
  background: linear-gradient(160deg, #fdf8ea 0%, #f8ecc8 100%) !important;
  border-color: #dfc17b !important;
}

.tp-review-card[data-review-source="airbnb"] .tp-review-source,
.tp-review-card[data-review-source="airbnb"] .tp-review-link {
  color: #68490b !important;
}

.tp-review-card[data-review-source="airbnb"] .tp-review-stars {
  color: #a87312 !important;
}

.tp-review-card[data-review-source="airbnb"] .tp-review-initials {
  background: #f6e3b3 !important;
  border-color: #ddbd73 !important;
  color: #68490b !important;
}

.tp-review-proof a[href*="airbnb"] {
  background: linear-gradient(160deg, #fdf8ea 0%, #f8ecc8 100%) !important;
  border-color: #dfc17b !important;
  color: #5c4008 !important;
}

.tp-review-proof a[href*="airbnb"] .tp-review-proof-stars,
.tp-review-proof a[href*="airbnb"] .tp-review-proof-arrow {
  color: #9a6b10 !important;
}

.tp-review-proof a[href*="airbnb"]:hover {
  background: #f6e4b6 !important;
  border-color: #c9942e !important;
}

.tp-review-proof a[href*="linkedin"] {
  background: linear-gradient(160deg, #effafd 0%, #e0f4f9 100%) !important;
  border-color: #8ad0df !important;
  color: #0b4c63 !important;
}

.tp-review-proof a[href*="linkedin"] .tp-review-proof-arrow {
  color: #0b4c63 !important;
}

.tp-review-proof a[href*="linkedin"]:hover {
  background: #d5eff6 !important;
  border-color: #5fb7cc !important;
}

/* 4. Site-Wide Clean Borders & Zero Blue/Cyan Glow Shadows Around Buttons, Slots & Cards */
.tp-est-block:hover {
  border-color: #cbd5e1 !important;
}

.tp-cal-submit-btn,
.tp-cal-submit-btn.is-pay-submit {
  border-color: #0f2c6b !important;
  box-shadow: 0 10px 22px -8px rgba(15, 44, 107, 0.22) !important;
}

.tp-cal-date-btn:hover {
  border-color: #94a3b8 !important;
  background: #f8fafc !important;
}

.tp-cal-date-btn.is-selected {
  border-color: #0f2c6b !important;
  box-shadow: 0 6px 14px -6px rgba(15, 44, 107, 0.2) !important;
}

.tp-cal-input:focus,
.tp-cal-textarea:focus {
  border-color: #0f2c6b !important;
  box-shadow: 0 0 0 3px rgba(15, 44, 107, 0.08) !important;
}

.tp-preset-btn:hover {
  border-color: #94a3b8 !important;
  box-shadow: none !important;
}

.tp-preset-btn.is-active {
  border-color: #0f2c6b !important;
  box-shadow: 0 6px 14px -6px rgba(15, 44, 107, 0.2) !important;
}

.tp-est-opt:hover {
  border-color: #94a3b8 !important;
  box-shadow: 0 6px 16px -8px rgba(15, 44, 107, 0.1) !important;
}

.tp-est-opt.is-selected,
.tp-est-opt.is-dept-card.is-selected {
  border-color: #0f2c6b !important;
  background: #f8fafd !important;
  box-shadow: 0 8px 18px -10px rgba(15, 44, 107, 0.14) !important;
}

/* 5. Viewport & Service-Hero Horizontal Overflow Containment (Prevents DevTools Desktop->Mobile Scale Bug) */
html,
body {
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

body.tp-gsys-page header.hero,
body.tp-gsys-page .wa-ent-hero,
body.tp-gsys-page main,
body.tp-gsys-page section {
  max-width: 100%;
  overflow-x: clip;
}

@media (max-width: 560px) {
  .tp-g-vitals-float {
    flex-wrap: wrap;
    gap: 0.55rem;
  }

  .tp-g-window-bar {
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .tp-g-window {
    padding: 0.9rem 0.85rem 1rem;
  }

  .tp-g-sky-frame {
    padding: 0.78rem;
    border-radius: 22px;
  }

  .tp-g-orbit-node.pos-tr,
  .tp-g-orbit-node.pos-br {
    right: -4px;
  }

  .tp-g-orbit-node.pos-tl,
  .tp-g-orbit-node.pos-bl {
    left: -4px;
  }
}


/* ==========================================================================
   v197 — SITE-WIDE CARD HEADING, BODY COPY & BOTTOM PRICE/NOTE TYPOGRAPHY UNIFICATION
   Reference Model: .tp-ads-compare-card (/ads) — EN Google Sans + Roboto / FA Shabnam
   ========================================================================== */

/* 1. Cross-Sell Cards (.cross a) across /video, /web-design, /photography, /ads */
.cross a,
body.tp-gsys-page .cross a {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.cross a:nth-child(1):hover,
body.tp-gsys-page .cross a:nth-child(1):hover {
  background: linear-gradient(160deg, #f7f5f0 0%, #e9e5dc 100%) !important;
  border-color: #b5ad9d !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 28px -16px rgba(15, 44, 107, 0.14) !important;
}

.cross a:nth-child(2):hover,
body.tp-gsys-page .cross a:nth-child(2):hover {
  background: linear-gradient(160deg, #fdf2d6 0%, #f4dfab 100%) !important;
  border-color: #b88322 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 28px -16px rgba(122, 89, 16, 0.18) !important;
}

.cross a:nth-child(3):hover,
body.tp-gsys-page .cross a:nth-child(3):hover {
  background: linear-gradient(160deg, #edfafc 0%, #d0edf4 100%) !important;
  border-color: #3da0b8 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 28px -16px rgba(13, 89, 112, 0.16) !important;
}

.cross a:nth-child(4):hover,
body.tp-gsys-page .cross a:nth-child(4):hover {
  background: linear-gradient(160deg, #0f2c6b 0%, #10506b 100%) !important;
  border-color: #2bb8d4 !important;
  color: #ffffff !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 32px -14px rgba(10, 31, 77, 0.34) !important;
}

.cross a:nth-child(5):hover,
body.tp-gsys-page .cross a:nth-child(5):hover {
  background: #ffffff !important;
  border-color: #94a3b8 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 28px -16px rgba(15, 44, 107, 0.14) !important;
}

.cross .x-title,
body.tp-gsys-page .cross .x-title {
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  line-height: 1.26 !important;
  letter-spacing: -0.02em !important;
  color: #0f2c6b !important;
}

.cross .x-title :is(.lang-en, .lang-fa, .keep-en) {
  font-weight: 700 !important;
}

body.fa .cross .x-title,
body.tp-gsys-page.fa .cross .x-title {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-size: 1.06rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

.cross a:nth-child(4) .x-title,
body.tp-gsys-page .cross a:nth-child(4) .x-title {
  color: #ffffff !important;
}

.cross .x-desc,
body.tp-gsys-page .cross .x-desc {
  font-family: "Roboto", sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #2c3e66 !important;
  margin-top: 0.48rem !important;
  margin-bottom: 0.95rem !important;
}

body.fa .cross .x-desc,
body.tp-gsys-page.fa .cross .x-desc {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  line-height: 1.7 !important;
}

.cross a:nth-child(4) .x-desc,
body.tp-gsys-page .cross a:nth-child(4) .x-desc {
  color: rgba(241, 245, 255, 0.9) !important;
}

.cross .x-price,
body.tp-gsys-page .cross .x-price {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.42rem !important;
  margin-top: auto !important;
  padding-top: 0.85rem !important;
  border-top: 1px solid rgba(15, 44, 107, 0.12) !important;
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: 0.94rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  color: #0f2c6b !important;
}

.cross .x-price :is(.cur, .lang-en, .lang-fa, .keep-en) {
  font-weight: 700 !important;
}

body.fa .cross .x-price,
body.tp-gsys-page.fa .cross .x-price {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  letter-spacing: 0 !important;
}

body.fa .cross .x-price:not(:has(.lang-fa[dir="rtl"])) {
  justify-content: flex-end !important;
}

.cross a:nth-child(1) .x-price,
body.tp-gsys-page .cross a:nth-child(1) .x-price,
.cross a:nth-child(5) .x-price,
body.tp-gsys-page .cross a:nth-child(5) .x-price {
  border-top-color: rgba(15, 44, 107, 0.12) !important;
  color: #0f2c6b !important;
}

.cross a:nth-child(2) .x-price,
body.tp-gsys-page .cross a:nth-child(2) .x-price {
  border-top-color: rgba(122, 89, 16, 0.18) !important;
  color: #6e4e0a !important;
}

.cross a:nth-child(3) .x-price,
body.tp-gsys-page .cross a:nth-child(3) .x-price {
  border-top-color: rgba(13, 89, 112, 0.16) !important;
  color: #0b4c63 !important;
}

.cross a:nth-child(4) .x-price,
body.tp-gsys-page .cross a:nth-child(4) .x-price {
  border-top-color: rgba(255, 255, 255, 0.16) !important;
  color: #8ce6f8 !important;
}

.cross .x-price s.tp-price-was,
.cross .x-price s.tp-price-was.tp-price-was--sm {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
}

.cross a:nth-child(4) s.tp-price-was,
body.tp-gsys-page .cross a:nth-child(4) s.tp-price-was {
  color: var(--tp-offer-red-dark-card, #ff8a93) !important;
}

.cross a:nth-child(4) s.tp-price-was::after,
body.tp-gsys-page .cross a:nth-child(4) s.tp-price-was::after {
  background: var(--tp-offer-red-dark-card, #ff8a93) !important;
}

/* 2. Process & Feature Cards (.feats .feat) */
.feats .feat .f-title,
.feat .f-title {
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: 1.16rem !important;
  font-weight: 700 !important;
  line-height: 1.26 !important;
  letter-spacing: -0.02em !important;
  color: #0f2c6b !important;
}

.feat .f-title :is(.lang-en, .lang-fa, .keep-en) {
  font-weight: 700 !important;
}

body.fa .feats .feat .f-title,
body.fa .feat .f-title {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-size: 1.06rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

.feats .feat .f-desc,
.feat .f-desc {
  font-family: "Roboto", sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #2c3e66 !important;
}

body.fa .feats .feat .f-desc,
body.fa .feat .f-desc {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  line-height: 1.7 !important;
}

/* 3. Guide, Ads Compare, About, Web-Apps, Blog, Offer Catalog, FAQ & Promo Cards */
.tp-ads-compare-card h3 {
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  line-height: 1.26 !important;
  letter-spacing: -0.02em !important;
  color: #0f2c6b !important;
}

body.fa .tp-ads-compare-card h3 {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

.tp-ads-compare-card p {
  font-family: "Roboto", sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #2c3e66 !important;
}

body.fa .tp-ads-compare-card p {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  line-height: 1.7 !important;
}

body.tp-gsys-page .tp-g-guide-card h3 {
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: 1.14rem !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
  letter-spacing: -0.02em !important;
  color: #0f2c6b !important;
}

body.tp-gsys-page.fa .tp-g-guide-card h3 {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

body.tp-gsys-page .tp-g-guide-card p {
  font-family: "Roboto", sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #2c3e66 !important;
}

body.tp-gsys-page.fa .tp-g-guide-card p {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  line-height: 1.7 !important;
}

.guide:not(.tp-g-guide-bento) h3 {
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: 1.22rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  color: #0f2c6b !important;
}

body.fa .guide:not(.tp-g-guide-bento) h3 {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-size: 1.12rem !important;
  font-weight: 700 !important;
  line-height: 1.42 !important;
  letter-spacing: 0 !important;
}

.guide:not(.tp-g-guide-bento) p {
  font-family: "Roboto", sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #2c3e66 !important;
}

body.fa .guide:not(.tp-g-guide-bento) p {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  line-height: 1.75 !important;
}

.promo-info h3 {
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: 1.32rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  color: #0f2c6b !important;
}

body.fa .promo-info h3 {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-size: 1.18rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

.promo-card.tier-signature .promo-info h3 {
  color: #ffffff !important;
}

.promo-info p {
  font-family: "Roboto", sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  line-height: 1.58 !important;
  color: #2c3e66 !important;
}

body.fa .promo-info p {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  line-height: 1.7 !important;
}

.promo-card.tier-signature .promo-info p {
  color: rgba(241, 245, 255, 0.9) !important;
}

.wa-cap-card h3,
.wa-step-card h3,
.wa-ind-card h3,
.wa-ind-card h4,
.wa-portal-card h3,
.wa-next-case-card h3,
.tp-about-card h3,
.tp-offer-rate-card h4,
.blog-card h2 {
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: 1.16rem !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
  letter-spacing: -0.02em !important;
  color: #0f2c6b !important;
}

.tp-offer-rate-card h4 {
  font-size: 1.14rem !important;
}

.wa-next-case-card h3,
.blog-card h2 {
  font-size: 1.18rem !important;
}

:is(
  .wa-cap-card h3,
  .wa-step-card h3,
  .wa-ind-card h3,
  .wa-ind-card h4,
  .wa-portal-card h3,
  .wa-next-case-card h3,
  .tp-about-card h3,
  .tp-offer-rate-card h4,
  .blog-card h2,
  .tp-ads-compare-card h3,
  body.tp-gsys-page .tp-g-guide-card h3,
  .guide:not(.tp-g-guide-bento) h3,
  .promo-info h3
) :is(.lang-en, .lang-fa, .keep-en) {
  font-weight: 700 !important;
}

body.fa :is(
  .wa-cap-card h3,
  .wa-step-card h3,
  .wa-ind-card h3,
  .wa-ind-card h4,
  .wa-portal-card h3,
  .wa-next-case-card h3,
  .tp-about-card h3,
  .tp-offer-rate-card h4,
  .blog-card h2
) {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-size: 1.06rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

body.fa .tp-offer-rate-card h4 {
  font-size: 1.05rem !important;
}

body.fa :is(.wa-next-case-card h3, .blog-card h2) {
  font-size: 1.08rem !important;
}

body.tp-gsys-page .wa-steps-row .wa-step-card:nth-child(4) h3,
.tp-offer-rate-card.is-featured h4 {
  color: #ffffff !important;
}

.wa-cap-card p,
.wa-step-card p,
.wa-ind-card p,
.wa-portal-card p,
.wa-next-case-card p,
.tp-about-card p,
.tp-offer-rate-desc,
.blog-card p.exc {
  font-family: "Roboto", sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #2c3e66 !important;
}

body.fa :is(
  .wa-cap-card p,
  .wa-step-card p,
  .wa-ind-card p,
  .wa-portal-card p,
  .wa-next-case-card p,
  .tp-about-card p,
  .tp-offer-rate-desc,
  .blog-card p.exc
) {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  line-height: 1.7 !important;
}

body.tp-gsys-page .wa-steps-row .wa-step-card:nth-child(4) p,
.tp-offer-rate-card.is-featured .tp-offer-rate-desc {
  color: rgba(241, 245, 255, 0.9) !important;
}

.faq summary,
.tp-faq-item > summary {
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: 1.06rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  color: #0f2c6b !important;
}

:is(.faq summary, .tp-faq-item > summary) :is(.lang-en, .lang-fa, .keep-en) {
  font-weight: 700 !important;
}

body.fa :is(.faq summary, .tp-faq-item > summary) {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

.faq .a,
.tp-faq-answer {
  font-family: "Roboto", sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #2c3e66 !important;
}

body.fa :is(.faq .a, .tp-faq-answer) {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  line-height: 1.75 !important;
}

/* 4. Bottom Card Notes, Fee Conditions, Setup Lines, Estimator Options & Section Links */
.pcard .pc-desc,
.photo-price-desc,
.price-tagline {
  font-family: "Roboto", sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  opacity: 1 !important;
  color: #2c3e66 !important;
}

body.fa :is(.pcard .pc-desc, .photo-price-desc, .price-tagline) {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  line-height: 1.7 !important;
}

.pcard.t-signature .pc-desc,
.pcard.t-webapp .pc-desc,
.price-card.tier-signature .price-tagline {
  color: rgba(241, 245, 255, 0.9) !important;
}

.pcard:not(.t-signature):not(.t-webapp) .pc-desc strong {
  font-weight: 700 !important;
  color: #0f2c6b !important;
}

.pcard.t-signature .pc-desc strong,
.pcard.t-webapp .pc-desc strong {
  font-weight: 700 !important;
  color: #ffffff !important;
}

.pcard .pc-note,
.photo-price-note {
  font-family: "Roboto", sans-serif !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  color: #0b4c63 !important;
}

:is(.pcard .pc-note, .photo-price-note) :is(.lang-en, .lang-fa, .keep-en) {
  font-weight: 600 !important;
}

body.fa :is(.pcard .pc-note, .photo-price-note) {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  line-height: 1.65 !important;
}

.pcard.t-silver .pc-note,
.photo-price-cards .photo-price-card:nth-child(1) .photo-price-note {
  color: #3f3b34 !important;
  border-top-color: rgba(86, 82, 74, 0.2) !important;
}

.pcard.t-gold .pc-note,
.photo-price-cards .photo-price-card:nth-child(2) .photo-price-note {
  color: #634508 !important;
  border-top-color: rgba(122, 89, 16, 0.22) !important;
}

.pcard.t-diamond .pc-note {
  color: #0b4c63 !important;
  border-top-color: rgba(13, 89, 112, 0.18) !important;
}

.pcard.t-signature .pc-note,
.pcard.t-webapp .pc-note {
  color: #9be7f7 !important;
  border-top-color: rgba(255, 255, 255, 0.2) !important;
}

#pricing .price-period,
#pricing .price-period :is(.lang-en, .lang-fa, .keep-en) {
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  color: #2c3e66 !important;
}

#pricing .price-card.tier-signature .price-period,
#pricing .price-card.tier-signature .price-period :is(.lang-en, .lang-fa, .keep-en) {
  color: rgba(241, 245, 255, 0.88) !important;
}

#pricing .price-period .loc-fee,
#pricing .price-period .loc-fee :is(.lang-en, .lang-fa, .keep-en),
#pricing .price-features li.fee-note,
#pricing .price-features li.fee-note :is(.lang-en, .lang-fa, .keep-en) {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: #0b4c63 !important;
}

#pricing .price-card.tier-gold .price-period .loc-fee,
#pricing .price-card.tier-gold .price-period .loc-fee :is(.lang-en, .lang-fa, .keep-en),
#pricing .price-card.tier-gold .price-features li.fee-note,
#pricing .price-card.tier-gold .price-features li.fee-note :is(.lang-en, .lang-fa, .keep-en) {
  color: #634508 !important;
}

#pricing .price-card.tier-signature .price-period .loc-fee,
#pricing .price-card.tier-signature .price-period .loc-fee :is(.lang-en, .lang-fa, .keep-en),
#pricing .price-card.tier-signature .price-features li.fee-note,
#pricing .price-card.tier-signature .price-features li.fee-note :is(.lang-en, .lang-fa, .keep-en) {
  color: #9be7f7 !important;
}

.webdesign-claim .claim-condition,
.webdesign-claim .wd-pricebox .claim-condition,
#webdesign .wd-pricebox--webapp .wd-box-condition {
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  color: #0b4c63 !important;
}

:is(
  .webdesign-claim .claim-condition,
  .webdesign-claim .wd-pricebox .claim-condition,
  #webdesign .wd-pricebox--webapp .wd-box-condition
) :is(.lang-en, .lang-fa, .keep-en) {
  font-weight: 600 !important;
}

#webdesign .wd-priceboxes .wd-pricebox:nth-child(1) .claim-condition {
  color: #0b4c63 !important;
  border-top-color: rgba(13, 89, 112, 0.18) !important;
}

#webdesign .wd-priceboxes .wd-pricebox:nth-child(2) .claim-condition {
  color: #634508 !important;
  border-top-color: rgba(122, 89, 16, 0.22) !important;
}

#webdesign .wd-priceboxes .wd-pricebox--webapp .wd-box-condition,
#webdesign .wd-pricebox--webapp .wd-box-condition {
  color: #9be7f7 !important;
}

.tp-ads-setup-note,
.tp-ads-setup-note :is(.lang-en, .lang-fa, .keep-en) {
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  line-height: 1.58 !important;
}

.tp-ads-setup-note {
  color: #2c3e66 !important;
}

.tp-ads-setup-note del {
  font-weight: 600 !important;
}

.tp-ads-hero-meta,
.tp-ads-hero-meta :is(.cur, .lang-en, .lang-fa, .keep-en) {
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
}

body.fa .tp-ads-hero-meta,
body.fa .tp-ads-hero-meta :is(.cur, .lang-en, .lang-fa, .keep-en) {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  letter-spacing: 0 !important;
}

.tp-g-mini-note,
.tp-g-mini-note :is(.lang-en, .lang-fa, .keep-en),
.tp-g-mini-price small {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: #2c3e66 !important;
}

.tp-offer-addons-strip {
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  color: #2c3e66 !important;
}

.tp-offer-addons-strip :is(.lang-en, .lang-fa, .keep-en) {
  font-weight: 500 !important;
}

.tp-offer-addons-strip strong,
.tp-offer-addons-strip strong :is(.lang-en, .lang-fa, .keep-en) {
  font-weight: 700 !important;
  color: #0f2c6b !important;
}

.tp-est-opt-name,
.tp-est-opt-name :is(.lang-en, .lang-fa, .keep-en) {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.tp-est-opt-price,
.tp-est-opt-price :is(.lang-en, .lang-fa, .keep-en) {
  font-size: 0.86rem !important;
  font-weight: 700 !important;
}

.tp-est-opt-meta,
.tp-est-opt-meta :is(.lang-en, .lang-fa, .keep-en) {
  font-size: 0.79rem !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  color: #475569 !important;
}

.tp-est-opt.is-dept-card.is-selected {
  border-color: #0f2c6b !important;
  background: linear-gradient(155deg, #0f2c6b 0%, #14448f 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 26px -10px rgba(15, 44, 107, 0.28) !important;
}

.tp-est-opt.is-dept-card.is-selected .tp-est-opt-name,
.tp-est-opt.is-dept-card.is-selected .tp-est-opt-name :is(.lang-en, .lang-fa, .keep-en) {
  color: #ffffff !important;
}

.tp-est-opt.is-dept-card.is-selected .tp-est-opt-price,
.tp-est-opt.is-dept-card.is-selected .tp-est-opt-price :is(.lang-en, .lang-fa, .keep-en) {
  color: #8ce6f8 !important;
}

.tp-est-opt.is-dept-card.is-selected .tp-est-opt-meta,
.tp-est-opt.is-dept-card.is-selected .tp-est-opt-meta :is(.lang-en, .lang-fa, .keep-en) {
  color: rgba(255, 255, 255, 0.88) !important;
}

.tp-est-opt.is-dept-card.is-selected .tp-est-remove {
  color: #ffffff !important;
}

.fine,
.fine > :is(.lang-en, .lang-fa, .keep-en) {
  font-family: "Roboto", sans-serif !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
  color: #3b4d71 !important;
}

body.fa .fine,
body.fa .fine > :is(.lang-en, .lang-fa, .keep-en) {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  line-height: 1.75 !important;
}

.fine a,
.fine a :is(.lang-en, .lang-fa, .keep-en) {
  color: #0f2c6b !important;
  font-weight: 700 !important;
}

.deep-link,
.deep-link :is(.lang-en, .lang-fa, .keep-en) {
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: #0f2c6b !important;
}

.deep-link a,
.deep-link a :is(.lang-en, .lang-fa, .keep-en) {
  color: #0f2c6b !important;
  font-weight: 700 !important;
}

body.fa .deep-link,
body.fa .deep-link :is(.lang-en, .lang-fa, .keep-en),
body.fa .deep-link a,
body.fa .deep-link a :is(.lang-en, .lang-fa, .keep-en) {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.blog-card .meta,
.blog-card .meta :is(.lang-en, .lang-fa, .keep-en) {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #475569 !important;
}

.blog-card .meta {
  margin-top: auto !important;
  padding-top: 0.6rem !important;
}


/* ==========================================================================
   v198 — BOLD CARD KICKERS & REMAINING TITLES + FRICTIONLESS DIRECT CHECKOUT
          + WIDE 1080px EDITORIAL BLOG LAYOUT & PHOTOREALISTIC 16:9 COVERS
   Reference Model: .tp-estimator-summary .tp-sum-kicker ("ONLINE ORDER SUMMARY")
   ========================================================================== */

/* 1. Site-Wide Card Kickers & Eyebrows — Bold, Confident & Surface-Matched
      (Matches .tp-sum-kicker / .tp-payplan-label in Screenshot 2; keeps Homepage Hero cards untouched) */
.pcard .pc-name,
body.tp-gsys-page .pcard .pc-name,
.photo-price-name,
#pricing .price-name,
.price-card .price-name,
.webdesign-claim .claim-eyebrow,
.webdesign-claim .wd-pricebox .claim-eyebrow,
#webdesign .wd-webapp-kicker,
.blog-card .cat,
.tp-offer-rate-kicker,
.wa-kicker,
.tp-about-kicker {
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #0b4c63 !important;
}

.pcard .pc-name,
body.tp-gsys-page .pcard .pc-name {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

:is(
  .pcard .pc-name,
  body.tp-gsys-page .pcard .pc-name,
  .photo-price-name,
  #pricing .price-name,
  .price-card .price-name,
  .webdesign-claim .claim-eyebrow,
  .webdesign-claim .wd-pricebox .claim-eyebrow,
  #webdesign .wd-webapp-kicker,
  .blog-card .cat,
  .tp-offer-rate-kicker,
  .wa-kicker,
  .tp-about-kicker
) :is(.lang-en, .lang-fa, .keep-en) {
  font-weight: 700 !important;
}

body.fa :is(
  .pcard .pc-name,
  body.tp-gsys-page .pcard .pc-name,
  .photo-price-name,
  #pricing .price-name,
  .price-card .price-name,
  .webdesign-claim .claim-eyebrow,
  .webdesign-claim .wd-pricebox .claim-eyebrow,
  #webdesign .wd-webapp-kicker,
  .blog-card .cat,
  .tp-offer-rate-kicker,
  .wa-kicker,
  .tp-about-kicker
) {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Surface-matched kicker inks (Silver / Gold / Ice-Diamond / Signature Dark) */
.pcard.t-silver .pc-name,
body.tp-gsys-page .pcard.t-silver .pc-name,
.price-card.tier-silver .price-name,
#pricing .price-card.tier-silver .price-name,
.photo-price-cards .photo-price-card:nth-child(1) .photo-price-name {
  color: #36322b !important;
}

.pcard.t-gold .pc-name,
body.tp-gsys-page .pcard.t-gold .pc-name,
.price-card.tier-gold .price-name,
#pricing .price-card.tier-gold .price-name,
.photo-price-cards .photo-price-card:nth-child(2) .photo-price-name,
#webdesign .wd-priceboxes .wd-pricebox:nth-child(2) .claim-eyebrow {
  color: #634508 !important;
}

.pcard.t-diamond .pc-name,
body.tp-gsys-page .pcard.t-diamond .pc-name,
.price-card.tier-diamond .price-name,
#pricing .price-card.tier-diamond .price-name,
#webdesign .wd-priceboxes .wd-pricebox:nth-child(1) .claim-eyebrow {
  color: #0b4c63 !important;
}

.pcard.t-signature .pc-name,
body.tp-gsys-page .pcard.t-signature .pc-name,
.pcard.t-webapp .pc-name,
.price-card.tier-signature .price-name,
#pricing .price-card.tier-signature .price-name,
#webdesign .wd-pricebox--webapp .wd-webapp-kicker,
.tp-offer-rate-card.is-featured .tp-offer-rate-kicker {
  color: #9be7f7 !important;
}

/* Section Eyebrows & Labels — Crisp SemiBold/Bold Consistency */
.eyebrow,
.section-label:not(.hero .section-label),
.stat .label,
.contact-item .label {
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
}

:is(.eyebrow, .section-label:not(.hero .section-label), .stat .label, .contact-item .label) :is(.lang-en, .lang-fa, .keep-en) {
  font-weight: 700 !important;
}

body.fa :is(.eyebrow, .section-label:not(.hero .section-label), .stat .label, .contact-item .label) {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Remaining Normal-Case Card Titles Across Every Page */
.plist .pl-name,
.wd-title,
.service-title,
.addon-name,
.evt-base .addon-name,
.term-item h3,
.terms-grid h3,
.founder-byline .founder-name,
.post-related h3,
.post-related a,
.post-related a strong {
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-weight: 700 !important;
}

:is(
  .plist .pl-name,
  .wd-title,
  .service-title,
  .addon-name,
  .evt-base .addon-name,
  .term-item h3,
  .terms-grid h3,
  .founder-byline .founder-name,
  .post-related h3,
  .post-related a,
  .post-related a strong
) :is(.lang-en, .lang-fa, .keep-en) {
  font-weight: 700 !important;
}

body.fa :is(
  .plist .pl-name,
  .wd-title,
  .service-title,
  .addon-name,
  .evt-base .addon-name,
  .term-item h3,
  .terms-grid h3,
  .founder-byline .founder-name,
  .post-related h3,
  .post-related a,
  .post-related a strong
) {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.addon-name .meta,
.addon-name .meta :is(.lang-en, .lang-fa, .keep-en) {
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
}

body.fa .addon-name .meta,
body.fa .addon-name .meta :is(.lang-en, .lang-fa, .keep-en) {
  font-family: "Shabnam", Tahoma, sans-serif !important;
}

/* 2. Frictionless Direct Paid Checkout (#checkout-session on /book) & Zero Neon Blue Glow */
.tp-booking-hub--direct-pay {
  max-width: 820px !important;
  margin-inline: auto !important;
}

.tp-booking-hub--direct-pay .tp-cal-grid--direct-pay {
  display: block !important;
}

.tp-booking-hub--direct-pay .tp-pay-direct-panel {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tp-pay-coordination-note {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 1rem 0 1.15rem;
  padding: 0.9rem 1.05rem;
  border-radius: 14px;
  background: #fdf6e2;
  border: 1px solid #dfc075;
  color: #5c4008;
}

.tp-pay-coordination-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #d19a35;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.tp-pay-coordination-note p {
  margin: 0 !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 0.91rem !important;
  font-weight: 500 !important;
  line-height: 1.58 !important;
  color: #4f3606 !important;
}

body.fa .tp-pay-coordination-note p {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  line-height: 1.72 !important;
}

/* Remove any outer neon blue shadow/glow on calendar, form inputs & launcher */
.tp-booking-hub,
.tp-booking-hub--pay,
.tp-booking-hub:not(.tp-booking-hub--pay) {
  box-shadow: 0 14px 32px -22px rgba(15, 23, 42, 0.12) !important;
}

.tp-cal-input:focus,
.tp-cal-select:focus,
.tp-cal-textarea:focus {
  border-color: #0f2c6b !important;
  box-shadow: none !important;
  outline: 2px solid rgba(15, 44, 107, 0.14) !important;
  outline-offset: 0 !important;
}

/* 3. Wide Editorial Tehranto Blog Layout (1080px) & 24 Photorealistic 16:9 Covers */
.blog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
}

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

@media (max-width: 640px) {
  .blog-grid {
    grid-template-columns: 1fr !important;
  }
}

.blog-card {
  overflow: hidden !important;
  border-radius: 18px !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: 1px solid #dbe4f0 !important;
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease !important;
}

.blog-card:hover {
  transform: translateY(-4px) !important;
  border-color: #7fc7d8 !important;
  box-shadow: 0 18px 36px -22px rgba(15, 44, 107, 0.16) !important;
}

.blog-card .body {
  padding: 1.35rem 1.45rem 1.45rem !important;
}

.tp-blog-card-media {
  margin: 0 !important;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e9eff6;
  border-bottom: 1px solid rgba(15, 44, 107, 0.08);
}

tehranto-footer:not([data-shell-ready="true"]) .tp-footer-crawl-links {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tp-blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.blog-card:hover .tp-blog-card-media img {
  transform: scale(1.03);
}

/* Wide Article Reading Container (Upgraded from cramped 72ch ~640px to 1080px) */
.post-hero .container,
.post-body,
.post-cta,
.post-related {
  max-width: 1080px !important;
  width: min(100% - 2.5rem, 1080px) !important;
  margin-inline: auto !important;
}

.post-hero .container {
  padding-inline: 0 !important;
}

.post-hero h1 {
  max-width: 24ch !important;
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(2.15rem, 4.2vw, 3.35rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.025em !important;
}

body.fa .post-hero h1 {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  line-height: 1.34 !important;
  letter-spacing: 0 !important;
}

.post-hero p.lede {
  max-width: 82ch !important;
  font-size: 1.14rem !important;
  line-height: 1.72 !important;
  color: #2c3e66 !important;
}

.post-body {
  padding-inline: 0 !important;
  font-size: 1.07rem !important;
  line-height: 1.84 !important;
  color: #1e293b !important;
}

body.fa .post-body {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-size: 1.04rem !important;
  line-height: 1.95 !important;
}

.post-body h2 {
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: clamp(1.5rem, 2.4vw, 1.92rem) !important;
  font-weight: 700 !important;
  line-height: 1.24 !important;
  letter-spacing: -0.02em !important;
  color: #0f2c6b !important;
  margin: 2.9rem 0 1rem !important;
}

body.fa .post-body h2 {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  line-height: 1.42 !important;
  letter-spacing: 0 !important;
}

.post-body h3 {
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: 1.24rem !important;
  font-weight: 700 !important;
  line-height: 1.32 !important;
  color: #0f2c6b !important;
  margin: 2rem 0 0.7rem !important;
}

body.fa .post-body h3 {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  line-height: 1.46 !important;
}

.post-body p,
.post-body li {
  max-width: none !important;
}

.tp-blog-figure {
  margin: 2rem 0 2.6rem !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid #dbe4f0 !important;
  background: #f8fafc !important;
  box-shadow: 0 18px 42px -24px rgba(15, 44, 107, 0.16) !important;
}

.tp-blog-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.tp-blog-figure figcaption {
  padding: 0.85rem 1.25rem;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.55;
  color: #475569;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.tp-blog-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 1.75rem 0;
}

@media (max-width: 760px) {
  .tp-blog-grid-2 {
    grid-template-columns: 1fr;
  }
}

.tp-blog-info-card {
  padding: 1.35rem 1.45rem;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #dbe4f0;
}

.tp-blog-info-card h3 {
  margin: 0 0 0.55rem !important;
  font-size: 1.12rem !important;
}

.tp-blog-info-card p {
  margin: 0 !important;
  font-size: 0.96rem !important;
  line-height: 1.68 !important;
  color: #2c3e66 !important;
}

.tp-blog-table-wrap {
  margin: 1.85rem 0;
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid #dbe4f0;
  background: #ffffff;
}

.tp-blog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.55;
}

.tp-blog-table th,
.tp-blog-table td {
  padding: 0.9rem 1.1rem;
  text-align: start;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: top;
}

.tp-blog-table th {
  background: #effafd;
  color: #0f2c6b;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
}

body.fa .tp-blog-table th {
  font-family: "Shabnam", Tahoma, sans-serif;
}

.tp-blog-table tr:last-child td {
  border-bottom: 0;
}

.tp-blog-callout {
  margin: 2rem 0;
  padding: 1.35rem 1.55rem;
  border-radius: 16px;
  background: linear-gradient(160deg, #effafd 0%, #e1f4fa 100%);
  border: 1px solid #7fc7d8;
  color: #0f2c6b;
}

.tp-blog-callout strong {
  color: #0b4c63;
  font-weight: 700;
}

/* ==========================================================================
   v200: UNIVERSAL POPUP CHECKOUT MODAL & MOBILE FLOATING GEOMETRY / GOLD CHAT
   1. Centered Popup Checkout Modal (.tp-checkout-modal) with × return-to-spot
   2. Mobile (<=640px): 56×56px Menu & Gold Chat circles on right:1rem axis +
      56px height Tehranto Club floating card on matching bottom baseline
   ========================================================================== */

html.tp-checkout-modal-lock,
html.tp-checkout-modal-lock body {
  overflow: hidden !important;
}

.tp-checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483100;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 2.4vw, 1.5rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.tp-checkout-modal[data-open="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.tp-checkout-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 18, 44, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}

.tp-checkout-modal-card {
  position: relative;
  z-index: 1;
  width: min(650px, 100%);
  max-height: min(92dvh, 860px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 26px;
  background: linear-gradient(165deg, #fffdf8 0%, #fdf4da 100%);
  border: 1.5px solid #d8ab4e;
  box-shadow: 0 28px 80px rgba(6, 18, 44, 0.34);
  padding: clamp(1.25rem, 2.5vw, 1.85rem);
  transform: translateY(12px) scale(0.985);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  outline: none;
}

.tp-checkout-modal[data-open="true"] .tp-checkout-modal-card {
  transform: translateY(0) scale(1);
}

.tp-checkout-modal-close {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  z-index: 3;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid rgba(15, 44, 107, 0.18);
  color: #0f2c6b;
  font-family: "Google Sans", "Roboto", Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

body.fa .tp-checkout-modal-close {
  right: auto;
  left: 1.15rem;
}

.tp-checkout-modal-close:hover {
  background: #f8f5ec;
  border-color: #0f2c6b;
  transform: translateY(-1px);
}

.tp-checkout-modal-close:focus-visible {
  outline: 2.5px solid #0f2c6b;
  outline-offset: 2px;
}

.tp-checkout-modal .tp-booking-hub--direct-pay {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.tp-checkout-modal .tp-cal-head--pay {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.5rem !important;
  padding-inline-end: 0 !important;
  padding-bottom: 0.9rem !important;
  margin-bottom: 1rem !important;
}

.tp-checkout-modal .tp-cal-kicker.is-pay-kicker {
  align-self: flex-start;
  margin-bottom: 0 !important;
  margin-inline-end: 3.4rem !important;
}

.tp-checkout-modal .tp-checkout-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.tp-checkout-modal .tp-cal-title {
  font-size: clamp(1.38rem, 2.3vw, 1.72rem) !important;
  line-height: 1.18 !important;
  margin: 0 !important;
}

.tp-checkout-modal .tp-pay-direct-panel {
  gap: 0.85rem !important;
}

.tp-checkout-modal .tp-cal-attached-order {
  margin-bottom: 0 !important;
  padding: 0.85rem 1rem !important;
}

.tp-checkout-modal .tp-cal-fields {
  gap: 0.78rem !important;
}

.tp-checkout-modal .tp-cal-textarea {
  min-height: 82px !important;
}

.tp-checkout-modal .tp-pay-coordination-note {
  margin-top: 0 !important;
  padding: 0.78rem 1rem !important;
}

.tp-checkout-modal.is-confirmed-state .tp-cal-attached-order,
.tp-checkout-modal.is-confirmed-state .tp-cal-fields,
.tp-checkout-modal.is-confirmed-state .tp-pay-coordination-note,
.tp-checkout-modal.is-confirmed-state [data-cal-submit] {
  display: none !important;
}

@media (max-width: 600px) {
  .tp-checkout-modal-card {
    padding: 1.15rem 1.05rem 1.25rem;
    border-radius: 22px;
  }

  .tp-checkout-modal-close {
    top: 0.9rem;
    right: 0.9rem;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  body.fa .tp-checkout-modal-close {
    right: auto;
    left: 0.9rem;
  }

  .tp-checkout-modal .tp-cal-fields {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile Floating Circles (56×56px Equal Diameter, Right-Edge Axis, Champagne Gold Chat Circle, 56px Tehranto Club Card) */
@media (max-width: 640px) {
  html body tehranto-header button.tp-classic-floating[data-shell-open],
  html body.fa tehranto-header button.tp-classic-floating[data-shell-open] {
    top: 1.25rem !important;
    right: 1rem !important;
    left: auto !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #0f2c6b !important;
    color: #fbfaf7 !important;
  }

  html body tehranto-header button.tp-classic-close[data-shell-close],
  html body.fa tehranto-header button.tp-classic-close[data-shell-close] {
    top: 1.25rem !important;
    right: 1rem !important;
    left: auto !important;
    width: 56px !important;
    height: 56px !important;
  }

  html body.fa tehranto-header .tp-classic-mobile-head {
    padding-top: 2.2rem !important;
  }

  html body tehranto-contact-launcher button.tp-launch-trigger[aria-controls],
  html body.fa tehranto-contact-launcher button.tp-launch-trigger[aria-controls] {
    right: 1rem !important;
    left: auto !important;
    bottom: max(0.9rem, env(safe-area-inset-bottom)) !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(155deg, #fdf4da 0%, #f4dfab 55%, #ebd08e 100%) !important;
    border: 1.5px solid #d19a35 !important;
    color: #3d2a05 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.2) !important;
  }

  html body tehranto-contact-launcher button.tp-launch-trigger[aria-controls]:hover,
  html body tehranto-contact-launcher button.tp-launch-trigger[aria-controls]:active,
  html body.fa tehranto-contact-launcher button.tp-launch-trigger[aria-controls]:hover,
  html body.fa tehranto-contact-launcher button.tp-launch-trigger[aria-controls]:active {
    background: linear-gradient(155deg, #faecc4 0%, #efd38e 100%) !important;
    border-color: #b07a1c !important;
    color: #2c1e03 !important;
  }

  html body tehranto-contact-launcher button.tp-launch-trigger[aria-controls] svg,
  html body.fa tehranto-contact-launcher button.tp-launch-trigger[aria-controls] svg {
    width: 22px !important;
    height: 22px !important;
  }

  html body tehranto-contact-launcher section.tp-launch-panel[role="dialog"],
  html body.fa tehranto-contact-launcher section.tp-launch-panel[role="dialog"] {
    right: 1rem !important;
    left: auto !important;
    bottom: max(0.9rem, env(safe-area-inset-bottom)) !important;
    align-items: flex-end !important;
    transform-origin: bottom right !important;
  }

  html body tehranto-contact-launcher button.tp-launch-close[data-launch-close],
  html body.fa tehranto-contact-launcher button.tp-launch-close[data-launch-close] {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    font-size: 1.6rem !important;
  }

  html body .tp-offer-float,
  html body.fa .tp-offer-float {
    left: 1rem !important;
    right: auto !important;
    bottom: max(0.9rem, env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 98px) !important;
  }

  html body .tp-offer-float .tp-offer-float-card,
  html body.fa .tp-offer-float .tp-offer-float-card {
    width: min(262px, calc(100vw - 98px)) !important;
    max-width: calc(100vw - 98px) !important;
  }

  html body .tp-offer-float .tp-club-float-card,
  html body.fa .tp-offer-float .tp-club-float-card {
    width: auto !important;
    max-width: calc(100vw - 98px) !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 9px 0 10px !important;
    border-radius: 999px !important;
  }

  html body.fa .tp-offer-float .tp-club-float-card {
    padding: 0 10px 0 9px !important;
  }

  html body .tp-offer-float .tp-club-float-link,
  html body.fa .tp-offer-float .tp-club-float-link {
    height: 42px !important;
    gap: 7px !important;
  }

  html body .tp-offer-float .tp-club-float-logo,
  html body.fa .tp-offer-float .tp-club-float-logo {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  html body .tp-offer-float .tp-club-float-cta,
  html body.fa .tp-offer-float .tp-club-float-cta {
    height: 40px !important;
    padding: 3px 10px !important;
  }

  html body .tp-offer-float .tp-club-float-close,
  html body.fa .tp-offer-float .tp-club-float-close {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }

  html body .tp-offer-float .tp-offer-float-pill,
  html body.fa .tp-offer-float .tp-offer-float-pill {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tp-checkout-modal,
  .tp-checkout-modal-card,
  .tp-checkout-modal-close {
    transition: none !important;
  }
}


/* ==========================================================================
   v201 — 50% Default Radio-Circle Payment Selector, Crisp White Checkout Modal,
   Mandatory Collaboration Terms + Live Electronic Signature, Dedicated /terms
   Page, and Homepage-Style 3-Tile (HHH:MM:SS) Solari Floating Countdown Synced
   to Exact Chat · Consult · Book Width & Height
   ========================================================================== */

/* 1. Radio-Circle 50% Default / 100% Optional Payment Selector */
.tp-payplan-radios {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.9rem 0 1rem;
  width: 100%;
}

.tp-payplan-radios--modal {
  margin: 0.65rem 0 0;
  gap: 0.48rem;
}

.tp-payplan-radio-row {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: flex-start;
  gap: 0.68rem;
  width: 100%;
  padding: 0.72rem 0.88rem;
  border-radius: 14px;
  border: 1.5px solid rgba(15, 44, 107, 0.14);
  background: rgba(255, 255, 255, 0.82);
  color: #475569;
  text-align: start;
  cursor: pointer;
  font-family: "Roboto", sans-serif;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.48;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

body.fa .tp-payplan-radio-row {
  font-family: "Shabnam", Tahoma, sans-serif;
  font-size: 0.85rem;
  line-height: 1.68;
}

.tp-payplan-radio-row:hover {
  background: #ffffff;
  border-color: rgba(15, 44, 107, 0.34);
  color: #1e293b;
}

.tp-payplan-radio-row:focus-visible {
  outline: 2px solid #0f2c6b;
  outline-offset: 2px;
}

.tp-payplan-radio-row.is-active {
  background: #ffffff;
  border-color: #0f2c6b;
  color: #0f2c6b;
  box-shadow: 0 8px 20px -10px rgba(15, 44, 107, 0.22);
}

.tp-payplan-dot {
  position: relative;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin-top: 0.14rem;
  border-radius: 50%;
  border: 2px solid #94a3b8;
  background: #ffffff;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

body.fa .tp-payplan-dot {
  margin-top: 0.24rem;
}

.tp-payplan-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #0f2c6b;
  transform: scale(0);
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

.tp-payplan-radio-row:hover .tp-payplan-dot {
  border-color: #475569;
}

.tp-payplan-radio-row.is-active .tp-payplan-dot {
  border-color: #0f2c6b;
  box-shadow: 0 0 0 3px rgba(15, 44, 107, 0.1);
}

.tp-payplan-radio-row.is-active .tp-payplan-dot::after {
  transform: scale(1);
}

.tp-payplan-radio-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.tp-payplan-radio-copy strong {
  font-weight: 700;
  color: #334155;
}

.tp-payplan-radio-row.is-active .tp-payplan-radio-copy {
  font-weight: 600;
  color: #0f2c6b;
}

.tp-payplan-radio-row.is-active .tp-payplan-radio-copy strong {
  font-weight: 800;
  color: #0f2c6b;
}

/* 2. Crisp White Checkout Popup Card + Clean Vertical Spacing + Agreement & Signature Box */
.tp-checkout-modal .tp-checkout-modal-card {
  width: min(760px, calc(100vw - 2rem)) !important;
  max-width: 760px !important;
  max-height: calc(100dvh - 2rem) !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(15, 44, 107, 0.16) !important;
  box-shadow: 0 30px 84px rgba(8, 22, 52, 0.28) !important;
}

.tp-checkout-modal .tp-booking-hub--direct-pay {
  padding: 1.3rem 1.65rem 1.35rem !important;
}

.tp-checkout-modal .tp-checkout-modal-close {
  background: #f8fafc !important;
  border: 1.5px solid rgba(15, 44, 107, 0.16) !important;
  color: #0f2c6b !important;
}

.tp-checkout-modal .tp-checkout-modal-close:hover {
  background: #eef4fb !important;
  border-color: #0f2c6b !important;
}

.tp-checkout-modal .tp-cal-head--pay {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 0.45rem 1rem !important;
  padding-inline-end: 2.8rem !important;
  border-bottom: 1px solid rgba(15, 44, 107, 0.1) !important;
  padding-bottom: 0.72rem !important;
  margin-bottom: 0.82rem !important;
}

.tp-checkout-modal .tp-cal-title {
  font-size: clamp(1.45rem, 2.2vw, 1.82rem) !important;
  margin-bottom: 0 !important;
}

.tp-checkout-modal .tp-cal-kicker.is-pay-kicker {
  background: #f1f6fd !important;
  color: #0f2c6b !important;
  border: 1px solid rgba(15, 44, 107, 0.16) !important;
}

.tp-checkout-modal .tp-cal-live-dot.is-pay-dot {
  background: #14839e !important;
  box-shadow: none !important;
}

.tp-checkout-modal .tp-booking-hub--pay .tp-cal-title em {
  color: #14839e !important;
}

.tp-checkout-modal .tp-cal-tz-badge.is-pay-tz {
  background: #f8fafc !important;
  border: 1px solid rgba(15, 44, 107, 0.14) !important;
  color: #0f2c6b !important;
}

.tp-checkout-modal .tp-pay-direct-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.76rem !important;
}

.tp-checkout-modal .tp-cal-attached-order {
  background: #f6f9fe !important;
  border: 1px solid rgba(15, 44, 107, 0.12) !important;
  border-radius: 16px !important;
  padding: 0.78rem 0.95rem !important;
  margin: 0 !important;
}

.tp-checkout-modal .tp-cal-fields {
  margin: 0 !important;
  gap: 0.68rem !important;
}

.tp-checkout-agreement-box {
  display: flex;
  flex-direction: column;
  gap: 0.58rem;
  margin: 0;
  padding: 0.85rem 0.98rem;
  border-radius: 15px;
  background: #f8fafc;
  border: 1.5px solid rgba(15, 44, 107, 0.16);
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.tp-checkout-agreement-box.is-checked {
  background: #f2f8ff;
  border-color: #0f2c6b;
}

.tp-checkout-agreement-box.is-invalid {
  background: #fff1f2;
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.tp-checkout-agreement-label {
  display: flex;
  align-items: flex-start;
  gap: 0.68rem;
  cursor: pointer;
  margin: 0;
}

.tp-checkout-agreement-check {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.tp-checkout-agreement-ui {
  position: relative;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  margin-top: 0.12rem;
  border-radius: 6px;
  border: 2px solid #64748b;
  background: #ffffff;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

body.fa .tp-checkout-agreement-ui {
  margin-top: 0.22rem;
}

.tp-checkout-agreement-check:focus-visible + .tp-checkout-agreement-ui {
  outline: 2px solid #0f2c6b;
  outline-offset: 2px;
}

.tp-checkout-agreement-check:checked + .tp-checkout-agreement-ui {
  background: #0f2c6b;
  border-color: #0f2c6b;
}

.tp-checkout-agreement-check:checked + .tp-checkout-agreement-ui::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2.2px 2.2px 0;
  transform: rotate(45deg);
}

.tp-checkout-agreement-text {
  font-family: "Roboto", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.54;
  color: #1e293b;
}

body.fa .tp-checkout-agreement-text {
  font-family: "Shabnam", Tahoma, sans-serif;
  font-size: 0.84rem;
  line-height: 1.72;
}

.tp-checkout-terms-link {
  color: #0f2c6b !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.tp-checkout-terms-link:hover {
  color: #14839e !important;
}

.tp-checkout-signature-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  padding-top: 0.52rem;
  border-top: 1px dashed rgba(15, 44, 107, 0.15);
  font-size: 0.78rem;
  color: #64748b;
}

.tp-checkout-sig-kicker {
  font-weight: 600;
  color: #475569;
}

.tp-checkout-sig-value {
  font-family: "Google Sans", "Roboto", sans-serif;
  font-weight: 700;
  color: #475569;
}

body.fa .tp-checkout-sig-value {
  font-family: "Shabnam", Tahoma, sans-serif;
}

.tp-checkout-signature-row.is-signed .tp-checkout-sig-value {
  color: #0f2c6b;
}

.tp-checkout-modal .tp-pay-coordination-note,
.tp-booking-hub--direct-pay .tp-pay-coordination-note {
  margin: 0 !important;
  padding: 0.82rem 0.98rem !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  border: 1px solid rgba(15, 44, 107, 0.12) !important;
  color: #1e293b !important;
}

.tp-checkout-modal .tp-pay-coordination-icon,
.tp-booking-hub--direct-pay .tp-pay-coordination-icon {
  background: #0f2c6b !important;
  color: #ffffff !important;
}

.tp-checkout-modal .tp-pay-coordination-note p,
.tp-booking-hub--direct-pay .tp-pay-coordination-note p {
  color: #334155 !important;
}

.tp-checkout-modal .tp-cal-submit-btn.is-pay-submit {
  margin-top: 0.1rem !important;
}

.tp-checkout-modal.is-confirmed-state .tp-checkout-agreement-box {
  display: none !important;
}

/* 3. Bottom-Left Floating Countdown (HHH:MM:SS Homepage Solari Split-Flap) & Exact Width/Height Sync */
@media (min-width: 641px) {
  .tp-offer-float {
    left: clamp(1rem, 2.2vw, 2rem) !important;
    right: auto !important;
    bottom: clamp(1rem, 2.2vw, 2rem) !important;
    gap: 8px !important;
  }

  body.fa .tp-offer-float {
    left: auto !important;
    right: clamp(1rem, 2.2vw, 2rem) !important;
  }

  .tp-offer-float .tp-club-float-card {
    width: 216px;
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    padding: 0 6px 0 7px !important;
    gap: 5px !important;
  }

  body.fa .tp-offer-float .tp-club-float-card {
    padding: 0 7px 0 6px !important;
  }

  .tp-offer-float .tp-club-float-logo {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }

  .tp-offer-float .tp-club-float-cta {
    height: 36px !important;
    padding: 2px 7px !important;
  }

  .tp-offer-float .tp-club-float-domain {
    font-size: 0.7rem !important;
  }

  .tp-offer-float .tp-club-float-close {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    font-size: 0.85rem !important;
  }
}

.tp-offer-float .tp-offer-float-card {
  width: 216px;
  height: auto !important;
  padding: 9px 10px 8px !important;
  gap: 7px !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 44, 107, 0.14) !important;
  box-shadow:
    0 14px 34px rgba(15, 44, 107, 0.14),
    0 2px 6px rgba(15, 44, 107, 0.05) !important;
  cursor: pointer !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

body.fa .tp-offer-float .tp-offer-float-card {
  padding: 9px 10px 8px !important;
}

.tp-offer-float .tp-offer-float-card:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 44, 107, 0.28) !important;
  box-shadow:
    0 18px 38px rgba(15, 44, 107, 0.18),
    0 3px 8px rgba(15, 44, 107, 0.08) !important;
}

.tp-offer-float .tp-offer-float-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.4rem !important;
  width: 100% !important;
}

.tp-offer-float .tp-offer-float-card .tp-offer-float-badge {
  height: 22px !important;
  padding: 0 0.54rem !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
}

body.fa .tp-offer-float .tp-offer-float-card .tp-offer-float-badge {
  font-size: 0.62rem !important;
}

.tp-offer-float .tp-offer-float-close {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  font-size: 0.85rem !important;
  flex-shrink: 0 !important;
}

.tp-offer-float .tp-offer-float-link {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  text-decoration: none !important;
}

.tp-offer-float .tp-flap-board--float {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 5px !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}

.tp-offer-float .tp-flap-board--float .tp-flap-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: auto !important;
  gap: 3px !important;
}

.tp-offer-float .tp-flap-board--float .tp-flap-card,
.tp-offer-float .tp-flap-board--float .tp-flap-card--solari-mini {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg, #102a63 0%, #0b1e48 49%, #081739 51%, #133172 100%) !important;
  border: 1px solid rgba(15, 44, 107, 0.38) !important;
  box-shadow:
    0 5px 12px rgba(11, 29, 69, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  perspective: 320px !important;
  overflow: hidden !important;
  font-family: "Google Sans", "Plus Jakarta Sans", sans-serif !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

.tp-offer-float .tp-flap-board--float .tp-flap-hinge {
  display: block !important;
  width: 2.5px !important;
  height: 6px !important;
  margin-top: -3px !important;
}

.tp-offer-float .tp-flap-board--float .tp-flap-label {
  position: static !important;
  inset: auto !important;
  display: block !important;
  margin-top: 2px !important;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.48rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1.15 !important;
  color: #526588 !important;
  text-align: center !important;
}

body.fa .tp-offer-float .tp-flap-board--float .tp-flap-label {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-size: 0.52rem !important;
  letter-spacing: 0 !important;
}

@media (max-width: 640px) {
  html body .tp-offer-float .tp-offer-float-card,
  html body.fa .tp-offer-float .tp-offer-float-card {
    width: min(214px, calc(100vw - 98px)) !important;
    max-width: calc(100vw - 98px) !important;
    padding: 8px 9px 7px !important;
    gap: 6px !important;
    border-radius: 16px !important;
  }

  html body .tp-offer-float .tp-flap-board--float,
  html body.fa .tp-offer-float .tp-flap-board--float {
    height: auto !important;
    gap: 4px !important;
  }

  html body .tp-offer-float .tp-flap-board--float .tp-flap-card,
  html body .tp-offer-float .tp-flap-board--float .tp-flap-card--solari-mini,
  html body.fa .tp-offer-float .tp-flap-board--float .tp-flap-card,
  html body.fa .tp-offer-float .tp-flap-board--float .tp-flap-card--solari-mini {
    width: 100% !important;
    height: 31px !important;
    border-radius: 8px !important;
    font-size: 0.86rem !important;
  }
}

/* 4. Dedicated Collaboration Terms & Service Agreement Page (/terms & /fa/terms) */
.tp-terms-page {
  background: #faf9f7;
  color: #0f172a;
}

.tp-terms-hero {
  padding: clamp(6.8rem, 11vw, 8.8rem) 0 clamp(2.2rem, 4vw, 3.2rem);
  background: radial-gradient(900px 420px at 50% 0%, rgba(43, 184, 212, 0.1), transparent 70%), #faf9f7;
  border-bottom: 1px solid rgba(15, 44, 107, 0.1);
}

.tp-terms-container {
  max-width: 980px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.2rem);
}

.tp-terms-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.36rem 0.85rem;
  border-radius: 999px;
  background: #edf5ff;
  border: 1px solid rgba(15, 44, 107, 0.16);
  color: #0f2c6b;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

body.fa .tp-terms-kicker {
  font-family: "Shabnam", Tahoma, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.tp-terms-hero h1 {
  margin: 0 0 0.9rem;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: clamp(2rem, 4.2vw, 3.05rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #0f2c6b;
}

body.fa .tp-terms-hero h1 {
  font-family: "Shabnam", Tahoma, sans-serif;
  letter-spacing: 0;
  line-height: 1.32;
}

.tp-terms-lead {
  margin: 0 0 1.25rem;
  max-width: 78ch;
  font-family: "Roboto", sans-serif;
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.68;
  color: #334155;
}

body.fa .tp-terms-lead {
  font-family: "Shabnam", Tahoma, sans-serif;
  line-height: 1.88;
}

.tp-terms-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.95rem;
  font-size: 0.83rem;
  font-weight: 600;
  color: #475569;
}

.tp-terms-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.34rem 0.76rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(15, 44, 107, 0.12);
  color: #0f2c6b;
}

.tp-terms-body {
  padding: clamp(2.2rem, 4.5vw, 3.8rem) 0 clamp(3.5rem, 6vw, 5rem);
}

.tp-terms-notice {
  margin-bottom: 2rem;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border-radius: 20px;
  background: linear-gradient(155deg, #f0f7ff 0%, #ffffff 100%);
  border: 1.5px solid #0f2c6b;
  box-shadow: 0 14px 36px -22px rgba(15, 44, 107, 0.25);
}

.tp-terms-notice h2 {
  margin: 0 0 0.55rem;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  color: #0f2c6b;
}

body.fa .tp-terms-notice h2 {
  font-family: "Shabnam", Tahoma, sans-serif;
}

.tp-terms-notice p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.68;
  color: #1e293b;
}

body.fa .tp-terms-notice p {
  line-height: 1.88;
}

.tp-terms-clauses {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.tp-terms-clause {
  padding: clamp(1.3rem, 2.4vw, 1.85rem);
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(15, 44, 107, 0.12);
  box-shadow: 0 10px 26px -20px rgba(15, 23, 42, 0.12);
}

.tp-terms-clause-head {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  margin-bottom: 0.85rem;
}

.tp-terms-clause-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 0.55rem;
  border-radius: 10px;
  background: #0f2c6b;
  color: #ffffff;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.84rem;
  font-weight: 800;
  flex-shrink: 0;
}

.tp-terms-clause h2 {
  margin: 0;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: clamp(1.14rem, 1.8vw, 1.34rem);
  font-weight: 800;
  line-height: 1.3;
  color: #0f2c6b;
}

body.fa .tp-terms-clause h2 {
  font-family: "Shabnam", Tahoma, sans-serif;
}

.tp-terms-clause p {
  margin: 0 0 0.75rem;
  font-size: 0.96rem;
  line-height: 1.7;
  color: #334155;
}

.tp-terms-clause p:last-child {
  margin-bottom: 0;
}

.tp-terms-clause ul {
  margin: 0.5rem 0 0;
  padding-inline-start: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.52rem;
}

.tp-terms-clause li {
  font-size: 0.94rem;
  line-height: 1.66;
  color: #334155;
}

body.fa .tp-terms-clause p,
body.fa .tp-terms-clause li {
  font-family: "Shabnam", Tahoma, sans-serif;
  line-height: 1.88;
}

.tp-terms-clause strong {
  color: #0f2c6b;
  font-weight: 700;
}

.tp-terms-cta-card {
  margin-top: 2rem;
  padding: clamp(1.35rem, 2.5vw, 1.9rem);
  border-radius: 20px;
  background: #ffffff;
  border: 1.5px solid rgba(15, 44, 107, 0.16);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

.tp-terms-cta-copy h2 {
  margin: 0 0 0.35rem;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  color: #0f2c6b;
}

body.fa .tp-terms-cta-copy h2 {
  font-family: "Shabnam", Tahoma, sans-serif;
}

.tp-terms-cta-copy p {
  margin: 0;
  font-size: 0.92rem;
  color: #475569;
}

.tp-terms-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.tp-terms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.2rem;
  border-radius: 999px;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

body.fa .tp-terms-btn {
  font-family: "Shabnam", Tahoma, sans-serif;
}

.tp-terms-btn--primary {
  background: #0f2c6b;
  color: #ffffff;
  border: 1.5px solid #0f2c6b;
}

.tp-terms-btn--primary:hover {
  background: #153c8d;
  transform: translateY(-1px);
}

.tp-terms-btn--secondary {
  background: #f8fafc;
  color: #0f2c6b;
  border: 1.5px solid rgba(15, 44, 107, 0.2);
}

.tp-terms-btn--secondary:hover {
  background: #eef4fb;
  border-color: #0f2c6b;
}

/* ==========================================================================
   v205 — SITE-WIDE FLAT TIER CARDS: ZERO AMBIENT BLUE/CYAN CORNER GLOWS
   & ZERO BLUE OUTER DROP-SHADOWS ACROSS ALL PRICING, PACKAGE & BENTO CARDS
   Reference: /video Clean Tier Cards (Silver #f7f5f0→#e9e5dc / Gold #fdf2d6→#f4dfab /
   Diamond #edfafc→#d0edf4 / Signature #0f2c6b→#10506b)
   ========================================================================== */

:root {
  --offer-card-shadow: none !important;
  --offer-card-shadow-hover: none !important;
}

/* 1. Strip all internal cyan/blue radial corner smudges & ambient overlays */
.promo::before,
.promo-card::before,
.promo-card::after,
.special-offer-cards .pcard::before,
.special-offer-cards .pcard::after,
body.special-offers-page .pcard::before,
body.special-offers-page .pcard::after,
.pcard::before,
.pcard::after,
.price-card::before,
.price-card::after,
.photo-price-card::before,
.photo-price-card::after,
.webdesign-panel::before,
.webdesign-panel::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* 2. Remove external blue/cyan drop-shadows at rest and on hover across all cards */
.pcard,
.pcard:hover,
.special-offer-cards .pcard,
.special-offer-cards .pcard:hover,
body.special-offers-page .pcard,
body.special-offers-page .pcard:hover,
body.tp-gsys-page .pcard,
body.tp-gsys-page .pcard:hover,
.promo-card,
.promo-card:hover,
.price-card,
.price-card:hover,
#pricing .price-card,
#pricing .price-card:hover,
.photo-price-card,
.photo-price-card:hover,
.webdesign-panel,
.wd-pricebox,
#webdesign .wd-pricebox--webapp,
.dept-hero,
.event-section .evt-base,
.tp-offers-hero-board,
.workfolio-minimal,
.tp-offer-rate-card,
.tp-offer-rate-card:hover,
.tp-ads-compare-card,
.tp-ads-compare-card:hover,
body.tp-gsys-page .tp-ads-compare-card,
body.tp-gsys-page .tp-ads-compare-card:hover,
body.tp-gsys-page .wa-step-card,
body.tp-gsys-page .wa-step-card:hover,
body.tp-gsys-page .wa-cap-card,
body.tp-gsys-page .wa-cap-card:hover,
body.tp-gsys-page .wa-trust-item,
body.tp-gsys-page .feat,
body.tp-gsys-page .feat:hover,
.cross a,
.cross a:hover,
body.tp-gsys-page .cross a,
body.tp-gsys-page .cross a:hover,
.tp-about-stat,
.tp-about-card,
.tp-about-ai-band,
.wa-compare-col,
body.tp-gsys-page .wa-compare-col {
  box-shadow: none !important;
}

/* 3. Lock pure tier-true surfaces & 1px borders (never overridden by offer/blue hover lines) */
.pcard.t-silver,
.special-offer-cards .pcard.t-silver,
body.special-offers-page .pcard.t-silver,
body.tp-gsys-page .pcard.t-silver,
.promo-card.tier-silver,
.price-card.tier-silver,
#pricing .price-card.tier-silver,
.photo-price-cards .photo-price-card:nth-child(1) {
  background: linear-gradient(160deg, #f7f5f0 0%, #e9e5dc 100%) !important;
  border: 1px solid #c9c2b4 !important;
}

.pcard.t-silver:hover,
.special-offer-cards .pcard.t-silver:hover,
body.special-offers-page .pcard.t-silver:hover,
body.tp-gsys-page .pcard.t-silver:hover,
.promo-card.tier-silver:hover,
.price-card.tier-silver:hover,
#pricing .price-card.tier-silver:hover,
.photo-price-cards .photo-price-card:nth-child(1):hover,
body.tp-gsys-page .tp-ads-compare-grid .tp-ads-compare-card:nth-child(3):hover,
body.tp-gsys-page .wa-steps-row .wa-step-card:nth-child(1):hover {
  border-color: #b5ad9d !important;
}

.pcard.t-gold,
.special-offer-cards .pcard.t-gold,
body.special-offers-page .pcard.t-gold,
body.tp-gsys-page .pcard.t-gold,
.promo-card.tier-gold,
.price-card.tier-gold,
#pricing .price-card.tier-gold,
.photo-price-cards .photo-price-card:nth-child(2),
#webdesign .wd-priceboxes .wd-pricebox:nth-child(2) {
  background: linear-gradient(160deg, #fdf2d6 0%, #f4dfab 100%) !important;
  border: 1px solid #d19a35 !important;
}

.pcard.t-gold:hover,
.special-offer-cards .pcard.t-gold:hover,
body.special-offers-page .pcard.t-gold:hover,
body.tp-gsys-page .pcard.t-gold:hover,
.promo-card.tier-gold:hover,
.price-card.tier-gold:hover,
#pricing .price-card.tier-gold:hover,
.photo-price-cards .photo-price-card:nth-child(2):hover,
#webdesign .wd-priceboxes .wd-pricebox:nth-child(2):hover,
body.tp-gsys-page .tp-ads-compare-grid .tp-ads-compare-card:nth-child(2):hover,
body.tp-gsys-page .wa-steps-row .wa-step-card:nth-child(2):hover {
  border-color: #b88322 !important;
}

.pcard.t-diamond,
.special-offer-cards .pcard.t-diamond,
body.special-offers-page .pcard.t-diamond,
body.tp-gsys-page .pcard.t-diamond,
.promo-card.tier-diamond,
.price-card.tier-diamond,
#pricing .price-card.tier-diamond,
.photo-price-card--diamond,
#webdesign .wd-priceboxes .wd-pricebox:nth-child(1) {
  background: linear-gradient(160deg, #edfafc 0%, #d0edf4 100%) !important;
  border: 1px solid #5fb7cc !important;
}

.pcard.t-diamond:hover,
.special-offer-cards .pcard.t-diamond:hover,
body.special-offers-page .pcard.t-diamond:hover,
body.tp-gsys-page .pcard.t-diamond:hover,
.promo-card.tier-diamond:hover,
.price-card.tier-diamond:hover,
#pricing .price-card.tier-diamond:hover,
.photo-price-card--diamond:hover,
#webdesign .wd-priceboxes .wd-pricebox:nth-child(1):hover,
body.tp-gsys-page .tp-ads-compare-grid .tp-ads-compare-card:nth-child(1):hover,
body.tp-gsys-page .wa-steps-row .wa-step-card:nth-child(3):hover {
  border-color: #3da0b8 !important;
}

.pcard.t-signature,
.special-offer-cards .pcard.t-signature,
body.special-offers-page .pcard.t-signature,
body.tp-gsys-page .pcard.t-signature,
.pcard.t-webapp,
body.tp-gsys-page .pcard.t-webapp,
.promo-card.tier-signature,
.price-card.tier-signature,
#pricing .price-card.tier-signature,
#webdesign .wd-pricebox--webapp,
.dept-hero,
.event-section .evt-base,
.tp-offers-hero-board {
  background: linear-gradient(160deg, #0f2c6b 0%, #10506b 100%) !important;
  border: 1px solid #2bb8d4 !important;
}

.pcard.t-signature:hover,
.special-offer-cards .pcard.t-signature:hover,
body.special-offers-page .pcard.t-signature:hover,
body.tp-gsys-page .pcard.t-signature:hover,
.pcard.t-webapp:hover,
body.tp-gsys-page .pcard.t-webapp:hover,
.promo-card.tier-signature:hover,
.price-card.tier-signature:hover,
#pricing .price-card.tier-signature:hover,
#webdesign .wd-pricebox--webapp:hover {
  border-color: #7dd3e6 !important;
}

/* 4. Clean neutral hover borders on white feature/capability/rate cards (zero #93c5fd blue rim) */
body.tp-gsys-page .feat:hover,
body.tp-gsys-page .wa-cap-card:hover,
.tp-offer-rate-card:not(.is-featured):hover {
  border-color: #cbd5e1 !important;
}

.workfolio-minimal {
  background: linear-gradient(145deg, #ffffff 0%, #f7f6f2 100%) !important;
  border: 1px solid #d8d3c8 !important;
}

/* ==========================================================================
   v206 — Enlarge Only Inner Speech-Bubble Icon Inside Unchanged 56×56px Mobile Launcher Circle
   ========================================================================== */
@media (max-width: 640px) {
  html body tehranto-contact-launcher button.tp-launch-trigger[aria-controls] svg,
  html body.fa tehranto-contact-launcher button.tp-launch-trigger[aria-controls] svg {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
  }
}

/* ==========================================================================
   v207 — Refined Natural Typography (`font-synthesis: none`, 400 Body / 500-600 Headings)
          & Service-by-Service Collapsible Accordion on /terms & /fa/terms
   ========================================================================== */
body.tp-terms-page,
body.tp-terms-page * {
  font-synthesis: none !important;
  -webkit-font-smoothing: antialiased;
}

body.tp-terms-page {
  background: #faf9f7 !important;
  color: #334155 !important;
  font-weight: 400 !important;
}

body.tp-terms-page.fa {
  font-family: "Shabnam", Tahoma, sans-serif !important;
}

body.tp-terms-page .tp-terms-hero {
  background: #faf9f7 !important;
  border-bottom: 1px solid #e6e2d8 !important;
  padding: clamp(6.6rem, 10vw, 8.2rem) 0 clamp(1.9rem, 3.4vw, 2.6rem) !important;
}

body.tp-terms-page .tp-terms-container {
  max-width: 880px !important;
}

body.tp-terms-page .tp-terms-kicker {
  background: #f3f1ec !important;
  border: 1px solid #ded9ce !important;
  color: #475569 !important;
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 0.85rem !important;
}

body.tp-terms-page.fa .tp-terms-kicker,
body.tp-terms-page .tp-terms-kicker :is(.lang-en, .lang-fa) {
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

body.tp-terms-page .tp-terms-hero h1 {
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: clamp(1.78rem, 3.2vw, 2.4rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  color: #0f2c6b !important;
  margin: 0 0 0.75rem !important;
}

body.tp-terms-page.fa .tp-terms-hero h1 {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-size: clamp(1.58rem, 2.9vw, 2.12rem) !important;
  font-weight: 500 !important;
  line-height: 1.38 !important;
  letter-spacing: 0 !important;
}

body.tp-terms-page .tp-terms-lead,
body.tp-terms-page .tp-terms-lead :is(.lang-en, .lang-fa, bdi) {
  font-size: clamp(0.96rem, 1.2vw, 1.04rem) !important;
  font-weight: 400 !important;
  line-height: 1.72 !important;
  color: #475569 !important;
  margin: 0 !important;
}

body.tp-terms-page.fa .tp-terms-lead,
body.tp-terms-page.fa .tp-terms-lead :is(.lang-fa, bdi) {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  line-height: 1.9 !important;
}

body.tp-terms-page .tp-terms-sec-head {
  margin: 0 0 1.1rem !important;
}

body.tp-terms-page .tp-terms-sec-head h2 {
  margin: 0 0 0.3rem !important;
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: clamp(1.18rem, 1.8vw, 1.36rem) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #0f2c6b !important;
}

body.tp-terms-page.fa .tp-terms-sec-head h2 {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

body.tp-terms-page .tp-terms-sec-head p {
  margin: 0 !important;
  font-size: 0.92rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #64748b !important;
}

body.tp-terms-page.fa .tp-terms-sec-head p {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  line-height: 1.82 !important;
}

body.tp-terms-page .tp-terms-clauses {
  gap: 0.9rem !important;
}

body.tp-terms-page .tp-terms-clause {
  padding: clamp(1.15rem, 2vw, 1.45rem) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid #e5e0d5 !important;
  box-shadow: none !important;
}

body.tp-terms-page .tp-terms-clause-head {
  gap: 0.65rem !important;
  margin-bottom: 0.55rem !important;
}

body.tp-terms-page .tp-terms-clause-num {
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 0.45rem !important;
  border-radius: 8px !important;
  background: #f4f2ec !important;
  border: 1px solid #e2ddd2 !important;
  color: #475569 !important;
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
}

body.tp-terms-page .tp-terms-clause :is(h2, h3) {
  margin: 0 !important;
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: clamp(1rem, 1.35vw, 1.08rem) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: #1e293b !important;
}

body.tp-terms-page.fa .tp-terms-clause :is(h2, h3) {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

body.tp-terms-page .tp-terms-clause p,
body.tp-terms-page .tp-terms-clause li,
body.tp-terms-page .tp-terms-acc-panel p,
body.tp-terms-page .tp-terms-acc-panel li,
body.tp-terms-page :is(.tp-terms-clause, .tp-terms-acc-panel) :is(.lang-en, .lang-fa, bdi) {
  font-family: "Roboto", sans-serif !important;
  font-size: 0.94rem !important;
  font-weight: 400 !important;
  line-height: 1.72 !important;
  color: #475569 !important;
}

body.tp-terms-page.fa .tp-terms-clause p,
body.tp-terms-page.fa .tp-terms-clause li,
body.tp-terms-page.fa .tp-terms-acc-panel p,
body.tp-terms-page.fa .tp-terms-acc-panel li,
body.tp-terms-page.fa :is(.tp-terms-clause, .tp-terms-acc-panel) .lang-fa {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.92 !important;
}

body.tp-terms-page .tp-terms-service-block {
  margin-top: 2.4rem !important;
  padding-top: 2rem !important;
  border-top: 1px solid #e6e2d8 !important;
}

body.tp-terms-page .tp-terms-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

body.tp-terms-page .tp-terms-acc-item {
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e5e0d5;
  box-shadow: none !important;
  overflow: hidden;
  transition: border-color 0.18s ease;
}

body.tp-terms-page .tp-terms-acc-item:hover,
body.tp-terms-page .tp-terms-acc-item[open] {
  border-color: #cbd5e1;
}

body.tp-terms-page .tp-terms-acc-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  cursor: pointer;
  user-select: none;
}

body.tp-terms-page .tp-terms-acc-summary::-webkit-details-marker {
  display: none;
}

body.tp-terms-page .tp-terms-acc-title {
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: 1.03rem !important;
  font-weight: 600 !important;
  line-height: 1.38 !important;
  color: #0f2c6b !important;
}

body.tp-terms-page.fa .tp-terms-acc-title,
body.tp-terms-page.fa .tp-terms-acc-title .lang-fa {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

body.tp-terms-page .tp-terms-acc-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Roboto", sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  color: #64748b !important;
  flex-shrink: 0;
}

body.tp-terms-page.fa .tp-terms-acc-hint,
body.tp-terms-page.fa .tp-terms-acc-hint .lang-fa {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-weight: 400 !important;
}

body.tp-terms-page .tp-terms-acc-item[open] .tp-terms-acc-hint > :is(.lang-en, .lang-fa) {
  display: none !important;
}

body.tp-terms-page .tp-terms-acc-icon {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f4f2ec;
  border: 1px solid #ded9ce;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.tp-terms-page .tp-terms-acc-icon::before,
body.tp-terms-page .tp-terms-acc-icon::after {
  content: "";
  position: absolute;
  background: #334155;
  border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

body.tp-terms-page .tp-terms-acc-icon::before {
  width: 11px;
  height: 1.5px;
}

body.tp-terms-page .tp-terms-acc-icon::after {
  width: 1.5px;
  height: 11px;
}

body.tp-terms-page .tp-terms-acc-item[open] .tp-terms-acc-icon {
  background: #edf2f7;
  border-color: #cbd5e1;
}

body.tp-terms-page .tp-terms-acc-item[open] .tp-terms-acc-icon::after {
  transform: scaleY(0);
  opacity: 0;
}

body.tp-terms-page .tp-terms-acc-panel {
  padding: 0 1.35rem 1.25rem;
  border-top: 1px solid #f1efe9;
}

body.tp-terms-page .tp-terms-acc-panel ul {
  margin: 0.9rem 0 0;
  padding-inline-start: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

body.tp-terms-page .tp-terms-cta-card {
  margin-top: 2.2rem !important;
  border-radius: 16px !important;
  border: 1px solid #e5e0d5 !important;
  box-shadow: none !important;
}

body.tp-terms-page .tp-terms-cta-copy h2 {
  font-size: 1.08rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
}

body.tp-terms-page.fa .tp-terms-cta-copy h2 {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-weight: 500 !important;
}

body.tp-terms-page .tp-terms-cta-copy p,
body.tp-terms-page.fa .tp-terms-cta-copy p {
  font-weight: 400 !important;
  color: #64748b !important;
}

body.tp-terms-page .tp-terms-btn {
  font-weight: 500 !important;
}

@media (max-width: 640px) {
  body.tp-terms-page .tp-terms-acc-hint > :is(.lang-en, .lang-fa) {
    display: none !important;
  }
}

/* ==========================================================================
   v209 — Checkout Modal, Payment Radios & Booking Form UI/UX Typographic
   Hierarchy (400 Regular Prose & Hints · 500 Medium Labels · Selective Emphasis)
   ========================================================================== */
.tp-checkout-modal,
.tp-checkout-modal *,
.tp-booking-hub,
.tp-booking-hub *,
.tp-payplan-radios,
.tp-payplan-radios * {
  font-synthesis: none !important;
}

/* 1. Eyebrow Kicker & Secondary Invoice Badge */
.tp-cal-kicker,
.tp-checkout-modal .tp-cal-kicker.is-pay-kicker {
  font-family: "Roboto", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  background: #f4f7fb !important;
  color: #334155 !important;
  border: 1px solid #dde5f0 !important;
}

body.fa .tp-cal-kicker,
body.fa .tp-checkout-modal .tp-cal-kicker.is-pay-kicker {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.tp-cal-tz-badge,
.tp-checkout-modal .tp-cal-tz-badge.is-pay-tz {
  font-family: "Roboto", sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 400 !important;
  color: #475569 !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

body.fa .tp-cal-tz-badge,
body.fa .tp-checkout-modal .tp-cal-tz-badge.is-pay-tz {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-weight: 400 !important;
}

/* 2. Pre-Invoice Summary Line */
.tp-cal-order-top {
  font-family: "Roboto", sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  line-height: 1.56 !important;
  color: #475569 !important;
}

body.fa .tp-cal-order-top {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-size: 0.84rem !important;
  line-height: 1.74 !important;
}

.tp-cal-order-top .tp-order-top-label,
.tp-cal-order-top .tp-order-top-total-lbl {
  font-weight: 500 !important;
  color: #1e293b !important;
}

.tp-cal-order-top strong {
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-weight: 600 !important;
  color: #0f2c6b !important;
}

body.fa .tp-cal-order-top strong {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-weight: 700 !important;
}

/* 3. Payment Plan Radios — Regular 400 Sentence + Selective Amount Emphasis */
.tp-payplan-radio-row,
.tp-payplan-radio-row .tp-payplan-radio-copy,
.tp-payplan-radio-row.is-active,
.tp-payplan-radio-row.is-active .tp-payplan-radio-copy {
  font-family: "Roboto", sans-serif !important;
  font-size: 0.86rem !important;
  font-weight: 400 !important;
  line-height: 1.52 !important;
  color: #475569 !important;
}

body.fa .tp-payplan-radio-row,
body.fa .tp-payplan-radio-row .tp-payplan-radio-copy,
body.fa .tp-payplan-radio-row.is-active,
body.fa .tp-payplan-radio-row.is-active .tp-payplan-radio-copy {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  line-height: 1.72 !important;
}

.tp-payplan-radio-row.is-active {
  background: #ffffff !important;
  border-color: #0f2c6b !important;
  box-shadow: 0 4px 14px -8px rgba(15, 44, 107, 0.16) !important;
}

.tp-payplan-radio-row.is-active .tp-payplan-radio-copy {
  color: #1e293b !important;
}

.tp-payplan-radio-copy strong {
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-weight: 500 !important;
  color: #1e293b !important;
}

.tp-payplan-radio-row.is-active .tp-payplan-radio-copy strong {
  font-weight: 600 !important;
  color: #0f2c6b !important;
}

body.fa .tp-payplan-radio-copy strong {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-weight: 500 !important;
  color: #1e293b !important;
}

body.fa .tp-payplan-radio-row.is-active .tp-payplan-radio-copy strong {
  font-weight: 700 !important;
  color: #0f2c6b !important;
}

/* 4. Form Field Labels (500 Medium) + Parenthetical Hints (400 Muted) */
.tp-cal-field label {
  font-family: "Roboto", sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  color: #1e293b !important;
}

body.fa .tp-cal-field label {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  line-height: 1.62 !important;
}

.tp-cal-field label .tp-cal-label-hint {
  font-weight: 400 !important;
  font-size: 0.76rem !important;
  color: #64748b !important;
}

.tp-cal-field label .tp-cal-req {
  font-weight: 400 !important;
  color: #ef4444 !important;
}

.tp-cal-input,
.tp-cal-textarea {
  font-weight: 400 !important;
  color: #0f172a !important;
}

.tp-cal-input::placeholder,
.tp-cal-textarea::placeholder {
  font-weight: 400 !important;
  color: #94a3b8 !important;
}

/* 5. Agreement Checkbox & Electronic Signature Preview */
.tp-checkout-agreement-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

.tp-checkout-agreement-box.is-checked {
  background: #f4f8fd !important;
  border-color: #0f2c6b !important;
}

.tp-checkout-agreement-text {
  font-family: "Roboto", sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 400 !important;
  line-height: 1.56 !important;
  color: #475569 !important;
}

body.fa .tp-checkout-agreement-text {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-size: 0.83rem !important;
  font-weight: 400 !important;
  line-height: 1.76 !important;
}

.tp-checkout-terms-link {
  font-weight: 500 !important;
  color: #0f2c6b !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.tp-checkout-signature-row {
  border-top: 1px dashed #e2e8f0 !important;
}

.tp-checkout-sig-kicker {
  font-family: "Roboto", sans-serif !important;
  font-size: 0.77rem !important;
  font-weight: 400 !important;
  color: #64748b !important;
}

body.fa .tp-checkout-sig-kicker {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-weight: 400 !important;
}

.tp-checkout-sig-value {
  font-family: "Roboto", sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  color: #94a3b8 !important;
}

body.fa .tp-checkout-sig-value {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-weight: 400 !important;
}

.tp-checkout-signature-row.is-has-name .tp-checkout-sig-value {
  color: #64748b !important;
}

.tp-checkout-sig-value .tp-sig-name {
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-weight: 500 !important;
  color: #0f2c6b !important;
}

body.fa .tp-checkout-sig-value .tp-sig-name {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-weight: 500 !important;
}

/* 6. Quiet Reassurance Banner + Clean Primary Submit Button */
.tp-checkout-modal .tp-pay-coordination-note,
.tp-booking-hub--direct-pay .tp-pay-coordination-note {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

.tp-checkout-modal .tp-pay-coordination-icon,
.tp-booking-hub--direct-pay .tp-pay-coordination-icon {
  width: 20px !important;
  height: 20px !important;
  background: #e6f4f8 !important;
  color: #0e6077 !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
}

.tp-checkout-modal .tp-pay-coordination-note p,
.tp-booking-hub--direct-pay .tp-pay-coordination-note p {
  font-family: "Roboto", sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 400 !important;
  line-height: 1.58 !important;
  color: #475569 !important;
}

body.fa .tp-checkout-modal .tp-pay-coordination-note p,
body.fa .tp-booking-hub--direct-pay .tp-pay-coordination-note p {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-size: 0.83rem !important;
  font-weight: 400 !important;
  line-height: 1.76 !important;
}

.tp-cal-submit-btn,
.tp-checkout-modal .tp-cal-submit-btn.is-pay-submit {
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}

body.fa .tp-cal-submit-btn,
body.fa .tp-checkout-modal .tp-cal-submit-btn.is-pay-submit {
  font-family: "Shabnam", Tahoma, sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* ==========================================================================
   v210: Service-Aware Payment Milestone & Full-Upfront Marketing Radio States
   ========================================================================== */
.tp-payplan-radio-row[hidden] {
  display: none !important;
}

.tp-payplan-radio-row.is-locked-single {
  cursor: default !important;
}

.tp-est-block-head {
  flex-wrap: wrap;
}

.tp-est-block:has(> .tp-est-block-paynote) > .tp-est-block-head {
  margin-bottom: 0.4rem;
}

.tp-est-block-paynote {
  margin: 0 0 0.95rem;
  font-size: 0.81rem;
  line-height: 1.55;
  font-weight: 400;
  font-synthesis: none;
  color: #475569;
}

.tp-est-block-paynote strong,
.tp-est-block-paynote b {
  font-weight: 400;
  font-synthesis: none;
  color: inherit;
}

body.fa .tp-est-block-paynote {
  font-family: 'Shabnam', sans-serif;
  line-height: 1.72;
}

/* ==========================================================================
   v212: Concise Service Card Typography + Consultation Calendar Selection UX
   - Full-width estimator card prices/meta (only title reserves space for ×)
   - High-contrast selection-intent hover (desktop pointer only; zero mobile sticky hover)
   - Solid Tehranto Navy selected dates & time slots across hover/focus/tap
   - Visible × deselect badges on selected dates & time slots + Clear × pill action
   ========================================================================== */

.tp-est-opt {
  padding: 0.84rem 0.86rem !important;
}

.tp-est-opt:not([data-est-video="none"]):not([data-est-web="none"]):not([data-est-photo="none"]) .tp-est-opt-name {
  padding-inline-end: 1.38rem !important;
}

.tp-est-opt-meta,
.tp-est-opt-meta :is(.lang-en, .lang-fa, .keep-en) {
  font-size: 0.77rem !important;
  font-weight: 400 !important;
  line-height: 1.48 !important;
  color: #526077 !important;
  font-synthesis: none !important;
}

.tp-est-opt.is-dept-card.is-selected .tp-est-opt-meta,
.tp-est-opt.is-dept-card.is-selected .tp-est-opt-meta :is(.lang-en, .lang-fa, .keep-en) {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Touch-safe hover guard on estimator cards & calendar nav buttons */
.tp-est-opt:not(.is-selected):hover {
  border-color: var(--tp-pro-line) !important;
  background: #fbfaf7 !important;
  box-shadow: none !important;
}

.tp-cal-page-btn:hover:not(:disabled) {
  background: #ffffff;
  border-color: rgba(15, 44, 107, 0.14);
  color: #0f2c6b;
}

.tp-cal-month-btn:not(.is-active):hover {
  background: transparent;
  color: #485b7e;
}

@media (hover: hover) and (pointer: fine) {
  .tp-est-opt:not(.is-selected):hover {
    border-color: #0f2c6b !important;
    background: #f4f7fd !important;
    box-shadow: 0 6px 16px -8px rgba(15, 44, 107, 0.14) !important;
  }

  .tp-cal-page-btn:hover:not(:disabled) {
    background: #0f2c6b;
    border-color: #0f2c6b;
    color: #ffffff;
  }

  .tp-cal-month-btn:not(.is-active):hover {
    background: rgba(15, 44, 107, 0.08);
    color: #0f2c6b;
  }
}

.tp-cal-page-btn:active:not(:disabled) {
  background: #0f2c6b;
  border-color: #0f2c6b;
  color: #ffffff;
}

/* Calendar step header & empty states */
.tp-cal-step-label {
  flex-wrap: wrap;
}

.tp-cal-dates {
  overflow: visible;
}

.tp-cal-empty-state {
  grid-column: 1 / -1;
  padding: 0.95rem 1rem;
  border-radius: 12px;
  border: 1.5px dashed #cbd5e1;
  background: #f8fafc;
  color: #475569;
  font-size: 0.81rem;
  font-weight: 400;
  line-height: 1.55;
  text-align: center;
}

body.fa .tp-cal-empty-state {
  font-family: "Shabnam", Tahoma, sans-serif;
  line-height: 1.72;
}

/* Selected Time Summary Pill + Clear × Action */
.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-selected-pill {
  background: #eef4fc !important;
  border: 1.5px solid rgba(15, 44, 107, 0.24) !important;
  color: #1e3a6e !important;
}

.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-selected-pill.is-empty {
  background: #f8fafc !important;
  border: 1.5px dashed #cbd5e1 !important;
  color: #475569 !important;
}

.tp-cal-pill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.tp-cal-pill-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.tp-cal-pill-clear {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 44, 107, 0.25);
  background: #ffffff;
  color: #0f2c6b;
  font-family: inherit;
  font-size: 0.73rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

@media (hover: hover) and (pointer: fine) {
  .tp-cal-pill-clear:hover {
    background: #0f2c6b;
    border-color: #0f2c6b;
    color: #ffffff;
  }
}

.tp-cal-pill-clear:active {
  background: #0f2c6b;
  border-color: #0f2c6b;
  color: #ffffff;
}

/* 1. Calendar Date Buttons (.tp-cal-date-btn) — Resting, Selection-Intent Hover, Active & Selected */
.tp-booking-hub .tp-cal-dates .tp-cal-date-btn:not(.is-selected),
.tp-booking-hub .tp-cal-dates .tp-cal-date-btn:not(.is-selected):hover {
  position: relative;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f2c6b !important;
  box-shadow: 0 1px 2px rgba(15, 44, 107, 0.04) !important;
  transform: none;
}

.tp-booking-hub .tp-cal-dates .tp-cal-date-btn:not(.is-selected) :is(.tp-cal-date-dow, .tp-cal-date-day, .tp-cal-date-mon, .lang-en, .lang-fa) {
  color: #0f2c6b !important;
}

@media (hover: hover) and (pointer: fine) {
  .tp-booking-hub .tp-cal-dates .tp-cal-date-btn:not(.is-selected):hover {
    background: #e8f0fc !important;
    border-color: #0f2c6b !important;
    color: #091e4a !important;
    box-shadow: 0 6px 14px -5px rgba(15, 44, 107, 0.22) !important;
    transform: translateY(-1px);
  }

  .tp-booking-hub .tp-cal-dates .tp-cal-date-btn:not(.is-selected):hover :is(.tp-cal-date-dow, .tp-cal-date-day, .tp-cal-date-mon, .lang-en, .lang-fa) {
    color: #091e4a !important;
  }
}

.tp-booking-hub .tp-cal-dates .tp-cal-date-btn:not(.is-selected):active {
  background: #d6e4fa !important;
  border-color: #0f2c6b !important;
  color: #091e4a !important;
  transform: scale(0.975);
}

.tp-booking-hub .tp-cal-dates .tp-cal-date-btn.is-selected,
.tp-booking-hub .tp-cal-dates .tp-cal-date-btn.is-selected:hover,
.tp-booking-hub .tp-cal-dates .tp-cal-date-btn.is-selected:focus,
.tp-booking-hub .tp-cal-dates .tp-cal-date-btn.is-selected:active {
  position: relative;
  background: linear-gradient(145deg, #0f2c6b 0%, #174096 100%) !important;
  border: 1.5px solid #0f2c6b !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px -6px rgba(15, 44, 107, 0.34) !important;
}

.tp-booking-hub .tp-cal-dates .tp-cal-date-btn.is-selected :is(.tp-cal-date-dow, .tp-cal-date-day, .tp-cal-date-mon, .lang-en, .lang-fa) {
  color: #ffffff !important;
}

.tp-booking-hub .tp-cal-dates .tp-cal-date-btn.is-selected :is(.tp-cal-date-dow, .tp-cal-date-mon) {
  opacity: 0.9;
}

@media (hover: hover) and (pointer: fine) {
  .tp-booking-hub .tp-cal-dates .tp-cal-date-btn.is-selected:hover {
    background: linear-gradient(145deg, #0a2052 0%, #113278 100%) !important;
    border-color: #0a2052 !important;
    color: #ffffff !important;
  }

  .tp-booking-hub .tp-cal-dates .tp-cal-date-btn.is-selected:hover .tp-cal-remove {
    background: #dc2626 !important;
    border-color: #ffffff !important;
    transform: scale(1.06);
  }
}

.tp-booking-hub .tp-cal-dates .tp-cal-date-btn.is-selected .tp-cal-remove {
  position: absolute;
  inset-block-start: -0.32rem;
  inset-inline-end: -0.32rem;
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 1.12rem;
  block-size: 1.12rem;
  border-radius: 50%;
  background: #0b2255;
  border: 1.5px solid #ffffff;
  color: #ffffff !important;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(15, 44, 107, 0.3);
  pointer-events: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

/* 2. Calendar Time Slot Buttons (.tp-cal-slot-btn) — Zero Washout, Tactile Selection & Inline × */
.tp-booking-hub .tp-cal-slots-grid .tp-cal-slot-btn,
.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slots-grid .tp-cal-slot-btn {
  position: relative;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  min-height: 44px !important;
  padding: 0.5rem 0.45rem !important;
  white-space: nowrap !important;
}

.tp-booking-hub .tp-cal-slots-grid .tp-cal-slot-btn:not(.is-selected):not(.is-adjacent-next):not(:disabled),
.tp-booking-hub .tp-cal-slots-grid .tp-cal-slot-btn:not(.is-selected):not(.is-adjacent-next):not(:disabled):hover,
.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slots-grid .tp-cal-slot-btn:not(.is-selected):not(.is-adjacent-next):not(:disabled),
.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slots-grid .tp-cal-slot-btn:not(.is-selected):not(.is-adjacent-next):not(:disabled):hover {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f2c6b !important;
  box-shadow: 0 1px 2px rgba(15, 44, 107, 0.04) !important;
  transform: none;
}

.tp-booking-hub .tp-cal-slots-grid .tp-cal-slot-btn:not(.is-selected):not(:disabled) :is(.tp-cal-slot-time, .lang-en, .lang-fa),
.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slots-grid .tp-cal-slot-btn:not(.is-selected):not(:disabled) :is(.tp-cal-slot-time, .lang-en, .lang-fa) {
  color: #0f2c6b !important;
}

.tp-booking-hub .tp-cal-slots-grid .tp-cal-slot-btn.is-adjacent-next:not(.is-selected):not(:disabled),
.tp-booking-hub .tp-cal-slots-grid .tp-cal-slot-btn.is-adjacent-next:not(.is-selected):not(:disabled):hover,
.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slots-grid .tp-cal-slot-btn.is-adjacent-next:not(.is-selected):not(:disabled),
.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slots-grid .tp-cal-slot-btn.is-adjacent-next:not(.is-selected):not(:disabled):hover {
  background: #f2f6fd !important;
  border: 1.5px dashed #3b66b0 !important;
  color: #0f2c6b !important;
  box-shadow: none !important;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .tp-booking-hub .tp-cal-slots-grid .tp-cal-slot-btn:not(.is-selected):not(:disabled):hover,
  .tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slots-grid .tp-cal-slot-btn:not(.is-selected):not(:disabled):hover,
  .tp-booking-hub .tp-cal-slots-grid .tp-cal-slot-btn.is-adjacent-next:not(.is-selected):not(:disabled):hover,
  .tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slots-grid .tp-cal-slot-btn.is-adjacent-next:not(.is-selected):not(:disabled):hover {
    background: #e8f0fc !important;
    border-style: solid !important;
    border-color: #0f2c6b !important;
    color: #091e4a !important;
    box-shadow: 0 6px 14px -5px rgba(15, 44, 107, 0.22) !important;
    transform: translateY(-1px);
  }

  .tp-booking-hub .tp-cal-slots-grid .tp-cal-slot-btn:not(.is-selected):not(:disabled):hover :is(.tp-cal-slot-time, .lang-en, .lang-fa),
  .tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slots-grid .tp-cal-slot-btn:not(.is-selected):not(:disabled):hover :is(.tp-cal-slot-time, .lang-en, .lang-fa) {
    color: #091e4a !important;
  }
}

.tp-booking-hub .tp-cal-slots-grid .tp-cal-slot-btn:not(.is-selected):not(:disabled):active,
.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slots-grid .tp-cal-slot-btn:not(.is-selected):not(:disabled):active {
  background: #d6e4fa !important;
  border-style: solid !important;
  border-color: #0f2c6b !important;
  color: #091e4a !important;
  transform: scale(0.98);
}

.tp-booking-hub .tp-cal-slots-grid .tp-cal-slot-btn.is-selected,
.tp-booking-hub .tp-cal-slots-grid .tp-cal-slot-btn.is-selected:hover,
.tp-booking-hub .tp-cal-slots-grid .tp-cal-slot-btn.is-selected:focus,
.tp-booking-hub .tp-cal-slots-grid .tp-cal-slot-btn.is-selected:active,
.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slots-grid .tp-cal-slot-btn.is-selected,
.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slots-grid .tp-cal-slot-btn.is-selected:hover,
.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slots-grid .tp-cal-slot-btn.is-selected:focus,
.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slots-grid .tp-cal-slot-btn.is-selected:active {
  background: linear-gradient(135deg, #0f2c6b 0%, #174096 100%) !important;
  border: 1.5px solid #0f2c6b !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px -6px rgba(15, 44, 107, 0.34) !important;
}

.tp-booking-hub .tp-cal-slots-grid .tp-cal-slot-btn.is-selected :is(.tp-cal-slot-time, .lang-en, .lang-fa, .tp-cal-remove),
.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slots-grid .tp-cal-slot-btn.is-selected :is(.tp-cal-slot-time, .lang-en, .lang-fa, .tp-cal-remove) {
  color: #ffffff !important;
}

@media (hover: hover) and (pointer: fine) {
  .tp-booking-hub .tp-cal-slots-grid .tp-cal-slot-btn.is-selected:hover,
  .tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slots-grid .tp-cal-slot-btn.is-selected:hover {
    background: linear-gradient(135deg, #0a2052 0%, #113278 100%) !important;
    border-color: #0a2052 !important;
    color: #ffffff !important;
  }

  .tp-booking-hub .tp-cal-slots-grid .tp-cal-slot-btn.is-selected:hover .tp-cal-remove,
  .tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slots-grid .tp-cal-slot-btn.is-selected:hover .tp-cal-remove {
    background: rgba(255, 255, 255, 0.32) !important;
    border-color: #ffffff !important;
  }
}

.tp-booking-hub .tp-cal-slots-grid .tp-cal-slot-btn.is-selected .tp-cal-remove {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  inline-size: 1.02rem;
  block-size: 1.02rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.62);
  color: #ffffff !important;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.tp-booking-hub .tp-cal-slots-grid .tp-cal-slot-btn:disabled,
.tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slots-grid .tp-cal-slot-btn:disabled {
  background: #f1f5f9 !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
  opacity: 0.72 !important;
}

.tp-booking-hub .tp-cal-slots-grid .tp-cal-slot-btn:disabled :is(.tp-cal-slot-time, .lang-en, .lang-fa) {
  color: #94a3b8 !important;
}

.tp-booking-hub :is(.tp-cal-date-btn, .tp-cal-slot-btn, .tp-cal-pill-clear):focus-visible {
  outline: 2px solid #0f2c6b !important;
  outline-offset: 2px !important;
}

@media (max-width: 640px) {
  .tp-booking-hub .tp-cal-slots-grid .tp-cal-slot-btn,
  .tp-booking-hub:not(.tp-booking-hub--pay) .tp-cal-slots-grid .tp-cal-slot-btn {
    font-size: 0.71rem !important;
    padding: 0.46rem 0.3rem !important;
    gap: 0.24rem !important;
  }

  .tp-booking-hub .tp-cal-slots-grid .tp-cal-slot-btn.is-selected .tp-cal-remove {
    inline-size: 0.94rem;
    block-size: 0.94rem;
    font-size: 0.68rem;
  }
}

/* ==========================================================================
   v213 + v214: Separated Subtotal & Ontario 13% HST Rows, Direct Invoice
   Line Removal (×), & Preset-Free Clean Estimator Header
   ========================================================================== */
.tp-estimator-presets {
  display: none !important;
}

body.tp-dedicated-booking-page .tp-estimator-head {
  display: none !important;
  margin: 0 !important;
}

.tp-estimator-summary .tp-sum-lines {
  gap: 0.5rem !important;
  padding: 0.85rem 0 !important;
  margin-bottom: 0 !important;
}

.tp-estimator-summary .tp-sum-line.is-removable {
  align-items: center;
  padding-block: 0.48rem;
  padding-inline-start: 0.68rem;
  padding-inline-end: 0.52rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(95, 183, 204, 0.44);
  transition: background-color 0.16s ease, border-color 0.16s ease;
}

.tp-estimator-summary .tp-sum-line-label {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.38;
}

.tp-estimator-summary .tp-sum-line-end {
  display: inline-flex;
  align-items: center;
  gap: 0.46rem;
  flex-shrink: 0;
}

.tp-estimator-summary .tp-sum-line-remove {
  appearance: none;
  inline-size: 1.38rem;
  block-size: 1.38rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 44, 107, 0.22);
  background: rgba(255, 255, 255, 0.96);
  color: #0f2c6b;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.tp-estimator-summary .tp-sum-line-remove::after {
  content: "";
  position: absolute;
  inset: -0.38rem;
  border-radius: 999px;
}

@media (hover: hover) and (pointer: fine) {
  .tp-estimator-summary .tp-sum-line.is-removable:hover {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(15, 44, 107, 0.26);
  }

  .tp-estimator-summary .tp-sum-line-remove:hover {
    background: #fee2e2;
    border-color: #ef4444;
    color: #b91c1c;
  }

  .tp-estimator-summary .tp-sum-line.is-removable:has(.tp-sum-line-remove:hover) {
    background: #fff5f5;
    border-color: #fca5a5;
  }
}

.tp-estimator-summary .tp-sum-line-remove:focus-visible {
  outline: 2px solid #0f2c6b;
  outline-offset: 2px;
  background: #fee2e2;
  border-color: #ef4444;
  color: #b91c1c;
}

.tp-estimator-summary .tp-sum-line-remove:active {
  background: #fecaca;
  border-color: #dc2626;
  color: #991b1b;
  transform: scale(0.95);
}

.tp-estimator-summary .tp-sum-line.is-auto-fee:not(.is-waived) {
  align-items: center;
  padding-block: 0.2rem;
  padding-inline-start: 0.68rem;
  padding-inline-end: calc(0.52rem + 1.38rem + 0.46rem);
  color: #334155 !important;
  font-size: 0.82rem;
}

.tp-estimator-summary .tp-sum-line.is-auto-fee.is-waived {
  align-items: center;
  padding-block: 0.28rem;
  padding-inline: 0.68rem 0.56rem;
}

.tp-estimator-summary .tp-sum-line.is-empty {
  align-items: center;
  padding-block: 0.35rem;
  padding-inline: 0.2rem;
  color: #475569 !important;
}

.tp-estimator-summary .tp-sum-tax-breakdown {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 0 0.82rem !important;
  border: 0 !important;
  width: 100%;
}

.tp-estimator-summary .tp-sum-sub-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.75rem;
  font-size: 0.87rem;
  line-height: 1.4;
  padding: 0.72rem 0.15rem;
}

.tp-estimator-summary .tp-sum-sub-row.is-subtotal-row {
  border-bottom: 1px solid rgba(13, 89, 112, 0.18);
}

.tp-estimator-summary .tp-sum-sub-row.is-hst-row {
  border-bottom: 1px dashed rgba(13, 89, 112, 0.28);
}

.tp-estimator-summary .tp-sum-sub-label {
  color: #1e293b;
  font-weight: 500;
  font-synthesis: none;
}

.tp-estimator-summary .tp-sum-sub-val {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.08rem;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}

body.fa .tp-estimator-summary .tp-sum-sub-val {
  align-items: flex-start;
}

.tp-estimator-summary .tp-sum-sub-val .tp-sum-old-total {
  display: inline-block;
  margin: 0 !important;
  font-size: 0.76rem;
  line-height: 1.15;
  font-weight: 600;
  color: #b91c1c !important;
  text-decoration: line-through;
  text-align: right;
  direction: ltr;
  unicode-bidi: isolate;
}

.tp-estimator-summary .tp-sum-sub-val .tp-sum-old-total[hidden] {
  display: none !important;
}

.tp-estimator-summary .tp-sum-sub-price {
  color: #0f2c6b;
  font-weight: 700;
  font-size: 0.94rem;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tp-estimator-summary .tp-sum-sub-price.is-hst-val {
  color: #0b4c63;
  font-weight: 600;
  font-size: 0.9rem;
}

body.fa .tp-estimator-summary .tp-sum-sub-price .lang-fa {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  display: inline-block;
  font-family: 'Shabnam', sans-serif;
}

.tp-estimator-summary .tp-sum-total-row {
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.tp-estimator-summary .tp-sum-total-amount {
  font-size: clamp(1.68rem, 2.55vw, 2.25rem);
  font-variant-numeric: tabular-nums;
}

.tp-cal-order-top .tp-order-top-items {
  line-height: 1.55;
}

.tp-cal-order-top .tp-order-top-tax {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.34rem 0.74rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  font-weight: 400;
  font-synthesis: none;
}

.tp-cal-order-top .tp-order-tax-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.38rem 0;
  font-size: 0.84rem;
  line-height: 1.38;
  color: #334155;
}

.tp-cal-order-top .tp-order-tax-row.is-subtotal {
  border-bottom: 1px solid #e2e8f0;
}

.tp-cal-order-top .tp-order-tax-row.is-hst {
  border-bottom: 1px dashed #cbd5e1;
}

.tp-cal-order-top .tp-order-tax-row.is-total {
  padding-top: 0.46rem;
  padding-bottom: 0.16rem;
  font-size: 0.88rem;
}

.tp-cal-order-top .tp-order-tax-val {
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #0f2c6b;
}

.tp-cal-order-top .tp-order-tax-val.is-hst-val {
  color: #0b4c63;
  font-weight: 500;
}

.tp-cal-order-top .tp-order-tax-val.is-total-val,
.tp-cal-order-top .tp-order-top-tax strong {
  color: #0f2c6b;
  font-weight: 700;
  font-size: 0.94rem;
}

body.fa .tp-cal-order-top .tp-order-tax-val .lang-fa {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  display: inline-block;
}

@media (max-width: 480px) {
  .tp-estimator-summary .tp-sum-total-amount {
    font-size: clamp(1.52rem, 5.8vw, 1.92rem);
  }

  .tp-estimator-summary .tp-sum-line.is-removable {
    padding-inline-start: 0.58rem;
    padding-inline-end: 0.46rem;
  }

  .tp-estimator-summary .tp-sum-line.is-auto-fee:not(.is-waived) {
    padding-inline-start: 0.58rem;
    padding-inline-end: calc(0.46rem + 1.38rem + 0.46rem);
  }
}

/* ==========================================================================
   v216: Title-Only Estimator Header & Post-Payment Invoice Delivery UI
   ========================================================================== */
.tp-estimator-sub {
  display: none !important;
}

.tp-estimator-head {
  margin-bottom: 1.85rem !important;
}

.tp-estimator-title:last-child,
.tp-dedicated-hero-inner h1:last-child {
  margin-bottom: 0 !important;
}

.tp-modal-title-confirmed {
  display: none;
}

#tp-checkout-modal.is-confirmed-state .tp-modal-title-default {
  display: none !important;
}

#tp-checkout-modal.is-confirmed-state .tp-modal-title-confirmed {
  display: inline !important;
}

.tp-cal-confirm-delivery {
  margin: 0.55rem 0 0.85rem;
  padding: 0.68rem 0.9rem;
  border-radius: 12px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  font-size: 0.81rem;
  line-height: 1.55;
}

.tp-cal-confirm-delivery strong {
  color: #064e3b;
  font-weight: 700;
}

.tp-cal-confirm-actions {
  gap: 0.65rem;
  margin-top: 0.85rem;
  margin-bottom: 0.85rem;
}

.tp-cal-confirm-link {
  padding: 0.62rem 1.1rem;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1.5px solid #0f2c6b;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.tp-cal-confirm-link.is-outline {
  background: #ffffff;
  color: #0f2c6b;
  border: 1.5px solid #0f2c6b;
}

@media (hover: hover) and (pointer: fine) {
  .tp-cal-confirm-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -10px rgba(15, 44, 107, 0.45);
  }
  .tp-cal-confirm-link.is-outline:hover {
    background: #f0f5ff;
  }
}

/* =========================================================================
   v217: Light-Blue Default tehranto.club Capsule, Gold tehranto.io Capsule
         on Web Surfaces, and Dedicated tehranto.io Hero Callout Banner
   ========================================================================= */
.tp-offer-float .tp-club-float-card:not(.is-io-mode) {
  border-color: rgba(59, 130, 246, 0.28) !important;
}

.tp-offer-float .tp-club-float-card:not(.is-io-mode) .tp-club-float-cta {
  background: linear-gradient(160deg, #eff6ff 0%, #dbeafe 100%) !important;
  border: 1px solid #93c5fd !important;
  color: #0f2c6b !important;
}

.tp-offer-float .tp-club-float-card:not(.is-io-mode) .tp-club-float-label {
  color: #1d4ed8 !important;
}

.tp-offer-float .tp-club-float-card:not(.is-io-mode) .tp-club-float-domain {
  color: #0f2c6b !important;
}

.tp-offer-float .tp-club-float-card:not(.is-io-mode) .tp-club-float-link:hover .tp-club-float-cta,
.tp-offer-float .tp-club-float-card:not(.is-io-mode) .tp-club-float-link:focus-visible .tp-club-float-cta {
  background: linear-gradient(135deg, #0f2c6b 0%, #1d4ed8 100%) !important;
  border-color: #0f2c6b !important;
}

.tp-offer-float .tp-club-float-card:not(.is-io-mode) .tp-club-float-link:hover .tp-club-float-label,
.tp-offer-float .tp-club-float-card:not(.is-io-mode) .tp-club-float-link:focus-visible .tp-club-float-label {
  color: #dbeafe !important;
}

.tp-offer-float .tp-club-float-card:not(.is-io-mode) .tp-club-float-link:hover .tp-club-float-domain,
.tp-offer-float .tp-club-float-card:not(.is-io-mode) .tp-club-float-link:focus-visible .tp-club-float-domain {
  color: #ffffff !important;
}

.tp-offer-float .tp-club-float-card.is-io-mode {
  border-color: rgba(212, 155, 53, 0.52) !important;
}

.tp-offer-float .tp-club-float-card.is-io-mode .tp-club-float-cta {
  background: linear-gradient(155deg, #fef3c7 0%, #f5d98e 100%) !important;
  border: 1px solid #d49b35 !important;
  color: #0f2c6b !important;
}

.tp-offer-float .tp-club-float-card.is-io-mode .tp-club-float-label {
  color: #784c0a !important;
}

.tp-offer-float .tp-club-float-card.is-io-mode .tp-club-float-domain {
  color: #0f2c6b !important;
}

.tp-offer-float .tp-club-float-card.is-io-mode .tp-club-float-link:hover .tp-club-float-cta,
.tp-offer-float .tp-club-float-card.is-io-mode .tp-club-float-link:focus-visible .tp-club-float-cta {
  background: linear-gradient(135deg, #0f2c6b 0%, #153c8d 100%) !important;
  border-color: #d49b35 !important;
}

.tp-offer-float .tp-club-float-card.is-io-mode .tp-club-float-link:hover .tp-club-float-label,
.tp-offer-float .tp-club-float-card.is-io-mode .tp-club-float-link:focus-visible .tp-club-float-label {
  color: #fde68a !important;
}

.tp-offer-float .tp-club-float-card.is-io-mode .tp-club-float-link:hover .tp-club-float-domain,
.tp-offer-float .tp-club-float-card.is-io-mode .tp-club-float-link:focus-visible .tp-club-float-domain {
  color: #ffffff !important;
}

.tp-io-hero-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 1.4rem;
  padding: 0.7rem 0.85rem 0.7rem 1rem;
  border-radius: 16px;
  background: linear-gradient(135deg, #fffdf6 0%, #fef3d2 100%);
  border: 1px solid rgba(212, 155, 53, 0.5);
  box-shadow: none !important;
}

.tp-io-hero-banner--section {
  max-width: 820px;
  margin: 1.15rem auto 0;
  text-align: start;
}

.tp-io-hero-banner-copy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem 0.75rem;
  min-width: 0;
}

.tp-io-hero-kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.24rem 0.65rem;
  border-radius: 999px;
  background: rgba(212, 155, 53, 0.22);
  border: 1px solid rgba(212, 155, 53, 0.48);
  color: #784c0a;
  font-family: "Google Sans", "Roboto", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}

body.fa .tp-io-hero-kicker {
  font-family: "Shabnam", Tahoma, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0;
  text-transform: none;
}

.tp-io-hero-text {
  color: #0f2c6b;
  font-family: "Roboto", "Google Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.48;
}

body.fa .tp-io-hero-text {
  font-family: "Shabnam", Tahoma, sans-serif;
  font-size: 0.9rem;
  line-height: 1.65;
}

.tp-io-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.52rem 1.02rem;
  border-radius: 999px;
  background: #0f2c6b;
  border: 1px solid #0f2c6b;
  color: #fde68a !important;
  font-family: "Google Sans", "Roboto", sans-serif !important;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  box-shadow: none !important;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

@media (hover: hover) and (pointer: fine) {
  .tp-io-hero-cta:hover {
    background: #153c8d;
    border-color: #153c8d;
    color: #ffffff !important;
  }
}

.tp-io-hero-cta:focus-visible {
  outline: 2px solid #d49b35;
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .tp-io-hero-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    padding: 0.8rem 0.9rem;
  }

  .tp-io-hero-cta {
    width: 100%;
    padding: 0.58rem 1rem;
  }
}





/* ==========================================================================
   v228 — Site-Wide Harmonized Gutter & Floating Overlay Frame Rail
   1. Outer Floating Frame Rail (--tp-float-inset: 24px–36px on >=641px)
      unifies Chat · Consult · Book, UP TO 50% OFF countdown, tehranto.club /
      tehranto.io capsule, tablet floating menu circle, and consent banner on
      one crisp viewport safe-rail in both LTR (EN) and RTL (FA).
   2. Inner Editorial Content Margin (--tp-page-gutter: 52px–60px on >=641px)
      keeps page containers cleanly stepped inward from the floating rail so
      popups never rub against content card borders or tablet bezels.
   3. Preserves protected Homepage hero & <=640px mobile layouts unchanged.
   ========================================================================== */

:root {
  --tp-float-inset: clamp(1.5rem, 2.8vw, 2.25rem);
  --tp-float-bottom: clamp(1.35rem, 2.4vw, 2rem);
  --tp-page-gutter: clamp(3.25rem, 6vw, 3.75rem);
}

@media (min-width: 641px) {
  html body .tp-offer-float {
    left: var(--tp-float-inset) !important;
    right: auto !important;
    bottom: var(--tp-float-bottom) !important;
  }

  html body.fa .tp-offer-float {
    left: auto !important;
    right: var(--tp-float-inset) !important;
    bottom: var(--tp-float-bottom) !important;
  }

  html body tehranto-contact-launcher button.tp-launch-trigger[aria-controls],
  html body tehranto-contact-launcher section.tp-launch-panel[role="dialog"] {
    right: var(--tp-float-inset) !important;
    left: auto !important;
    bottom: var(--tp-float-bottom) !important;
  }

  html body.fa tehranto-contact-launcher button.tp-launch-trigger[aria-controls],
  html body.fa tehranto-contact-launcher section.tp-launch-panel[role="dialog"] {
    right: auto !important;
    left: var(--tp-float-inset) !important;
    bottom: var(--tp-float-bottom) !important;
  }

  html body #tpMeasurementConsent {
    left: var(--tp-float-inset) !important;
    right: auto !important;
    bottom: var(--tp-float-bottom) !important;
  }

  html body.fa #tpMeasurementConsent {
    right: var(--tp-float-inset) !important;
    left: auto !important;
    bottom: var(--tp-float-bottom) !important;
  }

  .tp-prog-wrap,
  .tp-pro-container,
  body:not(.website-projects-approved--home) .container,
  body.website-projects-approved--home main > section:not(.hero) > .container,
  .wa-container,
  body.tp-terms-page .tp-terms-container {
    box-sizing: border-box;
    padding-inline: var(--tp-page-gutter);
  }

  main > article .container,
  .post-hero .container {
    max-width: calc(1080px + (2 * var(--tp-page-gutter))) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-inline: var(--tp-page-gutter) !important;
  }

  .container > :is(.post-body, .post-cta, .post-related) {
    max-width: none !important;
    width: 100% !important;
  }

  .tp-about-hero,
  .tp-about-section,
  .tp-contact-page-hero,
  html body tehranto-contact-form .tp-contact-section,
  html body tehranto-footer .tp-classic-footer {
    box-sizing: border-box !important;
    padding-inline: var(--tp-page-gutter) !important;
  }

  .tp-portfolio-container {
    width: min(1280px, calc(100% - (2 * var(--tp-page-gutter))));
  }
}

@media (min-width: 641px) and (max-width: 1120px) {
  html body tehranto-header button.tp-classic-floating[data-shell-open],
  html body tehranto-header button.tp-classic-close[data-shell-close] {
    top: 1.35rem !important;
    right: var(--tp-float-inset) !important;
    left: auto !important;
  }

  html body.fa tehranto-header button.tp-classic-floating[data-shell-open],
  html body.fa tehranto-header button.tp-classic-close[data-shell-close] {
    top: 1.35rem !important;
    right: auto !important;
    left: var(--tp-float-inset) !important;
  }
}