/* Peptivo — shared intake questionnaire styles.
 * Copied VERBATIM from the inline <style> block of design/intake.html (the GLP
 * intake) so the NAD+ / Sermorelin questionnaires render in the exact same
 * design language. intake.html itself is intentionally left untouched: keeping
 * this as an additive stylesheet means a change here can never regress the live
 * GLP intake. Requires css/landing.css (design tokens) to be loaded first.
 */
body{ background:var(--soft); }
.intk-promo{ background:var(--blue-deep); color:#fff; text-align:center; font-size:14px; padding:9px 16px; font-weight:500; }
.intk-promo b{ font-family:var(--head); font-weight:700; }
.intk-head{ background:#fff; border-bottom:1px solid var(--line); }
.intk-head-in{ max-width:760px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:center; position:relative; }
.intk-head img{ height:32px; }
.intk-secure{ position:absolute; right:24px; display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); font-weight:600; }
.intk-secure svg{ width:15px; height:15px; stroke:var(--green); fill:none; stroke-width:2.2; }
@media(max-width:560px){ .intk-secure span{ display:none; } }

.intk-wrap{ max-width:620px; margin:0 auto; padding:0 22px 70px; }
.prog{ position:sticky; top:0; background:var(--soft); z-index:20; padding:20px 0 8px; }
.prog-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.prog-back{ background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; font-family:var(--head); font-weight:700; font-size:14px; color:var(--blue); visibility:hidden; padding:0; }
.prog-back svg{ width:16px; height:16px; stroke:var(--blue); fill:none; stroke-width:2.4; }
.prog-count{ font-family:var(--head); font-weight:700; font-size:13px; color:var(--muted); letter-spacing:.04em; }
.prog-bar{ height:9px; background:#dde7ef; border-radius:100px; overflow:hidden; }
.prog-fill{ height:100%; width:100%; transform:scaleX(.05); transform-origin:left center; background:var(--green); border-radius:100px; }

.step{ padding-top:34px; animation:stp .4s ease; }
@keyframes stp{ from{transform:translateY(12px);opacity:.4} to{transform:none;opacity:1} }
.step .kick{ font-family:var(--head); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan-d); }
.step h2{ font-family:var(--head); font-weight:700; font-size:29px; line-height:1.12; color:#11212e; margin:8px 0 6px; letter-spacing:-0.01em; }
.step .sub{ font-size:16px; color:var(--ink-2); margin-bottom:4px; }

.opts{ margin-top:24px; display:flex; flex-direction:column; gap:11px; }
.opts.two{ flex-direction:row; gap:13px; }
.opts.two .opt{ flex:1; flex-direction:column; text-align:center; padding:24px 16px; justify-content:center; }
.opt{ display:flex; align-items:center; gap:14px; width:100%; background:#fff; border:1.5px solid #d2dde6; border-radius:14px; padding:17px 19px; cursor:pointer; text-align:left; font-family:var(--body); transition:all .15s; }
.opt:hover{ border-color:var(--blue); box-shadow:0 6px 18px -10px rgba(38,97,139,.4); }
.opt.sel{ border-color:var(--blue); background:var(--sky); box-shadow:0 0 0 1px var(--blue); }
.opt .mn{ flex:1; }
.opt .mn h3{ font-family:var(--head); font-weight:700; font-size:17px; color:#11212e; line-height:1.25; }
.opt .mn p{ font-size:13px; color:var(--muted); margin-top:3px; }
.opt .rd{ width:23px; height:23px; border-radius:50%; border:2px solid #cbd8e2; flex-shrink:0; position:relative; }
.opt.sel .rd{ border-color:var(--blue); }
.opt.sel .rd::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:11px; height:11px; border-radius:50%; background:var(--blue); }
.opt .ck{ width:23px; height:23px; border-radius:7px; border:2px solid #cbd8e2; flex-shrink:0; position:relative; }
.opt.sel .ck{ border-color:var(--green); background:var(--green); }
.opt.sel .ck::after{ content:""; position:absolute; left:7px; top:3px; width:6px; height:11px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }

.grp{ margin-top:18px; display:flex; flex-direction:column; gap:26px; }
.grp-q-t{ font-family:var(--head); font-weight:700; font-size:18px; color:#11212e; line-height:1.3; margin-bottom:13px; }
.grp .opts{ margin-top:0; }
.psec{ margin-bottom:26px; }
.psec:last-of-type{ margin-bottom:0; }
.pq-label{ font-family:var(--head); font-weight:700; font-size:17px; color:#11212e; line-height:1.3; margin-bottom:13px; }
.psec .opts.two{ margin-top:0; }
.psec .fld:last-child{ margin-bottom:0; }
.flds{ margin-top:24px; }
.fld-row{ display:flex; gap:12px; }
.fld{ flex:1; margin-bottom:14px; }
.fld label{ display:block; font-family:var(--head); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.fld .unitwrap{ position:relative; }
.fld .unitwrap .u{ position:absolute; right:18px; top:50%; transform:translateY(-50%); font-size:15px; font-weight:600; color:var(--muted); }
.inp{ width:100%; height:56px; border:1.5px solid #d2dde6; border-radius:13px; padding:0 18px; font-family:var(--body); font-size:17px; font-weight:500; color:#11212e; background:#fff; -webkit-appearance:none; }
.inp::placeholder{ color:#9fb0bd; font-weight:400; opacity:1; }
textarea.inp{ height:120px; padding:15px 18px; resize:vertical; line-height:1.5; }
.inp:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
select.inp{ appearance:none; background:#fff; }

.drop{ margin-top:6px; border:2px dashed #c2d2df; border-radius:14px; background:#fff; padding:30px 22px; text-align:center; cursor:pointer; transition:all .15s; }
.drop:hover{ border-color:var(--blue); background:var(--sky); }
.drop.has{ border-style:solid; border-color:var(--green); background:#f0fbf4; }
.drop svg{ width:34px; height:34px; stroke:var(--blue); fill:none; stroke-width:1.8; margin-bottom:10px; }
.drop.has svg{ stroke:var(--green); }
.drop h3{ font-family:var(--head); font-weight:700; font-size:16px; color:#11212e; }
.drop p{ font-size:13px; color:var(--muted); margin-top:4px; }
.drop input{ display:none; }
.skip{ display:block; text-align:center; margin-top:14px; font-size:13px; font-weight:600; color:var(--muted); text-decoration:underline; cursor:pointer; background:none; border:none; width:100%; }

/* INFO interstitials */
.info h2{ margin-top:8px; }
.info-line{ font-size:15px; color:var(--ink-2); text-align:center; margin-top:18px; line-height:1.5; }
.tcard{ margin-top:22px; background:#fff; border:1.5px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 16px 36px -20px rgba(17,33,46,.45); }
.tcard .tphoto{ width:100%; height:238px; object-fit:cover; object-position:center 30%; display:block; background:var(--sky); }
.tcard .tbody{ padding:20px 22px; }
.tba{ display:flex; align-items:center; justify-content:center; gap:20px; }
.tba .tcol{ text-align:center; }
.tba .tcol span{ display:block; font-family:var(--head); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.tba .tcol b{ font-family:var(--head); font-weight:700; font-size:27px; color:#11212e; }
.tba .tcol.after b{ color:var(--green-d); }
.tba .tarrow svg{ width:27px; height:27px; stroke:var(--green); fill:none; stroke-width:2.4; }
.tname{ text-align:center; margin-top:14px; font-size:14px; font-weight:600; color:var(--muted); }
.stars{ display:flex; gap:4px; margin-top:8px; }
.stars img{ height:22px; width:auto; }
.iquote{ font-family:var(--head); font-weight:700; font-size:24px; line-height:1.36; color:#11212e; margin-top:16px; letter-spacing:-0.01em; text-wrap:pretty; }
.iperson{ display:flex; align-items:center; gap:13px; margin-top:22px; }
.iperson img{ width:54px; height:54px; border-radius:50%; object-fit:cover; background:var(--sky); }
.iperson b{ display:block; font-family:var(--head); font-weight:700; font-size:16px; color:#11212e; }
.iperson span{ font-size:13px; color:var(--muted); }
.dcard{ display:flex; align-items:center; gap:15px; margin-top:22px; background:var(--sky); border-radius:16px; padding:16px 18px; }
.dcard img{ width:66px; height:66px; border-radius:50%; object-fit:cover; flex-shrink:0; background:#fff; }
.dcard b{ display:block; font-family:var(--head); font-weight:700; font-size:17px; color:#11212e; }
.dcard span{ font-size:13px; color:var(--muted); }

.cont{ margin-top:28px; }
.cont .btn-green{ display:flex; max-width:100%; }
.cont.dis .btn-green{ background:#e3eaf0; color:#8ba0af; box-shadow:none; cursor:not-allowed; pointer-events:none; }
.reassure{ display:flex; align-items:center; justify-content:center; gap:9px; font-size:13px; color:var(--muted); margin-top:18px; text-align:center; }
.reassure svg{ width:16px; height:16px; stroke:var(--green); fill:none; stroke-width:2.3; flex-shrink:0; }

.proof{ margin-top:26px; background:var(--sky); border-radius:16px; padding:20px 22px; }
.proof img{ height:16px; }
.proof p{ font-size:15px; color:#11212e; margin-top:8px; }
.proof .by{ font-size:13px; color:var(--muted); font-weight:600; margin-top:8px; }

/* STOP / disqualify + soft */
.stop{ padding-top:46px; text-align:center; animation:stp .4s ease; }
.stop .ic{ width:90px; height:90px; margin:0 auto 22px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.stop .ic svg{ width:42px; height:42px; fill:none; stroke-width:2.6; }
.stop.crit .ic{ background:#fdecec; } .stop.crit .ic svg{ stroke:#d4453b; }
.stop.soft .ic{ background:var(--sky); } .stop.soft .ic svg{ stroke:var(--blue); }
.stop h2{ font-family:var(--head); font-weight:700; font-size:27px; color:#11212e; letter-spacing:-0.01em; line-height:1.15; }
.stop p{ font-size:16px; color:var(--ink-2); margin:14px auto 0; max-width:440px; line-height:1.55; }
.stop .cta{ margin-top:28px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.btn-outline{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--head); font-weight:700; font-size:16px; padding:15px 28px; border-radius:100px; background:#fff; color:var(--blue); border:1.6px solid var(--blue); cursor:pointer; text-decoration:none; }
.btn-outline:hover{ background:var(--sky); }

.loader{ display:none; padding:70px 20px; text-align:center; }
.loader.active{ display:block; }
.spin{ width:74px; height:74px; margin:0 auto 28px; border-radius:50%; border:6px solid #dde7ef; border-top-color:var(--blue); animation:sp 1s linear infinite; }
@keyframes sp{ to{transform:rotate(360deg)} }
.loader h2{ font-family:var(--head); font-weight:700; font-size:28px; color:#11212e; }
.loader p{ color:var(--ink-2); margin-top:10px; }
.lsteps{ display:inline-block; margin-top:26px; text-align:left; }
.lsteps li{ display:flex; align-items:center; gap:11px; font-size:16px; color:#11212e; font-weight:500; padding:9px 0; opacity:.35; transition:opacity .3s; }
.lsteps li.done{ opacity:1; }
.lsteps li .c{ width:24px; height:24px; border-radius:50%; background:#dde7ef; flex-shrink:0; position:relative; transition:background .3s; }
.lsteps li.done .c{ background:var(--green); }
.lsteps li.done .c::after{ content:""; position:absolute; left:8px; top:4px; width:6px; height:11px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }

.appr{ display:none; padding:46px 20px; text-align:center; }
.appr.active{ display:block; }
.appr .badge{ width:96px; height:96px; margin:0 auto 22px; border-radius:50%; background:#e7faee; display:flex; align-items:center; justify-content:center; }
.appr .badge svg{ width:46px; height:46px; stroke:var(--green); fill:none; stroke-width:3; }
.appr .kk{ font-family:var(--head); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--green-d); }
.appr h2{ font-family:var(--head); font-weight:700; font-size:38px; color:#11212e; margin-top:8px; letter-spacing:-0.02em; }
.appr p{ font-size:17px; color:var(--ink-2); margin:14px auto 0; max-width:440px; }
.appr-sum{ display:inline-flex; gap:10px; margin:26px auto 0; flex-wrap:wrap; justify-content:center; }
.appr-sum .chip{ border:1px solid var(--blue); background:var(--sky); border-radius:12px; padding:9px 18px; }
.appr-sum .chip h4{ font-family:var(--head); font-weight:700; font-size:12px; text-transform:uppercase; color:var(--blue); }
.appr-sum .chip p{ font-size:17px; color:#11212e; margin-top:2px; }
.appr .cta{ margin-top:30px; display:flex; flex-direction:column; align-items:center; }
@media(max-width:560px){
	.intk-promo{
		font-size:12px;
		line-height:17px;
		padding:8px 12px;
		text-align:center;
	}
	.intk-head-in{
		padding:14px 18px;
	}
	.intk-head img{
		height:29px;
	}
	.intk-wrap{
		padding:0 18px 74px;
	}
	.prog{
		padding:16px 0 8px;
	}
	.step{
		padding-top:28px;
		text-align:center;
	}
	.step .kick{
		display:block;
		text-align:center;
		font-size:12px;
		letter-spacing:.06em;
	}
	.step h2{
		font-size:25px;
		line-height:1.12;
		max-width:340px;
		margin:9px auto 8px;
		text-wrap:balance;
	}
	.step .sub{
		font-size:15px;
		line-height:1.48;
		max-width:336px;
		margin:0 auto 4px;
		text-align:center;
		text-wrap:pretty;
	}
	.opts{
		gap:10px;
		margin-top:22px;
	}
	.opts.two{
		flex-direction:column;
	}
	.opt{
		border-radius:16px;
		padding:16px 16px;
		align-items:flex-start;
		text-align:left;
	}
	.opts.two .opt{
		padding:18px 16px;
		align-items:center;
		text-align:center;
	}
	.opt .mn h3{
		font-size:16px;
		line-height:1.26;
	}
	.opt .mn p{
		font-size:12.5px;
		line-height:1.4;
	}
	.grp,
	.psec{
		text-align:left;
	}
	.grp-q-t,
	.pq-label{
		text-align:left;
		font-size:16px;
		line-height:1.32;
	}
	.fld-row{
		flex-direction:column;
		gap:0;
	}
	.cont{
		margin-top:26px;
	}
	.reassure{
		max-width:310px;
		margin:16px auto 0;
		line-height:1.35;
	}
	.proof{
		text-align:left;
		padding:18px 18px;
	}
	.appr h2{
		font-size:30px;
		text-wrap:balance;
	}
	.stop h2{
		font-size:23px;
		text-wrap:balance;
	}

	/* Sticky Continue button for multi-select questions on mobile.
	   Keeps the CTA reachable without scrolling past 9+ options. */
	.cont.multi{
		position:fixed;
		left:0;
		right:0;
		bottom:0;
		margin:0;
		padding:14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
		background:linear-gradient(to bottom, rgba(238,244,249,0) 0%, rgba(238,244,249,0.92) 30%, #eef4f9 70%);
		z-index:20;
		pointer-events:none;
	}
	.cont.multi .btn-green{
		pointer-events:auto;
		box-shadow:0 6px 22px rgba(20,110,60,0.22);
	}
	/* Reserve space at the end of the options list so the last option
	   is never obscured by the sticky bar. */
	.opts:has(+ .cont.multi){
		padding-bottom:96px;
	}
}

/* ---------------------------------------------------------------------------
 * CRO layer added 2026-08-26 — social-proof card, native-select styling,
 * named provider card, and skip link. Scoped to the intake wrap so it never
 * touches the GLP intake or any other page.
 * ------------------------------------------------------------------------- */

/* Social proof interstitial. Inserted between the goal question and the
 * medical-history screens to build trust at the moment users are deciding
 * whether to keep going. */
.intk-wrap .step.social{
	text-align:center;
}
.intk-wrap .sp-card{
	background:#fff;
	border:1px solid #e2e8ef;
	border-radius:16px;
	padding:22px 20px;
	margin:14px auto 22px;
	max-width:520px;
	box-shadow:0 4px 20px rgba(15, 40, 60, 0.05);
}
.intk-wrap .sp-stars{
	display:flex;
	justify-content:center;
	gap:2px;
	margin-bottom:12px;
}
.intk-wrap .sp-stars svg{
	width:20px;
	height:20px;
	fill:#f5b23a;
	stroke:none;
}
.intk-wrap .sp-quote{
	font-size:15.5px;
	line-height:1.55;
	color:#1c2b3a;
	margin:0 0 12px;
	font-style:italic;
}
.intk-wrap .sp-who{
	font-size:13.5px;
	color:#5a6a7d;
	font-weight:500;
	margin-bottom:14px;
}
.intk-wrap .sp-count{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:13px;
	color:#0f6b3a;
	background:#e6f5ec;
	padding:6px 12px;
	border-radius:999px;
	font-weight:500;
}
.intk-wrap .sp-dot{
	width:8px;
	height:8px;
	border-radius:50%;
	background:#22a75b;
	box-shadow:0 0 0 3px rgba(34,167,91,0.2);
	animation:sp-pulse 2s ease-in-out infinite;
}
@keyframes sp-pulse{
	0%,100%{opacity:1;}
	50%{opacity:0.5;}
}

/* Native <select> styled to match the text inputs. Native picker gives us
 * a full-screen sheet on mobile that no custom widget can match. */
.intk-wrap .inp-sel{
	appearance:none;
	-webkit-appearance:none;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6a7d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
	background-repeat:no-repeat;
	background-position:right 14px center;
	background-size:16px;
	padding-right:42px;
	cursor:pointer;
}

/* Skip link — appears under the text question when it is optional. */
.intk-wrap .skip{
	display:inline-block;
	margin-top:10px;
	color:#5a6a7d;
	font-size:14px;
	text-decoration:underline;
	text-underline-offset:3px;
	cursor:pointer;
}
.intk-wrap .skip:hover{color:#0f6b3a;}

/* Named provider card on the success screen. Ro/Hims pattern: a real face
 * plus a review-time expectation calms last-second checkout hesitation. */
.intk-wrap .appr-provider{
	display:flex;
	gap:14px;
	align-items:flex-start;
	background:#f6f9fc;
	border:1px solid #e2e8ef;
	border-radius:14px;
	padding:14px 16px;
	margin:6px auto 18px;
	max-width:520px;
	text-align:left;
}
.intk-wrap .ap-avatar{
	flex-shrink:0;
	width:46px;
	height:46px;
	border-radius:50%;
	background:linear-gradient(135deg, #14663a 0%, #22a75b 100%);
	display:flex;
	align-items:center;
	justify-content:center;
}
.intk-wrap .ap-avatar svg{
	width:26px;
	height:26px;
	fill:#fff;
	stroke:none;
}
.intk-wrap .ap-name{
	font-size:15px;
	font-weight:600;
	color:#0f2130;
	line-height:1.35;
	margin-bottom:2px;
}
.intk-wrap .ap-cred{
	font-size:13px;
	color:#5a6a7d;
	margin-bottom:6px;
}
.intk-wrap .ap-timeline{
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-size:13px;
	color:#0f6b3a;
	font-weight:500;
}
.intk-wrap .ap-timeline svg{
	width:14px;
	height:14px;
	fill:none;
	stroke:currentColor;
	stroke-width:2;
}

/* Mobile refinements — everything above already stacks, but tighten paddings
 * so nothing feels crammed inside the 375px viewport. */
@media (max-width: 640px){
	.intk-wrap .sp-card{
		padding:18px 16px;
		margin:10px auto 18px;
	}
	.intk-wrap .sp-quote{font-size:15px;}
	.intk-wrap .appr-provider{
		padding:12px 14px;
		gap:12px;
	}
	.intk-wrap .ap-avatar{width:42px;height:42px;}
	.intk-wrap .ap-name{font-size:14.5px;}
}