/* ==========================================================================
   Signup / Account page — page-account.php
   ========================================================================== */

:root {
	--lps-teal:       #008585;
	--lps-teal-dark:  #2e8070;
	--lps-teal-light: #eaf5f3;
	--lps-purple:     #3b3177;
	--lps-error:      #d0021b;
	--lps-border:     #d9d9d9;
	--lps-bg:         #f4f8f7;
	--lps-white:      #fff;
	--lps-text:       #474747;
	--lps-muted:      #666;
	--lps-radius:     6px;
	--lps-font:       'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
	--lps-max:        1160px;
	--lps-shadow:     0 2px 16px rgba(0,0,0,.08);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--lps-font); color: var(--lps-text); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.lps-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 22px;
	border-radius: 16px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background .18s, color .18s, border-color .18s;
	white-space: nowrap;
	font-family: var(--lps-font);
}

.lps-btn--green {
	background: var(--lps-teal);
	color: var(--lps-white);
}
.lps-btn--green:hover,
.lps-btn--active { background: var(--lps-teal-dark); }

.lps-btn--primary {
	background: var(--lps-teal);
	color: var(--lps-white);
	border-color: var(--lps-teal);
}
.lps-btn--primary:hover { background: var(--lps-teal-dark); border-color: var(--lps-teal-dark); }
.lps-btn--primary:disabled { opacity: .6; cursor: not-allowed; }

.lps-btn--white {
	background: var(--lps-white);
	color: var(--lps-teal);
}
.lps-btn--white:hover { background: #f0faf8; }

.lps-btn--full { width: 100%; }
.lps-btn--lg   { padding: 13px 36px; font-size: 15px; }

/* --------------------------------------------------------------------------
   NAV
   -------------------------------------------------------------------------- */

.lps-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--lps-white);
	border-bottom: 1px solid var(--lps-border);
}

.lps-nav__inner {
	max-width: var(--lps-max);
	margin: 0 auto;
	padding: 0 24px;
	height: 60px;
	display: flex;
	align-items: center;
	gap: 28px;
}

.lps-nav__logo {
	font-size: 18px;
	font-weight: 400;
	color: var(--lps-text);
	text-decoration: none;
	letter-spacing: -.2px;
	flex-shrink: 0;
}
.lps-nav__logo strong { color: var(--lps-teal); font-weight: 700; }

.lps-nav__links {
	display: flex;
	gap: 22px;
	flex: 1;
}
.lps-nav__links a {
	font-size: 14px;
	color: var(--lps-muted);
	text-decoration: none;
	font-weight: 500;
}
.lps-nav__links a:hover { color: var(--lps-teal); }

.lps-nav__cta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
}

.lps-nav__login {
	font-size: 14px;
	font-weight: 500;
	color: var(--lps-muted);
	text-decoration: none;
}
.lps-nav__login:hover { color: var(--lps-teal); }

.lps-nav__search-icon {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--lps-muted);
	display: flex;
	align-items: center;
	padding: 4px;
}
.lps-nav__search-icon:hover { color: var(--lps-teal); }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.lps-hero {
	background: var(--lps-bg);
	padding: 72px 24px 80px;
}

.lps-hero__inner {
	max-width: var(--lps-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 550px;
	gap: 30px;
	align-items: center;
}

.lps-hero__headline {
	font-size: 46px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--lps-text);
	margin-bottom: 18px;
}
.lps-hero__headline span { color: var(--lps-teal); }

.lps-hero__sub {
	font-size: 18px;
	color: var(--lps-text);
}

/* --------------------------------------------------------------------------
   Signup card
   -------------------------------------------------------------------------- */

.lps-card {
	background: var(--lps-white);
	border-radius: 10px;
	box-shadow: var(--lps-shadow);
	padding: 32px;
}

.lps-card__title {
	font-size: 24px;
	font-weight: 600;
	color: var(--lps-text);
	margin-bottom: 10px;
}

.lps-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 0;
}

.lps-field {
	display: flex;
	flex-direction: column;
	margin-bottom: 16px;
}

/* .lps-field is just a flow wrapper (holds the box + its error message below);
   .lps-field__box is the visual gray/rounded box (matches the wizard's
   .lpw-field), kept separate so an error message below it doesn't inherit the
   box's background and get clipped by its overflow:hidden. */
.lps-field__box {
	position: relative;
	min-height: 56px;
	border-radius: 12px 12px 0 0;
	overflow: hidden;
	background: #F9F8F8;
	transition: background .15s;
}

.lps-field__box:focus-within { background: #efefef; }

.lps-field__box input[type="text"],
.lps-field__box input[type="email"],
.lps-field__box input[type="password"],
.lps-field__box input[type="tel"] {
	width: 100%;
	min-height: 56px;
	padding: 24px 19px 8px;
	font-size: 16px;
	line-height: 1.2;
	font-family: var(--lps-font);
	color: var(--lps-text);
	border: none;
	border-bottom: 1.5px solid var(--lps-border);
	border-radius: 0;
	background: transparent;
	outline: none;
	transition: border-color .15s;
	box-sizing: border-box;
	display: block;
}
.lps-field__box input:focus { border-bottom-color: var(--lps-teal); }
.lps-field__box input.is-invalid { border-bottom-color: var(--lps-error); }

.lps-field__box label {
	position: absolute;
	left: 19px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
	font-weight: 400;
	color: var(--lps-muted);
	pointer-events: none;
	line-height: 1;
	transition: top .15s, transform .15s, font-size .15s, color .15s;
}

/* :-webkit-autofill is listed alongside the other two because Chrome withholds
   an autofilled value from :placeholder-shown until the user interacts with the
   page — so on first paint the label sat unfloated directly on top of the
   visible autofilled text. */
.lps-field__box input:focus ~ label,
.lps-field__box input:not(:placeholder-shown) ~ label,
.lps-field__box input:-webkit-autofill ~ label {
	top: 12px;
	transform: none;
	font-size: 11px;
	font-weight: 500;
	color: var(--lps-muted);
}

/* Chrome paints autofilled inputs with its own lavender background, which
   background-color cannot override — a large inset shadow is the only way to
   cover it. -webkit-text-fill-color is likewise the only way to set the text
   colour, since `color` is overridden too. */
.lps-field__box input:-webkit-autofill,
.lps-field__box input:-webkit-autofill:hover {
	-webkit-box-shadow: 0 0 0 1000px #F9F8F8 inset;
	box-shadow: 0 0 0 1000px #F9F8F8 inset;
	-webkit-text-fill-color: var(--lps-text, #333);
}

/* Matches .lps-field__box:focus-within's own darker fill. */
.lps-field__box input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px #efefef inset;
	box-shadow: 0 0 0 1000px #efefef inset;
}

/* Focus specifically (not just filled) gets the teal treatment, to match the
   underline turning teal on input:focus above. */
.lps-field__box input:focus ~ label { color: var(--lps-teal); }

/* Password */
.lps-field__box--password input { padding-right: 44px; }

.lp-toggle-password {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--lps-muted);
	display: flex;
	align-items: center;
	z-index: 1;
}
.lp-toggle-password:hover { color: var(--lps-teal); }

/* Hint */
.lps-hint {
	font-size: 11px;
	color: var(--lps-muted);
	margin: 4px 0 12px;
}

/* Checkbox */
/* Stays in .lps-field's column direction so the error message lands under the
   checkbox row instead of beside it — the label is itself a flex row, so the box
   and its text still sit inline without forcing row here. */
.lps-field--checkbox { align-items: flex-start; }
.lps-field--checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	color: var(--lps-text);
	cursor: pointer;
}
.lps-field--checkbox input[type="checkbox"] {
	margin-top: 2px;
	width: 15px;
	height: 15px;
	accent-color: var(--lps-teal);
	flex-shrink: 0;
}
.lps-field--checkbox a { color: var(--lps-teal); text-decoration: none; }
.lps-field--checkbox a:hover { text-decoration: underline; }

/* Errors */
.lp-field-error {
	font-size: 12px;
	color: var(--lps-error);
	margin-top: 4px;
	display: block;
}

/* Collapses when empty rather than reserving a blank line under every field —
   with min-height the form kept a permanent gap between each row. */
.lp-field-error:empty { display: none; }

/* Invalid state: red underline + red floating label, mirroring how focus turns
   both teal. Set on the input by account.js. */
.lps-field__box input.is-invalid ~ label { color: var(--lps-error); }
.lps-field--checkbox input.is-invalid { outline: 2px solid var(--lps-error); outline-offset: 2px; }

/* General summary error at the foot of the form */
.lp-field-error--general {
	margin: 0 0 12px;
	font-size: 13px;
	background: #fdf0f0;
	border: 1px solid #f5c6c6;
	border-radius: var(--lps-radius);
	padding: 10px 14px;
}

.lp-field-error--general:empty { display: none; }

/* --------------------------------------------------------------------------
   Shared section wrapper
   -------------------------------------------------------------------------- */

.lps-section { padding: 80px 24px; }

.lps-section__inner {
	max-width: var(--lps-max);
	margin: 0 auto;
}

.lps-section__title {
	font-size: 38px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 10px;
	color: var(--lps-text);
}

.lps-section__sub {
	text-align: center;
	color: var(--lps-text);
	font-size: 16px;
	max-width: 540px;
	margin: 0 auto 44px;
}

/* --------------------------------------------------------------------------
   PRICING
   -------------------------------------------------------------------------- */

.lps-pricing { background: var(--lps-white); text-align: center; }

/* Plan cards — deliberately identical to the payment step's (.lp-plan-card in
   wizard.css). That stylesheet isn't loaded here, so the rules are duplicated
   rather than shared; keep the two in step if either changes.

   14px gap × two 370px cards reproduces the payment step's own 754px two-column
   grid exactly. */
.lps-pricing__grid {
	display: flex;
	justify-content: center;
	gap: 14px;
	/* Clears the "Recommended" flag, which is pulled above the card's top edge. */
	margin: 26px 0 32px;
}

.lps-pricing__card {
	position: relative;
	width: 370px;
	/* min-, not fixed: guarantees the stated height without clipping if a font
	   falls back and the content runs taller. */
	min-height: 190px;
	/* The payment card's exact fill. Not --lps-bg (#f4f8f7): that's the hero's
	   tint, a shade off, and changing it would move the hero too. */
	background: #f2f9f9;
	/* Transparent rather than absent so the featured card's teal border doesn't
	   change its size relative to the other. */
	border: 1.5px solid transparent;
	border-radius: 12px;
	text-align: left;
}

.lps-pricing__card--featured { border-color: var(--lps-teal); }

/* Tab straddling the card's top-left edge, pulled up by its own height. */
.lps-pricing__flag {
	position: absolute;
	top: 0;
	left: 16px;
	transform: translateY(-100%);
	background: var(--lps-teal);
	color: var(--lps-white);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 12px 7px;
	border-radius: 8px 8px 0 0;
}

.lps-pricing__inner { padding: 18px; }

.lps-pricing__top {
	display: flex;
	/* align-items: center; */
	height: 50px;
	gap: 10px;
	margin-bottom: 10px;
}

/* Pushes the discount to the card's top-right. */
.lps-pricing__label {
	margin-right: auto;
	font-size: 16px;
	font-weight: 600;
	color: var(--lps-text);
}

.lps-pricing__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 4px;
	margin-top: 2rem;
}

.lps-pricing__amount {
	font-size: 30px;
	font-weight: 700;
	color: var(--lps-text);
	line-height: 1.2;
}

.lps-pricing__period { font-size: 18px; color: var(--lps-muted); }

/* Two stacked lines — the discount and its qualifier. */
.lps-pricing__discount {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: #fdecec;
	color: #e74c3c;
	padding: 8px 12px;
	border-radius: 8px;
	line-height: 1.25;
	white-space: nowrap;
}

.lps-pricing__discount strong { font-size: 17px; font-weight: 700; }
.lps-pricing__discount span   { font-size: 12px; font-weight: 600; }

.lps-pricing__note { font-size: 14px; color: var(--lps-muted); }

/* --------------------------------------------------------------------------
   HOW IT WORKS
   -------------------------------------------------------------------------- */

.lps-how { background: var(--lps-bg); }

.lps-how__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.lps-how__card {
	text-align: left;
	padding: 28px 20px;
	border-radius: 16px;
	background: var(--lps-white);
}

/* margin-left/right were `auto`, which centred the badge in the card even
   though everything else in it is left-aligned. */
.lps-how__icon {
	width: 60px;
	height: 60px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #CCE7E7;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 16px;
	color: var(--lps-text);
}

/* Sized here rather than relying on each <svg>'s own width/height attributes,
   so all three render identically and can't drift if an icon is swapped for one
   authored at a different size. display:block drops the inline baseline gap
   that would otherwise offset it a little within the circle. */
.lps-how__icon svg {
	display: block;
	width: 28px;
	height: 28px;
}

.lps-how__card h3 {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 10px;
	color: var(--lps-text);
}

.lps-how__card p {
	font-size: 13px;
	color: var(--lps-muted);
	line-height: 1.65;
}

/* --------------------------------------------------------------------------
   REACH
   -------------------------------------------------------------------------- */

/* clip, not hidden: the laptop below is sized to run past the container's right
   edge, and this stops that becoming a horizontal scrollbar. `hidden` would do
   the same but also makes this a scroll container, which breaks position:sticky
   for anything inside it — `clip` just clips. */
.lps-reach {
	background: var(--lps-white);
	overflow-x: clip;
}

.lps-reach__inner {
	display: grid;
	grid-template-columns: 1fr 540px;
	gap: 60px;
	align-items: center;
}

.lps-reach__points { display: flex; flex-direction: column; gap: 28px; }

/* Stacked — icon, heading, copy — with a rule closing each point off, rather
   than the icon sitting inline beside the text. */
.lps-reach__point {
	display: flex;
	max-width: 540px;
	flex-direction: column;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--lps-text);
}

.lps-reach__check {
	display: block;
	color: var(--lps-text);
	flex-shrink: 0;
	margin-bottom: 14px;
}

.lps-reach__point strong {
	display: block;
	font-size: 20px;
	font-weight: 600;
	color: var(--lps-text);
	margin-bottom: 8px;
}

.lps-reach__point p {
	font-size: 16px;
	color: var(--lps-text);
	line-height: 1.6;
}

/* Screenshot of a listing on a laptop. Replaced a hand-built CSS mockup that
   overflowed its grid column: it had no intrinsic width, so nothing constrained
   it to the track. */
/* Runs past its grid column and off the right of the screen, rather than
   stopping at the container edge.

   Width = the column, plus the gutter between the container and the viewport
   edge, plus a bleed — so it always reaches the edge and keeps going, at any
   window size. The section above clips whatever lands outside.

   max-width:none is required, not just tidy — it overrides the `img {
   max-width: 100% }` most themes set, which would otherwise clamp this straight
   back to the column and cancel the bleed entirely. */
.lps-reach__image {
	display: block;
	width: calc(100% + (100vw - var(--lps-max)) / 2 + 40px);
	min-width: 100%;
	max-width: none;
	height: auto;
}

/* --------------------------------------------------------------------------
   KEY BENEFITS
   -------------------------------------------------------------------------- */

.lps-benefits { background: var(--lps-bg); }

.lps-benefits__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 3rem;
}

.lps-benefits__card {
	background: var(--lps-white);
	border-radius: 16px;
	padding: 34px 20px;

}

.lps-benefits__icon {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	background: var(--lps-teal-light);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lps-text);
	margin-bottom: 14px;
}

.lps-benefits__card h3 {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 8px;
}

.lps-benefits__card p {
	font-size: 16px;
	color: var(--lps-text);
	line-height: 1.65;
}

/* --------------------------------------------------------------------------
   TRUST BANNER
   -------------------------------------------------------------------------- */

.lps-trust {
	background: white;
	color: var(--lps-text);
	padding: 64px 24px;
	text-align: center;
}

.lps-trust__inner { max-width: 810px; margin: 0 auto; }

.lps-trust h2 {
	font-size: 38px;
	font-weight: 600;
	margin-bottom: 14px;
}

.lps-trust p {
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 6px;
}

.lps-trust__sub {
	margin-bottom: 28px !important;
	margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.lps-footer {
	background: #1a1a2e;
	color: rgba(255,255,255,.75);
	padding: 52px 24px 0;
}

.lps-footer__inner {
	max-width: var(--lps-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 180px 1fr 1fr 1fr 1fr;
	gap: 28px;
	padding-bottom: 44px;
}

.lps-footer__logo {
	font-size: 15px;
	font-weight: 400;
	color: var(--lps-white);
	margin-bottom: 16px;
	letter-spacing: .5px;
}
.lps-footer__logo strong { color: var(--lps-teal); font-weight: 700; }

.lps-footer__social { display: flex; gap: 10px; }
.lps-footer__social a { color: rgba(255,255,255,.6); transition: color .18s; }
.lps-footer__social a:hover { color: var(--lps-teal); }

.lps-footer__col h4 {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--lps-white);
	margin-bottom: 12px;
}

.lps-footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }

.lps-footer__col ul a {
	font-size: 13px;
	color: rgba(255,255,255,.6);
	text-decoration: none;
	transition: color .18s;
}
.lps-footer__col ul a:hover { color: var(--lps-teal); }

.lps-footer__bottom {
	max-width: var(--lps-max);
	margin: 0 auto;
	padding: 16px 0;
	border-top: 1px solid rgba(255,255,255,.08);
	font-size: 12px;
	color: rgba(255,255,255,.4);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.lps-benefits__grid { grid-template-columns: repeat(2, 1fr); }
	/* The laptop shot now stacks under the points instead of being dropped —
	   it's a real screenshot worth showing, unlike the grey CSS mockup this
	   rule was written to hide. */
	.lps-reach__inner   { grid-template-columns: 1fr; gap: 36px; }

	/* Stacked under the points, so it sits inside the container and centres
	   rather than bleeding off the edge — the width calc above is undone here. */
	.lps-reach__image {
		width: 100%;
		min-width: 0;
		max-width: 520px;
		margin: 0 auto;
	}
	.lps-footer__inner  { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 768px) {
	.lps-hero__inner    { grid-template-columns: 1fr; }
	.lps-hero           { padding: 48px 20px 56px; }
	.lps-how__grid      { grid-template-columns: 1fr; }
	.lps-pricing__grid  { flex-direction: column; align-items: center; }

	/* The 370px desktop width would overflow a narrow phone once stacked, so it
	   becomes a cap rather than a fixed size. */
	.lps-pricing__card {
		width: 100%;
		max-width: 370px;
	}
	.lps-benefits__grid { grid-template-columns: 1fr; }
	.lps-footer__inner  { grid-template-columns: 1fr 1fr; }
	.lps-nav__links     { display: none; }
	.lps-row            { grid-template-columns: 1fr; }

	.lps-hero__headline {
		font-size: 30px;
		text-align: center;
	}
	.lps-hero__sub, .lps-card__title {
		text-align: center;
	}
	.lps-card__title {
		font-size: 20px;
	}
	.lps-card {
		padding: 1rem;
	}
	.lps-row {
		gap: 0;
	}
	.lps-section__title, .lps-trust h2{
		font-size: 24px;
		text-align: center;
		line-height: 2rem;
	}
	.lps-section {
		padding: 40px 1rem;
	}
	.lps-btn--lg {
		width: 100%;
	}
	.lps-reach__point {
		align-items: center;
		text-align: center;
	}

}

@media (max-width: 480px) {
	.lps-footer__inner { grid-template-columns: 1fr; }
}