/* Public home page (Default.aspx). Classes are prefixed .home* so nothing leaks to other pages.
   Note: main.css sets p { margin: 0 !important }, so paragraphs here are spaced with padding. */

/* Page tokens: brand colours come from main.css; the pastel tiles and washes are defined once here. */
.homePage {
    --homeInk: var(--black);
    --homeMuted: #4a5d68;
    --homeLine: rgba(9, 45, 64, 0.1);
    --homeSoft: #f7f9fb;
    --homeTealWash: rgba(75, 192, 192, 0.18);
    --homeCoralWash: rgba(255, 100, 100, 0.12);
    --homeGreenWash: rgba(161, 197, 136, 0.22);
    --homeTileCoral: #ffe9e6;
    --homeTileGreen: #eef5e8;
    --homeTileBlue: #e3f5f5;
    --homeTileSand: #f6f1ea;
    --homeTileGrey: #eef1f4;
    --homeStar: #f5b301;
    --homeShadow: 0 30px 80px -20px rgba(9, 45, 64, 0.25), 0 12px 24px -12px rgba(9, 45, 64, 0.12);
    font-family: Poppins, sans-serif;
    color: var(--homeInk);
    overflow: hidden;
    overflow: clip; /* hidden still lets focus() scroll it sideways */
}
.homePage h1, .homePage h2, .homePage h3 { font-family: "Mulish", sans-serif !important; color: var(--homeInk) !important; text-align: left; }
.homePage a:not(.homeBtn) { color: var(--homeInk); text-decoration: underline; text-underline-offset: 3px; }
.homeWrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.homeSection { padding: 120px 0; }

/* ===== Type ===== */
.homeDisplay { font-size: 56px !important; line-height: 1.08 !important; font-weight: 700 !important; letter-spacing: -1.5px; margin: 0 !important; max-width: 820px; }
.homeLead { font-size: 19px; line-height: 1.6; color: var(--homeMuted); max-width: 640px; padding-top: 20px; }
.homeIntro { margin-bottom: 64px; }
.homeIntro .homeBtn { margin-top: 32px; }
.homeIntroRow { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.homeIntroRow .homeBtn { margin-top: 0; flex-shrink: 0; }

/* ===== Buttons ===== */
.homeCtas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 40px; }
.homeCtasCenter { justify-content: center; }
.homeBtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 30px; border-radius: 999px; border: 1.5px solid transparent;
    font-family: "Mulish", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.2px;
    text-decoration: none !important; transition: transform 0.2s, background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.homeBtn:hover { transform: translateY(-2px); }
.homeBtnLg { padding: 18px 42px; font-size: 18px; }
.homeBtnDark { background: var(--black); color: var(--white) !important; }
.homeBtnDark:hover { background: var(--red); box-shadow: 0 12px 30px -8px rgba(255, 100, 100, 0.6); }
.homeBtnOutline { border-color: var(--black); color: var(--black) !important; background: transparent; }
.homeBtnOutline:hover { background: var(--black); color: var(--white) !important; }

/* ===== Hero ===== */
.homeHero { position: relative; padding: 110px 0 40px; text-align: center; }
.homeHeroWash {
    position: absolute; inset: 0 0 auto 0; height: 1000px; z-index: 0; pointer-events: none;
    background:
        radial-gradient(60% 50% at 15% 55%, var(--homeTealWash), transparent 70%),
        radial-gradient(50% 45% at 85% 45%, var(--homeCoralWash), transparent 70%),
        radial-gradient(60% 50% at 50% 85%, var(--homeGreenWash), transparent 70%);
    animation: homeWash 18s ease-in-out infinite alternate;
}
@keyframes homeWash { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(0, -30px, 0) scale(1.08); } }
.homeHeroText { position: relative; z-index: 1; }
.homeHero h1 {
    font-size: 84px !important; line-height: 1.02 !important; font-weight: 700 !important; letter-spacing: -2.5px;
    max-width: 1000px; margin: 0 auto !important; text-align: center !important;
}
.homeHeroLead { font-size: 20px; line-height: 1.6; color: var(--homeMuted); max-width: 640px; margin: 0 auto !important; padding-top: 28px; }

/* Rotating headline: "Be" is fixed, the words after it swap per slide */
.homeHeroSteps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; padding-bottom: 24px; }
.homeHeroStep {
    font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
    color: var(--black); opacity: 0.45; filter: blur(2.5px); transition: color 0.6s, opacity 0.6s, filter 0.6s;
}
.homeHeroStep.isSeen { opacity: 0.55; filter: none; }
.homeHeroStep.isActive { color: var(--red); opacity: 1; filter: none; }
.homeHeroTitleBox { display: flex; align-items: center; justify-content: center; min-height: calc(84px * 1.02 * 2); }
.homeHeroBe, .homeWord { display: inline-block; }
/* "be" is a size up from the rest of the line and breathes slowly; it grows from its baseline so the line doesn't shift */
.homeHeroBe { color: var(--red); font-size: 1.18em; line-height: 0.9; transform-origin: 50% 85%; animation: homeBreathe 3.2s ease-in-out infinite; }
@keyframes homeBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
/* Alone in the centre "be" is big and heavier (Mulish loads at one weight, so the stroke adds the extra bold);
   the hero script shrinks it back as it glides aside for the words */
.homeHeroBe { -webkit-text-stroke: 0 currentColor; }
.homeHeroBe.isSolo { scale: 1.6; -webkit-text-stroke-width: 0.025em; }
.homeHeroLead { min-height: calc(3.2em + 28px); }
.homeHeroLead { transition: opacity 0.4s, transform 0.4s; }
.homeHeroLead.isOut { opacity: 0; transform: translateY(-8px); } /* the script keeps it hidden 0.5s before the next line */
.homeHeroWords.isLeaving .homeWord { animation: homeWordOut 0.4s cubic-bezier(.4, 0, 1, 1) both; animation-delay: calc(var(--i, 0) * 40ms); }
/* Idle: "be" alone in the centre (words out of the layout). Pending: words in place but invisible while "be" glides.
   isStart stops the lead's page-load rise from showing it before slide 1 does. */
.homeHeroWords.isIdle { display: none; }
.homeHeroWords.isPending .homeWord { opacity: 0; }
.homeHeroLead.isStart { animation: none; }
.homeHeroWords.isEntering .homeWord { animation: homeWordIn 0.75s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes homeWordIn { from { opacity: 0; transform: translateY(0.4em); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes homeWordOut { to { opacity: 0; transform: translateY(-0.3em); filter: blur(8px); } }

/* Slide progress: thin bars that fill while a slide is showing; each one jumps to its slide */
.homeHeroDots { display: flex; justify-content: center; gap: 6px; padding-top: 28px; }
.homeHeroDots[hidden] { display: none; }
.homeHeroDot { position: relative; width: 48px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.homeHeroDot::before, .homeHeroDot::after { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 2px; }
.homeHeroDot::before { background: var(--homeLine); }
.homeHeroDot::after { background: var(--black); transform: scaleX(0); transform-origin: left; }
.homeHeroDot.isDone::after { transform: scaleX(1); }
.homeHeroDot.isActive::after { animation: homeFill var(--dur, 4s) linear forwards; }
.homeHeroDots.isPaused .homeHeroDot.isActive::after { animation-play-state: paused; }
.homeHeroDot:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
@keyframes homeFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.homeFinalAccent { color: var(--red); }
.homeAccent { font-style: italic; color: var(--red); }
.homeHeroNote { padding-top: 18px; font-size: 14px; color: var(--homeMuted); }
.homeHero .homeHeroNote { max-width: 520px; margin: 0 auto !important; }

/* Hero entrance: CSS only, so the headline never waits for JavaScript */
.homeRise { animation: homeRise 0.9s cubic-bezier(.2, .8, .2, 1) backwards; } /* backwards: no hold after it ends, so later fades still work */
.homeRise2 { animation-delay: 0.1s; }
.homeRise3 { animation-delay: 0.2s; }
.homeRise4 { animation-delay: 0.35s; }
@keyframes homeRise { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }

/* Stage: browser window with floating UI cards */
.homeStage {
    --stageScale: 0.9;
    position: relative; z-index: 1; max-width: 1160px; height: 600px; margin: 72px auto 0;
    transform: scale(var(--stageScale)); transform-origin: 50% 0; transition: transform 0.1s linear;
}
.homeBrowser { position: absolute; border-radius: 18px; overflow: hidden; background: var(--white); box-shadow: var(--homeShadow); border: 1px solid var(--homeLine); }
/* The three windows share one size; the slot class moves them. z-index is transitioned too,
   so a window passes in front of the others halfway through its move. */
.homeShot {
    left: 50%; top: 0; width: 560px; margin-left: -280px;
    transition: transform 1s cubic-bezier(.65, 0, .35, 1), z-index 1s, opacity 0.6s;
}
.homeSlotC { z-index: 1; transform: none; }
.homeSlotL { z-index: 0; transform: translate(-390px, 10px) rotate(-6deg) scale(0.75); }
.homeSlotR { z-index: 0; transform: translate(390px, 10px) rotate(6deg) scale(0.75); }
.homeBrowserBar { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px; background: var(--homeTileGrey); border-bottom: 1px solid var(--homeLine); }
.homeBrowserBar i { width: 11px; height: 11px; border-radius: 50%; }
.homeBrowserBar i:nth-child(1) { background: var(--red); }
.homeBrowserBar i:nth-child(2) { background: var(--homeStar); }
.homeBrowserBar i:nth-child(3) { background: var(--green); }
.homeBrowserBar span { flex: 1; max-width: 320px; margin: 0 auto; padding: 5px 14px; border-radius: 999px; background: var(--white); font-size: 12px; color: var(--homeMuted); text-align: center; }
.homeBrowser img { display: block; width: 100%; height: 560px; object-fit: cover; object-position: top; }

.homeFloat { position: absolute; z-index: 2; background: var(--white); border-radius: 16px; box-shadow: var(--homeShadow); text-align: left; animation: homeBob 6s ease-in-out infinite; }
.homePhone { left: calc(50% + 190px); top: 230px; width: 190px; padding: 8px; border-radius: 30px; background: var(--black); animation-delay: -1s; }
.homePhone img { display: block; width: 100%; height: 340px; object-fit: cover; object-position: top; border-radius: 23px; }
.homeCardOrder { right: calc(50% + 200px); top: 110px; display: flex; align-items: center; gap: 12px; padding: 14px 20px 14px 14px; animation-delay: -2s; }
.homeCardOrder b { display: block; font-size: 14px; color: var(--homeInk); }
.homeCardOrder span:last-child { font-size: 12px; color: var(--homeMuted); line-height: 1.4; }
.homeCardIcon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; font-size: 18px; }
.homeIconCoral { background: var(--homeTileCoral); color: var(--red); }
.homeCardShip { right: calc(50% + 170px); top: 360px; padding: 16px 20px; width: 220px; animation-delay: -3.5s; }
.homeCardSales { left: calc(50% + 220px); top: 40px; padding: 14px 18px; width: 190px; animation-delay: -4.5s; }
.homeCardLabel { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--homeMuted); margin-bottom: 10px; }
@keyframes homeBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.homeSpark { display: flex; align-items: flex-end; gap: 5px; height: 44px; }
.homeSpark s { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--blue), var(--green)); text-decoration: none; transform-origin: bottom; animation: homeGrow 1.2s cubic-bezier(.2, .8, .2, 1) both; }
.homeSpark s:nth-child(1) { height: 35%; animation-delay: .1s; }
.homeSpark s:nth-child(2) { height: 50%; animation-delay: .2s; }
.homeSpark s:nth-child(3) { height: 42%; animation-delay: .3s; }
.homeSpark s:nth-child(4) { height: 66%; animation-delay: .4s; }
.homeSpark s:nth-child(5) { height: 58%; animation-delay: .5s; }
.homeSpark s:nth-child(6) { height: 82%; animation-delay: .6s; }
.homeSpark s:nth-child(7) { height: 100%; animation-delay: .7s; background: var(--red); }
@keyframes homeGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Shipment tracker (hero card and bento tile) */
.homeTrack { list-style: none; margin: 0; padding: 0; }
.homeTrack li { position: relative; padding: 0 0 12px 24px; font-size: 13px; color: var(--homeMuted); }
.homeTrack li:last-child { padding-bottom: 0; }
.homeTrack li::before { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--homeLine); background: var(--white); box-sizing: border-box; }
.homeTrack li::after { content: ""; position: absolute; left: 5px; top: 18px; bottom: 2px; width: 2px; background: var(--homeLine); }
.homeTrack li:last-child::after { display: none; }
.homeTrack li.isDone { color: var(--homeInk); }
.homeTrack li.isDone::before { background: var(--green); border-color: var(--green); }
.homeTrack li.isDone::after { background: var(--green); }
.homeTrack li.isNow { color: var(--homeInk); font-weight: 700; }
.homeTrack li.isNow::before { border-color: var(--red); background: var(--red); animation: homePulse 1.8s infinite; }
@keyframes homePulse { 0% { box-shadow: 0 0 0 0 rgba(255, 100, 100, 0.55); } 100% { box-shadow: 0 0 0 10px rgba(255, 100, 100, 0); } }


/* Logo marquee: the logo files are white, so they are tinted dark here */
.homeLogos { position: relative; z-index: 1; padding-top: 72px; }
.homeLogosLabel { padding-bottom: 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--homeMuted); }
.homeMarquee { overflow: hidden; overflow: clip; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.homeMarqueeTrack, .homeWallTrack { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; animation: homeScroll 40s linear infinite; }
.homeMarquee:hover .homeMarqueeTrack, .homeWall:hover .homeWallTrack,
.homeMarquee.isPaused .homeMarqueeTrack, .homeWall.isPaused .homeWallTrack { animation-play-state: paused; }
.homeMarqueeTrack li { padding: 0 28px; }
.homeMarqueeTrack img { display: block; width: 150px; height: 50px; object-fit: contain; filter: brightness(0); opacity: 0.45; transition: opacity 0.3s; }
.homeMarqueeTrack img:hover { opacity: 0.85; }
@keyframes homeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== Templates wall ===== */
.homeTemplates { padding-top: 140px; }
.homeWall { overflow: hidden; overflow: clip; padding: 20px 0 30px; }
.homeWallTrack { animation-duration: 60s; }
.homeMarqueeTrack { animation-direction: reverse; } /* logos drift the opposite way to the template wall */
.homeWallTrack li { position: relative; width: 300px; margin-right: 28px; flex-shrink: 0; }
.homeWallTrack img { display: block; width: 100%; height: 380px; object-fit: cover; object-position: top; border-radius: 18px; box-shadow: 0 18px 40px -18px rgba(9, 45, 64, 0.35); transition: transform 0.4s; }
.homeWallTrack li:hover > img { transform: translateY(-8px) scale(1.02); }
/* Template logo badge, about three times the size of the old name pill */
.homeWallLogo {
    position: absolute; left: 14px; right: 14px; bottom: 14px; height: 84px; padding: 16px 20px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px -10px rgba(9, 45, 64, 0.35);
}
.homeWallTrack .homeWallLogo img { width: auto; height: auto; max-width: 100%; max-height: 48px; border-radius: 0; box-shadow: none; transform: none; }

/* ===== Showcase panel ===== */
.homeShowcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; align-items: center; }
.homeShowcaseText h3 { font-size: 32px !important; line-height: 1.15 !important; font-weight: 700 !important; letter-spacing: -0.5px; margin: 0 !important; }
.homeShowcaseText p { padding-top: 16px; font-size: 17px; line-height: 1.6; color: var(--homeMuted); }
.homePanel { border-radius: 28px; padding: 48px; overflow: hidden; }
.homePanel img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: var(--homeShadow); transition: transform 0.6s; }
.homePanel:hover img { transform: scale(1.02); }
.homePanelTeal { background: linear-gradient(135deg, rgba(75, 192, 192, 0.35), rgba(161, 197, 136, 0.35)); }

/* ===== Everything built in: card carousel with sliding tabs ===== */
.homeKit { padding-bottom: 100px; }
.homeKitHead { text-align: center; }
.homeKitHead .homeDisplay { margin: 0 auto !important; text-align: center !important; max-width: 900px; }
.homeKitHead .homeDisplay em { font-style: italic; color: var(--red); }
.homeKitHead .homeLead { margin: 0 auto !important; }

.homeKitStage { position: relative; height: 410px; margin-top: 56px; }
.homeKitCard {
    position: absolute; left: 50%; top: 0; width: 360px; padding: 22px 22px 20px; border-radius: 24px;
    background: var(--white); border: 1px solid var(--homeLine); box-shadow: var(--homeShadow);
    transform: translateX(-50%); cursor: pointer;
    transition: transform 0.75s cubic-bezier(.2, .8, .2, 1), opacity 0.6s, filter 0.6s;
}
.homeKitCard.isActive { cursor: default; }
.homeKitStage:not(.isReady) .homeKitCard:not(.isActive) { display: none; }
.homeKitLabel { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--homeMuted); }
.homeKitLabel i { color: var(--red); font-size: 13px; }
.homeKitUi { font-size: 13px; color: var(--homeInk); }

/* Mock UI pieces inside the cards */
.kitItem { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid var(--homeLine); }
.kitItem span:nth-child(2) { flex: 1; font-size: 12px; color: var(--homeMuted); }
.kitItem b { display: block; font-size: 14px; color: var(--homeInk); }
.kitItem strong { font-size: 14px; white-space: nowrap; }
.kitItem strong s { margin-right: 6px; font-weight: 400; color: var(--homeMuted); }
.kitThumb { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; font-size: 18px; }
.kitThumbSage { background: var(--homeTileGreen); color: var(--green); }
.kitThumbSand { background: var(--homeTileSand); color: var(--red); }
.kitRow { display: flex; justify-content: space-between; padding: 6px 0; color: var(--homeMuted); }
.kitTotal { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--homeLine); font-weight: 800; color: var(--homeInk); font-size: 15px; }
.kitBtn { display: block; margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--red); color: var(--white); text-align: center; font-weight: 700; }
.kitBrands { display: flex; justify-content: center; gap: 18px; padding-top: 14px; font-size: 12px; font-weight: 800; color: var(--homeMuted); }
.kitMuted { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--homeMuted); }
.kitBig { padding: 4px 0 12px; font-family: "Mulish", sans-serif; font-size: 34px; font-weight: 800; letter-spacing: -1px; }
.kitBigSm { font-size: 20px; letter-spacing: -0.3px; }
.kitUp { font-size: 13px; font-style: normal; font-weight: 700; color: var(--green); letter-spacing: 0; vertical-align: middle; }
.kitChart { display: flex; align-items: flex-end; gap: 8px; height: 90px; }
.kitChart s { flex: 1; border-radius: 6px 6px 0 0; background: var(--blue); text-decoration: none; }
.kitChart s:nth-child(1) { height: 40%; } .kitChart s:nth-child(2) { height: 55%; } .kitChart s:nth-child(3) { height: 45%; }
.kitChart s:nth-child(4) { height: 70%; } .kitChart s:nth-child(5) { height: 60%; } .kitChart s:nth-child(6) { height: 85%; }
.kitChart s:nth-child(7) { height: 100%; background: var(--black); }
.kitTrio { display: flex; gap: 12px; padding-top: 16px; }
.kitTrio span { flex: 1; font-weight: 700; }
.kitTrio small { display: block; font-size: 11px; font-weight: 400; color: var(--homeMuted); }
.kitTrioTight { padding-top: 10px; }
.kitFoot { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 12px; color: var(--homeMuted); }
.kitFoot i { color: var(--blue); }
.kitLive { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--homeTileGreen); }
.kitLiveCoral { background: var(--red); box-shadow: 0 0 0 4px var(--homeTileCoral); }
.kitWaybill { padding: 16px; border: 1.5px dashed var(--homeLine); border-radius: 14px; }
.kitWaybillHead { display: flex; justify-content: space-between; align-items: center; }
.kitWaybillHead span { padding: 2px 8px; border: 1px solid var(--homeLine); border-radius: 6px; font-size: 11px; color: var(--homeMuted); }
.kitBarcode { height: 56px; margin: 14px 0 4px; background: repeating-linear-gradient(90deg, var(--black) 0 2px, transparent 2px 4px, var(--black) 4px 7px, transparent 7px 9px, var(--black) 9px 10px, transparent 10px 13px); }
.kitStock { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--homeLine); }
.kitStock b { display: block; font-size: 14px; }
.kitStock span { font-size: 12px; color: var(--homeMuted); }
.kitStock strong { font-size: 16px; }
.kitLow { color: var(--red); }
.kitLow em { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--homeTileCoral); font-size: 11px; font-style: normal; }
.kitToggle { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--homeLine); font-weight: 700; }
.kitToggle i { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--homeTileGrey); }
.kitToggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(9, 45, 64, 0.25); }
.kitToggle i.isOn { background: var(--green); }
.kitToggle i.isOn::after { left: 19px; }
.kitCode, .kitGift { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 12px 14px; border-radius: 12px; }
.kitCode { border: 1.5px dashed var(--red); font-weight: 800; letter-spacing: 0.06em; }
.kitCode b { color: var(--red); }
.kitGift { background: var(--black); color: var(--white); font-weight: 700; }
.kitBubble { margin-top: 10px; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: var(--homeSoft); line-height: 1.5; }
.kitBubbleMe { margin: 0 0 0 40px; border-radius: 16px 16px 4px 16px; background: var(--black); color: var(--white); }
.kitSearch { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--homeLine); color: var(--homeMuted); }
.kitResult { padding-top: 16px; line-height: 1.45; }
.kitResult small { display: block; font-size: 11px; color: var(--homeMuted); }
.kitResult b { display: block; padding: 4px 0; font-size: 16px; color: var(--black); }
.kitResult span { color: var(--homeMuted); }
.kitTheme { height: 190px; border-radius: 14px; overflow: hidden; }
.kitTheme img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.kitSwatches { display: flex; gap: 10px; padding-top: 14px; }
.kitSwatches i { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--homeLine); }
.kitSwatches i:nth-child(1) { background: var(--black); box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--red); }
.kitSwatches i:nth-child(2) { background: var(--red); }
.kitSwatches i:nth-child(3) { background: var(--blue); }
.kitSwatches i:nth-child(4) { background: var(--green); }
.kitSwatches i:nth-child(5) { background: var(--homeTileSand); }
.kitCheck { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-weight: 600; }
.kitCheck::before { content: "✓"; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--homeTileGreen); color: var(--green); font-size: 11px; font-weight: 800; }
.kitReady { display: flex; justify-content: space-between; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--homeTileGreen); font-weight: 700; }

/* Tab strip: the track slides so the active tab sits in the middle; brackets mark it */
.homeKitTabs { position: relative; overflow: hidden; overflow: clip; margin-top: 8px; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }
.homeKitTabTrack { display: flex; gap: 28px; width: max-content; transition: transform 0.6s cubic-bezier(.2, .8, .2, 1); }
.homeKitTab { position: relative; padding: 6px 16px; border: 0; background: none; cursor: pointer; font-family: "Mulish", sans-serif; font-size: 22px; font-weight: 600; color: var(--homeInk); white-space: nowrap; transition: opacity 0.4s, color 0.4s; }
.homeKitTab::before, .homeKitTab::after { content: ""; position: absolute; top: 0; bottom: 0; width: 8px; border: 2.5px solid var(--red); opacity: 0; transition: opacity 0.3s; }
.homeKitTab::before { left: 0; border-right: 0; border-radius: 10px 0 0 10px; }
.homeKitTab::after { right: 0; border-left: 0; border-radius: 0 10px 10px 0; }
/* Foundation turns button text white on hover/focus; keep the tabs dark */
.homeKitTab:hover, .homeKitTab:focus, .homeKitTab:active { color: var(--homeInk); background: none; }
.homeKitTab:hover { opacity: 1 !important; }
.homeKitTab.isActive { font-weight: 800; }
.homeKitTab.isActive::before, .homeKitTab.isActive::after { opacity: 1; }
.homeKitTab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 10px; }
.homeKitDescs { min-height: 64px; padding-top: 20px; text-align: center; }
.homeKitDescs p { display: none; max-width: 620px; margin: 0 auto !important; font-size: 17px; line-height: 1.6; color: var(--homeMuted); }
.homeKitDescs p.isActive { display: block; animation: homeRise 0.5s cubic-bezier(.2, .8, .2, 1) both; }

/* ===== Steps ===== */
.homeStepsSection { background: var(--homeSoft); }
.homeSteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.homeSteps li { padding: 36px; border-radius: 24px; background: var(--white); border: 1px solid var(--homeLine); }
.homeStepNum { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 28px; border-radius: 50%; background: var(--black); color: var(--white); font-family: "Mulish", sans-serif; font-size: 20px; font-weight: 800; }
.homeSteps li:nth-child(2) .homeStepNum { background: var(--blue); }
.homeSteps li:nth-child(3) .homeStepNum { background: var(--red); }
.homeSteps h3 { font-size: 24px !important; font-weight: 700 !important; margin: 0 !important; }
.homeSteps p { padding-top: 10px; font-size: 15px; line-height: 1.6; color: var(--homeMuted); }

/* ===== Reviews ===== */
.homeQuote { margin: 0 0 120px; }
.homeQuote blockquote { margin: 0; padding: 0; border: 0; font-family: "Mulish", sans-serif; font-size: 48px; line-height: 1.15; font-weight: 700; letter-spacing: -1px; color: var(--homeInk); max-width: 1000px; }
.homeQuote figcaption { padding-top: 24px; font-size: 16px; color: var(--homeMuted); }
.homeQuote figcaption::before { content: ""; display: inline-block; width: 32px; height: 2px; margin-right: 12px; vertical-align: middle; background: var(--red); }
.homeLoveTitle { margin-bottom: 48px !important; }
.homeReviews { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.homeReview { display: flex; flex-direction: column; margin: 0; padding: 28px; border-radius: 24px; background: var(--homeSoft); border: 1px solid var(--homeLine); }
.homeStars { color: var(--homeStar); font-size: 15px; letter-spacing: 3px; margin-bottom: 16px; }
.homeReview blockquote { flex: 1; margin: 0; padding: 0; border: 0; font-size: 15px; line-height: 1.6; color: var(--homeInk); }
.homeReview figcaption { display: flex; align-items: center; gap: 10px; margin-top: 24px; font-weight: 700; font-size: 14px; color: var(--homeInk); }
.homeReview figcaption img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

/* ===== FAQ ===== */
.homeFaqGrid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.homeFaqIntro { position: sticky; top: 120px; }
.homeFaq details { border-bottom: 1px solid var(--homeLine); }
.homeFaq details:first-child { border-top: 1px solid var(--homeLine); }
.homeFaq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 26px 0; font-family: "Mulish", sans-serif; font-weight: 700; font-size: 20px; color: var(--homeInk); }
.homeFaq summary::-webkit-details-marker { display: none; }
.homeFaq summary::after { content: "+"; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--homeTileGrey); font-size: 22px; line-height: 1; transition: transform 0.25s, background-color 0.25s, color 0.25s; }
.homeFaq details[open] summary::after { transform: rotate(45deg); background: var(--black); color: var(--white); }
.homeFaq details p { padding: 0 48px 26px 0; font-size: 16px; line-height: 1.7; color: var(--homeMuted); }

/* ===== Articles ===== */
.homeArticlesSection { padding-top: 40px; }
.homeArticles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.homeArticle { position: relative; }
.homeArticleImg { border-radius: 20px; overflow: hidden; }
.homeArticleImg img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.5s; }
.homeArticle:hover .homeArticleImg img { transform: scale(1.05); }
.homeArticle h3 { font-size: 21px !important; line-height: 1.3 !important; font-weight: 700 !important; margin: 20px 0 0 !important; }
.homePage .homeArticle h3 a { text-decoration: none; }
.homeArticle h3 a::after { content: ""; position: absolute; inset: 0; }
.homeArticle p { padding-top: 8px; font-size: 15px; line-height: 1.6; color: var(--homeMuted); }

/* ===== Closing CTA ===== */
.homeFinal { padding: 40px 32px 120px; }
.homeFinalCard {
    position: relative; max-width: 1240px; margin: 0 auto; padding: 120px 32px; border-radius: 36px; text-align: center; overflow: hidden;
    background:
        radial-gradient(50% 70% at 10% 20%, rgba(75, 192, 192, 0.45), transparent 70%),
        radial-gradient(45% 70% at 90% 80%, rgba(255, 100, 100, 0.3), transparent 70%),
        radial-gradient(60% 60% at 60% 10%, rgba(161, 197, 136, 0.45), transparent 70%),
        var(--homeSoft);
}
.homeFinalCard .homeDisplay { margin: 0 auto !important; text-align: center !important; font-size: 64px !important; }
.homeFinalCard .homeLead { margin: 0 auto !important; }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
    .homeHero h1 { font-size: 64px !important; letter-spacing: -1.5px; }
    .homeHeroTitleBox { min-height: calc(64px * 1.02 * 2); }
    .homeDisplay { font-size: 46px !important; }
    .homeFinalCard .homeDisplay { font-size: 50px !important; }
    .homeQuote blockquote { font-size: 38px; }
    .homeReviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .homeCardSales { display: none; }
}

@media (max-width: 860px) {
    .homeSection { padding: 80px 0; }
    .homeWrap { padding: 0 20px; }
    .homeHero { padding-top: 70px; }
    .homeHero h1 { font-size: 44px !important; letter-spacing: -1px; }
    .homeHeroTitleBox { min-height: calc(44px * 1.02 * 3); }
    .homeHeroLead { font-size: 17px; }
    .homeDisplay, .homeFinalCard .homeDisplay { font-size: 34px !important; letter-spacing: -0.8px; }
    .homeLead { font-size: 17px; }
    .homeIntro { margin-bottom: 40px; }
    .homeIntroRow { flex-direction: column; align-items: flex-start; }
    .homeStage { height: 420px; margin-top: 48px; }
    .homeShot { left: 16px; right: 16px; width: auto; margin-left: 0; }
    .homeSlotL, .homeSlotR { opacity: 0; transform: scale(0.94); }
    .homeBrowser img { height: 360px; }
    .homePhone { left: auto; right: 8px; top: 170px; width: 120px; border-radius: 22px; padding: 6px; }
    .homePhone img { height: 210px; border-radius: 17px; }
    .homeCardOrder { right: auto; left: 8px; top: 300px; padding: 10px 14px 10px 10px; }
    .homeCardIcon { width: 34px; height: 34px; font-size: 15px; }
    .homeCardShip { display: none; }
    .homeLogos { padding-top: 48px; }
    .homeTemplates { padding-top: 80px; }
    .homeWallTrack li { width: 220px; margin-right: 18px; }
    .homeWallTrack img { height: 280px; }
    .homeWallLogo { left: 10px; right: 10px; bottom: 10px; height: 64px; padding: 12px 14px; }
    .homeWallTrack .homeWallLogo img { max-height: 36px; }
    .homeShowcase { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .homePanel { padding: 20px; border-radius: 20px; }
    .homeSteps, .homeArticles { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .homeQuote { margin-bottom: 72px; }
    .homeQuote blockquote { font-size: 28px; }
    .homeFaqGrid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .homeFaqIntro { position: static; }
    .homeFaq summary { font-size: 17px; padding: 20px 0; }
    .homeFaq details p { padding-right: 0; }
    .homeFinal { padding: 0 16px 80px; }
    .homeKitStage { height: 400px; margin-top: 40px; }
    .homeKitTab { font-size: 18px; padding: 6px 12px; }
    .homeKitTabTrack { gap: 16px; }
    .homeFinalCard { padding: 72px 20px; border-radius: 26px; }
}

@media (max-width: 560px) {
    .homeHero h1 { font-size: 38px !important; }
    .homeHeroTitleBox { min-height: calc(38px * 1.02 * 3); }
    .homeHeroSteps { gap: 6px 16px; }
    .homeHeroStep { font-size: 11px; letter-spacing: 0.12em; }
    .homeHeroLead { min-height: calc(6.4em + 28px); }
    .homeReviews { grid-template-columns: minmax(0, 1fr); }
    .homeCtas .homeBtn { width: 100%; }
    .homeKitCard { width: 300px; padding: 18px; }
}

/* prefers-reduced-motion is deliberately not honoured: the full animations run for every visitor,
   including phones whose battery saver turns the setting on. See git history for the reduced-motion version. */