/*
 * Approved homepage v6 (Epic #761) -- the mockup's stylesheet, transcribed.
 *
 * GENERATED by tools/port_mockup.py. Almost every declaration on this page is
 * inline, exactly as the mockup has it; what is left here is the page
 * baseline, the two keyframes, the mockup's own <=900px overrides, and the
 * short block below.
 */

/*
 * The brand face, carried over from style.css, which the gate stops loading on
 * this page. Without these the face would fall back to whatever Helvetica the
 * visitor's machine happens to have.
 */
@font-face {
	font-family: 'Helvetica Neue';
	src: url('../fonts/helveticaneue-light.woff2') format('woff2'),
	     url('../fonts/helveticaneue-light.woff') format('woff');
	font-weight: 400;
	font-display: optional;
}

@font-face {
	font-family: 'Helvetica Neue';
	src: url('../fonts/helveticaneue-medium.woff2') format('woff2'),
	     url('../fonts/helveticaneue-medium.woff') format('woff');
	font-weight: 500;
	font-display: optional;
}

@font-face {
	font-family: 'Helvetica Neue';
	src: url('../fonts/helveticaneue-bold.woff2') format('woff2'),
	     url('../fonts/helveticaneue-bold.woff') format('woff');
	font-weight: 800;
	font-display: optional;
}

/*
 * The mockup prints every FAQ answer; this page keeps them collapsed, so each
 * row needs to say that it opens. The sign is drawn in CSS -- two gradient
 * bars, the upright one collapsing to nothing -- so the generated markup stays
 * exactly as the converter emits it.
 */
.lv6 details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	list-style: none;
}

.lv6 details > summary::-webkit-details-marker {
	display: none;
}

.lv6 details > summary::marker {
	content: '';
}

.lv6 details > summary::after {
	content: '';
	flex: none;
	width: 16px;
	height: 16px;
	background:
		linear-gradient(#5E36CA, #5E36CA) center / 16px 2px no-repeat,
		linear-gradient(#5E36CA, #5E36CA) center / 2px 16px no-repeat;
	transition: background-size .25s ease;
}

.lv6 details[open] > summary::after {
	background-size: 16px 2px, 2px 0;
}

/*
 * The comparison panel carries `data-m="scrollx"` and an inner `min-width`, so
 * the intent is clearly for it to scroll sideways on a phone. It does not:
 * both are grid children, and a grid child defaults to `min-width:auto`, so
 * rather than scrolling they push the card to 600px inside a 390px screen and
 * the mockup's `overflow-x:clip` quietly cuts it off. One declaration makes
 * the author's own intent work.
 */
.lv6 [role="tabpanel"],
.lv6 [data-m~="scrollx"] {
	min-width: 0;
}

/*
 * The rotation pause control -- see tools/port_mockup.py for why it exists.
 *
 * Deliberately quiet: it is an accessibility affordance on an approved
 * design, so it reads as a caption under the strip rather than as a second
 * button competing with the tabs. `[hidden]` is forced here because the
 * attribute loses to any `display` the cascade sets, and this control must
 * stay gone until the script that drives it says otherwise.
 *
 * No `outline` rule anywhere near it: this page ships no focus styles at all,
 * which is how it gets the browser's own ring, and a test fails if that
 * changes.
 */
.lv6 [data-lv6-rotate-wrap] {
	display: flex;
	justify-content: flex-end;
	margin-top: -12px;
}

.lv6 [data-lv6-rotate-wrap][hidden] {
	display: none;
}

.lv6 [data-lv6-rotate] {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	/* 8px vertical keeps the hit area past the 24x24 of WCAG 2.5.8. */
	padding: 8px 4px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: #6B6480;
	cursor: pointer;
}

.lv6 [data-lv6-rotate]:hover {
	color: #170F2E;
}

.lv6 [data-lv6-rotate-glyph] {
	position: relative;
	display: inline-block;
	width: 9px;
	height: 10px;
}

.lv6 [data-lv6-rotate="running"] [data-lv6-rotate-glyph]::before,
.lv6 [data-lv6-rotate="running"] [data-lv6-rotate-glyph]::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 3px;
	background: currentColor;
	border-radius: 1px;
}

.lv6 [data-lv6-rotate="running"] [data-lv6-rotate-glyph]::before {
	left: 0;
}

.lv6 [data-lv6-rotate="running"] [data-lv6-rotate-glyph]::after {
	right: 0;
}

.lv6 [data-lv6-rotate="paused"] [data-lv6-rotate-glyph]::before {
	content: "";
	position: absolute;
	top: 0;
	left: 1px;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent currentColor;
}

/*
 * The site's own button motion, carried over from style.css.
 *
 * Every green button on getlasso.co carries `hover-down`, which drops it 5px
 * and drops its shadow while the pointer is on it -- `.hover-down:hover` in
 * style.css, used by the hero CTA in index.php. The mockup's buttons only
 * cross-fade their background, so without this the one button a reader is
 * most likely to press is the only button on the site that does not move.
 *
 * Three details are deliberate:
 *
 *   `transform`, not `translate`, because the reveal in js/home-v6.js writes
 *   `translate` inline on these same elements. The two properties compose;
 *   the same property would fight, and inline would win.
 *
 *   `transition` only on `:hover`, and `!important`, both copied from
 *   `.btn:hover` in style.css. The important is load-bearing here: it has to
 *   beat the `transition:background .2s ease` the mockup sets inline on every
 *   one of these buttons. Scoping it to `:hover` means the press animates in
 *   and snaps back, exactly as the live button does.
 *
 *   Matched on the signup href rather than a class, because the port keeps
 *   the mockup's markup byte for byte and it has no classes to hook.
 */
.lv6 a[href^="https://app.getlasso.co/signup"]:hover {
	transform: translateY(5px);
	box-shadow: none !important;
	transition: .2s ease !important;
}

/*
 * Readability pass, behind `lasso_home_v6_aa_contrast()` in functions.php.
 *
 * Every colour here is from the published Lasso palette at /branding/:
 *
 *   Primary Purple #5E36CA   Dark Purple #40258A   Light Purple #B09AE5
 *   Secondary Green #22BAA0  Dark Green  #1B8F7B   Glow Green   #00FFD3
 *   Font grey #777777        White #FFFFFF
 *
 * Nothing is mixed, tinted or interpolated. An earlier version derived
 * colours mathematically -- #188371, #736D82, #177868, #EDE9FD -- which met
 * the contrast bar and belonged to no brand at all. Those are gone.
 *
 * What changes:
 *
 *   Closing band paragraph   #DCD3FA -> White              3.84 -> 5.49  AA
 *   "Join 40,000+ creators"  #C9BEF0 -> White              3.16 -> 5.49  AA
 *   Muted small text         #8A839C -> Font grey #777777  3.39 -> 4.19
 *   Footer text              13/14px -> 16px, matching the live footer
 *
 * The footer sizes are not a contrast fix. The live site sets `.footer a` and
 * `.small` to 1rem in style.css; the mockup drew the same footer at 13 and
 * 14px, which reads as small type next to the rest of the site. 16px restores
 * the site's own value.
 *
 * WHAT IS DELIBERATELY NOT CHANGED -- the buttons.
 *
 * The CTA is Secondary Green #22BAA0 with WHITE text, which is 2.44:1 and does
 * not meet AA. It stays that way because it is what getlasso.co ships today:
 * `.btn.green-bg.white` in index.php, where `--green` is #22BAA0 (style.css).
 * The mockup drew the same thing. An earlier version of this block put Dark
 * Purple text on the green to reach 4.65:1 -- brand-legal, measurably better,
 * and not the product's button. Matching the site won.
 *
 * No brand green carries white text at AA (Secondary 2.44, Dark Green 3.99,
 * Glow 1.29), so this cannot be fixed by swapping greens either. It needs a
 * palette or design decision, which is recorded in the QA report rather than
 * taken here.
 *
 * `!important` is not a shortcut: every declaration is inline on the element,
 * transcribed from the mockup, and cannot be overridden any other way.
 *
 * Each value is matched TWICE. js/home-v6.js sets opacity and translate on
 * every `data-m` element for the reveal, and touching one property makes the
 * browser re-serialise the whole attribute -- `color:#8A839C` comes back as
 * `color: rgb(138, 131, 156)`, and `font-size:13px` as `font-size: 13px`.
 * Matching only the authored spelling silently misses every revealed element.
 *
 * Turn it off by returning false from `lasso_home_v6_aa_contrast()`.
 */
.lasso-home-v6-aa .lv6 [style*="color:#8A839C"],
.lasso-home-v6-aa .lv6 [style*="color: rgb(138, 131, 156)"] {
	color: #777777 !important;
}

.lasso-home-v6-aa .lv6 [style*="color:#DCD3FA"],
.lasso-home-v6-aa .lv6 [style*="color: rgb(220, 211, 250)"],
.lasso-home-v6-aa .lv6 [style*="color:#C9BEF0"],
.lasso-home-v6-aa .lv6 [style*="color: rgb(201, 190, 240)"] {
	color: #FFFFFF !important;
}

.lasso-home-v6-aa .lv6 footer[style*="font-size:13px"],
.lasso-home-v6-aa .lv6 footer[style*="font-size: 13px"],
.lasso-home-v6-aa .lv6 footer [style*="font-size:13px"],
.lasso-home-v6-aa .lv6 footer [style*="font-size: 13px"],
.lasso-home-v6-aa .lv6 footer[style*="font-size:14px"],
.lasso-home-v6-aa .lv6 footer[style*="font-size: 14px"],
.lasso-home-v6-aa .lv6 footer [style*="font-size:14px"],
.lasso-home-v6-aa .lv6 footer [style*="font-size: 14px"] {
	font-size: 16px !important;
}

body.lasso-home-v6{margin:0;background:#F7F7FC;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#170F2E;-webkit-font-smoothing:antialiased}
.lv6 a{color:#5E36CA;text-decoration:none}.lv6 a:hover{color:#40258A}
@keyframes lv6-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (max-width:900px){
.lv6 [data-m~="sec"]{padding:72px 20px !important}
.lv6 [data-m~="stack"]{grid-template-columns:minmax(0,1fr) !important;gap:32px !important}
.lv6 [data-m~="dark"]{margin:0 12px !important;padding:56px 20px !important;border-radius:24px !important}
.lv6 [data-m~="hide"]{display:none !important}
.lv6 [data-m~="col"]{flex-direction:column !important;align-items:flex-start !important}
.lv6 [data-m~="wrap"]{flex-wrap:wrap !important}
.lv6 [data-m~="static"]{position:static !important;inset:auto !important;height:auto !important;margin:0 !important;transform:none !important}
.lv6 [data-m~="scrollx"]{overflow-x:auto !important}
.lv6 [data-m~="minw"]{min-width:600px}
.lv6 [data-m~="full"]{width:100% !important;height:auto !important;aspect-ratio:1}
.lv6 [data-m~="pad"]{padding:20px !important}
.lv6 [data-m~="lrow"]{grid-template-columns:44px minmax(0,1fr) auto !important}
.lv6 [data-m~="span1"]{grid-column:auto !important;margin-bottom:8px !important}
.lv6 [data-m~="two"]{grid-template-columns:1fr 1fr !important}
.lv6 [data-m~="q"]{font-size:34px !important}
.lv6 [data-m~="trust"]{padding:0 20px 40px !important;flex-direction:column !important;align-items:flex-start !important;gap:24px !important}
.lv6 [data-m~="nav"]{padding:12px 20px !important}
.lv6 [data-m~="gap16"]{gap:16px !important}
.lv6 h1{font-size:46px !important}
.lv6 h2{font-size:36px !important}
}