/* Home page (templates/index.html): layout helpers only.
   The compiled design-system.css only kept the utilities the original capture used,
   so the new layout's utilities are added here with the same spacing scale and breakpoints.
   No design token, colour or font is changed. */

/* Utilities missing from the compiled build */
.mt-8 { margin-top: calc(var(--spacing)*8) }
.mt-16 { margin-top: calc(var(--spacing)*16) }
.gap-y-10 { row-gap: calc(var(--spacing)*10) }
.text-\[40px\] { font-size: 40px }
.mr-5 { margin-right: calc(var(--spacing)*5) }
.pt-12 { padding-top: calc(var(--spacing)*12) }
.py-2 { padding-block: calc(var(--spacing)*2) }
.py-2\.5 { padding-block: calc(var(--spacing)*2.5) }
.h-1 { height: calc(var(--spacing)*1) }
.h-2 { height: calc(var(--spacing)*2) }
.gap-10 { gap: calc(var(--spacing)*10) }
.gap-12 { gap: calc(var(--spacing)*12) }
.gap-x-4 { column-gap: calc(var(--spacing)*4) }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.h-16 { height: calc(var(--spacing)*16) }
.h-24 { height: calc(var(--spacing)*24) }
.h-\[56px\] { height: 56px }
.w-16 { width: calc(var(--spacing)*16) }
.w-\[56px\] { width: 56px }
.w-\[300px\] { width: 300px }
.min-h-12 { min-height: calc(var(--spacing)*12) }
.max-w-sm { max-width: 24rem }
.max-w-lg { max-width: 32rem }
.text-\[13px\] { font-size: 13px }
.text-\[17px\] { font-size: 17px }
.text-\[18px\] { font-size: 18px }
.text-\[64px\] { font-size: 64px }
.uppercase { text-transform: uppercase }
.tracking-wide { letter-spacing: .025em }
.h-28 { height: calc(var(--spacing)*28) }
.w-8 { width: calc(var(--spacing)*8) }
.max-w-xs { max-width: var(--container-xs) }
.max-w-\[300px\] { max-width: 300px }
.rotate-\[2deg\] { rotate: 2deg }
.rotate-\[3deg\] { rotate: 3deg }
.lp-v12 .lp-text-foreground\/60 { color: hsl(var(--lp-foreground)/.6) }

@media (min-width:640px) {
    .min-\[640px\]\:pt-20 { padding-top: calc(var(--spacing)*20) }
    .min-\[640px\]\:gap-4 { gap: calc(var(--spacing)*4) }
    .min-\[640px\]\:h-28 { height: calc(var(--spacing)*28) }
    .min-\[640px\]\:w-28 { width: calc(var(--spacing)*28) }
    .min-\[640px\]\:h-\[72px\] { height: 72px }
    .min-\[640px\]\:w-\[72px\] { width: 72px }
    .min-\[640px\]\:w-\[360px\] { width: 360px }
    .min-\[640px\]\:justify-center { justify-content: center }
    .min-\[640px\]\:h-36 { height: calc(var(--spacing)*36) }
    .min-\[640px\]\:w-36 { width: calc(var(--spacing)*36) }
    .min-\[640px\]\:mx-0 { margin-inline: 0 }
    .min-\[640px\]\:pb-20 { padding-bottom: calc(var(--spacing)*20) }
    .min-\[640px\]\:text-\[56px\] { font-size: 56px }
    /* Redeclared so it wins over .mt-16 above */
    .min-\[640px\]\:mt-20 { margin-top: calc(var(--spacing)*20) }
    .min-\[640px\]\:text-\[96px\] { font-size: 96px }
    .min-\[640px\]\:text-left { text-align: left }
}

@media (min-width:768px) {
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
    .md\:items-end { align-items: flex-end }
    /* Redeclared so they win over the smaller-breakpoint helpers above */
    .md\:gap-6 { gap: calc(var(--spacing)*6) }
}

@media (min-width:1024px) {
    .min-\[1024px\]\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .min-\[1024px\]\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
    .min-\[1024px\]\:grid-cols-\[0\.8fr_1\.2fr\] { grid-template-columns: .8fr 1.2fr }
    .min-\[1024px\]\:grid-cols-\[1\.2fr_0\.8fr\] { grid-template-columns: 1.2fr .8fr }
    .min-\[1024px\]\:self-start { align-self: flex-start }
    .min-\[1024px\]\:sticky { position: sticky }
    .min-\[1024px\]\:top-24 { top: calc(var(--spacing)*24) }
    .min-\[1024px\]\:gap-16 { gap: calc(var(--spacing)*16) }
    /* Redeclared so they win over the smaller-breakpoint helpers above */
    .min-\[1024px\]\:gap-8 { gap: calc(var(--spacing)*8) }
    .min-\[1024px\]\:justify-start { justify-content: flex-start }
}

/* Navbar: six links need a tighter gap */
.lp-v2-nav > .flex { gap: 1rem }

/* Store profile images are shown only with their own author’s review. */
.lp-review-avatar-wrap { position: relative; overflow: hidden }
.lp-review-avatar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.lp-review-card { display: flex; flex-direction: column }
.lp-review-header { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem }
.lp-review-header > .flex { width: 100% }
.lp-v12 .lp-reviews-marquee [data-marquee-track] {
    animation-duration: var(--lp-review-duration) !important;
}
.lp-review-star-empty { opacity: .2 }

@media (prefers-reduced-motion: reduce) {
    .lp-reviews-marquee { overflow-x: auto }
    .lp-reviews-marquee.lp-fade-x::before,
    .lp-reviews-marquee.lp-fade-x::after { display: none }
    .lp-reviews-marquee [aria-hidden="true"][data-review-id] { display: none }
}

/* Marquee fades on sections or cards using the page background instead of the card colour */
.lp-v12 .lp-v2-fade-bg.lp-fade-x:before {
    background-image: linear-gradient(to right, hsl(var(--lp-background)), transparent)
}

.lp-v12 .lp-v2-fade-bg.lp-fade-x:after {
    background-image: linear-gradient(to left, hsl(var(--lp-background)), transparent)
}

/* --- v2 text +10% (generated) --- */
.lp-v2-text .lp-hero-lead { font-size: 19.8px }
.lp-v2-text .lp-hero-point { font-size: 16.5px }
.lp-v2-text .lp-hero-title { font-size: calc(clamp(2.75rem, 14vw, 3.75rem) * 1.1) }
.lp-v2-text .text-\[12px\] { font-size: 13.2px }
.lp-v2-text .text-\[13px\] { font-size: 14.3px }
.lp-v2-text .text-\[14px\] { font-size: 15.4px }
.lp-v2-text .text-\[15px\] { font-size: 16.5px }
.lp-v2-text .text-\[16px\] { font-size: 17.6px }
.lp-v2-text .text-\[17px\] { font-size: 18.7px }
.lp-v2-text .text-\[18px\] { font-size: 19.8px }
.lp-v2-text .text-\[20px\] { font-size: 22px }
.lp-v2-text .text-\[30px\] { font-size: 33px }
.lp-v2-text .text-\[40px\] { font-size: 44px }
.lp-v2-text .text-\[64px\] { font-size: 70.4px }
.lp-v2-text .text-\[clamp\(1\.4rem\,7\.5vw\,3\.5rem\)\] { font-size: calc(clamp(1.4rem, 7.5vw, 3.5rem) * 1.1) }
.lp-v2-text .text-button-md { font-size: 0.963rem }
.lp-v2-text .text-md { font-size: calc(var(--text-md) * 1.1) }
.lp-v2-text .text-sm { font-size: calc(var(--text-sm) * 1.1) }
.lp-v2-text .text-xs { font-size: calc(var(--text-xs) * 1.1) }
@media (min-width:30rem) {
    .lp-v2-text .ds\:text-md-d { font-size: calc(var(--text-md-d) * 1.1) }
    .lp-v2-text .ds\:text-xs-d { font-size: calc(var(--text-xs-d) * 1.1) }
}
@media (min-width:640px) {
    .lp-v2-text .lp-hero-lead { font-size: 19.8px }
    .lp-v2-text .lp-hero-point { font-size: 15.4px }
    .lp-v2-text .lp-hero-title { font-size: 61.6px }
    .lp-v2-text .min-\[640px\]\:text-\[16px\] { font-size: 17.6px }
    .lp-v2-text .min-\[640px\]\:text-\[18px\] { font-size: 19.8px }
    .lp-v2-text .min-\[640px\]\:text-\[40px\] { font-size: 44px }
    .lp-v2-text .min-\[640px\]\:text-\[56px\] { font-size: 61.6px }
    .lp-v2-text .min-\[640px\]\:text-\[96px\] { font-size: 105.6px }
}
@media (min-width:768px) {
    .lp-v2-text .md\:text-\[18px\] { font-size: 19.8px }
    .lp-v2-text .md\:text-\[24px\] { font-size: 26.4px }
}
@media (min-width:1024px) {
    .lp-v2-text .min-\[1024px\]\:text-\[18px\] { font-size: 19.8px }
}
/* --- end v2 text +10% --- */