/* Mosey's page (MOSEY-PAGE-SPEC.md, 30 Oct 2026; rebuilt to the
   conversion review, 31 Oct): only what is this page's own, mo- where
   main.css owns the name. Linked relatively.

   The palette lives HERE, not in main.css: main.css ships with every site
   update, and this page is an experiment that must not reach the upload
   (Anna, 30 Oct). If the page ever ships, the block can move to main.css
   beside the others. Colors are the app's own (main.gd _update_colours):
   its cream, its ink, the Start journey teal, and the boat's coral. */
:root[data-app="mosey"]{
  --ground:#F7F2E7;--paper:#FFFCF5;--mint-soft:#E3ECE5;
  --ink:#283E39;--ink-soft:#3E5750;--muted:#52635A;
  --mint:#335F59;--on-mint:#F8F4EB;--mint-ink:#28504B;--on-mint-ink:#F8F4EB;
  --mint-deep:#2E6660;--apricot:#E8826A;--apricot-deep:#9A4A2C;
  --grad-a:#2E6660;--grad-b:#3B7F78;--grad-c:#B5573A;
  --line:rgba(40,62,57,.14);--line-strong:rgba(40,62,57,.30);
  --bezel:#22392F;--bezel-edge:#3E655B;
  --shadow:0 10px 30px rgba(40,62,57,.10);--shadow-lift:0 18px 44px rgba(40,62,57,.18);
  --night:#1E3738;--night-2:#16302F;--lotus-ink:#714A60;
  color-scheme:light}

/* the app's own title face: Cormorant Garamond italic, subset to Latin */
@font-face{font-family:"Mosey Title";src:url("../assets/apps/mosey/fonts/cormorant-italic.woff2") format("woff2");font-style:italic;font-weight:300 700;font-display:swap}
.mo{--title:"Mosey Title","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --ripple:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 6c10-6 18-6 28 0s18 6 28 0 18-6 28 0 18 6 30 0' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.mo main#main{overflow-x:clip}
.mo main figure{margin:0}
.mo main ul{padding:0;margin:0;list-style:none;max-width:none}
.mo .fine{color:var(--muted);font-size:.9rem}

/* the ripple under every section heading */
.mo-head{margin-bottom:32px}
.mo-head h2::after{content:"";display:block;width:120px;height:12px;margin-top:14px;background:var(--apricot);-webkit-mask:var(--ripple) no-repeat 0 0/100% 100%;mask:var(--ripple) no-repeat 0 0/100% 100%}
.mo-head.center{text-align:center}
.mo-head.center h2::after{margin-inline:auto}
.mo-head p{color:var(--ink-soft);font-size:1.12rem;max-width:52ch;margin:0}
.mo-eyebrow,.mo-platform{font-family:var(--display);font-weight:700;font-size:.92rem;letter-spacing:.01em;color:var(--mint-deep);margin:0 0 6px}

/* the app's Start journey teal, lit at the top */
.mo .btn{background:var(--mint);color:var(--on-mint);border-color:#6E968F;box-shadow:inset 0 1px #fff3,0 6px 18px rgba(51,95,89,.22)}
.mo .btn:hover{background:var(--mint-ink);color:var(--on-mint);filter:none}

/* phones: a small screen radius keeps the app's corners */
.mo .phone{border-radius:28px;padding:8px;max-width:270px}
.mo .phone img,.mo .phone video{border-radius:16px;width:100%;height:auto;display:block}
.mo .shot figcaption{margin-top:12px;text-align:center;color:var(--ink-soft);font-size:.92rem}

/* ------------------------------------------------------------ hero */
.mo-hero{position:relative;padding:34px 0 56px;background:linear-gradient(180deg,rgba(247,242,231,.55) 0,rgba(247,242,231,.82) 55%,var(--ground) 100%),url("../assets/apps/mosey/wash-river.jpg") center top/cover no-repeat}
.mo-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center}
.mo-hero-grid>*{min-width:0}
.mo-lock{display:flex;align-items:center;gap:12px;margin:0 0 22px}
.mo-lock img{width:52px;height:52px;border-radius:13px;box-shadow:var(--shadow)}
.mo-lock span{font-family:var(--title);font-style:italic;font-weight:500;font-size:2.5rem;line-height:1;color:var(--ink);letter-spacing:.005em}
.mo-hero h1{font-size:clamp(2.5rem,5.2vw,4.4rem);line-height:1.02;letter-spacing:-.03em;margin:0 0 20px;text-wrap:balance}
.mo-lead{font-size:1.25rem;line-height:1.55;color:var(--ink-soft);max-width:34ch;margin:0}
.mo-for{color:var(--muted);margin:14px 0 0}
.mo-buy{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:28px}
.mo-get{font-size:1.08rem;padding:15px 24px;min-height:52px}
.mo-see{font-weight:700;color:var(--ink);text-underline-offset:.2em}
.mo-assure{font-size:.95rem;color:var(--muted);margin:12px 0 0}

/* one scene, large, opening on its ending */
.mo-try{width:100%;max-width:440px;justify-self:end;scroll-margin-top:24px}
.mo-tabs{display:flex;gap:8px;margin-bottom:14px}
.mo-tabs button{font:inherit;font-weight:800;min-height:46px;padding:8px 26px;border-radius:999px;border:1.5px solid var(--line-strong);background:rgba(255,252,245,.7);color:var(--mint);cursor:pointer}
.mo-tabs button[aria-pressed="true"]{background:var(--mint);border-color:var(--mint);color:var(--on-mint)}
.mo-tabs button:focus-visible{outline:3px solid var(--apricot-deep);outline-offset:3px}
.mo-view{position:relative;border-radius:110px 110px 18px 18px;overflow:hidden;background:var(--mint-soft);box-shadow:var(--shadow-lift)}
.mo-view img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.mo-view video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mo-view figcaption{z-index:1;position:absolute;inset:auto 0 0 0;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:34px 20px 14px;background:linear-gradient(transparent,rgba(24,46,42,.78));color:#FFFCF5}
.mo-view .mo-scene{color:#FFFCF5;font-size:1.8rem}
.mo-view .mo-stage{font-weight:700;font-size:.95rem;text-align:right}
.mo-time{padding:14px 4px 0}
.mo-time label{font-weight:800;font-size:.95rem;color:var(--ink)}
.mo-capnote{font-size:.88rem;color:var(--muted);margin:10px 4px 0}
.mo-watch{font:inherit;font-weight:800;color:var(--mint-deep);background:none;border:0;padding:6px 0;margin-left:4px;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.mo-watch:focus-visible{outline:3px solid var(--apricot-deep);outline-offset:2px;border-radius:4px}

/* the lotus-led opening (?lead=lotus) */
.mo.lead-lotus .mo-hero{background:linear-gradient(180deg,rgba(251,246,237,.55) 0,rgba(251,246,237,.84) 55%,var(--ground) 100%),url("../assets/apps/mosey/wash-lotus.jpg") center top/cover no-repeat}
.mo.lead-lotus .mo-hero h1{color:var(--lotus-ink)}
.mo.lead-lotus .mo-view{box-shadow:0 20px 60px rgba(166,109,130,.22)}

@media (max-width:900px){
  .mo-hero{padding:20px 0 40px}
  .mo-hero-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .mo-try{justify-self:center}
  .mo-lock{margin-bottom:14px}
  .mo-lock img{width:42px;height:42px;border-radius:11px}
  .mo-lock span{font-size:2.1rem}
  .mo-hero h1{font-size:clamp(2.4rem,10.5vw,3.4rem);margin-bottom:14px}
  .mo-lead{font-size:1.08rem;line-height:1.5}
  .mo-for{font-size:.95rem;margin-top:10px}
  .mo-buy{margin-top:20px;gap:10px 18px}
  .mo-assure{font-size:.88rem;margin-top:10px}
  .mo-view{border-radius:80px 80px 16px 16px}}

/* floating art: desktop gutters only */
.mo-hero .hero-float img{opacity:.55;filter:drop-shadow(0 6px 12px rgba(40,62,57,.18))}
.mo-hero .hero-float img.fl-1{top:6%;left:1.5%;width:56px}
.mo-hero .hero-float img.fl-2{top:64%;left:2%;width:46px}
.mo-hero .hero-float img.fl-3{top:10%;right:1.5%;left:auto;width:50px}
.mo-hero .hero-float img.fl-4{top:60%;right:2%;left:auto;width:42px}
@media (max-width:1240px){.mo-hero .hero-float{display:none}}

/* the slider: the time passing */
.mo-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:30px;margin:6px 0 0;background:transparent;cursor:pointer}
.mo-range::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--mint),#3B7F78 60%,var(--apricot))}
.mo-range::-moz-range-track{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--mint),#3B7F78 60%,var(--apricot))}
.mo-range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:var(--paper);border:3px solid var(--mint);box-shadow:0 3px 10px rgba(40,62,57,.25)}
.mo-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--paper);border:3px solid var(--mint);box-shadow:0 3px 10px rgba(40,62,57,.25)}
.mo-range:focus-visible{outline:3px solid var(--mint-deep);outline-offset:4px;border-radius:8px}
.mo-ends{display:flex;justify-content:space-between;margin:4px 2px 0;font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ------------------------------------------------------------ bands */
.mo-alt{background:radial-gradient(700px 380px at 100% 0,rgba(232,130,106,.14),transparent 70%),radial-gradient(640px 360px at 0 100%,rgba(51,95,89,.10),transparent 70%),var(--mint-soft)}
.mo .section{padding-block:64px}
@media (max-width:620px){.mo .section{padding-block:46px}.mo-head{margin-bottom:24px}}

/* what you get: one real screen, four lines */
.mo-split{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:56px;align-items:center;max-width:960px;margin:0 auto}
.mo-one .phone{max-width:250px;margin:0 auto}
@media (max-width:860px){.mo-split{grid-template-columns:minmax(0,1fr);gap:30px}.mo-split>.mo-one{order:2}.mo-one .phone{max-width:210px}}

/* lists with the word first */
.mo-list{display:grid;gap:12px}
.mo-list li{position:relative;padding-left:24px;color:var(--ink-soft);line-height:1.5}
.mo-list li b{color:var(--ink)}
.mo-list li::before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--apricot);box-shadow:0 0 0 3px rgba(232,130,106,.18)}

/* the two endings, side by side and smaller */
#arrive{background:linear-gradient(180deg,rgba(247,242,231,.90),rgba(247,242,231,.96)),url("../assets/apps/mosey/wash-lotus.jpg") center/cover no-repeat}
.mo-endings{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center;max-width:1000px}
.mo-endings .mo-head{margin:0}
.mo-sound{margin-top:16px!important;font-weight:800;color:var(--ink)!important}
.mo-frames{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.mo-frames img{width:100%;height:auto;border-radius:16px;box-shadow:var(--shadow-lift)}
.mo-live{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lift)}
.mo-live img{box-shadow:none!important;border-radius:0!important}
.mo-live video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* display:block above beats the browser's own [hidden] rule, so a hidden film
   (paused, or a new scene still loading) would cover the still in front of it */
.mo-view video[hidden],.mo-live video[hidden]{display:none}
.mo-end-pause{font-size:.85rem;margin-left:6px}
.mo-frames figcaption{margin-top:10px;text-align:center;color:var(--ink-soft);font-size:.95rem}
.mo-scene{font-family:var(--title);font-style:italic;font-weight:600;font-size:1.45rem;color:var(--ink);margin-right:6px;vertical-align:-2px}
@media (max-width:860px){.mo-endings{grid-template-columns:minmax(0,1fr);gap:26px}.mo-frames{gap:12px}.mo-frames img,.mo-live{border-radius:12px}.mo-frames figcaption{font-size:.85rem}.mo-frames .mo-scene{display:block;margin:0;font-size:1.2rem}}

/* ------------------------------------------------------------ the offer */
/* one purchase panel, by night. On a wide screen the words sit at the left
   and the boat at the dock shows at the right; on a phone the words are
   centered over a darker veil of the same picture. */
.mo-final{padding:76px 0 70px;color:#E9EEE5;background:linear-gradient(90deg,var(--night) 0,var(--night) 34%,rgba(30,55,56,.55) 58%,rgba(30,55,56,.12) 100%),url("../assets/apps/mosey/final-night.jpg") right center/auto 100% no-repeat,var(--night)}
.mo-final .wrap>*{max-width:480px}
.mo-final img{width:76px;height:76px;border-radius:18px;margin:0 0 12px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.mo-final .mo-name{font-family:var(--title);font-style:italic;font-weight:500;font-size:2.6rem;line-height:1;margin:0 0 18px;color:#F7F2E7}
.mo-offer-line{font-family:var(--display);font-weight:700;color:#F2B9A7!important;margin:0 0 4px}
.mo-final h2{color:#FFFCF5;font-size:clamp(2.2rem,4.4vw,3.2rem);line-height:1.05;margin:0 0 10px}
.mo-final p{color:#D5E0D8;margin:0}
.mo-final .badge-link{margin:22px 0 14px}
.mo-final .fine{color:#BFCEC5;margin-top:10px}
.mo-final .heart{color:var(--apricot)}
.mo-final a:not(.badge-link){color:#F2B9A7}
@media (max-width:860px){
  .mo-final{text-align:center;padding:60px 0 56px;background:linear-gradient(180deg,rgba(22,48,47,.72),rgba(22,48,47,.88) 70%,var(--night-2)),url("../assets/apps/mosey/final-night.jpg") 45% 40%/cover no-repeat,var(--night)}
  .mo-final .wrap>*{margin-inline:auto}
  .mo-final img{margin:0 auto 12px}}
.mo-final :focus-visible{outline-color:#F2B9A7}
.badge-link{display:inline-block;border-radius:12px;line-height:0;transition:transform .2s,filter .2s}
.badge-link:hover{transform:translateY(-2px);filter:drop-shadow(0 10px 22px rgba(0,0,0,.35))}
.badge-link svg{display:block;width:222px;height:auto}

/* ------------------------------------------------------------ FAQ */
.mo .faq{max-width:760px;margin:0 auto}
.mo-back{text-align:center;margin:36px 0 0}
.mo .trademarks{padding-block:10px 30px}
.mo .trademarks p{font-size:.84rem;color:var(--muted);max-width:none;margin:0}
@media (prefers-reduced-motion:reduce){.badge-link{transition:none}}