/* Phase 6: font-size tokens + redundancy removal */
:root{
	--fs-13: 13px;
	--fs-18: 18px;
	--fs-26: 26px;
	--fs-29: 29px;
	--fs-38: 38px;
}

/* Phase 5: utilities + spacing + semantic->div */
/* Phase 5 utilities */
.u-flex{display:flex;}
.u-row{flex-direction:row;}
.u-col{flex-direction:column;}
.u-items-center{align-items:center;}
.u-items-start{align-items:flex-start;}
.u-items-end{align-items:flex-end;}
.u-justify-center{justify-content:center;}
.u-justify-between{justify-content:space-between;}
.u-justify-start{justify-content:flex-start;}
.u-justify-end{justify-content:flex-end;}
.u-gap-sm{gap:20px;}
.u-gap-md{gap:40px;}
.u-gap-lg{gap:70px;}
.u-pad-padding-20{padding:var(--padding-20);}
.u-pad-padding-24{padding:var(--padding-24);}
.u-pad-padding-26{padding:var(--padding-26);}
.u-pad-padding-16{padding:var(--padding-16);}
.u-pad-padding-19{padding:var(--padding-19);}
/* End utilities */


.display-flex {display: flex;}
.justify-content-center {justify-content: center;}
a {
	color: inherit;
	text-decoration: none;
}
body {
	font-family: var(--font-im-fell-double-pica-sc);
	letter-spacing: 1px;
}
.fw400 {
	font-weight: 400;
}

/* Phase 4: aggressive HTML unwrap + inheritance cleanup */
.page {letter-spacing:1px;line-height:21px;}
/* Phase 3: standardized tokens + consolidated breakpoints */
:root {/* Page tokens (local to index.css) */
	--h1: 48px;
	--h2: 32px;
	--text-lg: 24px;
	--text-md: 16px;
	--text-sm: 14px;
	--space-xxl: 150px;
	--space-xl: 106px;
	--space-lg: 70px;
	--space-md: 40px;
	--space-sm: 20px;}
/* Leaned CSS: old aliases removed, unused selectors dropped, identical blocks merged */
.tablerbook-filled {width: 32px;
	height: 32px;

	overflow: hidden;
	flex-shrink: 0;
	display: none;
	}
.top {margin: 0;

	font-size: var(--font-size-20);
	font-family: inherit;}
.login {
	margin: 0 auto;
	line-height: 21px;
	font-size: var(--font-size-20);
	font-family: var(--font-im-fell-double-pica-sc);
	color: var(--color-silver);
	text-align: center;
	display: inline-block;
	}
.rectangle-parent {width: 153px;
	box-sizing: border-box;
	height: 60px;}
.rectangle-parent {cursor: pointer;
	border: 0;

	background-color: transparent;}
.start {
	margin: 0 auto;
	line-height: 21px;
	font-size: var(--font-size-20);
	font-family: var(--font-im-fell-double-pica-sc);
	color: var(--color-white);
	text-align: center;
	display: inline-block;
	}
.frame-container, .rectangle-group {display: flex;
	flex-direction: row;
	justify-content: flex-start;}
.rectangle-group {cursor: pointer;
	border: 0;

	background-color: transparent;
	height: 60px;
	width: 153px;

	box-sizing: border-box;}
.frame-container {gap: var(--gap-20);}
.frame-wrapper {width: 100%;
	color: var(--color-slategray);
	box-sizing: border-box;
	flex-wrap: wrap;
	column-gap: 70px;
	row-gap: 30px;
}
.hero-image {max-width: 500px;
	object-fit: cover;
width: 400px;}
.hero-title {margin: 0;
	font-size: inherit;
	line-height: 1em;
	font-family: inherit;}
.frame-inner {height: 1.9px;
	width: 123px;

	max-height: 100%;}
.lets-speak-together {margin: 0;
	font-weight: 500;
	font-size: inherit;
	line-height: 39.3px;
	font-family: inherit;}
.vector-parent {display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 35.5px;
	text-align: center;
	font-size: var(--font-size-20);
	font-family: var(--font-im-fell-double-pica-sc);}
.hero-copy {flex-direction: column;
	align-items: center;
	padding: var(--padding-20) 0;
	box-sizing: border-box;
	gap: var(--gap-16);
	font-weight: 400;
	width: 600px;
}
.hero, .frame-group, .hero-copy, .frame-div, .about-section {display: flex;
	max-width: 100%;}
.hero {row-gap: var(--gap-20);
	width: 100%;
	font-size: var(--h1);
	color: var(--color-slategray);
	font-family: var(--font-hina-mincho);
	flex-wrap: wrap-reverse;}
.frame-group {flex-direction: column;
	align-items: flex-end;
	justify-content: flex-start;
	gap: var(--space-xl);}
.about-title {margin: 0;
	align-self: stretch;

	font-size: inherit;
	line-height: 28px;
	font-family: inherit;}
.this-app-helps {margin: 0;}
.about-text {width: 627px;

	font-size: var(--font-size-14);
	line-height: 28px;
	font-weight: 500;
	font-family: var(--font-hahmlet);
	display: inline-block;}
.about-card {width: 596px;




	gap: var(--gap-30);}
.vector-1 {width: 40px;
	height: 40px;
	}
.learn-with-clean {font-family: var(--font-lexend);}
.vector-1-parent {width: 223px;




	gap: var(--gap-20);}
.see-how-many {align-self: stretch;

	line-height: 28px;
	font-family: var(--font-hahmlet);}
.frame-parent1 {align-self: stretch;
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 73px;
	font-size: var(--font-size-14);
	color: var(--color-black);}
.frame-div {align-self: stretch;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-md);}
.about-section {width: 995px;




	box-sizing: border-box;
	text-align: center;
	font-size: var(--font-size-22);
	color: var(--color-gray-100);
	font-family: var(--font-im-fell-double-pica-sc);}
.frame-parent {display: flex;
	flex-direction: column;
	max-width: 100%;}
.pricing-title {margin: 0;
	font-size: inherit;
	font-family: inherit;
	font-weight: 400;
}
.pricing-desc {font-size: var(--font-size-14);
	font-family: var(--font-hahmlet);
	width: 100%;
}
.warranty-area {
	max-width: 483px;
	width: 100%;
	gap: var(--gap-30);}
.free {
	font-size: 14px;
	font-variant: small-caps;
}
.depth-6-frame-0 {align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;}
.month-separator {margin: 0;
	align-self: stretch;
	font-weight: 400;
	font-size: inherit;
	letter-spacing: -1px;
	line-height: 45px;
	font-family: inherit;
}
.depth-7-frame-0, .depth-7-frame-1, .frame-parent6, .faq-container {display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;}
.depth-5-frame-0, .depth-6-frame-1 {align-self: stretch;
	display: flex;
	justify-content: flex-start;
	gap: var(--gap-4);}
.depth-6-frame-1 {align-items: end;
	font-size: var(--font-size-36);
	font-family: var(--font-ibm-plex-serif);}
.option-separator-icon {width: 321px;

	max-height: 100%;
	object-fit: cover;}
.get-started {align-self: stretch;

	font-size: var(--font-size-14);
	font-family: var(--font-im-fell-double-pica-sc);
	color: var(--color-gray-200);
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;}
.pricing-cta, .depth-6-frame-01 {overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;}
.pricing-cta {cursor: pointer;
	border: 0;

	background-color: var(--color-whitesmoke);
	width: 100%;
	border-radius: var(--br-12);
	flex-shrink: 0;


	box-sizing: border-box;
	}
.depth-7-frame-01 {width: 20px;
	max-height: 100%;}
.basic-flashcards {
	line-height: 20px;}
.depth-6-frame-02 {align-self: stretch;




	gap: var(--gap-12);}
.pricing-card, .depth-5-frame-2, .frame-parent3, .frame-parent5, .faq-wrapper, .products-parent {display: flex;
	flex-direction: column;
	justify-content: flex-start;}
.depth-5-frame-2 {align-self: stretch;

	gap: var(--gap-8);
	font-size: var(--fs-13);}
.pricing-card {width: 387px;
	border-radius: var(--br-12);
	background-color: var(--color-white);
	border: 1px solid var(--color-darkgray);
	box-sizing: border-box;
	align-items: center;
	padding: var(--padding-24);
	gap: var(--gap-16);
	max-width: 100%;}
.product-icon, .try-it {font-family: var(--font-im-fell-double-pica-sc);}
.product-icon {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: var(--gap-30);
	max-width: 100%;
	text-align: left;
	font-size: var(--font-size-16);
	color: var(--color-gray-200);}
.try-it {
	font-size: var(--font-size-24);
	color: var(--color-steelblue);}
.depth-5-frame-23, .wave-haikei-1-1 {height: 60px;
	width: 260px;
	display: flex;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
}
.depth-5-frame-23 {cursor: pointer;
	border: 2px solid var(--color-steelblue);

	background-color: var(--color-white);
	border-radius: 5px;
}
.pricing-grid {align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 80px;
	max-width: 100%;
	padding-top: 40px;}
.pricing-section {align-self: stretch;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	background-color: #637D87;
	justify-content: center;
	padding: 0 var(--padding-20) 62px 21px;
	box-sizing: border-box;
	max-width: 100%;
	text-align: center;
	font-size: var(--font-size-36);
	color: var(--color-white);
	font-family: var(--font-im-fell-double-pica-sc);}
.faq-title {margin: 0;
	font-size: 28px;
	line-height: 28px;
	font-family: inherit;
	display: inline-block;}
.vector-icon {width: 100%;
	height: 2px;

	max-height: 100%;}
.vector-icon1 {height: 30px;
	width: 30px;
	}
.frame-parent4 {gap: var(--gap-12);
	max-width: 100%;}
.faq-question {
	line-height: 28px;}
.faq-answer {max-width: 402px;
	width: 100%;
	line-height: 15px;
	text-align: left;
	display: inline-block;}
.faq-container {width: 427px;
	gap: var(--gap-12);}
.faq-item {width: 427px;




	gap: 0;}
.frame-parent8, .products-parent {align-self: stretch;
	align-items: flex-start;
	gap: var(--gap-11);}
.frame-parent5 {align-self: stretch;

	gap: var(--gap-11);
	text-align: left;
	font-size: var(--font-size-14);
	font-family: var(--font-hahmlet);}
.frame-parent3, .faq-wrapper {max-width: 100%;}
.frame-parent3 {width: 443px;

	gap: var(--space-lg);}
.faq-wrapper {align-self: stretch;
	width: 100%;
	box-shadow: 5px 5px 5px rgba(97, 117, 138, 0.5);
	border-radius: var(--br-10);
	background-color: var(--color-white);
	border: 2px solid var(--color-slategray);
	box-sizing: border-box;
	align-items: flex-start;
	padding: 70px 170px;
	text-align: center;
	color: var(--color-slategray);
	font-family: var(--font-im-fell-double-pica-sc);}
.frame-child7 {width: 133px;
	height: 133px;
	}
.group-div {display: flex;
	align-items: flex-start;
	justify-content: flex-start;}
.group-div {width: 133px;
	flex: 1;}
.hero-subtitle {margin: 0;
	font-size: var(--font-size-14);
  font-family: var(--font-hahmlet);}
.learn-japanese-one-container {align-self: stretch;
	height: 82px;

	line-height: 39.3px;
	display: inline-block;}
.attributes-icon {width: 83px;
	height: 66px;

	border-radius: 1px;}
.frame-parent10 {align-self: stretch;
	width: 593px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-lg);
	max-width: 100%;}
.frame-wrapper2 {width: 757px;





	box-sizing: border-box;
	max-width: 100%;
	text-align: center;
	font-size: var(--font-size-24);
	color: var(--color-black);
	font-family: var(--font-im-fell-double-pica-sc);}
.frame-parent2 {
	display: flex;
	align-items: flex-start;
	max-width: 100%;
	flex-direction: column;
	justify-content: flex-start;
	gap: 96px;}
.rectangle-div {
	background-color: var(--color-silver);
	width: 100%;
	height: 100%;
	display: none;}
.frame-child9 {
	width: 169px;
	height: 145px;
	}
.frame-child10 {align-self: stretch;

	border-radius: var(--br-15);
	background-color: var(--color-silver);
	border: 2px solid var(--color-white);
	box-sizing: border-box;
	height: 65px;}
.rectangle-wrapper {
	width: 100%;
	height: 100%;}
.login1 {

	font-size: var(--font-size-20);
	line-height: 39.3px;
	font-family: var(--font-im-fell-double-pica-sc);
	color: var(--color-white);
	text-align: center;
	display: inline-block;
	border: 2px solid white;
}
.group-button {cursor: pointer;
	height: 65px;
	width: 188px;
	background: none;
	border-radius: 1em;
	}
.frame-child11 {align-self: stretch;

	border-radius: var(--br-15);
	background-color: var(--color-white);
	height: 65px;}
.start-learning {
	border: none;
	background-color: var(--color-white);
	font-size: var(--font-size-20);
	line-height: 39.3px;
	font-family: var(--font-im-fell-double-pica-sc);
	color: var(--color-silver);
	text-align: center;
	display: inline-block;
}
.frame-parent11 {
	display: flex;
	gap: var(--gap-30);
}
.footer-nav {
	display: flex;
	flex-direction: row;
}
.frame-child12 {width: 475px;
	height: 1px;

	max-height: 100%;}
.privacy-policy {
	line-height: 39.3px; margin-bottom: 12px;}
.footer-inner, .header-legal {display: flex;
	justify-content: flex-start;}
.header-legal {font-size: var(--font-size-12);}
.footer-inner {
	font-size: var(--font-size-20);
	color: var(--color-white);
	font-family: var(--font-im-fell-double-pica-sc);
	flex-direction: column;
	background-color: var(--color-silver);
}
.footer-container {align-self: stretch;
	height: 269px;

	background-color: var(--color-silver);
	max-width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.page {width: 100%;

	background-color: var(--color-white);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 41px 0 0;
	box-sizing: border-box;
	gap: 167px;
	line-height: normal;
	letter-spacing: normal;}
.frame-parent1 {flex-wrap: wrap;}
.frame-parent {gap: 147px;}
.product-icon {justify-content: center;
		grid-template-columns: repeat(2, minmax(290px, 503px));}
.faq-title {font-size: var(--fs-26);
		line-height: 22px;}
.pricing-cta, .depth-5-frame-23 {max-width: 100%;}
.product-icon {grid-template-columns: minmax(290px, 1fr);}
.pricing-grid {gap: var(--space-md);}
.frame-parent4, .footer-nav, .depth-6-frame-1, .frame-parent11 {flex-wrap: wrap;}
.faq-wrapper {padding-top: 45px;
		padding-bottom: 45px;
		box-sizing: border-box;
		align-items: center;
	}
.frame-parent10, .frame-parent3 {gap: 35px;}
.login1, .start-learning {font-size: var(--font-size-22);
		line-height: 31px;}
.vector-parent {gap: var(--gap-18);
		flex-wrap: wrap;}
.about-title {font-size: var(--fs-18);
		line-height: 22px; font-weight: 400;}
.frame-parent1 {gap: var(--gap-18);}
.pricing-card {padding-top: var(--padding-20);
		padding-bottom: var(--padding-20);
		box-sizing: border-box;}
.try-it, .faq-title {font-size: var(--font-size-19);
		line-height: 17px;}
.wave-haikei-1-1, .faq-wrapper {padding-left: var(--padding-20);
		padding-right: var(--padding-20);
		box-sizing: border-box;}
.pricing-grid {gap: var(--gap-20);}
.pricing-section {
	padding-bottom: var(--padding-26);
	box-sizing: border-box;
	margin-top: -250px;
	margin-bottom: -240px;
	}


.features {
  display: grid;
  gap: 60px;
  padding: 20px;
  max-width: 1000px;
  width: 100%;
}
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "media content";
  align-items: center;
  gap: 24px;
}
.feature--alt {
  grid-template-areas: "content media";
}
.feature-media { grid-area: media; }
.feature-content { grid-area: content; }

.feature-media img {
  display: block;
  max-width: 400px;
  width: 90%;
  height: auto;
}

.feature-content h3 {
  margin: 0 0 8px;
  font-size: var(--fs-26, 26px);
}

.feature-content p {
  margin: 0;
  line-height: 1.6;
  font-family: var(--font-hahmlet);
  width: 95%;
}

@media (max-width: 767.98px) {
  /* Keep the section flow simple on mobile */
  .pricing-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* The horizontal track */
  .pricing-grid .product-icon {
    width: 100%;
    /* Nuke any lingering grid/flex from desktop styles */
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: 85%;      /* each slide takes ~85% of viewport */
    gap: 16px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;

    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px; /* where the snap should center from */

    /* Make it edge-to-edge even if parent has padding */
    padding-inline: 16px;
    margin-inline: -16px;

    /* Avoid layout surprises from inherited grid alignment */
    place-items: stretch;
    place-content: normal;

    /* Keep the scrollbar visible so mouse users can scroll */
    scrollbar-width: auto;
  }

  /* The slides */
  .pricing-grid .pricing-card {
    /* Fill the column size defined by grid-auto-columns */
    width: 100% !important;
    min-width: 0;
    max-width: none;

    scroll-snap-align: center;   /* center each card when it snaps */
    scroll-snap-stop: always;    /* don’t glide past slides */
  }

  /* Usual culprits: force internal content to respect width */
  .pricing-grid .pricing-card * {
    min-width: 0;
    max-width: 100%;
  }

  /* Buttons should stretch the card width on mobile */
  .pricing-grid .pricing-card .pricing-cta {
    width: 100%;
  }

  /* Slim horizontal scrollbar without arrows — WebKit (Chrome, Safari, Edge) */
.product-icon::-webkit-scrollbar {
  height: 6px; /* slim height */
}

.product-icon::-webkit-scrollbar-button {
  display: none; /* remove arrows */
}

.product-icon::-webkit-scrollbar-track {
  background: transparent; /* or a subtle color if you prefer */
}

.product-icon::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3); /* visible but subtle */
  border-radius: 3px; /* rounded ends */
}

/* Slim horizontal scrollbar without arrows — Firefox */
.product-icon {
  scrollbar-width: thin;       /* makes it slimmer */
  scrollbar-color: rgba(0,0,0,0.3) transparent; /* thumb color | track color */
}

.hero-title span {
  display: inline-block;   /* keeps the span text together */
}

  .frame-wrapper {
    /* you already have display:flex; from utilities */
    flex-wrap: wrap-reverse;          /* <-- puts the wrapped line on TOP */
    justify-content: center;          /* keep things centered */
    align-items: center;
    row-gap: 8px;                     /* vertical space between the two lines */
    column-gap: 16px;                 /* horizontal space between items */
  }

  /* Keep the button pair together and make it its own top row */
  .frame-wrapper .frame-container {
    display: flex;                    /* ensure the two buttons stay side by side */
    gap: 12px;
    flex-basis: 100%;                 /* force onto its own line */
    justify-content: center;          /* center the buttons on that top line */
  }

  /* (Optional) tighten link spacing on the second row */
  .frame-wrapper .top {
    margin: 0 8px;
  }

  .pricing-section {
	margin-top: -190px;
	margin-bottom: -190px;
	}

	.frame-child9 {
		display: none;
	}

	.footer-inner {
		width: 100%;
	}

	.footer-nav {
		justify-content: center;
		padding-top: 1em;
		row-gap: 8px;
		column-gap: 16px;
	}

	.frame-parent11 {
		justify-content: center;
	}

	.feature {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "content";
  }

  .frame-parent {
  	gap: 80px;
  }

  .frame-group {
  	gap: 0;
  }
}