/* ── Brand panel ── */

.brand-panel
{
	background:#241c18;
	position:relative;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	padding:44px 48px
}

.brand-panel::before
{
	content:'';
	position:absolute;
	inset:0;
	background:radial-gradient(ellipse at 15% 80%,rgba(201,151,42,.14) 0%,transparent 55%),radial-gradient(ellipse at 85% 15%,rgba(107,158,108,.08) 0%,transparent 50%);
	pointer-events:none
}

.paw-float
{
	position:absolute;
	opacity:.055;
	pointer-events:none
}

.paw-float svg
{
	fill:#F5F0E8
}

.brand-logo
{
	position:relative;
	z-index:2;
	display:flex;
	align-items:center;
	gap:11px
}

.logo-badge
{
	width:40px;
	height:40px;
	background:var(--paw-coral);
	border-radius:12px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0
}

.logo-badge svg
{
	width:22px;
	height:22px;
	fill:#fff
}

.logo-name
{
	font-family:'Fraunces',serif;
	font-size:19px;
	font-weight:600;
	color:#F5F0E8;
	letter-spacing:-.2px
}

.logo-sub
{
	font-size:10px;
	font-weight:300;
	color:rgba(245,240,232,.4);
	letter-spacing:.5px;
	margin-top:1px
}

.illus-wrap
{
	position:relative;
	z-index:2;
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center
}

/* Cat */

.cat
{
	position:relative;
	width:210px;
	height:230px
}

.cat .body
{
	position:absolute;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
	width:108px;
	height:96px;
	background:#C8A882;
	border-radius:54px 54px 40px 40px
}

.cat .belly
{
	position:absolute;
	bottom:8px;
	left:50%;
	transform:translateX(-50%);
	width:62px;
	height:58px;
	background:#E8CDA8;
	border-radius:31px 31px 26px 26px
}

.cat .paw
{
	position:absolute;
	bottom:0;
	width:30px;
	height:20px;
	background:#C8A882;
	border-radius:15px 15px 10px 10px
}

.cat .paw.l
{
	left:28px
}

.cat .paw.r
{
	right:28px;
	z-index:2;
}

.cat .paw .t
{
	position:absolute;
	bottom:-2px;
	width:8px;
	height:9px;
	background:#B09060;
	border-radius:4px
}

.cat .paw .t:nth-child(1)
{
	left:1px
}

.cat .paw .t:nth-child(2)
{
	left:11px
}

.cat .paw .t:nth-child(3)
{
	left:21px
}

.cat .tail
{
	position:absolute;
	bottom:6px;
	right:2px;
	width:58px;
	height:16px;
	border:9px solid #A08050;
	border-radius:0 0 28px 0;
	border-top:none;
	border-left:none
}

.cat .tail-tip
{
	position:absolute;
	bottom:6px;
	right:2px;
	width:18px;
	height:18px;
	background:#A08050;
	border-radius:50%
}

.cat .head
{
	position:absolute;
	bottom:88px;
	left:50%;
	transform:translateX(-50%);
	width:84px;
	height:78px;
	background:#C8A882;
	border-radius:50% 50% 46% 46%;
	animation:idle 4s ease-in-out infinite;
	transform-origin:bottom center
}

@keyframes idle
{
	0%,100%
	{
		transform:translateX(-50%) rotate(-2deg)
	}

	50%
	{
		transform:translateX(-50%) rotate(2deg)
	}
}

.cat.alert .head
{
	animation:perk .35s ease forwards
}

@keyframes perk
{
	to
	{
		transform:translateX(-50%) rotate(0) translateY(-4px)
	}
}

.cat .ear
{
	position:absolute;
	top:-17px;
	width:0;
	height:0;
	border-left:13px solid transparent;
	border-right:13px solid transparent;
	border-bottom:24px solid #C8A882
}

.cat .ear.l
{
	left:7px;
	transform:rotate(-10deg)
}

.cat .ear.r
{
	right:7px;
	transform:rotate(10deg)
}

.cat .ear::after
{
	content:'';
	position:absolute;
	top:5px;
	left:-6px;
	width:0;
	height:0;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	border-bottom:12px solid #E8B89A
}

.cat .eye
{
	position:absolute;
	top:25px;
	width:17px;
	height:17px;
	background:#5A9080;
	border-radius:50%
}

.cat .eye.l
{
	left:13px
}

.cat .eye.r
{
	right:13px
}

.cat .eye::before
{
	content:'';
	position:absolute;
	width:6px;
	height:13px;
	background:#1a1a1a;
	border-radius:3px;
	top:2px;
	left:5.5px
}

.cat .eye::after
{
	content:'';
	position:absolute;
	width:5px;
	height:5px;
	background:#fff;
	border-radius:50%;
	top:3px;
	left:3px;
	z-index:1
}

.cat.alert .eye
{
	height:21px
}

.cat.alert .eye::before
{
	width:7px;
	height:17px
}

.cat .nose
{
	position:absolute;
	bottom:21px;
	left:50%;
	transform:translateX(-50%);
	width:12px;
	height:9px;
	background:#E8ADAD;
	border-radius:50% 50% 40% 40%
}

.cat .mouth
{
	position:absolute;
	bottom:11px;
	left:50%;
	transform:translateX(-50%);
	width:22px;
	height:7px;
	border:1.5px solid rgba(120,80,40,.25);
	border-top:none;
	border-radius:0 0 11px 11px
}

.cat .wh
{
	position:absolute;
	height:1.5px;
	background:rgba(200,168,130,.55);
	border-radius:1px
}

.cat .wh1
{
	width:30px;
	bottom:27px;
	left:-26px;
	transform:rotate(-5deg)
}

.cat .wh2
{
	width:30px;
	bottom:21px;
	left:-26px;
	transform:rotate(6deg)
}

.cat .wh3
{
	width:30px;
	bottom:27px;
	right:-26px;
	transform:rotate(5deg)
}

.cat .wh4
{
	width:30px;
	bottom:21px;
	right:-26px;
	transform:rotate(-6deg)
}

.hrt
{
	position:absolute;
	font-family:serif;
	animation:hrt-up 2.6s ease-in-out infinite;
	opacity:0;
	pointer-events:none
}

.hrt::before
{
	content:'♥';
	color:var(--paw-coral)
}

.h1
{
	font-size:18px;
	top:18px;
	left:18px;
	animation-delay:0s
}

.h2
{
	font-size:13px;
	top:8px;
	right:22px;
	animation-delay:.8s
}

.h3
{
	font-size:10px;
	top:30px;
	right:6px;
	animation-delay:1.5s
}

@keyframes hrt-up
{
	0%
	{
		transform:translateY(0) scale(.8);
		opacity:0
	}

	15%
	{
		opacity:1
	}

	70%
	{
		transform:translateY(-26px) scale(1);
		opacity:.7
	}

	100%
	{
		transform:translateY(-44px) scale(.9);
		opacity:0
	}
}

/* ── Dog (login panel) ── */

.dog
{
	position:relative;
	width:210px;
	height:230px
}

/* Body */

.dog .body
{
	position:absolute;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
	width:112px;
	height:100px;
	background:#D4956A;
	border-radius:56px 56px 42px 42px
}

.dog .belly
{
	position:absolute;
	bottom:10px;
	left:50%;
	transform:translateX(-50%);
	width:64px;
	height:60px;
	background:#EAC090;
	border-radius:32px 32px 28px 28px
}

/* Front paws */

.dog .paw
{
	position:absolute;
	bottom:0;
	width:32px;
	height:22px;
	background:#D4956A;
	border-radius:16px 16px 11px 11px
}

.dog .paw.l
{
	left:26px
}

.dog .paw.r
{
	right:26px;
	z-index:2;
}

.dog .paw .t
{
	position:absolute;
	bottom:-2px;
	width:9px;
	height:10px;
	background:#B87A50;
	border-radius:4px
}

.dog .paw .t:nth-child(1)
{
	left:1px
}

.dog .paw .t:nth-child(2)
{
	left:12px
}

.dog .paw .t:nth-child(3)
{
	left:23px
}

/* Tail — wags side to side */

.dog .tail
{
	position:absolute;
	bottom:18px;
	right:-4px;
	width:46px;
	height:14px;
	background:#B87A50;
	border-radius:7px;
	transform-origin:left center;
	animation:dog-wag .55s ease-in-out infinite alternate
}

.dog .tail-tip
{
	position:absolute;
	bottom:16px;
	right:-10px;
	width:20px;
	height:20px;
	background:#C88A60;
	border-radius:50%
}

@keyframes dog-wag
{
	from
	{
		transform:rotate(-22deg)
	}

	to
	{
		transform:rotate(22deg)
	}
}

/* Head — slow side tilt, different cadence from cat */

.dog .head
{
	position:absolute;
	bottom:90px;
	left:50%;
	transform:translateX(-50%);
	width:88px;
	height:82px;
	background:#D4956A;
	border-radius:50% 50% 44% 44%;
	animation:dog-idle 3.2s ease-in-out infinite;
	transform-origin:bottom center
}

@keyframes dog-idle
{
	0%,100%
	{
		transform:translateX(-50%) rotate(-12deg)
	}

	50%
	{
		transform:translateX(-50%) rotate(12deg)
	}
}

.dog.alert .head
{
	animation:dog-perk .3s ease forwards
}

@keyframes dog-perk
{
	to
	{
		transform:translateX(-50%) rotate(0deg) translateY(-5px)
	}
}

/* Floppy ears — hang down from sides of head */

.dog .ear
{
	position:absolute;
	width:28px;
	height:44px;
	background:#B87A50;
	border-radius:14px 14px 18px 18px;
	top:4px
}

.dog .ear.l
{
	left:-14px;
	transform:rotate(-8deg)
}

.dog .ear.r
{
	right:-14px;
	transform:rotate(8deg)
}

/* Inner ear */

.dog .ear::after
{
	content:'';
	position:absolute;
	width:14px;
	height:28px;
	background:#CA9070;
	border-radius:7px 7px 10px 10px;
	top:6px;
	left:7px
}

/* Eyes — round and warm brown */

.dog .eye
{
	position:absolute;
	top:26px;
	width:16px;
	height:16px;
	background:#5A3A20;
	border-radius:50%
}

.dog .eye.l
{
	left:14px
}

.dog .eye.r
{
	right:14px
}

/* Iris shine */

.dog .eye::after
{
	content:'';
	position:absolute;
	width:5px;
	height:5px;
	background:#fff;
	border-radius:50%;
	top:2px;
	left:2px
}

/* Alert: eyes open wider */

.dog.alert .eye
{
	height:19px;
	width:19px
}

.dog.alert .eye.l
{
	left:12px
}

.dog.alert .eye.r
{
	right:12px
}

/* Nose — wider and rounder than cat */

.dog .nose
{
	position:absolute;
	bottom:22px;
	left:50%;
	transform:translateX(-50%);
	width:22px;
	height:15px;
	background:#2C1A0E;
	border-radius:50% 50% 44% 44%
}

/* Nose highlight */

.dog .nose::after
{
	content:'';
	position:absolute;
	width:6px;
	height:5px;
	background:rgba(255,255,255,.18);
	border-radius:50%;
	top:3px;
	left:4px
}

/* Mouth */

.dog .mouth
{
	position:absolute;
	bottom:11px;
	left:50%;
	transform:translateX(-50%);
	width:26px;
	height:9px;
	border:1.5px solid rgba(90,50,20,.2);
	border-top:none;
	border-radius:0 0 13px 13px
}

/* Eyebrow dots — gives the "worried/eager" dog expression */

.dog .brow
{
	position:absolute;
	width:10px;
	height:4px;
	background:#A06040;
	border-radius:2px;
	top:18px;
	opacity:.5
}

.dog .brow.l
{
	left:15px;
	transform:rotate(-12deg)
}

.dog .brow.r
{
	right:15px;
	transform:rotate(12deg)
}

/* Floating stars on login (different from signup hearts) */

.str
{
	position:absolute;
	font-family:serif;
	animation:str-up 2.8s ease-in-out infinite;
	opacity:0;
	pointer-events:none;
	color:var(--paw-gold);
	font-size:14px
}

.str::before
{
	content:'★'
}

.s1
{
	top:20px;
	left:14px;
	animation-delay:0s;
	font-size:16px
}

.s2
{
	top:8px;
	right:18px;
	animation-delay:.9s;
	font-size:11px
}

.s3
{
	top:34px;
	right:4px;
	animation-delay:1.7s;
	font-size:9px;
	opacity:0
}

@keyframes str-up
{
	0%
	{
		transform:translateY(0) scale(.7);
		opacity:0
	}

	15%
	{
		opacity:1
	}

	70%
	{
		transform:translateY(-24px) scale(1);
		opacity:.6
	}

	100%
	{
		transform:translateY(-42px) scale(.8);
		opacity:0
	}
}

/* Show/hide animals based on active tab */

.illus-wrap .cat
{
	display:block
}

.illus-wrap .dog
{
	display:none
}

.illus-wrap.show-dog .cat
{
	display:none
}

.illus-wrap.show-dog .dog
{
	display:block
}

/* Brand copy */

.brand-copy
{
	position:relative;
	z-index:2
}

.brand-hl
{
	font-family:'Fraunces',serif;
	font-size:27px;
	font-weight:600;
	color:#F5F0E8;
	line-height:1.3;
	letter-spacing:-.4px;
	margin-bottom:10px
}

.brand-hl em
{
	font-style:italic;
	color:var(--paw-gold)
}

.brand-tl
{
	font-size:13px;
	font-weight:300;
	color:rgba(245,240,232,.4);
	line-height:1.6;
	margin-bottom:20px
}

.social-row
{
	display:flex;
	align-items:center;
	gap:10px
}

.av-stack
{
	display:flex
}

.av
{
	width:28px;
	height:28px;
	border-radius:50%;
	border:2px solid #241c18;
	margin-left:-7px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:11px;
	font-weight:500;
	color:#fff
}

.av:first-child
{
	margin-left:0
}

.av1
{
	background:var(--paw-forest)
}

.av2
{
	background:var(--paw-coral)
}

.av3
{
	background:var(--paw-bark)
}

.av4
{
	background:#5A8090
}

.social-txt
{
	font-size:12px;
	font-weight:300;
	color:rgba(245,240,232,.45)
}

.social-txt strong
{
	color:rgba(245,240,232,.75);
	font-weight:500
}

/* ── Form panel ── */

.form-outline .form-control
{
	padding:1em 1em;
}

.form-outline .form-control~.form-label
{
	padding-top:1rem;
}

.form-outline .form-control.active~.form-label,
.form-outline .form-control:focus~.form-label
{
	padding-top:.5rem;
}

.or-separator
{
}

.or-separator:before,
.or-separator:after
{
	content:"";
	display:block;
	width:45%;
	height:3px;
	background:#798790;
	top:50%;
	position:absolute;
}

.or-separator:before
{
	left:0;
}

.or-separator:after
{
	right:0;
}

#facebook-signin
{
	background-color:#337ab7;
	border-color:#2e6da4;
}

#google-signin
{
	background-color:#d44936;
	border-color:#d44936;
}

.has-error .form-control.required
{
	border-color:#f93154;
}

.has-error .form-label
{
	color:#f93154 !important;
}