/* ---------- More apps: the Theodore HQ collection at the foot of the page (Theo, 2026-10-17) ----------
   Option 3 of prototypes/loop-more-apps-2026-10-17: the FAQ's row shape in two columns, and on hover each
   row takes its app's own colours (the tints the Muse site's collection cards use). The section sits between
   the closing call and the footer and uses the page's section gap above and below. */
:is(#menu, #pricing) .head { text-align: center; }
:is(#menu, #pricing) .apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; max-width: 760px; margin: var(--head-gap) auto 0; }
:is(#menu, #pricing) .app { position: relative; isolation: isolate; display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px;
  border-radius: 16px; background: var(--card); box-shadow: var(--shadow-card);
  transition: box-shadow 250ms var(--ease), transform 250ms var(--ease); }
:is(#menu, #pricing) .app::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse 70% 140% at 100% 0%, var(--t1), transparent 70%), radial-gradient(ellipse 60% 120% at 0% 100%, var(--t2), transparent 70%);
  opacity: 0; transition: opacity 250ms var(--ease); }
:is(#menu, #pricing) .app img { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 2px 4px rgba(17, 22, 32, .14)); }
:is(#menu, #pricing) .app .muse-icon { border-radius: 23%; } /* the Muse icon file is full-bleed, so it gets the Mac corner here */
:is(#menu, #pricing) .app-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
:is(#menu, #pricing) .app-name { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink1); }
:is(#menu, #pricing) .app-line { font-size: 14px; color: var(--ink3); }
:is(#menu, #pricing) .app-go { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ink4); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 250ms var(--ease), stroke 250ms var(--ease); }
@media (hover: hover) {
  :is(#menu, #pricing) .app:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
  :is(#menu, #pricing) .app:hover::before { opacity: 1; }
  :is(#menu, #pricing) .app:hover .app-go { transform: translateX(2px); stroke: var(--ink2); }
}
@media (min-width: 900px) { .home :is(#menu, #pricing) .app-name { font-size: var(--t-lg); } .home :is(#menu, #pricing) .app-line { font-size: var(--t-sm); } }
@media (max-width: 620px) { :is(#menu, #pricing) .apps { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { :is(#menu, #pricing) .app, :is(#menu, #pricing) .app::before, :is(#menu, #pricing) .app-go { transition: none; } :is(#menu, #pricing) .app:hover { transform: none; } }

/* Each app's colours */
:is(#menu, #pricing) .solace { --t1: rgba(255, 170, 120, .30); --t2: rgba(140, 100, 180, .18); }
:is(#menu, #pricing) .charm  { --t1: rgba(80, 210, 225, .30);  --t2: rgba(50, 150, 200, .14); }
:is(#menu, #pricing) .shiny  { --t1: rgba(0, 200, 160, .24);   --t2: rgba(240, 215, 160, .26); }
:is(#menu, #pricing) .atlas  { --t1: rgba(110, 160, 225, .30); --t2: rgba(60, 100, 170, .14); }
:is(#menu, #pricing) .echo   { --t1: rgba(95, 170, 140, .28);  --t2: rgba(143, 230, 190, .18); }
:is(#menu, #pricing) .muse   { --t1: rgba(150, 158, 182, .32); --t2: rgba(126, 114, 132, .16); }
:is(#menu, #pricing) .chorus { --t1: rgba(110, 147, 251, .28); --t2: rgba(58, 112, 248, .14); }
:is(#menu, #pricing) .docket { --t1: rgba(158, 181, 200, .32); --t2: rgba(68, 88, 107, .14); }
:root[data-theme="dark"] :is(#menu, #pricing) .solace { --t1: rgba(255, 170, 120, .24); --t2: rgba(140, 100, 180, .22); }
:root[data-theme="dark"] :is(#menu, #pricing) .charm  { --t1: rgba(80, 210, 225, .24);  --t2: rgba(50, 150, 200, .16); }
:root[data-theme="dark"] :is(#menu, #pricing) .shiny  { --t1: rgba(0, 212, 170, .24);   --t2: rgba(80, 210, 225, .12); }
:root[data-theme="dark"] :is(#menu, #pricing) .atlas  { --t1: rgba(140, 180, 235, .24); --t2: rgba(60, 100, 170, .22); }
:root[data-theme="dark"] :is(#menu, #pricing) .echo   { --t1: rgba(95, 170, 140, .28);  --t2: rgba(143, 230, 190, .14); }
:root[data-theme="dark"] :is(#menu, #pricing) .muse   { --t1: rgba(198, 206, 228, .20); --t2: rgba(126, 114, 132, .20); }
:root[data-theme="dark"] :is(#menu, #pricing) .chorus { --t1: rgba(110, 147, 251, .28); --t2: rgba(58, 112, 248, .18); }
:root[data-theme="dark"] :is(#menu, #pricing) .docket { --t1: rgba(158, 181, 200, .22); --t2: rgba(68, 88, 107, .22); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(#menu, #pricing) .solace { --t1: rgba(255, 170, 120, .24); --t2: rgba(140, 100, 180, .22); }
  :root:not([data-theme="light"]) :is(#menu, #pricing) .charm  { --t1: rgba(80, 210, 225, .24);  --t2: rgba(50, 150, 200, .16); }
  :root:not([data-theme="light"]) :is(#menu, #pricing) .shiny  { --t1: rgba(0, 212, 170, .24);   --t2: rgba(80, 210, 225, .12); }
  :root:not([data-theme="light"]) :is(#menu, #pricing) .atlas  { --t1: rgba(140, 180, 235, .24); --t2: rgba(60, 100, 170, .22); }
  :root:not([data-theme="light"]) :is(#menu, #pricing) .echo   { --t1: rgba(95, 170, 140, .28);  --t2: rgba(143, 230, 190, .14); }
  :root:not([data-theme="light"]) :is(#menu, #pricing) .muse   { --t1: rgba(198, 206, 228, .20); --t2: rgba(126, 114, 132, .20); }
  :root:not([data-theme="light"]) :is(#menu, #pricing) .chorus { --t1: rgba(110, 147, 251, .28); --t2: rgba(58, 112, 248, .18); }
  :root:not([data-theme="light"]) :is(#menu, #pricing) .docket { --t1: rgba(158, 181, 200, .22); --t2: rgba(68, 88, 107, .22); }
}

/* The footer's own top padding (72px plus the columns' 8px) sat on top of the section gap, so the space under
   this section read 80px taller than the space above it. Take it off so both are the page's section gap. */
.home .site-footer { margin-top: calc(var(--section-gap) - 80px); }