/* Copyright Application page styles
   Mobile-first, semantic and accessible. */
:root{
  --primary:#4c1d95; /* purple */
  --navy:#0b5394;    /* dark blue */
  --accent:#f97316;  /* orange */
  --teal:#0db5a0;    /* teal */
  --muted:#6b7280;
  --card:#ffffff;
  --bg:#fbfdff;
}

html,body{height:100%;}
body.copyright-page{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;line-height:1.45;color:#052c45;background:var(--bg);}
.container{max-width:1100px;margin:0 auto;padding:18px}

/* HERO */
.hero{
  position:relative;
  padding:84px 0 56px;
  overflow:hidden;
  /* dark overlay + background image (relative to css file) */
  background-image: linear-gradient(180deg, rgba(5,12,24,0.78), rgba(5,12,24,0.45)), url('../assets/images/bg.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: #fff;
}
.hero-grid{display:block}
.kicker{color:rgba(255,255,255,0.92);font-weight:700;margin:0 0 8px}
.hero-left h1{font-size:28px;margin:6px 0 12px;color:#fff;line-height:1.06}
.hero-sub{color:rgba(255,255,255,0.92);margin-bottom:12px;font-size:15px}
.hero-ctas .btn{font-weight:700}
.hero-highlights{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:8px}
.hero-highlights li{background:rgba(255,255,255,0.06);color:#fff;padding:10px;border-radius:8px;font-size:14px}
.trust-list .badge{opacity:0.96}

.hero-right{display:flex;justify-content:flex-end}
.form-card{width:100%;max-width:380px;background:var(--card);border-radius:12px;box-shadow:0 12px 36px rgba(7,22,34,0.12)}

/* Make the form heading in the hero black for contrast against white form card */
.form-card .card-body h2, #form-title { color: #000; }
.card-body{padding:18px}
.card-body h2{margin:0 0 8px;font-size:18px;color:var(--navy)}
.card-body form input,.card-body form select{width:100%;padding:10px;border:1px solid #e6eef0;border-radius:8px;margin-bottom:10px;font-size:14px}
.btn-primary{display:inline-block;background:var(--primary);color:#fff;padding:10px 14px;border-radius:8px;border:none;cursor:pointer}

/* ensure the form card stays readable on the dark hero */
.hero-right .form-card{color:#052c45}
.hero-visual{display:none}

/* Overview */
.section{padding:28px 0}
.overview-grid{display:grid;grid-template-columns:1fr;gap:18px}
.overview-left{display:block}
.lead{color:var(--muted)}
.overview-block{margin-top:12px}
.overview-list{list-style:disc;margin:8px 0 0 20px;color:var(--navy)}
.overview-checklist{list-style:none;padding:0;margin:8px 0 0}
.overview-checklist li{padding:8px 0;border-bottom:1px dashed #eef3f6;color:var(--navy)}
.info-card{display:flex;gap:12px;background:var(--card);padding:12px;border-radius:10px;align-items:flex-start;box-shadow:0 8px 24px rgba(7,22,34,0.04)}
.info-card .icon{width:46px;height:46px;border-radius:8px;background:linear-gradient(180deg,var(--primary),var(--navy));display:grid;place-items:center;color:#fff}
.info-card strong{display:block}
.muted{color:var(--muted)}
.overview-right{display:flex;flex-direction:column;gap:12px}
.help-card{background:var(--card);border-radius:10px;box-shadow:0 10px 30px rgba(7,22,34,0.04)}
.help-card .card-body{padding:14px}

/* Styles for the redesigned overview section */
.info-cards .card{background:var(--card);border-radius:10px;box-shadow:0 10px 28px rgba(7,22,34,0.05);border:1px solid rgba(7,22,34,0.03)}
.info-cards .icon-sm{width:44px;height:44px;display:grid;place-items:center;border-radius:8px}
.help-inline{background:linear-gradient(180deg,#ffffff,#fbfdff);border-radius:10px;border:1px solid rgba(7,22,34,0.04);box-shadow:0 8px 24px rgba(7,22,34,0.04)}
.help-inline .btn{margin-left:12px}

/* Typography fixes for the redesigned overview section */
.overview h2, #overview-heading { 
  font-family: 'Poppins', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:700;
  color:var(--navy);
  font-size:28px;
  margin-bottom:8px;
}
.overview .lead {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:16px;
  color:var(--muted);
}
.example-grid .example-card strong,
.info-cards .card strong,
.overview-checklist strong {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight:600;
  color:var(--navy);
}

/* Examples grid inside overview */
.example-grid .example-card{background:rgba(255,255,255,0.98);border-radius:8px;padding:10px;border:1px solid rgba(7,22,34,0.04);box-shadow:0 6px 18px rgba(7,22,34,0.04)}
.example-grid .example-card strong{display:block;color:var(--navy);margin-bottom:6px}
.example-grid .example-card .muted{color:var(--muted)}

/* Example feature cards */
.example-feature-grid .example-feature-card{background:var(--card);border-radius:10px;border:1px solid rgba(7,22,34,0.04);box-shadow:0 10px 28px rgba(7,22,34,0.04)}
.example-feature-grid .example-feature-icon{width:48px;height:48px;display:grid;place-items:center;font-size:18px}
.example-feature-grid .example-feature-card strong{display:block;margin-bottom:6px;color:var(--navy)}
.example-feature-grid a.small{display:inline-block;margin-top:8px;color:var(--primary);font-weight:600}

/* Types of works cards */
.types-grid .types-card{background:var(--card);border-radius:10px;border:1px solid rgba(7,22,34,0.04);box-shadow:0 10px 28px rgba(7,22,34,0.04)}
.types-grid .types-icon{width:46px;height:46px;display:grid;place-items:center;font-size:18px}
.types-grid h4{margin:0 0 6px;color:var(--navy)}
.types-grid .muted{color:var(--muted)}
.types-grid a.small{color:var(--primary);font-weight:600;margin-top:6px;display:inline-block}

@media (min-width:720px){
  .types-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
}

/* Force types-grid to use CSS Grid and show 3 columns on wider screens; override Bootstrap .row/.col flex behavior */
.types-grid{display:grid !important;grid-template-columns:1fr;gap:12px}
@media (min-width:520px){
  .types-grid{grid-template-columns:repeat(3,1fr) !important;gap:12px}
}
.types-grid > [class*="col-"]{
  width: auto !important;
  flex: none !important;
}

/* Documents cards styling */
.docs-grid .doc-card{background:var(--card);border-radius:10px;padding:14px;border:1px solid rgba(7,22,34,0.04);box-shadow:0 10px 28px rgba(7,22,34,0.04)}
.docs-grid .doc-icon{width:52px;height:52px;display:grid;place-items:center;font-size:18px}
.docs-grid .doc-format{color:var(--muted);font-size:0.9rem}
.docs-grid .doc-actions .btn{font-size:0.82rem;padding:6px 10px;border-radius:8px}
.docs-grid .doc-actions .btn-outline-primary{color:var(--primary);border-color:rgba(75,0,130,0.08)}

@media (min-width:920px){
  .docs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
}

/* Force docs-grid to use CSS Grid and show 3 columns on wider screens; override Bootstrap .row/.col flex behavior */
.docs-grid{display:grid !important;grid-template-columns:1fr;gap:12px}
@media (min-width:520px){
  .docs-grid{grid-template-columns:repeat(3,1fr) !important;gap:12px}
}
.docs-grid > [class*="col-"]{
  width: auto !important;
  flex: none !important;
}

/* Quick facts column */
.quick-facts .fact{background:var(--card);border-radius:10px;box-shadow:0 10px 28px rgba(7,22,34,0.06)}
.quick-facts .icon-sm{width:46px;height:46px;display:grid;place-items:center;border-radius:8px}
.quick-facts .fact strong{display:block;margin-bottom:4px;color:var(--navy)}
.quick-facts .fact .muted{color:var(--muted);font-size:0.92rem}

@media (min-width:720px){
  .overview-grid{padding-top:6px}
}


/* Cards grid */
.cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.card.small{background:var(--card);padding:14px;border-radius:10px;box-shadow:0 8px 24px rgba(7,22,34,0.04)}

/* Documents */
.docs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.doc{display:flex;gap:12px;align-items:center;background:var(--card);padding:12px;border-radius:10px;box-shadow:0 8px 24px rgba(7,22,34,0.04)}
.doc i{width:46px;height:46px;border-radius:8px;background:var(--navy);display:grid;place-items:center;color:#fff}
.doc p{margin:0;font-size:14px}
.doc .muted{display:block;font-size:13px}

/* Benefits */
.benefits-grid{display:grid !important;grid-template-columns:repeat(2,1fr);gap:12px}
.benefit{background:var(--card);padding:14px;border-radius:10px;display:flex;gap:12px;align-items:center;box-shadow:0 8px 24px rgba(7,22,34,0.04)}
.benefit i{width:52px;height:52px;border-radius:10px;background:linear-gradient(180deg,var(--primary),var(--navy));display:grid;place-items:center;color:#fff;font-size:18px}
.benefit h4{margin:0}

/* Redesigned benefit cards */
.benefits-grid .benefit-card{background:var(--card);border-radius:10px;border:1px solid rgba(7,22,34,0.04);box-shadow:0 12px 36px rgba(7,22,34,0.06)}
.benefits-grid .benefit-icon{width:54px;height:54px;display:grid;place-items:center;font-size:18px}
.benefits-grid h4{margin:0 0 6px;color:var(--navy)}
.benefits-grid .small.muted{color:var(--muted)}
.benefits-grid .benefit-card.recommended{border:2px solid rgba(76,29,149,0.12);transform:translateY(-4px)}
.benefits-grid .benefit-card a.small{color:var(--primary);font-weight:600;margin-top:6px;display:inline-block}

@media (min-width:720px){
  .benefits-grid{display:grid !important;grid-template-columns:repeat(3,1fr);gap:18px}
}

/* Ensure Bootstrap .row/.col don't force flex layout inside benefits grid */
.benefits-grid > [class*="col-"]{
  width: auto !important;
  flex: none !important;
}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.price-card{background:var(--card);padding:16px;border-radius:12px;box-shadow:0 12px 36px rgba(7,22,34,0.04);text-align:center}
.price-card.recommended{border:2px solid rgba(75,0,130,0.08);transform:scale(1.02)}
.price{font-size:22px;font-weight:800;color:var(--primary);margin:8px 0}
.price-card .muted{margin-bottom:12px}

/* New pricing card styles */
.price-card{text-align:left}
.price-card .badge{font-size:0.78rem;padding:6px 8px;border-radius:8px}
.price-card .price{font-size:28px}
.price-features{list-style:none;padding:0;margin:10px 0 0}
.price-features li{padding:8px 0;border-bottom:1px dashed #eef3f6;color:var(--navy)}
.price-card.recommended{border:2px solid rgba(76,29,149,0.12);box-shadow:0 18px 42px rgba(7,22,34,0.08)}
.pricing-note{margin-top:12px}

/* Ensure three pricing cards per row on most tablet/desktop sizes */
.pricing-grid{display:grid !important;grid-template-columns:1fr;gap:12px}
@media (min-width:520px){
  .pricing-grid{grid-template-columns:repeat(3,1fr) !important;gap:12px}
}

/* Override Bootstrap .row/.col flex behaviour inside pricing grid to allow true grid layout */
.pricing-grid > [class*="col-"]{
  width: auto !important;
  flex: none !important;
}

/* Process */
.process-list{list-style:none;padding:0;margin:12px 0}
.process-list li{background:var(--card);padding:12px;border-radius:8px;margin-bottom:8px;box-shadow:0 8px 24px rgba(7,22,34,0.04)}

/* Redesigned process steps */
.process-steps{display:grid;grid-template-columns:1fr;gap:12px}
.step-card{background:var(--card);border-radius:10px;border:1px solid rgba(7,22,34,0.04);box-shadow:0 10px 28px rgba(7,22,34,0.04)}
.step-icon{width:48px;height:48px;display:grid;place-items:center;font-size:18px}
.step-card h4{margin:0;color:var(--navy)}
.process-steps .small.muted{color:var(--muted)}
.process-steps .text-secondary{color:#7b8794}

@media (min-width:720px){
  .process-steps{grid-template-columns:repeat(3,1fr)}
}

/* FAQ accordion */
.faq-list details{background:var(--card);padding:12px;border-radius:8px;margin-bottom:8px}
.faq-list summary{cursor:pointer;font-weight:600}

/* Testimonials and blog */
.testi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.testi{background:var(--card);padding:12px;border-radius:8px}
.post{background:var(--card);padding:12px;border-radius:8px}

/* Responsive */
@media (min-width:720px){
  .hero-grid{grid-template-columns:1fr 360px}
  .grid-two{grid-template-columns:1fr 320px}
  .cards-grid{grid-template-columns:repeat(3,1fr)}
  .docs-grid{grid-template-columns:repeat(3,1fr)}
  .benefits-grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:520px){
  .form-card{width:100%}
  .pricing-grid{grid-template-columns:1fr}
}