/* Homepage refresh (2026-11). A layer over home-modern.css, scoped to
   body.hm-refresh. Nothing here changes markup meaning or text; it is type,
   tokens, spacing and motion only. Rules: md_files/DESIGN.md. While the ?old
   comparison ran, this was switchable; it is now the only look, and can be
   folded into home-modern.css whenever that file is next reworked.

   Selectors start with .home-modern.hm-refresh so they outrank the base
   file's .home-modern rules without !important. */

/* ============================================================
   Tokens: this page's names, mapped onto the shared --lq- tokens in
   css/lq-design.css. The short names are what home-modern.css already
   uses, so its rules pick the new values up too.
   ============================================================ */
.home-modern.hm-refresh {
    --font-display: var(--lq-font-display);
    --ink: var(--lq-ink);
    --ink-2: var(--lq-ink-2);
    --muted: var(--lq-muted);
    --line: var(--lq-line);
    --bg-alt: var(--lq-bg-alt);
    --brand: var(--lq-brand);
    --brand-2: var(--lq-brand-2);
    --brand-ink: var(--lq-brand-ink);

    --r-sm: var(--lq-r-sm);
    --r-md: var(--lq-r-md);
    --r-lg: var(--lq-r-lg);

    --sh-1: var(--lq-sh-1);
    --sh-2: var(--lq-sh-2);
    --sh-3: var(--lq-sh-3);

    --ease-out: var(--lq-ease-out);
    --dur-1: var(--lq-dur-1);
    --dur-2: var(--lq-dur-2);
    --dur-3: var(--lq-dur-3);

    --sec-y: var(--lq-sec-y);
    --sec-y-sm: var(--lq-sec-y-sm);
}
@media (max-width: 640px) {
    .home-modern.hm-refresh { --sec-y: var(--sec-y-sm); }
}

/* ============================================================
   Type
   ============================================================ */
.home-modern.hm-refresh main :is(h1, h2, h3),
.home-modern.hm-refresh .hero-btn,
.home-modern.hm-refresh .ui-cta,
.home-modern.hm-refresh .promo-cta {
    font-family: var(--font-display);
}
.home-modern.hm-refresh main :is(h1, h2, h3) { text-wrap: balance; }
.home-modern.hm-refresh main p { text-wrap: pretty; }

.home-modern.hm-refresh .lq-hero h1 {
    font-size: clamp(2.6rem, 5.4vw, 4.3rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.02;
    margin-bottom: 22px;
}
.home-modern.hm-refresh .lq-title,
.home-modern.hm-refresh .ui-title {
    font-size: clamp(2rem, 4.2vw, 3rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.08;
    margin-bottom: 16px;
}
/* Half-width column beside the video: the full size broke it over three lines. */
.home-modern.hm-refresh .ui-title { font-size: clamp(2rem, 3.4vw, 2.6rem); }
.home-modern.hm-refresh .tpl-head h2 {
    font-size: clamp(2.2rem, 5.2vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.04;
}
.home-modern.hm-refresh .cta-band h2 {
    font-size: clamp(2rem, 4.4vw, 3rem);
    font-weight: 800;
}
.home-modern.hm-refresh .lq-sub,
.home-modern.hm-refresh .lq-hero .lead {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--muted);
}
.home-modern.hm-refresh .lq-sub { max-width: 60ch; margin-left: auto; margin-right: auto; }
.home-modern.hm-refresh .lq-head { margin-bottom: 56px; }

/* Eyebrows: a label between two short rules instead of a pill. Thirteen pill
   badges stacked down one page read as a template; this reads as editorial. */
.home-modern.hm-refresh :is(.lq-eyebrow, .ui-eyebrow, .tpl-eyebrow) {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: 0;
    padding: 0;
    border-radius: 0;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .16em;
    margin-bottom: 18px;
}
.home-modern.hm-refresh :is(.lq-eyebrow, .ui-eyebrow, .tpl-eyebrow)::before,
.home-modern.hm-refresh :is(.lq-eyebrow, .tpl-eyebrow)::after {
    content: '';
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, currentColor);
    opacity: .6;
}
.home-modern.hm-refresh :is(.lq-eyebrow, .tpl-eyebrow)::after { transform: scaleX(-1); }
.home-modern.hm-refresh .tpl-eyebrow { color: #c4b5fd; }

/* Two section heads go left-aligned, title on the left and the sentence on the
   right, so not every section opens with the same centred stack. */
@media (min-width: 901px) {
    .home-modern.hm-refresh :is(#booths, #samples) > .lq-head {
        display: grid;
        grid-template-columns: 1.15fr 1fr;
        column-gap: 56px;
        align-items: end;
        max-width: none;
        text-align: left;
    }
    .home-modern.hm-refresh :is(#booths, #samples) > .lq-head .lq-eyebrow { grid-column: 1; justify-self: start; }
    .home-modern.hm-refresh :is(#booths, #samples) > .lq-head .lq-eyebrow::before { display: none; }
    .home-modern.hm-refresh :is(#booths, #samples) > .lq-head .lq-eyebrow::after { transform: none; background: linear-gradient(90deg, currentColor, transparent); }
    .home-modern.hm-refresh :is(#booths, #samples) > .lq-head .lq-title { grid-column: 1; margin: 0; }
    .home-modern.hm-refresh :is(#booths, #samples) > .lq-head .lq-sub { grid-column: 2; grid-row: 2; margin: 0 0 6px; }
}

/* ============================================================
   Buttons
   ============================================================ */
.home-modern.hm-refresh .hero-btn {
    min-height: 50px;
    padding: 13px 26px;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: -.005em;
    transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
                background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2);
}
.home-modern.hm-refresh .hero-btn.primary {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 26px -8px rgba(37,99,235,.6);
}
.home-modern.hm-refresh .hero-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 18px 34px -10px rgba(37,99,235,.7);
}
.home-modern.hm-refresh .hero-btn.ghost {
    background: #fff;
    color: var(--ink);
    border: 1.5px solid #cbd5e1;
    padding: 12px 24px;
}
.home-modern.hm-refresh .hero-btn.ghost:hover {
    background: #f5f8ff;
    color: var(--brand-ink);
    border-color: var(--brand);
}
.home-modern.hm-refresh :is(.hero-btn, .ui-cta, .promo-cta):active {
    transform: scale(.97);
    transition-duration: 80ms;
}
.home-modern.hm-refresh :is(.hero-btn, .ui-cta, .promo-cta) .fa-arrow-right {
    transition: transform var(--dur-2) var(--ease-out);
}
.home-modern.hm-refresh :is(.hero-btn, .ui-cta, .promo-cta):hover .fa-arrow-right { transform: translateX(3px); }

/* Keyboard focus, visible on every control on the page. */
.home-modern.hm-refresh main :is(a, button):focus-visible,
.home-modern.hm-refresh .wa-float:focus-visible {
    outline: var(--lq-focus);
    outline-offset: 3px;
}

/* ============================================================
   Hero: a full-width band instead of a tinted box that stopped
   at the 1200px container edge.
   ============================================================ */
.home-modern.hm-refresh .hm-hero-band {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(55% 65% at 88% 8%, rgba(14,165,233,.16), transparent 62%),
        radial-gradient(45% 55% at 4% 0%, rgba(139,92,246,.13), transparent 60%),
        linear-gradient(180deg, #f6f8ff 0%, #ffffff 100%);
}
.home-modern.hm-refresh .hm-hero-band::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(15,23,42,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.05) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(75% 70% at 50% 25%, #000 20%, transparent 75%);
            mask-image: radial-gradient(75% 70% at 50% 25%, #000 20%, transparent 75%);
}
.home-modern.hm-refresh .lq-hero { padding: 84px 20px 96px; }
.home-modern.hm-refresh .lq-hero::before { display: none; }
.home-modern.hm-refresh .v5-badge {
    box-shadow: var(--sh-2);
    border-color: rgba(226,232,240,.9);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    background: rgba(255,255,255,.8);
}
.home-modern.hm-refresh .float-card {
    border-radius: var(--r-md);
    border-color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.82);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: var(--sh-2);
    /* Above the print deck: the front print used to cover the lower card. */
    z-index: 6;
}
.home-modern.hm-refresh .hm-card {
    box-shadow: 0 34px 70px -20px rgba(15,23,42,.45), 0 2px 6px rgba(15,23,42,.12);
}

/* ============================================================
   Cards
   ============================================================ */
.home-modern.hm-refresh :is(.booth-card, .setup-card, .hm-quote, .hm-ed) {
    border-radius: 20px;
    border-color: var(--line);
    box-shadow: var(--sh-1);
}

/* Booth cards: the coloured strip along the top goes; the card's own colour
   comes through as a faint wash on hover instead. ::before is reused for the
   wash, painted under the content thanks to the isolated stacking context. */
.home-modern.hm-refresh .booth-card { isolation: isolate; }
.home-modern.hm-refresh .booth-card::before {
    top: 0; bottom: 0; height: auto;
    z-index: -1;
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease-out);
}
.home-modern.hm-refresh .booth-card:hover::before { opacity: .07; }
.home-modern.hm-refresh .booth-card.soon::before { display: none; }
.home-modern.hm-refresh .hm-booths .booth-card .ic {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 19px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px -6px rgba(15,23,42,.35);
}
.home-modern.hm-refresh .hm-booths .booth-card h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.015em; }
.home-modern.hm-refresh .hm-booths .booth-card p { line-height: 1.55; }

.home-modern.hm-refresh .hm-feats { border-radius: var(--r-lg); padding: 32px 34px; }
.home-modern.hm-refresh .hm-feats .ic { border-radius: 12px; }

.home-modern.hm-refresh .setup-card h3 { font-weight: 700; letter-spacing: -.02em; }
.home-modern.hm-refresh .setup-card:hover .ph img { transform: scale(1.04); }

.home-modern.hm-refresh :is(.hm-video, .hm-carousel, .map-card, .ui-video) { border-radius: var(--r-lg); }
.home-modern.hm-refresh .hm-video { box-shadow: var(--sh-3); }

/* Quotes */
.home-modern.hm-refresh .hm-quote { padding: 30px; }
.home-modern.hm-refresh .hm-quote > i {
    font-size: 30px;
    opacity: 1;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.home-modern.hm-refresh .hm-quote blockquote { font-size: 1.06rem; color: var(--ink-2); }

/* Editions: prices line up digit for digit; the best seller gets a gradient
   border instead of a flat blue one. */
.home-modern.hm-refresh .hm-ed .amt {
    font-family: var(--font-display);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: 2.3rem;
}
.home-modern.hm-refresh .hm-ed h3 { font-weight: 800; letter-spacing: -.02em; }
.home-modern.hm-refresh .hm-ed.best {
    border: 2px solid transparent;
    background:
        linear-gradient(180deg, #fff, #f6f9ff) padding-box,
        linear-gradient(135deg, var(--brand), var(--brand-2)) border-box;
    box-shadow: var(--sh-3);
}

/* Closing band: the hero's grid, faintly, so the page ends where it began. */
.home-modern.hm-refresh .cta-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 28px;
    padding: 72px 40px;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 45%, #0ea5e9 100%);
}
.home-modern.hm-refresh .cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(70% 90% at 50% 0%, #000, transparent 80%);
            mask-image: radial-gradient(70% 90% at 50% 0%, #000, transparent 80%);
}
@media (max-width: 640px) {
    .home-modern.hm-refresh .cta-band { padding: 52px 22px; border-radius: 22px; }
}

/* ============================================================
   Results gallery: a bento on wide screens — two large tiles and
   ten small ones fill six columns by three rows exactly, so all
   twelve samples still show. Below 1101px the base grid returns.
   ============================================================ */
.home-modern.hm-refresh .hm-gallery figure { border-radius: 14px; }
@media (min-width: 1101px) {
    .home-modern.hm-refresh .hm-gallery {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-auto-flow: dense;
        gap: 12px;
    }
    .home-modern.hm-refresh .hm-gallery figure:nth-child(1) { grid-column: 1 / span 2; grid-row: 1 / span 2; }
    .home-modern.hm-refresh .hm-gallery figure:nth-child(7) { grid-column: 5 / span 2; grid-row: 2 / span 2; }
    /* The large tiles take their height from the rows the small 5:4 tiles set;
       their image is lifted out of flow so its own size cannot stretch a row. */
    .home-modern.hm-refresh .hm-gallery figure:is(:nth-child(1), :nth-child(7)) { aspect-ratio: auto; position: relative; }
    .home-modern.hm-refresh .hm-gallery figure:is(:nth-child(1), :nth-child(7)) :is(picture, img) { position: absolute; inset: 0; }
}
.home-modern.hm-refresh .hm-gallery figure:hover img { transform: scale(1.05); }

/* ============================================================
   Motion. The reveal is an animation rather than a transition, so
   once it has played the card's own hover transform works again
   (the base file's .reveal.in { transform: none } outranked every
   card :hover rule, so cards never lifted). Grid items stagger by
   column, so each row enters left to right.
   ============================================================ */
.js .home-modern.hm-refresh .reveal {
    transform: none;
    transition-property: transform, box-shadow, border-color, background-color;
    transition-duration: var(--dur-2);
    transition-timing-function: var(--ease-out);
}
.js .home-modern.hm-refresh .reveal:not(.in) { opacity: 0; }
.js .home-modern.hm-refresh .reveal.in {
    opacity: 1;
    animation: lqRise var(--dur-3) var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * var(--lq-stagger));
}

.home-modern.hm-refresh .hm-booths > :nth-child(4n+2),
.home-modern.hm-refresh :is(.setup-grid, .hm-quotes, .hm-eds) > :nth-child(3n+2) { --i: 1; }
.home-modern.hm-refresh .hm-booths > :nth-child(4n+3),
.home-modern.hm-refresh :is(.setup-grid, .hm-quotes, .hm-eds) > :nth-child(3n+3) { --i: 2; }
.home-modern.hm-refresh .hm-booths > :nth-child(4n+4) { --i: 3; }

/* Hero: the copy enters line by line on load, the print deck rises after. */
.js .home-modern.hm-refresh .lq-hero .reveal.in { animation: none; }
.js .home-modern.hm-refresh .lq-hero .hero-grid > .reveal.in:first-child > * {
    animation: lqRise var(--dur-3) var(--ease-out) backwards;
}
.js .home-modern.hm-refresh .lq-hero .hero-grid > .reveal.in:first-child > :nth-child(2) { animation-delay: 80ms; }
.js .home-modern.hm-refresh .lq-hero .hero-grid > .reveal.in:first-child > :nth-child(3) { animation-delay: 160ms; }
.js .home-modern.hm-refresh .lq-hero .hero-grid > .reveal.in:first-child > :nth-child(4) { animation-delay: 240ms; }
.js .home-modern.hm-refresh .lq-hero .hero-grid > .reveal.in:first-child > :nth-child(n+5) { animation-delay: 320ms; }
.js .home-modern.hm-refresh .lq-hero .hero-visual.reveal.in {
    animation: lqRiseScale 900ms var(--ease-out) 200ms backwards;
}

/* Card lifts. Declared after the reveal rules and at the same weight, so
   they win the tie. */
.home-modern.hm-refresh .booth-card:hover,
.home-modern.hm-refresh .setup-card:hover,
.home-modern.hm-refresh .hm-ed:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-3);
}
.home-modern.hm-refresh .booth-card.soon:hover { transform: none; box-shadow: var(--sh-1); }

@media (prefers-reduced-motion: reduce) {
    .home-modern.hm-refresh *,
    .home-modern.hm-refresh *::before,
    .home-modern.hm-refresh *::after { animation-delay: 0s !important; }
    .home-modern.hm-refresh .booth-card:hover,
    .home-modern.hm-refresh .setup-card:hover,
    .home-modern.hm-refresh .hm-ed:hover { transform: none; }
}