/**
 * Author: Khalid Ali
 * Date: 7 September 2026
 * Calgary
 * Description: Implements the responsive dark, gold, and ivory visual system approved for the ReachThru.net public website.
 */
:root {
  --rt-black: #050505;
  --rt-panel: #111112;
  --rt-gold: #e0ae38;
  --rt-gold-light: #f0cb6b;
  --rt-ivory: #fff8e8;
  --rt-muted: #bbb8b0;
  --rt-border: #37332a;
}

html { scroll-behavior: smooth; }
body { background: var(--rt-black); color: var(--rt-ivory); font-family: "Segoe UI", Arial, sans-serif; line-height: 1.65; }
a { color: var(--rt-gold-light); text-underline-offset: .25rem; }
a:hover { color: var(--rt-ivory); }
:focus-visible { outline: 3px solid var(--rt-gold-light); outline-offset: 4px; }
.skip-link { background: var(--rt-gold); color: #000; left: 1rem; padding: .65rem 1rem; position: fixed; top: -5rem; z-index: 1100; }
.skip-link:focus { top: 1rem; }
.site-header { background: rgba(5, 5, 5, .96); border-bottom: 1px solid rgba(224, 174, 56, .16); position: sticky; top: 0; z-index: 1000; }
.navbar { min-height: 86px; }
.brand-lockup { align-items: center; display: inline-flex; font-size: 1.7rem; font-weight: 700; gap: .65rem; }
.brand-lockup img { border-radius: 20%; }
.brand-lockup > span > span, h1 span { color: var(--rt-gold); }
.navbar-nav { gap: .35rem; }
.navbar-dark .navbar-nav .nav-link { color: #e8e4db; padding: .6rem .9rem; }
.navbar-dark .navbar-nav .nav-link:hover { color: var(--rt-gold-light); }
.navbar-toggler { border-color: var(--rt-border); }

.hero-section, .page-hero { overflow: hidden; padding: clamp(4rem, 8vw, 8rem) 0; }
.hero-copy { position: relative; z-index: 2; }
.hero-brand { align-items: center; display: flex; font-size: clamp(2.2rem, 5vw, 4.6rem); font-weight: 750; gap: 1rem; margin-bottom: 1.5rem; }
.hero-brand img { border-radius: 24%; height: clamp(90px, 14vw, 170px); width: clamp(90px, 14vw, 170px); }
.hero-brand span span { color: var(--rt-gold); }
h1 { font-size: clamp(2.6rem, 6vw, 5.5rem); font-weight: 750; letter-spacing: -.045em; line-height: 1.03; }
.page-hero h1 { font-size: clamp(2.5rem, 5vw, 4.75rem); }
.lead { color: var(--rt-muted); font-size: clamp(1.05rem, 2vw, 1.3rem); margin-top: 1.75rem; max-width: 690px; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.btn-outline-gold { border: 1px solid var(--rt-gold); color: var(--rt-ivory); padding: .85rem 1.35rem; }
.btn-outline-gold:hover { background: var(--rt-gold); color: #090909; }
.store-placeholder, a.store-button { background: linear-gradient(135deg, var(--rt-gold-light), var(--rt-gold)); border-radius: .5rem; color: #15110a; display: inline-block; font-weight: 700; padding: .9rem 1.25rem; text-decoration: none; }
a.store-button:hover { color: #090909; }

.phone-stage { display: grid; min-height: 600px; place-items: center; position: relative; }
.signal-rings { aspect-ratio: 1; background: repeating-radial-gradient(circle, transparent 0 45px, rgba(224,174,56,.25) 46px 48px); border-radius: 50%; position: absolute; width: min(640px, 130%); }
.phone-frame { background: #080808; border: 2px solid #595959; border-radius: 3rem; box-shadow: 0 30px 80px rgba(0,0,0,.7); height: 610px; overflow: hidden; padding: 1rem .65rem 0; position: relative; width: 315px; z-index: 1; }
.phone-frame::before { background: #050505; border-radius: 0 0 1rem 1rem; content: ""; height: 24px; left: 33%; position: absolute; top: 0; width: 34%; z-index: 2; }
.phone-frame img { border-radius: 2.2rem 2.2rem 0 0; height: auto; width: 100%; }

.feature-strip { margin-top: -2rem; position: relative; z-index: 3; }
.feature-strip .container-xl { background: linear-gradient(145deg, #121212, #0b0b0b); border: 1px solid var(--rt-border); border-radius: 1.2rem; overflow: hidden; }
.feature-item { align-items: flex-start; display: flex; gap: 1rem; min-height: 190px; padding: 2rem 1.4rem; }
.feature-item + .feature-item { border-left: 1px solid var(--rt-border); }
.feature-number { border: 1px solid var(--rt-gold); border-radius: 50%; color: var(--rt-gold); display: grid; flex: 0 0 48px; height: 48px; place-items: center; }
.feature-item h3 { font-size: 1.1rem; font-weight: 700; }
.feature-item p { color: var(--rt-muted); margin: 0; }

.portfolio-section, .content-section { padding: clamp(4rem, 8vw, 7rem) 0; }
.eyebrow { color: var(--rt-gold); font-size: .82rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.section-heading { margin-bottom: 2.25rem; }
.section-heading h2, .detail-callout h2 { font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 700; }
.app-card { align-items: center; background: var(--rt-panel); border: 1px solid var(--rt-border); border-radius: 1.25rem; display: flex; gap: 1.5rem; max-width: 800px; padding: 1.6rem; }
.app-card img { border-radius: 20%; height: 110px; width: 110px; }
.app-card h3 { font-size: 1.75rem; }
.app-card p, .info-card p, .detail-callout p { color: var(--rt-muted); }
.app-card a, .info-card a, .detail-callout a { font-weight: 700; }
.screenshot-column { display: flex; justify-content: center; }
.app-screenshot { border: 1px solid var(--rt-border); border-radius: 2rem; box-shadow: 0 30px 90px rgba(0,0,0,.75); max-height: 720px; max-width: 100%; width: auto; }
.info-card { background: var(--rt-panel); border: 1px solid var(--rt-border); border-radius: 1rem; height: 100%; padding: 2rem; }
.info-card h2, .info-card h3 { font-size: 1.35rem; font-weight: 700; }
.detail-callout, .support-note { border-left: 3px solid var(--rt-gold); margin-top: 4rem; max-width: 900px; padding: .5rem 0 .5rem 2rem; }
.compact-hero { padding-bottom: 2.5rem; }
.support-section { padding-top: 1rem; }
.how-steps { counter-reset: how-step; display: grid; gap: 1rem; list-style: none; margin: 0; max-width: 960px; padding: 0; }
@media (min-width: 768px) {
  .how-steps { grid-template-columns: 1fr 1fr; }
}
.how-steps li { background: var(--rt-panel); border: 1px solid var(--rt-border); border-radius: 1rem; counter-increment: how-step; padding: 1.75rem 1.75rem 1.75rem 4.5rem; position: relative; }
.how-steps li::before { border: 1px solid var(--rt-gold); border-radius: 50%; color: var(--rt-gold); content: counter(how-step, decimal-leading-zero); display: grid; font-weight: 700; height: 48px; left: 1.25rem; place-items: center; position: absolute; top: 1.5rem; width: 48px; }
.how-steps h3 { font-size: 1.2rem; font-weight: 700; }
.how-steps p { color: var(--rt-muted); margin: .4rem 0 0; }
.faq-section { padding-top: 0; }
.faq-list { display: grid; gap: 1rem; max-width: 900px; }
.faq-item { background: var(--rt-panel); border: 1px solid var(--rt-border); border-radius: 1rem; }
.faq-item summary { cursor: pointer; font-weight: 700; list-style: none; padding: 1.25rem 1.5rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { color: var(--rt-gold-light); }
.faq-item p { color: var(--rt-muted); margin: 0; padding: 0 1.5rem 1.35rem; }

.document-section { padding: clamp(4rem, 8vw, 7rem) 0; }
.document-content { max-width: 850px; }
.document-content h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: 2rem; }
.document-content p { color: #d5d1c8; font-size: 1.08rem; margin-bottom: 1.4rem; }
.site-footer { border-top: 1px solid var(--rt-gold); padding: 2.4rem 0; }
.footer-grid { align-items: center; display: grid; gap: 1.5rem; grid-template-columns: 1.2fr 1fr; }
.publisher-lockup span { color: var(--rt-muted); display: block; font-size: .9rem; }
.publisher-lockup img { height: auto; margin-left: -1.4rem; max-width: 350px; width: 100%; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: flex-end; }
.footer-links a { color: var(--rt-ivory); text-decoration: none; }
.footer-links a:hover { color: var(--rt-gold); }
.copyright { color: #77736c; grid-column: 1 / -1; margin: 0; text-align: center; }

@media (max-width: 1199.98px) {
  .feature-item:nth-child(3) { border-left: 0; }
  .feature-item:nth-child(n+3) { border-top: 1px solid var(--rt-border); }
}
@media (max-width: 991.98px) {
  .navbar-collapse { border-top: 1px solid var(--rt-border); margin-top: .75rem; padding: .75rem 0 1rem; }
  .hero-section, .page-hero { text-align: center; }
  .hero-brand, .hero-actions { justify-content: center; }
  .lead { margin-left: auto; margin-right: auto; }
  .phone-stage { min-height: 570px; }
  .page-hero .screenshot-column { margin-top: 2rem; }
}
@media (max-width: 767.98px) {
  .feature-strip { margin: 0 .75rem; }
  .feature-item { min-height: 0; }
  .feature-item + .feature-item { border-left: 0; border-top: 1px solid var(--rt-border); }
  .app-card { align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .publisher-lockup img { margin-left: 0; max-width: 310px; }
  .footer-links { justify-content: center; }
}
@media (max-width: 420px) {
  .brand-lockup { font-size: 1.35rem; }
  .brand-lockup img { height: 44px; width: 44px; }
  .hero-brand { align-items: center; flex-direction: column; }
  .phone-frame { height: 530px; width: 275px; }
  .phone-stage { min-height: 510px; }
  .app-card { flex-direction: column; }
  .hero-actions > * { width: 100%; }
}