:root {
	--ink: #241c2b;
	--muted: #746c78;
	--brand: #8d54c6;
	--brand-dark: #663294;
	--rose: #ee83a6;
	--peach: #fff0e8;
	--lavender: #f1e9fb;
	--cream: #fffaf6;
	--mint: #e8f7ef;
	--line: #e9e2e8;
	--display: "Manrope", sans-serif;
	--body: "DM Sans", sans-serif
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 90px
}

body {
	font-family: var(--body);
	color: var(--ink);
	background: #fff;
	overflow-x: hidden
}

h1,
h2,
h3,
.navbar-brand {
	font-family: var(--display);
	font-weight: 700;
	letter-spacing: -.045em
}

h1 {
	font-size: clamp(3.3rem, 6.1vw, 6.25rem);
	line-height: .97
}

h2 {
	font-size: clamp(2.35rem, 4.2vw, 4.25rem);
	line-height: 1.05
}

h3 {
	font-size: 1.25rem
}

em {
	font-style: normal;
	color: var(--brand)
}

p {
	line-height: 1.7
}

.announcement {
	background: var(--ink);
	color: #fff;
	text-align: center;
	padding: 9px 15px;
	font-size: .84rem
}

.announcement span {
	background: var(--rose);
	border-radius: 20px;
	padding: 2px 9px;
	margin-right: 8px;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase
}

.announcement a {
	color: #fff;
	margin-left: 8px
}

.navbar {
	background: rgba(255, 255, 255, .88);
	backdrop-filter: blur(18px);
	padding: 7px 0;
	border-bottom: 1px solid rgba(36, 28, 43, .05)
}

.navbar-brand {
	font-size: 1.35rem;
	display: flex;
	align-items: center;
	gap: 9px
}

.brand-mark {
	width: 34px;
	height: 34px;
	display: inline-grid;
	place-items: center;
	border-radius: 11px;
	background: linear-gradient(135deg, var(--brand), var(--rose));
	color: #fff;
	font-size: 1.35rem
}

.nav-link {
	color: var(--ink);
	font-weight: 500;
	font-size: .92rem
}

.btn {
	border-radius: 13px;
	font-weight: 700;
	padding: .76rem 1.25rem
}

.btn-lg {
	padding: 1rem 1.45rem;
	font-size: .95rem
}

.btn-brand {
	background: linear-gradient(110deg, var(--brand-dark), var(--brand));
	border: 0;
	color: #fff;
	box-shadow: 0 10px 30px rgba(102, 50, 148, .22)
}

.btn-brand:hover {
	background: linear-gradient(110deg, #55267f, #7d42b8);
	color: #fff;
	transform: translateY(-1px)
}

.btn-soft {
	background: #fff;
	color: var(--ink);
	border: 1px solid var(--line);
	box-shadow: 0 8px 30px rgba(50, 30, 55, .06)
}

.hero {
	min-height: 790px;
	padding: 55px 0 75px;
	background: radial-gradient(circle at 80% 30%, #f4e5ff 0, transparent 33%), linear-gradient(145deg, #fff 30%, #fff7f1);
	position: relative
}

.hero-copy {
	font-size: 1rem;
	font-style: italic;
	color: var(--muted);
	max-width: 620px;
	margin-top: 25px
}

.action-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px }
.free-button { position:relative }
.free-button span { background:#fff; color:var(--brand-dark); border-radius:6px; font-size:.6rem; letter-spacing:.08em; padding:3px 5px; margin-left:5px; vertical-align:2px }
.section-sm { padding:72px 0 }
.avatar-explainer { background:#eee9f8; color:#fff }
.explainer-panel { position:relative; overflow:hidden; padding:64px; border-radius:32px; background:linear-gradient(135deg,#9264bd,#655078 68%,#554462); box-shadow:0 24px 60px rgba(62,30,78,.14) }
.explainer-panel:before,.explainer-panel:after { content:""; position:absolute; border-radius:50%; pointer-events:none }
.explainer-panel:before { width:340px; height:340px; left:-210px; bottom:-230px; background:rgba(255,255,255,.07) }
.explainer-panel:after { width:280px; height:280px; right:-100px; top:-110px; background:rgba(238,131,166,.14) }
.explainer-panel h2 em { color:#f2b5cf }
.explainer-heading { position:relative; z-index:1; max-width:850px; margin:0 auto 42px; text-align:center }
.explainer-heading .eyebrow { justify-content:center }
.explainer-heading h2 { font-size:clamp(2.4rem,4vw,4rem); margin-bottom:18px }
.explainer-heading>p { max-width:630px; margin:0 auto; color:rgba(255,255,255,.78); font-size:1.05rem }
.explainer-story { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr); align-items:stretch }
.explainer-input,.explainer-output { padding:30px; border:1px solid rgba(255,255,255,.18); border-radius:24px; background:rgba(255,255,255,.1); backdrop-filter:blur(8px) }
.explainer-card-label { display:block; margin-bottom:22px; color:#f2b5cf; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase }
.explainer-traits { display:grid; gap:12px }
.explainer-traits>div { display:flex; align-items:center; gap:14px; padding:12px; border-radius:15px; background:rgba(255,255,255,.08) }
.explainer-traits i { flex:0 0 42px; height:42px; display:grid; place-items:center; border-radius:13px; color:#f2b5cf; background:rgba(242,181,207,.13); font-size:1.15rem }
.explainer-traits span,.explainer-traits strong,.explainer-traits small { display:block }
.explainer-traits strong { font-family:var(--display); font-size:.94rem }
.explainer-traits small { margin-top:2px; color:rgba(255,255,255,.65); font-size:.76rem }
.explainer-connection { display:flex; align-items:center; justify-content:center; color:#f2b5cf }
.explainer-connection span { width:18px; height:1px; background:rgba(255,255,255,.32) }
.explainer-connection i { width:40px; height:40px; display:grid; place-items:center; border:1px solid rgba(242,181,207,.45); border-radius:50%; background:#695078 }
.explainer-output { position:relative; padding-left:116px }
.explainer-avatar { position:absolute; top:30px; left:28px; width:68px; height:68px; display:grid; place-items:center; border-radius:22px; color:#60456f; background:linear-gradient(145deg,#f8d4e3,#f2b5cf); font-size:1.8rem; box-shadow:0 12px 28px rgba(30,15,35,.18) }
.avatar-pulse { position:absolute; right:-3px; bottom:-3px; width:18px; height:18px; border:4px solid #715582; border-radius:50%; background:#a8e4c2 }
.explainer-output h3 { max-width:290px; margin-bottom:14px; font-size:1.35rem; line-height:1.25 }
.explainer-output ul { list-style:none; padding:0; margin:0 }
.explainer-output li { position:relative; margin:9px 0; padding-left:22px; color:rgba(255,255,255,.78); font-size:.88rem }
.explainer-output li:before { content:"✓"; position:absolute; left:0; color:#f2b5cf; font-weight:800 }
.explainer-footer { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:20px; padding:24px 30px; border:1px solid rgba(255,255,255,.18); border-radius:20px; background:rgba(255,255,255,.1) }
.explainer-footer>p { margin:0 0 5px; color:rgba(255,255,255,.7); font-size:.84rem }
.explainer-footer>p i { margin-right:6px; color:#f2b5cf }
.explainer-footer .action-row { flex-wrap:nowrap; margin-top:0 }
.testimonials { background:#fffaf6 }
.testimonial-carousel { padding:35px 44px 42px }
.testimonial-carousel .carousel-item { transition:transform .6s ease-in-out }
.testimonial-carousel .row { --bs-gutter-x:18px }
.testimonial-card { min-height:510px; border-radius:25px; overflow:hidden; position:relative; background:linear-gradient(0deg,rgba(24,14,28,.96),rgba(30,15,35,.08) 75%),var(--photo) center/cover; box-shadow:0 15px 45px rgba(45,30,49,.15) }
.testimonial-card>div { position:absolute; inset:auto 0 0; padding:34px 28px 25px; color:#fff }
.testimonial-card small { color:#eadfec }
.testimonial-card blockquote { line-height:1.55; margin:13px 0 20px; font-size:1rem }
.testimonial-card h3,.testimonial-card p { margin:0 }
.testimonial-card p { color:#cfc3d1; font-size:.85rem }
.slider-hint { color:var(--muted); font-size:.8rem; margin-top:8px }
.testimonial-indicators { bottom:6px; margin-bottom:0 }
.testimonial-indicators [data-bs-target] { width:9px; height:9px; border:0; border-radius:50%; background-color:#9b72bd }
.testimonial-control { width:38px; height:38px; top:50%; bottom:auto; border-radius:50%; background:var(--brand); opacity:.85; transform:translateY(-50%) }
.testimonial-control:hover { opacity:1 }

.eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	text-transform: uppercase;
	letter-spacing: .13em;
	font-size: .74rem;
	font-weight: 700;
	color: var(--brand);
	margin-bottom: 20px
}

.eyebrow span {
	width: 28px;
	height: 1px;
	background: currentColor
}

.trust-row {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-top: 40px
}

.avatar-stack {
	display: flex
}

.avatar-stack span {
	width: 39px;
	height: 39px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #ffddcf;
	border: 3px solid #fff;
	margin-left: -9px;
	font-size: .7rem;
	font-weight: 700
}

.avatar-stack span:first-child {
	margin-left: 0;
	background: #e1d1f4
}

.avatar-stack span:nth-child(3) {
	background: #d3efe1
}

.avatar-stack span:last-child {
	background: var(--ink);
	color: #fff
}

.trust-row strong,
.trust-row small {
	display: block
}

.trust-row small {
	color: var(--muted);
	font-size: .8rem
}

.stars {
	color: #efa856;
	letter-spacing: 1px
}

.orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(1px);
	opacity: .7
}

.orb-one {
	width: 200px;
	height: 200px;
	background: #fbcfe0;
	top: 100px;
	right: -90px
}

.orb-two {
	width: 110px;
	height: 110px;
	background: #d9c3f1;
	bottom: 20px;
	left: -40px
}

.hero-visual {
	height: 590px;
	position: relative;
	display: grid;
	place-items: center
}

.phone {
	width: 270px;
	height: 550px;
	background: #18141c;
	padding: 9px;
	border-radius: 42px;
	box-shadow: 0 30px 70px rgba(49, 27, 57, .25);
	position: relative;
	overflow: hidden
}

.phone:before {
	content: "";
	width: 78px;
	height: 22px;
	background: #18141c;
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 0 0 16px 16px;
	z-index: 3
}

.phone-screen {
	height: 100%;
	border-radius: 34px;
	overflow: hidden;
	position: relative;
	background: linear-gradient(160deg, #f6e8ff, #fff0e8)
}

.phone-screen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 2
}

.phone-screen img:not([src]),
.phone-screen img[src=""] {
	display: none
}

.image-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 25px;
	background: linear-gradient(160deg, #f3e4ff, #fff4ed)
}

.image-fallback i {
	font-size: 3rem;
	color: var(--brand);
	margin-bottom: 20px
}

.image-fallback p {
	font-size: .85rem;
	color: var(--muted)
}

.image-fallback.alt {
	background: linear-gradient(160deg, #fff0e8, #f9e8f1)
}

.wave {
	display: flex;
	gap: 4px;
	align-items: center;
	height: 30px
}

.wave i {
	width: 3px;
	height: 10px;
	background: var(--brand);
	animation: wave 1s infinite alternate
}

.wave i:nth-child(2),
.wave i:nth-child(4) {
	animation-delay: .25s;
	height: 22px
}

.wave i:nth-child(3) {
	height: 15px
}

.memory-card {
	position: absolute;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(255, 255, 255, .94);
	padding: 14px 16px;
	border-radius: 16px;
	box-shadow: 0 15px 40px rgba(40, 22, 52, .14);
	min-width: 230px
}

.memory-card>i {
	font-size: 1.6rem;
	color: var(--brand)
}

.memory-card small,
.memory-card strong {
	display: block
}

.memory-card small {
	font-size: .62rem;
	letter-spacing: .1em;
	color: var(--muted)
}

.memory-card strong {
	font-size: .84rem
}

.memory-card>span:last-child {
	margin-left: auto;
	font-size: .7rem;
	color: var(--muted)
}

.card-one {
	top: 90px;
	left: 3px;
	transform: rotate(-4deg)
}

.card-two {
	right: -10px;
	bottom: 120px;
	transform: rotate(3deg)
}

.play {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--peach);
	color: var(--rose)
}

.floating-pill {
	position: absolute;
	right: 0;
	top: 185px;
	background: var(--ink);
	color: #fff;
	padding: 11px 17px;
	border-radius: 30px;
	font-size: .75rem;
	z-index: 4
}

.floating-pill i {
	color: #eab6ff;
	margin-right: 6px
}

.logo-strip {
	padding: 30px 0;
	border-bottom: 1px solid var(--line);
	border-top: 1px solid var(--line);
	text-align: center
}

.logo-strip p {
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .67rem;
	color: #a19aa2
}

.value-row {
	display: flex;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
	color: #5f5762;
	font-weight: 600
}

.value-row i {
	color: var(--brand);
	margin-right: 8px
}

.section {
	padding: 120px 0
}

.lead {
	font-size: 1.2rem;
	line-height: 1.7
}

.text-muted {
	color: var(--muted) !important
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px
}

.feature-card {
	padding: 38px;
	border-radius: 26px;
	min-height: 395px;
	display: flex;
	flex-direction: column
}

.feature-card.peach {
	background: var(--peach)
}

.feature-card.violet {
	background: var(--lavender)
}

.feature-card.mint {
	background: var(--mint)
}

.icon-box {
	width: 58px;
	height: 58px;
	border-radius: 17px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .75);
	font-size: 1.55rem;
	color: var(--brand);
	margin-bottom: 65px
}

.feature-card p {
	color: #6d6570;
	font-size: .93rem
}

.feature-card a,
.link-button {
	margin-top: auto;
	color: var(--ink);
	font-weight: 700;
	text-decoration: none;
	font-size: .9rem
}

.link-button {
	border: 0;
	background: transparent;
	text-align: left;
	padding: 0
}

.dark-section {
	background: #211728;
	color: #fff;
	position: relative;
	overflow: hidden
}

.dark-section em {
	color: #eeb2ce
}

.dark-section p {
	color: #c7bdca
}

.noise {
	position: absolute;
	inset: 0;
	opacity: .18;
	background-image: radial-gradient(#fff 1px, transparent 1px);
	background-size: 25px 25px;
	mask-image: linear-gradient(to right, transparent, #000)
}

.eyebrow.light {
	color: #eab6d2
}

.check-list {
	list-style: none;
	padding: 0;
	margin-top: 28px
}

.check-list li {
	margin: 13px 0;
	color: #ddd2e1
}

.check-list i {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(238, 131, 166, .2);
	color: #f3a8c1;
	margin-right: 9px
}

.voice-studio {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 28px;
	padding: 25px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .3)
}

.studio-head {
	display: flex;
	justify-content: space-between;
	font-size: .78rem;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.secure {
	color: #aee6ca
}

.voice-state {
	text-align: center;
	padding: 32px 10px 10px
}

.record-orb {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--rose), var(--brand));
	display: grid;
	place-items: center;
	margin: 0 auto 22px;
	font-size: 2rem;
	box-shadow: 0 0 0 12px rgba(238, 131, 166, .08), 0 0 0 25px rgba(238, 131, 166, .04)
}

.record-orb.recording {
	animation: pulse 1.4s infinite
}

.voice-state p {
	max-width: 420px;
	margin: 10px auto
}

.timer {
	font-family: monospace;
	font-size: 1.15rem;
	margin: 16px
}

.live-wave {
	height: 35px;
	display: none;
	align-items: center;
	justify-content: center;
	gap: 4px
}

.live-wave.active {
	display: flex
}

.live-wave span {
	width: 3px;
	background: #eeb2ce;
	border-radius: 4px;
	animation: wave .6s infinite alternate
}

.demo-note {
	display: block;
	color: #95899a;
	margin-top: 16px
}

.reading-prompt { margin:0 auto 8px; max-width:460px; padding:14px 16px; border:1px solid rgba(255,255,255,.13); border-radius:14px; background:rgba(255,255,255,.07); text-align:left }
.reading-prompt strong { color:#f3bfd2; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase }
.reading-prompt p { margin:6px 0 0; font-size:.88rem; line-height:1.55 }
.sample-review { display:grid; gap:13px; margin-top:20px; padding:18px; border-radius:16px; background:rgba(255,255,255,.08); text-align:left }
.sample-name { display:flex; align-items:center; gap:8px; color:#eadfec; font-size:.86rem; overflow-wrap:anywhere }
.sample-review audio,.result-player { width:100%; height:42px }
.voice-consent { display:flex; align-items:flex-start; gap:9px; color:#e6dfe8; font-size:.78rem; line-height:1.45 }
.voice-consent input { margin-top:3px; accent-color:var(--rose); flex:none }
.voice-consent a { color:#f3bfd2 }
.voice-error { display:flex; align-items:center; gap:8px; margin-top:16px; padding:11px 13px; border:1px solid rgba(255,155,155,.35); border-radius:12px; background:rgba(126,20,32,.28); color:#ffe1e1; text-align:left; font-size:.82rem }
.voice-error span { flex:1; white-space:pre-wrap; overflow-wrap:anywhere }
.voice-error button { border:0; background:none; color:#fff; font-weight:700; text-decoration:underline }
.voice-processing { padding:70px 22px; text-align:center }
.voice-processing small { display:block; margin:18px 0 8px; color:#cbb1d7; letter-spacing:.13em }
.voice-processing p { color:#ddd3e1 }
.voice-spinner { display:block; width:55px; height:55px; margin:auto; border:4px solid rgba(255,255,255,.18); border-top-color:#f0a4c2; border-radius:50%; animation:spin .8s linear infinite }
.result-player { margin:12px 0 20px }
.voice-app-cta { margin-top:4px }
.voice-player-shell { display:flex; align-items:center; gap:13px; margin:20px auto 24px; padding:13px; border:1px solid rgba(255,255,255,.16); border-radius:18px; background:rgba(255,255,255,.09); box-shadow:0 16px 38px rgba(0,0,0,.18) }
.voice-player-icon { flex:0 0 44px; height:44px; display:grid; place-items:center; border-radius:14px; color:#fff; background:linear-gradient(135deg,var(--rose),var(--brand)); font-size:1.35rem }
.voice-player-shell .result-player { min-width:0; margin:0 }
.result-actions { display:flex; justify-content:center; gap:12px }
.result-actions .btn { flex:1 }
.delete-link { color:#f0a7b2 }
@keyframes spin { to { transform:rotate(360deg) } }

.voice-result {
	text-align: center;
	padding: 32px 15px 15px
}

.success-icon {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #9ae0bc;
	color: #1c4932;
	font-size: 2rem;
	margin: 0 auto 16px
}

.voice-result>small {
	letter-spacing: .13em;
	color: #bfa8ca
}

.result-wave {
	height: 55px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px
}

.result-wave span {
	height: 15px;
	width: 5px;
	background: linear-gradient(var(--rose), var(--brand));
	border-radius: 8px
}

.result-wave span:nth-child(2n) {
	height: 35px
}

.result-wave span:nth-child(3n) {
	height: 48px
}

.result-form {
	display: flex;
	gap: 8px;
	margin-top: 15px
}

.result-form .form-control {
	border-radius: 12px;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	border-color: rgba(255, 255, 255, .18)
}

.result-form .form-control::placeholder {
	color: #aea3b2
}

.reset-link {
	background: none;
	border: 0;
	color: #cbbcd1;
	text-decoration: underline;
	margin-top: 15px
}

.section-heading {
	max-width: 700px
}

.section-heading>p {
	color: var(--muted);
	font-size: 1.1rem
}

.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-top: 65px
}

.steps article {
	padding: 25px 30px;
	position: relative;
	border-right: 1px solid var(--line)
}

.steps article:last-child {
	border: 0
}

.step-number {
	font-family: var(--display);
	font-size: .7rem;
	color: #aaa1ad
}

.step-icon {
	width: 62px;
	height: 62px;
	border-radius: 20px;
	background: var(--lavender);
	color: var(--brand);
	display: grid;
	place-items: center;
	font-size: 1.6rem;
	margin: 35px 0 25px
}

.steps p {
	font-size: .9rem;
	color: var(--muted)
}

.microcopy {
	font-size: .75rem;
	color: #99919b;
	margin-top: 12px
}

.showcase {
	background: var(--cream)
}

.mini-features {
	margin-top: 35px
}

.mini-features>div {
	display: flex;
	gap: 18px;
	margin: 24px 0
}

.mini-features>div>i {
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	display: grid;
	place-items: center;
	background: #fff;
	border-radius: 14px;
	color: var(--brand);
	font-size: 1.25rem;
	box-shadow: 0 8px 25px rgba(45, 30, 49, .07)
}

.mini-features strong,
.mini-features small {
	display: block
}

.mini-features small {
	color: var(--muted);
	margin-top: 4px
}

.phone-gallery {
	height: 620px;
	position: relative
}

.phone-gallery .phone {
	position: absolute;
	transform: scale(.86)
}

.phone-back {
	left: 15px;
	top: 0;
	transform: rotate(-8deg) scale(.86) !important
}

.phone-front {
	right: 65px;
	bottom: 0;
	transform: rotate(5deg) scale(.9) !important
}

.gallery-tag {
	position: absolute;
	left: 35px;
	bottom: 70px;
	background: #fff;
	padding: 15px 20px;
	border-radius: 18px;
	box-shadow: 0 15px 40px rgba(45, 30, 49, .15);
	z-index: 5
}

.gallery-tag i {
	color: var(--rose);
	margin-right: 8px
}

.gallery-tag small {
	display: block;
	margin-left: 27px;
	color: var(--muted)
}

.interview-card {
	background: linear-gradient(135deg, #4b2862, #282031);
	color: #fff;
	padding: 75px;
	border-radius: 35px;
	position: relative;
	overflow: hidden
}

.interview-card:after {
	content: "“";
	position: absolute;
	left: 35%;
	top: -100px;
	font: 450px Georgia;
	color: rgba(255, 255, 255, .035)
}

.interview-card p {
	color: #d8ccd9
}

.expert {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-top: 35px
}

.expert-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #f2b4cc;
	display: grid;
	place-items: center;
	color: #4b2862
}

.expert strong,
.expert small {
	display: block
}

.expert small {
	color: #bfaec4
}

.tips {
	list-style: none;
	padding: 0;
	position: relative;
	z-index: 1
}

.tips li {
	display: flex;
	gap: 18px;
	padding: 20px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .12)
}

.tips li:last-child {
	border: 0
}

.tips li>span {
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	display: grid;
	place-items: center
}

.tips p {
	margin: 5px 0 0;
	font-size: .88rem
}

.section-sidecopy {
	max-width: 450px;
	color: var(--muted)
}

.quote-card {
	height: 100%;
	background: #f7f3f8;
	padding: 40px;
	border-radius: 26px;
	position: relative
}

.quote-card.featured {
	background: var(--peach)
}

.quote-icon {
	font-size: 2.7rem;
	color: var(--rose)
}

.quote-card>p {
	font-family: var(--display);
	font-size: 1.32rem;
	line-height: 1.55;
	font-weight: 600
}

.quote-card footer {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 35px
}

.quote-avatar {
	width: 43px;
	height: 43px;
	border-radius: 50%;
	background: #edbdad;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: .75rem
}

.violet-bg {
	background: #d8c3ec
}

.quote-card footer strong,
.quote-card footer small {
	display: block
}

.quote-card footer small {
	color: var(--muted);
	font-size: .75rem
}

.quote-card footer .stars {
	margin-left: auto
}

.disclaimer {
	text-align: right;
	color: #a69ea8;
	font-size: .7rem;
	margin-top: 12px
}

.app-cta {
	padding-top: 25px
}

.app-panel {
	background: linear-gradient(120deg, #6d3598, #a65bb6);
	border-radius: 38px;
	color: #fff;
	padding: 80px;
	overflow: hidden;
	position: relative
}

.app-panel h2 {
	color: #fff
}

.app-panel p {
	color: #e8daed
}

.blob {
	position: absolute;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: rgba(255, 183, 207, .22);
	right: -80px;
	top: -220px
}

.store-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px
}

.store-badge {
	display: flex;
	align-items: center;
	gap: 11px;
	background: #17131a;
	color: #fff;
	text-decoration: none;
	padding: 10px 16px;
	border-radius: 11px;
	min-width: 165px
}

.store-badge i {
	font-size: 1.8rem
}

.store-badge span {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.1
}

.store-badge small {
	display: block;
	font-size: .57rem;
	font-weight: 400;
	letter-spacing: .07em
}

.qr-note {
	font-size: .75rem;
	margin-top: 18px
}

.app-phones {
	height: 420px;
	position: relative
}

.app-phones .phone {
	position: absolute;
	transform: scale(.67);
	transform-origin: top center
}

.app-phones .phone:first-child {
	left: 20px;
	top: 30px;
	transform: rotate(-7deg) scale(.67)
}

.app-phones .phone:last-child {
	right: 0;
	top: -35px;
	transform: rotate(8deg) scale(.7)
}

.faq .accordion-item {
	border: 0;
	border-bottom: 1px solid var(--line)
}

.accordion-button {
	font-family: var(--display);
	font-weight: 700;
	font-size: 1rem;
	padding: 24px 4px;
	background: #fff !important;
	box-shadow: none !important;
	color: var(--ink) !important
}

.accordion-button:not(.collapsed) {
	color: var(--brand) !important
}

.accordion-body {
	color: var(--muted);
	padding: 0 4px 24px;
	line-height: 1.7
}

.final-cta {
	padding: 120px 0;
	background: radial-gradient(circle at 50% 0, #f0ddff, transparent 48%), #fffaf6
}

.final-cta p {
	color: var(--muted);
	font-size: 1.1rem
}

.final-cta>div>small {
	display: block;
	margin-top: 18px;
	color: #9c939e
}

.infinity-icon {
	width: 65px;
	height: 65px;
	border-radius: 20px;
	background: linear-gradient(135deg, var(--brand), var(--rose));
	display: grid;
	place-items: center;
	color: #fff;
	font-size: 2.1rem;
	margin: 0 auto 30px;
	transform: rotate(-5deg)
}

footer {
	background: #1c1720;
	color: #fff;
	padding: 70px 0 25px
}

.footer-main {
	display: flex;
	justify-content: space-between;
	gap: 50px;
	padding-bottom: 60px
}

.footer-main>div:first-child {
	max-width: 380px
}

.footer-main p {
	color: #a9a0ac;
	margin-top: 20px
}

.footer-links {
	display: flex;
	gap: 80px
}

.footer-links>div {
	display: flex;
	flex-direction: column;
	gap: 10px
}

.footer-links strong {
	margin-bottom: 10px
}

.footer-links a,
.footer-bottom a {
	color: #aaa0ad;
	text-decoration: none
}

.footer-bottom {
	border-top: 1px solid #352e39;
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	color: #817783;
	font-size: .72rem
}

.footer-bottom div {
	display: flex;
	gap: 20px
}

.footer-bottom i {
	color: var(--rose)
}

.reveal {
	opacity: 0;
	transform: translateY(25px);
	transition: opacity .75s, transform .75s
}

.reveal.visible {
	opacity: 1;
	transform: none
}

.delay-1 {
	transition-delay: .15s
}

@keyframes wave {
	to {
		height: 28px
	}
}

@keyframes pulse {
	50% {
		box-shadow: 0 0 0 18px rgba(238, 131, 166, .1), 0 0 0 38px rgba(238, 131, 166, .03)
	}
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(12px)
	}
}

@media(max-width:991px) {
	.navbar-collapse {
		padding: 20px 0
	}

	.hero {
		text-align: center;
		padding-top: 70px
	}

	.hero .eyebrow,
	.hero .d-flex,
	.hero .trust-row {
		justify-content: center
	}

	.hero-visual {
		margin-top: 10px
	}

	.feature-grid,
	.steps {
		grid-template-columns: 1fr 1fr
	}

	.steps article:nth-child(2) {
		border: 0
	}

	.interview-card,
	.app-panel {
		padding: 50px
	}

	.footer-main {
		flex-direction: column
	}

	.app-phones {
		margin-top: 40px
	}

	.section {
		padding: 85px 0
	}
}

@media(max-width:767px) {
	h1 {
		font-size: 3.15rem
	}

	.announcement {
		font-size: .7rem
	}

	.announcement a {
		display: none
	}

	.hero {
		min-height: auto
	}

	.hero-visual {
		height: 530px;
		transform: scale(.84);
		margin: 0 -35px
	}

	.feature-grid,
	.steps {
		grid-template-columns: 1fr
	}

	.steps article {
		border-right: 0;
		border-bottom: 1px solid var(--line)
	}

	.feature-card {
		min-height: 340px
	}

	.phone-gallery {
		transform: scale(.8);
		margin: -60px -50px
	}

	.interview-card,
	.app-panel {
		padding: 35px 25px
	}

	.result-form {
		flex-direction: column
	}

	.footer-links {
		gap: 35px;
		flex-wrap: wrap
	}

	.footer-bottom {
		flex-direction: column;
		gap: 15px
	}

	.app-phones {
		transform: scale(.8);
		margin: 0 -60px
	}

	.value-row {
		justify-content: center
	}

	.section {
		padding: 70px 0
	}

	.quote-card footer {
		flex-wrap: wrap
	}

	.card-one {
		left: -25px
	}

	.card-two {
		right: -35px
	}
}

/* Compact, content-led cards */
.feature-card { display:block; min-height:0; padding:30px }
.feature-card .icon-box { float:left; width:50px; height:50px; margin:0 16px 8px 0; border-radius:15px }
.feature-card h3 { padding-top:3px; min-height:48px }
.feature-card a,.feature-card .link-button { display:inline-block; margin-top:8px }
.steps article { display:block; padding:25px }
.steps .step-number { display:block }
.steps .step-icon { float:left; width:52px; height:52px; margin:20px 15px 8px 0; border-radius:16px }
.steps h3 { padding-top:22px; min-height:58px }
.reading-prompt { text-align:left; padding:15px 17px; margin:15px auto; max-width:500px; background:rgba(255,255,255,.09); border-left:3px solid #eeb2ce; border-radius:8px }
.reading-prompt strong { color:#fff; font-size:.83rem }
.reading-prompt p { font-size:.78rem; line-height:1.55; margin:7px 0 0 }
.social-proof { position:fixed; z-index:1080; left:18px; bottom:18px; width:min(365px,calc(100vw - 36px)); display:flex; align-items:center; gap:12px; padding:12px 13px; border:1px solid rgba(255,255,255,.13); border-radius:15px; color:#fff; background:rgba(31,23,36,.94); backdrop-filter:blur(12px); box-shadow:0 15px 50px rgba(20,10,25,.28); transform:translateY(140%); opacity:0; transition:.4s ease }
.social-proof[hidden] { display:none }
.social-proof.show { transform:translateY(0); opacity:1 }
.proof-check { flex:0 0 38px; height:38px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,var(--rose),var(--brand)); font-size:1.2rem }
.social-proof strong,.social-proof small { display:block }
.social-proof strong { font-size:.85rem }
.social-proof small { color:#d2c7d5; font-size:.76rem }
.proof-copy { flex:1; min-width:0 }
.proof-meta { display:flex; flex-wrap:wrap; gap:5px 12px; margin-top:5px; color:#f1eaf3; font-size:.67rem }
.proof-meta>span:last-child { color:#fff; font-weight:600 }
.proof-meta i { margin-right:2px; color:#fff; font-size:.65rem }
.social-proof button { margin-left:auto; align-self:flex-start; background:none; border:0; color:#aa9ead; padding:0 }

@media(max-width:991px) {
	.hero { padding-top:35px }
	.hero-visual-column { display:none }
	.explainer-panel { padding:44px 36px }
	.explainer-story { grid-template-columns:1fr 64px 1fr }
	.explainer-output { padding:28px }
	.explainer-avatar { position:relative; top:auto; left:auto; width:56px; height:56px; margin-bottom:18px; border-radius:18px }
	.explainer-footer { align-items:flex-start; flex-direction:column }
	.feature-grid { grid-template-columns:1fr }
}
@media(max-width:767px) {
	html { scroll-padding-top:68px }
	.navbar { padding:4px 0 }
	.navbar-toggler { padding:.3rem }
	.hero { min-height:0; padding:22px 0 50px }
	.hero .row { --bs-gutter-y:2rem }
	.hero h1 { font-size:clamp(2.35rem,11vw,3.25rem); line-height:1.04 }
	.hero .eyebrow { margin-bottom:12px }
	.hero-copy { margin-top:16px }
	.action-row { display:grid; grid-template-columns:1fr; width:100% }
	.action-row .btn { width:100% }
	.trust-row { margin-top:25px }
	.hero-visual { height:510px; transform:scale(.86); margin:-30px 0 }
	.section,.section-sm { padding:65px 0 }
	.avatar-explainer.section-sm { padding:38px 0 }
	.explainer-panel { padding:32px 18px 20px; border-radius:22px }
	.explainer-heading { margin-bottom:26px; text-align:left }
	.explainer-heading .eyebrow { justify-content:flex-start; margin-bottom:12px }
	.explainer-heading h2 { font-size:2rem; margin-bottom:12px }
	.explainer-heading>p { font-size:.92rem; line-height:1.55 }
	.explainer-story { grid-template-columns:1fr; gap:12px }
	.explainer-input,.explainer-output { padding:20px; border-radius:18px }
	.explainer-card-label { margin-bottom:14px }
	.explainer-connection { height:34px; transform:rotate(90deg) }
	.explainer-output { display:grid; grid-template-columns:54px 1fr; column-gap:14px }
	.explainer-avatar { grid-row:1/3; width:54px; height:54px; margin:0; border-radius:17px }
	.explainer-output .explainer-card-label { align-self:end; margin-bottom:4px }
	.explainer-output h3 { grid-column:2; font-size:1.15rem }
	.explainer-output ul { grid-column:1/-1; margin-top:8px }
	.explainer-footer { gap:18px; margin-top:12px; padding:20px }
	.explainer-footer>p { line-height:1.45 }
	.explainer-footer .action-row { display:grid; width:100% }
	.testimonial-carousel { padding:25px 0 40px }
	.testimonial-mobile-list { display:grid; gap:14px }
	.testimonial-mobile-list .testimonial-card { min-height:340px; background-position:center 28% }
	.testimonial-mobile-list .testimonial-card>div { padding:52px 20px 20px }
	.testimonial-mobile-list .testimonial-card blockquote { margin:9px 0 12px; font-size:.9rem; line-height:1.45 }
	.testimonial-mobile-list .testimonial-card small { font-size:.72rem }
	.testimonial-indicators,.testimonials .slider-hint { display:none }
	.testimonial-control { display:none }
	.logo-strip { padding:25px 0 }
	.value-row { justify-content:center; gap:15px 22px }
	.feature-card { padding:24px }
	.steps { margin-top:35px }
	.steps article { border-right:0; border-bottom:1px solid var(--line) }
	.social-proof { left:10px; bottom:10px; width:calc(100vw - 20px) }
}

/* ForeverMe v2 brand palette */
:root {
	--brand: #AC46FF;
	--brand-dark: #569DFD;
	--rose: #BA5EE5;
	--peach: #f8e4d5;
	--lavender: #ebe3ff;
	--cream: #f5f9ff;
	--mint: #e1f3fb
}

.brand-logo {
	display: block;
	width: 168px;
	height: 42px;
	object-fit: contain;
	object-position: left center
}

.btn-brand {
	background: linear-gradient(138deg, #569DFD 0%, #AC46FF 100%);
	box-shadow: 0 12px 30px rgba(86, 157, 253, .28)
}

.btn-brand:hover {
	background: linear-gradient(138deg, #438ff8 0%, #9d32f7 100%)
}

.hero {
	background: linear-gradient(180deg, #fff 0%, #B2D8EB 50%, #C3D2FD 75%, #DEC8FE 100%)
}

.dark-section {
	background: linear-gradient(138deg, #569DFD 0%, #AC46FF 100%)
}

.interview-card,
.app-panel {
	background: linear-gradient(138deg, #BA5EE5 0%, #ECB884 100%)
}

.quote-card.featured {
	background: linear-gradient(138deg, #BA5EE5 0%, #ECB884 100%);
	color: #fff
}

.quote-card.featured p,
.quote-card.featured h3,
.quote-card.featured .quote-icon {
	color: #fff
}

.record-orb,
.infinity-icon,
.result-wave span {
	background: linear-gradient(138deg, #569DFD 0%, #AC46FF 100%)
}

.product-tour {
	background: linear-gradient(180deg, #fff 0%, #B2D8EB 50%, #C3D2FD 75%, #DEC8FE 100%)
}

.product-shots {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	align-items: start;
	margin-top: 55px
}

.product-shots img {
	width: 100%;
	border-radius: 28px;
	box-shadow: 0 24px 55px rgba(45, 63, 120, .2);
	border: 6px solid rgba(255, 255, 255, .75)
}

.product-shots img:nth-child(even) {
	margin-top: 55px
}

.final-logo {
	width: 220px;
	height: 70px;
	object-fit: contain;
	margin: 0 auto 28px
}

@media(max-width:991px) {
	.product-shots {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media(max-width:767px) {
	.brand-logo {
		width: 145px
	}

	.product-shots {
		gap: 12px
	}

	.product-shots img {
		border-radius: 18px;
		border-width: 3px
	}

	.product-shots img:nth-child(even) {
		margin-top: 28px
	}
}

/* Accessibility and contrast refinements */
.announcement {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	background: #17121c;
	color: #fff;
	padding: 11px 16px
}

.announcement>i {
	color: #f7b7d1
}

.announcement strong {
	font-family: var(--display);
	letter-spacing: -.01em
}

.announcement .announcement-detail {
	background: none;
	padding: 0;
	margin: 0;
	font-size: inherit;
	font-weight: 500;
	text-transform: none;
	color: #e8dfe9
}

.announcement a {
	font-weight: 700;
	text-underline-offset: 3px
}

.navbar-brand .brand-logo {
	width: 42px;
	height: 42px
}

.brand-name {
	color: #241c2b;
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -.045em
}

.dark-section p,
.dark-section .check-list li {
	color: #fff
}

.dark-section .eyebrow.light {
	color: #fff
}

.dark-section em {
	color: #ffe0ee
}

.dark-section .demo-note {
	color: #fff
}

.voice-studio {
	background: rgba(26, 18, 35, .25);
	border-color: rgba(255, 255, 255, .35)
}

.interview-card p {
	color: #fff
}

.interview-card .expert small {
	color: #fff
}

.interview-card .eyebrow.light {
	color: #fff
}

.tips li {
	background: rgba(54, 25, 65, .18);
	padding: 20px;
	border-radius: 16px;
	margin-bottom: 8px;
	border: 1px solid rgba(255, 255, 255, .2)
}

.journey {
	background: linear-gradient(180deg, #f6f1ff 0%, #edf5ff 100%)
}

.journey .section-heading>p {
	color: #514959
}

.journey .steps {
	gap: 16px
}

.journey .steps article {
	background: #fff;
	border: 1px solid #d9cde5 !important;
	border-radius: 24px;
	box-shadow: 0 16px 38px rgba(53, 39, 67, .09);
	padding: 30px
}

.journey .steps p {
	color: #514959
}

.journey .step-number {
	color: #665a6d;
	font-weight: 700
}

.journey .step-icon {
	margin: 25px 0 22px;
	background: #e6d8ff
}

.journey .microcopy {
	color: #514959
}

.journey .microcopy i {
	color: var(--brand);
	margin-right: 5px
}

footer {
	padding: 34px 0 20px
}

.footer-compact {
	display: grid;
	grid-template-columns: minmax(180px, .75fr) minmax(360px, 1.5fr) auto;
	align-items: center;
	gap: 35px;
	padding-bottom: 28px
}

.footer-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	text-decoration: none;
	font-family: var(--display);
	font-size: 1.25rem;
	font-weight: 800
}

.footer-brand .brand-logo {
	width: 38px;
	height: 38px
}

.footer-compact address {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0;
	color: #cfc7d1;
	font-size: .8rem;
	font-style: normal
}

.footer-compact address strong {
	color: #fff
}

.footer-compact address a {
	color: #cfc7d1;
	text-decoration: none
}

.footer-compact address i {
	color: #d9a9ff;
	margin-right: 6px
}

.footer-links-compact {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	justify-content: flex-end
}

.footer-links-compact a {
	color: #fff;
	text-decoration: none;
	font-size: .82rem;
	font-weight: 600
}

.footer-links-compact a:hover {
	text-decoration: underline
}

.footer-bottom {
	padding-top: 16px
}

.footer-bottom span:last-child {
	margin-left: auto
}

.registration-chat-entry { margin-left:auto; padding:0; border:0; color:inherit; background:none; font:inherit; cursor:default }
/* Keep the chat and its dimming layer above every page-level overlay. */
#registrationChatModal { z-index:2147483647 }
.modal-backdrop { z-index:2147483646 }
.registration-chat-dialog { max-width:720px }
.registration-chat-modal { height:min(760px,calc(100vh - 32px)); overflow:hidden; border:0; border-radius:28px; background:linear-gradient(145deg,#fff 55%,#fff8f3); box-shadow:0 28px 90px rgba(52,29,61,.28) }
.registration-chat-modal .modal-header { position:relative; gap:14px; padding:21px 62px 21px 24px; border-bottom:1px solid var(--line); background:linear-gradient(110deg,rgba(241,233,251,.85),rgba(255,240,232,.68)) }
.registration-chat-heading { display:flex; align-items:center; gap:13px }
.registration-chat-heading small { display:block; color:var(--brand); font-size:.65rem; font-weight:800; letter-spacing:.14em }
.registration-chat-heading h2 { margin:2px 0 0; font-size:1.3rem; letter-spacing:-.03em }
.registration-chat-mark { width:43px; height:43px; display:grid; place-items:center; flex:0 0 auto; border-radius:14px; color:#fff; background:linear-gradient(135deg,var(--brand-dark),var(--rose)); box-shadow:0 8px 20px rgba(102,50,148,.22) }
.registration-chat-modal .btn-close { position:absolute; top:14px; right:14px; margin:0; padding:10px; border-radius:50% }
.registration-chat-new { display:flex; min-height:44px; margin-left:auto; padding:9px 16px; align-items:center; justify-content:center; gap:7px; border-radius:13px; font-weight:700; white-space:nowrap }
.registration-chat-modal .modal-body { display:flex; flex-direction:column; min-height:0; padding:0 }
.registration-chat-modal [hidden] { display:none }
.registration-chat-loader { display:grid; flex:1; min-height:0; padding:28px; place-items:center; background:linear-gradient(145deg,#fff 45%,#fff8f3) }
.registration-chat-loader-content { width:min(100%,430px); padding:28px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 14px 40px rgba(52,29,61,.1); text-align:center }
.registration-chat-loader-icon { display:grid; width:54px; height:54px; margin:0 auto 14px; place-items:center; border-radius:18px; color:#fff; background:linear-gradient(135deg,var(--brand-dark),var(--rose)); box-shadow:0 9px 24px rgba(102,50,148,.23); font-size:1.25rem }
.registration-chat-loader-copy { display:flex; margin-bottom:16px; align-items:baseline; justify-content:space-between; gap:16px; color:var(--ink) }
.registration-chat-loader-copy span { flex:0 0 auto; color:var(--brand); font-size:.82rem; font-weight:800 }
.registration-chat-loader-track { height:9px; overflow:hidden; border-radius:999px; background:var(--lavender) }
.registration-chat-loader-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--brand-dark),var(--brand),var(--rose)); box-shadow:0 0 12px rgba(141,84,198,.35); transition:width .18s ease-out }
.registration-chat-auth-gate { flex:1; padding:34px 28px; overflow-y:auto; text-align:center }
.registration-chat-auth-icon { display:grid; place-items:center; width:62px; height:62px; margin:0 auto 17px; border-radius:20px; color:#fff; background:linear-gradient(135deg,var(--brand-dark),var(--rose)); box-shadow:0 12px 28px rgba(102,50,148,.25); font-size:1.45rem }
.registration-chat-auth-copy { max-width:480px; margin:0 auto }
.registration-chat-auth-copy small { color:var(--brand); font-size:.68rem; font-weight:800; letter-spacing:.13em }
.registration-chat-auth-copy h3 { margin:6px 0 9px; color:var(--ink); font-size:1.45rem; letter-spacing:-.03em }
.registration-chat-auth-copy p { margin:0; color:var(--muted); line-height:1.55 }
.registration-chat-auth-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:480px; margin:24px auto 0 }
.registration-chat-auth-actions .btn { display:flex; min-height:50px; align-items:center; justify-content:center; gap:8px }
.registration-chat-login { display:grid; gap:13px; max-width:480px; margin:20px auto 0; padding:20px; border:1px solid var(--line); border-radius:17px; background:#fff; box-shadow:0 10px 30px rgba(50,30,55,.07); text-align:left }
.registration-chat-login div { display:grid; gap:6px }
.registration-chat-login label { color:var(--ink); font-size:.8rem; font-weight:700 }
.registration-chat-login input { min-height:47px; padding:11px 13px; border:1px solid var(--line); border-radius:11px; color:var(--ink); background:var(--cream); font:inherit; outline:none }
.registration-chat-login input:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(141,84,198,.12) }
.registration-chat-login .btn { display:flex; min-height:48px; align-items:center; justify-content:center; gap:8px }
.registration-chat-login-error { margin:0; padding:10px 12px; border-radius:9px; color:#8b2929; background:#fff0f0; font-size:.82rem }
.registration-chat-login-response { padding:10px 12px; border:1px solid #d8cfe0; border-radius:9px; background:#f8f5fa; font-size:.8rem }
.registration-chat-login-response summary { color:var(--ink); font-weight:700; cursor:pointer }
.registration-chat-login-response pre { max-height:230px; margin:10px 0 0; padding:10px; overflow:auto; border-radius:8px; color:#312b33; background:#fff; font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; user-select:text }
.registration-chat-messages { flex:1; overflow-y:auto; padding:25px; scroll-behavior:smooth }
.registration-chat-messages.is-loading { display:none; scroll-behavior:auto }
.registration-chat-message-group { display:flex; width:100%; margin-bottom:12px; flex-direction:column; align-items:flex-start }
.registration-chat-message-group.user { align-items:flex-end }
.registration-chat-message { width:fit-content; max-width:min(82%,520px); padding:12px 16px; border-radius:18px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere }
.registration-chat-message.ai { margin-right:auto; border:1px solid var(--line); border-bottom-left-radius:5px; color:var(--ink); background:#fff; box-shadow:0 7px 22px rgba(50,30,55,.06) }
.registration-chat-message.user { margin-left:auto; border-bottom-right-radius:5px; color:#fff; background:linear-gradient(120deg,var(--brand-dark),var(--brand)); box-shadow:0 8px 24px rgba(102,50,148,.2) }
.registration-chat-confirmation { display:flex; align-items:flex-start; gap:10px; width:min(100%,480px); margin:8px 0 0; padding:15px; border-radius:16px; color:#198754; font-size:.84rem; font-weight:700 }
.registration-chat-confirmation.success { border:1px solid #a9ddbf; background:linear-gradient(135deg,#f1fff6,#fff) }
.registration-chat-confirmation i { flex:0 0 auto; margin-top:1px; font-size:1.2rem; line-height:1 }
.registration-chat-confirmation strong { display:block; margin-bottom:10px; color:#116c3a; font-size:.95rem }
.registration-chat-confirmation dl { display:grid; grid-template-columns:max-content 1fr; gap:5px 12px; margin:0; color:var(--ink); font-weight:400 }
.registration-chat-confirmation dt { color:var(--muted); font-weight:600 }
.registration-chat-confirmation dd { margin:0; overflow-wrap:anywhere; font-weight:700; user-select:all }
.registration-chat-confirmation.error { color:#a33a3a }
.registration-chat-confirmation.error i { flex:0 0 auto }
.registration-chat-next-actions { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 0 5px }
.registration-chat-next-actions .btn { display:inline-flex; align-items:center; gap:6px }
.registration-chat-trial-card { position:relative; display:grid; grid-template-columns:auto 1fr; gap:12px 14px; width:min(100%,520px); margin-top:9px; padding:18px; overflow:hidden; border:1px solid rgba(141,84,198,.2); border-radius:20px; background:linear-gradient(145deg,#fff 35%,#fbf5ff 70%,#fff2eb); box-shadow:0 14px 35px rgba(70,37,89,.1) }
.registration-chat-trial-card::after { position:absolute; top:-45px; right:-35px; width:130px; height:130px; border-radius:50%; background:rgba(255,181,158,.17); content:""; pointer-events:none }
.registration-chat-trial-icon { position:relative; z-index:1; display:grid; place-items:center; width:45px; height:45px; border-radius:14px; color:#fff; background:linear-gradient(135deg,var(--brand-dark),var(--rose)); box-shadow:0 8px 20px rgba(102,50,148,.2) }
.registration-chat-trial-copy { position:relative; z-index:1 }
.registration-chat-trial-copy small { display:block; margin-bottom:3px; color:var(--brand); font-size:.67rem; font-weight:800; letter-spacing:.12em }
.registration-chat-trial-copy strong { display:block; color:var(--ink); font-size:1rem }
.registration-chat-trial-copy p { margin:5px 0 0; color:var(--muted); font-size:.82rem; line-height:1.45 }
.registration-chat-trial-copy p b { color:var(--ink); font-weight:800 }
.registration-chat-trial-button { position:relative; z-index:1; grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:8px; min-height:46px; border-radius:13px }
.registration-chat-trial-already-active { position:relative; z-index:1; grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:11px 14px; border:1px solid #a9ddbf; border-radius:13px; color:#116c3a; background:linear-gradient(135deg,#f1fff6,#fff); font-size:.88rem; font-weight:700; text-align:center }
.registration-chat-trial-already-active i { flex:0 0 auto; color:#198754; font-size:1.2rem }
.registration-chat-payment { position:relative; z-index:1; grid-column:1/-1; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#fff }
.registration-chat-stripe-form { display:grid; gap:14px; padding:16px }
.registration-chat-stripe-form > .btn { display:flex; align-items:center; justify-content:center; gap:8px; min-height:46px }
.registration-chat-stripe-form > small { color:var(--muted); text-align:center }
.registration-chat-stripe-error { margin:0; padding:10px 12px; border-radius:9px; color:#8b2929; background:#fff0f0; font-size:.82rem }
.registration-chat-payment-load-error { display:flex; align-items:center; gap:8px; padding:14px; color:#8b2929; background:#fff5f5; font-size:.84rem }
.registration-chat-trial-followup { max-width:500px; margin:12px 5px 5px; color:var(--ink); font-size:.9rem; line-height:1.5 }
.registration-chat-stripe-placeholder { display:flex; min-height:150px; padding:24px; flex-direction:column; align-items:center; justify-content:center; color:var(--muted); text-align:center; background:linear-gradient(145deg,#fff,#faf8ff) }
.registration-chat-stripe-placeholder strong { margin-top:10px; color:var(--ink); font-size:.92rem }
.registration-chat-stripe-placeholder small { margin-top:4px; font-size:.78rem }
.registration-chat-stripe-mark { padding:5px 10px 6px; border-radius:7px; color:#fff; background:#635bff; font-size:.85rem; font-weight:800; font-style:italic; letter-spacing:-.04em }
.registration-chat-status { display:flex; align-items:center; gap:9px; padding:0 25px 15px; color:var(--muted); font-size:.82rem }
.registration-chat-error { display:grid; gap:9px; margin:0 0 16px; padding:14px; border:1px solid #e4a4a4; border-radius:14px; color:#722; background:#fff5f5 }
.registration-chat-error span { font-size:.82rem }
.registration-chat-error pre { max-height:240px; margin:0; padding:10px; overflow:auto; border-radius:8px; color:#312b33; background:#f5f2f6; font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; user-select:text }
.registration-chat-error .btn { width:max-content }
.registration-chat-typing { display:flex; gap:3px; padding:9px 11px; border-radius:14px; background:var(--lavender) }
.registration-chat-typing i { width:6px; height:6px; border-radius:50%; background:var(--brand); animation:registration-chat-bounce 1s infinite ease-in-out }
.registration-chat-typing i:nth-child(2) { animation-delay:.14s }.registration-chat-typing i:nth-child(3) { animation-delay:.28s }
@keyframes registration-chat-bounce { 0%,60%,100% { transform:translateY(0); opacity:.45 } 30% { transform:translateY(-4px); opacity:1 } }
.registration-chat-modal .modal-footer { display:block; padding:16px 20px 20px; border-top:1px solid var(--line); background:#fff }
.registration-chat-debug { margin:0 0 12px; padding:12px; border:1px solid #d8cfe0; border-radius:14px; background:#f8f5fa }
.registration-chat-debug-header { display:flex; align-items:center; justify-content:space-between; gap:12px }
.registration-chat-debug-header button { padding:3px; border:0; color:var(--muted); background:transparent }
.registration-chat-debug p { margin:3px 0 9px; color:var(--muted); font-size:.78rem }
.registration-chat-debug pre { max-height:210px; margin:0; padding:10px; overflow:auto; border-radius:9px; color:#312b33; background:#fff; font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; user-select:text }
.registration-chat-form { display:flex; align-items:flex-end; gap:10px; width:100% }
.registration-chat-form textarea { flex:1; min-height:50px; max-height:calc(4.5em + 28px); overflow-y:hidden; resize:none; padding:13px 15px; border:1px solid var(--line); border-radius:15px; color:var(--ink); background:var(--cream); font:inherit; line-height:1.5; outline:none }
.registration-chat-form textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(141,84,198,.12) }
.registration-chat-form .btn { min-height:50px; display:flex; align-items:center; gap:8px; justify-content:center }
.registration-chat-debug-toggle { width:50px; flex:0 0 50px; padding:0 }
.registration-chat-voice-wrap { position:relative; flex:0 0 50px }
.registration-chat-mic { width:50px; padding:0 }
.registration-chat-mic.is-recording { color:#fff; border-color:#d94b67; background:#d94b67; box-shadow:0 0 0 4px rgba(217,75,103,.14) }
.registration-chat-recorder { position:absolute; right:0; bottom:calc(100% + 12px); z-index:5; width:260px; padding:16px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 16px 45px rgba(45,30,49,.18) }
.registration-chat-recorder:after { content:""; position:absolute; right:17px; bottom:-7px; width:13px; height:13px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; transform:rotate(45deg) }
.registration-chat-recording-status { display:flex; align-items:center; gap:8px; color:var(--ink); font-size:.84rem }
.registration-chat-recording-status time { margin-left:auto; color:var(--muted); font-variant-numeric:tabular-nums }
.registration-chat-recording-dot { width:9px; height:9px; border-radius:50%; background:#d94b67; box-shadow:0 0 0 4px rgba(217,75,103,.12); animation:registration-recording-pulse 1.2s ease-in-out infinite }
.registration-chat-recorder p { margin:10px 0 14px; color:var(--muted); font-size:.75rem; line-height:1.4 }
.registration-chat-recorder-actions { display:flex; gap:8px }
.registration-chat-recorder-actions .btn { min-height:36px; flex:1; padding:6px 12px }
.registration-chat-audio-status { display:flex; align-items:center; gap:10px; text-align:left }
.registration-chat-audio-status-icon { width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center; border-radius:50%; color:var(--brand-dark); background:rgba(255,255,255,.72); font-size:1.05rem }
@keyframes registration-recording-pulse { 50% { opacity:.45; transform:scale(.82) } }
.registration-chat-form :disabled { cursor:not-allowed; opacity:.62 }

@media(max-width:991px) {
	.footer-compact {
		grid-template-columns: 1fr 2fr
	}

	.footer-links-compact {
		grid-column: 1/-1;
		justify-content: flex-start
	}

	.journey .steps {
		gap: 14px
	}
}

@media(max-width:767px) {
	.registration-chat-auth-actions { grid-template-columns:1fr }
	.announcement {
		flex-wrap: wrap;
		column-gap: 7px
	}

	.announcement .announcement-detail {
		display: inline
	}

	.navbar-brand .brand-logo {
		width: 36px
	}

	.brand-name {
		font-size: 1.15rem
	}

	.footer-compact {
		grid-template-columns: 1fr;
		gap: 20px
	}

	.footer-links-compact {
		grid-column: auto;
		justify-content: flex-start
	}

	.footer-compact address {
		font-size: .76rem
	}

	.journey .steps article {
		padding: 26px
	}

	.tips li {
		padding: 17px
	}

	.registration-chat-entry {
		margin-left: 0
	}

	.registration-chat-dialog { margin:0; min-height:100%; max-width:none }
	.registration-chat-modal { height:100dvh; border-radius:0 }
	.registration-chat-modal .modal-header { padding:14px 54px 14px 14px; flex-wrap:wrap }
	.registration-chat-heading { flex:1 1 auto }
	.registration-chat-new { width:100%; order:2; margin:0 }
	.registration-chat-messages { padding:18px 15px }
	.registration-chat-message { max-width:88%; font-size:.94rem }
	.registration-chat-trial-card { padding:15px }
	.registration-chat-status { padding:0 15px 12px }
	.registration-chat-modal .modal-footer { padding:12px }
	.registration-chat-form .btn { width:50px; padding:0 }
	.registration-chat-form .btn span { display:none }
	.registration-chat-recorder { right:-50px }
	.registration-chat-recorder-actions .btn { width:auto; padding:6px 12px }
}

/* Final responsive layout overrides */
.feature-card .icon-box { float:left; margin:0 16px 8px 0 }
.steps .step-icon,.journey .step-icon { float:left; width:52px; height:52px; margin:20px 15px 8px 0 }
.steps h3 { padding-top:22px; min-height:58px }
@media(max-width:767px) {
  .navbar { padding:4px 0 }
  .hero { min-height:0; padding:22px 0 50px }
  .section,.section-sm { padding:65px 0 }
}