:root{
  --primary:#4C1D95;--primary2:#6D28D9;--soft-purple:#F1EBFF;--dark-soft-purple:#2A2338;
  --success:#059669;--warning:#D97706;--error:#DC2626;
  --bg:#F7F7FA;--card:#FFFFFF;--divider:#E8E5EF;--text:#111827;--text2:#6B7280;
  --dark:#0E0D13;--radius:18px;--radius2:12px;--shadow:0 18px 60px rgba(76,29,149,.12);--shadow2:0 30px 90px rgba(76,29,149,.18);
  --grad:linear-gradient(135deg,#4C1D95,#7C3AED);--grad-soft:linear-gradient(160deg,#FFFFFF 0%,#F7F7FA 42%,#F1EBFF 100%);
}
[data-theme="dark"]{--bg:#0E0D13;--card:#17141F;--divider:#2A2638;--text:#F3F4F6;--text2:#AAA3BC;--soft-purple:#2A2338;--shadow:0 18px 70px rgba(0,0,0,.4);--shadow2:0 30px 100px rgba(0,0,0,.55);--grad-soft:linear-gradient(160deg,#0E0D13 0%,#17141F 55%,#2A2338 100%)}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  text-decoration: none;
  color: inherit
}

img {
  max-width: 100%;
  display: block
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 22px
}

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--divider)
}

.nav-inner {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: .08em
}

.brand img {
  width: 38px;
  height: 38px;
  border-radius: 10px
}

.brand span {
  font-size: 18px
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px
}

.nav-links a {
  font-size: 14px;
  font-weight: 650;
  color: var(--text2)
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--primary)
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px
}

.theme-toggle,
.hamburger {
  border: 1px solid var(--divider);
  background: var(--card);
  color: var(--primary);
  border-radius: 12px;
  cursor: pointer
}

.theme-toggle {
  width: 40px;
  height: 40px
}

.hamburger {
  display: none;
  padding: 10px
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--primary);
  margin: 4px 0
}

.mobile-menu {
  display: none;
  background: var(--card);
  border-bottom: 1px solid var(--divider);
  padding: 10px 22px 20px
}

.mobile-menu.open {
  display: flex;
  flex-direction: column
}

.mobile-menu a {
  padding: 13px 0;
  border-bottom: 1px solid var(--divider);
  font-weight: 650
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 800;
  transition: .18s;
  border: 1px solid transparent
}

.btn:hover {
  transform: translateY(-2px)
}

.btn-primary {
  background: var(--grad);
  color: white;
  box-shadow: 0 12px 30px rgba(76, 29, 149, .25)
}

.btn-secondary {
  background: var(--card);
  border-color: var(--divider);
  color: var(--text)
}

.btn-link {
  padding: 10px 4px;
  color: var(--text2)
}

.hero {
  position: relative;
  overflow: hidden;
  background: var(--grad-soft);
  padding: 86px 0 70px
}

.hero:before {
  content: "";
  position: absolute;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, .14), transparent 65%);
  top: -330px;
  left: 50%;
  transform: translateX(-50%)
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 46px;
  align-items: center
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--soft-purple) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase
}

.hero h1 {
  font-size: 64px;
  line-height: .98;
  letter-spacing: -.06em;
  margin: 20px 0 18px;
  max-width: 680px
}

.hero h1 span {
  background: var(--grad);
  -webkit-background-clip: text;
  color: transparent
}

.hero p {
  font-size: 18px;
  color: var(--text2);
  max-width: 610px
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 30px 0
}

.micro {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--text2);
  font-size: 13px
}

.micro b {
  color: var(--text)
}

.phones {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  min-height: 520px
}

.phone {
  background: linear-gradient(180deg, #fff, #f8f4ff);
  border: 1px solid #DED6EF;
  border-radius: 38px;
  padding: 9px;
  box-shadow: var(--shadow2);
  position: relative
}

.phone.main {
  width: 250px
}

.phone.side {
  width: 205px;
  transform: translateY(32px);
  opacity: .92
}

.notch {
  width: 66px;
  height: 20px;
  border-radius: 0 0 14px 14px;
  background: #ECEAF0;
  margin: 0 auto 7px
}

.screen {
  height: 440px;
  border-radius: 29px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--divider)
}

.side .screen {
  height: 365px
}

.appshot {
  height: 100%;
  background: linear-gradient(180deg, var(--card), var(--bg));
  padding: 16px;
  color: var(--text)
}

.shot-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px
}

.dot {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--grad)
}

.shot-title {
  font-size: 14px;
  font-weight: 850
}

.total-card {
  background: var(--grad);
  color: #fff;
  border-radius: 22px;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 16px 34px rgba(76, 29, 149, .28)
}

.total-card small {
  opacity: .78
}

.total-card strong {
  display: block;
  font-size: 29px;
  letter-spacing: -.04em
}

.pill-row {
  display: flex;
  gap: 7px;
  margin: 14px 0
}

.pill {
  background: var(--soft-purple);
  color: var(--primary);
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800
}

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 12px
}

.list-row b {
  font-size: 13px
}

.ok {
  color: var(--success);
  font-weight: 900
}

.warn {
  color: var(--warning);
  font-weight: 900
}

.mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 84px;
  margin: 16px 0
}

.mini-bars i {
  display: block;
  flex: 1;
  border-radius: 7px 7px 0 0;
  background: var(--primary);
  opacity: .25
}

.mini-bars i:nth-child(2) {
  height: 55%;
  opacity: .4
}

.mini-bars i:nth-child(3) {
  height: 78%;
  opacity: .55
}

.mini-bars i:nth-child(4) {
  height: 48%;
  opacity: .35
}

.mini-bars i:nth-child(5) {
  height: 92%;
  opacity: .8
}

.section {
  padding: 84px 0
}

.section-head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 44px
}

.section-label {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: 10px
}

.section-title {
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -.04em;
  margin-bottom: 14px
}

.section-sub {
  color: var(--text2);
  font-size: 16px
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.card {
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
  transition: .18s
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow2)
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--soft-purple);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  margin-bottom: 18px
}

.card h3 {
  font-size: 17px;
  margin-bottom: 8px
}

.card p {
  color: var(--text2);
  font-size: 14px
}

.strip {
  background: var(--card);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  padding: 32px 0
}

.strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px
}

.metric {
  padding: 20px;
  border-radius: 16px;
  background: var(--bg);
  border: 1px solid var(--divider)
}

.metric strong {
  font-size: 26px;
  color: var(--primary);
  display: block
}

.metric span {
  font-size: 13px;
  color: var(--text2);
  font-weight: 650
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 42px;
  align-items: center
}

.panel {
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: 28px;
  padding: 34px;
  box-shadow: var(--shadow)
}

.steps {
  display: grid;
  gap: 14px
}

.step {
  display: flex;
  gap: 15px;
  padding: 18px;
  border: 1px solid var(--divider);
  background: var(--bg);
  border-radius: 16px
}

.step-num {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--grad);
  color: white;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto
}

.industries {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center
}

.chip {
  padding: 9px 13px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  background: var(--card);
  font-size: 13px;
  font-weight: 700;
  color: var(--text2)
}

.cta {
  background: linear-gradient(135deg, #211130, #4C1D95);
  color: white;
  border-radius: 34px;
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  box-shadow: var(--shadow2)
}

.cta p {
  color: #D8CCE9
}

.store-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px
}

.store {
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 14px;
  padding: 10px 14px;
  color: white;
  background: rgba(255, 255, 255, .08);
  font-size: 13px;
  font-weight: 800
}

.page-header {
  background: var(--grad-soft);
  padding: 78px 0;
  text-align: center;
  border-bottom: 1px solid var(--divider)
}

.page-header h1 {
  font-size: 48px;
  letter-spacing: -.05em
}

.page-header p {
  color: var(--text2);
  font-size: 17px
}

.content {
  max-width: 850px;
  margin: 0 auto;
  padding: 70px 22px
}

.content h2 {
  font-size: 24px;
  margin: 30px 0 10px
}

.content p,
.content li {
  color: var(--text2);
  margin-bottom: 12px
}

.content ul {
  padding-left: 22px
}

.support-grid {
  max-width: 1000px;
  margin: 0 auto;
  padding: 70px 22px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 26px
}

.form-group {
  margin-bottom: 16px
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 7px
}

/* Inputs + selects use identical sizing */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    height: 56px;
    padding: 0 18px;
    border: 1px solid var(--divider);
    border-radius: 16px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 16px;
    line-height: 1.4;
    transition: .2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.form-group textarea{
    height:auto;
    min-height:170px;
    padding:16px 18px;
    resize:vertical;
}
/* Better dropdown arrow */
.form-group select{
    cursor:pointer;
    padding-right:54px;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat:no-repeat;
    background-position:right 18px center;
    background-size:18px;
}
.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(109,40,217,.12);
}

#site-footer {
  margin-top: auto;
}

/* footer {
  background: #0E0D13;
  color: #AAA3BC;
  padding: 48px 0 24px
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 30px;
  margin-bottom: 34px
}

.footer-grid .brand span {
  color: #fff
}

.footer-grid p {
  font-size: 14px;
  max-width: 310px;
  margin-top: 12px
}

.footer-col h4 {
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 12px
}

.footer-col a {
  display: block;
  margin: 8px 0;
  font-size: 14px;
  color: #AAA3BC
}

.footer-bottom {
  border-top: 1px solid #2A2638;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 13px
} */

/* =========================================================
   FOOTER
   ========================================================= */

footer {
    background: linear-gradient(
        180deg,
        #F3EEFF 0%,
        #E9E0FF 100%
    );
    color: var(--text2);
    padding: 56px 0 24px;
    border-top: 1px solid #D9CCF7;
}
/* footer {
    background: linear-gradient(
        180deg,
        #F0EAFF 0%,
        #E6DBFF 100%
    );

    border-top: 1px solid #D7C7FA;
    color: var(--text2);
    padding: 48px 0 24px;
} */
 
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 30px;
    margin-bottom: 34px;
}

.footer-grid .brand {
    margin-bottom: 12px;
}

.footer-grid .brand span {
    color: var(--text);
}

.footer-grid p {
    font-size: 14px;
    max-width: 320px;
    color: var(--text2);
    line-height: 1.8;
}

.footer-col h4 {
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 14px;
}

.footer-col a {
    display: block;
    margin: 10px 0;
    font-size: 14px;
    color: var(--text2);
    transition: color .2s ease;
}

.footer-col a:hover {
    color: var(--primary);
}

.footer-bottom {
    border-top: 1px solid #D9CCF7;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-size: 13px;
    color: var(--text2);
}

/* Dark mode */

[data-theme="dark"] footer {
    background: linear-gradient(
        180deg,
        #221A34 0%,
        #17141F 100%
    );
    border-top: 1px solid var(--divider);
}

[data-theme="dark"] .footer-grid .brand span,
[data-theme="dark"] .footer-col h4 {
    color: #fff;
}

[data-theme="dark"] .footer-grid p,
[data-theme="dark"] .footer-col a,
[data-theme="dark"] .footer-bottom {
    color: #B8B1C9;
}

[data-theme="dark"] .footer-col a:hover {
    color: #fff;
}

[data-theme="dark"] .footer-bottom {
    border-top: 1px solid var(--divider);
}

.todo {
  background: rgba(217, 119, 6, .1);
  border: 1px solid rgba(217, 119, 6, .3);
  color: var(--warning);
  padding: 12px 14px;
  border-radius: 14px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700
}@media(max-width:920px){.nav-links,.nav-actions .btn-link{display:none}.hamburger{display:block}.hero-grid,.split,.support-grid,.cta{grid-template-columns:1fr}.hero{text-align:center}.hero h1{font-size:46px}.hero p{margin:auto}.hero-actions,.micro{justify-content:center}.phones{min-height:auto}.phone.side{display:none}.grid-3,.strip-grid,.footer-grid{grid-template-columns:1fr 1fr}.cta{text-align:center}.cta .hero-actions{margin:0;justify-content:center}}@media(max-width:620px){.hero{padding:62px 0 46px}.hero h1{font-size:38px}.section-title{font-size:31px}.grid-3,.strip-grid,.footer-grid{grid-template-columns:1fr}.phone.main{width:232px}.footer-bottom{flex-direction:column}.page-header h1{font-size:36px}.section{padding:64px 0}}

.policy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:24px}.policy-card{display:block;background:var(--card);border:1px solid var(--divider);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}.policy-card:hover{transform:translateY(-2px);box-shadow:var(--shadow2)}.policy-card h2{margin:0 0 8px;font-size:19px}.legal-section{border-bottom:1px solid var(--divider);padding-bottom:18px;margin-bottom:18px}.legal-section h2{color:var(--text);}.content details{background:var(--card);border:1px solid var(--divider);border-radius:16px;padding:16px 18px;margin:12px 0}.content summary{font-weight:800;cursor:pointer}.content details p{margin-top:10px}.support-grid aside p a,.content a{color:var(--primary);font-weight:700}@media(max-width:720px){.policy-grid{grid-template-columns:1fr}}


/* ---- EasyClose final additions: pricing, perfect-for, FAQ, logo compatibility ---- */
.perfect-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
.perfect-grid span{min-height:66px;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--card);border:1px solid var(--divider);border-radius:18px;padding:14px;font-size:13px;font-weight:850;color:var(--text);box-shadow:var(--shadow);transition:.18s}
.perfect-grid span:nth-child(4n+1),.perfect-grid span:nth-child(4n+4){background:var(--soft-purple);color:var(--primary)}
.perfect-grid span:hover{transform:translateY(-3px);box-shadow:var(--shadow2)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:24px 0 30px}
.price-card{background:var(--card);border:1px solid var(--divider);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.price-card.featured{border-color:color-mix(in srgb,var(--primary) 36%,var(--divider));box-shadow:var(--shadow2);background:linear-gradient(160deg,var(--card),var(--soft-purple))}
.price-card h2,.price-card h3{font-size:22px;margin:10px 0 6px}
.plan-badge{display:inline-flex;align-items:center;width:max-content;border-radius:999px;background:var(--soft-purple);color:var(--primary);border:1px solid color-mix(in srgb,var(--primary) 18%,transparent);padding:6px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:900}
.plan-price{font-size:44px;line-height:1;color:var(--primary);font-weight:950;letter-spacing:-.06em;margin:12px 0}
.plan-price span{font-size:15px;color:var(--text2);font-weight:800;letter-spacing:0}
.price-card ul{padding-left:18px;margin:16px 0 0;color:var(--text2)}
.price-card li{margin-bottom:8px}
.center-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:980px;margin:0 auto}
.faq-grid details{background:var(--card);border:1px solid var(--divider);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow)}
.faq-grid summary{font-weight:850;cursor:pointer}
.faq-grid p{margin-top:10px;color:var(--text2);font-size:14px}
.pricing-content{max-width:1120px}
.pricing-content .legal-section{max-width:850px;margin-left:auto;margin-right:auto}
@media(max-width:920px){.pricing-grid,.perfect-grid{grid-template-columns:1fr 1fr}.faq-grid{grid-template-columns:1fr}}
@media(max-width:620px){.pricing-grid,.perfect-grid{grid-template-columns:1fr}}


/* ---- EasyClose premium page refresh ---- */
.section-alt{background:var(--card);border-top:1px solid var(--divider);border-bottom:1px solid var(--divider)}
.text-left{text-align:left}.no-margin{margin:0 0 26px}.narrow-content{max-width:870px}.narrow-content p{color:var(--text2);font-size:17px;margin:0 0 16px}.badge.subtle{background:var(--soft-purple);color:var(--primary);text-transform:uppercase}.small-note{font-size:12px;color:var(--text2);margin-top:14px}.notice{max-width:900px;margin:26px auto 0;background:rgba(217,119,6,.10);border:1px solid rgba(217,119,6,.24);color:var(--warning);border-radius:18px;padding:16px 18px;font-weight:750}
.ec-page-hero{position:relative;overflow:hidden;background:var(--grad-soft);border-bottom:1px solid var(--divider);padding:86px 0}.ec-page-hero:before{content:"";position:absolute;inset:auto -220px -280px auto;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.16),transparent 65%)}.page-hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}.ec-page-hero h1{font-size:58px;line-height:1;letter-spacing:-.06em;margin:20px 0 18px;max-width:760px}.ec-page-hero p{color:var(--text2);font-size:18px;max-width:650px}
.hero-visual-card{position:relative;min-height:560px;display:flex;align-items:center;justify-content:center;border:1px solid var(--divider);border-radius:36px;background:linear-gradient(160deg,var(--card),var(--soft-purple));box-shadow:var(--shadow2);overflow:hidden}.hero-phone-img{width:min(360px,82%);border-radius:36px;box-shadow:0 34px 80px rgba(76,29,149,.22);position:relative;z-index:2}.orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.75}.orb-a{width:260px;height:260px;background:rgba(124,58,237,.18);top:-70px;right:-60px}.orb-b{width:220px;height:220px;background:rgba(5,150,105,.12);bottom:-80px;left:-60px}.screen-showcase{background:linear-gradient(160deg,var(--card),var(--soft-purple));border:1px solid var(--divider);border-radius:34px;padding:20px;box-shadow:var(--shadow2);display:flex;justify-content:center;align-items:center;overflow:hidden}.screen-showcase img{width:min(360px,100%);border-radius:28px;box-shadow:0 24px 60px rgba(76,29,149,.16)}.hero-shot img{width:min(340px,100%)}
.feature-suite{display:grid;grid-template-columns:.9fr 1.35fr;gap:22px;align-items:stretch}.feature-hero-card,.feature-tile{background:var(--card);border:1px solid var(--divider);border-radius:26px;padding:28px;box-shadow:var(--shadow);position:relative;overflow:hidden}.feature-hero-card{background:linear-gradient(145deg,var(--card),var(--soft-purple));min-height:100%}.feature-hero-card:after{content:"";position:absolute;right:-70px;bottom:-80px;width:220px;height:220px;border-radius:50%;background:rgba(124,58,237,.15)}.feature-hero-card h3{font-size:27px;line-height:1.1;letter-spacing:-.03em;margin:16px 0 10px}.feature-hero-card p,.feature-tile p{color:var(--text2)}.feature-bars{display:flex;gap:10px;margin:26px 0}.feature-bars span{height:10px;border-radius:999px;background:var(--grad);display:block}.feature-bars span:nth-child(1){width:38%}.feature-bars span:nth-child(2){width:24%;opacity:.72}.feature-bars span:nth-child(3){width:16%;opacity:.45}.feature-mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.feature-tile span{display:inline-flex;width:42px;height:42px;border-radius:14px;background:var(--soft-purple);align-items:center;justify-content:center;color:var(--primary);font-weight:950;margin-bottom:18px}.feature-tile h3{font-size:18px;margin-bottom:8px}.clean-list{list-style:none;padding:0!important;margin:18px 0 0}.clean-list li{position:relative;padding-left:27px;margin-bottom:10px;color:var(--text2)}.clean-list li:before{content:"✓";position:absolute;left:0;top:0;color:var(--success);font-weight:950}
.industry-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--divider);border-radius:30px;overflow:hidden;background:var(--card);box-shadow:var(--shadow2)}.industry-flow span{min-height:92px;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;font-weight:900;color:var(--text);border-right:1px solid var(--divider);border-bottom:1px solid var(--divider);background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--soft-purple) 40%,var(--card)));position:relative}.industry-flow span:nth-child(4n){border-right:0}.industry-flow span:nth-last-child(-n+4){border-bottom:0}.industry-flow span:nth-child(odd){background:var(--card)}.industry-flow span:after{content:"";position:absolute;right:-7px;top:50%;width:14px;height:14px;border-radius:50%;background:var(--primary);opacity:.12;transform:translateY(-50%);z-index:1}.industry-flow span:nth-child(4n):after{display:none}.industry-flow.compact span{min-height:70px;font-size:13px}
.feature-matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-matrix article{background:var(--card);border:1px solid var(--divider);border-radius:24px;padding:24px;box-shadow:var(--shadow);transition:.18s}.feature-matrix article:hover{transform:translateY(-4px);box-shadow:var(--shadow2)}.feature-matrix span{font-size:28px;display:block;margin-bottom:12px}.feature-matrix h3{font-size:18px;margin-bottom:8px}.feature-matrix p{color:var(--text2);font-size:14px}.feature-showcase{display:grid;grid-template-columns:1fr .9fr;gap:48px;align-items:center}.feature-showcase.reverse>div:first-child{order:2}.feature-showcase.reverse>div:nth-child(2){order:1}.feature-showcase p{color:var(--text2);font-size:16px;margin-bottom:14px}.about-stat-card{min-height:300px;border:1px solid var(--divider);border-radius:34px;background:linear-gradient(145deg,#211130,#4C1D95);color:#fff;box-shadow:var(--shadow2);padding:42px;display:flex;flex-direction:column;justify-content:flex-end}.about-stat-card strong{font-size:44px;line-height:1;letter-spacing:-.05em;margin-bottom:14px}.about-stat-card span{color:#D8CCE9;font-size:17px}.company-panel{display:grid;grid-template-columns:1fr 1fr;gap:22px;background:var(--card);border:1px solid var(--divider);border-radius:30px;padding:30px;box-shadow:var(--shadow2)}.company-panel h3{font-size:22px;margin-bottom:12px}.company-panel p{color:var(--text2)}.detail-list{list-style:none;padding:0!important}.detail-list li{padding:12px 0;border-bottom:1px solid var(--divider);color:var(--text2)}.detail-list li:last-child{border-bottom:0}.detail-list a{color:var(--primary);font-weight:800}
.pricing-summary-card{background:linear-gradient(145deg,#211130,#4C1D95);color:#fff;border-radius:36px;padding:38px;box-shadow:var(--shadow2);border:1px solid rgba(255,255,255,.12)}.pricing-summary-card strong{font-size:86px;line-height:1;letter-spacing:-.08em;display:inline-block;margin-top:28px}.pricing-summary-card small{font-weight:900;color:#D8CCE9}.pricing-summary-card p{color:#D8CCE9;margin:18px 0}.summary-row{display:flex;justify-content:space-between;gap:18px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:16px}.premium-plans .price-card{min-height:100%;padding:30px}.premium-plans .price-card .btn{margin-top:auto}.launch-plan{transform:translateY(-12px)}.billing-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.billing-steps article{background:var(--bg);border:1px solid var(--divider);border-radius:24px;padding:26px;box-shadow:var(--shadow)}.billing-steps span{width:44px;height:44px;border-radius:14px;background:var(--grad);color:white;display:flex;align-items:center;justify-content:center;font-weight:950;margin-bottom:16px}.billing-steps p{color:var(--text2)}.table-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--divider);border-radius:26px;box-shadow:var(--shadow2)}.comparison-table{width:100%;border-collapse:collapse;min-width:760px}.comparison-table th,.comparison-table td{padding:17px 18px;text-align:left;border-bottom:1px solid var(--divider)}.comparison-table th{background:var(--soft-purple);color:var(--primary);font-size:13px;text-transform:uppercase;letter-spacing:.08em}.comparison-table td{color:var(--text2);font-weight:700}.comparison-table tr:last-child td{border-bottom:0}.comparison-table td:first-child{color:var(--text);font-weight:900}
.help-hero .container{position:relative}.help-hero-card{max-width:900px;margin:0 auto;text-align:center;background:color-mix(in srgb,var(--card) 80%,transparent);border:1px solid var(--divider);border-radius:38px;padding:48px;box-shadow:var(--shadow2);position:relative}.help-hero-card h1{font-size:60px;letter-spacing:-.06em;margin:18px 0 8px}.help-hero-card p{margin:auto}.help-search{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:28px auto 0;max-width:720px;background:var(--bg);border:1px solid var(--divider);border-radius:18px;padding:16px 18px;text-align:left}.help-search span{color:var(--text2);font-size:13px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.help-search strong{color:var(--text)}.help-topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.help-topic-grid article{background:var(--card);border:1px solid var(--divider);border-radius:22px;padding:22px;box-shadow:var(--shadow);transition:.18s}.help-topic-grid article:hover{transform:translateY(-3px);box-shadow:var(--shadow2)}.help-topic-grid span{width:42px;height:42px;border-radius:14px;background:var(--soft-purple);display:flex;align-items:center;justify-content:center;color:var(--primary);font-weight:950;margin-bottom:14px}.help-topic-grid p{color:var(--text2);font-size:14px}
.contact-stack{display:grid;gap:14px}.contact-stack article{background:var(--card);border:1px solid var(--divider);border-radius:24px;padding:24px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:18px}.contact-stack span{font-weight:950}.contact-stack a{color:var(--primary);font-weight:900}.premium-contact{max-width:1160px}.contact-panel h2{font-size:34px;letter-spacing:-.04em;margin:14px 0 6px}.contact-panel p{color:var(--text2);margin-bottom:20px}.contact-aside{display:grid;gap:18px}.contact-card{background:var(--card);border:1px solid var(--divider);border-radius:24px;padding:24px;box-shadow:var(--shadow)}.contact-card.accent{background:linear-gradient(145deg,var(--card),var(--soft-purple));border-color:color-mix(in srgb,var(--primary) 24%,var(--divider))}.contact-card h3{font-size:20px;margin-bottom:8px}.contact-card p{color:var(--text2)}
@media(max-width:920px){.page-hero-grid,.feature-suite,.feature-showcase,.company-panel{grid-template-columns:1fr}.ec-page-hero{text-align:center}.ec-page-hero h1{font-size:44px}.feature-mini-grid,.feature-matrix,.billing-steps,.help-topic-grid{grid-template-columns:1fr 1fr}.feature-showcase.reverse>div:first-child,.feature-showcase.reverse>div:nth-child(2){order:initial}.text-left{text-align:center}.industry-flow{grid-template-columns:repeat(2,1fr)}.industry-flow span:nth-child(4n){border-right:1px solid var(--divider)}.industry-flow span:nth-child(2n){border-right:0}.industry-flow span:nth-last-child(-n+4){border-bottom:1px solid var(--divider)}.industry-flow span:nth-last-child(-n+2){border-bottom:0}.launch-plan{transform:none}.help-hero-card{padding:34px}.help-search{flex-direction:column;align-items:flex-start}.hero-visual-card{min-height:460px}}
@media(max-width:620px){.ec-page-hero h1,.help-hero-card h1{font-size:36px}.feature-mini-grid,.feature-matrix,.billing-steps,.help-topic-grid,.industry-flow{grid-template-columns:1fr}.industry-flow span,.industry-flow span:nth-child(2n),.industry-flow span:nth-child(4n){border-right:0;border-bottom:1px solid var(--divider)}.industry-flow span:last-child{border-bottom:0}.industry-flow span:after{display:none}.feature-hero-card,.feature-tile,.help-hero-card{padding:22px}.hero-visual-card{min-height:400px}.contact-stack article{flex-direction:column;align-items:flex-start}.pricing-summary-card strong{font-size:64px}}

/* EasyClose conversion upgrade additions */
.trust-rail {
  background: var(--card);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  padding: 22px 0
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px
}

.trust-item {
  border: 1px solid var(--divider);
  border-radius: 18px;
  background: var(--bg);
  padding: 16px 14px;
  text-align: center
}

.trust-item strong {
  display: block;
  font-size: 15px;
  color: var(--text)
}

.trust-item span {
  display: block;
  font-size: 12px;
  color: var(--text2);
  font-weight: 750;
  margin-top: 3px
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 26px
}

.proof-card {
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--shadow)
}

.proof-card strong {
  display: block;
  font-size: 24px;
  color: var(--primary);
  line-height: 1
}

.proof-card span {
  color: var(--text2);
  font-size: 13px;
  font-weight: 750
}

.workflow-demo {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 30px;
  align-items: center
}

.workflow-steps {
  display: grid;
  gap: 14px
}

.workflow-step {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  align-items: start;
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: 22px;
  padding: 20px;
  box-shadow: var(--shadow)
}

.workflow-step span {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--grad);
  color: #fff;
  font-weight: 950;
  display: flex;
  align-items: center;
  justify-content: center
}

.workflow-step h3 {
  margin-bottom: 4px
}

.workflow-step p {
  color: var(--text2);
  font-size: 14px
}

.demo-visual {
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: 34px;
  padding: 18px;
  box-shadow: var(--shadow2)
}

.demo-visual img {
  border-radius: 24px
}

.daily-close-panel {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 32px;
  align-items: center;
  background: linear-gradient(145deg, var(--card), var(--soft-purple));
  border: 1px solid var(--divider);
  border-radius: 36px;
  padding: 34px;
  box-shadow: var(--shadow2)
}

.daily-close-panel p {
  color: var(--text2)
}

.close-checklist {
  display: grid;
  gap: 12px;
  margin-top: 22px
}

.close-checklist li {
  list-style: none;
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: 16px;
  padding: 14px 16px;
  color: var(--text2);
  font-weight: 750
}

.close-checklist li:before {
  content: '✓';
  display: inline-flex;
  margin-right: 10px;
  color: var(--success);
  font-weight: 950
}

.usecase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 28px
}

.usecase-card {
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: .18s
}

.usecase-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow2)
}

.usecase-card img {
  height: 142px;
  width: 100%;
  object-fit: cover;
  background: var(--soft-purple)
}

.usecase-card div {
  padding: 18px
}

.usecase-card h3 {
  font-size: 17px;
  margin-bottom: 6px
}

.usecase-card p {
  color: var(--text2);
  font-size: 13px
}

.choose-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

.choose-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: 26px;
  padding: 26px;
  box-shadow: var(--shadow)
}

.choose-card.recommended {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--divider));
  border-radius: 26px;
  padding: 26px;
    box-shadow: var(--shadow2)
}

.choose-card h3 {
  font-size: 22px;
  margin: 10px 0 8px
}

.choose-card p {
  color: var(--text2);
  font-size: 14px
}

.decision-tag {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--soft-purple);
  color: var(--primary);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em
}

.urgency-meter {
  margin-top: 22px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 20px;
  padding: 16px
}

.meter-track {
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  overflow: hidden;
  margin: 10px 0
}

.meter-fill {
  display: block;
  height: 100%;
  width: 28%;
  background: #fff;
  border-radius: 999px
}

.pricing-note-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px
}

.pricing-note {
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: 20px;
  padding: 20px
}

.pricing-note h3 {
  font-size: 16px
}

.pricing-note p {
  font-size: 13px;
  color: var(--text2)
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

.guide-card {
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--shadow)
}

.guide-card span {
  display: inline-flex;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--grad);
  color: white;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  margin-bottom: 14px
}

.guide-card p {
  color: var(--text2);
  font-size: 14px
}

.contact-note {
  font-size: 12px;
  color: var(--text2);
  margin-top: 10px
}

.form-status {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 800
}

.form-status.ok {
  color: var(--success)
}

.form-status.error {
  color: var(--error)
}

.handoff-note {
  background: var(--soft-purple);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--divider));
  border-radius: 18px;
  padding: 16px;
  color: var(--text2);
  font-size: 13px;
  margin-top: 18px
}

.article-list {
  display: grid;
  gap: 14px
}

.article-list a {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow)
}

.article-list strong {
  color: var(--text)
}

.article-list span {
  color: var(--primary);
  font-weight: 950
}

.image-handoff {
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: 28px;
  padding: 28px;
  box-shadow: var(--shadow)
}

.image-handoff ul {
  margin-top: 16px;
  padding-left: 18px;
  color: var(--text2)
}

.error-page {
  min-height: 68vh;
  display: grid;
  place-items: center;
  text-align: center
}

.error-page h1 {
  font-size: 82px;
  line-height: 1;
  color: var(--primary)
}@media(max-width:920px){.trust-grid{grid-template-columns:repeat(2,1fr)}.proof-grid,.usecase-grid{grid-template-columns:repeat(2,1fr)}.workflow-demo,.daily-close-panel{grid-template-columns:1fr}.choose-grid,.pricing-note-grid,.guide-grid{grid-template-columns:1fr}.meter-fill{width:28%}}
@media(max-width:620px){.trust-grid,.proof-grid,.usecase-grid{grid-template-columns:1fr}.workflow-step{grid-template-columns:42px 1fr}.workflow-step span{width:42px;height:42px}.daily-close-panel{padding:22px}.usecase-card img{height:180px}}

/* ======================================================================
   EasyClose homepage spacing and responsive illustration refinements
   Updated: 2026-07-13 09:35 UTC
   ====================================================================== */

/* Updated: 2026-07-13 09:35 UTC — reduce vertical space in compact sections */
.section-compact{
  padding-top:64px;
  padding-bottom:64px;
}

.section-compact .section-head{
  margin-bottom:32px;
}

/* Updated: 2026-07-13 09:35 UTC — founding offer CTA spacing */
.founding-actions{
  margin-top:36px;
}

/* Updated: 2026-07-13 09:35 UTC — bring final CTA closer to FAQ */
.final-cta-section{
  padding-top:28px;
  padding-bottom:64px;
}

/* Updated: 2026-07-13 09:35 UTC — tighter FAQ cards */
.faq-grid{
  gap:12px;
}

.faq-grid details{
  padding:15px 18px;
}

.faq-grid summary{
  line-height:1.4;
}

.faq-grid p{
  margin-top:8px;
}

/* Updated: 2026-07-13 09:35 UTC — S-style workflow image matches content height */
.workflow-demo{
  grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);
  gap:48px;
  align-items:stretch;
}

.workflow-visual{
  min-width:0;
  min-height:620px;
  height:100%;
  display:flex;
  align-items:stretch;
}

.workflow-visual img{
  width:100%;
  height:100%;
  max-height:680px;
  object-fit:contain;
  border-radius:24px;
}

/* Updated: 2026-07-13 09:35 UTC — prevent Daily Close image overflow and breakage */
.daily-close-panel{
  grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);
  gap:42px;
  overflow:hidden;
}

.daily-close-content,
.daily-close-visual{
  min-width:0;
}

.daily-close-visual{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.daily-close-visual img{
  display:block;
  width:100%;
  max-width:620px;
  height:auto;
  max-height:620px;
  object-fit:contain;
  margin-inline:auto;
  border-radius:24px;
}

/* Updated: 2026-07-13 09:35 UTC — balanced tablet layout */
@media(max-width:920px){
  .section-compact{
    padding-top:48px;
    padding-bottom:48px;
  }

  .section-compact .section-head{
    margin-bottom:28px;
  }

  .founding-actions{
    margin-top:28px;
  }

  .final-cta-section{
    padding-top:20px;
    padding-bottom:48px;
  }

  .workflow-demo,
  .daily-close-panel{
    grid-template-columns:1fr;
    gap:36px;
  }

  .workflow-visual{
    min-height:0;
    height:auto;
  }

  .workflow-visual img{
    height:auto;
    max-height:640px;
  }

  .daily-close-visual img{
    max-width:560px;
    max-height:none;
  }
}

/* Updated: 2026-07-13 09:35 UTC — compact mobile spacing and full-width CTA actions */
@media(max-width:620px){
  .section-compact{
    padding-top:40px;
    padding-bottom:40px;
  }

  .section-compact .section-head{
    margin-bottom:24px;
  }

  .founding-actions{
    margin-top:24px;
  }

  .final-cta-section{
    padding-top:16px;
    padding-bottom:40px;
  }

  .workflow-demo,
  .daily-close-panel{
    gap:28px;
  }

  .workflow-visual img,
  .daily-close-visual img{
    width:100%;
    max-width:100%;
    height:auto;
  }

  .final-cta-section .cta{
    padding:28px 22px;
  }

  .final-cta-section .hero-actions{
    width:100%;
    margin-bottom:0;
  }

  .final-cta-section .hero-actions .btn{
    width:100%;
  }
}
/* =========================================================
   PRICING OVERVIEW
   ========================================================= */

.pricing-overview {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.pricing-decision {
  margin: 0;
}

.pricing-plans {
  margin-top: 2rem;
}


/* =========================================================
   DECISION CARDS
   ========================================================= */

.choose-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.choose-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.choose-card > p {
  margin-bottom: 0;
}

.decision-summary {
  margin-top: auto;
  padding-top: 0.75rem;
  line-height: 1.6;
}

.decision-summary strong {
  display: inline;
  color: var(--text);
}

.decision-summary span {
  display: inline;
  color: var(--text);
}


/* =========================================================
   PRICING CARDS
   ========================================================= */

.premium-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
  margin-top: 0;
}

.price-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.price-card.featured {
  transform: none;
}

.price-card .plan-intro {
  min-height: 5.4rem;
}

.price-card ul {
  flex: 1;
}

.price-card .btn {
  width: 100%;
  margin-top: auto;
}


/* =========================================================
   FOUNDING PAYMENT OPTIONS
   ========================================================= */

.founding-payment-options {
  display: grid;
  gap: 0.65rem;
  margin: 0.25rem 0 1.25rem;
}

.payment-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(105, 55, 220, 0.16);
  border-radius: 14px;
  background: rgba(105, 55, 220, 0.055);
}

.payment-option span {
  color: var(--text-muted);
  font-size: 0.84rem;
}

.payment-option strong {
  color: var(--text);
  font-size: 0.92rem;
  white-space: nowrap;
}


/* =========================================================
   FOUNDING NOTE
   ========================================================= */

.founding-note {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid rgba(105, 55, 220, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--text-muted);
  line-height: 1.65;
}

.founding-note-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(105, 55, 220, 0.12);
  color: #5b21b6;
  font-weight: 800;
}

.founding-note-content {
  flex: 1;
}

.founding-note strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--text);
}

.founding-note p {
  margin: 0.25rem 0;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {
  .choose-grid,
  .premium-plans {
    grid-template-columns: 1fr;
  }

  .price-card .plan-intro {
    min-height: auto;
  }

  .pricing-plans {
    margin-top: 1.5rem;
  }
}

@media (max-width: 640px) {
  .pricing-overview {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .payment-option {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
  }

  .founding-note {
    padding: 1rem;
  }
}
.billing-notice {
  max-width: 900px;
  margin: 1.5rem auto 0;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(105, 55, 220, 0.16);
  border-radius: 16px;
  background: rgba(105, 55, 220, 0.055);
  color: var(--text-muted);
  line-height: 1.65;
}

.billing-notice strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--text);
}

.billing-notice p {
  margin: 0;
}

.plan-badges{
    display:flex;
    align-items:center;
    gap:.6rem;
    flex-wrap:wrap;
    min-height:42px;   /* keeps all titles aligned */
    margin-bottom:1rem;
}

.saving-badge{
    display:inline-flex;
    align-items:center;
    padding:6px 12px;
    border-radius:999px;
    background:#f3f0ff;
    color:#4c1d95;
    border:1px solid #c4b5fd;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
}

/* 16-JULY-2026 */
/* =========================================================
   ABOUT THATMART / COMPANY SECTION
   ========================================================= */

.about-company-section {
  background:
    linear-gradient(
      180deg,
      #f5f1ff 0%,
      var(--bg) 100%
    );
}


/* Main panel */

.company-panel.company-panel-refined {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--divider);
  border-radius: 30px;
  background: var(--card);
  box-shadow: var(--shadow2);
}


/* Shared column layout */

.company-panel.company-panel-refined > .company-info-block,
.company-panel.company-panel-refined > .company-legal-block {
  min-width: 0;
  padding: 2.4rem;
}


/* Left side */

.company-panel.company-panel-refined > .company-info-block {
  background: var(--card);
}


/* Right side */

.company-panel.company-panel-refined > .company-legal-block {
  background-color: #f1eaff;

  background-image:
    linear-gradient(
      145deg,
      #ece2ff 0%,
      #f3edff 52%,
      #faf8ff 100%
    );

  border-left: 1px solid #d9caf2;
}


/* Labels */

.company-panel-label {
  margin: 0 0 0.75rem;
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}


/* Headings */

.company-panel-refined h3 {
  margin: 0 0 1rem;
  color: var(--text);
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -0.035em;
}


/* Paragraphs */

.company-intro,
.company-legal-block > p,
.company-policy-summary > p {
  margin: 0 0 1rem;
  color: var(--text2);
  line-height: 1.72;
}


/* =========================================================
   COMPANY VALUES
   ========================================================= */

.company-values {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

.value-card {
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--divider);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      var(--card),
      #faf8ff
    );
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.value-card:hover {
  transform: translateY(-3px);
  border-color: #cdbaf0;
  box-shadow: var(--shadow);
}

.value-card h4 {
  margin: 0 0 0.4rem;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.3;
}

.value-card p {
  margin: 0;
  color: var(--text2);
  font-size: 0.9rem;
  line-height: 1.6;
}


/* Mission card */

.value-card.value-card-mission {
  border-color: #bfa6eb;
  background:
    linear-gradient(
      145deg,
      #f0e7ff 0%,
      #faf8ff 100%
    );
}

.value-card.value-card-mission h4 {
  color: var(--primary);
}


/* =========================================================
   CORPORATE DETAILS
   ========================================================= */

.corporate-detail-list {
  margin-top: 1.4rem;
}

.company-panel-refined .corporate-detail-list li {
  display: grid;
  grid-template-columns: 155px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(76, 29, 149, 0.12);
}

.company-panel-refined .corporate-detail-list li:last-child {
  border-bottom: 0;
}

.corporate-detail-list strong {
  color: var(--text);
}

.corporate-detail-list span,
.corporate-detail-list a {
  color: var(--text2);
  overflow-wrap: anywhere;
}

.corporate-detail-list a {
  color: var(--primary);
  font-weight: 800;
}


/* =========================================================
   LEGAL AND POLICY AREA
   ========================================================= */

.company-policy-summary {
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(76, 29, 149, 0.16);
}

.company-policy-summary > p {
  margin-bottom: 1rem;
}

.policy-summary-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0 1.4rem;
}

.policy-summary-list span {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d8c9f1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text2);
  font-size: 0.76rem;
  font-weight: 750;
}

.company-actions{
    margin-top:2rem;
    padding-top:1.5rem;
    border-top:1px solid rgba(76,29,149,.12);
}


/* =========================================================
   DARK MODE
   ========================================================= */

[data-theme="dark"]
.company-panel.company-panel-refined > .company-info-block {
  background: var(--card);
}

[data-theme="dark"]
.company-panel.company-panel-refined > .company-legal-block {
  background-color: #2a2338;

  background-image:
    linear-gradient(
      145deg,
      #302541 0%,
      #251d33 52%,
      #17141f 100%
    );

  border-left-color: var(--divider);
}

[data-theme="dark"] .value-card {
  background:
    linear-gradient(
      145deg,
      var(--card),
      #211b2d
    );
}

[data-theme="dark"] .value-card.value-card-mission {
  border-color: #60458f;

  background:
    linear-gradient(
      145deg,
      #302541,
      #211b2d
    );
}

[data-theme="dark"] .policy-summary-list span {
  border-color: var(--divider);
  background: rgba(255, 255, 255, 0.04);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 920px) {
  .company-panel.company-panel-refined {
    grid-template-columns: 1fr;
  }

  .company-panel.company-panel-refined > .company-legal-block {
    border-top: 1px solid #d9caf2;
    border-left: 0;
  }
}

@media (max-width: 620px) {
  .company-panel.company-panel-refined > .company-info-block,
  .company-panel.company-panel-refined > .company-legal-block {
    padding: 1.5rem;
  }

  .company-panel-refined .corporate-detail-list li {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .value-card {
    padding: 1.1rem;
  }
}

/* =========================================================
   PRODUCTION CONTACT PAGE
   ========================================================= */

.contact-hero-note {
  margin-top: 1rem;
  color: var(--text2);
  font-size: 0.86rem !important;
}


/* Hero contact routes */

.contact-stack article > div {
  display: grid;
  gap: 0.2rem;
}

.contact-stack article small {
  color: var(--text2);
  font-size: 0.76rem;
  font-weight: 600;
}

.contact-stack article a {
  flex: 0 0 auto;
  text-align: right;
}


/* =========================================================
   CONTACT FORM + GUIDANCE ALIGNMENT
   ========================================================= */

.contact-form-section {
  background:
    linear-gradient(
      180deg,
      var(--bg),
      color-mix(in srgb, var(--soft-purple) 22%, var(--bg))
    );
}


/* Main two-column layout */

.support-grid.premium-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: 26px;
  align-items: start;
}

.support-grid.premium-contact > .contact-panel,
.support-grid.premium-contact > .contact-aside {
  align-self: start;
  min-width: 0;
  margin: 0;
}


/* =========================================================
   LEFT: CONTACT FORM PANEL
   ========================================================= */

.contact-panel {
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 2.2rem;
}

.contact-panel h2 {
  margin: 1rem 0 0.45rem;
}

.contact-panel > p {
  margin-bottom: 1.4rem;
}

.contact-panel form {
  margin: 0;
}

.contact-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.form-group {
  min-width: 0;
}

.form-group label span {
  color: var(--error);
}

.form-group input,
.form-group select,
.form-group textarea {
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
  border-color:
    color-mix(in srgb, var(--primary) 28%, var(--divider));
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--card);
  box-shadow:
    0 0 0 4px rgba(109, 40, 217, 0.1);
}

.form-help {
  display: block;
  margin-top: 0.55rem;
  color: var(--text2);
  font-size: 0.75rem;
  line-height: 1.5;
}

.form-submit-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.25rem;
}

.form-submit-row .btn {
  flex: 0 0 auto;
  min-width: 150px;
}

.form-privacy-note {
  margin: 0 !important;
  color: var(--text2);
  font-size: 0.76rem;
  line-height: 1.5;
}

.form-privacy-note a {
  color: var(--primary);
  font-weight: 800;
}


/* Do not reserve space for an empty status message */

.form-status {
  display: none;
  margin: 1rem 0 0;
  color: var(--text2);
  font-size: 0.85rem;
  font-weight: 700;
}

.form-status:not(:empty) {
  display: block;
}


/* =========================================================
   RIGHT: CONTACT GUIDANCE CARDS
   ========================================================= */

.contact-aside {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 18px;
  align-self: start;
  margin: 0;
  padding: 0;
}

.contact-aside > .contact-card {
  margin: 0;
}

.contact-card {
  height: auto;
  min-height: 0;
  padding: 24px;
}

.contact-card-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 0 1rem;
  border-radius: 14px;
  background: var(--soft-purple);
  color: var(--primary);
  font-size: 0.76rem;
  font-weight: 900;
}

.contact-card h3 {
  margin: 0 0 0.55rem;
}

.contact-card p {
  margin: 0;
}

.contact-card .clean-list {
  margin: 1rem 0 0;
}

.contact-card .clean-list li {
  margin-bottom: 0.55rem;
}

.contact-card .clean-list li:last-child {
  margin-bottom: 0;
}

.contact-text-link {
  display: inline-flex;
  margin-top: 1rem;
  color: var(--primary);
  font-size: 0.88rem;
  font-weight: 850;
}

.contact-card-actions {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}

.contact-card-actions a {
  color: var(--primary);
  font-size: 0.84rem;
  font-weight: 850;
}

.form-spacer{
    height:27px;   /* adjust as needed */
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 920px) {
  .support-grid.premium-contact {
    grid-template-columns: 1fr;
  }

  .contact-aside {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .contact-panel {
    padding: 1.4rem;
  }

  .contact-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .form-submit-row {
    align-items: stretch;
    flex-direction: column;
  }

  .form-submit-row .btn {
    width: 100%;
  }
}

/* Contact route cards */

.contact-route-grid {
  align-items: stretch;
}

.contact-route-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.contact-route-card p {
  flex: 1;
}

.contact-route-link {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 1.25rem;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}


/* Dark mode */

[data-theme="dark"] .contact-form-section {
  background:
    linear-gradient(
      180deg,
      var(--bg),
      color-mix(in srgb, var(--soft-purple) 38%, var(--bg))
    );
}


/* Responsive */

@media (max-width: 920px) {
  .contact-stack {
    margin-top: 1rem;
    text-align: left;
  }

  .contact-stack article a {
    text-align: left;
  }
}

@media (max-width: 680px) {
  .contact-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-panel {
    padding: 1.4rem;
  }

  .form-submit-row {
    align-items: stretch;
    flex-direction: column;
  }

  .form-submit-row .btn {
    width: 100%;
  }
}

.faq-grid-static {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.faq-card {
  padding: 24px;
  border: 1px solid var(--divider);
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.faq-card h3 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.35;
}

.faq-card p {
  margin: 0;
  color: var(--text2);
  font-size: 0.9rem;
  line-height: 1.65;
}

@media (max-width: 720px) {
  .faq-grid-static {
    grid-template-columns: 1fr;
  }
}
.card-icon-text {
  width: fit-content;
  min-width: 0;
  height: auto;
  padding: 9px 15px;
  border-radius: 13px;
  white-space: nowrap;
  line-height: 1;
}

/* STRONG WITH color */
.text-highlight{
    color: var(--primary);
    font-weight:700;
}

/* EasyClose shared legal navigation */
.legal-layout{max-width:1160px;margin:0 auto;padding:70px 22px;display:grid;grid-template-columns:minmax(0,850px) 280px;gap:42px;align-items:start}.legal-layout>.content{max-width:none;margin:0;padding:0}.legal-sidebar{position:sticky;top:96px;background:var(--card);border:1px solid var(--divider);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}.legal-sidebar-label{margin:0 0 4px;color:var(--primary);font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.legal-sidebar h2{margin:0 0 14px;font-size:20px}.legal-page-nav{display:grid;gap:5px}.legal-page-nav a{display:block;padding:9px 11px;border-radius:10px;color:var(--text2);font-size:13px;font-weight:750}.legal-page-nav a:hover{background:var(--soft-purple);color:var(--primary)}.legal-page-nav a.active,.legal-page-nav a[aria-current="page"]{background:var(--soft-purple);color:var(--primary);font-weight:900}@media(max-width:920px){.legal-layout{grid-template-columns:1fr}.legal-layout>#legal-sidebar{order:-1}.legal-sidebar{position:static}.legal-page-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.legal-layout{padding:44px 22px}.legal-page-nav{grid-template-columns:1fr}}

/* =========================================================
   PREMIUM HELP CENTER — CONSOLIDATED
   ========================================================= */

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

/* Hero */
.help-hero {
  padding: 82px 0 76px;
  text-align: left;
}

.help-hero-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 28px;
  align-items: stretch;
}

.help-hero-content {
  padding: 52px;
  border: 1px solid var(--divider);
  border-radius: 34px;
  background:
    radial-gradient(circle at 90% 10%, rgba(124, 58, 237, .16), transparent 34%),
    var(--card);
  box-shadow: var(--shadow2);
}

.help-hero-content h1 {
  max-width: 720px;
  margin: 20px 0 16px;
  font-size: clamp(44px, 6vw, 70px);
  line-height: .98;
  letter-spacing: -.065em;
}

.help-hero-content > p {
  max-width: 690px;
  color: var(--text2);
  font-size: 18px;
}

.help-search-form {
  max-width: 760px;
  margin-top: 30px;
}

.help-search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 8px 8px 8px 20px;
  border: 1px solid var(--divider);
  border-radius: 20px;
  background: var(--bg);
  box-shadow: 0 14px 40px rgba(76, 29, 149, .1);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.help-search-box:focus-within {
  border-color: var(--primary);
  background: var(--card);
  box-shadow: 0 0 0 4px rgba(109, 40, 217, .1), 0 18px 50px rgba(76, 29, 149, .14);
}

.help-search-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--primary);
}

.help-search-box input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
}

.help-search-box input::placeholder { color: var(--text2); }
.help-search-box .btn { flex: 0 0 auto; }

.help-popular-searches {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin-top: 18px;
  color: var(--text2);
  font-size: 13px;
}

.help-popular-searches > span { font-weight: 800; }

.help-popular-searches a {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--soft-purple);
  color: var(--primary);
  font-weight: 800;
}

.help-hero-support-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 38px;
  border-radius: 34px;
  color: #fff;
  background:
    radial-gradient(circle at 90% 10%, rgba(255, 255, 255, .16), transparent 34%),
    linear-gradient(145deg, #211130, #4c1d95 58%, #6d28d9);
  box-shadow: var(--shadow2);
}

.help-support-label,
.help-final-label {
  display: block;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.help-hero-support-card h2 {
  max-width: 320px;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.help-hero-support-card p {
  margin: 14px 0 24px;
  color: rgba(255, 255, 255, .76);
}

.help-support-actions { display: grid; gap: 13px; }
.help-email-link { width: max-content; color: #fff; font-size: 14px; font-weight: 800; }

/* Quick tasks */
.help-quick-section {
  position: relative;
  z-index: 5;
  margin-top: -28px;
}

.help-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.help-quick-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 19px;
  border: 1px solid var(--divider);
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.help-quick-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--divider));
  box-shadow: var(--shadow2);
}

.help-quick-number { color: var(--primary); font-size: 12px; font-weight: 950; }
.help-quick-card strong,
.help-quick-card small { display: block; }
.help-quick-card strong { color: var(--text); font-size: 14px; }
.help-quick-card small { margin-top: 3px; color: var(--text2); line-height: 1.4; }
.help-card-arrow { color: var(--primary); font-size: 20px; transition: transform .2s ease; }
.help-quick-card:hover .help-card-arrow { transform: translateX(4px); }

/* Premium topic cards */
.premium-help-topics {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(109, 40, 217, .08), transparent 38%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--soft-purple) 38%, var(--bg)) 100%);
}

.premium-help-topics::before {
  content: "";
  position: absolute;
  top: 170px;
  left: 50%;
  width: 760px;
  height: 320px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(109, 40, 217, .05);
  filter: blur(80px);
  pointer-events: none;
}

.premium-help-heading {
  position: relative;
  z-index: 1;
  margin-bottom: 48px;
}

.premium-help-heading .section-title {
  max-width: 720px;
  margin-inline: auto;
}

.premium-topic-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.premium-topic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 286px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--divider));
  border-radius: 26px;
  background: linear-gradient(145deg, var(--card), color-mix(in srgb, var(--soft-purple) 18%, var(--card)));
  box-shadow: 0 16px 40px rgba(76, 29, 149, .08);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.premium-topic-card::after {
  content: "";
  position: absolute;
  right: -65px;
  bottom: -75px;
  width: 155px;
  height: 155px;
  border-radius: 50%;
  background: rgba(109, 40, 217, .07);
  transition: transform .25s ease, background .25s ease;
}

.premium-topic-card:hover {
  transform: translateY(-7px);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--divider));
  box-shadow: 0 26px 65px rgba(76, 29, 149, .16);
}

.premium-topic-card:hover::after { transform: scale(1.15); background: rgba(109, 40, 217, .12); }
.premium-topic-card[hidden] { display: none; }

.premium-topic-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.premium-topic-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  border-radius: 15px;
  background: var(--soft-purple);
  color: var(--primary);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
}

.premium-topic-arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--soft-purple) 78%, var(--card));
  color: var(--primary);
  font-size: 21px;
  font-weight: 800;
  transition: transform .22s ease, background .22s ease, color .22s ease;
}

.premium-topic-card:hover .premium-topic-arrow {
  transform: translateX(4px);
  background: var(--primary);
  color: #fff;
}

.premium-topic-content { position: relative; z-index: 1; }
.premium-topic-content h3 { margin: 0 0 10px; color: var(--text); font-size: 19px; line-height: 1.25; letter-spacing: -.025em; }
.premium-topic-content p { margin: 0; color: var(--text2); font-size: 14px; line-height: 1.7; }

.premium-topic-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: max-content;
  margin-top: auto;
  padding-top: 28px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
}

.help-no-results {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid var(--divider);
  border-radius: 16px;
  background: var(--card);
  color: var(--text2);
  text-align: center;
}
.help-no-results a { color: var(--primary); font-weight: 800; }

/* Daily close guide */
.help-guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  gap: 48px;
  align-items: stretch;
}

.help-guide-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.help-guide-content .badge { width: max-content; }
.help-guide-content .section-title { max-width: 640px; }

.help-guide-intro {
  max-width: 650px;
  margin-bottom: 26px;
  color: var(--text2);
  font-size: 16px;
}

.help-step-list {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 12px;
  flex: 1;
  padding: 0;
  list-style: none;
}

.help-step-list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  min-height: 0;
  padding: 18px;
  border: 1px solid var(--divider);
  border-radius: 18px;
  background: var(--card);
}

.help-step-list li > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--grad);
  color: #fff;
  font-weight: 950;
}

.help-step-list h3 { margin-bottom: 4px; font-size: 16px; }
.help-step-list p { color: var(--text2); font-size: 14px; }

.help-guide-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 100%;
  padding: 30px;
  overflow: hidden;
  border: 1px solid var(--divider);
  border-radius: 32px;
  background: linear-gradient(145deg, var(--card), var(--soft-purple));
  box-shadow: var(--shadow2);
}

.help-guide-visual img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 610px;
  object-fit: contain;
}

/* Sales channels */
.help-section-heading {
  display: block;
  max-width: 760px;
  margin-bottom: 38px;
}

.help-section-heading .section-title { max-width: 720px; margin-bottom: 14px; }
.help-section-heading > p { max-width: 650px; color: var(--text2); font-size: 16px; line-height: 1.7; }

.help-channel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--divider);
  border-radius: 28px;
  background: var(--card);
  box-shadow: var(--shadow2);
}

.help-channel-card {
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: 28px;
  border-right: 1px solid var(--divider);
  background: linear-gradient(145deg, var(--card), color-mix(in srgb, var(--soft-purple) 22%, var(--card)));
}

.help-channel-card:last-child { border-right: 0; }
.help-channel-index { display: block; margin-bottom: auto; padding-bottom: 36px; color: var(--primary); font-size: 12px; font-weight: 950; letter-spacing: .08em; }
.help-channel-card h3 { margin-bottom: 10px; font-size: 20px; line-height: 1.25; }
.help-channel-card p { margin: 0; color: var(--text2); font-size: 14px; line-height: 1.65; }

/* Account, team, locations and billing */
.help-information-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 15%, rgba(109, 40, 217, .08), transparent 30%),
    linear-gradient(180deg, var(--card), color-mix(in srgb, var(--soft-purple) 30%, var(--bg)));
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}

.help-information-section::before {
  content: "";
  position: absolute;
  right: -180px;
  bottom: -220px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(109, 40, 217, .07);
  filter: blur(20px);
  pointer-events: none;
}

.help-information-heading {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin-bottom: 38px;
}

.help-information-heading .section-title { margin-bottom: 12px; }
.help-information-heading p { max-width: 680px; color: var(--text2); font-size: 16px; line-height: 1.7; }

.help-information-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.help-information-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 390px;
  padding: 32px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--divider));
  border-radius: 28px;
  background: linear-gradient(145deg, var(--card), color-mix(in srgb, var(--soft-purple) 14%, var(--card)));
  box-shadow: 0 18px 48px rgba(76, 29, 149, .09);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.help-information-card::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: rgba(109, 40, 217, .06);
  pointer-events: none;
  transition: transform .25s ease, background .25s ease;
}

.help-information-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--divider));
  box-shadow: 0 28px 70px rgba(76, 29, 149, .15);
}
.help-information-card:hover::after { transform: scale(1.15); background: rgba(109, 40, 217, .1); }

.help-information-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-bottom: 22px;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
  border-radius: 999px;
  background: var(--soft-purple);
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.help-information-card h2 {
  position: relative;
  z-index: 1;
  max-width: 500px;
  margin: 0 0 12px;
  color: var(--text);
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -.04em;
}

.help-information-card > p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--text2);
  font-size: 15px;
  line-height: 1.7;
}

.help-information-card .clean-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 11px;
  margin: 24px 0 0;
  padding: 0 !important;
  list-style: none;
}

.help-information-card .clean-list li {
  position: relative;
  margin: 0;
  padding: 12px 14px 12px 42px;
  border: 1px solid var(--divider);
  border-radius: 15px;
  background: color-mix(in srgb, var(--card) 84%, var(--soft-purple));
  color: var(--text2);
  font-size: 14px;
  line-height: 1.55;
}

.help-information-card .clean-list li::before {
  content: "✓";
  position: absolute;
  top: 11px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: var(--soft-purple);
  color: var(--primary);
  font-size: 11px;
  font-weight: 950;
}

.help-text-action {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-top: auto;
  padding-top: 26px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 900;
}

.help-text-action:hover { color: var(--primary2); }

.help-information-card:nth-child(2),
.help-information-card:nth-child(3) {
  background: linear-gradient(145deg, color-mix(in srgb, var(--soft-purple) 24%, var(--card)), var(--card));
}

/* FAQ */
.help-faq-layout {
  display: grid;
  grid-template-columns: minmax(280px, .65fr) minmax(0, 1.35fr);
  gap: 56px;
  align-items: start;
}

.help-faq-intro { position: sticky; top: 110px; }
.help-faq-intro > p { margin: 14px 0 24px; color: var(--text2); }
.help-faq-list { display: grid; gap: 12px; }

.help-faq-list details {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--divider);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.help-faq-list summary {
  position: relative;
  padding: 20px 52px 20px 20px;
  cursor: pointer;
  color: var(--text);
  font-weight: 850;
  list-style: none;
}

.help-faq-list summary::-webkit-details-marker { display: none; }
.help-faq-list summary::after { content: "+"; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); color: var(--primary); font-size: 24px; font-weight: 500; }
.help-faq-list details[open] summary::after { content: "−"; }
.help-faq-list details p { padding: 0 20px 20px; color: var(--text2); }
.help-faq-list details p a { color: var(--primary); font-weight: 800; }

/* Resources */
.help-resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.help-resource-card {
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: 27px;
  border: 1px solid var(--divider);
  border-radius: 26px;
  background: var(--card);
  box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.help-resource-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--divider));
  box-shadow: var(--shadow2);
}

.help-resource-card > span { color: var(--primary); font-size: 11px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.help-resource-card h3 { margin: 32px 0 9px; font-size: 22px; letter-spacing: -.03em; }
.help-resource-card p { color: var(--text2); font-size: 14px; }
.help-resource-card strong { margin-top: auto; padding-top: 22px; color: var(--primary); }

/* Final CTA */
.help-final-section { padding-top: 30px; }
.help-final-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
  padding: 48px;
  border-radius: 34px;
  color: #fff;
  background:
    radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .14), transparent 30%),
    linear-gradient(135deg, #211130, #4c1d95 58%, #6d28d9);
  box-shadow: var(--shadow2);
}

.help-final-cta h2 { font-size: 36px; letter-spacing: -.04em; }
.help-final-cta p { max-width: 650px; margin-top: 7px; color: rgba(255, 255, 255, .75); }
.help-final-actions { display: grid; justify-items: end; gap: 12px; }
.help-light-button { background: #fff; color: #211130; }
.help-light-button:hover { background: #f5f1ff; }
.help-final-email { color: rgba(255, 255, 255, .78); font-size: 13px; font-weight: 800; }

/* Dark theme */
[data-theme="dark"] .premium-help-topics {
  background:
    radial-gradient(circle at 50% 30%, rgba(124, 58, 237, .13), transparent 38%),
    linear-gradient(180deg, var(--bg), #17141f);
}

[data-theme="dark"] .premium-topic-card,
[data-theme="dark"] .help-information-card {
  background: linear-gradient(145deg, var(--card), color-mix(in srgb, var(--soft-purple) 35%, var(--card)));
}

[data-theme="dark"] .help-information-section {
  background:
    radial-gradient(circle at 15% 15%, rgba(124, 58, 237, .13), transparent 30%),
    linear-gradient(180deg, var(--bg), #17141f);
}

[data-theme="dark"] .help-information-card .clean-list li { background: rgba(255, 255, 255, .025); }

/* Responsive */
@media (max-width: 1040px) {
  .help-quick-grid,
  .premium-topic-grid,
  .help-channel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .premium-topic-card { min-height: 250px; }
  .help-channel-card:nth-child(2) { border-right: 0; }
  .help-channel-card:nth-child(-n + 2) { border-bottom: 1px solid var(--divider); }
}

@media (max-width: 920px) {
  .help-hero-layout,
  .help-guide-layout,
  .help-faq-layout,
  .help-final-cta {
    grid-template-columns: 1fr;
  }

  .help-hero-content { padding: 38px; }
  .help-hero-support-card { min-height: 340px; }
  .help-quick-section { margin-top: 22px; }
  .help-information-grid { grid-template-columns: 1fr; }
  .help-information-card { min-height: 0; }
  .help-faq-intro { position: static; }
  .help-final-actions { justify-items: start; }
  .help-guide-visual { min-height: 420px; }
  .help-step-list { grid-template-rows: none; }
}

@media (max-width: 700px) {
  .help-quick-grid,
  .premium-topic-grid,
  .help-channel-grid,
  .help-resource-grid {
    grid-template-columns: 1fr;
  }

  .help-hero { padding: 54px 0; }
  .help-hero-content,
  .help-hero-support-card { padding: 26px; border-radius: 26px; }

  .help-search-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 14px;
  }

  .help-search-box .btn { grid-column: 1 / -1; width: 100%; }
  .premium-help-heading { margin-bottom: 32px; }
  .premium-topic-card { min-height: 230px; padding: 22px; border-radius: 22px; }
  .premium-topic-card-top { margin-bottom: 22px; }

  .help-channel-card,
  .help-channel-card:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--divider);
  }

  .help-channel-card:last-child { border-bottom: 0; }
  .help-guide-visual { min-height: 360px; }
  .help-information-heading { margin-bottom: 28px; }
  .help-information-card { padding: 24px; border-radius: 23px; }
  .help-information-card h2 { font-size: 23px; }
  .help-final-cta { padding: 30px 24px; }
}
/* =========================================================
   PREMIUM PLAN COMPARISON
   ========================================================= */

.pricing-comparison-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 80%,
      rgba(109, 40, 217, .09),
      transparent 38%
    ),
    var(--bg);
}

.premium-comparison-wrap {
  overflow-x: auto;
  border: 1px solid color-mix(
    in srgb,
    var(--primary) 14%,
    var(--divider)
  );
  border-radius: 30px;
  background: var(--card);
  box-shadow:
    0 30px 80px rgba(76, 29, 149, .13);
}

.premium-comparison-table {
  width: 100%;
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.premium-comparison-table th,
.premium-comparison-table td {
  padding: 19px 24px;
  border-bottom: 1px solid var(--divider);
  vertical-align: middle;
}

.premium-comparison-table thead th {
  padding-top: 24px;
  padding-bottom: 24px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--soft-purple) 90%, var(--card)),
      color-mix(in srgb, var(--soft-purple) 62%, var(--card))
    );
  color: var(--text);
  text-align: center;
}

.premium-comparison-table thead th:first-child {
  width: 32%;
  text-align: left;
}

.premium-comparison-table thead th:first-child {
  border-top-left-radius: 29px;
}

.premium-comparison-table thead th:last-child {
  border-top-right-radius: 29px;
}

.premium-comparison-table thead strong {
  display: block;
  margin-top: 5px;
  font-size: 17px;
  letter-spacing: -.02em;
}

.comparison-plan-label {
  display: block;
  color: var(--primary);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.premium-comparison-table tbody th {
  color: var(--text);
  text-align: left;
  font-size: 15px;
  font-weight: 850;
  background: var(--card);
}

.premium-comparison-table tbody td {
  color: var(--text2);
  text-align: center;
  font-size: 15px;
  font-weight: 750;
  background: var(--card);
}

.premium-comparison-table tbody tr:hover th,
.premium-comparison-table tbody tr:hover td {
  background:
    color-mix(
      in srgb,
      var(--soft-purple) 18%,
      var(--card)
    );
}

.comparison-featured-column {
  position: relative;
  background:
    color-mix(
      in srgb,
      var(--soft-purple) 28%,
      var(--card)
    ) !important;
}

.premium-comparison-table thead .comparison-featured-column {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--primary) 16%, var(--card)),
      color-mix(in srgb, var(--soft-purple) 76%, var(--card))
    ) !important;
}

.comparison-price-row th,
.comparison-price-row td {
  padding-top: 27px;
  padding-bottom: 27px;
}

.comparison-price {
  display: block;
  color: var(--text);
  font-size: 36px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.055em;
}

.comparison-price-note {
  display: block;
  margin-top: 8px;
  color: var(--text2);
  font-size: 12px;
  font-weight: 700;
}

.comparison-highlight {
  color: var(--primary);
  font-weight: 900;
}

.comparison-check {
  display: inline-grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(5, 150, 105, .22);
  border-radius: 999px;
  background: rgba(5, 150, 105, .09);
  color: var(--success);
}

.comparison-check svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.premium-comparison-table tbody tr:last-child th,
.premium-comparison-table tbody tr:last-child td {
  border-bottom: 0;
}

.premium-comparison-table tbody tr:last-child th {
  border-bottom-left-radius: 29px;
}

.premium-comparison-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 29px;
}

/* Dark mode */

[data-theme="dark"] .premium-comparison-wrap {
  border-color: var(--divider);
  background: var(--card);
}

[data-theme="dark"] .comparison-featured-column {
  background:
    color-mix(
      in srgb,
      var(--soft-purple) 55%,
      var(--card)
    ) !important;
}

[data-theme="dark"] .comparison-check {
  border-color: rgba(74, 222, 128, .28);
  background: rgba(34, 197, 94, .12);
  color: #4ade80;
}

/* Mobile */

@media (max-width: 700px) {
  .premium-comparison-wrap {
    border-radius: 22px;
  }

  .premium-comparison-table th,
  .premium-comparison-table td {
    padding: 16px 18px;
  }

  .comparison-price {
    font-size: 31px;
  }
}