/**
 * Missions Website Stylesheet
 * Responsive design for desktop and mobile
 */

@font-face {
  font-family: "Missions Unifont";
  src: url('/css.1783867984/fonts/unifont-15.1.05.ttf') format('truetype');
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

 :root {
	/* Primary Colors - Default Theme */
	--primary-color: #172033;
	--secondary-color: #5BC0EB;
	--accent-color: #F5A623;
	--text-color: #172033;
	--light-text: #64748B;
	--bg-color: #F4F7FA;
	--card-bg: #FFFFFF;
	--border-color: #DDE6EE;
	--task-color: #38b2ac;
	--reward-color: #ed8936;
	--screen-time-color: #9f7aea;
	--shadow: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.06);
	--pic-shadow: 0 6px 18px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.08);
	--pixel-accent: #4FC3F7;
	
	/* Fonts */
	--pixel-font: 'Press Start 2P', 'Microsoft Yahei', sans-serif;
	--primary-font: 'Jost', 'Microsoft Yahei', sans-serif;
	--body-font: 'Nunito', 'Microsoft Yahei', sans-serif;
	
	/* Dimensions */
	--header-height: 70px;
	--border-radius: 8px;
	--container-width: 1140px;
	
	/* Animations */
	--transition-speed: 0.3s;
	--animation-time: 15s;
  }
  
  /* Global Styles */
  * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
  }
  
  html {
	font-size: 16px;
	scroll-behavior: smooth;
  }
  
  body {
	font-family: var(--body-font);
	background-color: var(--bg-color);
	color: var(--text-color);
	min-height: 100vh;
	overflow-x: hidden;
	transition: background-color var(--transition-speed) ease;
	line-height: 1.6;
  }
  
  a {
	color: var(--primary-color);
	text-decoration: none;
	transition: all var(--transition-speed) ease;
  }
  
  a:hover {
	color: var(--accent-color);
  }
  
  h1, h2, h3, h4, h5, h6 {
	font-family: var(--primary-font);
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 1rem;
	color: var(--text-color);
	transition: color var(--transition-speed) ease;
  }
  
  h1 {
	font-size: 2.5rem;
  }
  
  h2 {
	font-size: 2rem;
	margin-top: 2.5rem;
  }
  
  h3 {
	font-size: 1.5rem;
  }
  
  p {
	margin-bottom: 1rem;
	font-weight: 300;
	transition: color var(--transition-speed) ease;
  }
  
  img {
	max-width: 100%;
	height: auto;
  }
  
  button {
	cursor: pointer;
	border: none;
	outline: none;
	transition: all var(--transition-speed) ease;
  }
  
  ul {
	list-style-position: inside;
	margin-bottom: 1rem;
  }
  
  .container {
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 1.5rem;
  }
  
  /* Main Content Area */
  .main_content {
	position: relative;
	z-index: 10;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 3rem 2rem;
	overflow: visible;
  }

  /* Hero */
  .hero {
	position: relative;
	display: flex;
	align-items: center;
	width: 100vw;
	min-height: clamp(500px, 70vh, 700px);
	margin: -3rem calc(50% - 50vw) 2.5rem;
	padding: clamp(5.5rem, 10vh, 7rem) max(2rem, calc((100vw - var(--container-width)) / 2 + 2rem)) clamp(4rem, 8vh, 5.5rem);
	overflow: hidden;
	isolation: isolate;
	background-color: #111827;
  }

  .hero_slides,
  .hero_overlay {
	position: absolute;
	inset: 0;
  }

  .hero_slides {
	z-index: -2;
  }

  .hero_slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 0.8s ease, transform 8s ease;
  }

  .hero_slide.active {
	opacity: 1;
	transform: scale(1);
  }

  .hero_slide_1 {
	background-position: center 46%;
  }

  .hero_slide_2 {
	background-position: center 50%;
  }

  .hero_slide_3 {
	background-position: center 52%;
  }

  .hero_overlay {
	z-index: -1;
	background:
	  linear-gradient(90deg, rgba(10, 18, 30, 0.82) 0%, rgba(10, 18, 30, 0.62) 42%, rgba(10, 18, 30, 0.2) 74%, rgba(10, 18, 30, 0.08) 100%),
	  linear-gradient(0deg, rgba(8, 13, 22, 0.42) 0%, rgba(8, 13, 22, 0.04) 50%, rgba(8, 13, 22, 0.32) 100%);
  }

  .hero_copy {
	min-width: 0;
	max-width: 730px;
  }

  .hero_brand {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	margin-bottom: 2rem;
	font-family: var(--pixel-font);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: rgba(255, 255, 255, 0.92);
  }

  .hero_brand .hero_icon {
	width: 64px;
	height: 64px;
	flex: 0 0 auto;
	margin: 0;
	border-radius: 16px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  }

  .hero h1 {
	max-width: 715px;
	margin-bottom: 1.2rem;
	font-size: clamp(2.43rem, 4.05vw, 3.87rem);
	line-height: 1.08;
	letter-spacing: 0;
	color: #ffffff;
	text-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  }

  .hero_subtitle {
	max-width: 640px;
	margin-bottom: 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: 1.25rem;
	line-height: 1.75;
	font-weight: 300;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.34);
  }

  .hero_actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.2rem;
	margin-top: 2rem;
  }

  .hero_download {
	margin: 0;
  }

  .hero_dots {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-top: 1.75rem;
  }

  .hero_dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.5);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  }

  .hero_dot.active {
	width: 30px;
	background-color: #ffffff;
  }

  .hero_dot:hover,
  .hero_dot:focus-visible {
	background-color: #ffffff;
	outline: none;
  }

  @media (prefers-reduced-motion: reduce) {
	.hero_slide {
	  transition: none;
	  transform: none;
	}
  }
  
  /* App Title Area */
  .app_title {
	text-align: center;
	margin-bottom: 2rem;
  }
  
  .appicon {
	width: 100px;
	height: 100px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin: 0rem auto 1rem;
	border-radius: 22px;
	/* box-shadow: var(--shadow); */
	background-image: url('images/app_icon.png');
  }
  
  .appname {
	font-size: 2.5rem;
	margin: 1rem 0 0.5rem;
	font-family: var(--pixel-font);
	color: var(--primary-color);
  }
  
  .subtitle {
	font-size: 1.2rem;
	color: var(--light-text);
	margin-bottom: 1.5rem;
  }
  
  .app_intro {
	max-width: 720px;
	font-weight: 300;
	margin: 0 auto 3rem;
	text-align: center;
	font-size: 1.2rem;
	line-height: 1.8;
  }
  
  /* Download Button */
  .ios_download_btn {
	display: block;
	width: 180px;
	height: 60px;
	background-image: url('images/ios_download.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin: 2rem auto 4rem;
	transition: transform var(--transition-speed) ease;
  }
  
  .ios_download_btn:hover {
	transform: scale(1.05);
  }

  .hero .hero_download {
	margin: 0;
  }
  
  .workflow_section,
  .feature_section,
  .theme_section,
  .subscription_info {
	margin: clamp(4rem, 8vw, 6rem) 0;
  }

  .workflow_section {
	margin-top: 0;
  }

  .workflow_intro {
	max-width: 820px;
	margin: 0 auto 1.75rem;
	color: var(--text-color);
	font-size: 1.2rem;
	line-height: 1.8;
	text-align: center;
  }

  /* Scenario Toggle Tabs - iOS Segmented Control Style */
  .scenario_tabs {
	display: flex;
	justify-content: center;
	margin: 0 auto 2.5rem;
	max-width: 500px;
	background-color: rgba(23, 32, 51, 0.06);
	border-radius: 8px;
	padding: 4px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
	flex-wrap: nowrap;
  }
  
  .tab {
	flex: 1;
	padding: 0.8rem 1rem;
	background-color: transparent;
	border: none;
	border-radius: 6px;
	margin: 0;
	appearance: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
	color: var(--text-color);
	transition: all 0.2s ease;
	position: relative;
	text-align: center;
	
	/* Add vertical centering */
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px; /* Ensure fixed minimum height */
  }
  
  .tab:hover {
	color: var(--primary-color);
  }
  
  .tab.active {
	background-color: white;
	color: var(--primary-color);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
  }

  .tab:focus-visible,
  .theme_btn:focus-visible,
  .hero_dot:focus-visible,
  .ios_download_btn:focus-visible {
	outline: 3px solid var(--primary-color);
	outline-offset: 3px;
  }
  
  /* Scenario Content */
  .scenario_content {
	display: none;
	animation: fadeIn 0.5s ease;
  }
  
  .scenario_content.active {
	display: block;
  }
  
  @keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
  }
  
  /* Workflow Step Cards */
  .steps_container {
	display: grid;
	gap: 1.25rem;
	margin-bottom: 0;
  }
  
  .step_1, .step_2, .step_3, .step_4 {
	--workflow-pic-gap: clamp(1rem, 2.2vw, 3.25rem);
	display: grid;
	grid-template-columns: minmax(280px, 440px) minmax(0, calc(360px + var(--workflow-pic-gap)));
	justify-content: center;
	align-items: center;
	column-gap: clamp(2rem, 3vw, 4rem);
	row-gap: 1.5rem;
	padding: 2rem;
	background-color: var(--card-bg);
	border: 1px solid rgba(23, 32, 51, 0.08);
	border-radius: var(--border-radius);
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
	margin-bottom: 0;
	position: relative;
  }
  
  .step_1::after, .step_2::after, .step_3::after {
	display: none;
  }
  
  /* Last step doesn't show arrow */
  .steps_container .step_4:last-child::after {
	display: none;
  }
  
  .intro_text {
	min-width: 0;
	padding-right: 0;
  }
  
  .intro_text h3 {
	color: var(--primary-color);
	margin-bottom: 1rem;
	font-size: 1.55rem;
  }
  
  .intro_text .descr {
	font-size: 1.1rem;
	color: var(--text-color);
	line-height: 1.7;
  }
  
  .intro_pics {
	width: 100%;
	min-width: 0;
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	gap: var(--workflow-pic-gap);
  }
  
  .intro_pic {
	width: min(180px, calc((100% - var(--workflow-pic-gap)) / 2));
	aspect-ratio: 880 / 1904;
	height: auto;
	flex: 0 1 min(180px, calc((100% - var(--workflow-pic-gap)) / 2));
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: var(--pic-shadow);
	transition: transform var(--transition-speed) ease;
  }
  
  .intro_pic:hover {
	transform: translateY(-10px);
  }
  
  /* Theme Gallery */
  .theme_section {
	--theme-heading-color: #172033;
	--theme-copy-color: #4c5c68;
	--theme-card-background: rgba(255, 255, 255, 0.68);
	--theme-card-border: rgba(255, 255, 255, 0.72);
	--theme-card-text: #172033;
	--theme-card-shadow: 0 8px 20px rgba(45, 67, 86, 0.1);
	--theme-active-color: #3d9bf2;
	--theme-pixel-font: 'Press Start 2P', 'Courier New', ui-monospace, monospace;
	text-align: center;
	padding: clamp(2rem, 5vw, 3.5rem);
	background:
		radial-gradient(circle at 10% 12%, rgba(174, 235, 218, 0.76), transparent 34%),
		radial-gradient(circle at 90% 5%, rgba(210, 222, 244, 0.9), transparent 37%),
		linear-gradient(135deg, #edf8f5, #eef3fa);
	border-radius: var(--border-radius);
	border: 1px solid rgba(23, 32, 51, 0.08);
	box-shadow: none;
	position: relative;
	overflow: hidden;
	color: var(--theme-heading-color);
	transition: background-color 0.35s ease, background-image 0.35s ease, color 0.35s ease;
  }

  .theme_section h2 {
	margin-top: 0;
	margin-bottom: 0.75rem;
	color: var(--theme-heading-color);
	transition: color 0.35s ease, font-family 0.35s ease;
  }

  .theme_section > p {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	color: var(--theme-copy-color);
	transition: color 0.35s ease, font-family 0.35s ease;
  }

  .theme_section.theme-liquid-glass {
	--theme-heading-color: #1c3140;
	--theme-copy-color: #4d606b;
	--theme-active-color: #3d9bf2;
  }

  .theme_section.theme-vintage {
	--theme-heading-color: #24211d;
	--theme-copy-color: #5a554d;
	--theme-card-background: rgba(255, 255, 255, 0.82);
	--theme-card-border: rgba(86, 76, 64, 0.18);
	--theme-card-text: #2b2722;
	--theme-card-shadow: 0 7px 16px rgba(68, 59, 46, 0.12);
	--theme-active-color: #9a7a44;
	background: linear-gradient(135deg, #faf8f2, #ebe6dc);
  }

  .theme_section.theme-eight-bit {
	--theme-heading-color: #f4f4f1;
	--theme-copy-color: #d8d8d2;
	--theme-card-background: rgba(35, 35, 35, 0.88);
	--theme-card-border: rgba(247, 247, 241, 0.45);
	--theme-card-text: #f4f4f1;
	--theme-card-shadow: 0 7px 0 rgba(0, 0, 0, 0.35);
	--theme-active-color: #76c72b;
	background: #1c1c1c;
	font-family: "Missions Unifont", monospace;
  }

  .theme_section.theme-pixelate {
	--theme-heading-color: #fff1c7;
	--theme-copy-color: #f4dca5;
	--theme-card-background: rgba(60, 28, 7, 0.88);
	--theme-card-border: rgba(245, 181, 55, 0.6);
	--theme-card-text: #ffedbd;
	--theme-card-shadow: 0 8px 0 rgba(46, 21, 3, 0.5);
	--theme-active-color: #85d837;
	background-color: #160d08;
	background-image: url('/css.1783867984/images/themes/backgrounds/pixelate.jpg');
	background-position: center;
	background-size: cover;
  }

  .theme_section.theme-dark-gothic {
	--theme-heading-color: #efe5c4;
	--theme-copy-color: #d1c6a8;
	--theme-card-background: rgba(20, 20, 18, 0.86);
	--theme-card-border: rgba(161, 136, 82, 0.55);
	--theme-card-text: #ede0ba;
	--theme-card-shadow: 0 9px 18px rgba(0, 0, 0, 0.42);
	--theme-active-color: #cda55a;
	background-color: #1b1b19;
	background-image: url('/css.1783867984/images/themes/backgrounds/dark-gothic.jpg');
	background-position: center;
	background-size: cover;
  }

  .theme_section.theme-forest {
	--theme-heading-color: #fff7df;
	--theme-copy-color: #f7e8bf;
	--theme-card-background: rgba(255, 247, 221, 0.86);
	--theme-card-border: rgba(108, 75, 31, 0.56);
	--theme-card-text: #3e2a16;
	--theme-card-shadow: 0 9px 18px rgba(48, 34, 16, 0.3);
	--theme-active-color: #79ad36;
	background-color: #76502c;
	background-image: url('/css.1783867984/images/themes/backgrounds/forest.jpg');
	background-position: center;
	background-size: cover;
  }

  .theme_section.theme-fantasy {
	--theme-heading-color: #fff0db;
	--theme-copy-color: #e6d4bc;
	--theme-card-background: rgba(28, 30, 42, 0.86);
	--theme-card-border: rgba(169, 138, 191, 0.6);
	--theme-card-text: #f4e8d9;
	--theme-card-shadow: 0 9px 18px rgba(13, 14, 23, 0.44);
	--theme-active-color: #c899eb;
	background-color: #25283a;
	background-image: url('/css.1783867984/images/themes/backgrounds/fantasy.jpg');
	background-position: center;
	background-size: cover;
  }

  .theme_section.theme-eight-bit h2,
	.theme_section.theme-eight-bit .theme_card_name {
	font-family: "Missions Unifont", monospace;
	letter-spacing: 0;
  }

  .theme_gallery {
	--theme-card-width: clamp(120px, 9.9vw, 136px);
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 1.5rem;
	padding: 30px 16px 38px;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: inline mandatory;
	scroll-padding-inline: 2px;
	scrollbar-width: thin;
	scrollbar-color: rgba(23, 32, 51, 0.26) transparent;
  }

  .theme_gallery::-webkit-scrollbar {
	height: 8px;
  }

  .theme_gallery::-webkit-scrollbar-thumb {
	background: rgba(23, 32, 51, 0.22);
	border-radius: 999px;
  }

  .theme_card {
	flex: 0 0 var(--theme-card-width);
	min-width: 0;
	position: relative;
	z-index: 1;
	padding: 9px;
	background: var(--theme-card-background);
	border: 2px solid var(--theme-card-border);
	border-radius: 18px;
	box-shadow: var(--theme-card-shadow);
	color: var(--theme-card-text);
	font-family: inherit;
	text-align: center;
	scroll-snap-align: start;
	transform-origin: center;
	backdrop-filter: blur(8px);
	transition: transform var(--transition-speed) ease, border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease, background-color 0.35s ease, color 0.35s ease;
  }

  .theme_card:hover {
	border-color: var(--theme-active-color);
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.24);
  }

  .theme_card.active {
	z-index: 2;
	border-color: var(--theme-active-color);
	box-shadow: 0 0 0 2px var(--theme-active-color), 0 12px 28px rgba(15, 23, 42, 0.24);
	transform: scale(1.1);
  }

  .theme_card:focus-visible {
	outline: 3px solid var(--theme-active-color);
	outline-offset: 3px;
  }

  .theme_card_image {
	display: block;
	position: relative;
	aspect-ratio: 500 / 1040;
	overflow: hidden;
	border-radius: 11px;
	background: rgba(23, 32, 51, 0.08);
  }

  .theme_card_image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
  }

  .theme_card_name {
	display: block;
	margin-top: 10px;
	font-family: var(--primary-font);
	font-size: clamp(0.82rem, 1.15vw, 1rem);
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
  }

  @media screen and (min-width: 1100px) {
	.theme_gallery {
	  overflow-x: visible;
	}

	.theme_card {
	  flex: 1 1 0;
	}
  }
  
  /* Feature Showcase Area */
  .showcase_title_box {
	text-align: center;
	margin: 0 0 2rem;
  }
  
  .showcase_title_box h1 {
	color: var(--primary-color);
	margin-bottom: 1rem;
  }
  
  .showcases {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1rem;
	margin-bottom: 0;
  }
  
  .showcase {
	display: block;
	padding: 1.35rem;
	background-color: var(--card-bg);
	border-radius: var(--border-radius);
	border: 1px solid rgba(23, 32, 51, 0.08);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
	transition: all var(--transition-speed) ease;
	position: relative;
  }
  
  .showcase:hover {
	transform: translateY(-5px);
	box-shadow: 0 7px 14px rgba(15, 23, 42, 0.1), 0 3px 6px rgba(15, 23, 42, 0.08);
  }
  
  .showcase::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1.5rem;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--primary-color);
	border-bottom: 2px solid var(--primary-color);
	transform: translateY(-50%) rotate(-45deg);
  }
  
  /* Non-clickable showcase styles */
  .showcase_non_clickable {
	cursor: default;
  }
  
  .showcase_non_clickable:hover {
	transform: none;
	box-shadow: var(--shadow);
  }
  
  .showcase_non_clickable::after {
	display: none;
  }
  
  .showcase_nochevron::after {
	display: none;
  }
  
  .showcase .icon {
	width: 50px;
	height: 50px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-bottom: 1rem;
  }
  
  .icon_checklist {
	background-color: #00C851;
	mask: url('images/checklist.checked') no-repeat center;
	mask-size: contain;
	-webkit-mask: url('images/checklist.checked.svg') no-repeat center;
	-webkit-mask-size: contain;
  }
  
  .icon_hourglass {
	background-color: #ff9700;
	mask: url('images/clock.badge.checkmark.svg') no-repeat center;
	mask-size: contain;
	-webkit-mask: url('images/clock.badge.checkmark.svg') no-repeat center;
	-webkit-mask-size: contain;
  }
  
  .icon_moon {
	background-color: #507ffb;
	mask: url('images/zzz.svg') no-repeat center;
	mask-size: contain;
	-webkit-mask: url('images/zzz.svg') no-repeat center;
	-webkit-mask-size: contain;
  }
  
  .icon_family {
	background-color: #00bcff;
	mask: url('images/figure.and.child.holdinghands.svg') no-repeat center;
	mask-size: contain;
	-webkit-mask: url('images/figure.and.child.holdinghands.svg') no-repeat center;
	-webkit-mask-size: contain;
  }
  
  .icon_app_limit {
	background-color: #f51c1c;
	mask: url('images/lock.ipad.svg') no-repeat center;
	mask-size: contain;
	-webkit-mask: url('images/lock.ipad.svg') no-repeat center;
	-webkit-mask-size: contain;
  }
  
  .icon_question {
	background-color: #a155ff;
	mask: url('images/questionmark.circle.svg') no-repeat center;
	mask-size: contain;
	-webkit-mask: url('images/questionmark.circle.svg') no-repeat center;
	-webkit-mask-size: contain;
  }
  
  .showcase h3 {
	margin-bottom: 0.5rem;
	font-size: 1.18rem;
  }
  
  .showcase p {
	color: var(--light-text);
	margin-bottom: 0;
	padding-right: 0;
  }
  
  /* Subscription Information */
  .subscription_info {
	text-align: center;
  }
  
  .plans {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
	overflow-x: auto;
  }
  
  .plan {
	padding: 2rem;
	background-color: var(--card-bg);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow);
	flex: 1;
	min-width: 250px;
	max-width: 300px;
	transition: all var(--transition-speed) ease;
  }
  
  .plan:hover {
	transform: translateY(-5px);
  }
  
  .plan.featured {
	border: 2px solid var(--primary-color);
	transform: scale(1.05);
  }
  
  .plan.featured:hover {
	transform: translateY(-5px) scale(1.05);
  }
  
  .plan h3 {
	margin-bottom: 0.5rem;
	color: var(--primary-color);
  }
  
  .plan .price {
	font-size: 1.8rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
  }
  
  .plan .save {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	background-color: var(--accent-color);
	color: white;
	border-radius: 50px;
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 1.5rem;
  }
  
  .plan ul {
	list-style-type: none;
	text-align: left;
  }
  
  .plan ul li {
	margin-bottom: 0.8rem;
	position: relative;
	padding-left: 1.5rem;
  }
  
  .plan ul li::before {
	content: "✓";
	color: var(--primary-color);
	position: absolute;
	left: 0;
	font-weight: bold;
  }
  
  /* Footer */
  .copyright {
	text-align: center;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--border-color);
	color: var(--light-text);
	font-size: 0.9rem;
  }
  
  /* Pixel Style Background */
  .bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
  }
  
  .pixel_bg {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--bg-color);
	overflow: hidden;
  }
  
  .pixel_element {
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.1;
	transition: all var(--transition-speed) ease;
  }
  
  .clock {
	width: 300px;
	height: 300px;
	top: 15%;
	left: 10%;
	background-image: url('images/pixel_clock.png');
	animation: float 15s ease-in-out infinite alternate;
  }
  
  .hourglass {
	width: 250px;
	height: 250px;
	top: 60%;
	left: 85%;
	background-image: url('images/pixel_hourglass.png');
	animation: float 18s ease-in-out infinite alternate-reverse;
  }
  
  .checklist {
	width: 200px;
	height: 200px;
	top: 75%;
	left: 15%;
	background-image: url('images/pixel_checklist.png');
	animation: float 12s ease-in-out infinite alternate;
  }
  
  .trophy {
	width: 180px;
	height: 180px;
	top: 25%;
	right: 15%;
	background-image: url('images/pixel_trophy.png');
	animation: float 20s ease-in-out infinite alternate-reverse;
  }
  
  .star {
	width: 150px;
	height: 150px;
	top: 45%;
	left: 50%;
	background-image: url('images/pixel_star.png');
	animation: float 16s ease-in-out infinite alternate;
  }
  
  @keyframes float {
	0%, 100% { transform: translateY(0px); }
	50% { transform: translateY(-20px); }
  }
  
  /* Media Queries - Responsive Design */
  @media screen and (max-width: 769px) {
	html {
	  font-size: 15px;
	}

	.hero {
	  min-height: 520px;
	  padding: 5rem 2rem 4rem;
	  text-align: center;
	}

	.hero_brand,
	.hero_actions,
	.hero_dots {
	  justify-content: center;
	}

	.hero h1 {
	  max-width: none;
	  font-size: 2.268rem;
	}

	.hero_subtitle {
	  max-width: none;
	  font-size: 1.1rem;
	}
	
	.app_title {
	  margin-bottom: 1.5rem;
	}
	
	.appicon {
	  width: 90px;
	  height: 90px;
	}
	
	.appname {
	  font-size: 2rem;
	}
	
	.subtitle {
	  font-size: 1rem;
	}
	
	.app_intro {
	  font-size: 1.1rem;
	  margin-bottom: 2rem;
	}

	.workflow_intro {
	  font-size: 1.08rem;
	  margin-bottom: 1.5rem;
	}
	
	.scenario_tabs {
	  margin: 1.5rem auto 2rem;
	}
	
	.tab {
	  font-size: 14px;
	  padding: 0.6rem 1rem;
	  flex: 1;
	  text-align: center;
	  white-space: nowrap;
	  /* Disable automatic line wrapping */
	  overflow: hidden;
	  text-overflow: ellipsis;
	  min-width: 0;
	  /* Allow flex items to shrink below content size */
	}
	
	.step_1, .step_2, .step_3, .step_4 {
	  --workflow-pic-gap: 1rem;
	  grid-template-columns: 1fr;
	  gap: 1.5rem;
	  padding: 1.5rem;
	}
	
	.intro_text {
	  margin-bottom: 1rem;
	}
	
	.intro_pic {
	  width: min(170px, calc((100% - var(--workflow-pic-gap)) / 2));
	  height: auto;
	  flex-basis: min(170px, calc((100% - var(--workflow-pic-gap)) / 2));
	}
	
	.intro_pics {
	  justify-content: center;
	  gap: var(--workflow-pic-gap);
	}
	
	.theme_section {
	  margin: 3rem 0;
	}
	
	.theme_gallery {
	  --theme-card-width: clamp(126px, 18vw, 148px);
	  justify-content: flex-start;
	  margin-right: -0.5rem;
	  margin-left: -0.5rem;
	  padding: 38px 24px 46px;
	}
	
	.showcase_title_box h1 {
	  font-size: 1.8rem;
	}
	
	.showcases {
	  grid-template-columns: repeat(2, 1fr);
	}
	
	.plans {
	  flex-direction: column;
	  align-items: center;
	  overflow-x: auto;
	}
	
	.plan {
	  width: 100%;
	  max-width: none;
	  margin-bottom: 1.5rem;
	}
	
	.plan.featured {
	  transform: none;
	}
	
	.plan.featured:hover {
	  transform: translateY(-5px);
	}
	
	.clock {
	  width: 200px;
	  height: 200px;
	}
	
	.hourglass {
	  width: 180px;
	  height: 180px;
	}
	
	.checklist, .trophy, .star {
	  width: 150px;
	  height: 150px;
	}
	
	.subscription_table th:nth-child(3),
	.subscription_table td:nth-child(3) {
	  border-left-width: 2px;
	}
  }
  
  /* Additional optimization for extra small screens */
  @media screen and (max-width: 480px) {
	html {
	  font-size: 14px;
	}
	
	.main_content {
	  padding: 1rem;
	}

	.hero {
	  min-height: 500px;
	  margin-top: -1rem;
	  margin-bottom: 2rem;
	  padding: 5rem 1.25rem 3.5rem;
	}

	.hero_brand {
	  margin-bottom: 1.5rem;
	  font-size: 1.2rem;
	}

	.hero_brand .hero_icon {
	  width: 54px;
	  height: 54px;
	}

	.hero h1 {
	  font-size: 1.908rem;
	}

	.hero_actions {
	  gap: 0.9rem;
	}
	
	.appicon {
	  width: 80px;
	  height: 80px;
	}
	
	.appname {
	  font-size: 1.8rem;
	}
	
	.intro_pic {
	  width: min(145px, calc((100% - var(--workflow-pic-gap)) / 2));
	  height: auto;
	  flex-basis: min(145px, calc((100% - var(--workflow-pic-gap)) / 2));
	}

	.step_1, .step_2, .step_3, .step_4 {
	  --workflow-pic-gap: 0.75rem;
	  padding: 1.25rem;
	}

	.intro_pics {
	  gap: var(--workflow-pic-gap);
	}
	
	.theme_gallery {
	  --theme-card-width: min(42vw, 154px);
	  gap: 10px;
	  margin-top: 1.75rem;
	}

	.theme_card {
	  padding: 8px;
	  border-radius: 16px;
	}

	.theme_card_name {
	  margin-top: 8px;
	}

	.showcases {
	  grid-template-columns: 1fr;
	}
	
	.subscription_table th:nth-child(3),
	.subscription_table td:nth-child(3) {
	  border-left-width: 1px;
	}
  }
  
  /* For medium-large screens */
  @media screen and (min-width: 481px) and (max-width: 1000px) {
	.showcases {
	  grid-template-columns: repeat(2, 1fr);
	}
  }
  
  /* For medium screens (tablets, etc.) */
  
  /* Animation Effects */
  @keyframes fadeInUp {
	from {
	  opacity: 0;
	  transform: translateY(20px);
	}
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }
  
  .fadeInUp {
	animation: fadeInUp 0.6s ease forwards;
  }
  
  /* Image generation hint comments */
  /*
  Pixel-style images to be generated:
  1. pixel_clock.png - Pixel-style clock
  2. pixel_hourglass.png - Pixel-style hourglass
  3. pixel_checklist.png - Pixel-style task list
  4. pixel_trophy.png - Pixel-style trophy
  5. pixel_star.png - Pixel-style star
  
  These icons should use pixel art style with bright colors and remain clean and clear.
  Images should be in PNG format with transparent background for use in website background.
  */
  
  /* Subscription Table Styles */
  .subscription_table {
    width: 100%;
    max-width: 100%;
    min-width: 680px;
    margin: 2rem auto 0;
    border-collapse: collapse;
    text-align: center;
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
  }
  
  .subscription_table thead {
    background-color: var(--primary-color);
    color: white;
  }
  
  .subscription_table th {
    padding: 0.9rem 0.8rem;
    font-weight: 600;
    text-transform: none;
    font-size: 0.86rem;
    letter-spacing: 0.02em;
    line-height: 1.25;
  }
  
  .subscription_table th:first-child {
    text-align: left;
    padding-left: 2rem;
    width: 30%;
  }
  
  .subscription_table td {
    padding: 0.8rem 0.8rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 1rem;
  }
  
  .subscription_table td:first-child {
    text-align: left;
    padding-left: 2rem;
    font-weight: 500;
  }

  .subscription_table tbody tr:first-child td:nth-child(3),
  .subscription_table tbody tr:first-child td:nth-child(4) {
    white-space: nowrap;
  }

  .subscription_table .price_period {
    margin-left: 0.25em;
    white-space: nowrap;
  }
  
  .subscription_table tbody tr:last-child td {
    border-bottom: none;
  }
  
  .subscription_table tbody tr:nth-child(odd) {
    background-color: rgba(91, 192, 235, 0.05);
  }
  
  .feature-available {
    color: var(--primary-color);
    font-size: 1.4rem;
    font-weight: bold;
  }
  
  .feature-unavailable {
    color: #FF5252;
    font-size: 1.4rem;
    font-weight: bold;
  }
  
  /* Subscription Information */
  .subscription-note {
    text-align: center;
    font-size: 0.9rem;
    color: var(--light-text);
  }
  
  /* Download Button - Bottom Version */
  .ios_download_btn.bottom {
    margin: 60px auto;
  }

  /* App Download Call To Action */
  .download_cta {
    margin: clamp(3.5rem, 7vw, 5.5rem) 0 0;
    padding: clamp(1.25rem, 3vw, 2rem) 1.5rem;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .download_cta_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    max-width: 720px;
    margin: 0 auto;
  }

  .download_cta_icon {
    width: 82px;
    height: 82px;
    margin: 0;
    /* border-radius: 18px; */
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.1);
  }

  .download_cta_copy {
    max-width: 680px;
    text-align: center;
  }

  .download_cta_copy p {
    margin: 0;
    color: #334155;
    font-size: 1.125rem;
    line-height: 1.6;
    text-align: center;
  }

  .download_cta_button {
    flex: 0 0 auto;
    margin: 0;
  }
  
  /* Customer Support Text */
  .customer-support {
    text-align: center;
	margin-top: 10px;
	margin-bottom: 0px;
    font-size: 14px;
  }
  
  /* Responsive Styles */
  @media screen and (max-width: 769px) {
    .download_cta {
      margin-top: 4rem;
      padding: 1.75rem 1.25rem;
    }

    .download_cta_content {
      gap: 1.25rem;
      text-align: center;
    }

    .download_cta_icon {
      width: 72px;
      height: 72px;
    }

    .download_cta_copy {
      max-width: 32rem;
    }

    .download_cta_button {
      margin-top: 0.15rem;
    }

    .subscription_info .plans {
      overflow: visible;
    }

    .subscription_table {
      min-width: 0;
      table-layout: fixed;
      font-size: 0.9rem;
    }
    
    .subscription_table th, 
    .subscription_table td {
      padding: 1rem 0.5rem;
    }
    
    .subscription_table th:first-child,
    .subscription_table td:first-child {
      width: 38%;
      padding-left: 1rem;
    }

    .subscription_table th,
    .subscription_table td {
      line-height: 1.3;
      overflow-wrap: anywhere;
      word-break: normal;
    }
  }
  
  @media screen and (max-width: 480px) {
    .subscription_table {
      margin-top: 1.5rem;
      font-size: 0.78rem;
      min-width: 0;
    }

    .subscription_info .plans {
      overflow: visible;
      padding-bottom: 0;
    }

    .subscription_table th {
      padding: 0.75rem 0.3rem;
      font-size: 0.62rem;
      letter-spacing: 0;
      text-transform: none;
    }

    .subscription_table td {
      padding: 0.7rem 0.3rem;
      font-size: 0.72rem;
    }

    .subscription_table tbody tr:first-child td:nth-child(3),
    .subscription_table tbody tr:first-child td:nth-child(4) {
      white-space: normal;
    }

    .subscription_table .price_period {
      display: block;
    }

    .subscription_table th:first-child,
    .subscription_table td:first-child {
      width: 36%;
      padding-left: 0.5rem;
    }
    
    .feature-available,
    .feature-unavailable {
      font-size: 1.05rem;
    }
  }
  
  /* Add column separator for table */
  .subscription_table th,
  .subscription_table td {
    border-right: 1px solid var(--border-color);
  }
  
  /* Last column doesn't need right border */
  .subscription_table th:last-child,
  .subscription_table td:last-child {
    border-right: none;
  }
  
  /* Separator line between free and annual subscription */
  .subscription_table th:nth-child(3),
  .subscription_table td:nth-child(3) {
    border-left: 1px solid var(--border-color);
  }

  .showcase_ellipsis {
	display: flex;
	align-items: center;
	justify-content: center;
  }
  
  .showcase_ellipsis .ellipsis {
	font-size: 4rem;
	color: var(--light-text);
  }

  .language-switcher {
	position: absolute;
	display: inline-block;
	cursor: pointer;
	z-index: 999;
	top: 20px;
	right: 20px;
}

.language-switcher .selected-language {
  padding: 8px 16px 6px;
  border: 1px solid rgba(23, 32, 51, 0.18);
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  appearance: none;
  color: var(--text-color);
  cursor: pointer;
  font: inherit;
}

.language-switcher .selected-language::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 22px;
  margin-right: 8px;
  vertical-align: middle;
  background-image: url("images/globe.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

.language-switcher .selected-language::after {
  content: '';
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
	  border-top: 4px solid var(--primary-color);
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.language-switcher .language-list {
  display: none;
  right: 0px;
  position: absolute;
  padding: 15px 10px;
  background-color: rgba(255, 255, 255, 0.95);
  width: calc(100vw - 60px);
  max-width: 400px;
	  box-shadow: 0px 8px 16px 0px rgba(15, 23, 42, 0.1);
  z-index: 1;
  column-count: 3;
  border-radius: 5px;
}

.language-switcher .language-list.show {
	display: flex;
	flex-wrap: wrap;
}

.language-switcher .language-list a {
	flex: 0 0 28%;
	padding: 10px 5px;
	font-size: 13px;
	border-radius: 4px;
	text-decoration: none;
		color: var(--text-color);
}

.language-switcher .language-list a:hover {
		background-color: rgba(91, 192, 235, 0.16);
	border-radius: 5px;
}

@media screen and (max-width: 480px) {
  .language-switcher {
	top: 12px;
	right: 14px;
  }

  .hero {
	padding-top: 5rem;
  }
}