/**
* LYRFIGTU site styles.
*
* The Figma comp is a fixed 1920px canvas with absolutely-positioned artwork.
* Sections that carry that artwork (hero, sign-up band) use a container-query
* "stage": a fixed-aspect box whose children are placed in percentages taken
* straight from the comp, with type sized in cqw so everything scales together.
* Below 782px those stages unwind into normal stacked flow.
*/
/* ---------------------------------------------------------------- reset */
/* Core sets border-box per block, but these sections are authored as raw markup
inside core/html blocks and would otherwise default to content-box - which
makes every padded full-width section overflow the viewport by its padding. */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* ---------------------------------------------------------------- tokens */
:root {
--lyr-blue: var(--wp--preset--color--primary, #0F4CDA);
--lyr-slate: var(--wp--preset--color--slate, #425A70);
--lyr-gold: var(--wp--preset--color--gold, #8E7145);
--lyr-sky: var(--wp--preset--color--sky, #8FB3CF);
--lyr-muted: var(--wp--preset--color--muted, #73797E);
--lyr-nav: var(--wp--preset--color--nav, #313133);
--lyr-gutter: clamp(20px, 5vw, 200px);
--lyr-header-h: 150px;
/* Content measures, taken from the 1920px comp.
* min(%, px) reproduces the comp's proportional inset at every width up to
* 1920 and then caps, so line length stays sane on ultrawide displays.
* header 1510/1920 = 78.6%
* content 1262/1920 = 65.7% (ISI, Care Connect)
* signup 1291/1920 = 67.2% (copy column through card edge)
* footer 1302/1920 = 67.8%
*/
--lyr-wide: min(78.6%, 1520px);
--lyr-content: min(65.7%, 1262px);
--lyr-signup-w: min(67.2%, 1291px);
--lyr-footer-w: min(67.8%, 1302px);
}
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ---------------------------------------------------------------- buttons */
.lyr-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 11px 19px;
background: var(--lyr-blue);
color: #fff;
font-size: 16px;
font-weight: 700;
line-height: 18px;
letter-spacing: 0.5px;
text-decoration: none;
transition: background-color 150ms ease;
}
.lyr-button:hover,
.lyr-button:focus-visible {
background: #0A3AAB;
color: #fff;
text-decoration: none;
}
/* ---------------------------------------------------------------- header */
.lyr-header {
position: relative;
z-index: 20;
background: #fff;
border-bottom: 0.75px solid var(--lyr-slate);
}
.lyr-header__inner {
display: flex;
align-items: center;
gap: 24px;
width: var(--lyr-wide);
min-height: var(--lyr-header-h);
margin: 0 auto;
padding: 12px 0;
}
.lyr-logo {
flex: 0 0 auto;
line-height: 0;
}
.lyr-logo img {
width: clamp(120px, 10vw, 198px);
height: auto;
}
.lyr-header__panel {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: flex-end;
gap: clamp(24px, 4vw, 64px);
}
.lyr-contact {
text-align: center;
}
.lyr-eyebrow {
margin: 0 0 6px;
padding-bottom: 6px;
border-bottom: 1px solid var(--lyr-gold);
color: var(--lyr-gold);
font-size: 16px;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
}
.lyr-phone {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0;
font-size: 14px;
font-weight: 600;
line-height: 23px;
}
.lyr-phone a {
color: var(--lyr-nav);
text-decoration: none;
}
.lyr-phone__icon {
position: relative;
display: inline-block;
flex: 0 0 auto;
width: 18px;
height: 18px;
}
/* Handset glyph sits on the gold disc; offsets are from the comp (18px disc). */
.lyr-phone__ring {
display: block;
width: 18px;
height: 18px;
}
.lyr-phone__handset {
position: absolute;
left: 4.86px;
top: 3.2px;
width: 8.88px;
height: 10.88px;
}
.lyr-nav {
display: flex;
align-items: center;
gap: clamp(24px, 4vw, 76px);
}
.lyr-nav a {
color: var(--lyr-nav);
font-size: 14px;
font-weight: 600;
line-height: 23px;
text-decoration: none;
white-space: nowrap;
}
.lyr-nav a:hover,
.lyr-nav a:focus-visible {
color: var(--lyr-blue);
text-decoration: underline;
}
/* Mobile toggle - hidden until the panel collapses. */
.lyr-nav-toggle {
display: none;
position: relative;
width: 44px;
height: 44px;
margin-left: auto;
padding: 0;
background: none;
border: 0;
cursor: pointer;
}
.lyr-nav-toggle__bars,
.lyr-nav-toggle__bars::before,
.lyr-nav-toggle__bars::after {
position: absolute;
left: 10px;
width: 24px;
height: 2px;
background: var(--lyr-blue);
transition: transform 180ms ease, opacity 120ms ease;
}
.lyr-nav-toggle__bars {
top: 21px;
}
.lyr-nav-toggle__bars::before,
.lyr-nav-toggle__bars::after {
content: "";
left: 0;
}
.lyr-nav-toggle__bars::before { top: -7px; }
.lyr-nav-toggle__bars::after { top: 7px; }
.lyr-nav-toggle[aria-expanded="true"] .lyr-nav-toggle__bars {
background: transparent;
}
.lyr-nav-toggle[aria-expanded="true"] .lyr-nav-toggle__bars::before {
top: 0;
transform: rotate(45deg);
}
.lyr-nav-toggle[aria-expanded="true"] .lyr-nav-toggle__bars::after {
top: 0;
transform: rotate(-45deg);
}
claude
/* ---------------------------------------------------------------- hero */
.lyr-hero {
position: relative;
overflow: hidden;
background: #fff;
}
.lyr-hero__stage {
container-type: inline-size;
position: relative;
width: 100%;
aspect-ratio: 1920 / 594;
}
.lyr-hero__art {
position: absolute;
inset: 0;
}
.lyr-art {
position: absolute;
display: block;
}
.lyr-art img {
display: block;
width: 100%;
height: 100%;
}
/* Shared: the slate wedge sits at the right edge on every phase. */
.lyr-art--wedge {
top: 0;
left: 86.3%;
width: 13.7%;
height: 100%;
}
/* Day 1 art placement (percentages of the 1920x594 hero band). */
.lyr-hero--day1 .lyr-art--sky-a { left: 47.55%; top: 20.56%; width: 7.46%; height: 33.12%; }
.lyr-hero--day1 .lyr-art--sky-b { left: 53.32%; top: 30.20%; width: 7.46%; height: 33.12%; }
.lyr-hero--day1 .lyr-art--gold { left: 52.42%; top: -1.97%; width: 7.52%; height: 54.71%; }
.lyr-hero--day1 .lyr-art--blue { left: 42.59%; top: 31.98%; width: 11.82%; height: 68.10%; }
.lyr-hero--day1 .lyr-hero__logo { left: 12.15%; top: 20.54%; width: 28.57%; }
.lyr-hero--day1 .lyr-hero__copy { left: 64.27%; top: 31.14%; width: 30%; }
/* Day 3 / Day 7 art placement - copy left, logo right. */
.lyr-hero--split .lyr-art--sky-a { left: 54.42%; top: 20.85%; width: 7.46%; height: 33.29%; }
.lyr-hero--split .lyr-art--sky-b { left: 60.20%; top: 30.54%; width: 7.46%; height: 33.29%; }
.lyr-hero--split .lyr-art--gold { left: 59.29%; top: -1.79%; width: 7.52%; height: 54.99%; }
.lyr-hero--split .lyr-art--blue { left: 49.46%; top: 32.33%; width: 11.82%; height: 68.45%; }
.lyr-hero--split .lyr-hero__logo { left: 70.10%; top: 24.24%; width: 19.79%; }
/* 35.6% keeps the copy clear of the sky arc, which starts at 54.42%. */
.lyr-hero--split .lyr-hero__copy { left: 17.22%; top: 18.52%; width: 35.6%; }
.lyr-hero__logo,
.lyr-hero__copy {
position: absolute;
}
.lyr-hero__logo img {
display: block;
width: 100%;
height: auto;
}
.lyr-hero__headline {
margin: 0;
color: var(--lyr-blue);
line-height: 0.91;
letter-spacing: -0.01em;
}
.lyr-hero__light {
font-weight: 300;
}
.lyr-hero__strong {
font-weight: 500;
}
/* Day 1 headline is 90px on a 1920 canvas; Day 3/7 is 76px. */
.lyr-hero--day1 .lyr-hero__headline { font-size: 4.69cqw; }
.lyr-hero--split .lyr-hero__headline { font-size: 3.96cqw; }
/* Day 1 stacks "Now" over "Approved"; Day 7 runs on one line. */
.lyr-hero--day1 .lyr-hero__light,
.lyr-hero--day1 .lyr-hero__strong,
.lyr-hero__headline--stacked .lyr-hero__light,
.lyr-hero__headline--stacked .lyr-hero__strong {
display: block;
}
.lyr-hero__lede,
.lyr-hero__sub {
margin: 1.25cqw 0 0;
color: var(--lyr-slate);
font-size: 0.94cqw;
line-height: 1.5;
}
.lyr-hero__lede {
font-weight: 700;
}
.lyr-hero__cta {
margin: 1.6cqw 0 0;
}
/* ---------------------------------------------------------------- sign-up band */
.lyr-signup {
position: relative;
overflow: hidden;
container-type: inline-size;
background: var(--lyr-blue);
}
.lyr-signup__art {
position: absolute;
inset: 0;
pointer-events: none;
}
.lyr-art--form-wedge { left: 71.61%; top: 0; width: 28.39%; height: 100%; }
/* arc-a/arc-b live inside .lyr-signup__copy-art now (see below), not this
full-height layer, so they never scale against the section's dynamic
height (driven by the HubSpot iframe). */
.lyr-signup__inner {
position: relative;
z-index: 1;
display: grid;
/* Fixed first track (not minmax(...,1fr)) so the copy column never grows or
shrinks with container width, and align-items: start so the HubSpot
iframe's dynamic height (it reports its own height via inline style once
the embed script loads) never re-centers the copy block. Both columns
pin to the top of the row and stay put regardless of form height/width. */
grid-template-columns: 300px minmax(0, 2.6fr);
align-items: start;
width: var(--lyr-signup-w);
margin: 0 auto;
padding: clamp(40px, 4.6vw, 88px) 0;
}
.lyr-signup__copy {
/* Locked parent container for the two arc images and the heading/intro
text: fixed width AND height (not min-height), so this box never grows,
shrinks, or shifts with viewport width or with the HubSpot form's
dynamic height. position: relative + isolation: isolate makes it the
positioning context for its children below, without affecting stacking
elsewhere in the section. Positioning/design of the children is up to
you from here - only the lock is opinionated. */
position: relative;
left: -150px;
isolation: isolate;
width: 500px;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 0 0 0 120px;
}
.lyr-signup__copy-art {
/* Wrapper for the arc artwork, filling the locked copy box above so it
shares the same fixed frame of reference. */
position: absolute;
z-index: 0;
inset: 0;
pointer-events: none;
}
/* Both arcs in one flat export of the comp's "Up to Date Cuves" frame
* (Figma node 14:149, 520.6x520.4). They used to be two images pinned to
* opposite corners of the 500x500 copy box, which put the gap between them
* ~20px out; the comp's box is 520.6 square, so the pair is now placed as one
* element at the authored size and centred on the copy box - the composition
* sits where it always did, but the two arcs relate to each other correctly.
*
* Fixed px at the artwork's own ratio so it cannot stretch when the section's
* height changes with the HubSpot iframe. It deliberately overhangs the locked
* box by ~10px a side, as in the comp. */
.lyr-art--form-arcs {
position: absolute;
top: 50%;
left: 50%;
width: 520.6px;
height: 520.4px;
transform: translate(-50%, -50%);
}
.lyr-signup__title,
.lyr-signup__intro {
position: relative;
z-index: 1;
}
.lyr-signup__title {
margin: 0;
color: #fff;
font-size: 52px;
/* font-size: clamp(34px, 2.7vw, 52px); */
line-height: 1.08;
}
.lyr-signup__light { display: block; font-weight: 300; }
.lyr-signup__strong { display: block; font-weight: 500; }
.lyr-signup__intro {
margin: 24px 0 0 0;
color: #fff;
font-size: 18px;
line-height: 28px;
letter-spacing: 0.5px;
width: 60%;
}
.lyr-signup__card {
background: #fff;
padding: clamp(24px, 2.5vw, 40px);
position: relative;
z-index: 100;
}
/* HubSpot form slot. The live embed renders its own frame, so the old
placeholder's dashed outline is gone (per QA #23). The min-height keeps the
card 375px tall at a 1585px viewport, matching the 934x454 card in the comp,
so the band height is stable while the iframe loads. */
.lyr-form-slot {
min-height: 295px;
}
.lyr-form-slot__message {
margin: 0;
color: var(--lyr-muted);
font-size: 18px;
letter-spacing: 0.5px;
}
/* HubSpot field styling (form component "hsfc-Form" - no stable .hs-input
class to hook, so target elements directly and win the specificity fight
against the component's own styles): text/select inputs get a bottom
border only, checkboxes render at a fixed 34x34px (per request, not the comp). */
#hubspot-form input:not([type="checkbox"]):not([type="radio"]),
#hubspot-form select {
border: none !important;
border-bottom: 1px solid var(--lyr-muted) !important;
border-radius: 0 !important;
background: transparent !important;
}
#hubspot-form input[type="checkbox"] {
width: 34px;
height: 34px;
margin-right: 15px;
margin-top: 5px;
align-self: flex-start !important;
}
#hubspot-form .hsfc-NavigationRow__Alerts .hsfc-ErrorAlert {
display: none !important;
}
/* ---------------------------------------------------------------- care connect */
.lyr-care {
position: relative;
overflow: hidden;
background: #fff;
border-bottom: 2px solid #D5D9DD;
}
.lyr-care::before,
.lyr-care::after {
content: "";
position: absolute;
bottom: 0;
width: 105px;
height: 100%;
max-height: 219px;
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
.lyr-care::before {
left: 0;
background-image: url("../img/corner-blue.svg");
transform: rotate(180deg);
}
.lyr-care::after {
right: 0;
background-image: url("../img/corner-gold.svg");
}
.lyr-care__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(200px, 260px) 1fr;
gap: clamp(24px, 3vw, 48px);
align-items: center;
width: var(--lyr-content);
margin: 0 auto;
padding: clamp(32px, 3.2vw, 52px) 0;
}
.lyr-care__title {
margin: 0;
color: var(--lyr-blue);
font-size: clamp(24px, 1.9vw, 33px);
font-weight: 500;
line-height: 40px;
}
.lyr-care__body {
padding-left: clamp(20px, 2.5vw, 48px);
border-left: 1px solid #D5D9DD;
}
.lyr-care__body p {
margin: 0;
font-size: 18px;
line-height: 28px;
letter-spacing: 0.5px;
}
.lyr-care__cta {
margin-top: 16px !important;
}
/* ---------------------------------------------------------------- ISI */
.lyr-isi {
background: #fff;
}
.lyr-isi__inner {
width: var(--lyr-content);
margin: 0 auto;
padding: clamp(40px, 4vw, 72px) 0 clamp(40px, 4vw, 64px);
color: var(--lyr-slate);
}
.lyr-isi__title {
margin: 0 0 28px;
color: var(--lyr-blue);
font-size: 24px;
font-weight: 500;
line-height: 32px;
text-transform: uppercase;
}
.lyr-isi__heading {
margin: 32px 0 8px;
color: var(--lyr-slate);
font-size: 24px;
font-weight: 500;
line-height: 32px;
text-transform: uppercase;
}
.lyr-isi__heading--rule {
text-decoration: underline;
text-underline-position: from-font;
}
.lyr-isi h4 {
margin: 28px 0 5px;
color: var(--lyr-slate);
font-size: 18px;
font-weight: 700;
line-height: 28px;
}
.lyr-isi p {
margin: 0 0 10px;
font-size: 18px;
line-height: 28px;
}
.lyr-isi__divider {
height: 0;
margin: 32px 0 24px;
border: 0;
border-top: 0.75px solid #C7CDD4;
}
/* Values the designer flagged as still to be confirmed. */
.lyr-tbc {
background: none;
color: #C2185B;
font-weight: inherit;
}
/* ---------------------------------------------------------------- ISI drawer */
.lyr-isi-tray {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 40;
background: #fff;
border-top: 0.75px solid var(--lyr-slate);
box-shadow: 0 -4px 18px rgb(48 52 59 / 12%);
transition: transform 240ms ease, opacity 240ms ease;
}
.lyr-isi-tray[hidden] {
display: none;
}
.lyr-isi-tray--dismissed {
transform: translateY(100%);
opacity: 0;
pointer-events: none;
}
.lyr-isi-tray__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: var(--lyr-content);
margin: 0 auto;
padding: 10px 0;
}
.lyr-isi-tray__label {
margin: 0;
color: var(--lyr-blue);
font-size: 18px;
font-weight: 500;
line-height: 28px;
text-transform: uppercase;
}
.lyr-isi-tray__toggle {
flex: 0 0 auto;
width: 32px;
height: 32px;
padding: 0;
background: none;
border: 0;
color: var(--lyr-slate);
font-size: 28px;
font-weight: 300;
line-height: 1;
cursor: pointer;
}
.lyr-isi-tray__panel {
max-height: 0;
overflow: hidden;
transition: max-height 260ms ease;
}
.lyr-isi-tray[data-open="true"] .lyr-isi-tray__panel {
max-height: min(60vh, 620px);
overflow-y: auto;
border-top: 0.75px solid #D5D9DD;
}
.lyr-isi-tray__content {
width: var(--lyr-content);
margin: 0 auto;
padding: 16px 0 32px;
color: var(--lyr-slate);
}
/* The tray clones the inline ISI, so reuse its type rules but drop the outer box. */
.lyr-isi-tray__content .lyr-isi__inner {
max-width: none;
padding: 0;
}
/* Page gets bottom padding while the tray is on screen so the footer stays reachable. */
body.has-isi-tray {
padding-bottom: var(--lyr-tray-h, 0px);
}
/* ---------------------------------------------------------------- footer */
.lyr-footer {
position: relative;
background: #fff;
}
.lyr-footer__rules {
position: relative;
height: 6px;
}
.lyr-footer__rule {
position: absolute;
top: 0;
height: 6px;
}
.lyr-footer__rule--blue {
left: 0;
width: 29.84%;
background: var(--lyr-blue);
}
.lyr-footer__rule--gold {
right: 0;
width: 29.03%;
background: var(--lyr-gold);
}
.lyr-footer__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 32px;
width: var(--lyr-footer-w);
margin: 0 auto;
padding: 36px 0;
}
.lyr-footer__legal p {
margin: 0;
color: var(--lyr-slate);
font-size: 14px;
line-height: 20px;
}
.lyr-footer__links a {
color: var(--lyr-slate);
text-decoration: none;
}
.lyr-footer__links a:hover,
.lyr-footer__links a:focus-visible {
text-decoration: underline;
}
/* The Elevar lockup links to elevartx.com (QA #4/#22). */
.lyr-footer__brand a {
display: inline-block;
line-height: 0;
}
.lyr-footer__brand img {
width: clamp(180px, 17vw, 326px);
height: auto;
}
.lyr-footer__band {
height: 85px;
background: var(--lyr-slate);
}
/* Day 7 carries a different job code. Set on from the page slug. */
body.lyr-phase-day7 .lyr-jobcode {
font-size: 0;
}
body.lyr-phase-day7 .lyr-jobcode::after {
content: "US-LIRA-26-0010 09/2026";
font-size: 14px;
}
/* ---------------------------------------------------------------- responsive */
@media (max-width: 1200px) {
.lyr-nav {
gap: 20px;
}
.lyr-nav a,
.lyr-phone {
font-size: 13px;
}
}
@media (max-width: 900px) {
:root {
--lyr-header-h: 84px;
}
.lyr-nav-toggle {
display: block;
}
.lyr-header__inner {
flex-wrap: wrap;
justify-content: space-between;
}
.lyr-header__panel {
display: none;
flex-basis: 100%;
flex-direction: column;
align-items: flex-start;
gap: 20px;
padding: 16px 0 24px;
}
.lyr-header__panel.is-open {
display: flex;
}
.lyr-contact {
text-align: left;
}
.lyr-phone {
justify-content: flex-start;
}
.lyr-nav {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.lyr-nav a,
.lyr-phone {
font-size: 16px;
}
/* Hero unwinds into normal flow: logo, headline, copy, CTA - all centred,
matching the mobile comp. The artwork stays absolute but is pulled into
the top-left corner (and the slate wedge to the lower right) so it frames
the content instead of running through it. */
.lyr-hero .lyr-hero__stage {
aspect-ratio: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
padding: 28px var(--lyr-gutter) 44px;
}
.lyr-hero .lyr-hero__logo,
.lyr-hero .lyr-hero__copy {
position: relative;
left: auto;
top: auto;
width: 100%;
text-align: center;
}
.lyr-hero .lyr-hero__logo {
max-width: 240px;
margin-inline: auto;
}
.lyr-hero .lyr-hero__copy {
max-width: 460px;
}
/* Logo above the headline on every phase. */
.lyr-hero--split .lyr-hero__stage {
flex-direction: column;
}
.lyr-hero--split .lyr-hero__logo {
order: -1;
}
.lyr-art--sky-a,
.lyr-art--sky-b {
display: none;
}
.lyr-hero--day1 .lyr-art--blue,
.lyr-hero--split .lyr-art--blue {
left: 0;
top: 1%;
width: 22%;
height: 27%;
}
.lyr-hero--day1 .lyr-art--gold,
.lyr-hero--split .lyr-art--gold {
left: 3%;
top: 2%;
width: 16%;
height: 31%;
}
.lyr-art--wedge {
left: 86%;
top: auto;
bottom: 0;
width: 14%;
height: 22%;
}
.lyr-hero__headline {
font-size: clamp(28px, 7.5vw, 40px) !important;
line-height: 1.15;
}
/* Headline runs on one line on mobile, on every phase. */
.lyr-hero .lyr-hero__light,
.lyr-hero .lyr-hero__strong,
.lyr-hero__headline--stacked .lyr-hero__light,
.lyr-hero__headline--stacked .lyr-hero__strong {
display: inline;
}
.lyr-hero__lede,
.lyr-hero__sub {
margin-top: 14px;
font-size: 15px;
}
.lyr-hero__cta {
margin-top: 24px;
}
/* The comp's proportional insets are far too generous on a phone - fall back
to a flat gutter so the text gets the width it needs. */
.lyr-header__inner,
.lyr-signup__inner,
.lyr-care__inner,
.lyr-isi__inner,
.lyr-isi-tray__bar,
.lyr-isi-tray__content,
.lyr-footer__inner {
width: auto;
padding-left: var(--lyr-gutter);
padding-right: var(--lyr-gutter);
}
.lyr-care__inner {
grid-template-columns: 1fr;
}
.lyr-signup__card {
padding: 20px;
}
.lyr-form-slot {
min-height: 260px;
}
.lyr-care__body {
padding-left: 0;
border-left: 0;
}
.lyr-isi p,
.lyr-isi h4 {
font-size: 16px;
line-height: 24px;
}
.lyr-isi__title,
.lyr-isi__heading {
font-size: 20px;
line-height: 28px;
}
.lyr-footer__inner {
flex-direction: column;
align-items: center;
text-align: center;
}
.lyr-footer__links a {
display: inline-block;
}
}
/* The sign-up band keeps its two-column layout (copy + form card) down to a
narrower point than the header/nav breakpoint above: the embedded form's
own content stays a fixed ~300px wide regardless of container, so letting
the card stretch to a full-width single column between 640-900px just
surrounds that narrow form with a wide band of empty space. Below 640px
the card genuinely needs the full width for touch-sized fields, so it
stacks there and is capped/centered instead of stretching edge to edge. */
@media (max-width: 640px) {
.lyr-signup__inner {
grid-template-columns: 1fr;
}
.lyr-signup__copy {
width: auto;
height: auto;
}
/* No arc sizing needed here: below 900px the mobile block hides the inline
arc artwork outright and paints bg_coming_soon.svg on .lyr-signup__copy-art
instead. */
.lyr-signup__card {
max-width: 420px;
margin: 0 auto;
}
}
@media (max-width: 600px) {
.lyr-isi-tray__label {
font-size: 15px;
}
}
/* ------------------------------------------------ mobile comp (Day 1, 390px)
*
* Reproduction of the 390x2020 mobile comp (Figma Mob_NA_Home_Day1, node
* 1:583). This block is purely additive and lives entirely inside the media
* query, so nothing above 900px is affected - the desktop layout above is
* untouched.
*
* Sections shared with Day 3/7 (header, sign-up band, Care Connect, footer)
* are styled generically. The hero is scoped to .lyr-hero--day1, because the
* split heroes carry a lede/sub/CTA that the Day 1 comp has no box for; they
* keep the generic mobile treatment above.
*
* Full-bleed artwork is sized in cqw against its section so it scales with
* the viewport and can never stretch; body copy is sized in px so it does not
* inflate on a wide tablet.
*/
@media (max-width: 900px) {
/* The comp uses a different inset per band, all measured on 390px:
* header/footer 33, Care Connect 47, form 30. */
:root {
--lyr-header-h: 81px;
--lyr-m-gutter: clamp(20px, 8.5vw, 40px);
--lyr-m-gutter-care: clamp(24px, 12vw, 47px);
--lyr-m-gutter-form: clamp(18px, 7.7vw, 34px);
}
/* ------------------------------------------------------------- header */
/* Comp header is exactly 81px: 9px above a 62px logo, 10px below. */
.lyr-header__inner {
padding: 9px var(--lyr-m-gutter) 10px;
}
.lyr-logo img {
width: 102px;
}
/* Comp burger is a 38x17 box of three 1px bars in sky, not the 24x2 blue
bars used at desktop widths. The button keeps its 44x44 hit area; only
the bars are re-drawn. */
.lyr-nav-toggle__bars,
.lyr-nav-toggle__bars::before,
.lyr-nav-toggle__bars::after {
width: 38px;
height: 1px;
background: var(--lyr-sky);
}
/* left only on the middle bar; the pseudos keep left:0 (they're placed
relative to this box) so all three stay vertically aligned. */
.lyr-nav-toggle__bars { top: 21.5px; left: 3px; }
.lyr-nav-toggle__bars::before { top: -8px; }
.lyr-nav-toggle__bars::after { top: 8px; }
/* --------------------------------------------------- hero (Day 1 only)
*
* mobile_hero.svg is the comp's whole artwork board - 390x339 in comp
* units, covering y 0-339 with the product lockup already drawn into it.
* It is placed as one background shifted up by the 81px the header sits
* over, and clipped by .lyr-hero's overflow. The ![]()
lockup stays in
* the markup but is pulled out of flow and hidden visually so its alt
* text is still announced; "Now Approved" is NOT in the SVG and stays a
* live .
*
* The stage holds the comp's 390:250 box, so the art always has its
* authored aspect and every offset below is a plain comp measurement
* divided by 390. */
.lyr-hero--day1 .lyr-hero__stage {
aspect-ratio: 390 / 250;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 0;
padding: 0;
}
/* Desktop's five separate art layers are all inside the flat SVG now. */
.lyr-hero--day1 .lyr-hero__art {
display: none;
}
.lyr-hero--day1 .lyr-hero__stage::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -20.77cqw; /* -81/390: crop the strip the header covers */
height: 86.92cqw; /* 339/390 */
background: url("../img/mobile_hero.svg") no-repeat 0 0 / 100% 100%;
pointer-events: none;
}
.lyr-hero--day1 .lyr-hero__logo {
position: absolute !important;
width: 1px;
height: 1px;
max-width: none;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* The stage must carry no padding of its own: cqw resolves against a
container's CONTENT box, so a gutter there would silently shrink every
measurement below (and the ::before art with it). Inset and offset live
on this descendant instead, where cqw is the full stage width. */
.lyr-hero--day1 .lyr-hero__copy {
position: relative;
z-index: 1;
width: 100%;
max-width: none;
margin: 34.36cqw 0 0; /* comp headline top: 134/390 */
padding: 0 var(--lyr-m-gutter);
}
.lyr-hero--day1 .lyr-hero__headline {
font-size: 8.21cqw !important; /* comp 32px */
line-height: 17.18cqw; /* comp line box 67px */
}
/* ------------------------------------------------------ sign-up band
*
* The comp drops the desktop's white card-on-blue: the blue band ends
* under the intro copy (comp 331-624) and the form sits below it on
* plain white. */
.lyr-signup {
background: #fff;
}
.lyr-signup__art {
display: none;
}
.lyr-signup__inner {
display: block;
width: auto;
padding: 0;
}
.lyr-signup__copy {
position: relative;
left: auto;
display: block;
width: auto;
height: auto;
overflow: hidden;
/* Narrow inset so the intro below can always reach its comp measure;
both children are centred, so this is not the visible gutter. */
padding: 72px 20px 35px;
background: var(--lyr-blue);
text-align: center;
}
/* bg_coming_soon.svg is the comp's masked arc pair with its 32% opacity
baked in. Comp box: 277x277 at x=58, starting 19px above the band, the
overhang clipped by .lyr-signup__copy. Capped so it stays decorative
rather than tracking the viewport all the way to 900px. */
.lyr-signup__copy-art {
inset: auto;
top: -19px;
left: min(14.87cqw, 60px);
width: min(71.03cqw, 340px);
height: auto;
aspect-ratio: 1;
background: url("../img/bg_coming_soon.svg") no-repeat 0 0 / 100% 100%;
}
.lyr-signup__copy-art .lyr-art {
display: none;
}
.lyr-signup__title {
font-size: clamp(30px, 10vw, 39px);
line-height: 41px;
letter-spacing: 0.5px;
}
.lyr-signup__intro {
width: auto;
max-width: 314px;
margin: 40px auto 0;
}
.lyr-signup__card {
max-width: none;
margin: 0;
/* no left/right padding on mobile - the HubSpot embed spans the card */
padding: 68px 0 16px;
background: #fff;
min-height: 40vh; /* comp 454px at 390px viewport */
}
/* The HubSpot embed is live, so the placeholder frame is only noise. */
.lyr-form-slot {
min-height: 0;
border: 0;
}
/* -------------------------------------------------------- Care Connect
* Comp band is #F5F5F5, left aligned, and carries the gold corner only -
* the blue corner desktop shows bottom-left is not in the mobile comp. */
.lyr-care {
background: #F5F5F5;
border-top: 0.75px solid var(--lyr-slate);
border-bottom: 0.75px solid var(--lyr-slate);
}
.lyr-care::before {
display: none;
}
/* Comp: 71x149, bottom aligned, right edge 30px past the frame. */
.lyr-care::after {
right: -7.7%;
bottom: 0;
width: 18.2%;
height: auto;
max-height: none;
aspect-ratio: 104.514 / 219.224;
}
.lyr-care__inner {
gap: 0;
align-items: start;
padding: 16px var(--lyr-m-gutter-care) 30px;
}
.lyr-care__title {
font-size: clamp(26px, 8.5vw, 33px);
line-height: 40px;
}
.lyr-care__cta {
margin-top: 20px !important;
}
/* ------------------------------------------------------------- footer */
.lyr-footer__rule--blue { width: 34.1%; }
.lyr-footer__rule--gold { width: 45.1%; }
.lyr-footer__inner {
gap: 42px;
padding: 29px var(--lyr-m-gutter) 71px;
}
.lyr-footer__legal p {
margin: 0 0 10px;
}
.lyr-footer__legal p:last-child {
margin-bottom: 0;
}
.lyr-footer__brand img {
width: 188px;
}
.lyr-footer__band {
height: 86px;
}
}
/* ---------------------------------------------------------------- print */
@media print {
.lyr-isi-tray,
.lyr-nav-toggle {
display: none !important;
}
}