/* Home page: one screen with the map and, beside it (below it on phones), what MatricMap offers, with a door into each
   part of the site, so nothing needs scrolling. */

/* The same local system font shapes the headline and the final wordmark; no font download. */

.home-v2 { background: var(--paper); }
/* Keep the local-only notice from extending the full-screen hero below the viewport. */
.home-v2 > .preview-note { position: absolute; inset: 0 0 auto; z-index: 6; }
/* The top banner (css/header.css): Tools, My Matric Map and Predictor, as on the other pages, in one row at every width. It stays
   at the top while scrolling and appears once the opening has played. */
/* The banner is the app's: 61px high, 65px on phones (css/header-outside.css). */
.home-v2 .home-front { min-height: calc(100vh - 61px); min-height: calc(100svh - 61px); } /* the first screen fits under the banner */
@media (max-width: 700px) { .home-v2 .home-front { min-height: calc(100vh - 65px); min-height: calc(100svh - 65px); } }
.home-v2 #offer { scroll-margin-top: 65px; } /* a link to #offer lands just below the banner */
.home-v2 main { position: relative; z-index: 1; }
.home-v2 .site-footer { position: relative; z-index: 1; background: var(--paper); }

/* ---- the map, fixed behind everything ---- */
/* A fixed height (the screen with the browser bars hidden), not inset: 0, so the map does not resize and re-centre
   while a phone's address bar slides in and out during scrolling. */
.home-stage { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: 0; }
.home-v2 .home-map { position: absolute; inset: 0; max-width: none; min-height: 0; height: auto; margin: 0; aspect-ratio: auto; display: block; }
.home-v2 .home-map #hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-v2 .home-stage .map-details { position: absolute; inset: 0; pointer-events: none; }
.home-v2 .home-stage .hero-card { display: none !important; } /* the map's own labels say it; the card has no place in a full-screen map */
.home-mode { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 5; margin: 0; transition: opacity .4s ease; }

/* ---- the first screen: the logo over the map and the doors beside it; only the doors' card takes clicks ---- */
.home-front { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 24px 16px; pointer-events: none; }
.home-v2 .home-front .offer-card { pointer-events: auto; }
/* the logo sits at the top of the screen */
.type-title { position: absolute; top: 0; left: 0; right: 0; z-index: 2; margin: 0; padding: max(34px, 7vh) 20px 48px; text-align: center; pointer-events: none;
  font: 900 clamp(1.75rem, 4.7vw, 3.7rem)/1.2 var(--logo-font); letter-spacing: -.045em; color: var(--brand); text-wrap: balance;
  background: linear-gradient(var(--paper) 55%, rgba(251, 250, 246, 0)); }

/* ---- what MatricMap offers, on solid cards over the map ---- */
.home-offer { position: relative; padding: 40px 0 70px; scroll-margin-top: 16px; }
.offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
@media (max-width: 800px) { .offer-grid { grid-template-columns: 1fr; } }
.offer-card { display: grid; gap: 14px; padding: 26px 26px 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: 0 18px 44px rgba(15, 61, 62, .12); }
.offer-kicker { margin: 0; font-size: .92rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-2); }
.offer-card h2 { margin: -6px 0 0; font: 700 1.6rem/1.2 var(--serif); color: var(--brand); }
/* "Map your life after Matric" with the logo's M for both capital Ms: sized to the capital letters, sitting on the baseline */
.m-word { white-space: nowrap; } /* the logo M never wraps away from the rest of its word */
.m-mark { display: inline-block; height: .68em; width: auto; margin: 0 .04em 0 0; vertical-align: -.02em; overflow: visible; }
/* colours: the logo M, its dot, the heading text and the rest of the two M words (set once here) */
.offer-title-logo { --m-line: var(--brand); --m-dot: var(--accent); --m-word: inherit; /* the logo as it is: green M, gold dot */ font-size: clamp(2rem, 6vw, 2.9rem) !important; line-height: 1.12 !important; }
.m-word { color: var(--m-word); }
.m-mark path { fill: none; stroke: var(--m-line); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.m-mark circle { fill: var(--m-dot); }
.offer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.offer-list li { position: relative; padding-left: 28px; line-height: 1.45; }
.offer-list li::before { content: ""; position: absolute; left: 6px; top: 4px; width: 6px; height: 12px; border: solid var(--brand-2); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.offer-promise-title { margin: 6px 0 -4px; font: 700 .8rem/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.offer-promises li::before { border-color: #c98f12; }
.offer-price { margin: 4px 0 0; color: var(--ink-2); }
.offer-price b { color: var(--ink); }
.offer-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.offer-card .fine { margin: 0; }
.offer-card .signup { margin: 4px 0 0; }
.offer-foot { margin-top: 18px; text-align: center; }

/* ---- night ocean: the sea is the page behind the map ---- */
html[data-map-scheme="night"] .home-v2 { background: #0e2d31; }
html[data-map-scheme="night"] .home-v2 .home-offer .offer-foot a { color: #fbf6ea; }
/* dark seas: the title in cream on a patch of the sea itself */
html[data-map-scheme="night"] .type-title { color: #fff; background: linear-gradient(#0e2d31 55%, rgba(14, 45, 49, 0)); }

/* The approved wordmark. */
.title-stage { display: grid; place-items: center; max-width: 1120px; margin: auto; }
.hero-brand { display: inline-flex; align-items: center; gap: .23em; padding: .24em .34em; background: transparent; font: 900 clamp(2rem, 6.7vw, 4rem)/1 var(--logo-font); letter-spacing: -.045em; color: #fff; }
/* phones: a larger logo; 12.5vw still fits a 320px screen */
@media (max-width: 560px) { .hero-brand { font-size: clamp(2.5rem, 12.5vw, 3.2rem); } }
.hero-wordmark { display: inline-flex; }
.hero-wordmark [data-brand-word="map"] { color: var(--logo-gold); }
.hero-brand-mark { width: 1.45em; height: 1.03em; flex: none; overflow: visible; }
.logo-route { fill: none; stroke: currentColor; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.logo-dot { fill: var(--logo-gold); transform-box: fill-box; transform-origin: center; }


/* One card: a door into each part of the site, then All Tools and the demo. */
.home-offer .offer-card .home-offer-start { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 4px 0 0; padding-top: 20px; border-top: 1px solid var(--line); text-align: left; }
.home-offer .offer-card .home-offer-start .btn { min-width: 180px; }
.home-offer .offer-card .offer-example { font-weight: 600; color: var(--brand); text-underline-offset: 3px; }
@media (max-width: 560px) {
  .home-offer .offer-card .home-offer-start { flex-direction: column; align-items: stretch; text-align: center; }
  .home-offer .offer-card .offer-example { padding: 8px 0; }
}



/* Watch the demo: a second button beside Start, and the video large over a dimmed page */
.home-offer .home-demo-open { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.home-offer .home-demo-open small { flex: none; white-space: nowrap; color: var(--ink-3); font-weight: 600; }
.demo-play { flex: none; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }
.demo-dialog { width: min(94vw, calc(86vh * 9 / 16)); max-width: none; padding: 0; border: 0; border-radius: 18px; background: #0f3d3e; overflow: visible; box-shadow: 0 30px 90px rgba(0, 0, 0, .5); }
.demo-dialog::backdrop { background: rgba(8, 26, 28, .78); }
.demo-dialog video { display: block; width: 100%; height: auto; max-height: 86vh; aspect-ratio: 9 / 16; border-radius: 18px; background: #0f3d3e; }
.demo-dialog.is-wide { width: min(1200px, 94vw, calc(86vh * 16 / 9)); }
.demo-dialog.is-wide video { aspect-ratio: 16 / 9; }
.demo-close { position: absolute; top: -14px; right: -14px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; color: var(--ink); font: 700 1.4rem/1 var(--font); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); cursor: pointer; }
.demo-close:focus-visible, .home-demo-open:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) { .demo-close { top: 8px; right: 8px; } } /* inside the video: above it, a tall video pushed it off the top of small phones */

/* The doors: one per part of the site, each the question it answers. My Matric Map first, in the brand green.
   Each door is one compact row: its icon, name and question. */
.home-doors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
.home-door { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 1px; height: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease; }
.home-door:hover { border-color: var(--brand-2); box-shadow: 0 8px 20px rgba(15, 61, 62, .12); color: var(--ink); }
.home-door:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.door-ico { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--brand); color: var(--accent); }
.door-name { font: 700 .98rem/1.25 var(--font); color: var(--brand); }
.door-ask { font: 600 .88rem/1.3 var(--font); }
.door-first { background: var(--brand); border-color: var(--brand); }
.door-first:hover { border-color: var(--brand); color: #fff; }
.door-first .door-name, .door-first .door-ask { color: #fff; }
.door-first .door-ico { background: var(--accent); color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .home-door { transition: none; } }

/* ---- one screen: the card, the logo and the map ---- */
.home-front .home-offer { width: 100%; padding: 0; }
.home-v2 .home-front .offer-unified { display: block; max-width: none; margin: 0; padding: 0; }
.home-v2 .type-title, html[data-map-scheme="night"] .home-v2 .type-title { background: none; }
.home-front .offer-card .home-offer-start { flex-wrap: wrap; margin: 0; padding-top: 14px; gap: 10px 14px; }
.home-front .offer-card .home-offer-start .btn { min-width: 0; }

/* Computers: the card on the left, the logo and the map on the right. */
@media (min-width: 901px) {
  .home-v2 .home-stage .home-map { left: 44%; right: 0; width: auto; top: 150px; bottom: 70px; }
  .home-v2 .type-title { left: 44%; padding-top: 28px; }
  .home-v2 .hero-brand { font-size: clamp(2rem, 4.2vw, 3.2rem); }
  .home-v2 .home-front { grid-template-columns: 44% 56%; place-items: center start; padding: 20px 0 20px max(28px, 4vw); }
  .home-v2 .home-front .offer-card { width: min(540px, calc(44vw - max(28px, 4vw) - 24px)); padding: 22px; gap: 12px; }
  .home-front .offer-card .home-offer-start { flex-wrap: nowrap; }
  .home-front .offer-card .home-offer-start .btn { white-space: nowrap; }
  .home-front .offer-title-logo { font-size: clamp(1.8rem, 2.6vw, 2.4rem) !important; }
  .home-mode { left: calc(44% + 16px); }
}
@media (min-width: 901px) and (max-width: 1199px) { .home-front .home-demo-open > svg, .home-front .home-demo-open small { display: none; } }

/* Phones and tablets: the logo, the map, the map switch, then the card at the bottom of the screen with the doors in two
   columns. home-intro.js measures where the card starts (--home-card-top), so the map fills the space between the logo
   and the switch and never sits under either; without that the map takes 40% of the screen. The low-data map image
   sits in the same box. 140px: below the logo; 60px: the switch's row above the card. */
@media (max-width: 900px) {
  .home-v2 { --home-map-h: max(140px, calc(var(--home-card-top, calc(40svh + 200px)) - 200px)); }
  .home-v2 .home-stage .home-map { top: 140px; bottom: auto; height: var(--home-map-h); }
  .home-v2 .type-title { padding: 16px 16px 8px; }
  .home-v2 .hero-brand { font-size: 2.3rem; }
  .home-v2 .home-front { place-items: end center; padding: 276px 12px calc(14px + env(safe-area-inset-bottom, 0px)); } /* 276px under the 61px banner (272px under the phones' 65px one, below): the card starts 337px down, so the map's 140px and the switch always show above it */
  .home-v2 .home-front .offer-card { width: 100%; max-width: 640px; margin-inline: auto; padding: 16px 14px; gap: 10px; }
  .home-front .offer-kicker { display: none; }
  .home-front .offer-title-logo { margin: 0; font-size: 1.5rem !important; }
  .home-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-doors li:nth-child(-n+2) { grid-column: 1 / -1; } /* My Matric Map and Grade Predictor, one row each */
  .home-door { grid-template-columns: 32px minmax(0, 1fr); column-gap: 9px; padding: 9px 10px; }
  .door-ico { width: 32px; height: 32px; border-radius: 9px; }
  .door-ico svg { width: 18px; height: 18px; }
  .door-name { font-size: .9rem; line-height: 1.2; }
  .door-ask { display: none; }
  .door-ico { grid-row: auto; }
  .door-first .door-ico { grid-row: span 2; }
  .door-first .door-ask { display: block; font-size: .85rem; }
  .home-front .offer-card .home-offer-start { flex-direction: row; flex-wrap: nowrap; align-items: stretch; padding-top: 10px; gap: 8px; text-align: center; }
  .home-front .offer-card .home-offer-start .btn { flex: 1; justify-content: center; min-height: 46px; padding: 0 10px; font-size: .95rem; white-space: nowrap; }
  .home-front .home-demo-open { gap: 8px; }
  .home-front .home-demo-open > svg, .home-front .home-demo-open small { display: none; }
  .home-mode { top: calc(144px + var(--home-map-h)); bottom: auto; left: 50%; width: max-content; white-space: nowrap; transform: translateX(-50%) scale(.85); transform-origin: center top; }
}
@media (max-width: 700px) { .home-v2 .home-front { padding-top: 272px; } }
@media (max-width: 400px) {
  .home-door { grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; padding: 8px; }
  .door-ico { width: 28px; height: 28px; border-radius: 8px; }
  .door-ico svg { width: 16px; height: 16px; }
  .door-name { font-size: .86rem; }
  .home-front .demo-play { display: none; }
}
@media (max-width: 360px) { .home-v2 .home-front .offer-card { padding-inline: 12px; } .home-front .offer-card .home-offer-start .btn { font-size: .88rem; padding: 0 6px; } }

/* Follow us: small YouTube and Facebook icons beside the email in the footer. */
.site-footer .foot-follow { display: inline-flex; align-items: center; gap: 2px; color: var(--ink-2); }
.site-footer .foot-follow a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; color: var(--brand); }
.site-footer .foot-follow a:hover, .site-footer .foot-follow a:focus-visible { color: var(--brand-2); }

/* Follow us in the card: YouTube and Facebook in their own colours, one short row under the buttons. */
.home-follow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; font-weight: 600; color: var(--ink-2); }
.home-follow a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 999px; color: #fff; font-weight: 700; text-decoration: none; }
.home-follow a svg { flex: none; }
.home-follow .follow-yt { background: #d40000; }
.home-follow .follow-fb { background: #1877f2; }
.home-follow a:hover, .home-follow a:focus-visible { filter: brightness(.9); }
@media (max-width: 900px) {
  .home-follow { flex-wrap: nowrap; gap: 8px; font-size: .9rem; }
  .home-follow a { flex: 1; justify-content: center; min-height: 40px; padding: 0 8px; }
}
@media (max-width: 360px) { .home-follow > span { display: none; } }
/* Short phones (iPhone SE): a slimmer row and card padding keep the whole card on the first screen. */
@media (max-width: 900px) and (max-height: 700px) {
  .home-v2 .home-front .offer-card { padding-block: 12px; gap: 8px; }
  .home-follow a { min-height: 36px; }
  .home-door { padding-block: 6px; }
  .home-front .offer-card .home-offer-start { padding-top: 6px; }
}

/* The card must still fit one screen with both green doors: short computer screens drop the audience line above the heading
   (phones already do), and short phones drop the Follow us row (YouTube and Facebook stay in the footer). */
@media (min-width: 901px) and (max-height: 820px) { .home-front .offer-kicker { display: none; } }
@media (max-width: 900px) and (max-height: 700px) { .home-front .home-follow { display: none; } }
@media (max-width: 900px) and (max-height: 700px) { .home-doors { gap: 6px; } .door-first[data-door="predictor"] .door-ask { display: none; } .door-first[data-door="predictor"] .door-ico { grid-row: auto; } .door-first[data-door="predictor"] { min-height: 44px; } }