/* ── algonew_style.css — shared component styles for location landing pages ── */

/* === UC CARDS (general content cards) === */
.uc-card{background:#fff;border:1px solid #E5E7EB;border-radius:14px;padding:26px;transition:box-shadow .22s,transform .22s;}
.uc-card:hover{box-shadow:0 8px 24px rgba(17,24,39,.10);transform:translateY(-3px);}
.uc-icon{width:42px;height:42px;border-radius:10px;background:#eff6ff;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}

/* === COST TABLE === */
.cost-table{width:100%;border-collapse:collapse;font-size:14px;}
.cost-table th,.cost-table td{border:1px solid #E5E7EB;padding:12px 14px;text-align:left;vertical-align:top;}
.cost-table thead th{background:#e4f0fb;font-weight:700;color:#111827;font-size:13px;text-transform:uppercase;letter-spacing:.4px;}
.cost-table thead th em{display:block;font-size:11px;font-weight:500;color:#4B5563;font-style:normal;margin-top:3px;text-transform:none;letter-spacing:0;}
.cost-table tbody tr:nth-child(even){background:#f8faff;}
.cost-table .total-row td,.cost-table .cost-total td{background:#2563EB!important;color:#fff!important;font-weight:800;}
.cost-table .cost-total td em{color:rgba(255,255,255,.78)!important;display:block;font-size:12px;font-weight:500;font-style:normal;margin-top:3px;}
@media(max-width:700px){.cost-table th:nth-child(n+3),.cost-table td:nth-child(n+3){display:none;}}

/* === PROCESS TIMELINE (vertical numbered steps) === */
.proc-timeline{max-width:820px;margin:0 auto;position:relative;}
.proc-timeline::before{content:'';position:absolute;left:29px;top:30px;bottom:30px;width:2px;background:linear-gradient(to bottom,#2563EB,#60a5fa,#2563EB);opacity:.2;border-radius:2px;}
.step-row{display:flex;gap:24px;margin-bottom:20px;align-items:flex-start;}
.step-num{flex-shrink:0;width:60px;height:60px;background:linear-gradient(135deg,#1d4ed8,#2563eb);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:1.1rem;box-shadow:0 4px 16px rgba(37,99,235,.35);z-index:1;position:relative;}
.step-body{background:#fff;border-radius:14px;padding:22px 26px;flex:1;box-shadow:0 2px 10px rgba(17,24,39,.07);border-left:4px solid #2563EB;}
.step-label{background:#eff6ff;color:#1d4ed8;font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:20px;letter-spacing:.4px;text-transform:uppercase;display:inline-block;margin-bottom:10px;}
@media(max-width:640px){.step-row{flex-direction:column;gap:12px;}.proc-timeline::before{display:none;}.step-num{width:48px;height:48px;font-size:1rem;}}

/* === PROCESS 3-COLUMN GROUPS === */
.proc-group{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative;margin-bottom:36px}
.proc-group::before{content:'';position:absolute;top:31px;left:calc(100%/6);right:calc(100%/6);height:2px;background:linear-gradient(90deg,var(--P),var(--G));z-index:0}
.proc-group .pstep{padding:0 8px}

/* === PRICING CARDS === */
.pricing-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.price-card{background:#fff;border:1px solid var(--BD);border-radius:var(--R2);padding:28px 24px;position:relative;overflow:hidden;transition:box-shadow .25s,transform .25s}
.price-card:hover{box-shadow:var(--S2);transform:translateY(-5px)}
.price-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px}
.price-card.pc-basic::before{background:linear-gradient(90deg,#16a34a,#4ade80)}
.price-card.pc-standard::before{background:linear-gradient(90deg,#2563eb,#60a5fa)}
.price-card.pc-enterprise::before{background:linear-gradient(90deg,#c2410c,#fb923c)}
.price-card.pc-standard{border-color:#bfdbfe;box-shadow:0 4px 20px rgba(37,99,235,.12)}
.pc-tier{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:2px;color:var(--T3);margin-bottom:12px}
.pc-name{font-family:var(--FH);font-size:18px;font-weight:800;color:var(--T);margin-bottom:8px}
.pc-range{font-family:var(--FH);font-size:26px;font-weight:900;color:var(--P);margin-bottom:4px;line-height:1.1}
.pc-timeline{font-size:12.5px;color:var(--T3);margin-bottom:20px}
.pc-divider{height:1px;background:var(--BD);margin-bottom:16px}
.pc-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.pc-list li{font-size:13px;color:var(--T2);display:flex;align-items:flex-start;gap:8px}
.pc-list li::before{content:'✓';color:var(--G);font-weight:800;flex-shrink:0;margin-top:1px}
.pc-best{font-size:11.5px;color:var(--T3);padding:8px 12px;background:var(--BG2);border-radius:8px;border:1px solid var(--BD)}
.pc-best strong{color:var(--T);font-size:12px}

/* "Most Popular" badge on pricing card */
.badge-standard{display:inline-block;background:var(--P);color:#fff;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;padding:4px 12px;border-radius:20px}

/* === COST FACTOR CARDS === */
.cf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.cf-card{background:#fff;border:1px solid var(--BD);border-radius:var(--R2);padding:22px 18px;transition:box-shadow .22s,transform .22s;position:relative;overflow:hidden}
.cf-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--P),var(--G))}
.cf-card:hover{box-shadow:var(--S2);transform:translateY(-4px)}
.cf-num{font-family:var(--FH);font-size:28px;font-weight:900;color:var(--PL);line-height:1;margin-bottom:8px}
.cf-card h4{font-size:14px;font-weight:800;color:var(--T);margin-bottom:6px}
.cf-card p{font-size:12.5px;color:var(--T2);line-height:1.65}

/* === TABBED FEATURES === */
.feat-tabs{display:flex;gap:0;border-bottom:2px solid var(--BD);margin-bottom:28px}
.ftab{font-family:var(--FH);font-size:13.5px;font-weight:600;padding:11px 22px;border:none;background:none;cursor:pointer;color:var(--T3);border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .2s,border-color .2s}
.ftab.active{color:var(--P);border-bottom-color:var(--P)}
.ftab:hover{color:var(--P)}
.fpanel{display:none}
.fpanel.active{display:block}

/* === APP ICON CARDS === */
.app-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:32px}
.app-card{background:#fff;border:1px solid var(--BD);border-radius:var(--R);padding:18px 16px;display:flex;align-items:center;gap:13px;transition:box-shadow .2s,border-color .2s}
.app-card:hover{box-shadow:var(--S1);border-color:var(--PM)}
.app-card-ico{width:44px;height:44px;border-radius:11px;background:var(--PL);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.app-card-ico svg{width:22px;height:22px;stroke:var(--P);fill:none;stroke-width:1.8}
.app-card strong{display:block;font-size:13.5px;font-weight:700;color:var(--T);line-height:1.3}
.app-card span{font-size:11.5px;color:var(--T3)}

/* === INDUSTRY CARDS === */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.ind-card{background:#fff;border:1px solid var(--BD);border-radius:var(--R2);padding:22px 18px;text-align:center;transition:box-shadow .2s,transform .2s,border-color .2s;position:relative;overflow:hidden}
.ind-card::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--P),var(--G));opacity:0;transition:opacity .2s}
.ind-card:hover{box-shadow:var(--S2);transform:translateY(-4px);border-color:var(--PM)}
.ind-card:hover::before{opacity:1}
.ind-card-ico{width:52px;height:52px;border-radius:14px;background:var(--PL);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.ind-card-ico svg{width:26px;height:26px;stroke:var(--P);fill:none;stroke-width:1.8}
.ind-card h3{font-size:14px;font-weight:700;color:var(--T);margin-bottom:8px;line-height:1.35}
.ind-card p{font-size:12.5px;color:var(--T2);line-height:1.65}

/* === FEATURE 8-GRID === */
.feat-8{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.feat-card{background:#fff;border:1px solid var(--BD);border-radius:var(--R2);padding:22px 18px;transition:box-shadow .2s,transform .2s}
.feat-card:hover{box-shadow:var(--S2);transform:translateY(-4px)}
.feat-card-ico{width:46px;height:46px;border-radius:12px;background:var(--PL);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.feat-card-ico svg{width:24px;height:24px;stroke:var(--P);fill:none;stroke-width:1.8}
.feat-card h3{font-size:14px;font-weight:700;color:var(--T);margin-bottom:8px;line-height:1.4}
.feat-card p{font-size:12.5px;color:var(--T2);line-height:1.65}

/* === RESPONSIVE === */
@media(max-width:1024px){
  .ind-grid{grid-template-columns:repeat(3,1fr)}
  .feat-8{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
  .proc-group{grid-template-columns:1fr;gap:20px}
  .proc-group::before{display:none}
  .pricing-cards{grid-template-columns:1fr}
  .app-cards{grid-template-columns:repeat(2,1fr)}
  .cf-grid{grid-template-columns:repeat(2,1fr)}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .feat-8{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .app-cards{grid-template-columns:1fr}
  .cf-grid{grid-template-columns:1fr}
  .ind-grid{grid-template-columns:1fr}
  .feat-8{grid-template-columns:1fr}
}

/* ─────────────────────────────────────────────────────────────
   SCROLL-REVEAL  (.fu = fade-up)
   JS adds class "in" via IntersectionObserver; --d sets per-element delay
───────────────────────────────────────────────────────────────*/
.fu{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease;transition-delay:var(--d,0s);}
.fu.in{opacity:1;transform:none;}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE GRID UTILITIES
   Used by location landing pages for hero/split/card layouts.
   These classes own display:grid + grid-template-columns only.
   gap / align-items / margin can be set inline per-section.
───────────────────────────────────────────────────────────────*/

/* Hero: wide text + narrow stats card */
.rg-hero{display:grid;grid-template-columns:1fr 400px;gap:56px;align-items:center;}

/* Content + sticky sidebar (Why-Invest, cost sidebar) */
.rg-split{display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:start;}

/* Two equal columns */
.rg-2col{display:grid;grid-template-columns:1fr 1fr;gap:22px;}

/* Three equal columns */
.rg-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

/* Four equal columns */
.rg-4col{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}

/* Five equal columns (tech stack) */
.rg-5col{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}

/* ── Tablet  ≤1100px ── */
@media(max-width:1100px){
  .rg-hero{grid-template-columns:1fr;}
  .rg-split{grid-template-columns:1fr;}
  .rg-4col{grid-template-columns:repeat(2,1fr);}
  .rg-5col{grid-template-columns:repeat(3,1fr);}
}

/* ── Phablet  ≤768px ── */
@media(max-width:768px){
  .rg-2col{grid-template-columns:1fr;}
  .rg-3col{grid-template-columns:repeat(2,1fr);}
  .rg-5col{grid-template-columns:repeat(2,1fr);}
}

/* ── Mobile  ≤540px ── */
@media(max-width:540px){
  .rg-3col,.rg-4col,.rg-5col{grid-template-columns:1fr;}
  /* Section padding reduction */
  .rg-hero{gap:32px;}
  .rg-split{gap:32px;}
}

/* Section vertical padding on mobile */
@media(max-width:640px){
  section{padding-top:50px!important;padding-bottom:50px!important;}
  /* Hero stays taller */
  .loc-hero{padding:60px 0 44px!important;}
  /* Reduce hero section specifically */
  section[style*="padding:88px"]{padding:60px 0 44px!important;}
  section[style*="padding:70px"]{padding:48px 0!important;}
  section[style*="padding:56px"]{padding:40px 0!important;}
}

/* ─────────────────────────────────────────────────────────────
   MOBILE OVERRIDES FOR INLINE-ONLY ELEMENTS
   Attribute selectors target inline styles that cannot be
   converted to classes (e.g. nested grids inside PHP loops).
───────────────────────────────────────────────────────────────*/
@media(max-width:768px){
  /* Pricing 3-col: inline grid-template-columns inside .rg-3col is overridden
     by the class at 768px (2-col), but at 480px becomes 1-col via .rg-3col */

  /* Hero stat 2×2 grid — stays 2-col on mobile (already compact) */

  /* FAQ answer text padding */
  .stc-faq-a,.sa-faq-a,.hs-faq-a,.sf-faq-a,.fd-faq-a,.ql-faq-a,.tj-faq-a{padding:0 16px 18px;}
  .stc-faq-q,.sa-faq-q,.hs-faq-q,.sf-faq-q,.fd-faq-q,.ql-faq-q,.tj-faq-q{padding:16px 18px;font-size:.92rem;}

  /* FAQ container max-width on mobile */
  .faq-item button{font-size:.92rem;}

  /* Trust bar wraps cleanly */
  .trust-bar-inner{gap:14px;}

  /* mid-cta button stacks */
  .mid-cta-btns,.final-cta-btns,.loc-hero-ctas{flex-direction:column;align-items:center;}
  .mid-cta-btns a,.final-cta-btns a,.loc-hero-ctas a{width:100%;max-width:320px;text-align:center;}

  /* uc-card hover lift removed on touch */
  .uc-card:hover{transform:none;}

  /* Process timeline number reduced */
  .step-num{width:48px;height:48px;font-size:1rem;}
}

@media(max-width:480px){
  /* Final CTA checks stack */
  .final-cta-checks{flex-direction:column;align-items:center;gap:12px;}
  /* Pricing cards side padding */
  .rg-3col > div[style*="border-radius:16px"]{padding:22px 18px!important;}
  /* Hero h1 font */
  h1{font-size:1.7rem!important;}
  /* Section heading */
  h2{font-size:1.3rem!important;}
}

/* ─────────────────────────────────────────────────────────────
   HERO SECTION  (dark gradient hero used on location pages)
───────────────────────────────────────────────────────────────*/
.loc-hero{background:linear-gradient(140deg,#0a1c2e 0%,#1e3a5f 55%,#0b2340 100%);padding:88px 0 68px;position:relative;overflow:hidden;width:100%;}
.loc-hero-glow{position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 90% 10%,rgba(29,78,216,.28) 0%,transparent 65%);pointer-events:none;}
.loc-hero h1{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:900;color:#fff;line-height:1.18;margin-bottom:20px;}
.loc-hero p{color:rgba(255,255,255,.82);font-size:1.05rem;line-height:1.78;max-width:560px;margin-bottom:28px;}
.loc-hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:50px;padding:6px 16px;margin-bottom:22px;}
.loc-hero-badge span{color:rgba(255,255,255,.9);font-size:.8rem;font-weight:600;}
.loc-hero-dot{width:7px;height:7px;background:#fbbf24;border-radius:50%;display:inline-block;}

/* Pill tags inside hero */
.loc-hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px;}
.loc-hero-tag{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);color:#fff;padding:8px 18px;border-radius:50px;font-size:.9rem;font-weight:600;}

/* CTA button row */
.loc-hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
.btn-primary{background:#1d4ed8;color:#fff;padding:14px 32px;border-radius:8px;font-weight:700;text-decoration:none;font-size:1rem;display:inline-block;box-shadow:0 4px 16px rgba(29,78,216,.5);}
.btn-outline-white{border:2px solid rgba(255,255,255,.4);color:#fff;padding:14px 32px;border-radius:8px;font-weight:600;text-decoration:none;font-size:1rem;display:inline-block;}
.btn-primary:hover{background:#1e40af;color:#fff;text-decoration:none;}
.btn-outline-white:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none;}

/* Hero stats box */
.loc-hero-stats{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:32px;}
.loc-hero-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.loc-stat{background:rgba(255,255,255,.08);border-radius:12px;padding:18px;text-align:center;}
.loc-stat-num{font-size:2rem;font-weight:900;color:#fff;}
.loc-stat-label{font-size:.78rem;color:rgba(255,255,255,.7);margin-top:4px;}
.loc-stat-footer{margin-top:14px;background:rgba(255,255,255,.08);border-radius:12px;padding:14px;text-align:center;}
.loc-stat-footer-label{color:rgba(255,255,255,.7);font-size:.78rem;margin-bottom:6px;}
.loc-stat-footer-value{color:#fff;font-size:.88rem;font-weight:700;line-height:1.8;}

/* ─────────────────────────────────────────────────────────────
   TRUST BAR
───────────────────────────────────────────────────────────────*/
.trust-bar{background:#fff;border-bottom:1px solid #E5E7EB;padding:22px 0;}
.trust-bar-inner{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center;}
.trust-bar-label{font-size:.78rem;color:#6b7280;font-weight:600;white-space:nowrap;}
.trust-bar-item{color:#374151;font-weight:700;font-size:.88rem;}
.trust-bar-sep{color:#9ca3af;}

/* ─────────────────────────────────────────────────────────────
   SECTION LABEL + HEADING pattern
───────────────────────────────────────────────────────────────*/
.sec-label{color:#1d4ed8;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;font-size:.78rem;}
.sec-title{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:800;color:#111827;margin-top:10px;}
.sec-sub{color:#6b7280;max-width:680px;margin:12px auto 0;font-size:.94rem;line-height:1.7;}

/* ─────────────────────────────────────────────────────────────
   QUICK COST SIDEBAR
───────────────────────────────────────────────────────────────*/
.cost-sidebar{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:28px;}
.cost-sidebar h3{font-size:1rem;font-weight:800;color:#111827;margin-bottom:18px;}
.cost-tier{border-radius:10px;padding:14px;margin-bottom:12px;}
.cost-tier-label{font-size:.78rem;font-weight:600;color:#6b7280;margin-bottom:4px;}
.cost-tier-range{font-size:1.3rem;font-weight:900;color:#1d4ed8;}
.cost-tier-note{font-size:.78rem;color:#6b7280;}
.cost-tier.popular{border:2px solid #bfdbfe;background:#eff6ff;}
.cost-tier.popular .cost-tier-label{color:#1d4ed8;font-weight:700;}

/* ─────────────────────────────────────────────────────────────
   MID CTA BANNER
───────────────────────────────────────────────────────────────*/
.mid-cta{background:linear-gradient(140deg,#0a1c2e 0%,#1e3a5f 55%,#0b2340 100%);padding:56px 0;text-align:center;}
.mid-cta h2{color:#fff;font-size:clamp(1.3rem,2.5vw,2rem);font-weight:800;margin-bottom:14px;}
.mid-cta p{color:rgba(255,255,255,.82);max-width:640px;margin:0 auto 28px;line-height:1.7;}
.mid-cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* ─────────────────────────────────────────────────────────────
   FINAL CTA CARD
───────────────────────────────────────────────────────────────*/
.final-cta-card{background:linear-gradient(140deg,#0a1c2e 0%,#1e3a5f 55%,#0b2340 100%);border-radius:20px;padding:60px 40px;text-align:center;}
.final-cta-card h2{color:#fff;font-size:clamp(1.4rem,2.5vw,2.1rem);font-weight:800;margin-bottom:16px;}
.final-cta-card p{color:rgba(255,255,255,.82);max-width:700px;margin:0 auto 28px;line-height:1.7;}
.final-cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.final-cta-checks{margin-top:28px;display:flex;justify-content:center;gap:28px;flex-wrap:wrap;}
.final-cta-checks span{color:rgba(255,255,255,.75);font-size:.88rem;}

/* ─────────────────────────────────────────────────────────────
   INFO BOXES (light blue background callout)
───────────────────────────────────────────────────────────────*/
.info-callout{background:#eff6ff;border-radius:14px;padding:24px 28px;text-align:center;}
.info-callout p{color:#1e3a8a;font-weight:700;font-size:.95rem;margin:0;}

/* ─────────────────────────────────────────────────────────────
   STAKEHOLDER / BENEFIT CARDS (white bordered)
───────────────────────────────────────────────────────────────*/
.benefit-card{border:1px solid #e5e7eb;border-radius:12px;padding:18px;}
.benefit-card-header{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.benefit-card p{font-size:.84rem;color:#4b5563;margin:0;line-height:1.7;}

/* ─────────────────────────────────────────────────────────────
   FAQ ACCORDION  (generic — pair with page-specific .xxx-faq-q/a)
───────────────────────────────────────────────────────────────*/
.faq-item{border:1px solid #e5e7eb;border-radius:12px;margin-bottom:14px;background:#fff;overflow:hidden;}
.faq-q{width:100%;text-align:left;padding:20px 24px;background:none;border:none;font-size:1rem;font-weight:700;color:#111827;cursor:pointer;display:flex;justify-content:space-between;align-items:center;}
.faq-q i{flex-shrink:0;transition:transform .3s;}
.faq-a{display:none;padding:0 24px 20px;}
.faq-a p{color:#4b5563;line-height:1.8;margin:0;}