/*
 * Veryn polish pass — loaded after veryn.css (2026-08-24).
 * Each block corrects an approved issue from Cort's polish list; the core
 * ported stylesheet stays byte-identical to the source design.
 */

/* --- 1. Hero overlay seam -------------------------------------------------
 * The source design paints the brand tint through a 64%-wide, 98deg-tilted
 * gradient panel. Near the bottom of the box the gradient hasn't reached
 * zero alpha when the panel ends, so its right edge prints as a hard
 * vertical line (clearest on mobile). Full-width panel, stops rescaled by
 * 0.64 so the visible fade sits in the same place but ends inside the box.
 */
.hero-slide__ov::before{
	width:100%;
	background:linear-gradient(98deg,
		rgba(222,227,129,.90) 0%,
		rgba(222,227,129,.84) 11.5%,
		rgba(222,227,129,.72) 21.8%,
		rgba(222,227,129,.54) 32%,
		rgba(222,227,129,.32) 42.2%,
		rgba(222,227,129,.16) 51.2%,
		rgba(222,227,129,.06) 58.2%,
		rgba(222,227,129,0) 64%);
}

/* --- 2. Mobile: copy before photos ---------------------------------------
 * The source gives .place-collage{order:-1} under 900px, pushing the photos
 * above the heading. Cort wants the header/subheader first on mobile.
 */
@media(max-width:900px){
	.place-section .place-collage{order:2 !important;}
}

/* --- 3. "Why Veryn" block reads as a real section ------------------------ */
/* Two-tone banding, not a floating card. Matches the pairing already used
 * further down the page: .veterans-insurance-block (#f5f2ec) against
 * .veterans-expect-block (#fafaf7). This block sits directly above
 * .veterans-help-block (#fafaf7), so taking the warm tone reads the same way. */
.veterans-experience-block{
	background:#f5f2ec;
}

/* --- 4. Keep faces centered and uncropped -------------------------------- */
.who-collage__img,
.place-collage__img{background-position:center 30%;}
.leader-photo{background-position:center 25%;}
.veterans-photo-card{background-position:center 30%;}

/* Expanded bio pop-out crops a portrait headshot into a 400x300 landscape
 * window; the inline `center top` cut faces off at the chin. 30% frames the
 * whole face on the portrait shots and is a no-op on the landscape one
 * (it overflows horizontally, so the Y offset does nothing there). */
.team-card.is-open .team-card__photo{background-position:center 30% !important;}

/* Sticky-step photos sit in a very tall (~502x965) window, so every source
 * photo overflows HORIZONTALLY — the X offset is what decides who stays in
 * frame, not the Y. Tuned per step against the actual crop. */
/* veryn.css pins these to center center with !important via a (0,4,1)
 * selector, so an override must carry the same ancestor chain to outrank it —
 * a bare .sw-photo rule silently loses even when it is !important too. */
body[data-page="veterans"] .veterans-page .veterans-step-photo-panel .sw-photo:nth-of-type(3),
body[data-page="veterans"] .veterans-page .sw-step:nth-of-type(3) .mobile-step-photo{background-position:40% 50% !important;}
body[data-page="veterans"] .veterans-page .veterans-step-photo-panel .sw-photo:nth-of-type(5),
body[data-page="veterans"] .veterans-page .sw-step:nth-of-type(5) .mobile-step-photo{background-position:70% 50% !important;}

@media(max-width:640px){
	.hero-slide--1 .hero-slide__bg{background-position:66% 40%;}
	.hero-slide--2 .hero-slide__bg{background-position:50% 32%;}
	.hero-slide--3 .hero-slide__bg{background-position:70% 28%;}
}

/* --- 5. FAQ answer card --------------------------------------------------- */
.faq-answer{
	max-width:560px;
	margin:22px auto 0;
	text-align:left;
	background:rgba(255,255,255,.10);
	border:1px solid rgba(255,255,255,.22);
	border-radius:18px;
	padding:22px 24px;
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	display:none;
	opacity:0;
	transform:translateY(6px);
	transition:opacity .35s ease,transform .35s ease;
}
.faq-answer.show{opacity:1;transform:none;}
.faq-answer__q{font-weight:700;color:#fff;margin-bottom:8px;font-size:16px;}
.faq-answer__a{color:rgba(255,255,255,.88);font-size:15px;line-height:1.7;}
.comfort-sug.active{background:var(--journey,#dee381);color:#24310f;border-color:var(--journey,#dee381);}

/* --- 6. Header breathing room ---------------------------------------------
 * Source sets .site-header{padding:16px 0}, which puts the logo tight against
 * the top of the viewport. Cort asked for more room above it. The header is
 * position:fixed and heroes sit underneath it by design, so this only changes
 * where the logo sits inside the bar — no layout below is affected.
 */
.site-header{padding-top:26px;padding-bottom:18px;}
@media(max-width:900px){
	.site-header{padding-top:18px;padding-bottom:14px;}
}

/* --- 7. Policy pages read as formatted documents --------------------------
 * Privacy Policy and HIPAA Notice render their content straight into
 * .site-page with no container, so the text ran the full viewport width and
 * started underneath the fixed header. This gives them a measure, clears the
 * header, and puts real rhythm on the headings and lists.
 */
.veryn-page-privacy .site-page,
.veryn-page-hipaa .site-page{
	max-width:820px;
	margin:0 auto;
	padding:150px 28px 96px;
}
.veryn-page-privacy .site-page h1,
.veryn-page-hipaa .site-page h1{
	font-size:clamp(2rem,4vw,2.9rem);
	line-height:1.15;
	margin-bottom:10px;
}
.veryn-page-privacy .site-page h2,
.veryn-page-hipaa .site-page h2{
	font-size:clamp(1.25rem,2.2vw,1.55rem);
	line-height:1.25;
	margin:44px 0 14px;
	padding-top:22px;
	border-top:1px solid rgba(114,146,44,.18);
}
.veryn-page-privacy .site-page h3,
.veryn-page-hipaa .site-page h3{
	font-size:1.05rem;
	margin:26px 0 8px;
}
.veryn-page-privacy .site-page p,
.veryn-page-hipaa .site-page p{
	font-size:16px;
	line-height:1.75;
	margin-bottom:15px;
	color:var(--text-soft,#5a5f52);
}
.veryn-page-privacy .site-page ul,
.veryn-page-privacy .site-page ol,
.veryn-page-hipaa .site-page ul,
.veryn-page-hipaa .site-page ol{
	margin:0 0 18px 22px;
}
.veryn-page-privacy .site-page li,
.veryn-page-hipaa .site-page li{
	font-size:16px;
	line-height:1.7;
	margin-bottom:7px;
	color:var(--text-soft,#5a5f52);
}
.veryn-page-privacy .site-page table,
.veryn-page-hipaa .site-page table{
	width:100%;
	border-collapse:collapse;
	margin:0 0 22px;
	font-size:14px;
}
.veryn-page-privacy .site-page th,
.veryn-page-privacy .site-page td,
.veryn-page-hipaa .site-page th,
.veryn-page-hipaa .site-page td{
	border:1px solid rgba(114,146,44,.2);
	padding:9px 12px;
	text-align:left;
	vertical-align:top;
}
@media(max-width:640px){
	.veryn-page-privacy .site-page,
	.veryn-page-hipaa .site-page{padding:120px 20px 72px;}
}