/* WorkDaddy / After Hours. Presentation layer; original components remain reusable.
 * Spotlight treatment adapted from David Haz's SpotlightCard.
 * See licenses/react-bits.txt. */
:root {
  color-scheme: dark;
  --paper: #101014;
  --ink: #f6f2ec;
  --muted: #a6a6ad;
  --orange: #c6c9ff;
  --border: #2c2c2f;
  --surface: #131314;
  --surface-raised: #1c1c1e;
  --highlight: #c6c9ff;
  --highlight-light: #dfe1ff;
  scroll-padding-top: 100px;
}
body { position: relative; isolation: isolate; }
::selection { background: #62677f; color: #ffffff; }
:is(button, a, input, select, summary):focus-visible {
  outline-color: #c6c9ff;
}
.wrap { width: min(1280px, calc(100% - 96px)); }
.hero-atmosphere {
  position: absolute;
  inset: 0 0 auto;
  height: 980px;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: #0e0e0f;
  mask-image: linear-gradient(#000000 72%, transparent);
}

#color-bends {
  display: block;
  width: 100%;
  height: 100%;
  opacity: .64;
  mask-image: linear-gradient(transparent, #00000044 25%, #000000 70%);
}
.header {
  position: relative;
  z-index: 10;
  height: 96px;
  border-bottom: 1px solid #e6c6ab1a;
}
.brand { font-size: 23px; letter-spacing: -.8px; }
.header nav { margin-right: auto; margin-left: 32px; gap: 30px; font-size: 13px; color: #c6c2be; }
.header nav a:hover { color: #ffffff; }
.header-actions { gap: 12px; }
.language-control { color: #ccc7c3; border-radius: 10px; min-height: 44px; }
.language-control:hover { background: #ffffff0a; }
.github-stars {
  min-height: 42px;
  background: #ffffff05;
  border-color: #ffffff10;
  border-radius: 10px;
  color: #d2cdc9;
}
.github-stars:hover { background: #262629; border-color: #aeb4ff4d; color: #ffffff; }
.github-stars [data-icon="star"] svg { color: #bfc0c8; }
.star-divider { background: #ffffff1c; }
.button { min-height: 50px; border-radius: 10px; font-weight: 600; }
.button.small { min-height: 42px; border-radius: 10px; }
.header .dark,
.hero .orange {
  background: #f2f2f4;
  border: 1px solid #ffffff;
  color: #1a1a1c;
  box-shadow: inset 0 1px 0 #ffffff66, 0 0 32px #aeb4ff1c;
}
.header .dark:hover,
.hero .orange:hover { background: #ffffff; color: #1a1a1c; box-shadow: 0 0 34px #aeb4ff38; }
.hero {
  min-height: 750px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: 74px;
  padding: 70px 0 68px;
}
.hero-copy { padding-bottom: 30px; }
.hero h1 > span { display: inline-block; }
.announcement {
  background: #ffffff06;
  border: 1px solid #ffffff15;
  color: #d9d5d1;
  border-radius: 8px;
  padding: 9px 13px;
  font-size: 11px;
  box-shadow: inset 0 1px 0 #ffffff08;
}
.status-dot { background: #b9beff; box-shadow: 0 0 12px #aeb4ff69; }
.hero h1,
html[lang="en"] .hero h1 {
  font-size: clamp(64px, 5.8vw, 82px);
  line-height: 1.16;
  font-weight: 650;
  letter-spacing: -3px;
  margin: 29px 0 28px;
}
html[lang="zh-CN"] .hero h1 > span:first-child { font-size: .77em; letter-spacing: -2px; }
.accent { display: inline-block; color: #f2f2f4; text-shadow: 0 0 35px #aeb4ff24; }
.underline, .orbit, .orbit-cross, .hero-product::before { display: none; }
.hero-description,
html[lang="en"] .hero-description { font-size: 15px; color: #beb8b3; line-height: 1.95; max-width: 460px; }
.hero-actions { margin-top: 32px; gap: 13px; }
.hero-actions .text-link {
  min-height: 50px;
  padding: 0 21px;
  border: 1px solid #ffffff10;
  border-radius: 10px;
  background: #ffffff07;
  color: #f2eeea;
}
.hero-actions .text-link:hover { background: #ffffff0f; border-color: #ffffff2a; }
.hero-support { color: #b3aca7; margin-top: 25px; font-size: 11px; flex-wrap: wrap; }
.hero-support > i { background: #ffffff26; }
.hero-note { color: #c4bab1; font-size: 11px; margin-top: 35px; }
.note-line { background: #a68d78; }
.hero-product { padding: 0; }
.demo-topline { color: #c3b9b0; font-size: 10px; margin: 0 2px 14px; }
.theme-controls { border-color: #ffffff13; background: #171719; }
.theme-controls button { width: 32px; height: 28px; color: #a19992; }
.theme-controls button[aria-pressed="true"] { background: #343438; color: #dfe1ff; box-shadow: none; }
.panel { max-width: none; height: 534px; border-radius: 16px; box-shadow: 0 24px 80px #00000066, 0 0 0 5px #aeb4ff08; }
.panel[data-theme="light"] { color-scheme: light; }
.panel[data-theme="dark"], .account-dialog[data-theme="dark"] {
  --wb-bg-popover: #161618ed;
  --wb-bg-hover: #2a2a2d;
  --wb-bg-tertiary: #1e1e20;
  --wb-border-subtle: #343438;
  --wb-color-text-primary: #f4f0ed;
  --wb-color-text-secondary: #bfb6af;
  --wb-icon-tertiary: #bab0a7;
  --wb-accent: #c6c9ff;
  --wb-accent-soft: #2f2f33;
}
.panel[data-theme="dark"] { backdrop-filter: blur(16px); --wb-bg-popover: #151517f5; --wb-bg-tertiary: #1e1e21; --wb-border-subtle: #343439; --wb-accent: #f2f2f4; }
.panel[data-theme="dark"] .panel-tab.active { background: #f2f2f4; color: #1a1a1c; }
.panel[data-theme="dark"] .account-status-tag { color: #c8c8d2; border-color: #4b4b55; background: #25252b; }
.panel[data-theme="dark"] .credit-segment { --credit-rgb: 145, 150, 255; }
.demo-under { padding-top: 16px; }
.handwritten { color: #bfc0c8; font-style: normal; }
.demo-under > svg { color: #9da1b8; }
.robot { background: #333337; border-color: #656879; box-shadow: 0 0 28px #8589c92b; }
.robot::before { background: #c4c5d0; }
.robot::after { background: #9da1b8; border-color: #666978; }
.robot i { background: #f4f4f6; }
.closed-panel { border-color: #54483f; background: #171719; color: #ddd1c7; }
.closed-panel .dark { background: #72768f; color: #ffffff; }
.trust-strip { border-color: var(--border); color: #b8b3ae; min-height: 88px; font-size: 12px; gap: 35px; }
.trust-strip .mono { color: #99918a; font-size: 10px; letter-spacing: 1.2px; }
.trust-strip svg { color: #b8bbd8; }
.product-features { padding-top: 24px; }
.feature-story { padding: 95px 0; gap: 64px; }
.feature-story-wide { gap: 38px; }
.feature-copy h2,
html[lang="en"] .feature-copy h2 {
  font-size: 38px;
  font-weight: 550;
  line-height: 1.45;
  letter-spacing: -1.2px;
}
.feature-story-wide .feature-copy { max-width: 1080px; }
.feature-story-wide h2 { max-width: 780px; }
.eyebrow { color: #c4c7ff; font-size: 11px; letter-spacing: 1.6px; }
.eyebrow > span:first-child:not(:last-child) { background: #aeb4ff; }
.feature-intro { color: #b8b1ac; font-size: 14px; }
.feature-story-wide .feature-intro { max-width: 650px; }
.feature-details, .feature-story-wide .feature-details { gap: 16px; margin-top: 32px; }
.feature-details li {
  position: relative;
  overflow: hidden;
  border: 1px solid #ffffff0e;
  border-radius: 12px;
  background: #141416;
  padding: 20px;
  gap: 12px;
}
.feature-details li > span { color: #c6c9ff; padding-top: 1px; }
.feature-details h3, html[lang="en"] .feature-details h3 { color: #e8e3df; font-size: 14px; font-weight: 550; margin-bottom: 7px; }
.feature-details p { color: #aba49e; font-size: 12px; line-height: 1.9; }
.feature-shot,
.theme-shot,
.enhance-shot,
.automation-shot {
  position: relative;
  background: #171719;
  border-color: #3b3b40;
  border-radius: 18px;
  padding: 23px;
  box-shadow: 0 22px 80px #00000044;
}
.feature-shot > img { position: relative; border: 1px solid #ffffff18; border-radius: 8px; box-shadow: 0 12px 40px #00000033; }
.shot-label { position: relative; color: #d8cfc8; font-size: 11px; margin-bottom: 20px; }
.shot-label svg { color: #b9bde8; }
.shot-note { color: #b2a8a0; font-size: 10px; }
.automation-shot figcaption { color: #bab0a7; font-size: 11px; }
.feature-story-enhance { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.feature-story-enhance .feature-details li { padding: 15px 17px; }
.feature-story-enhance .feature-copy h2 { max-width: 490px; }
.faq { padding-block: 100px; }
.faq h2 { font-size: 38px; font-weight: 550; letter-spacing: -1px; }
.faq-more { color: var(--muted); font-size: 14px; }
.faq-list details { border: 1px solid var(--border); border-radius: 12px; background: #121214; margin-bottom: 12px; padding-inline: 23px; }
.faq-list details:first-child { border-top: 1px solid var(--border); }
.faq-list details[open] { border-color: #756151; background: #171719; }
summary { color: #e5e1dd; font-size: 14px; min-height: 70px; padding-block: 20px; }
summary svg { color: #c8af9a; }
details p { color: #bcb5af; font-size: 13px; }
.install-guide { color: #bcb5af; }
.install-release-link { color: #c7caff; }
.install-guide li::marker { color: #b8bbdf; }
.install-note { background: #252528; border-color: #777b9e; }
.install-done svg { color: #b8bbdf; }
.download {
  background: #171719;
  border: 1px solid #594a3d;
  padding: 65px 48px 35px;
  border-radius: 22px;
  box-shadow: inset 0 1px 0 #b9bdff18, 0 0 100px #a2744f0c;
}
.download-top { position: relative; }
.download-star { color: #f2f2f4; }
.download-top .eyebrow { color: #d9bfa9; }
.download h2 { font-size: 48px; font-weight: 550; letter-spacing: -1.3px; }
.download-top > p:last-child { font-size: 14px; color: #bfb5ac; margin-top: 16px; }
.download-platforms { background: #101012; border-color: #50443b; border-radius: 12px; margin-top: 30px; }
.download-platforms button { min-height: 44px; color: #bfb5ac; font-size: 13px; }
.download-platforms button[aria-pressed="true"] { background: #313135; color: #f4f4f6; box-shadow: inset 0 0 0 1px #aeb4e83d; }
.release-status { color: #d1c0b2; font-size: 12px; }
.download-options { max-width: 820px; gap: 20px; margin-top: 28px; }
.download-card { position: relative; overflow: hidden; background: #1b1b1d; border: 1px solid #584a3f; border-radius: 14px; padding: 25px; }
.download-card:hover { background: #202023; border-color: #ae917a; box-shadow: 0 0 28px #7f84c615; }
.download-card h3 { font-size: 19px; color: #f4f0ec; }
.download-card p { color: #c0b5ac; font-size: 12px; }
.download-card .installer-meta { color: #bcb2a8; font-size: 12px; }
.installer-download { background: #f2f2f4; color: #1a1a1c; border-color: #ffffff; border-radius: 9px; font-size: 13px; }
.installer-download:hover { background: #ffffff; color: #1a1a1c; }
.download-card[data-download-client="ai"] .installer-download { background: #2e2e31; color: #f3e4d8; border-color: #555765; }
.download-card[data-download-client="ai"] .installer-download:hover { background: #393b4b; }
.release-notes-link { color: #c4c6dc; font-size: 12px; }
.download-foot { color: #afa196; font-size: 11px; }
.footer-top > p { color: #a79f99; font-size: 12px; }
.footer-top > a:not(.brand) { color: #bbb3ad; font-size: 12px; }
.footer-bottom { color: #a29a93; font-size: 10px; padding-top: 24px; }
.skip { background: #aeb4ff; color: #ffffff; }
.noscript { background: #242427; color: #efe0d4; }

/* SpotlightCard: decorative only, so all links remain directly clickable. */
:is(.feature-shot, .feature-details li, .download-card)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(450px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), #b8bdff1f, transparent 75%);
  opacity: 0;
  transition: opacity .3s ease;
}
:is(.feature-shot, .feature-details li, .download-card):is(:hover, :focus-within)::before { opacity: 1; }
.download-card > * { position: relative; }
.reveal-pending { opacity: 0; transform: translateY(22px); }
.reveal-ready { transition: opacity .65s ease, transform .65s cubic-bezier(.22, 1, .36, 1); }

@media (max-width: 1150px) {
  .wrap { width: calc(100% - 64px); }
  .header nav { margin-left: 10px; gap: 20px; }
  .hero { gap: 36px; }
  .hero h1, html[lang="en"] .hero h1 { font-size: 65px; }
  .hero-actions { gap: 10px; }
  .hero-actions .text-link, .hero .button { padding-inline: 17px; }
  .feature-story { gap: 36px; }
  .trust-strip { gap: 20px; font-size: 11px; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; max-width: 660px; padding-block: 55px; gap: 45px; }
  .hero-copy { padding-bottom: 0; }
  .hero-product { max-width: 570px; }
  .hero-atmosphere { height: 1350px; }
  .feature-story, .feature-story-enhance { grid-template-columns: 1fr; padding-block: 64px; }
  .feature-copy, .feature-copy h2, .feature-intro { max-width: none; }
  .feature-story-enhance .feature-copy, .feature-story-enhance .feature-shot { grid-column: auto; grid-row: auto; }
  .feature-story-enhance .feature-shot { max-width: 600px; }
  .feature-story-enhance .feature-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-details li { display: block; padding: 16px; }
  .feature-details li > span { display: block; margin-bottom: 10px; }
  .faq { gap: 32px; grid-template-columns: 1fr; padding-block: 70px; }
  .footer-top { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .wrap { width: calc(100% - 36px); }
  .header { height: 78px; }
  .header .brand { font-size: 20px; }
  .header-actions { gap: 7px; }
  .hero { padding-top: 36px; gap: 35px; }
  .hero-copy { text-align: left; }
  .hero h1, html[lang="en"] .hero h1 { font-size: clamp(48px, 13vw, 68px); letter-spacing: -2px; margin: 25px 0 22px; }
  html[lang="zh-CN"] .hero h1 > span:first-child { font-size: .77em; letter-spacing: -1.5px; }
  .hero-description, html[lang="en"] .hero-description { font-size: 14px; line-height: 1.95; max-width: none; }
  .announcement { font-size: 10px; }
  .hero-actions, .hero-support, .hero-note { justify-content: flex-start; }
  .hero-actions .text-link, .hero .button { padding-inline: 17px; font-size: 12px; }
  .hero-support { font-size: 9px; gap: 6px; }
  .hero-note { font-size: 10px; margin-top: 22px; }
  .hero-atmosphere { height: 1260px; }
  .demo-topline { font-size: 9px; }
  .panel { height: 510px; border-radius: 13px; }
  .demo-under { padding-top: 10px; }
  .trust-strip { font-size: 10px; gap: 16px; padding-block: 26px; }
  .trust-strip .mono { font-size: 9px; }
  .feature-story, .feature-story-wide { padding-block: 48px; gap: 25px; }
  .feature-copy h2, html[lang="en"] .feature-copy h2 { font-size: 29px; line-height: 1.5; letter-spacing: -.8px; }
  .feature-story-wide .feature-copy { text-align: left; }
  .feature-story-wide h2 { margin-inline: 0; }
  .feature-intro { font-size: 14px; }
  .feature-details, .feature-story-wide .feature-details,
  .feature-story-enhance .feature-details { grid-template-columns: 1fr; gap: 10px; margin-top: 23px; }
  .feature-details li { display: flex; padding: 17px; gap: 12px; }
  .feature-details li > span { margin-bottom: 0; }
  .feature-details p { font-size: 12px; }
  .feature-shot, .feature-story-wide .feature-shot { padding: 12px; border-radius: 13px; }
  .shot-label { font-size: 10px; margin-bottom: 12px; }
  .shot-note { display: none; }
  .faq { padding-block: 52px; }
  .faq h2 { font-size: 29px; }
  .faq-list details { padding-inline: 17px; }
  summary { font-size: 13px; min-height: 64px; }
  details p { padding-right: 0; font-size: 13px; }
  .download { padding: 38px 18px 24px; border-radius: 16px; }
  .download h2 { font-size: 33px; }
  .download-top .eyebrow { font-size: 8px; }
  .download-top > p:last-child { font-size: 13px; }
  .download-card { padding: 21px; }
  .download-options { gap: 12px; }
  .download-foot { font-size: 10px; }
  .footer-top > p { font-size: 11px; }
  .footer-top > a:not(.brand) { font-size: 11px; }
  .footer-bottom { font-size: 9px; flex-wrap: wrap; line-height: 1.8; }
  .footer-local { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  .reveal-pending { opacity: 1; transform: none; }
  .reveal-ready, :is(.feature-shot, .feature-details li, .download-card)::before { transition: none; }
}