/* ==========================================================================
   myDigiBill — GST Billing Software Page Custom External Stylesheet
   ========================================================================== */

/* Container max-width 1500px */
.container-saas {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container-saas {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container-saas {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Feature Cards & Badges */
.about-hero-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.4rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.3s ease;
  cursor: default;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.about-hero-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.09);
}

.about-hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent);
  pointer-events: none;
  z-index: 0;
}

.about-hero-card > * {
  position: relative;
  z-index: 1;
}

.about-hero-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  z-index: 1;
}

.about-hero-card:hover .about-hero-card__icon {
  transform: scale(1.08) rotate(-3deg);
}

.about-hero-card__icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.75;
  flex-shrink: 0;
}

.about-hero-card__title {
  font-weight: 700;
  color: #f0f6ff;
  font-size: 0.95rem;
  line-height: 1.3;
  margin: 0;
  padding: 0;
}

.about-hero-card__sub {
  font-size: 0.78rem;
  color: #94a3b8;
  margin-top: 0.1rem;
  line-height: 1.3;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

.about-hero-card__badge {
  margin-left: auto;
  flex-shrink: 0;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-transform: uppercase;
  transition: transform 0.3s ease;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

.about-hero-card:hover .about-hero-card__badge {
  transform: scale(1.05);
}

.stat-chip-v2 {
  text-align: center;
}

.stat-chip-v2__val {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.stat-chip-v2__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.2rem;
}

/* ==========================================================================
   Automated GSTR Filing Pipeline Component Styles (Clean White Theme)
   ========================================================================== */
:root{
  --navy-0:#FFFFFF;
  --navy-1:#F8FAFC;
  --navy-2:#FFFFFF;
  --navy-2b:#F1F5F9;
  --border-dark: #E2E8F0;
  --border-dark-strong: #CBD5E1;
  --blue:#0066CC;
  --blue-dark:#0052A3;
  --blue-light:#2563EB;
  --cyan:#0284C7;
  --cyan2:#0369A1;
  --green:#16A34A;
  --amber:#D97706;
  --red:#DC2626;
  --text-hi:#0F172A;
  --text-mid:#475569;
  --text-dim:#64748B;
  --paper:#FFFFFF;
  --paper-ink:#0F172A;
  --paper-muted:#64748B;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

.pipeline{
  background:
    radial-gradient(60% 50% at 82% 0%, rgba(37,99,235,0.04) 0%, transparent 60%),
    radial-gradient(50% 40% at 10% 100%, rgba(2,132,199,0.05) 0%, transparent 65%),
    #FFFFFF;
  font-family:var(--font-body);
  color:var(--text-mid);
  padding:90px 24px 110px;
  position:relative;
  overflow:hidden;
  border-top:1px solid #F1F5F9;
  border-bottom:1px solid #F1F5F9;
}

.pipeline-inner{
  max-width:1180px;
  margin:0 auto;
  position:relative;
}

/* ---------- Header ---------- */
.p-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#0066CC;
  background:#EFF6FF;
  border:1px solid #BFDBFE;
  padding:6px 14px;
  border-radius:100px;
  margin-bottom:24px;
  font-weight:600;
}
.p-eyebrow::before{
  content:'';
  width:6px;height:6px;border-radius:50%;
  background:#0066CC;
  box-shadow:0 0 8px 2px rgba(0,102,204,0.4);
}

.p-head{
  max-width:680px;
  margin-bottom:76px;
}
.p-head h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(32px, 4.4vw, 52px);
  line-height:1.08;
  letter-spacing:-0.01em;
  color:var(--text-hi);
  margin:0 0 20px;
}
.p-grad{
  background:linear-gradient(100deg, #0066CC 10%, #2563EB 45%, #0284C7 85%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:gradSweep 6s ease-in-out infinite;
}
@keyframes gradSweep{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}
.p-head p{
  font-size:17px;
  line-height:1.65;
  color:var(--text-mid);
  margin:0;
}

/* ---------- Rail + steps grid ---------- */
.p-steps{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:64px;
}

.p-rail{
  position:absolute;
  left:27px;
  top:14px;
  bottom:14px;
  width:2px;
  background:linear-gradient(180deg, #0066CC 0%, #38BDF8 50%, #0066CC 100%);
  background-size:100% 300%;
  animation:railFlow 4.5s linear infinite;
  opacity:0.35;
}
@keyframes railFlow{
  0%{background-position:0% 0%;}
  100%{background-position:0% 100%;}
}
.p-packet{
  position:absolute;
  left:23px;
  width:10px;height:10px;
  border-radius:50%;
  background:#0284C7;
  box-shadow:0 0 12px 3px rgba(2,132,199,0.6);
  animation:packetTravel 5s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes packetTravel{
  0%{top:0%; opacity:0;}
  6%{opacity:1;}
  94%{opacity:1;}
  100%{top:100%; opacity:0;}
}

.p-step{
  position:relative;
  display:grid;
  grid-template-columns:56px minmax(0,1fr) 400px;
  gap:8px 40px;
  align-items:start;
}

.p-marker{
  grid-column:1;
  position:relative;
  display:flex;
  justify-content:center;
  padding-top:4px;
}
.p-node{
  width:56px;height:56px;
  border-radius:50%;
  background:#F1F5F9;
  border:1px solid #CBD5E1;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:16px;
  color:#475569;
  transition:all 0.6s cubic-bezier(.4,0,.2,1);
  position:relative;
  z-index:2;
}
.p-node::after{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1px solid transparent;
  transition:all 0.6s ease;
}
.p-step.is-active .p-node{
  background:linear-gradient(135deg, #0066CC, #2563EB);
  border-color:transparent;
  color:#FFFFFF;
  box-shadow:0 0 0 4px rgba(37,99,235,0.15), 0 0 20px rgba(37,99,235,0.3);
}
.p-step.is-active .p-node::after{
  border-color:rgba(37,99,235,0.3);
  animation:ringPulse 2.2s ease-out infinite;
}
@keyframes ringPulse{
  0%{transform:scale(1); opacity:0.8;}
  100%{transform:scale(1.5); opacity:0;}
}

.p-text{grid-column:2;}
.p-phase{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#0066CC;
  margin-bottom:10px;
  font-weight:600;
}
.p-text h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:26px;
  line-height:1.2;
  color:var(--text-hi);
  margin:0 0 12px;
}
.p-text > p{
  font-size:15.5px;
  line-height:1.65;
  color:var(--text-mid);
  margin:0 0 22px;
  max-width:46ch;
}

.p-checks{
  list-style:none;
  margin:0;padding:0;
  display:grid;
  gap:12px;
}
.p-checks li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  color:var(--text-mid);
  line-height:1.5;
}
.p-checks li b{
  color:var(--text-hi);
  font-weight:600;
}
.p-check-icon{
  flex:none;
  width:18px;height:18px;
  border-radius:5px;
  background:#EFF6FF;
  border:1px solid #BFDBFE;
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;
}
.p-check-icon svg{width:10px;height:10px;display:block;}

.p-visual{grid-column:3;}

/* ---------- Card shell ---------- */
.p-card{
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  border-radius:20px;
  overflow:hidden;
  opacity:0;
  transform:translateY(16px);
  will-change:opacity, transform;
  transition:opacity 0.5s ease-out, transform 0.5s ease-out, border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow:0 10px 30px -10px rgba(15,23,42,0.06);
}
.p-step.is-active .p-card{
  opacity:1;
  transform:translateY(0);
  border-color:#CBD5E1;
  box-shadow:0 20px 50px -15px rgba(37,99,235,0.12);
}

/* --- Card 1: Receipt --- */
.receipt-card{
  background:#F8FAFC;
  color:var(--paper-ink);
  padding:22px 24px 0;
  border:1px solid #F1F5F9;
}
.receipt-top{
  display:flex;justify-content:space-between;align-items:flex-start;
  font-family:var(--font-mono);
  margin-bottom:16px;
}
.receipt-top .rt-label{font-size:10px;letter-spacing:0.08em;color:var(--paper-muted);text-transform:uppercase;}
.receipt-top .rt-value{font-size:13px;font-weight:700;color:var(--paper-ink);}
.receipt-badge{
  font-family:var(--font-mono);
  font-size:11px;font-weight:700;
  background:#FEF3E2;color:#9A5B0C;
  border:1px solid #F5D9AE;
  padding:3px 8px;border-radius:6px;
}
.receipt-line{
  display:flex;justify-content:space-between;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:#334155;
  padding:6px 0;
  opacity:0;
  transform:translateY(6px);
  will-change:opacity, transform;
}
.p-step.is-active .receipt-line{animation:printIn 0.45s ease forwards;}
.receipt-line.dim{color:var(--paper-muted);}
.receipt-divider{border:none;border-top:1px dashed #CBD5E1;margin:8px 0;}
.receipt-total{
  display:flex;justify-content:space-between;
  font-family:var(--font-mono);
  font-weight:700;font-size:14.5px;
  color:var(--paper-ink);
  padding:10px 0 16px;
}
.receipt-foot{
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px dashed #CBD5E1;
  padding:14px 0;
  margin-top:4px;
}
.receipt-qr{
  width:38px;height:38px;
  border-radius:6px;
  background:
    linear-gradient(#0F172A,#0F172A) 0 0/8px 8px no-repeat,
    linear-gradient(#0F172A,#0F172A) 0 100%/8px 8px no-repeat,
    linear-gradient(#0F172A,#0F172A) 100% 0/8px 8px no-repeat,
    #fff;
  border:1px solid #E2E8F0;
  position:relative;
}
.receipt-foot-text{font-family:var(--font-mono);font-size:10px;color:var(--paper-muted);}
.receipt-perf{
  height:12px;
  background-image:radial-gradient(circle at 6px 0, #FFFFFF 6px, transparent 6.5px);
  background-size:14px 12px;
  background-repeat:repeat-x;
  margin-top:2px;
}
@keyframes printIn{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}
.p-step.is-active .receipt-line:nth-child(1){animation-delay:.1s;}
.p-step.is-active .receipt-line:nth-child(2){animation-delay:.22s;}
.p-step.is-active .receipt-line:nth-child(3){animation-delay:.34s;}
.p-step.is-active .receipt-line:nth-child(4){animation-delay:.46s;}

/* --- Card 2: Reconciliation --- */
.recon-card{padding:24px; background:#FFFFFF;}
.recon-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.recon-label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);font-weight:600;}
.recon-status{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  color:#16A34A;
  background:#DCFCE7;
  border:1px solid #86EFAC;
  padding:4px 10px;border-radius:100px;
}
.recon-status::before{content:'';width:6px;height:6px;border-radius:50%;background:#16A34A;}
.recon-ring-row{display:flex;align-items:center;gap:20px;margin-bottom:22px;}
.recon-ring{width:96px;height:96px;flex:none;}
.recon-ring circle{fill:none;stroke-width:7;}
.recon-ring .track{stroke:#E2E8F0;}
.recon-ring .prog{
  stroke:url(#reconGrad);
  stroke-linecap:round;
  stroke-dasharray:251;
  stroke-dashoffset:251;
  transform:rotate(-90deg);
  transform-origin:50% 50%;
  will-change:stroke-dashoffset;
}
.p-step.is-active .recon-ring .prog{animation:ringFill 1.4s cubic-bezier(.4,0,.2,1) 0.3s forwards;}
@keyframes ringFill{to{stroke-dashoffset:0;}}
.recon-ring-text{font-family:var(--font-mono);font-weight:700;font-size:16px;fill:#0F172A;}
.recon-copy p{margin:0;font-size:13px;color:var(--text-mid);line-height:1.55;}
.recon-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#E2E8F0;border-radius:12px;overflow:hidden;}
.recon-stat{background:#F8FAFC;padding:14px 16px;}
.recon-stat .rs-label{font-family:var(--font-mono);font-size:10.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.recon-stat .rs-value{font-family:var(--font-mono);font-weight:700;font-size:16px;color:var(--text-hi);}
.recon-stat.ok .rs-value{color:#16A34A;}

/* --- Card 3: Terminal / JSON --- */
.term-card{padding:0; background:#0F172A; color:#F8FAFC;}
.term-bar{
  display:flex;align-items:center;gap:6px;
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,0.1);
  background:#0A1229;
}
.term-dot{width:9px;height:9px;border-radius:50%;}
.term-dot:nth-child(1){background:#EF4444;}
.term-dot:nth-child(2){background:#F59E0B;}
.term-dot:nth-child(3){background:#22C55E;}
.term-file{
  margin-left:8px;
  font-family:var(--font-mono);font-size:11.5px;color:#94A3B8;
}
.term-body{padding:18px 18px 20px;font-family:var(--font-mono);font-size:12.5px;line-height:1.9;}
.term-row{color:#94A3B8; opacity:0; transform:translateX(-4px); will-change:opacity, transform;}
.p-step.is-active .term-row{animation:termType 0.4s ease forwards;}
.p-step.is-active .term-row:nth-child(1){animation-delay:.1s;}
.p-step.is-active .term-row:nth-child(2){animation-delay:.35s;}
.p-step.is-active .term-row:nth-child(3){animation-delay:.6s;}
.p-step.is-active .term-row:nth-child(4){animation-delay:.85s;}
@keyframes termType{to{opacity:1;transform:translateX(0);}}
.term-row .ok{color:#22C55E; font-weight:600;}
.term-row .arrow{color:#64748B;margin-right:6px;}
.term-status-line{
  display:flex;align-items:center;gap:8px;
  margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.1);
  opacity:0;
}
.p-step.is-active .term-status-line{animation:termType 0.4s ease forwards; animation-delay:1.15s;}
.term-status-badge{
  font-family:var(--font-mono);font-weight:700;font-size:11px;
  color:#22C55E;background:rgba(34,197,94,0.15);border:1px solid rgba(34,197,94,0.3);
  padding:3px 9px;border-radius:6px;letter-spacing:.04em;
}
.term-amounts{display:flex;gap:20px;margin-top:12px;}
.term-amt-label{color:#94A3B8;}
.term-amt-value{color:#FFFFFF;font-weight:600;}
.term-cursor{
  display:inline-block;width:6px;height:13px;background:#38BDF8;
  vertical-align:middle;margin-left:2px;
  animation:blink 1s step-end infinite;
}
@keyframes blink{50%{opacity:0;}}

/* ---------- Responsive (Mobile Optimized) ---------- */
@media (max-width:980px){
  .p-step{grid-template-columns:40px 1fr; gap:16px 16px;}
  .p-visual{grid-column:2; width:100%; max-width:100%; margin-top:8px;}
  .p-node{width:40px;height:40px;font-size:13px;}
  .p-rail{left:19px;}
  .p-packet{left:15px;}
  .p-text h3{font-size:20px; line-height:1.25;}
  .p-text > p{font-size:14px; max-width:100%; margin-bottom:16px;}
  .p-checks li{font-size:13px;}
}

@media (max-width:640px){
  .pipeline{padding:48px 12px 60px;}
  .p-steps{gap:40px;}

  /* Compact visual cards for mobile screen fit */
  .p-card{border-radius:14px;}

  .receipt-card{padding:16px 14px 0;}
  .receipt-top{margin-bottom:12px;}
  .receipt-top .rt-label{font-size:9px;}
  .receipt-top .rt-value{font-size:11.5px;}
  .receipt-badge{font-size:9.5px; padding:2px 6px;}
  .receipt-line{font-size:11px; padding:4px 0;}
  .receipt-total{font-size:12.5px; padding:8px 0 12px;}
  .receipt-foot{padding:10px 0;}
  .receipt-qr{width:32px; height:32px;}
  .receipt-foot-text{font-size:9px;}

  .recon-card{padding:16px;}
  .recon-label{font-size:9.5px;}
  .recon-status{font-size:9.5px; padding:3px 8px;}
  .recon-ring-row{flex-direction:row; align-items:center; gap:12px; margin-bottom:14px;}
  .recon-ring{width:68px; height:68px;}
  .recon-ring-text{font-size:13px;}
  .recon-copy p{font-size:11.5px; line-height:1.45;}
  .recon-stat{padding:10px 12px;}
  .recon-stat .rs-label{font-size:9px; margin-bottom:4px;}
  .recon-stat .rs-value{font-size:13px;}

  .term-bar{padding:10px 12px;}
  .term-file{font-size:10px;}
  .term-body{padding:12px 14px; font-size:11px; line-height:1.75;}
  .term-amounts{gap:12px; margin-top:8px;}
  .term-amt-value{font-size:11.5px;}
}

@media (prefers-reduced-motion:reduce){
  .p-rail, .p-packet, .p-grad, .p-node::after, .receipt-line, .term-row, .term-status-line, .recon-ring .prog, .term-cursor{
    animation:none !important;
  }
  .p-card{opacity:1;transform:none;}
  .receipt-line, .term-row, .term-status-line{opacity:1;transform:none;}
  .recon-ring .prog{stroke-dashoffset:20;}
}

/* ==========================================================================
   CA & Tax Consultant Collaboration Component Styles (Hand-Crafted Light Theme)
   ========================================================================== */
.ca-sec {
  background:
    radial-gradient(60% 50% at 12% 8%, rgba(37,99,235,0.05) 0%, transparent 62%),
    radial-gradient(45% 40% at 92% 90%, rgba(2,132,199,0.06) 0%, transparent 65%),
    #FAFCFF;
  font-family: var(--font-body);
  color: var(--text-mid);
  padding: 100px 24px;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
}
.ca-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 64px;
  align-items: center;
}

.ca-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0066CC;
  background: #EFF6FF;
  border: 1px solid rgba(59, 130, 246, 0.3);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 24px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(37,99,235,0.06);
}
.ca-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0066CC;
  box-shadow: 0 0 10px 2px rgba(0,102,204,0.5);
}

.ca-text h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #0F172A;
  margin: 0 0 20px;
}
.ca-text > p {
  font-size: 16.5px;
  line-height: 1.65;
  color: #475569;
  margin: 0 0 40px;
  max-width: 52ch;
}

.ca-feats {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  border: none;
}
.ca-feat {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  align-items: flex-start;
  box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.04), inset 0 1px 0 0 rgba(255, 255, 255, 1);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ca-feat:hover {
  transform: translateY(-2px);
  border-color: #BFDBFE;
  box-shadow: 0 16px 36px -12px rgba(37, 99, 235, 0.12), inset 0 1px 0 0 rgba(255, 255, 255, 1);
  background: #FFFFFF;
}
.ca-feat-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border: 1px solid #BFDBFE;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}
.ca-feat-icon svg {
  width: 22px;
  height: 22px;
}
.ca-feat h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16.5px;
  color: #0F172A;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ca-feat p {
  font-size: 14px;
  line-height: 1.55;
  color: #475569;
  margin: 0;
  max-width: 44ch;
}
.ca-chip {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: #0066CC;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

/* ---------- Ledger panel ---------- */
.ca-panel-wrap {
  position: relative;
}

.sync-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 20px;
}
.sync-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 84px;
}
.sync-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  box-shadow: 0 4px 12px rgba(15,23,42,0.05);
}
.sync-avatar svg {
  width: 19px;
  height: 19px;
}
.sync-node.you .sync-avatar {
  border-color: #2563EB;
  color: #2563EB;
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}
.sync-node span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #64748B;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
}

.sync-link {
  flex: 1;
  position: relative;
  height: 2px;
  background: repeating-linear-gradient(90deg, #CBD5E1 0 6px, transparent 6px 12px);
  margin-top: -20px;
  max-width: 140px;
}
.sync-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0284C7;
  box-shadow: 0 0 10px 4px rgba(2,132,199,0.6);
  transform: translateY(-50%);
  animation: syncTravel 3.2s ease-in-out infinite;
}
@keyframes syncTravel {
  0% { left: 0%; opacity: 0; }
  10% { opacity: 1; }
  50% { left: calc(100% - 7px); opacity: 1; }
  60% { opacity: 0; }
  100% { left: calc(100% - 7px); opacity: 0; }
}
.sync-lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -20px;
  box-shadow: 0 2px 6px rgba(15,23,42,0.06);
}
.sync-lock svg {
  width: 12px;
  height: 12px;
}

.ledger-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 28px 28px 24px;
  box-shadow: 0 25px 60px -15px rgba(15,23,42,0.08), inset 0 1px 0 0 rgba(255,255,255,1);
  position: relative;
}
.ledger-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #F1F5F9;
}
.ledger-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748B;
  font-weight: 700;
}
.ledger-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #15803D;
  background: #DCFCE7;
  border: 1px solid #86EFAC;
  padding: 4px 12px;
  border-radius: 100px;
  box-shadow: 0 0 12px rgba(34,197,94,0.15);
}
.ledger-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16A34A;
  animation: pillPulse 2s ease-in-out infinite;
}
@keyframes pillPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.ledger-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ledger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px;
  border-radius: 10px;
  border-top: 1px solid #F8FAFC;
  opacity: 0;
  transform: translateY(8px);
  will-change: opacity, transform;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ledger-row:hover {
  background: #F8FAFC;
}
.ca-panel-wrap.is-active .ledger-row {
  opacity: 1;
  transform: translateY(0);
}
.ca-panel-wrap.is-active .ledger-row:nth-child(1) { transition-delay: .05s; }
.ca-panel-wrap.is-active .ledger-row:nth-child(2) { transition-delay: .15s; }
.ca-panel-wrap.is-active .ledger-row:nth-child(3) { transition-delay: .25s; }
.ca-panel-wrap.is-active .ledger-row:nth-child(4) { transition-delay: .35s; }
.lr-label {
  font-size: 13.5px;
  color: #475569;
  font-weight: 500;
}
.lr-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13.5px;
  color: #0F172A;
  text-align: right;
}
.lr-value small {
  display: block;
  font-weight: 500;
  color: #64748B;
  font-size: 11px;
  margin-top: 2px;
}
.lr-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #15803D;
  background: #DCFCE7;
  border: 1px solid #86EFAC;
  padding: 3px 9px;
  border-radius: 6px;
}

.ledger-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 14px;
  background: #F8FAFC;
  border-radius: 12px;
  border: 1px solid #F1F5F9;
  font-size: 12px;
  color: #475569;
  font-weight: 500;
}
.ledger-foot svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: #0066CC;
}

@media (max-width: 960px) {
  .ca-inner {
    grid-template-columns: 1fr;
    gap: 52px;
  }
  .ca-panel-wrap {
    max-width: 100%;
  }
}
@media (max-width: 520px) {
  .ca-sec {
    padding: 60px 16px;
  }
  .ca-feat {
    grid-template-columns: 44px 1fr;
    padding: 18px;
    gap: 14px;
  }
  .ledger-card {
    padding: 20px 18px;
  }
}