/* The landing page in the purple theme (pages/purple/home.php; docs/purple-rollout.md, launch 2).
   Design: mockups/redesign/site-a-hub/live/home-options.html, the picked "Video 2" (?opt=b4):
   a short plum top, then three cards that are each a video with the words on it, then
   "Missing something?". Only that option's rules are here. */

/* ---- the plum top ---- */
.hm-hero { background: var(--pv-plum); color: #fff; position: relative; overflow: hidden; }
.hm-hero::before { content: ''; position: absolute; right: -120px; top: -160px; width: 720px; height: 560px; background: radial-gradient(closest-side, rgba(99,75,245,.55), rgba(99,75,245,0)); pointer-events: none; }
.hm-hero .pv-wrap { position: relative; }
.hm-hero .pv-wrap.in { text-align: left; padding-top: 28px; padding-bottom: 128px; }
/* the curved lower edge: a cream dome over the hero's last 60px */
.hm-hero .curve { position: absolute; left: 0; right: 0; bottom: -2px; height: 60px; background: var(--pv-cream); border-radius: 100% 100% 0 0 / 100% 100% 0 0; }
.hm-ey { font: 800 11.5px 'DM Sans', sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--pv-lav); margin: 0 0 10px; }
.hm-ey b { color: #fff; }
.hm-hero h1 { font: 600 40px/1.06 'Fredoka', sans-serif !important; color: #fff !important; margin: 0; letter-spacing: -.3px; text-wrap: balance; }
.hm-hero h1 span { color: var(--pv-orange); }
.hm-hero h1 b { font-weight: inherit; white-space: nowrap; }
.hm-sub { font: 500 17px/1.5 'DM Sans', sans-serif; color: var(--pv-lav); margin: 12px 0 0; max-width: 640px; }

/* ---- the three cards: each is one link, the video is the whole card, the words sit on it ---- */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: -92px; position: relative; z-index: 2; }
a.door { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; min-height: 430px; padding: 0; overflow: hidden; border-radius: 28px; background: var(--pv-plum); color: inherit; text-decoration: none; cursor: pointer; box-shadow: 0 6px 20px rgba(52,30,96,.07); transition: transform .15s ease, box-shadow .15s ease; }
a.door:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(52,30,96,.12); }
a.door:hover .go { background: var(--pv-orange-d); }
a.door:focus-visible { outline: 3px solid var(--pv-violet); outline-offset: 3px; }
/* the video overhangs its frame by 1px all round and the frame is its own layer, so no edge of the
   video (or a sliver of the backing colour) shows at a frame edge that lands between two pixels */
.door .vis { position: absolute; inset: 0; overflow: hidden; background: #1b1038; isolation: isolate; transform: translateZ(0); }
.door .vis video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; display: block; }
.door .vis::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42,22,82,0) 32%, rgba(42,22,82,.94) 80%); }
.door .tx { position: relative; z-index: 1; display: flex; flex-direction: column; flex: none; min-width: 0; padding: 22px; }
.door h2 { font: 600 29px/1.1 'Fredoka', sans-serif !important; color: #fff !important; margin: 0 0 4px; }
.door p { font-size: 15px; line-height: 1.5; color: #e6defa; margin: 0 0 16px; }
.door p b { color: #fff; }
.door .go { align-self: flex-start; background: var(--pv-orange); color: var(--pv-plum); font: 700 14px 'DM Sans', sans-serif; border-radius: 999px; padding: 11px 20px; text-decoration: none; }

/* ---- "Missing something?": the whole card is the link ---- */
.ask { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: #fff; border-radius: 24px; padding: 18px 24px; margin: 18px 0 34px; box-shadow: 0 6px 20px rgba(52,30,96,.05); text-decoration: none; }
.ask .tx { flex: 1; min-width: 240px; }
.ask b { display: block; font: 600 18px 'Fredoka', sans-serif; color: var(--pv-plum); }
.ask .tx span { display: block; margin: 2px 0 0; color: var(--pv-muted); font-size: 14px; }
.ask .go { flex: none; background: var(--pv-orange); color: var(--pv-plum); font-weight: 700; border-radius: 999px; padding: 10px 20px; }
.ask:hover .go { background: var(--pv-orange-d); }

@media (max-width: 1000px) { .doors { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .hm-hero h1 { font-size: 32px !important; } }

/* ==== Under the cards: one stripe for each part of the site ("Stories", Blake's pick 2026-10-08) ====
   The names are the mockup's (mockups/redesign/site-a-hub/live/home-more.css, .hx-*), so the two can be read side by
   side. Each stripe's colour and its words' colours are "look 1" of the mockup, saved 2026-10-09: --bg the stripe,
   --ink headings, --hl the highlighted words, the small label and the ticks, --ink2 the small text. */
.ask { margin-bottom: 44px; }
.hx-more { --pv-orange-d: #e07f00; }
body.hm-home .pv-footer { margin-top: 0; }   /* the last stripe runs straight into the footer */
.hx-stripe { --bg: #fff; --ink: var(--pv-plum); --hl: var(--pv-violet); --ink2: #4b3f6b; --ckt: #fff; background: var(--bg); padding: 76px 0; position: relative; }
/* on the orange, pale words were hard to read (about 2 to 1): the words are plum, and only the heading's second half stays white */
.st-print { --bg: #ff9500; --ink: var(--pv-plum); --hl: #fff; --ink2: #3a2168; }
.st-print .hx-ey { color: var(--pv-plum); }
.st-print .hx-checks li::before { background: var(--pv-plum); color: #fff; }
.st-make  { --bg: #0080ff; --ink: #fff; --hl: #ffca80; --ink2: rgba(255,255,255,.94); --ckt: #0080ff; }
.st-tools { --bg: #fffdfa; --ink: #017ffe; --hl: #ff9500; }
.st-who   { --bg: #0080ff; --ink: #fff; --hl: #fed2a9; --ink2: rgba(255,255,255,.94); --ckt: #0080ff; }
.st-end   { --bg: #fffdfa; --hl: #4a37c9; padding-bottom: 80px; }
.st-apps  { --bg: var(--pv-plum); color: #fff; padding-bottom: 60px; }
.hx-center { text-align: center; max-width: 780px; margin: 0 auto; }
.hx-ey { font: 800 12px 'DM Sans', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--hl); margin: 0 0 12px; }
.hx-h { font: 600 42px/1.08 'Fredoka', sans-serif !important; color: var(--ink) !important; letter-spacing: -.3px; margin: 0; text-wrap: balance; }
.hx-h span { color: var(--hl); }
.hx-lede { font: 500 18px/1.55 'DM Sans', sans-serif; color: var(--ink2); margin: 14px 0 0; }
.hx-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hx-center .hx-btns { justify-content: center; }
.hx-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 14px 26px; font: 700 16px 'DM Sans', sans-serif; text-decoration: none; background: var(--pv-orange); color: var(--pv-plum); transition: background .15s, transform .15s; }
.hx-btn:hover { background: var(--pv-orange-d); transform: translateY(-2px); }
.hx-btn.alt { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.hx-btn.alt:hover { background: #ece8ff; }
/* on the orange and blue stripes the button is white, so it stands off the colour */
:is(.st-print, .st-make, .st-who) .hx-btn { background: #fff; }
:is(.st-print, .st-make, .st-who) .hx-btn:hover { background: #f3eef9; }
.hx-checks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.hx-checks li { display: flex; gap: 12px; font: 500 16px/1.45 'DM Sans', sans-serif; color: var(--ink2); }
.hx-checks li::before { content: '\2713'; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--hl); color: var(--ckt); font-weight: 800; font-size: 13px; display: grid; place-items: center; }
/* the plum apps stripe keeps the site's own dark colours */
.st-apps .hx-ey, .st-apps .hx-lede { color: var(--pv-lav); }
.st-apps .hx-h { color: #fff !important; } .st-apps .hx-h span { color: var(--pv-orange); }

/* things arrive as they are scrolled to (only once js/purple-home.js has put .hx-anim on the body) */
.hx-anim .hx-rv { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--d, 0) * 90ms); }
.hx-anim .hx-rv.in { opacity: 1; transform: none; }

/* two columns: picture and words */
.hx-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.hx-two.flip > :first-child { order: 2; }
/* a photo with rounded corners; small things sit over its edge */
.hx-photo { position: relative; }
.hx-photo > img { width: 100%; aspect-ratio: var(--ar, 4 / 3); object-fit: cover; object-position: var(--pos, 50% 50%); border-radius: 36px; display: block; box-shadow: 0 22px 50px rgba(52,30,96,.2); }
.hx-sh { flex: none; display: block; width: 112px; aspect-ratio: 8.5 / 11; margin: 0 -26px 0 0; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 22px rgba(52,30,96,.18), 0 0 0 1px rgba(52,30,96,.06); transform: rotate(var(--r, 0deg)); transition: transform .2s; }
.hx-sh:hover { transform: rotate(0deg) scale(1.06); }
.hx-sh img { width: 100%; display: block; }
.hx-fan { position: absolute; right: -18px; bottom: -34px; display: flex; }
.hx-float { position: absolute; left: -22px; bottom: -30px; width: 190px; background: #fff; border-radius: 24px; padding: 14px; box-shadow: 0 16px 36px rgba(52,30,96,.22); transform: rotate(-4deg); }
.hx-float svg { width: 100%; height: auto; display: block; }
/* the fanned worksheets float one after another; the ten frame floats on its own */
.hx-anim .hx-bob, .hx-anim .hx-stag .hx-sh { animation: hxbob 5s ease-in-out infinite; }
.hx-anim .hx-stag .hx-sh { animation-duration: 4.6s; }
.hx-anim .hx-stag .hx-sh:nth-child(2) { animation-delay: -1.5s; } .hx-anim .hx-stag .hx-sh:nth-child(3) { animation-delay: -3.1s; }
@keyframes hxbob { 50% { translate: 0 -10px; } }

/* the apps stripe: a tablet, three numbers, and the icons drifting past */
.hx-tablet { position: relative; width: min(100%, 520px); margin: 0 auto; transform: rotate(-3deg); filter: drop-shadow(0 30px 50px rgba(0,0,0,.4)); }
.hx-tablet .frame { position: relative; z-index: 2; width: 100%; display: block; }
.hx-tablet video { position: absolute; z-index: 1; left: 5.24%; top: 5.98%; width: 89.48%; height: 87.97%; object-fit: cover; border-radius: 2.5%; background: #000; }
.hx-stats { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: 26px; }
.hx-stats div { font: 500 14px/1.35 'DM Sans', sans-serif; color: var(--pv-lav); }
.hx-stats b { display: block; font: 600 38px/1 'Fredoka', sans-serif; color: #fff; }
.hx-stats i { font-style: normal; color: var(--pv-orange); }
.hx-mq { overflow: hidden; position: relative; padding: 14px 0; margin-top: 44px; }
.hx-mq .tr { display: flex; width: max-content; animation: hxmq 46s linear infinite; }
.hx-mq:hover .tr { animation-play-state: paused; }
.hx-mq::before, .hx-mq::after { content: ''; position: absolute; top: 0; bottom: 0; width: 9%; z-index: 2; pointer-events: none; }
.hx-mq::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.hx-mq::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
@keyframes hxmq { to { transform: translateX(-50%); } }
.hx-ic { flex: none; width: 84px; height: 84px; margin-right: 18px; border-radius: 20px; box-shadow: 0 8px 18px rgba(20,8,48,.3); display: block; }
.hx-badges { display: flex; justify-content: center; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hx-badges span { background: #fff; border-radius: 999px; padding: 12px 20px; font: 700 15px 'DM Sans', sans-serif; color: var(--pv-plum); box-shadow: 0 6px 18px rgba(52,30,96,.08); }

/* the worksheet makers' picture: a panel of sliders, a pointer that presses them, and the worksheet they write */
.hx-mk { position: relative; max-width: 520px; margin: 0 auto; padding-left: 182px; }
.hx-demo { background: #fff; border-radius: 28px; padding: 22px 22px 24px; box-shadow: 0 22px 50px rgba(20,8,48,.22); transform: rotate(1.5deg); position: relative; min-height: 440px; box-sizing: border-box; display: flex; flex-direction: column; }
.hx-demo .nd { display: flex; gap: 18px; font: 500 12px 'DM Sans', sans-serif; color: #94a3b8; }
.hx-demo .nd span { flex: 1; border-bottom: 1.5px solid #cbd5e1; padding-bottom: 3px; }
.hx-demo h4 { font: 600 22px 'Fredoka', sans-serif !important; color: #2d3748 !important; margin: 14px 0 12px; text-align: center; }
.hx-demo .ft { display: flex; justify-content: space-between; margin-top: 14px; font: 600 10.5px 'DM Sans', sans-serif; color: #94a3b8; }
.hx-eqs { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px; }
.hx-eq { border: 1.5px solid #2d3748; border-radius: 10px; padding: 6px 4px; display: flex; align-items: center; justify-content: center; gap: .3em; font: 500 22px 'Google Sans Flex', 'DM Sans', sans-serif; color: #2d3748; white-space: nowrap; }
.hx-eqs.many .hx-eq { font-size: 20px; }
.hx-eq u { display: inline-block; width: 26px; height: 1em; border-bottom: 1.5px solid #cbd5e1; text-decoration: none; }
.hx-eq.sw { animation: hxsw .45s ease both; }
@keyframes hxsw { 0% { opacity: 0; transform: translateY(8px) scale(.96); } 100% { opacity: 1; transform: none; } }
.hx-ctl { position: absolute; left: 0; top: 56px; z-index: 3; width: 196px; box-sizing: border-box; display: grid; gap: 4px; transform: rotate(-3deg); background: #fff; border-radius: 22px; box-shadow: 0 18px 40px rgba(20,8,48,.26); padding: 16px 18px 18px; font: 700 12.5px 'DM Sans', sans-serif; color: #6b6485; }
.hx-ctl label { display: flex; justify-content: space-between; align-items: baseline; text-transform: uppercase; letter-spacing: .6px; font-size: 10.5px; margin-top: 4px; }
.hx-ctl label b { color: #341e60; font-size: 14px; }
.hx-ctl .sl { position: relative; height: 8px; border-radius: 99px; background: #ece8ff; margin: 6px 10px 8px; }
.hx-ctl .sl i { position: absolute; top: 50%; left: 46%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: #ff7800; box-shadow: 0 3px 8px rgba(255,120,0,.45); transition: left .35s cubic-bezier(.3,1.3,.5,1); }
.hx-ctl .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #f3effa; border-radius: 12px; padding: 4px; }
.hx-ctl .seg span { text-align: center; border-radius: 9px; padding: 5px 0; font: 700 18px 'DM Sans', sans-serif; color: #6b6485; transition: background .2s, color .2s; }
.hx-ctl .seg span.on { background: #ff7800; color: #fff; }
.hx-cur { position: absolute; left: 0; top: 0; width: 26px; height: 26px; z-index: 6; opacity: 0; pointer-events: none; overflow: visible; transition: transform .5s cubic-bezier(.3,.8,.3,1), opacity .3s; filter: drop-shadow(0 3px 5px rgba(36,18,67,.35)); }
.hx-cur.show { opacity: 1; }
.hx-cur path { transform-box: fill-box; transform-origin: 10% 5%; }
.hx-cur.tap path { animation: hxtap .3s ease; }
@keyframes hxtap { 50% { transform: scale(.78); } }

@media (max-width: 1000px) {
  .hx-stripe { padding: 52px 0; }
  .hx-h { font-size: 32px !important; } .hx-lede { font-size: 16.5px; }
  .hx-two { grid-template-columns: 1fr; gap: 54px; } .hx-two.flip > :first-child { order: 0; }
  .hx-fan { right: 0; } .hx-float { left: 0; }
}
@media (max-width: 720px) {
  .hx-mk { padding-left: 0; }
  .hx-ctl { position: relative; top: 0; width: auto; margin: 0 12px -16px; }
  .hx-ic { width: 68px; height: 68px; margin-right: 14px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-mq .tr, .hx-anim .hx-bob, .hx-anim .hx-stag .hx-sh, .hx-eq.sw, .hx-cur.tap path { animation: none; }
  .hx-anim .hx-rv { opacity: 1; transform: none; transition: none; }
}