/* Public inner pages (About, How it works, ...). Load after home.css: they share its colour tokens, type and
   buttons (.homePage, .homeWrap, .homeDisplay, .homeLead, .homeBtn) but use a calmer layout: white space,
   one idea per section, no motion beyond AOS fades. Classes are prefixed .page* so nothing leaks. */

.pageSection { padding: 110px 0; }
.pageSoft { background: var(--homeSoft); }
.pageEyebrow { padding-bottom: 14px; font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.pageCentre { text-align: center; }
.pageCentre .homeDisplay, .pageCentre .homeLead { margin-left: auto !important; margin-right: auto !important; text-align: center !important; }
.homePage .homeLead + .homeLead { padding-top: 16px; }
/* A bold one-liner that closes a section */
.pageClosing { padding-top: 28px; font-family: "Mulish", sans-serif; font-size: 20px; line-height: 1.4; font-weight: 800; color: var(--homeInk); }
.pageCentre .pageClosing { max-width: 640px; margin: 0 auto !important; }

/* Hero: text left, picture right */
.pageHero { padding: 100px 0 90px; }
.pageHero h1 { font-size: 64px !important; line-height: 1.05 !important; font-weight: 700 !important; letter-spacing: -2px; margin: 0 !important; }
.pageTagline { padding-top: 20px; font-family: "Mulish", sans-serif; font-size: 24px; line-height: 1.3; font-weight: 700; color: var(--red); }
.pageCentre h1 { max-width: 900px; margin: 0 auto !important; text-align: center !important; }
.pageCentre .pageTagline { max-width: 720px; margin: 0 auto !important; padding-bottom: 8px; }

/* Partner cards: logo tile, short description, ticked list, link at the bottom */
.pageCards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pageCard { display: flex; flex-direction: column; padding: 24px; border-radius: 24px; background: var(--white); border: 1px solid var(--homeLine); }
.pageCardLogo { display: flex; align-items: center; justify-content: center; height: 110px; margin-bottom: 24px; border-radius: 16px; background: var(--homeSoft); }
.pageCardLogo img { display: block; width: auto; max-width: 70%; max-height: 64px; }
.pageCardIcon { display: flex; align-items: center; gap: 10px; font-family: "Mulish", sans-serif; font-size: 26px; font-weight: 800; color: var(--homeInk); }
.pageCardIcon i { color: var(--red); }
.pageCard h3 { font-size: 22px !important; font-weight: 700 !important; margin: 0 !important; }
.pageCard > p { padding-top: 10px; font-size: 15px; line-height: 1.6; color: var(--homeMuted); }
.pageTicks { list-style: none; margin: 18px 0 0; padding: 0; }
.pageTicks li { display: flex; gap: 10px; padding: 5px 0; font-size: 14px; line-height: 1.5; color: var(--homeInk); }
.pageTicks li::before { content: "✓"; flex-shrink: 0; width: 16px; color: var(--pageTickGreen); font-size: 16px; font-weight: 800; line-height: 1.4; }
.homePage .pageCardLink { margin-top: auto; padding-top: 20px; font-size: 14px; font-weight: 700; }
.pageCardsTop { margin-top: 56px; }

/* Technology partners: icon, name, one line */
.pageTech { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pageTech li { padding: 28px 24px; border-radius: 24px; border: 1px solid var(--homeLine); text-align: center; }
.pageTechIcon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 20px; background: var(--homeSoft); font-size: 34px; color: var(--homeInk); }
.pageTech h3 { font-size: 18px !important; font-weight: 700 !important; margin: 0 !important; text-align: center !important; }
.pageTech p { padding-top: 8px; font-size: 14px; line-height: 1.6; color: var(--homeMuted); }
.pageNote { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 720px; margin: 40px auto 0 !important; font-size: 14px; color: var(--homeMuted); text-align: center; }
.pageNote i { color: var(--green); }

/* "Coming soon" tag above a reason */
.pageSoon { display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: 999px; background: var(--homeTileCoral); color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.pageReasons .pageSoon + h3::before { display: none; }
.pageCentreText { text-align: center; }

/* Templates: gallery cards (eCommerce_Demo) and the detail page (Controls/TemplateDetail.ascx) */
.homeBtn.pageBtnSm { padding: 10px 20px; font-size: 14px; }
.pageTplGrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 28px; }
.pageTplCard { display: flex; flex-direction: column; }
.pageTplShot { position: relative; display: block; overflow: hidden; border-radius: 20px; background: var(--white); box-shadow: 0 18px 40px -18px rgba(9, 45, 64, 0.35); }
.pageTplShot img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 667; object-fit: cover; object-position: top; transition: transform 0.5s; }
.pageTplCard:hover .pageTplShot img, .pageTplMore a:hover .pageTplShot img { transform: scale(1.03); }
.pageTplBadge { position: absolute; z-index: 1; top: 14px; left: 14px; padding: 5px 12px; border-radius: 999px; background: var(--red); color: var(--white); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.pageTplCard h2 { font-size: 24px !important; font-weight: 700 !important; margin: 22px 0 0 !important; }
.homePage .pageTplCard h2 a { text-decoration: none; }
.pageTplCard > p { padding-top: 8px; font-size: 15px; line-height: 1.6; color: var(--homeMuted); }
.pageTplActions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 18px; }
.pageTplGrid + .pageNote { margin-top: 56px !important; }

.pageBack { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 40px; font-size: 14px; font-weight: 700; }
.homePage .pageBack { text-decoration: none; color: var(--homeMuted); }
.homePage .pageBack:hover { color: var(--homeInk); }
.pageTplLogo { margin: 0 !important; line-height: 1 !important; }
.pageTplLogo img { display: block; width: auto; max-width: 100%; max-height: 72px; }
.pageHero .pagePic img { max-width: 420px; margin: 0 auto; border-radius: 14px; box-shadow: var(--homeShadow); }

.pageCols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: start; }
.pageCols h2 { font-size: 32px !important; line-height: 1.15 !important; font-weight: 700 !important; letter-spacing: -0.5px; margin: 0 0 12px !important; }
.pageNoteBox { margin-top: 32px; padding: 24px; border-radius: 20px; background: var(--homeTileSand); }
.pageNoteBox b { display: block; font-family: "Mulish", sans-serif; font-size: 16px; }
.pageNoteBox p { padding-top: 6px; font-size: 14px; line-height: 1.6; color: var(--homeMuted); }
.pageNoteBox ul { margin: 10px 0 0 18px; padding: 0; font-size: 14px; line-height: 1.7; color: var(--homeInk); }

.pageMoreHead { margin-bottom: 40px; }
.pageMoreHead h2 { font-size: 32px !important; font-weight: 700 !important; margin: 0 !important; }
.pageTplMore { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.homePage .pageTplMore a { display: block; text-decoration: none; }
.pageTplMore b { display: block; padding-top: 14px; font-family: "Mulish", sans-serif; font-size: 17px; color: var(--homeInk); }

/* Extensions: compact four-column grid of icon, name and one line */
.pageExtGrid { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pageExtGrid li { padding: 26px 24px; border-radius: 24px; background: var(--white); border: 1px solid var(--homeLine); }
.pageExtIcon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 14px; background: var(--homeTileCoral); color: var(--red); font-size: 22px; }
.pageExtGrid h3 { font-size: 19px !important; font-weight: 700 !important; margin: 0 !important; }
.pageExtGrid p { padding-top: 8px; font-size: 14px; line-height: 1.6; color: var(--homeMuted); }

/* Features table: search box, sticky plan header, grouped rows with ticks and dashes */
.pageSr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pageFeatSearch { position: relative; max-width: 520px; margin: 36px auto 0; }
.pageFeatSearch i { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: var(--homeMuted); }
/* main.css forces every input to 40px / 14px with !important, so these need it too */
.homePage .pageFeatSearch input { height: 56px !important; margin: 0; padding: 0 22px 0 52px; border: 1px solid var(--homeLine); border-radius: 999px !important; background: var(--white); box-shadow: 0 10px 30px -18px rgba(9, 45, 64, 0.35); font-family: Poppins, sans-serif; font-size: 16px !important; color: var(--homeInk); }
.homePage .pageFeatSearch input::placeholder { font-size: 16px !important; }
.homePage .pageFeatSearch input:focus { outline: none; border-color: var(--black); }
.pageFeatSection { padding: 0 0 110px; }
.pageFeat { width: 100%; margin: 0; border: 0; border-collapse: separate; border-spacing: 0; background: transparent; table-layout: fixed; }
.pageFeat [hidden] { display: none; }
.pageFeat thead th { position: sticky; top: 68px; z-index: 2; padding: 18px 12px; background: var(--white); border-bottom: 2px solid var(--black); font-family: "Mulish", sans-serif; font-size: 16px; font-weight: 800; color: var(--homeInk); text-align: center; }
.pageFeat thead th:first-child { width: 46%; }
.pageFeat thead small { display: block; padding-top: 2px; font-family: Poppins, sans-serif; font-size: 12px; font-weight: 400; color: var(--homeMuted); }
.pageFeat tr { background: transparent !important; }
.pageFeat .pageFeatGroup th { padding: 40px 0 12px; border-bottom: 1px solid var(--homeLine); font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); text-align: left; }
.pageFeat tbody th[scope="row"] { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--homeLine); font-family: "Mulish", sans-serif; font-size: 16px; font-weight: 700; color: var(--homeInk); text-align: left; }
.pageFeat tbody th small { display: block; padding-top: 3px; font-family: Poppins, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--homeMuted); }
.pageFeat tbody td { padding: 16px 8px; border-bottom: 1px solid var(--homeLine); font-size: 14px; font-weight: 700; color: var(--homeInk); text-align: center; vertical-align: middle; }
/* The brand --green (#A1C588) is too pale for a tick on a light background; this one reads clearly */
.homePage { --pageTickGreen: #16a34a; }
.pageFeat .pageYes::before { content: "✓"; color: var(--pageTickGreen); font-size: 22px; font-weight: 800; line-height: 1; }
.pageVal { display: inline-block; padding: 5px 14px; border-radius: 999px; background: var(--black); color: var(--white); font-size: 13px; font-weight: 700; white-space: nowrap; }
.pageFeat .pageNo::before { content: "—"; color: rgba(9, 45, 64, 0.25); font-weight: 400; }
.pageFeatEmpty { padding: 40px 0 0; text-align: center; color: var(--homeMuted); }

/* Pricing: three plan cards, an "every plan" strip and a short comparison table */
.pagePlansSection { padding: 0 0 110px; }
.pagePlans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.pagePlan { position: relative; display: flex; flex-direction: column; padding: 32px 28px; border-radius: 24px; background: var(--white); border: 1px solid var(--homeLine); }
.pagePlanFeatured { border: 2px solid var(--black); box-shadow: var(--homeShadow); }
.pagePlanBadge { position: absolute; top: -14px; left: 28px; padding: 5px 14px; border-radius: 999px; background: var(--black); color: var(--white); font-size: 12px; font-weight: 700; }
.pagePlan h2 { font-size: 26px !important; font-weight: 700 !important; margin: 0 !important; }
.pagePlanFor { padding-top: 6px; font-size: 15px; color: var(--homeMuted); }
.pagePlanPrice { padding: 20px 0 22px; }
.pagePlanPrice b { font-family: "Mulish", sans-serif; font-size: 48px; font-weight: 800; letter-spacing: -1.5px; color: var(--homeInk); }
.pagePlanPrice span { padding-left: 4px; font-size: 15px; color: var(--homeMuted); }
.pagePlan > .homeBtn { width: 100%; }
.pagePlanPlus { padding-top: 22px; font-size: 14px; font-weight: 700; color: var(--homeInk); }
.pagePlan .pageTicks { margin-top: 14px; }
.pagePlan > .homeBtn + .pageTicks { margin-top: 22px; }
.pageEvery { margin-top: 40px; padding: 28px 32px; border-radius: 24px; background: var(--homeSoft); }
.pageEvery h2 { font-size: 18px !important; font-weight: 700 !important; margin: 0 !important; }
.pageEvery ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; }
.pageEvery li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--homeInk); }
.pageEvery i { width: 20px; text-align: center; color: var(--red); }
.pageCompare { margin-top: 48px; }
.pageCompare tbody th small a { font-weight: 700; }

/* Sign in, forgot password and register: a calm card (or a split panel on register) with labelled fields.
   main.css forces every input to 40px / 14px with !important, so the field sizes here need it too. */
.pageAuth { display: flex; justify-content: center; padding: 40px 20px 56px; background: var(--homeSoft); }
/* Let the grey sign-in area fill the space down to the footer (the master stretches .MainContent on short pages) */
.MainContent:has(> .homePage > .pageAuth) { display: flex; flex-direction: column; }
.MainContent:has(> .homePage > .pageAuth) > .homePage { display: flex; flex-direction: column; flex: 1 0 auto; }
.MainContent:has(> .homePage > .pageAuth) .pageAuth { flex: 1 0 auto; align-items: flex-start; }
.pageAuthCard { width: 100%; max-width: 440px; padding: 32px 36px; border-radius: 24px; background: var(--white); border: 1px solid var(--homeLine); box-shadow: var(--homeShadow); }
.pageAuthCard h1, .pageAuthForm h1 { font-size: 30px !important; line-height: 1.15 !important; font-weight: 700 !important; letter-spacing: -0.5px; margin: 0 !important; text-align: left !important; }
.pageAuthSub { padding-top: 8px; font-size: 15px; line-height: 1.6; color: var(--homeMuted); }
.pageAuthGoogle { display: flex; justify-content: center; min-height: 44px; margin-top: 20px; }
.pageAuthOr { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; font-size: 13px; color: var(--homeMuted); }
.pageAuthOr::before, .pageAuthOr::after { content: ""; flex: 1; height: 1px; background: var(--homeLine); }
.pageField { display: block; margin: 14px 0 0 !important; font-size: 14px !important; font-weight: 700 !important; color: var(--homeInk) !important; text-align: left; }
.pageField small { display: block; padding-top: 6px; font-size: 12px; font-weight: 400; color: var(--homeMuted); text-transform: none !important; }
.homePage .pageField input[type="text"], .homePage .pageField input[type="password"], .homePage .pageField input[type="email"], .homePage .pageField select {
    display: block; width: 100% !important; max-width: none !important; height: 46px !important; margin: 6px 0 0 !important; padding: 0 16px !important;
    border: 1px solid rgba(9, 45, 64, 0.18) !important; border-radius: 12px !important; background: var(--white) !important; box-shadow: none !important;
    font-family: Poppins, sans-serif; font-size: 15px !important; font-weight: 400; color: var(--homeInk) !important;
}
.homePage .pageField input:focus, .homePage .pageField select:focus { outline: none; border-color: var(--black) !important; box-shadow: 0 0 0 3px rgba(9, 45, 64, 0.08) !important; }
.homePage .pageField input::placeholder { font-size: 15px !important; color: rgba(9, 45, 64, 0.35) !important; }
.pageFieldPassword { position: relative; }
.homePage .pageFieldPassword input { padding-right: 76px !important; }
.homePage .pageFieldToggle { position: absolute; right: 8px; bottom: 7px; height: 36px; margin: 0 !important; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font-family: Poppins, sans-serif; font-size: 13px; font-weight: 700; color: var(--homeInk); cursor: pointer; }
.homePage .pageFieldToggle:hover, .homePage .pageFieldToggle:focus { background: var(--homeTileGrey); color: var(--homeInk); }
.pageAuthCheck { display: flex; align-items: center; gap: 10px; margin: 0 !important; font-size: 14px !important; font-weight: 400 !important; color: var(--homeInk) !important; cursor: pointer; }
.pageAuthCheck input { width: 16px; height: 16px; margin: 0 !important; }
.homePage .pageAuthBtn { width: 100%; margin: 18px 0 0 !important; padding: 13px 30px; border: 0; cursor: pointer; }
.pageAuthRow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 12px; font-size: 14px; }
.homePage .pageAuthRow a { font-weight: 700; }
.pageAuthFoot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--homeLine); font-size: 14px; color: var(--homeMuted); text-align: center; }
.homePage .pageAuthFoot a { font-weight: 700; color: var(--homeInk); }
.pageAuthNotice:empty { display: none; }
.pageAuthNotice { margin-top: 20px; padding: 14px 16px; border-radius: 12px; background: var(--homeTileCoral); font-size: 14px; line-height: 1.6; color: var(--homeInk); }
.pageAuthNotice.isGood { background: var(--homeTileGreen); }

/* Register: compact two-column form on the left (fits a laptop screen), home page hero look on the right.
   This page has no master or Foundation, so it sets border-box sizing itself. */
.pageAuthSplit, .pageAuthSplit * { box-sizing: border-box; }
.pageAuthSplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; margin: 0; }
.pageAuthForm { display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 640px; margin: 0 auto; padding: 28px 40px; }
.pageAuthTop { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.pageAuthLogo img { display: block; width: 140px; height: auto; }
.pageAuthTopLink { font-size: 14px; color: var(--homeMuted); }
.homePage .pageAuthTopLink a { font-weight: 700; color: var(--homeInk); }
.pageAuthForm h1 { font-size: 28px !important; }
.pageAuthForm .pageAuthSub { padding-top: 4px; }
.pageFieldGrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; margin-top: 6px; }
.pageFieldGrid .pageField { margin-top: 12px !important; font-size: 13px !important; }
.homePage .pageFieldGrid .pageField input[type="text"], .homePage .pageFieldGrid .pageField input[type="password"], .homePage .pageFieldGrid .pageField select { height: 44px !important; margin-top: 6px !important; border-radius: 10px !important; font-size: 14px !important; }
.homePage .pageFieldGrid .pageFieldToggle { bottom: 4px; }
.pageFieldName { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0 10px; }
.pageFieldWide { grid-column: 1 / -1; }
.pageAuthRules { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; }
.pageAuthRules li { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--red); }
.pageAuthRules li.isMet { color: var(--pageTickGreen); }
.pageAuthHint { margin: 0; padding-top: 14px; font-size: 13px; line-height: 1.5; color: var(--homeMuted); }
/* Turnstile's check (300 x 65) and the button share one row; the button is greyed out until both are ready */
.pageAuthSubmit { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.pageAuthChallenge { flex-shrink: 0; min-height: 65px; }
.pageAuthForm .pageAuthSubmit .pageAuthBtn { flex: 1; width: auto; margin: 0 !important; padding: 13px 24px; }
.homePage .pageAuthBtn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.homePage .pageAuthBtn:disabled:hover { background: var(--black); }
.pageAuthForm .pageAuthBtn { margin-top: 16px !important; padding: 13px 30px; }
.pageAuthLoading { padding: 40px 0; text-align: center; }
.pageAuthLoading img { width: 90px; margin: 0 auto 16px; }

.pageAuthAside { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; gap: 36px; height: 100vh; padding: 48px 56px; overflow: hidden; background: var(--homeSoft); }
.pageAuthAside .homeHeroWash { height: 100%; }
.pageAuthAsideText { position: relative; z-index: 1; text-align: center; }
.pageAuthAsideTitle { margin: 0; font-family: "Mulish", sans-serif; font-size: 52px; line-height: 1.05; font-weight: 700; letter-spacing: -1.5px; color: var(--homeInk); }
.pageAuthAsideLead { max-width: 420px; margin: 0 auto; padding-top: 14px; font-size: 17px; line-height: 1.6; color: var(--homeMuted); }
.pageAuthAsideLead + .pageAuthAsideLead { padding-top: 8px; }
.pageAuthAsideLead b { color: var(--homeInk); }
.pageAuthStage { position: relative; z-index: 1; width: 100%; max-width: 520px; margin: 0 auto; }
.pageAuthShot { position: relative; width: 100%; }
.pageAuthShot img { height: min(300px, 34vh); }
.pageAuthOrder { left: -24px; top: 34%; right: auto; }
.pageAuthShip { right: -24px; bottom: -28px; top: auto; left: auto; width: 210px; }

/* Short laptop screens: tighten the register form so it still fits without scrolling */
@media (min-width: 961px) and (max-height: 760px) {
    .pageAuthForm { padding-top: 16px; padding-bottom: 16px; }
    .pageAuthTop { margin-bottom: 12px; }
    .pageAuthForm h1 { font-size: 24px !important; }
    .pageFieldGrid .pageField { margin-top: 8px !important; }
    .homePage .pageFieldGrid .pageField input[type="text"], .homePage .pageFieldGrid .pageField input[type="password"], .homePage .pageFieldGrid .pageField select { height: 40px !important; }
    .pageAuthHint { padding-top: 8px; }
    .pageAuthSubmit { margin-top: 10px; }
}
@media (max-width: 1100px) {
    .pageAuthForm { padding: 28px; }
    .pageAuthAside { padding: 40px; }
    .pageAuthAsideTitle { font-size: 42px; }
}
@media (max-width: 960px) {
    .pageAuthSplit { grid-template-columns: minmax(0, 1fr); }
    .pageAuthAside { display: none; }
    .pageAuthForm { max-width: 640px; padding: 28px 24px 40px; }
}
@media (max-width: 560px) {
    .pageAuthForm { padding: 20px 16px 32px; }
    .pageAuthTop { margin-bottom: 18px; }
    .pageAuthLogo img { width: 120px; }
    .pageAuthTopLink { font-size: 13px; text-align: right; }
    .pageFieldGrid { grid-template-columns: minmax(0, 1fr); }
    .pageAuthSubmit { flex-direction: column; align-items: stretch; }
    .pageAuthChallenge { display: flex; justify-content: center; }
}

@media (max-width: 560px) {
    .pageAuth { padding: 28px 16px 48px; }
    .pageAuthCard { padding: 28px 20px; border-radius: 20px; }
    .pageAuthCard h1, .pageAuthForm h1 { font-size: 26px !important; }
}

/* Story pages (Our Reasons): long text beside a photo that stays in view, a grid of short essays,
   and full-width photo moments with white text over a darkened image */
.pageStoryImg { margin: 0; overflow: hidden; border-radius: 28px; box-shadow: var(--homeShadow); background: var(--homeTileGrey); }
.pageStoryImg img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.pageStorySticky { position: sticky; top: 100px; align-self: start; }
.pageSplit:has(> .pageStorySticky) { align-items: start; }
/* Closing statement in the home hero's type (home.css .homeHero h1): ink with a red accent, the hero lead under it */
.pageStoryStatement { padding-top: 110px; }
.homePage .pageStoryBig { max-width: 980px; margin: 0 auto !important; font-size: 60px; line-height: 1.08; font-weight: 700; letter-spacing: -1.8px; color: var(--homeInk); }
.pageStoryBig span { color: var(--red); }
.pageStoryNarrow { max-width: 760px; }

/* Two blocks on the photo's own colour: the window photo (pure black around the window) blends into the section */
.pageDuo { padding: 110px 0; background: #000; color: var(--white); }
.pageDuoInner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.pageDuoImg { position: sticky; top: 100px; margin: 0; }
.pageDuoImg img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.homePage .pageDuo h2 { margin: 0 0 12px !important; font-size: 40px !important; line-height: 1.12 !important; font-weight: 700 !important; letter-spacing: -1px; color: var(--white) !important; }
.pageDuoText p { padding-top: 14px; font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, 0.78); }
.pageDuo .pageEyebrow { padding: 0 0 14px; font-size: 13px; color: var(--homeTileCoral); }
.pageDuo .pageClosing { color: var(--white); }

.pageBleed { position: relative; overflow: hidden; padding: 140px 0; background: var(--black); color: var(--white); }
.pageBleedImg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pageBleed::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(9, 45, 64, 0.55), rgba(9, 45, 64, 0.85)); }
.pageBleedText { position: relative; z-index: 2; max-width: 760px; }
.homePage .pageBleed h2 { margin: 0 0 12px !important; font-size: 44px !important; line-height: 1.12 !important; font-weight: 700 !important; letter-spacing: -1px; color: var(--white) !important; }
.pageBleed p { padding-top: 14px; font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, 0.82); }
.pageBleed .pageEyebrow { padding: 0 0 14px; font-size: 13px; color: var(--homeTileCoral); }
.pageBleed .pageClosing { color: var(--white); }
.pageBleedFinal .pageBleedText { margin: 0 auto; }
.homePage .pageBleedFinal h2 { font-size: 56px !important; }
.pageBleedLast { font-size: 26px; }
.homeBtn.pageBtnLight { background: var(--white); color: var(--black) !important; }
.homeBtn.pageBtnLight:hover { background: var(--red); color: var(--white) !important; }

@media (max-width: 860px) {
    .pageStorySticky { position: static; }
    .pageStoryImg img { aspect-ratio: 4 / 3; }
    .pageStoryStatement { padding-top: 64px; }
    .homePage .pageStoryBig { font-size: 36px; letter-spacing: -0.8px; }
    .pageBleed { padding: 88px 0; }
    .pageDuo { padding: 64px 0 72px; }
    .pageDuoInner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .pageDuoImg { position: static; max-width: 420px; margin: 0 auto; }
    .pageDuoImg img { aspect-ratio: 1 / 1; }
    .homePage .pageDuo h2 { font-size: 30px !important; }
    .pageDuoText p { font-size: 16px; }
    .homePage .pageBleed h2 { font-size: 32px !important; }
    .homePage .pageBleedFinal h2 { font-size: 36px !important; }
    .pageBleed p { font-size: 16px; }
}

/* Legal pages (privacy policy, terms, cookie notice): one narrow column of plain, readable text */
.pageLegal { max-width: 760px; margin: 0 auto; padding: 72px 24px 110px; }
.pageLegal h1 { font-size: 44px !important; line-height: 1.1 !important; font-weight: 700 !important; letter-spacing: -1px; margin: 0 !important; }
.pageLegalMeta { padding-top: 12px; font-size: 14px; color: var(--homeMuted); }
.pageLegalNav { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 8px; }
.homePage .pageLegalNav a { padding: 7px 16px; border-radius: 999px; background: var(--homeTileGrey); font-size: 14px; font-weight: 700; text-decoration: none; }
.homePage .pageLegalNav a[aria-current="page"] { background: var(--black); color: var(--white); }
.pageLegal h2 { margin: 48px 0 0 !important; font-size: 24px !important; line-height: 1.25 !important; font-weight: 700 !important; }
.pageLegal h3 { margin: 28px 0 0 !important; font-size: 18px !important; font-weight: 700 !important; }
.pageLegal p, .pageLegal li { font-size: 17px; line-height: 1.75; color: var(--homeInk); }
.pageLegal p { padding-top: 14px; }
.pageLegal .pageEyebrow { padding: 0 0 14px; font-size: 13px; line-height: 1.4; color: var(--red); }
.pageLegal .pageLegalMeta { padding-top: 12px; font-size: 14px; color: var(--homeMuted); }
.pageLegal ul { margin: 14px 0 0 22px; padding: 0; }
.pageLegal li + li { margin-top: 6px; }
.pageLegal code { padding: 2px 6px; border-radius: 6px; background: var(--homeTileGrey); font-size: 15px; color: var(--homeInk); }
.pageLegal table { width: 100%; margin: 18px 0 0; border: 0; border-collapse: collapse; background: transparent; }
.pageLegal th, .pageLegal td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--homeLine); font-size: 15px; line-height: 1.6; text-align: left; vertical-align: top; }
.pageLegal th { font-weight: 700; color: var(--homeInk); }
.pageLegal tr { background: transparent !important; }

/* A small mock of a portal screen, drawn in HTML so it stays sharp and true to the real form */
.pageMock { width: 100%; max-width: 420px; padding: 24px; border-radius: 20px; background: var(--white); box-shadow: var(--homeShadow); text-align: left; }
.pageMockLabel { display: block; padding-bottom: 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--homeMuted); }
.pageMockRow { padding: 10px 0; border-top: 1px solid var(--homeLine); }
.pageMockRow small { display: block; font-size: 11px; color: var(--homeMuted); }
.pageMockRow b { font-size: 15px; color: var(--homeInk); }
.pageMockBtn { display: block; margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--black); color: var(--white); text-align: center; font-weight: 700; font-size: 14px; }
/* FAQ: one narrow reading column; topic links, then a short heading over each group of questions */
.pageFaqList { padding: 0 0 110px; }
.pageFaqList .homeWrap { max-width: 840px; }
.pageFaqNav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-bottom: 24px; }
.homePage .pageFaqNav a { padding: 9px 18px; border-radius: 999px; background: var(--homeTileGrey); font-size: 14px; font-weight: 700; text-decoration: none; transition: background-color 0.2s, color 0.2s; }
.homePage .pageFaqNav a:hover { background: var(--black); color: var(--white); }
.pageFaqGroup { padding-top: 56px; scroll-margin-top: 100px; }
.pageFaqGroup h2 { margin: 0 0 8px !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red) !important; }
.pageFaqGroup .homeFaq summary { padding: 22px 0; font-size: 18px; }
.pageFaqGroup .homeFaq summary::after { width: 30px; height: 30px; font-size: 18px; background: transparent; border: 1.5px solid var(--homeLine); }
.pageFaqGroup .homeFaq details[open] summary::after { border-color: var(--black); }
.homeFaq .pageFaqAnswer { padding: 0 48px 22px 0; }
.homeFaq .pageFaqAnswer p { padding: 0 0 10px; font-size: 16px; line-height: 1.7; color: var(--homeMuted); }
.homeFaq .pageFaqAnswer .pageClosing { padding: 6px 0 10px; font-size: 17px; color: var(--homeInk); }

/* Two columns: text and a picture on a soft tile */
.pageSplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.pageSplit .homeLead { font-size: 17px; }
.pageSplit h2 { font-size: 40px !important; line-height: 1.12 !important; font-weight: 700 !important; letter-spacing: -1px; margin: 0 0 8px !important; }
.pageSplitFlip .pagePic, .pageSplitFlip .pageStoryImg { order: -1; }
.pagePic { display: flex; align-items: center; justify-content: center; padding: 40px; border-radius: 28px; }
.pagePic img { display: block; width: 100%; height: auto; }
.pagePicTeal { background: linear-gradient(135deg, rgba(75, 192, 192, 0.3), rgba(161, 197, 136, 0.3)); }
.pagePicSand { background: var(--homeTileSand); }
.pagePicBlue { background: var(--homeTileBlue); }
.pagePicGreen { background: var(--homeTileGreen); }
.pagePicGrey { background: var(--homeTileGrey); }

/* Short titled points under a section */
.pagePoints { list-style: none; margin: 32px 0 0; padding: 0; }
.pagePoints li { padding: 18px 0; border-top: 1px solid var(--homeLine); }
.pagePoints b { display: block; font-family: "Mulish", sans-serif; font-size: 17px; color: var(--homeInk); }
.pagePoints p { padding-top: 4px; font-size: 15px; line-height: 1.6; color: var(--homeMuted); }
.pagePoints p + p { padding-top: 8px; }

/* Plain three-column grid of short reasons */
.pageReasons { list-style: none; margin: 64px 0 0; padding: 0; text-align: left; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; }
.pageReasons h3 { font-size: 20px !important; font-weight: 700 !important; margin: 0 !important; }
.pageReasons h3::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 18px; border-radius: 2px; background: var(--red); }
.pageReasons p { padding-top: 10px; font-size: 15px; line-height: 1.65; color: var(--homeMuted); }
.pageReasons + .pageClosing { padding-top: 64px; }

/* Numbered steps: three cards, picture on top */
.pageSteps { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; text-align: left; }
.pageSteps li { display: flex; flex-direction: column; padding: 28px; border-radius: 24px; background: var(--white); border: 1px solid var(--homeLine); }
.pageStepPic { display: flex; align-items: center; justify-content: center; height: 200px; margin-bottom: 28px; padding: 24px; border-radius: 18px; background: var(--homeTileBlue); }
.pageStepPic img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.pageSteps .pageEyebrow { padding: 0 0 8px; font-size: 13px; color: var(--red); }
.pageSteps h3 { font-size: 26px !important; font-weight: 700 !important; margin: 0 !important; }
.pageSteps p { padding-top: 12px; font-size: 15px; line-height: 1.6; color: var(--homeMuted); }
.pageSteps .pageClosing { max-width: none; margin: auto 0 0 !important; padding-top: 20px; font-size: 16px; }

@media (max-width: 1100px) {
    .pageHero h1 { font-size: 52px !important; }
    .pageSplit { gap: 48px; }
    .pageSteps { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; }
    .pageCards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pageTech { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pageTplGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pageTplMore { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pageExtGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pagePlans { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; gap: 32px; }
    .pageEvery ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .pageCards { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .pageTech { gap: 14px; margin-top: 40px; }
    .pageTplGrid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .pageExtGrid { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 40px; }
    .pagePlansSection { padding-bottom: 72px; }
    .pageEvery { padding: 24px 20px; }
    .pageEvery ul { grid-template-columns: minmax(0, 1fr); }
    .pageLegal { padding: 48px 20px 72px; }
    .pageLegal h1 { font-size: 34px !important; }
    .pageLegal h2 { font-size: 21px !important; margin-top: 40px !important; }
    .pageLegal p, .pageLegal li { font-size: 16px; }
    .pageFeat thead th { padding: 12px 4px; font-size: 12px; }
    .pageFeat thead th:first-child { width: 49%; }
    .pageFeat thead small { font-size: 11px; }
    .pageFeat thead small span { display: none; }
    .pageFeat tbody th[scope="row"] { font-size: 14px; padding-right: 8px; }
    .pageFeat tbody th small { font-size: 12px; }
    .pageFeat tbody td { padding: 14px 2px; font-size: 12px; }
    .pageFeat .pageYes::before { font-size: 18px; }
    .pageVal { padding: 4px 7px; font-size: 10px; }
    .pageTplMore { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
    .pageCols { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .pageCols h2, .pageMoreHead h2 { font-size: 26px !important; }
    .pageTplLogo img { max-height: 56px; }
    .pageTech li { padding: 22px 14px; }
}
@media (max-width: 860px) {
    .pageSection { padding: 72px 0; }
    .pageHero { padding: 56px 0 64px; }
    .pageHero h1 { font-size: 40px !important; letter-spacing: -1px; }
    .pageSplit { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .pageSplitFlip .pagePic, .pageSplitFlip .pageStoryImg { order: 0; }
    .pagePic { padding: 24px; border-radius: 20px; }
    .pageSplit h2 { font-size: 32px !important; }
    .pageReasons { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 40px; }
    .pageReasons + .pageClosing { padding-top: 40px; }
    .pageSteps { margin-top: 40px; gap: 18px; }
    .pageClosing { font-size: 18px; }
    .pageCentre .pageTagline { font-size: 20px; }
    .pageFaqList { padding-bottom: 72px; }
    .pageFaqGroup { padding-top: 40px; }
    .pageFaqGroup .homeFaq summary { font-size: 17px; padding: 18px 0; }
    .homeFaq .pageFaqAnswer { padding-right: 0; }
}