/* EasyClippers 13.9: the public home page. Dark navy on every theme (the owner, Nov 3 2026: "like OpusClip, not
   exactly"): big type, short lines, the product itself in large rounded cards, one primary colour (aqua), no tags or
   pills, and on phones a call to action that stays at the bottom. Everything is scoped to .home, so the app's light
   and dark themes (app.css) never reach it, and it never reaches the app. Motion is gentle and stops for reduced
   motion. */
.backdrop.home-bg { background: #030a17; }
/* the tokens: on the page, and on the bar and box that float over it (outside the page's own block) */
.home, .hm-sticky, .hm-float {
  color-scheme: dark;
  --h-bg: #030a17; --h-card: #10223f; --h-card-2: #143058; --h-well: #050e1d;
  --h-line: rgba(170, 200, 245, .2); --h-line-2: rgba(170, 200, 245, .3); --h-line-3: rgba(170, 200, 245, .42);
  --h-text: #ffffff; --h-muted: #d6e0ee; --h-faint: #aab9ce;
  --h-accent: #2ee6d6; --h-accent-hover: #74f1e6; --h-on-accent: #03141a;
  --h-live: #ff3b5c; --h-ok: #4ee0a6;
  --h-gold: linear-gradient(90deg, #ffe39a 0%, #ffc276 16%, #ff97b4 34%, #c7aaff 52%, #86d8ff 70%, #a3f5d6 85%, #ffe39a 100%);
  --h-r: 24px; --h-r-sm: 16px; --h-max: 1180px;
  --h-gut: max(20px, env(safe-area-inset-left, 0px));
  --h-gut-r: max(20px, env(safe-area-inset-right, 0px));
}
.home {
  position: relative;
  background:
    radial-gradient(900px 520px at 50% -140px, rgba(46, 230, 214, .13), transparent 70%),
    radial-gradient(760px 520px at 92% 2%, rgba(130, 96, 255, .12), transparent 70%),
    radial-gradient(620px 460px at 4% 8%, rgba(37, 99, 235, .1), transparent 70%),
    var(--h-bg);
  color: var(--h-text); font-size: 16px; line-height: 1.55; letter-spacing: -0.011em;
  scrollbar-color: rgba(160, 190, 235, .22) transparent;
}
.home ::selection { background: rgba(46, 230, 214, .3); color: #fff; }
.home a { color: inherit; }
.home :focus-visible { outline: 2px solid var(--h-accent); outline-offset: 3px; border-radius: 10px; }
.home h1, .home h2, .home h3 { margin: 0; color: #fff; font-weight: 800; text-wrap: balance; }
.home p { margin: 0; }
.hm-wrap { width: 100%; max-width: var(--h-max); margin: 0 auto; padding-left: var(--h-gut); padding-right: var(--h-gut-r); }
.hm-gold { background: var(--h-gold, linear-gradient(90deg, #ffe39a 0%, #ffc276 16%, #ff97b4 34%, #c7aaff 52%, #86d8ff 70%, #a3f5d6 85%, #ffe39a 100%)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: hmShine 9s linear infinite; }
@keyframes hmShine { to { background-position: -200% 0; } }

/* ---------- buttons: big and round, aqua for the main action, an outline for the other ---------- */
.hm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 50px; padding: 0 24px;
  border-radius: 999px; border: 1px solid transparent; font: 650 16px/1 var(--font); letter-spacing: -0.01em;
  white-space: nowrap; cursor: pointer; text-decoration: none; transition: background .16s, border-color .16s, transform .16s, color .16s; }
.hm-btn .icon { width: 18px; height: 18px; }
.hm-btn.primary { background: var(--h-accent); color: var(--h-on-accent);
  box-shadow: 0 8px 28px -10px rgba(46, 230, 214, .55), inset 0 1px 0 rgba(255, 255, 255, .35); }
.hm-btn.primary:hover { background: var(--h-accent-hover); color: var(--h-on-accent); }
.hm-btn.line { background: rgba(255, 255, 255, .02); color: #fff; border-color: var(--h-line-3); }
.hm-btn.line:hover { background: rgba(255, 255, 255, .07); color: #fff; border-color: rgba(200, 220, 255, .45); }
.hm-btn.quiet { background: transparent; color: var(--h-muted); padding: 0 14px; }
.hm-btn.quiet:hover { color: #fff; }
.hm-btn.sm { height: 40px; padding: 0 18px; font-size: 15px; }
.hm-btn.xl { height: 58px; padding: 0 30px; font-size: 17px; }
.hm-btn:active { transform: scale(.98); }

/* ---------- the bar at the top ---------- */
.hm-nav { position: sticky; top: 0; z-index: 30; transition: background .2s, border-color .2s, backdrop-filter .2s;
  border-bottom: 1px solid transparent; padding-top: env(safe-area-inset-top, 0px); }
.home.scrolled .hm-nav { background: rgba(3, 10, 23, .82); border-bottom-color: var(--h-line);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); }
.hm-nav .hm-wrap { display: flex; align-items: center; gap: 10px; height: 68px; }
.hm-nav .brand-link { background: none; border: 0; padding: 0; cursor: pointer; display: flex; align-items: center; }
.hm-nav .brand .wordmark { color: #fff; font-size: 19px; }
.hm-links { display: none; gap: 4px; margin-left: 28px; }
.hm-links button { background: none; border: 0; color: var(--h-muted); font: 550 15px/1 var(--font); padding: 10px 12px;
  border-radius: 10px; cursor: pointer; transition: color .15s, background .15s; }
.hm-links button:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.hm-nav .spacer { flex: 1; }
.hm-signin { display: none; }
.hm-burger { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-left: -8px;
  border-radius: 12px; border: 0; background: none; color: #fff; cursor: pointer; }
.hm-burger span { position: relative; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: background .2s; }
.hm-burger span::before, .hm-burger span::after { content: ''; position: absolute; left: 0; width: 20px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .25s var(--spring); }
.hm-burger span::before { top: -6px; } .hm-burger span::after { top: 6px; }
.hm-burger[aria-expanded="true"] span { background: transparent; }
.hm-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.hm-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.hm-menu { position: fixed; inset: 0; z-index: 29; background: rgba(3, 10, 23, .97); backdrop-filter: blur(10px);
  padding: calc(84px + env(safe-area-inset-top, 0px)) var(--h-gut-r) 32px var(--h-gut); display: flex; flex-direction: column; gap: 4px;
  opacity: 0; pointer-events: none; transition: opacity .2s; }
.hm-menu.on { opacity: 1; pointer-events: auto; }
.hm-menu button.hm-mi { background: none; border: 0; border-bottom: 1px solid var(--h-line); color: #fff; text-align: left;
  font: 700 26px/1.2 var(--font); letter-spacing: -0.03em; padding: 16px 2px; cursor: pointer; }
.hm-menu .hm-menu-cta { margin-top: auto; display: grid; gap: 10px; }
.hm-menu .hm-menu-cta .hm-btn { width: 100%; }
@media (min-width: 960px) {
  .hm-links { display: flex; }
  .hm-signin { display: inline-flex; }
  .hm-burger, .hm-menu { display: none; }
}

/* ---------- the hero ---------- */
.hm-hero { text-align: center; padding: 34px 0 0; }
.hm-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--h-muted); font: 650 12.5px/1.3 var(--font);
  letter-spacing: .14em; text-transform: uppercase; }
.hm-eyebrow .icon { width: 16px; height: 16px; color: var(--h-accent); }
.hm-hero h1 { margin: 16px auto 0; max-width: 15ch; font-size: clamp(44px, 11.6vw, 92px); line-height: .98; letter-spacing: -0.048em; }
.home .hm-sub { margin: 22px auto 0; max-width: 36ch; color: var(--h-muted); font-size: clamp(17px, 2.2vw, 21px); line-height: 1.5; letter-spacing: -0.012em; }
.hm-try { margin: 28px auto 0; max-width: 640px; }
.hm-field { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 8px 0 20px; border-radius: 999px;
  background: rgba(10, 22, 42, .9); border: 1px solid var(--h-line-2); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .8);
  transition: border-color .15s, box-shadow .15s; }
.hm-field:focus-within { border-color: rgba(46, 230, 214, .6); box-shadow: 0 0 0 4px rgba(46, 230, 214, .12); }
.hm-field > .icon { width: 20px; height: 20px; color: var(--h-faint); flex: none; }
.hm-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: #fff; font-size: 16.5px; }
.hm-field input::placeholder { color: var(--h-faint); }
.hm-field .hm-btn { display: none; }
.hm-try-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.hm-try-btns .hm-btn { width: 100%; padding: 0 12px; }
.hm-hint { display: block; min-height: 20px; margin-top: 12px; color: var(--h-faint); font-size: 14px; }
.hm-hint.err { color: #ffb0bf; }
@media (min-width: 720px) {
  .hm-hero { padding-top: 64px; }
  .hm-field { height: 66px; padding-right: 7px; }
  .hm-field .hm-btn { display: inline-flex; height: 52px; }
  .hm-try-btns { display: flex; justify-content: center; }
  .hm-try-btns .hm-btn { width: auto; padding: 0 26px; }
  .hm-try-btns .hm-btn.primary { display: none; }
}

/* the product at work: a live stream, the moment it finds, and the short it makes while the stream is still on */
.hm-stage { position: relative; margin: 40px auto 0; max-width: 1060px; border-radius: 28px; padding: 14px;
  background: linear-gradient(180deg, rgba(20, 38, 70, .75), rgba(7, 16, 31, .9)); border: 1px solid var(--h-line-2);
  box-shadow: 0 50px 120px -50px rgba(46, 230, 214, .25), 0 40px 80px -40px rgba(0, 0, 0, .9); text-align: left; }
.hm-stage-in { position: relative; display: grid; grid-template-columns: 1fr; gap: 14px; }
.hm-live { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #000; }
.hm-live > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-live::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 30%, transparent 62%, rgba(0, 0, 0, .7)); }
.hm-top { position: absolute; left: 14px; top: 12px; right: 14px; z-index: 2; display: flex; align-items: center; gap: 10px;
  font: 700 13px/1 var(--font); color: #fff; }
.hm-rec { display: inline-flex; align-items: center; gap: 7px; letter-spacing: .06em; text-transform: uppercase; }
.hm-rec i { width: 9px; height: 9px; border-radius: 50%; background: var(--h-live); box-shadow: 0 0 0 4px rgba(255, 59, 92, .22); animation: hmPulse 1.6s ease-in-out infinite; }
@keyframes hmPulse { 50% { box-shadow: 0 0 0 7px rgba(255, 59, 92, .05); } }
.hm-tc { color: rgba(255, 255, 255, .85); font-variant-numeric: tabular-nums; font-weight: 600; }
.hm-watch { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .9); font-weight: 600; }
.hm-watch .icon { width: 15px; height: 15px; color: var(--h-accent); }
.hm-found { position: absolute; z-index: 3; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.9); opacity: 0;
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 16px; border-radius: 14px;
  background: rgba(4, 12, 26, .86); border: 1px solid rgba(46, 230, 214, .45); backdrop-filter: blur(8px);
  font: 650 15px/1.2 var(--font); color: #fff; white-space: nowrap; box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .8);
  animation: hmFound 9s var(--spring) infinite; }
.hm-found .icon { width: 18px; height: 18px; color: var(--h-accent); }
.hm-found b { color: var(--h-accent); font-variant-numeric: tabular-nums; }
@keyframes hmFound { 0%, 12% { opacity: 0; transform: translate(-50%, -40%) scale(.92); } 18%, 46% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  54%, 100% { opacity: 0; transform: translate(-50%, -58%) scale(.98); } }
.hm-wave { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; height: 34px; display: flex; align-items: flex-end; gap: 3px; }
.hm-wave i { flex: 1; min-width: 2px; border-radius: 2px; background: linear-gradient(180deg, #7ff3ea, rgba(46, 230, 214, .35));
  height: calc(18% + var(--h) * 1%); transform-origin: bottom; animation: hmBar 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * -90ms); opacity: .85; }
.hm-wave i.hot { background: linear-gradient(180deg, #ffe39a, #ff97b4); }
@keyframes hmBar { 50% { transform: scaleY(.45); } }
.hm-short { position: relative; width: 50%; max-width: 300px; margin: -34% 5% 0 auto; z-index: 4; aspect-ratio: 9 / 16;
  border-radius: 22px; overflow: hidden; background: #000; border: 2px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .95); animation: hmShort 9s var(--spring) infinite; }
.hm-short > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-short::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .75)); }
@keyframes hmShort { 0%, 40% { opacity: 0; transform: translateY(26px) scale(.94); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
.hm-cap { position: absolute; z-index: 2; left: 0; right: 0; top: 56%; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 2px 7px; padding: 0 10%; font: 900 clamp(20px, 5.4vw, 30px)/1.05 var(--font); letter-spacing: -0.02em; color: #fff;
  text-transform: uppercase; -webkit-text-stroke: 1.5px #000; paint-order: stroke fill; text-shadow: 0 3px 0 rgba(0, 0, 0, .55); }
.hm-cap span { animation: hmWord 9s steps(1) infinite; animation-delay: calc(var(--i) * .38s); }
@keyframes hmWord { 0%, 52% { color: #fff; } 56%, 100% { color: #ffe066; } }
.hm-short-foot { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px;
  font: 650 12.5px/1.2 var(--font); color: #fff; }
.hm-short-foot .ok { display: inline-flex; align-items: center; gap: 5px; color: var(--h-ok); }
.hm-short-foot .ok .icon { width: 15px; height: 15px; }
.hm-short-foot .marks { margin-left: auto; display: flex; gap: 6px; }
.hm-short-foot .marks .mark { width: 15px; height: 15px; opacity: .92; }
@media (min-width: 720px) {
  .hm-stage { padding: 18px; margin-top: 56px; }
  .hm-stage-in { grid-template-columns: 1fr 260px; align-items: center; gap: 18px; }
  .hm-short { width: 100%; margin: 0; max-width: none; }
}

/* ---------- where it records from and where it posts ---------- */
.hm-nets { display: grid; gap: 16px; justify-items: center; padding: 44px 0 8px; color: var(--h-faint); text-align: center; }
.hm-nets-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; }
.hm-nets small { width: 100%; font: 650 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.hm-net { display: inline-flex; align-items: center; gap: 8px; color: #c9d5e8; font: 600 15px/1 var(--font); opacity: .8; }
.hm-net .mark { width: 20px; height: 20px; }
@media (min-width: 720px) { .hm-nets { grid-template-columns: auto auto; justify-content: center; gap: 22px 64px; }
  .hm-nets-row { flex-wrap: nowrap; } .hm-nets small { width: auto; } }

/* ---------- sections ---------- */
.hm-sec { padding: 76px 0 8px; scroll-margin-top: 70px; }
.hm-head { text-align: center; max-width: 760px; margin: 0 auto; }
.hm-head h2 { margin-top: 14px; font-size: clamp(32px, 6.4vw, 56px); line-height: 1.04; letter-spacing: -0.042em; }
.hm-head p { margin: 16px auto 0; max-width: 46ch; color: var(--h-muted); font-size: clamp(17px, 2vw, 20px); line-height: 1.5; }
@media (min-width: 720px) { .hm-sec { padding-top: 120px; } }

/* a feature: a big card with the product in it, then its name and one line */
.hm-feats { display: grid; gap: 40px; margin-top: 40px; }
.hm-feat { display: grid; gap: 18px; }
.hm-card { position: relative; border-radius: var(--h-r); overflow: hidden; border: 1px solid var(--h-line);
  background: linear-gradient(160deg, #17345f 0%, #10264a 48%, #0c1e3b 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 60px -34px rgba(0, 0, 0, .9); }
.hm-feat h3 { font-size: 24px; letter-spacing: -0.03em; line-height: 1.15; }
.hm-feat p { margin-top: 8px; color: var(--h-muted); font-size: 17px; line-height: 1.55; max-width: 52ch; }
@media (min-width: 900px) {
  .hm-feats { grid-template-columns: 1fr 1fr; gap: 56px 28px; margin-top: 56px; }
  .hm-feat.wide { grid-column: 1 / -1; }
}

/* mock-ups inside the cards (the real app's look, drawn in HTML) */
.mk2 { position: relative; padding: 22px; min-height: 280px; }
.mk2 img { display: block; }
/* moments pinned along a live stream */
.mk-pins .mk-frame { position: relative; aspect-ratio: 16 / 8; border-radius: 16px; overflow: hidden; }
.mk-pins .mk-frame img { width: 100%; height: 100%; object-fit: cover; }
.mk-pins .mk-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent 40%, rgba(0, 0, 0, .55)); }
.mk-pins .hm-top { left: 14px; top: 12px; }
.mk-track { position: relative; margin-top: 26px; height: 120px; }
.mk-track .line { position: absolute; left: 0; right: 0; top: 38px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(46, 230, 214, .15), rgba(46, 230, 214, .6) 70%, rgba(46, 230, 214, .15)); }
.mk-track .line::after { content: ''; position: absolute; top: -5px; width: 14px; height: 14px; border-radius: 50%; background: var(--h-live);
  box-shadow: 0 0 0 5px rgba(255, 59, 92, .2); left: 92%; }
.mk-pin { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; text-align: center;
  animation: hmPin 6s var(--spring) infinite; animation-delay: calc(var(--i) * .5s); }
.mk-pin img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 10px 24px -8px #000; }
.mk-pin b { font: 650 12.5px/1.2 var(--font); color: #fff; white-space: nowrap; }
.mk-pin small { font: 600 12px/1 var(--font); color: var(--h-faint); font-variant-numeric: tabular-nums; }
@keyframes hmPin { 0% { transform: translateX(-50%) translateY(8px); opacity: 0; } 10%, 85% { transform: translateX(-50%); opacity: 1; } 100% { opacity: 1; } }
/* framing: the wide stream, the box that follows the speaker, the vertical short */
.mk-frame2 { display: grid; grid-template-columns: 1.6fr auto 1fr; align-items: center; gap: 14px; }
.mk-frame2 .wide { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; }
.mk-frame2 .wide img { width: 100%; height: 100%; object-fit: cover; }
.mk-frame2 .box { position: absolute; top: 8%; bottom: 8%; width: 32%; left: 34%; border: 2px solid #4ee0a6; border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .35); animation: hmTrack 6s ease-in-out infinite; }
@keyframes hmTrack { 0%, 100% { left: 30%; } 50% { left: 40%; } }
.mk-frame2 .dots { display: flex; gap: 5px; }
.mk-frame2 .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--h-line-3); animation: hmDot 1.5s infinite; animation-delay: calc(var(--i) * .18s); }
@keyframes hmDot { 40% { background: var(--h-accent); } }
.mk-frame2 .tall { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; border: 1px solid var(--h-line-2); }
.mk-frame2 .tall img { position: absolute; width: 100%; height: 50%; object-fit: cover; }
.mk-frame2 .tall img + img { top: 50%; }
/* captions in three styles, and an edit asked for in plain words */
.mk-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mk-styles figure { position: relative; margin: 0; aspect-ratio: 9 / 15; border-radius: 14px; overflow: hidden; }
.mk-styles img { width: 100%; height: 100%; object-fit: cover; }
.mk-styles b { position: absolute; left: 6%; right: 6%; top: 60%; text-align: center; font: 900 clamp(14px, 3.8vw, 22px)/1.05 var(--font); color: #fff; }
.mk-styles .s1 b { text-transform: uppercase; -webkit-text-stroke: 1.2px #000; paint-order: stroke fill; color: #ffe066; }
.mk-styles .s2 b { text-transform: uppercase; background: #fff; color: #08101f; padding: 4px 6px; border-radius: 6px; width: max-content; margin: 0 auto; }
.mk-styles .s3 b { font-weight: 700; text-shadow: 0 2px 12px rgba(0, 0, 0, .9); }
.mk-ask { margin-top: 16px; display: grid; gap: 10px; }
.mk-ask .msg { justify-self: end; max-width: 86%; padding: 12px 16px; border-radius: 18px 18px 6px 18px; background: var(--h-accent); color: var(--h-on-accent); font: 600 15px/1.35 var(--font); }
.mk-ask .reply { justify-self: start; display: inline-flex; align-items: center; gap: 9px; padding: 11px 15px; border-radius: 18px 18px 18px 6px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--h-line); color: #dce6f5; font: 600 14.5px/1.3 var(--font); }
.mk-ask .reply .icon { width: 16px; height: 16px; color: var(--h-ok); }
/* posting: one short, every network, on its own when it is ready */
.mk-post { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: center; }
.mk-post .hm-thumb { aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; }
.mk-post .hm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mk-post .rows { display: grid; gap: 10px; }
.mk-post .r { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid var(--h-line); }
.mk-post .r .mark { width: 18px; height: 18px; color: #fff; }
.mk-post .r span { flex: 1; font: 600 14.5px/1.2 var(--font); color: #e6edf7; }
.mk-post .r em { font-style: normal; font: 600 13px/1 var(--font); color: var(--h-ok); display: inline-flex; align-items: center; gap: 5px; }
.mk-post .r em .icon { width: 14px; height: 14px; }
.mk-post .r em.wait { color: var(--h-faint); }
.mk-switch { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding: 12px 13px; border-radius: 14px; background: rgba(46, 230, 214, .07); border: 1px solid rgba(46, 230, 214, .25); font: 600 14.5px/1.3 var(--font); color: #e9fffb; }
.mk-switch i { position: relative; width: 38px; height: 22px; border-radius: 22px; background: var(--h-accent); flex: none; }
.mk-switch i::after { content: ''; position: absolute; right: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
/* long videos: a player with chapters */
.mk-long { display: grid; gap: 14px; }
.mk-long .player { position: relative; aspect-ratio: 16 / 8; border-radius: 16px; overflow: hidden; }
.mk-long .player img { width: 100%; height: 100%; object-fit: cover; }
.mk-long .player .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: #08101f; }
.mk-long .player .play .icon { width: 26px; height: 26px; margin-left: 3px; }
.mk-long .bar { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .25); display: flex; gap: 3px; overflow: hidden; }
.mk-long .bar i { flex: var(--w); background: rgba(255, 255, 255, .85); }
.mk-long .bar i:nth-child(n+3) { background: transparent; }
.mk-chaps { display: grid; gap: 8px; }
.mk-chaps div { display: flex; gap: 12px; align-items: baseline; font: 600 15px/1.3 var(--font); color: #e6edf7; }
.mk-chaps div small { font: 600 13px/1 var(--font); color: var(--h-accent); font-variant-numeric: tabular-nums; min-width: 44px; }
@media (min-width: 900px) { .mk-long { grid-template-columns: 1.5fr 1fr; align-items: center; gap: 22px; } }

/* ---------- three steps ---------- */
.hm-steps { display: grid; gap: 14px; margin-top: 40px; counter-reset: s; }
.hm-step { padding: 26px; border-radius: var(--h-r); background: linear-gradient(180deg, #13294d, #0e2040); border: 1px solid var(--h-line); }
.hm-step .n { display: inline-block; font: 800 44px/1 var(--font); letter-spacing: -0.04em; }
.hm-step h3 { margin-top: 14px; font-size: 22px; letter-spacing: -0.025em; }
.hm-step p { margin-top: 8px; color: var(--h-muted); font-size: 16.5px; }
@media (min-width: 900px) { .hm-steps { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; } }

/* ---------- who it is for: photos that scroll sideways on a phone ---------- */
.hm-uses { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 14px; margin: 40px calc(-1 * var(--h-gut-r)) 0 calc(-1 * var(--h-gut));
  padding: 0 var(--h-gut-r) 6px var(--h-gut); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hm-uses::-webkit-scrollbar { display: none; }
.hm-use { scroll-snap-align: start; position: relative; border-radius: var(--h-r); overflow: hidden; border: 1px solid var(--h-line); background: var(--h-card); }
.hm-use .ph { position: relative; aspect-ratio: 4 / 3.4; }
.hm-use .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-use .ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(3, 10, 23, .92)); }
.hm-use .tx { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; }
.hm-use h3 { font-size: 22px; letter-spacing: -0.025em; }
.hm-use p { margin-top: 6px; color: #c6d2e4; font-size: 15.5px; line-height: 1.45; }
@media (min-width: 900px) {
  .hm-uses { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; margin: 56px 0 0; padding: 0; overflow: visible; gap: 20px; }
  .hm-use:first-child, .hm-use:last-child { grid-column: span 2; }
  .hm-use:first-child .ph, .hm-use:last-child .ph { aspect-ratio: auto; height: 100%; min-height: 340px; }
}

/* ---------- what an hour costs (13.12): EasyClippers beside OpusClip Pro and StreamClipping AI, one column each (ours
   in the middle on a computer, where the eyes rest, and first on a phone, its top line in the main colour, as the
   recommended plan's), stacked on a phone and side by side on a computer with their rows lined up; split by
   hairlines (flat.css) like every section ---------- */
.hm-why { display: grid; gap: 14px; margin-top: 40px; }
.hm-why > div { padding: 26px; border-radius: var(--h-r); border: 1px solid var(--h-line); background: linear-gradient(180deg, #13294d, #0e2040); }
.hm-why > div.us { border-top: 2px solid var(--h-accent) !important; order: -1; }     /* first on a phone */
.hm-vs-col { display: grid; align-content: start; gap: 10px; min-width: 0; }
.hm-vs-col h3 { font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; }
.hm-vs-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.hm-vs-price b { font: 800 clamp(30px, 8vw, 40px)/1.05 var(--font); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.hm-vs-price span { color: var(--h-muted); font-size: 15.5px; }
.hm-vs-basis { color: var(--h-muted); font-size: 14.5px; line-height: 1.45; }
.hm-vs-has { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--h-line); }
.hm-vs-has b { font: 650 12px/1.25 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--h-faint); }
.hm-vs-has span { display: flex; align-items: flex-start; gap: 8px; font-size: 15.5px; line-height: 1.4; }
.hm-vs-has .icon { width: 17px; height: 17px; flex: none; margin-top: 2px; stroke-width: 2.4; color: var(--h-faint); }
.hm-vs-has.yes .icon { color: var(--h-ok); }
.hm-vs-has.no span { color: var(--h-muted); }
.home .hm-vs-note { max-width: 74ch; margin: 40px auto 0; line-height: 1.5; }   /* .home p sets no margin */
@media (min-width: 900px) {
  .hm-why { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
  .hm-why > div.us { order: 0; }                          /* the middle column, as the page lists it */
  .hm-why.hm-vs { row-gap: 0 !important; }               /* the rows are the columns' own (subgrid) */
  .hm-why > .hm-vs-col { grid-row: span 5; grid-template-rows: subgrid; }
  .hm-vs-price b { font-size: clamp(30px, 3.1vw, 40px); }
}

/* ---------- gallery (set by the admin; only shorts everyone agreed to) ---------- */
.hm-reel { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 14px; margin: 40px calc(-1 * var(--h-gut-r)) 0 calc(-1 * var(--h-gut));
  padding: 0 var(--h-gut-r) 6px var(--h-gut); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hm-reel::-webkit-scrollbar { display: none; }
.hm-reel figure { scroll-snap-align: start; margin: 0; }
.hm-reel .scr { position: relative; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: #000; border: 1px solid var(--h-line-2); }
.hm-reel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-reel figcaption { margin-top: 10px; font: 600 15px/1.35 var(--font); color: #e6edf7; }
.hm-reel figcaption span { display: block; color: var(--h-faint); font-weight: 500; font-size: 14px; }
:is(.hm-reel, .hm-ba) .lp-sound { position: absolute; z-index: 2; right: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; }
:is(.hm-reel, .hm-ba) .lp-sound.on { background: var(--h-accent); color: var(--h-on-accent); }
@media (min-width: 900px) { .hm-reel { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); grid-auto-columns: auto; margin: 56px 0 0; padding: 0; overflow: visible; gap: 18px; } }

/* ---------- before and after (13.12): a raw moment as recorded beside the short made from it, only for the gallery's
   own shorts (nothing is drawn without one). On a phone the wide moment sits above its short, several of them side
   by side to swipe; on a computer the moment, an arrow and the short in one row. The poster shows first (loaded
   lazily); the video plays over it, muted, once it is in view ---------- */
.hm-ba { display: grid; gap: 44px; margin-top: 40px; }
.hm-ba.many { grid-auto-flow: column; grid-auto-columns: 86%; gap: 16px; margin: 40px calc(-1 * var(--h-gut-r)) 0 calc(-1 * var(--h-gut));
  padding: 0 var(--h-gut-r) 6px var(--h-gut); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  scroll-padding: 0 var(--h-gut-r) 0 var(--h-gut); }               /* each pair snaps to the page's gutter, not the edge */
.hm-ba.many::-webkit-scrollbar { display: none; }
.hm-ba-pair { margin: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; scroll-snap-align: start; }
.hm-ba-side { display: grid; gap: 10px; width: 100%; min-width: 0; }
.hm-ba-side.after { width: min(58%, 280px); }
.hm-ba .scr { position: relative; overflow: hidden; border-radius: 18px; background: #000; border: 1px solid var(--h-line-2); }
.hm-ba .raw .scr { aspect-ratio: 16 / 9; }
.hm-ba .after .scr { aspect-ratio: 9 / 16; border-radius: 20px; }
.hm-ba .scr :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.hm-ba .raw .scr :is(img, video) { object-fit: contain; }         /* the whole frame, exactly as it was streamed */
.hm-ba .scr video { opacity: 0; transition: opacity .25s; }        /* over its poster once its first frame is there */
.hm-ba .scr video.on { opacity: 1; }
.hm-ba-side small { font: 650 12px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--h-faint); text-align: center; }
.hm-ba-to { display: grid; place-items: center; width: 24px; height: 24px; margin: -2px 0; color: var(--h-accent); transform: rotate(90deg); }
.hm-ba-to .icon { width: 22px; height: 22px; }
.hm-ba-pair figcaption { text-align: center; font: 600 15px/1.35 var(--font); color: var(--h-text); }
.hm-ba-pair figcaption span { display: block; margin-top: 2px; color: var(--h-faint); font-weight: 500; font-size: 14px; }
@media (min-width: 720px) {
  .hm-ba, .hm-ba.many { grid-auto-flow: row; grid-auto-columns: auto; gap: 56px; margin: 48px auto 0; padding: 0; max-width: 1000px;
    overflow: visible; scroll-snap-type: none; }
  .hm-ba-pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, clamp(190px, 24vw, 250px)); grid-template-areas: 'raw to after' 'cap . after';
    align-items: center; justify-items: stretch; gap: 14px 22px; }
  .hm-ba-side.raw { grid-area: raw; align-self: end; }
  .hm-ba-to { grid-area: to; margin: 0; transform: none; }
  .hm-ba-side.after { grid-area: after; width: 100%; }
  .hm-ba-pair figcaption { grid-area: cap; align-self: start; text-align: left; }
  .hm-ba-side.raw small { text-align: left; }
}

/* ---------- pricing ---------- */
.hm-plans { display: grid; gap: 14px; margin-top: 40px; }
.hm-plan { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: var(--h-r); border: 1px solid var(--h-line);
  background: linear-gradient(180deg, #13294d, #0e2040); }
.hm-plan.rec { border-color: transparent; background: linear-gradient(180deg, #183563, #11284e) padding-box,
  linear-gradient(160deg, rgba(46, 230, 214, .9), rgba(124, 92, 255, .7) 60%, rgba(46, 230, 214, .3)) border-box; border: 1.5px solid transparent;
  box-shadow: 0 40px 90px -50px rgba(46, 230, 214, .45); }
.hm-plan .top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hm-plan h3 { font-size: 22px; letter-spacing: -0.02em; }
.hm-plan .pop { font: 650 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--h-accent); }
.hm-plan .price { margin-top: 18px; display: flex; align-items: baseline; gap: 6px; }
.hm-plan .price b { font: 800 52px/1 var(--font); letter-spacing: -0.05em; color: #fff; }
.hm-plan .price span { color: var(--h-muted); font-size: 16px; }
.hm-plan .hours { margin-top: 18px; font: 700 20px/1.25 var(--font); letter-spacing: -0.02em; color: #fff; }
.hm-plan .per { margin-top: 4px; color: var(--h-muted); font-size: 15.5px; }
.hm-plan .hm-btn { margin-top: 24px; width: 100%; }
.hm-plan .yr { margin-top: 12px; text-align: center; color: var(--h-muted); font-size: 14.5px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--h-line-3); }
.hm-plan .yr:hover { color: #fff; }
.hm-incl { margin-top: 18px; padding: 26px; border-radius: var(--h-r); border: 1px solid var(--h-line); background: linear-gradient(180deg, #13294d, #0e2040); }
.hm-incl h3 { font-size: 19px; letter-spacing: -0.02em; }
.hm-incl ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.hm-incl li { display: flex; gap: 11px; align-items: flex-start; color: #dde6f3; font-size: 16px; line-height: 1.4; }
.hm-incl li .icon { width: 18px; height: 18px; color: var(--h-accent); flex: none; margin-top: 2px; }
.hm-extra { display: grid; gap: 14px; margin-top: 14px; }
.hm-extra > div { display: flex; flex-direction: column; gap: 6px; padding: 22px 26px; border-radius: var(--h-r); border: 1px solid var(--h-line); background: linear-gradient(180deg, #13294d, #0e2040); }
.hm-extra b { font: 700 18px/1.3 var(--font); color: #fff; letter-spacing: -0.02em; }
.hm-extra span { color: var(--h-muted); font-size: 15.5px; }
.hm-extra a { margin-top: 8px; align-self: flex-start; }
.hm-fine { margin-top: 22px; text-align: center; color: var(--h-faint); font-size: 14px; }
@media (min-width: 900px) {
  .hm-plans { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
  .hm-incl ul { grid-template-columns: repeat(3, 1fr); gap: 14px 24px; }
  .hm-extra { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
  .hm-incl { margin-top: 20px; }
}

/* ---------- questions ---------- */
.hm-faq { max-width: 820px; margin: 36px auto 0; border-top: 1px solid var(--h-line); }
.hm-faq details { border-bottom: 1px solid var(--h-line); }
.hm-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 2px;
  cursor: pointer; font: 650 18px/1.35 var(--font); letter-spacing: -0.02em; color: #fff; }
.hm-faq summary::-webkit-details-marker { display: none; }
.hm-faq summary i { position: relative; width: 18px; height: 18px; flex: none; }
.hm-faq summary i::before, .hm-faq summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; border-radius: 2px;
  background: var(--h-muted); transform: translate(-50%, -50%); transition: transform .25s var(--spring); }
.hm-faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.hm-faq details[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.hm-faq details p { padding: 0 2px 22px; color: var(--h-muted); font-size: 16.5px; line-height: 1.6; max-width: 66ch; }
.hm-faq-more { margin-top: 22px; text-align: center; color: var(--h-faint); font-size: 15px; }
.hm-faq-more span { color: #dde6f3; user-select: all; }

/* ---------- the last call ---------- */
.hm-final { position: relative; margin: 96px auto 0; padding: 56px 26px; border-radius: 32px; text-align: center; overflow: hidden;
  border: 1px solid var(--h-line-2); background: radial-gradient(600px 300px at 50% 0%, rgba(46, 230, 214, .2), transparent 70%),
  linear-gradient(180deg, #0f2342, #081325); }
.hm-final h2 { font-size: clamp(34px, 6.6vw, 60px); line-height: 1.02; letter-spacing: -0.045em; }
.hm-final p { margin: 16px auto 0; max-width: 40ch; color: var(--h-muted); font-size: 18px; }
.hm-final .row2 { display: grid; gap: 10px; margin: 28px auto 0; max-width: 420px; }
@media (min-width: 720px) { .hm-final { padding: 84px 40px; } .hm-final .row2 { display: flex; justify-content: center; max-width: none; } }

/* ---------- footer ---------- */
.hm-foot { margin-top: 80px; padding: 44px 0 calc(120px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--h-line); color: var(--h-faint); font-size: 14.5px; }
.hm-foot .hm-fcols { display: grid; gap: 28px; }
.hm-foot .brand .wordmark { color: #fff; }
.hm-foot p { margin-top: 10px; max-width: 34ch; }
.hm-foot nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.hm-foot nav a { color: #c6d2e4; }
.hm-foot nav a:hover { color: #fff; }
.hm-foot .legal { margin-top: 32px; font-size: 13.5px; }
@media (min-width: 900px) { .hm-foot { padding-bottom: 56px; } .hm-foot .hm-fcols { grid-template-columns: 1.2fr 2fr; } .hm-foot nav { grid-template-columns: repeat(4, auto); justify-content: end; } }

/* ---------- on phones, the way in stays at the bottom ---------- */
.hm-sticky { position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; padding: 14px var(--h-gut-r) calc(14px + env(safe-area-inset-bottom, 0px)) var(--h-gut);
  background: linear-gradient(180deg, rgba(3, 10, 23, 0), rgba(3, 10, 23, .92) 34%); transform: translateY(110%); transition: transform .3s var(--spring); }
.hm-sticky.on { transform: none; }
.hm-sticky a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 62px; border-radius: 999px;
  background: var(--h-accent); color: var(--h-on-accent); text-decoration: none; box-shadow: 0 16px 40px -14px rgba(46, 230, 214, .6); }
.hm-sticky a b { font: 750 17px/1 var(--font); letter-spacing: -0.015em; }
.hm-sticky a span { font: 600 13px/1 var(--font); opacity: .72; }
/* on a computer: the link box floats at the bottom once the hero is gone */
.hm-float { display: none; }
@media (min-width: 720px) {
  .hm-sticky { display: none; }
  .hm-float { display: flex; position: fixed; z-index: 25; left: 50%; bottom: 22px; transform: translate(-50%, 140%); width: min(620px, calc(100% - 40px));
    align-items: center; gap: 10px; height: 62px; padding: 0 7px 0 20px; border-radius: 999px; background: rgba(10, 22, 42, .92);
    border: 1px solid var(--h-line-2); backdrop-filter: blur(14px); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9); transition: transform .35s var(--spring); }
  .hm-float.on { transform: translate(-50%, 0); }
  .hm-float .icon { width: 19px; height: 19px; color: var(--h-faint); }
  .hm-float input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font-size: 16px; }
  .hm-float input::placeholder { color: var(--h-faint); }
  .hm-float .hm-btn { height: 48px; }
}

/* ---------- scrolling into view ---------- */
.hm-rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--spring), transform .7s var(--spring); transition-delay: calc(var(--d, 0) * 70ms); }
.hm-rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hm-rv { opacity: 1; transform: none; }
  .hm-found { opacity: 1; transform: translate(-50%, -50%); }
  .hm-short, .mk-pin { opacity: 1; transform: none; }
  .mk-pin { transform: translateX(-50%); }
}
@media (min-width: 900px) { .mk-pins .mk-frame { aspect-ratio: 16 / 6; } .mk-pins .mk-track { height: 110px; } }
/* on a computer every photo fills its card, so a card in a taller row is never half empty */
@media (min-width: 900px) { .hm-use { min-height: 320px; } .hm-use .ph { position: absolute; inset: 0; aspect-ratio: auto; height: auto; min-height: 0; }
  .hm-use:first-child .ph, .hm-use:last-child .ph { min-height: 0; } }

/* ---------- sign-in and sign-up: the website's dark navy (13.9) ---------- */
.login.site {
  color-scheme: dark;
  --bg: #030a17; --surface: #0b1729; --surface-2: #0e1d35; --surface-3: #13274a; --raised: #0e1d35; --well: #071224;
  --text: #ffffff; --text-2: #dae4f2; --text-3: #b8c6da; --text-hi: #ffffff; --text-soft: #eef3fa;
  --border: #1a2d4d; --border-2: #22395e; --border-3: #31497a; --rule: #1a2d4d; --rule-2: #22395e;
  --hover: rgba(148, 210, 255, .06); --accent-text: #7ff3ea; --accent-text-hover: #c6fbf6; --focus-ring: #7ff3ea; --focus: rgba(46, 230, 214, .2);
  --ov: 148 197 255;
  background: radial-gradient(900px 520px at 50% -160px, rgba(46, 230, 214, .12), transparent 70%),
    radial-gradient(760px 520px at 92% 2%, rgba(130, 96, 255, .1), transparent 70%), #030a17;
  color: var(--text);
}
.login.site .login-nav .brand .wordmark { color: #fff; }
.login.site .hero-title { color: #fff; letter-spacing: -0.045em; }
.login.site .hero-copy, .login.site .muted { color: var(--text-2); }
.login.site .auth-card, :root[data-theme="dark"] .login.site .auth-card {
  color-scheme: dark;
  --surface: #0d1c34; --surface-2: #10223f; --well: #0a1629; --raised: #10223f; --bg: #0d1c34;
  --text: #ffffff; --text-2: #dae4f2; --text-3: #b8c6da; --text-hi: #ffffff;
  --border: #2a4370; --border-2: #2a4370; --border-3: #3a5689; --hover: rgba(148, 210, 255, .07);
  --accent-text: #7ff3ea; --accent-text-hover: #c6fbf6; --focus-ring: #7ff3ea;
  background: linear-gradient(180deg, #15305a, #0f2344); border: 1px solid #2a4370; color: var(--text);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.login.site .auth-card .input { background: #081426; border-color: #22395e; color: #fff; }
.login.site .login-foot, .login.site .login-foot a { color: var(--text-3); }
@media (max-width: 600px) { .login.site .login-foot { flex-wrap: wrap; justify-content: center; text-align: center; gap: 8px 18px; }
  .login.site .login-foot > span:first-child { width: 100%; } }

/* the home page's top in index.html, shown only while the scripts load for a visitor on the home address (theme.js) */
.pre-hero { display: none; }
html.pre-home .pre-hero { display: block; height: 100%; }
html.pre-home .backdrop { background: #030a17; }
.pre-hero .brand { display: inline-flex; align-items: center; gap: 10px; }