/* ===================================
     2	   CSS Variables - Brand Colors
     3	   =================================== */
     4	:root {
     5	  /* Primary Emerald Colors */
     6	  --color-emerald-rich: #00A86B;
     7	  --color-emerald-vibrant: #2ECC71;
     8	  --color-emerald-soft: #50C878;
     9	  
    10	  /* Ivory/Cream Colors */
    11	  --color-ivory-warm: #F8F6F0;
    12	  --color-cream-pure: #FAF9F6;
    13	  
    14	  /* Accent Colors */
    15	  --color-gold-divine: #D4AF37;
    16	  
    17	  /* Text Colors */
    18	  --color-charcoal: #2C3E50;
    19	  --color-black-rich: #1A1A1A;
    20	  
    21	  /* Typography */
    22	  --font-title: 'Cormorant Garamond', serif;
    23	  --font-subtitle: 'Montserrat', sans-serif;
    24	  --font-body: 'Inter', sans-serif;
    25	  
    26	  /* Reduced Spacing (30-40% reduction) */
    27	  --space-xs: 6px;
    28	  --space-sm: 12px;
    29	  --space-md: 18px;
    30	  --space-lg: 24px;
    31	  --space-xl: 32px;
    32	  --space-section: 40px;
    33	}
    34	
    35	/* ===================================
    36	   Global Styles
    37	   =================================== */
    38	* {
    39	  margin: 0;
    40	  padding: 0;
    41	  box-sizing: border-box;
    42	}
    43	
    44	html {
    45	  scroll-behavior: smooth;
    46	}
    47	
    48	body {
    49	  font-family: var(--font-body);
    50	  font-size: 16px;
    51	  line-height: 1.4; /* Single line spacing as requested */
    52	  color: var(--color-charcoal);
    53	  background-color: var(--color-ivory-warm);
    54	}
    55	
    56	.container {
    57	  max-width: 1200px;
    58	  margin: 0 auto;
    59	  padding: 0 var(--space-md);
    60	}
    61	
    62	/* ===================================
    63	   Navigation Header
    64	   =================================== */
    65	.nav-header {
    66	  position: fixed;
    67	  top: 0;
    68	  left: 0;
    69	  right: 0;
    70	  background-color: var(--color-cream-pure);
    71	  box-shadow: 0 2px 8px rgba(0, 168, 107, 0.1);
    72	  z-index: 1000;
    73	  padding: var(--space-sm) 0;
    74	}
    75	
    76	.nav-header .container {
    77	  display: flex;
    78	  justify-content: space-between;
    79	  align-items: center;
    80	}
    81	
    82	.nav-brand {
    83	  font-family: var(--font-title);
    84	  font-size: 1.3rem;
    85	  font-weight: 700;
    86	  color: var(--color-charcoal);
    87	  letter-spacing: 0.05em;
    88	}
    89	
    90	.nav-menu {
    91	  display: flex;
    92	  list-style: none;
    93	  gap: var(--space-lg);
    94	}
    95	
    96	.nav-menu a {
    97	  font-family: var(--font-subtitle);
    98	  font-size: 0.9rem;
    99	  font-weight: 500;
   100	  color: var(--color-charcoal);
   101	  text-decoration: none;
   102	  transition: all 0.3s ease;
   103	  padding: var(--space-xs) 0;
   104	}
   105	
   106	.nav-menu a:hover,
   107	.nav-menu a.active {
   108	  color: var(--color-emerald-vibrant);
   109	  text-shadow: 0 0 12px rgba(46, 204, 113, 0.4);
   110	  transform: translateY(-2px);
   111	}
   112	
   113	.nav-toggle {
   114	  display: none;
   115	  flex-direction: column;
   116	  background: none;
   117	  border: none;
   118	  cursor: pointer;
   119	  padding: var(--space-xs);
   120	}
   121	
   122	.nav-toggle span {
   123	  width: 25px;
   124	  height: 2px;
   125	  background-color: var(--color-charcoal);
   126	  margin: 3px 0;
   127	  transition: 0.3s;
   128	}
   129	
   130	/* ===================================
   131	   Hero Section
   132	   =================================== */
   133	.hero {
   134	  padding: calc(80px + var(--space-lg)) 0 var(--space-xl) 0;
   135	  text-align: center;
   136	  background: 
   137	    linear-gradient(135deg, rgba(248, 246, 240, 0.95) 0%, rgba(250, 249, 246, 0.92) 100%),
   138	    url('https://www.genspark.ai/api/files/s/xvIJJPw8?token=Z0FBQUFBQnBjLWJ1M24zU0xYcmVHQnJsSlY5ZW1iMGFFS09IX0FRWWJBTEFEVWc2RUMwTXNTTUdxeW5zRUd2TTV5NWgyNTJzN3hvSGdteXhpc3JiZWxEVkhpQ1Z0NFRxTk1rU085UEZnTEpnaV9NUkhjM1VXZ2k3YkZCYWpWTkRyOTBETVNaRjZqSS1qZFZzcllPS3NCQkZ0STFUYmNMQl9XNWxVQ0wtOGhybXJHbEVuekpacVNnQzd5X283SUp1cXFhUFM4ZTBzWEQ3cUVQNEpIa09MbUhkOUVJbWhYcFFMczRxMHRYMVJteU5UQktqMHh6TVN2MjV0MWl5bk9jLXBQNTBqNFFZOEYxSzVRQXZIR1NtQXMwQ1JjMnFsRmg1ZWc9PQ');
   139	  background-size: cover;
   140	  background-position: center;
   141	  background-attachment: fixed;
   142	  position: relative;
   143	}
   144	
   145	.hero-title {
   146	  font-family: var(--font-title);
   147	  font-size: 3rem;
   148	  font-weight: 700;
   149	  margin-bottom: var(--space-md);
   150	  letter-spacing: 0.08em;
   151	}
   152	
   153	.gradient-text {
   154	  background: linear-gradient(135deg, var(--color-emerald-vibrant) 0%, var(--color-emerald-rich) 50%, var(--color-gold-divine) 100%);
   155	  -webkit-background-clip: text;
   156	  -webkit-text-fill-color: transparent;
   157	  background-clip: text;
   158	  text-shadow: 0 4px 12px rgba(46, 204, 113, 0.2);
   159	}
   160	
   161	.hero-tagline {
   162	  font-family: var(--font-subtitle);
   163	  font-size: 1.2rem;
   164	  color: var(--color-charcoal);
   165	  margin-bottom: var(--space-sm);
   166	  font-weight: 500;
   167	}
   168	
   169	.hero-intro {
   170	  font-family: var(--font-subtitle);
   171	  font-size: 1rem;
   172	  color: var(--color-emerald-rich);
   173	  margin-bottom: var(--space-md);
   174	  font-weight: 600;
   175	  letter-spacing: 0.05em;
   176	}
   177	
   178	.hero-support {
   179	  font-family: var(--font-subtitle);
   180	  font-size: 0.9rem;
   181	  color: var(--color-gold-divine);
   182	  margin-bottom: var(--space-lg);
   183	  font-weight: 600;
   184	  letter-spacing: 0.08em;
   185	  text-transform: uppercase;
   186	}
   187	
   188	.hero-subtext {
   189	  font-size: 0.95rem;
   190	  color: var(--color-charcoal);
   191	  opacity: 0.8;
   192	  margin-bottom: var(--space-md);
   193	}
   194	
   195	.hero-description {
   196	  font-size: 0.95rem;
   197	  color: var(--color-charcoal);
   198	  line-height: 1.6;
   199	  max-width: 900px;
   200	  margin: 0 auto var(--space-lg) auto;
   201	  text-align: left;
   202	}
   203	
   204	.hero-cta {
   205	  display: flex;
   206	  gap: var(--space-md);
   207	  justify-content: center;
   208	  flex-wrap: wrap;
   209	}
   210	
   211	/* ===================================
   212	   Buttons
   213	   =================================== */
   214	.btn {
   215	  font-family: var(--font-subtitle);
   216	  font-size: 1rem;
   217	  font-weight: 600;
   218	  padding: var(--space-sm) var(--space-xl);
   219	  border-radius: 8px;
   220	  text-decoration: none;
   221	  transition: all 0.3s ease;
   222	  display: inline-block;
   223	  cursor: pointer;
   224	}
   225	
   226	.btn-primary {
   227	  background-color: var(--color-emerald-vibrant);
   228	  color: white;
   229	  border: 2px solid var(--color-emerald-vibrant);
   230	}
   231	
   232	.btn-primary:hover {
   233	  background-color: var(--color-emerald-rich);
   234	  border-color: var(--color-emerald-rich);
   235	  box-shadow: 0 0 20px rgba(46, 204, 113, 0.4), 0 0 40px rgba(46, 204, 113, 0.2);
   236	  transform: translateY(-3px);
   237	}
   238	
   239	.btn-secondary {
   240	  background-color: transparent;
   241	  color: var(--color-emerald-vibrant);
   242	  border: 2px solid var(--color-emerald-vibrant);
   243	}
   244	
   245	.btn-secondary:hover {
   246	  background-color: var(--color-emerald-vibrant);
   247	  color: white;
   248	  box-shadow: 0 0 20px rgba(46, 204, 113, 0.3);
   249	  transform: translateY(-3px);
   250	}
   251	
   252	/* ===================================
   253	   Sections
   254	   =================================== */
   255	.section {
   256	  padding: var(--space-section) 0;
   257	  position: relative;
   258	}
   259	
   260	.section::before {
   261	  content: '';
   262	  position: absolute;
   263	  top: 0;
   264	  left: 0;
   265	  right: 0;
   266	  bottom: 0;
   267	  background-size: cover;
   268	  background-position: center;
   269	  background-attachment: fixed;
   270	  opacity: 0.15;
   271	  z-index: 0;
   272	  pointer-events: none;
   273	}
   274	
   275	.section > .container {
   276	  position: relative;
   277	  z-index: 1;
   278	}
   279	
   280	.section-alt {
   281	  background: 
   282	    linear-gradient(135deg, rgba(250, 249, 246, 0.98) 0%, rgba(248, 246, 240, 0.95) 100%),
   283	    url('https://www.genspark.ai/api/files/s/mfwaE1MS?token=Z0FBQUFBQnBjLWJ1ZW5HR1JzOENrVWpudnJtZVlMZDZCSm9qTk5OSVUtNmxZSTJRSzZKbEFETGp5cEJ3Tm51R3BRNEQwQ0Z5VXByNjVncS1NUlhYdl9uWjdPNU9FVFN4VDZRazNfNUZiRG8yUEl3MVhJdVFrbS1Ybnk3WEwxVVQxOS1BY21BX1k2Qk5FUF9pc1I5elBGZTFzOXBveWI0XzZ3ak56R2Z4R1hQZWJTVXIxOGZldWJPQjNZRllkWElReGlKLXlSam9zMmZ1UGZrUWdvM0JLajFKNW9ZNHpoRmxzeU5YS0dHTGpqQkNtdFJOemdLWmJ2djVfT0hEX0tDNmRValhQWm8zSWlTUnpfdGdPeEhZU25ydHJ6SGFTNWdnTkE9PQ');
   284	  background-size: cover;
   285	  background-position: center;
   286	  background-attachment: fixed;
   287	}
   288	
   289	.section-title {
   290	  font-family: var(--font-title);
   291	  font-size: 2.5rem;
   292	  font-weight: 700;
   293	  color: var(--color-charcoal);
   294	  margin-bottom: var(--space-lg);
   295	  text-align: center;
   296	  letter-spacing: 0.03em;
   297	  text-shadow: 0 2px 8px rgba(46, 204, 113, 0.1);
   298	  position: relative;
   299	  padding-bottom: var(--space-md);
   300	}
   301	
   302	.section-title::after {
   303	  content: '';
   304	  position: absolute;
   305	  bottom: 0;
   306	  left: 50%;
   307	  transform: translateX(-50%);
   308	  width: 60px;
   309	  height: 3px;
   310	  background: linear-gradient(90deg, 
   311	    transparent 0%, 
   312	    var(--color-emerald-vibrant) 25%, 
   313	    var(--color-gold-divine) 75%, 
   314	    transparent 100%);
   315	  border-radius: 2px;
   316	}
   317	
   318	.content {
   319	  max-width: 900px;
   320	  margin: 0 auto var(--space-lg) auto;
   321	}
   322	
   323	.content p {
   324	  margin-bottom: var(--space-md);
   325	  line-height: 1.4;
   326	}
   327	
   328	.content h3 {
   329	  font-family: var(--font-subtitle);
   330	  font-size: 1.3rem;
   331	  font-weight: 600;
   332	  color: var(--color-emerald-rich);
   333	  margin-top: var(--space-lg);
   334	  margin-bottom: var(--space-sm);
   335	  letter-spacing: 0.02em;
   336	}
   337	
   338	.content ul {
   339	  margin-bottom: var(--space-md);
   340	  margin-left: var(--space-lg);
   341	  line-height: 1.4;
   342	}
   343	
   344	.content li {
   345	  margin-bottom: var(--space-xs);
   346	}
   347	
   348	.content em {
   349	  color: var(--color-emerald-rich);
   350	  font-style: italic;
   351	}
   352	
   353	.content strong {
   354	  color: var(--color-charcoal);
   355	  font-weight: 600;
   356	}
   357	
   358	/* Drop Caps */
   359	.drop-cap {
   360	  font-family: var(--font-title);
   361	  font-size: 3.5em;
   362	  line-height: 0.8;
   363	  float: left;
   364	  margin-right: 8px;
   365	  margin-top: 4px;
   366	  color: var(--color-gold-divine);
   367	  font-weight: 700;
   368	}
   369	
   370	/* ===================================
   371	   Enhanced Section Content Styles
   372	   =================================== */
   373	
   374	/* Intro Text */
   375	.intro-text {
   376	  font-size: 1.1rem;
   377	  font-weight: 500;
   378	  color: var(--color-charcoal);
   379	  margin-bottom: var(--space-lg);
   380	}
   381	
   382	/* Two Column Grid for Feature Boxes */
   383	.two-column-grid {
   384	  display: grid;
   385	  grid-template-columns: repeat(2, 1fr);
   386	  gap: var(--space-lg);
   387	  margin: var(--space-lg) 0;
   388	}
   389	
   390	.feature-box {
   391	  background-color: white;
   392	  padding: var(--space-lg);
   393	  border-radius: 12px;
   394	  box-shadow: 0 4px 16px rgba(46, 204, 113, 0.08);
   395	  border-left: 4px solid var(--color-emerald-vibrant);
   396	  transition: all 0.3s ease;
   397	}
   398	
   399	.feature-box:hover {
   400	  box-shadow: 0 6px 24px rgba(46, 204, 113, 0.15);
   401	  transform: translateY(-3px);
   402	}
   403	
   404	.feature-icon {
   405	  width: 50px;
   406	  height: 50px;
   407	  background: linear-gradient(135deg, var(--color-emerald-vibrant) 0%, var(--color-emerald-soft) 100%);
   408	  border-radius: 50%;
   409	  display: flex;
   410	  align-items: center;
   411	  justify-content: center;
   412	  color: white;
   413	  font-size: 1.3rem;
   414	  margin-bottom: var(--space-md);
   415	}
   416	
   417	.feature-box h4 {
   418	  font-family: var(--font-subtitle);
   419	  font-size: 1.1rem;
   420	  font-weight: 600;
   421	  color: var(--color-emerald-rich);
   422	  margin-bottom: var(--space-sm);
   423	  letter-spacing: 0.02em;
   424	}
   425	
   426	.icon-list {
   427	  list-style: none;
   428	  margin: 0;
   429	  padding: 0;
   430	}
   431	
   432	.icon-list li {
   433	  display: flex;
   434	  align-items: center;
   435	  gap: var(--space-sm);
   436	  margin-bottom: var(--space-sm);
   437	  line-height: 1.4;
   438	}
   439	
   440	.icon-list li i {
   441	  color: var(--color-emerald-vibrant);
   442	  font-size: 1rem;
   443	  min-width: 20px;
   444	}
   445	
   446	/* Emphasis Box */
   447	.emphasis-box {
   448	  background: linear-gradient(135deg, rgba(46, 204, 113, 0.05) 0%, rgba(0, 168, 107, 0.08) 100%);
   449	  padding: var(--space-lg);
   450	  border-radius: 12px;
   451	  border: 2px solid rgba(46, 204, 113, 0.2);
   452	  margin: var(--space-lg) 0;
   453	}
   454	
   455	.emphasis-box p {
   456	  margin: 0;
   457	  font-size: 1.05rem;
   458	  line-height: 1.6;
   459	  color: var(--color-charcoal);
   460	}
   461	
   462	/* Scripture Quote */
   463	.scripture-quote {
   464	  background-color: white;
   465	  padding: var(--space-xl);
   466	  border-radius: 12px;
   467	  text-align: center;
   468	  margin: var(--space-lg) 0;
   469	  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.1);
   470	  border: 2px solid var(--color-gold-divine);
   471	  position: relative;
   472	}
   473	
   474	.scripture-quote .fa-quote-left {
   475	  font-size: 2rem;
   476	  color: var(--color-gold-divine);
   477	  opacity: 0.3;
   478	  margin-bottom: var(--space-sm);
   479	}
   480	
   481	.scripture-quote p {
   482	  font-family: var(--font-title);
   483	  font-size: 1.3rem;
   484	  font-style: italic;
   485	  color: var(--color-charcoal);
   486	  line-height: 1.6;
   487	  margin: var(--space-sm) 0;
   488	}
   489	
   490	.scripture-ref {
   491	  display: block;
   492	  font-family: var(--font-subtitle);
   493	  font-size: 0.9rem;
   494	  font-weight: 600;
   495	  color: var(--color-emerald-rich);
   496	  margin-top: var(--space-sm);
   497	}
   498	
   499	/* Experience Grid (What to Expect section) */
   500	.experience-grid {
   501	  display: grid;
   502	  grid-template-columns: repeat(2, 1fr);
   503	  gap: var(--space-lg);
   504	  margin: var(--space-lg) 0;
   505	}
   506	
   507	.experience-card {
   508	  background-color: white;
   509	  padding: var(--space-lg);
   510	  border-radius: 12px;
   511	  box-shadow: 0 4px 16px rgba(46, 204, 113, 0.08);
   512	  border-top: 4px solid var(--color-emerald-vibrant);
   513	  transition: all 0.3s ease;
   514	}
   515	
   516	.experience-card:hover {
   517	  box-shadow: 0 6px 24px rgba(46, 204, 113, 0.15);
   518	  transform: translateY(-3px);
   519	}
   520	
   521	.experience-icon {
   522	  width: 60px;
   523	  height: 60px;
   524	  background: linear-gradient(135deg, var(--color-emerald-vibrant) 0%, var(--color-emerald-soft) 100%);
   525	  border-radius: 50%;
   526	  display: flex;
   527	  align-items: center;
   528	  justify-content: center;
   529	  color: white;
   530	  font-size: 1.5rem;
   531	  margin-bottom: var(--space-md);
   532	}
   533	
   534	.experience-card h3 {
   535	  font-family: var(--font-subtitle);
   536	  font-size: 1.2rem;
   537	  font-weight: 600;
   538	  color: var(--color-emerald-rich);
   539	  margin-bottom: var(--space-md);
   540	  letter-spacing: 0.02em;
   541	}
   542	
   543	.checkmark-list {
   544	  list-style: none;
   545	  margin: 0;
   546	  padding: 0;
   547	}
   548	
   549	.checkmark-list li {
   550	  display: flex;
   551	  align-items: flex-start;
   552	  gap: var(--space-sm);
   553	  margin-bottom: var(--space-sm);
   554	  line-height: 1.5;
   555	}
   556	
   557	.checkmark-list li i {
   558	  color: var(--color-emerald-vibrant);
   559	  font-size: 1rem;
   560	  min-width: 20px;
   561	  margin-top: 2px;
   562	}
   563	
   564	/* Info Callout */
   565	.info-callout {
   566	  display: flex;
   567	  gap: var(--space-md);
   568	  background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(212, 175, 55, 0.08) 100%);
   569	  padding: var(--space-lg);
   570	  border-radius: 12px;
   571	  border-left: 4px solid var(--color-gold-divine);
   572	  margin: var(--space-lg) 0;
   573	}
   574	
   575	.info-callout i {
   576	  font-size: 1.5rem;
   577	  color: var(--color-gold-divine);
   578	  min-width: 30px;
   579	}
   580	
   581	.info-callout p {
   582	  margin-bottom: var(--space-sm);
   583	  line-height: 1.5;
   584	}
   585	
   586	.info-callout p:last-child {
   587	  margin-bottom: 0;
   588	}
   589	
   590	/* Practice Card (How to Use section) */
   591	.practice-card {
   592	  background-color: white;
   593	  padding: var(--space-xl);
   594	  border-radius: 12px;
   595	  box-shadow: 0 4px 16px rgba(46, 204, 113, 0.08);
   596	  margin: var(--space-lg) 0;
   597	}
   598	
   599	.practice-header {
   600	  display: flex;
   601	  align-items: center;
   602	  gap: var(--space-md);
   603	  margin-bottom: var(--space-lg);
   604	  padding-bottom: var(--space-md);
   605	  border-bottom: 2px solid rgba(46, 204, 113, 0.1);
   606	}
   607	
   608	.practice-header i {
   609	  font-size: 2rem;
   610	  color: var(--color-emerald-vibrant);
   611	}
   612	
   613	.practice-header h3 {
   614	  font-family: var(--font-subtitle);
   615	  font-size: 1.3rem;
   616	  font-weight: 600;
   617	  color: var(--color-emerald-rich);
   618	  margin: 0;
   619	  letter-spacing: 0.02em;
   620	}
   621	
   622	.practice-list {
   623	  list-style: none;
   624	  margin: 0;
   625	  padding: 0;
   626	}
   627	
   628	.practice-list li {
   629	  display: flex;
   630	  align-items: center;
   631	  gap: var(--space-md);
   632	  padding: var(--space-md);
   633	  margin-bottom: var(--space-sm);
   634	  background-color: rgba(46, 204, 113, 0.03);
   635	  border-radius: 8px;
   636	  line-height: 1.5;
   637	  transition: all 0.3s ease;
   638	}
   639	
   640	.practice-list li:hover {
   641	  background-color: rgba(46, 204, 113, 0.08);
   642	  transform: translateX(5px);
   643	}
   644	
   645	.practice-list li i {
   646	  color: var(--color-emerald-vibrant);
   647	  font-size: 1.2rem;
   648	  min-width: 24px;
   649	}
   650	
   651	/* Timing Grid */
   652	.timing-grid {
   653	  display: grid;
   654	  grid-template-columns: repeat(3, 1fr);
   655	  gap: var(--space-md);
   656	  margin: var(--space-lg) 0;
   657	}
   658	
   659	.timing-card {
   660	  background: linear-gradient(135deg, 
   661	    rgba(255, 255, 255, 0.95) 0%, 
   662	    rgba(250, 249, 246, 0.98) 100%);
   663	  padding: var(--space-lg);
   664	  border-radius: 12px;
   665	  text-align: center;
   666	  box-shadow: 
   667	    0 4px 16px rgba(0, 0, 0, 0.05),
   668	    0 0 30px rgba(100, 100, 150, 0.05);
   669	  transition: all 0.3s ease;
   670	  border: 2px solid rgba(100, 100, 150, 0.2);
   671	  backdrop-filter: blur(10px);
   672	  position: relative;
   673	  overflow: hidden;
   674	}
   675	
   676	.timing-card::before {
   677	  content: '';
   678	  position: absolute;
   679	  top: 0;
   680	  left: 0;
   681	  right: 0;
   682	  bottom: 0;
   683	  background: radial-gradient(circle at center, 
   684	    rgba(100, 100, 150, 0.08) 0%, 
   685	    transparent 70%);
   686	  opacity: 0;
   687	  transition: opacity 0.3s ease;
   688	  pointer-events: none;
   689	}
   690	
   691	.timing-card:hover::before {
   692	  opacity: 1;
   693	}
   694	
   695	.timing-card:hover {
   696	  box-shadow: 0 6px 24px rgba(46, 204, 113, 0.15);
   697	  transform: translateY(-5px);
   698	}
   699	
   700	.timing-card.morning {
   701	  border-color: rgba(255, 179, 71, 0.3);
   702	}
   703	
   704	.timing-card.morning:hover {
   705	  border-color: #FFB347;
   706	}
   707	
   708	.timing-card.evening {
   709	  border-color: rgba(255, 140, 105, 0.3);
   710	}
   711	
   712	.timing-card.evening:hover {
   713	  border-color: #FF8C69;
   714	}
   715	
   716	.timing-card.overnight {
   717	  border-color: rgba(100, 100, 150, 0.3);
   718	}
   719	
   720	.timing-card.overnight:hover {
   721	  border-color: #646496;
   722	}
   723	
   724	.timing-card i {
   725	  font-size: 2.5rem;
   726	  margin-bottom: var(--space-sm);
   727	}
   728	
   729	.timing-card.morning i {
   730	  color: #FFB347;
   731	}
   732	
   733	.timing-card.evening i {
   734	  color: #FF8C69;
   735	}
   736	
   737	.timing-card.overnight i {
   738	  color: #646496;
   739	}
   740	
   741	.timing-card h4 {
   742	  font-family: var(--font-subtitle);
   743	  font-size: 1.2rem;
   744	  font-weight: 600;
   745	  color: var(--color-charcoal);
   746	  margin-bottom: var(--space-xs);
   747	}
   748	
   749	.timing-card p {
   750	  font-size: 0.9rem;
   751	  color: var(--color-charcoal);
   752	  opacity: 0.8;
   753	  margin: 0 0 var(--space-md) 0;
   754	  line-height: 1.4;
   755	}
   756	
   757	.timing-details {
   758	  list-style: none;
   759	  padding: 0;
   760	  margin: 0;
   761	  text-align: left;
   762	}
   763	
   764	.timing-details li {
   765	  font-size: 0.85rem;
   766	  line-height: 1.5;
   767	  color: var(--color-charcoal);
   768	  opacity: 0.85;
   769	  padding: var(--space-xs) 0;
   770	  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   771	}
   772	
   773	.timing-details li:last-child {
   774	  border-bottom: none;
   775	}
   776	
   777	/* Goal Statement */
   778	.goal-statement {
   779	  display: flex;
   780	  align-items: center;
   781	  gap: var(--space-md);
   782	  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(46, 204, 113, 0.08) 100%);
   783	  padding: var(--space-lg);
   784	  border-radius: 12px;
   785	  border: 2px solid var(--color-gold-divine);
   786	  margin: var(--space-lg) 0;
   787	}
   788	
   789	.goal-statement i {
   790	  font-size: 2rem;
   791	  color: var(--color-gold-divine);
   792	  min-width: 40px;
   793	}
   794	
   795	.goal-statement p {
   796	  font-size: 1.05rem;
   797	  line-height: 1.6;
   798	  margin: 0;
   799	}
   800	
   801	/* ===================================
   802	   Sample Track Section
   803	   =================================== */
   804	.sample-track-container {
   805	  display: grid;
   806	  grid-template-columns: 1fr 1.5fr;
   807	  gap: var(--space-xl);
   808	  margin: var(--space-lg) 0;
   809	  align-items: start;
   810	}
   811	
   812	.ipod-player {
   813	  background: linear-gradient(135deg, #2C3E50 0%, #1A1A1A 100%);
   814	  border-radius: 20px;
   815	  padding: var(--space-lg);
   816	  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
   817	}
   818	
   819	.ipod-screen {
   820	  background-color: rgba(255, 255, 255, 0.05);
   821	  border-radius: 12px;
   822	  padding: var(--space-md);
   823	  backdrop-filter: blur(10px);
   824	}
   825	
   826	.album-art {
   827	  width: 100%;
   828	  aspect-ratio: 1;
   829	  border-radius: 8px;
   830	  overflow: hidden;
   831	  margin-bottom: var(--space-md);
   832	  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
   833	}
   834	
   835	.album-art img {
   836	  width: 100%;
   837	  height: 100%;
   838	  object-fit: cover;
   839	}
   840	
   841	.track-info {
   842	  text-align: center;
   843	  color: white;
   844	}
   845	
   846	.track-title {
   847	  font-family: var(--font-title);
   848	  font-size: 1.5rem;
   849	  font-weight: 700;
   850	  color: var(--color-emerald-vibrant);
   851	  margin-bottom: var(--space-xs);
   852	  letter-spacing: 0.03em;
   853	}
   854	
   855	.track-album {
   856	  font-family: var(--font-subtitle);
   857	  font-size: 0.9rem;
   858	  color: rgba(255, 255, 255, 0.8);
   859	  margin-bottom: var(--space-md);
   860	}
   861	
   862	.track-progress {
   863	  width: 100%;
   864	  height: 4px;
   865	  background-color: rgba(255, 255, 255, 0.2);
   866	  border-radius: 2px;
   867	  margin-bottom: var(--space-md);
   868	  overflow: hidden;
   869	}
   870	
   871	.progress-bar {
   872	  height: 100%;
   873	  width: 35%;
   874	  background: linear-gradient(90deg, var(--color-emerald-vibrant) 0%, var(--color-emerald-soft) 100%);
   875	  border-radius: 2px;
   876	}
   877	
   878	.track-controls {
   879	  display: flex;
   880	  justify-content: center;
   881	  align-items: center;
   882	  gap: var(--space-lg);
   883	  font-size: 1.5rem;
   884	  color: rgba(255, 255, 255, 0.7);
   885	}
   886	
   887	.track-controls i {
   888	  cursor: pointer;
   889	  transition: all 0.3s ease;
   890	}
   891	
   892	.track-controls i:hover {
   893	  color: var(--color-emerald-vibrant);
   894	  transform: scale(1.1);
   895	}
   896	
   897	.track-controls .play-btn {
   898	  font-size: 2.5rem;
   899	  color: var(--color-emerald-vibrant);
   900	}
   901	
   902	.track-controls .play-btn:hover {
   903	  color: var(--color-emerald-soft);
   904	  transform: scale(1.15);
   905	}
   906	
   907	.track-details h3 {
   908	  font-family: var(--font-subtitle);
   909	  font-size: 1.5rem;
   910	  font-weight: 600;
   911	  color: var(--color-emerald-rich);
   912	  margin-bottom: var(--space-md);
   913	  letter-spacing: 0.02em;
   914	}
   915	
   916	.track-details p {
   917	  margin-bottom: var(--space-sm);
   918	  line-height: 1.4;
   919	}
   920	
   921	.track-details strong {
   922	  font-weight: 600;
   923	  color: var(--color-charcoal);
   924	}
   925	
   926	.scripture-box,
   927	.lyrics-box {
   928	  background-color: white;
   929	  padding: var(--space-lg);
   930	  border-radius: 12px;
   931	  border-left: 4px solid var(--color-emerald-vibrant);
   932	  margin-top: var(--space-lg);
   933	  box-shadow: 0 4px 16px rgba(46, 204, 113, 0.08);
   934	}
   935	
   936	.scripture-box h4,
   937	.lyrics-box h4 {
   938	  font-family: var(--font-subtitle);
   939	  font-size: 1.1rem;
   940	  font-weight: 600;
   941	  color: var(--color-emerald-rich);
   942	  margin-bottom: var(--space-sm);
   943	  letter-spacing: 0.02em;
   944	}
   945	
   946	.scripture-text {
   947	  font-family: var(--font-title);
   948	  font-size: 1.2rem;
   949	  font-style: italic;
   950	  color: var(--color-charcoal);
   951	  line-height: 1.6;
   952	  margin: 0;
   953	}
   954	
   955	.lyrics-box p {
   956	  line-height: 1.8;
   957	  margin: 0;
   958	}
   959	
   960	/* ===================================
   961	   Systems Container - Horizontal Row
   962	   =================================== */
   963	.systems-container {
   964	  display: flex;
   965	  gap: var(--space-md);
   966	  margin: var(--space-lg) 0;
   967	  overflow-x: auto;
   968	  padding: var(--space-sm) 0;
   969	  scroll-behavior: smooth;
   970	  -webkit-overflow-scrolling: touch;
   971	  justify-content: center;
   972	}
   973	
   974	/* Hide scrollbar but keep functionality */
   975	.systems-container::-webkit-scrollbar {
   976	  height: 6px;
   977	}
   978	
   979	.systems-container::-webkit-scrollbar-track {
   980	  background: rgba(46, 204, 113, 0.1);
   981	  border-radius: 3px;
   982	}
   983	
   984	.systems-container::-webkit-scrollbar-thumb {
   985	  background: var(--color-emerald-soft);
   986	  border-radius: 3px;
   987	}
   988	
   989	.system-card {
   990	  flex: 0 0 280px; /* Fixed width, no wrapping */
   991	  min-width: 280px;
   992	  background: linear-gradient(135deg, 
   993	    rgba(255, 255, 255, 0.95) 0%, 
   994	    rgba(250, 249, 246, 0.98) 100%);
   995	  padding: var(--space-lg);
   996	  border-radius: 12px;
   997	  border: 2px solid transparent;
   998	  box-shadow: 
   999	    0 4px 16px rgba(46, 204, 113, 0.08),
  1000	    0 0 40px rgba(46, 204, 113, 0.03);
  1001	  transition: all 0.3s ease;
  1002	  backdrop-filter: blur(10px);
  1003	  position: relative;
  1004	  overflow: hidden;
  1005	}
  1006	
  1007	.system-card::before {
  1008	  content: '';
  1009	  position: absolute;
  1010	  top: 0;
  1011	  left: 0;
  1012	  right: 0;
  1013	  bottom: 0;
  1014	  background: radial-gradient(circle at top right, 
  1015	    rgba(46, 204, 113, 0.05) 0%, 
  1016	    transparent 70%);
  1017	  opacity: 0;
  1018	  transition: opacity 0.3s ease;
  1019	  pointer-events: none;
  1020	}
  1021	
  1022	.system-card:hover::before {
  1023	  opacity: 1;
  1024	}
  1025	
  1026	.system-card:hover {
  1027	  border-color: var(--color-emerald-vibrant);
  1028	  box-shadow: 0 6px 24px rgba(46, 204, 113, 0.15), 0 0 20px rgba(46, 204, 113, 0.1);
  1029	  transform: translateY(-5px);
  1030	}
  1031	
  1032	.system-card h3 {
  1033	  font-family: var(--font-subtitle);
  1034	  font-size: 1.1rem;
  1035	  font-weight: 600;
  1036	  color: var(--color-emerald-rich);
  1037	  margin-bottom: var(--space-sm);
  1038	  letter-spacing: 0.02em;
  1039	}
  1040	
  1041	.system-card p {
  1042	  font-size: 0.9rem;
  1043	  line-height: 1.4;
  1044	  color: var(--color-charcoal);
  1045	}
  1046	
  1047	/* ===================================
  1048	   Platform Cards
  1049	   =================================== */
  1050	.platforms {
  1051	  display: grid;
  1052	  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  1053	  gap: var(--space-lg);
  1054	  margin: var(--space-lg) 0;
  1055	}
  1056	
  1057	.platform-card {
  1058	  display: flex;
  1059	  flex-direction: column;
  1060	  align-items: center;
  1061	  justify-content: center;
  1062	  padding: var(--space-xl);
  1063	  background-color: white;
  1064	  border-radius: 12px;
  1065	  text-decoration: none;
  1066	  transition: all 0.3s ease;
  1067	  border: 2px solid transparent;
  1068	  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  1069	}
  1070	
  1071	.platform-card i {
  1072	  font-size: 3rem;
  1073	  margin-bottom: var(--space-sm);
  1074	}
  1075	
  1076	.platform-card span {
  1077	  font-family: var(--font-subtitle);
  1078	  font-size: 1.1rem;
  1079	  font-weight: 600;
  1080	}
  1081	
  1082	.platform-card.youtube {
  1083	  color: #FF0000;
  1084	}
  1085	
  1086	.platform-card.youtube:hover {
  1087	  border-color: #FF0000;
  1088	  box-shadow: 0 6px 24px rgba(255, 0, 0, 0.2), 0 0 30px rgba(255, 0, 0, 0.15);
  1089	  transform: translateY(-5px);
  1090	}
  1091	
  1092	.platform-card.spotify {
  1093	  color: #1DB954;
  1094	}
  1095	
  1096	.platform-card.spotify:hover {
  1097	  border-color: #1DB954;
  1098	  box-shadow: 0 6px 24px rgba(29, 185, 84, 0.2), 0 0 30px rgba(29, 185, 84, 0.15);
  1099	  transform: translateY(-5px);
  1100	}
  1101	
  1102	.platform-card.apple {
  1103	  color: #000000;
  1104	}
  1105	
  1106	.platform-card.apple:hover {
  1107	  border-color: #000000;
  1108	  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2), 0 0 30px rgba(0, 0, 0, 0.1);
  1109	  transform: translateY(-5px);
  1110	}
  1111	
  1112	/* ===================================
  1113	   Video Thumbnail Cards
  1114	   =================================== */
  1115	.video-thumbnail-card {
  1116	  max-width: 600px;
  1117	  width: 100%;
  1118	  margin: var(--space-lg) auto;
  1119	  display: block;
  1120	  text-decoration: none;
  1121	  background: linear-gradient(135deg, 
  1122	    rgba(255, 255, 255, 0.95) 0%, 
  1123	    rgba(250, 249, 246, 0.98) 100%);
  1124	  border-radius: 12px;
  1125	  overflow: hidden;
  1126	  box-shadow: 0 4px 20px rgba(46, 204, 113, 0.15);
  1127	  transition: all 0.3s ease;
  1128	  border: 2px solid transparent;
  1129	}
  1130	
  1131	.video-thumbnail-card:hover {
  1132	  transform: translateY(-5px);
  1133	  box-shadow: 0 8px 30px rgba(46, 204, 113, 0.25);
  1134	  border-color: var(--color-emerald-vibrant);
  1135	}
  1136	
  1137	.video-thumbnail {
  1138	  position: relative;
  1139	  width: 100%;
  1140	  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  1141	  background-color: var(--color-charcoal);
  1142	  overflow: hidden;
  1143	}
  1144	
  1145	.video-thumbnail img {
  1146	  position: absolute;
  1147	  top: 0;
  1148	  left: 0;
  1149	  width: 100%;
  1150	  height: 100%;
  1151	  object-fit: cover;
  1152	  transition: transform 0.3s ease;
  1153	}
  1154	
  1155	.video-thumbnail-card:hover .video-thumbnail img {
  1156	  transform: scale(1.05);
  1157	}
  1158	
  1159	.play-button-overlay {
  1160	  position: absolute;
  1161	  top: 0;
  1162	  left: 0;
  1163	  right: 0;
  1164	  bottom: 0;
  1165	  display: flex;
  1166	  align-items: center;
  1167	  justify-content: center;
  1168	  background: rgba(0, 0, 0, 0.3);
  1169	  transition: all 0.3s ease;
  1170	}
  1171	
  1172	.video-thumbnail-card:hover .play-button-overlay {
  1173	  background: rgba(0, 0, 0, 0.5);
  1174	}
  1175	
  1176	.play-button-overlay i {
  1177	  font-size: 4rem;
  1178	  color: white;
  1179	  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  1180	  transition: all 0.3s ease;
  1181	}
  1182	
  1183	.video-thumbnail-card:hover .play-button-overlay i {
  1184	  font-size: 5rem;
  1185	  color: var(--color-emerald-vibrant);
  1186	  text-shadow: 0 4px 20px rgba(46, 204, 113, 0.8);
  1187	}
  1188	
  1189	.video-info {
  1190	  padding: var(--space-lg);
  1191	  text-align: center;
  1192	}
  1193	
  1194	.video-info h4 {
  1195	  font-family: var(--font-subtitle);
  1196	  font-size: 1.2rem;
  1197	  font-weight: 600;
  1198	  color: var(--color-charcoal);
  1199	  margin-bottom: var(--space-xs);
  1200	  letter-spacing: 0.02em;
  1201	}
  1202	
  1203	.video-info p {
  1204	  font-size: 0.9rem;
  1205	  color: var(--color-emerald-vibrant);
  1206	  font-weight: 500;
  1207	  margin: 0;
  1208	}
  1209	
  1210	.video-thumbnail-card:hover .video-info p {
  1211	  color: var(--color-emerald-rich);
  1212	}
  1213	
  1214	/* Video Placeholders - Smaller Size */
  1215	.video-placeholder {
  1216	  max-width: 600px;
  1217	  width: 100%;
  1218	  margin: var(--space-lg) auto;
  1219	  aspect-ratio: 16 / 9;
  1220	  background: linear-gradient(135deg, rgba(46, 204, 113, 0.1) 0%, rgba(0, 168, 107, 0.15) 100%);
  1221	  border: 2px solid var(--color-emerald-soft);
  1222	  border-radius: 12px;
  1223	  display: flex;
  1224	  flex-direction: column;
  1225	  align-items: center;
  1226	  justify-content: center;
  1227	  gap: var(--space-sm);
  1228	  cursor: pointer;
  1229	  transition: all 0.3s ease;
  1230	}
  1231	
  1232	.video-placeholder:hover {
  1233	  border-color: var(--color-emerald-vibrant);
  1234	  box-shadow: 0 6px 24px rgba(46, 204, 113, 0.2), 0 0 30px rgba(46, 204, 113, 0.15);
  1235	  transform: scale(1.02);
  1236	}
  1237	
  1238	.video-placeholder i {
  1239	  font-size: 3rem;
  1240	  color: var(--color-emerald-vibrant);
  1241	}
  1242	
  1243	.video-placeholder p {
  1244	  font-family: var(--font-subtitle);
  1245	  font-size: 1rem;
  1246	  font-weight: 500;
  1247	  color: var(--color-emerald-rich);
  1248	  margin: 0;
  1249	}
  1250	
  1251	/* ===================================
  1252	   Footer - Compact
  1253	   =================================== */
  1254	.footer {
  1255	  background: 
  1256	    linear-gradient(135deg, rgba(44, 62, 80, 0.95) 0%, rgba(26, 26, 26, 0.98) 100%),
  1257	    url('https://www.genspark.ai/api/files/s/xvIJJPw8?token=Z0FBQUFBQnBjLWJ1M24zU0xYcmVHQnJsSlY5ZW1iMGFFS09IX0FRWWJBTEFEVWc2RUMwTXNTTUdxeW5zRUd2TTV5NWgyNTJzN3hvSGdteXhpc3JiZWxEVkhpQ1Z0NFRxTk1rU085UEZnTEpnaV9NUkhjM1VXZ2k3YkZCYWpWTkRyOTBETVNaRjZqSS1qZFZzcllPS3NCQkZ0STFUYmNMQl9XNWxVQ0wtOGhybXJHbEVuekpacVNnQzd5X283SUp1cXFhUFM4ZTBzWEQ3cUVQNEpIa09MbUhkOUVJbWhYcFFMczRxMHRYMVJteU5UQktqMHh6TVN2MjV0MWl5bk9jLXBQNTBqNFFZOEYxSzVRQXZIR1NtQXMwQ1JjMnFsRmg1ZWc9PQ');
  1258	  background-size: cover;
  1259	  background-position: center;
  1260	  color: var(--color-cream-pure);
  1261	  padding: var(--space-lg) 0 var(--space-md) 0;
  1262	  text-align: center;
  1263	  position: relative;
  1264	  overflow: hidden;
  1265	}
  1266	
  1267	.footer::before {
  1268	  content: '';
  1269	  position: absolute;
  1270	  top: 0;
  1271	  left: 0;
  1272	  right: 0;
  1273	  bottom: 0;
  1274	  background: linear-gradient(135deg, 
  1275	    rgba(0, 168, 107, 0.03) 0%, 
  1276	    rgba(46, 204, 113, 0.05) 50%, 
  1277	    rgba(212, 175, 55, 0.03) 100%);
  1278	  z-index: 0;
  1279	  pointer-events: none;
  1280	}
  1281	
  1282	.footer > .container {
  1283	  position: relative;
  1284	  z-index: 1;
  1285	}
  1286	
  1287	.footer-brand {
  1288	  font-family: var(--font-title);
  1289	  font-size: 1.1rem;
  1290	  font-weight: 700;
  1291	  letter-spacing: 0.05em;
  1292	  margin-bottom: var(--space-sm);
  1293	}
  1294	
  1295	.footer-social {
  1296	  display: flex;
  1297	  justify-content: center;
  1298	  gap: var(--space-md);
  1299	  margin-bottom: var(--space-md);
  1300	}
  1301	
  1302	.social-icon {
  1303	  width: 40px;
  1304	  height: 40px;
  1305	  border-radius: 50%;
  1306	  display: flex;
  1307	  align-items: center;
  1308	  justify-content: center;
  1309	  font-size: 1.2rem;
  1310	  text-decoration: none;
  1311	  transition: all 0.3s ease;
  1312	  background-color: rgba(255, 255, 255, 0.1);
  1313	}
  1314	
  1315	.social-icon.youtube {
  1316	  color: #FF0000;
  1317	}
  1318	
  1319	.social-icon.youtube:hover {
  1320	  background-color: #FF0000;
  1321	  color: white;
  1322	  box-shadow: 0 4px 16px rgba(255, 0, 0, 0.3);
  1323	  transform: translateY(-3px) scale(1.1);
  1324	}
  1325	
  1326	.social-icon.spotify {
  1327	  color: #1DB954;
  1328	}
  1329	
  1330	.social-icon.spotify:hover {
  1331	  background-color: #1DB954;
  1332	  color: white;
  1333	  box-shadow: 0 4px 16px rgba(29, 185, 84, 0.3);
  1334	  transform: translateY(-3px) scale(1.1);
  1335	}
  1336	
  1337	.social-icon.apple {
  1338	  color: white;
  1339	}
  1340	
  1341	.social-icon.apple:hover {
  1342	  background-color: white;
  1343	  color: #000000;
  1344	  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.3);
  1345	  transform: translateY(-3px) scale(1.1);
  1346	}
  1347	
  1348	.social-icon.instagram {
  1349	  color: #E4405F;
  1350	}
  1351	
  1352	.social-icon.instagram:hover {
  1353	  background-color: #E4405F;
  1354	  color: white;
  1355	  box-shadow: 0 4px 16px rgba(228, 64, 95, 0.3);
  1356	  transform: translateY(-3px) scale(1.1);
  1357	}
  1358	
  1359	.social-icon.tiktok {
  1360	  color: #00F2EA;
  1361	}
  1362	
  1363	.social-icon.tiktok:hover {
  1364	  background-color: #000000;
  1365	  color: #00F2EA;
  1366	  box-shadow: 0 4px 16px rgba(0, 242, 234, 0.3);
  1367	  transform: translateY(-3px) scale(1.1);
  1368	}
  1369	
  1370	.footer-disclaimer {
  1371	  max-width: 700px;
  1372	  margin: 0 auto var(--space-md) auto;
  1373	  font-size: 0.85rem;
  1374	  line-height: 1.4;
  1375	  opacity: 0.8;
  1376	}
  1377	
  1378	.footer-copyright {
  1379	  font-size: 0.8rem;
  1380	  opacity: 0.7;
  1381	  margin-top: var(--space-sm);
  1382	}
  1383	
  1384	/* ===================================
  1385	   Responsive Design
  1386	   =================================== */
  1387	@media (max-width: 768px) {
  1388	  .nav-menu {
  1389	    position: fixed;
  1390	    top: 60px;
  1391	    left: -100%;
  1392	    width: 100%;
  1393	    height: calc(100vh - 60px);
  1394	    background-color: var(--color-cream-pure);
  1395	    flex-direction: column;
  1396	    align-items: center;
  1397	    justify-content: flex-start;
  1398	    padding-top: var(--space-xl);
  1399	    gap: var(--space-lg);
  1400	    transition: left 0.3s ease;
  1401	    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  1402	  }
  1403	
  1404	  .nav-menu.active {
  1405	    left: 0;
  1406	  }
  1407	
  1408	  .nav-toggle {
  1409	    display: flex;
  1410	  }
  1411	
  1412	  .hero-title {
  1413	    font-size: 2rem;
  1414	  }
  1415	
  1416	  .hero-tagline {
  1417	    font-size: 1rem;
  1418	  }
  1419	
  1420	  .section-title {
  1421	    font-size: 2rem;
  1422	  }
  1423	
  1424	  .systems-container {
  1425	    /* Allow horizontal scrolling on mobile */
  1426	    justify-content: flex-start;
  1427	  }
  1428	
  1429	  .system-card {
  1430	    flex: 0 0 260px;
  1431	    min-width: 260px;
  1432	  }
  1433	
  1434	  .platforms {
  1435	    grid-template-columns: 1fr;
  1436	  }
  1437	
  1438	  .video-placeholder {
  1439	    max-width: 100%;
  1440	  }
  1441	
  1442	  .video-container {
  1443	    max-width: 100%;
  1444	  }
  1445	
  1446	  .video-thumbnail-card {
  1447	    max-width: 100%;
  1448	  }
  1449	
  1450	  .play-button-overlay i {
  1451	    font-size: 3.5rem;
  1452	  }
  1453	
  1454	  .video-thumbnail-card:hover .play-button-overlay i {
  1455	    font-size: 4rem;
  1456	  }
  1457	
  1458	  .sample-track-container {
  1459	    grid-template-columns: 1fr;
  1460	    gap: var(--space-lg);
  1461	  }
  1462	
  1463	  .ipod-player {
  1464	    max-width: 400px;
  1465	    margin: 0 auto;
  1466	  }
  1467	
  1468	  .two-column-grid,
  1469	  .experience-grid {
  1470	    grid-template-columns: 1fr;
  1471	  }
  1472	
  1473	  .timing-grid {
  1474	    grid-template-columns: 1fr;
  1475	    gap: var(--space-md);
  1476	  }
  1477	
  1478	  .feature-box,
  1479	  .experience-card {
  1480	    margin-bottom: var(--space-md);
  1481	  }
  1482	
  1483	  .scripture-quote {
  1484	    padding: var(--space-lg);
  1485	  }
  1486	
  1487	  .scripture-quote p {
  1488	    font-size: 1.1rem;
  1489	  }
  1490	
  1491	  .goal-statement {
  1492	    flex-direction: column;
  1493	    text-align: center;
  1494	  }
  1495	}
  1496	
  1497	@media (max-width: 480px) {
  1498	  .hero-cta {
  1499	    flex-direction: column;
  1500	    align-items: center;
  1501	  }
  1502	
  1503	  .btn {
  1504	    width: 100%;
  1505	    max-width: 280px;
  1506	  }
  1507	
  1508	  .system-card {
  1509	    flex: 0 0 240px;
  1510	    min-width: 240px;
  1511	    padding: var(--space-md);
  1512	  }
  1513	}
  1514	
  1515	/* ===================================
  1516	   Accessibility
  1517	   =================================== */
  1518	@media (prefers-reduced-motion: reduce) {
  1519	  *,
  1520	  *::before,
  1521	  *::after {
  1522	    animation-duration: 0.01ms !important;
  1523	    animation-iteration-count: 1 !important;
  1524	    transition-duration: 0.01ms !important;
  1525	    scroll-behavior: auto !important;
  1526	  }
  1527	}
  1528	
  1529	/* Focus styles for keyboard navigation */
  1530	a:focus,
  1531	button:focus {
  1532	  outline: 3px solid var(--color-emerald-vibrant);
  1533	  outline-offset: 2px;
  1534	}
  1535	
  1536	/* Print styles */
  1537	@media print {
  1538	  .nav-header,
  1539	  .footer,
  1540	  .video-placeholder {
  1541	    display: none;
  1542	  }
  1543	  
  1544	  body {
  1545	    background: white;
  1546	    color: black;
  1547	  }
  1548	}