/* EasyClippers 13.10.1: the home page is light by default (the owner, Nov 4 2026: "make the default light mode for that
   main page"). Off-white with navy words, like the app's Light theme; a visitor who chose Dark (data-theme="dark", set
   by theme.js from their own choice) keeps the dark navy page of 13.9. Pictures, video and the words drawn over them
   keep their own dark look. Loaded after home.css and flat.css; everything is scoped to the home page. */
:root:not([data-theme="dark"]) :is(.home, .hm-sticky, .hm-float) {
  color-scheme: light;
  --h-bg: #f6f8fb; --h-card: #ffffff; --h-card-2: #eef3f9; --h-well: #eef2f7;
  --h-line: rgba(7, 18, 38, .11); --h-line-2: rgba(7, 18, 38, .17); --h-line-3: rgba(7, 18, 38, .28);
  --h-text: #071226; --h-muted: #2f3d55; --h-faint: #5a6a82;
  --h-accent: #22d6c7; --h-accent-hover: #4fe3d6; --h-on-accent: #03141a;
  --h-ink: #087f77;                     /* aqua as text and icons on white (the bright aqua reads on navy only) */
  --h-ok: #0f7f59;                      /* "Posted" on white */
  --h-gold: linear-gradient(90deg, #b7791f 0%, #dd6b20 16%, #d53f8c 34%, #805ad5 52%, #3182ce 70%, #0f9d8a 85%, #b7791f 100%);
}
:root:not([data-theme="dark"]) .backdrop.home-bg, html.pre-home:not([data-theme="dark"]) .backdrop { background: #f6f8fb; }
:root:not([data-theme="dark"]) .home {
  background:
    radial-gradient(900px 520px at 50% -140px, rgba(46, 230, 214, .18), transparent 70%),
    radial-gradient(760px 520px at 92% 2%, rgba(130, 96, 255, .1), transparent 70%),
    radial-gradient(620px 460px at 4% 8%, rgba(37, 99, 235, .08), transparent 70%),
    var(--h-bg);
  scrollbar-color: rgba(7, 18, 38, .22) transparent;
}
:root:not([data-theme="dark"]) .home ::selection { background: rgba(46, 230, 214, .35); color: var(--h-text); }

/* words on the page */
:root:not([data-theme="dark"]) .home :is(h1, h2, h3),
:root:not([data-theme="dark"]) :is(.hm-nav, .hm-foot) .brand .wordmark,
:root:not([data-theme="dark"]) .home :is(.hm-burger, .hm-menu button.hm-mi, .hm-faq summary, .hm-plan .price b, .hm-plan .hours,
  .hm-extra b, .hm-reel figcaption, .mk-post .r span, .mk-post .r .mark, .mk-chaps div),
:root:not([data-theme="dark"]) .home :is(.hm-links button:hover, .hm-btn.quiet:hover, .hm-plan .yr:hover, .hm-foot nav a:hover) {
  color: var(--h-text);
}
:root:not([data-theme="dark"]) .home :is(.hm-net, .hm-use p, .hm-incl li, .hm-faq-more span, .hm-foot nav a, .mk-ask .reply) {
  color: var(--h-muted);
}
:root:not([data-theme="dark"]) .home .hm-net { opacity: 1; }
:root:not([data-theme="dark"]) .home :is(.hm-eyebrow .icon, .hm-plan .pop, .hm-incl li .icon, .mk-chaps div small) { color: var(--h-ink); }
:root:not([data-theme="dark"]) .home .hm-hint.err { color: #b42345; }
:root:not([data-theme="dark"]) .home .mk-pin b { color: var(--h-text); }       /* under the moments' pictures, on the page */

/* buttons, the bar, the phone menu */
:root:not([data-theme="dark"]) .home .hm-btn.line { background: #ffffff; color: var(--h-text); border-color: var(--h-line-3); }
:root:not([data-theme="dark"]) .home .hm-btn.line:hover { background: var(--h-card-2); color: var(--h-text); border-color: rgba(7, 18, 38, .38); }
:root:not([data-theme="dark"]) .home .hm-btn.primary { box-shadow: 0 10px 26px -12px rgba(8, 127, 119, .55), inset 0 1px 0 rgba(255, 255, 255, .5); }
:root:not([data-theme="dark"]) .home .hm-links button:hover { background: rgba(7, 18, 38, .05); }
:root:not([data-theme="dark"]) .home.scrolled .hm-nav { background: rgba(246, 248, 251, .86); }
:root:not([data-theme="dark"]) .hm-menu { background: rgba(246, 248, 251, .97); }
:root:not([data-theme="dark"]) .hm-menu button.hm-mi { color: var(--h-text); }

/* the link box, and the copies of it that float at the bottom */
:root:not([data-theme="dark"]) .home .hm-field { background: #ffffff; box-shadow: 0 18px 40px -26px rgba(7, 18, 38, .3); }
:root:not([data-theme="dark"]) .home .hm-field input,
:root:not([data-theme="dark"]) .hm-float input { color: var(--h-text); }
:root:not([data-theme="dark"]) .hm-sticky { background: linear-gradient(180deg, rgba(246, 248, 251, 0), rgba(246, 248, 251, .94) 34%); }
:root:not([data-theme="dark"]) .hm-float { background: rgba(255, 255, 255, .95); box-shadow: 0 24px 60px -24px rgba(7, 18, 38, .35); }

/* the product shown at work: its frame turns light, the stream and the short inside it stay as filmed */
:root:not([data-theme="dark"]) .home .hm-stage {
  background: linear-gradient(180deg, #ffffff, #eef3f9);
  box-shadow: 0 50px 120px -60px rgba(8, 127, 119, .35), 0 30px 70px -40px rgba(7, 18, 38, .3);
}
:root:not([data-theme="dark"]) .home .mk-ask .reply { background: var(--h-card-2); }
:root:not([data-theme="dark"]) .home .mk-switch { background: rgba(46, 230, 214, .1); }
:root:not([data-theme="dark"]) .home .hm-short { border-color: rgba(7, 18, 38, .12); box-shadow: 0 30px 70px -26px rgba(7, 18, 38, .45); }
:root:not([data-theme="dark"]) .home .hm-reel .scr { border-color: var(--h-line-2); }
/* the proof (13.12): the before and after keeps its footage as filmed, its arrow in the deeper aqua that reads on white;
   in the hour comparison, ours keeps the main colour's line on top and the ticks go deep green */
:root:not([data-theme="dark"]) .home .hm-ba .scr { border-color: var(--h-line-2); box-shadow: 0 24px 50px -32px rgba(7, 18, 38, .4); }
:root:not([data-theme="dark"]) .home .hm-ba-to { color: var(--h-ink); }
:root:not([data-theme="dark"]) .home .hm-vs-has.yes .icon { color: var(--h-ok); }

/* sign-in and sign-up follow the home page (13.10.2): the light page took their navy backdrop away (13.10.1) and left
   white words on white and navy boxes on it. Navy words now, and the form on a frosted glass card. */
:root:not([data-theme="dark"]) .login.site {
  color-scheme: light;
  --bg: #f6f8fb; --surface: #ffffff; --surface-2: #f2f5fa; --surface-3: #e9eef6; --raised: #ffffff; --well: #eef2f7;
  --text: #071226; --text-2: #2f3d55; --text-3: #5a6a82; --text-hi: #071226; --text-soft: #1b2a44;
  --border: rgba(7, 18, 38, .14); --border-2: rgba(7, 18, 38, .2); --border-3: rgba(7, 18, 38, .3);
  --rule: rgba(7, 18, 38, .1); --rule-2: rgba(7, 18, 38, .16); --hover: rgba(7, 18, 38, .05);
  --accent-text: #087f77; --accent-text-hover: #065f59; --focus-ring: #087f77; --focus: rgba(8, 127, 119, .18);
  --ov: 7 18 38;
  --h-gold: linear-gradient(90deg, #b7791f 0%, #dd6b20 16%, #d53f8c 34%, #805ad5 52%, #3182ce 70%, #0f9d8a 85%, #b7791f 100%);
  color: var(--text);
}
:root:not([data-theme="dark"]) .login.site :is(.login-nav .brand .wordmark, .hero-title) { color: var(--text); }
:root:not([data-theme="dark"]) .login.site :is(.hero-copy, .muted) { color: var(--text-2); }
:root:not([data-theme="dark"]) .login.site :is(.login-foot, .login-foot a) { color: var(--text-3); }
:root:not([data-theme="dark"]) .login.site .auth-card {
  color-scheme: light;
  --surface: #ffffff; --surface-2: #f2f5fa; --well: #eef2f7; --raised: #ffffff; --bg: #ffffff;
  --text: #071226; --text-2: #2f3d55; --text-3: #5a6a82; --text-hi: #071226;
  --border: rgba(7, 18, 38, .14); --border-2: rgba(7, 18, 38, .2); --border-3: rgba(7, 18, 38, .3); --hover: rgba(7, 18, 38, .05);
  --accent-text: #087f77; --accent-text-hover: #065f59; --focus-ring: #087f77;
  color: var(--text);
  padding: 34px 30px 28px !important;
  border-radius: 30px !important;
  background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(244, 247, 252, .78) 60%, rgba(236, 242, 250, .86)) !important;
  border: 1px solid rgba(255, 255, 255, .95) !important;
  box-shadow: 0 0 0 1px rgba(7, 18, 38, .07), 0 2px 0 rgba(255, 255, 255, .9) inset, 0 -10px 24px -18px rgba(7, 18, 38, .18) inset,
    0 44px 90px -48px rgba(7, 18, 38, .45), 0 18px 40px -30px rgba(8, 127, 119, .25) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
}
:root:not([data-theme="dark"]) .login.site .auth-card .input {
  background: rgba(255, 255, 255, .9); border-color: rgba(7, 18, 38, .16); color: var(--text);
  box-shadow: inset 0 1px 2px rgba(7, 18, 38, .06);
}
:root:not([data-theme="dark"]) .login.site .auth-card .input::placeholder { color: #6b7a90; }