/* === APPLICATION PAGES SHARED CSS === */

/* ─── CSS Variables (duplicated from main.css so this file works standalone) ─── */
:root {
  --navy:       #0e2344;
  --blue:       #1a4a8a;
  --blue-mid:   #1e5ca8;
  --blue-light: #2b78d0;
  --steel:      #e8eef7;
  --gold:       #d4891a;
  --gold-lt:    #f0a830;
  --gold-light: #f0a830;
  --white:      #ffffff;
  --off-white:  #f4f7fb;
  --off:        #f4f7fb;
  --text:       #1a1e2e;
  --text-muted: #4a5568;
  --muted:      #4a5568;
  --border:     #d0daea;
}

/* ─── Base resets needed for standalone rendering ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Lato', sans-serif; color: var(--text); background: var(--white); line-height: 1.7; overflow-x: hidden; }
img { max-width: 100%; display: block; }
.container, .wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
section { padding: 80px 0; }
a { color: var(--blue-mid); text-decoration: none; transition: color .2s; }
a:visited { color: var(--blue-mid); }
a:hover { color: var(--gold); }
[class*="btn-"], [class*="btn-"]:visited, [class*="btn-"]:hover { color: #fff !important; text-decoration: none; }
.section-label { font-size: .73rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--blue-mid); margin-bottom: 10px; }
.section-heading { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.9rem,3vw,2.8rem); font-weight: 800; color: var(--navy); line-height: 1.15; }
.section-heading span { color: var(--blue-mid); }
.section-header { margin-bottom: 40px; }
.btn-primary { display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:#fff !important;font-weight:700;font-size:.9rem;letter-spacing:.05em;text-transform:uppercase;padding:13px 26px;border-radius:4px;text-decoration:none;transition:background .2s,transform .15s;box-shadow:0 4px 14px rgba(212,137,26,.35); }
.btn-primary:visited { color:#fff !important; }
.btn-primary:hover { background:var(--gold-lt);transform:translateY(-1px);color:#fff !important; }
.btn-ghost { display:inline-flex;align-items:center;gap:8px;background:transparent;color:#fff !important;font-weight:700;font-size:.9rem;letter-spacing:.05em;text-transform:uppercase;padding:12px 26px;border-radius:4px;border:2px solid rgba(255,255,255,.35);text-decoration:none;transition:border-color .2s,background .2s; }
.btn-ghost:visited { color:#fff !important; }
.btn-ghost:hover { border-color:#fff;background:rgba(255,255,255,.08);color:#fff !important; }
.page-hero{background:#0e2344;background:linear-gradient(135deg,#0e2344 0%,#1a4a8a 60%,#1e5ca8 100%);padding:54px 0 48px;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-45deg,transparent,transparent 40px,rgba(255,255,255,.016) 40px,rgba(255,255,255,.016) 41px)}
.page-hero .inner{position:relative;z-index:1}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:.78rem;color:#7aaed0;margin-bottom:18px;flex-wrap:wrap}
.breadcrumb a{color:#7aaed0;text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:#f0a830}
.breadcrumb span{color:rgba(255,255,255,.35)}
.page-hero h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(2.2rem,4.5vw,3.4rem);font-weight:800;color:#fff;line-height:1.1;letter-spacing:-.01em;margin-bottom:14px}
.page-hero h1 em{font-style:normal;color:#f0a830}
.page-hero .hero-sub{color:#a8c8ea;font-size:1.05rem;max-width:580px;line-height:1.75;margin-bottom:26px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}

.intro-section{background:var(--off-white)}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.intro-content h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(1.7rem,2.5vw,2.3rem);font-weight:800;color:var(--navy);line-height:1.15;margin-bottom:16px}
.intro-content h2 span{color:var(--blue-mid)}
.intro-content p{color:var(--text-muted);font-size:.96rem;line-height:1.8;margin-bottom:14px}
.check-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:16px}
.check-list li{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;color:var(--text);line-height:1.5}
.check-list li::before{content:'✓';display:flex;align-items:center;justify-content:center;width:20px;height:20px;min-width:20px;background:var(--blue);color:#fff;font-size:.65rem;font-weight:900;border-radius:50%;margin-top:2px}
.check-list li strong{color:var(--navy)}

.info-panel{background:#0e2344;background:linear-gradient(160deg,#0e2344 0%,#1a4a8a 100%);border-radius:8px;padding:36px 30px;color:#fff}
.info-panel h3{font-family:'Barlow Condensed',sans-serif;font-size:1.3rem;font-weight:700;color:var(--gold-light);letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12)}
.info-panel p{color:#a8c8ea;font-size:.9rem;line-height:1.75;margin-bottom:14px}
.stat-rows{display:flex;flex-direction:column;gap:0}
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:.88rem}
.stat-row:last-child{border-bottom:none}
.stat-row .sk{color:#8aafce;font-weight:600}
.stat-row .sv{color:#e0eeff;font-weight:700;text-align:right}

.benefits-section{background:var(--white)}
.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.benefit-card{border:1px solid var(--border);border-radius:8px;padding:26px 22px;transition:box-shadow .2s,border-color .2s}
.benefit-card:hover{box-shadow:0 4px 20px rgba(14,35,68,.1);border-color:var(--blue-light)}
.benefit-card .bi{font-size:2rem;margin-bottom:12px;display:block}
.benefit-card h4{font-family:'Barlow Condensed',sans-serif;font-size:1.1rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.benefit-card p{font-size:.88rem;color:var(--text-muted);line-height:1.7}

.related-section{background:var(--steel)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.related-card{background:var(--white);border:1px solid var(--border);border-radius:8px;padding:22px;text-decoration:none;color:inherit;transition:box-shadow .2s}
.related-card:hover{box-shadow:0 4px 16px rgba(14,35,68,.1)}
.related-card .rc-icon{font-size:1.8rem;margin-bottom:10px;display:block}
.related-card h4{font-family:'Barlow Condensed',sans-serif;font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:6px}
.related-card p{font-size:.85rem;color:var(--text-muted);line-height:1.65}
.related-card .rc-link{display:inline-block;margin-top:10px;font-size:.8rem;font-weight:700;color:var(--blue-mid);text-transform:uppercase;letter-spacing:.06em}

.faq-section{background:var(--off-white)}
.faq-list{display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:last-child{border-bottom:none}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;cursor:pointer;font-weight:700;font-size:.96rem;color:var(--navy);background:var(--white);transition:background .2s;gap:16px}
.faq-q:hover{background:var(--off-white)}
.faq-q .faq-icon{font-size:1.1rem;color:var(--blue-mid);transition:transform .3s;flex-shrink:0}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{display:none;padding:0 22px 18px;font-size:.92rem;color:var(--text-muted);line-height:1.8;background:var(--off-white)}
.faq-item.open .faq-a{display:block}

.cta-band{background:#1e5ca8;background:linear-gradient(135deg,#1e5ca8 0%,#0e2344 100%);padding:60px 0;text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-45deg,transparent,transparent 30px,rgba(255,255,255,.02) 30px,rgba(255,255,255,.02) 31px)}
.cta-band .container{position:relative;z-index:1}
.cta-band h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:800;color:#fff;margin-bottom:12px}
.cta-band p{color:#a8c8ea;font-size:1rem;margin-bottom:28px}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

@media(max-width:768px){.intro-grid{grid-template-columns:1fr;gap:36px}.benefits-grid{grid-template-columns:1fr 1fr}.related-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.benefits-grid,.related-grid{grid-template-columns:1fr}}

/* ── Applications Hub Specific ─────────────────────────────── */
.app-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:10px}
.app-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--border);border-radius:10px;padding:28px 24px;text-decoration:none;color:inherit;transition:box-shadow .2s,transform .2s}
.app-card:hover{box-shadow:0 6px 24px rgba(14,35,68,.12);transform:translateY(-3px)}
.app-card:visited{color:inherit}
.app-card .app-icon{width:52px;height:52px;background:var(--navy);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--gold);margin-bottom:16px;flex-shrink:0}
.app-card h3{font-family:'Barlow Condensed',sans-serif;font-size:1.2rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.app-card p{font-size:.88rem;color:var(--text-muted);line-height:1.7;flex:1}
.app-card .app-link{display:inline-block;margin-top:14px;font-size:.8rem;font-weight:700;color:var(--blue-mid);text-transform:uppercase;letter-spacing:.06em}

/* ── Why Section ─────────────────────────────────────────── */
.why-section{background:var(--white)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:10px}
.why-card{background:var(--off-white);border:1px solid var(--border);border-radius:10px;padding:28px 24px}
.why-card .why-ico{width:48px;height:48px;background:var(--navy);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:var(--gold);margin-bottom:14px}
.why-card h4{font-family:'Barlow Condensed',sans-serif;font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.why-card p{font-size:.88rem;color:var(--text-muted);line-height:1.7}

/* ── DCS Model Spec Table ─────────────────────────────────── */
.dcs-section{background:var(--white)}
.dcs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:10px}
.dcs-card{background:var(--off-white);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.dcs-card-head{background:var(--navy);padding:16px 20px;display:flex;align-items:center;justify-content:space-between}
.dcs-card-head h4{font-family:'Barlow Condensed',sans-serif;font-size:1.1rem;font-weight:800;color:#fff;margin:0}
.dcs-badge{background:var(--gold);color:var(--navy);font-size:.72rem;font-weight:800;padding:3px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.05em}
.dcs-card-body{padding:20px}
.dcs-spec-row{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--border);font-size:.87rem}
.dcs-spec-row:last-child{border-bottom:none}
.dcs-spec-row .sk{color:var(--text-muted)}
.dcs-spec-row .sv{font-weight:700;color:var(--navy);text-align:right}

/* ── Spec Grid (brewery / CBD pages) ──────────────────────── */
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:24px 0}
.spec-card{background:var(--off-white);border:1px solid var(--border);border-radius:8px;padding:20px;text-align:center}
.spec-card .sc-num{font-family:'Barlow Condensed',sans-serif;font-size:2rem;font-weight:800;color:var(--navy);line-height:1}
.spec-card .sc-label{font-size:.8rem;color:var(--text-muted);margin-top:4px}

/* ── Process Steps ───────────────────────────────────────── */
.steps-section{background:var(--steel)}
.steps-list{display:flex;flex-direction:column;gap:20px;margin-top:10px}
.step-item{display:grid;grid-template-columns:52px 1fr;gap:20px;align-items:start}
.step-num{width:52px;height:52px;background:var(--navy);color:var(--gold);font-family:'Barlow Condensed',sans-serif;font-size:1.5rem;font-weight:800;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.step-body h4{font-family:'Barlow Condensed',sans-serif;font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:6px}
.step-body p{font-size:.9rem;color:var(--text-muted);line-height:1.7}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:900px){.app-cards{grid-template-columns:repeat(2,1fr)}.why-grid{grid-template-columns:repeat(2,1fr)}.dcs-grid{grid-template-columns:1fr}.spec-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.app-cards{grid-template-columns:1fr}.why-grid{grid-template-columns:1fr}.spec-grid{grid-template-columns:1fr}}