/* ===== START HERE: kill the sterile hospital look =====
Paste into: WordPress > Appearance > Customize > Additional CSS
(or Divi/Elementor “Custom CSS”)
*/

/* 1) Page base: dark + readable */
body.page-id-0, /* safe fallback if you don’t know the page id */
.page .entry-content {
color: #e6e6e6;
}

/* 2) Target the Start Here page by URL slug (works on most themes) */
body.page-slug-starthere,
body.page-template-default.page.page-id-0 {}

/* If your theme doesn’t add page-slug-starthere, the section below still works
if you wrap the page content in a

*/

/* ===== Wrap-based styling (recommended) ===== */
.start-here-wrap{
position: relative;
padding: clamp(28px, 4vw, 72px);
border-radius: 18px;
overflow: hidden;

/* dark, not flat */
background:
radial-gradient(1200px 600px at 10% 0%, rgba(255,255,255,0.06), transparent 60%),
radial-gradient(900px 500px at 90% 10%, rgba(255,255,255,0.05), transparent 55%),
linear-gradient(180deg, #0d0d10 0%, #121218 50%, #0b0b0e 100%);
box-shadow:
0 18px 50px rgba(0,0,0,0.65),
inset 0 1px 0 rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
}

/* 3) Add subtle grain (CSS-only) */
.start-here-wrap::before{
content:””;
position:absolute;
inset:0;
pointer-events:none;
opacity: 0.12;
mix-blend-mode: overlay;
background-image:
repeating-linear-gradient(
0deg,
rgba(255,255,255,0.03) 0px,
rgba(255,255,255,0.03) 1px,
rgba(0,0,0,0.03) 2px,
rgba(0,0,0,0.03) 3px
),
repeating-linear-gradient(
90deg,
rgba(255,255,255,0.02) 0px,
rgba(255,255,255,0.02) 1px,
rgba(0,0,0,0.02) 2px,
rgba(0,0,0,0.02) 3px
);
transform: translateZ(0);
}

/* 4) Vignette to add depth */
.start-here-wrap::after{
content:””;
position:absolute;
inset:-2px;
pointer-events:none;
background: radial-gradient(120% 90% at 50% 20%, transparent 45%, rgba(0,0,0,0.75) 100%);
opacity: 0.85;
}

/* 5) Typography: sharp headers + calm body */
.start-here-wrap h1,
.start-here-wrap h2,
.start-here-wrap h3{
position: relative;
z-index: 2;
letter-spacing: -0.02em;
text-transform: none;
color: #f2f2f2;
margin-top: 0.2em;
}

.start-here-wrap p,
.start-here-wrap li{
position: relative;
z-index: 2;
color: rgba(230,230,230,0.92);
line-height: 1.7;
font-size: clamp(16px, 1.05vw, 18px);
}

/* 6) Links: one accent color (deep blood red) */
.start-here-wrap a{
position: relative;
z-index: 2;
color: #b3122d;
text-decoration: none;
border-bottom: 1px solid rgba(179,18,45,0.45);
}
.start-here-wrap a:hover{
color: #e11d48;
border-bottom-color: rgba(225,29,72,0.75);
}

/* 7) Optional: “hero” punch if your first heading is the main title */
.start-here-wrap h1{
font-size: clamp(34px, 4vw, 60px);
line-height: 1.05;
margin-bottom: 0.35em;
}

/* 8) Optional ECG divider (add

where you want it) */
.start-here-wrap .ecg-line{
position: relative;
z-index: 2;
height: 2px;
margin: 22px 0 34px;
background: linear-gradient(90deg, transparent, rgba(179,18,45,0.9), transparent);
box-shadow: 0 0 18px rgba(179,18,45,0.25);
}

/* Mobile polish */
@media (max-width: 600px){
.start-here-wrap{ border-radius: 14px; }
}