/* ===========================================================================
   Ikou — business site
   ---------------------------------------------------------------------------
   A standalone marketing site. No build step, no framework: one stylesheet and
   one page, so it can be dropped on any static host.

   The palette, the two Latin faces and the elevation model are lifted straight
   from the app's own design system (app/globals.css) rather than reinvented —
   someone arriving here and then opening Ikou should not feel handed off to a
   different product. The one deliberate divergence is that this site commits to
   the dark violet ground only. The app themes both ways because people read it
   for ten minutes at a time in whatever light they are in; a marketing page is
   looked at once, and the violet ink *is* the brand.
   =========================================================================== */

:root {
  /* --- Ground. Violet ink, deliberately warm. ------------------------------ */
  --ink: 265 45% 8%;
  --ink-deep: 266 52% 5%;
  --surface: 264 34% 14%;
  --surface-raised: 263 30% 20%;
  --brand-bar: 14 42% 9%;

  --line: 263 24% 30%;
  --line-strong: 263 26% 44%;

  --text: 270 30% 97%;
  --text-muted: 268 18% 74%;
  --text-subtle: 266 14% 56%;

  /* --- The cast. Every content track owns one hue, on every screen, in the
         app and here. Color is navigation, not decoration. ----------------- */
  --coral: 16 92% 61%;      /* the brand's action color */
  --coral-deep: 12 78% 46%;
  --blossom: 330 86% 68%;   /* hiragana */
  --sky: 196 90% 56%;       /* katakana */
  --sun: 44 98% 58%;        /* kanji */
  --grape: 272 82% 70%;     /* words */
  --lime: 82 78% 55%;       /* phrases */
  --indigo: 232 88% 70%;    /* numbers & money */
  --teal: 168 72% 47%;      /* conversation */
  --rose: 352 85% 63%;      /* the "Again" answer */

  /* Text that sits ON a saturated fill. Bright flat color takes ink, never
     white — white on lime or sun fails contrast and looks washed out. */
  --on-light: 266 60% 10%;

  /* --- Elevation. Depth comes from light: a hairline along the top edge and a
         shade beneath, tinted with the element's own hue. ------------------- */
  --shade-base: 268 70% 3%;
  --edge-light: 0 0% 100% / 0.1;

  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --measure: 34rem;

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: hsl(var(--ink));
}

body {
  background: hsl(var(--ink));
  color: hsl(var(--text));
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  text-wrap: balance;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid hsl(var(--sun));
  outline-offset: 3px;
  border-radius: 10px;
}

::selection {
  background: hsl(var(--coral) / 0.4);
}

/* Kana and kanji get a face drawn for them. No "palt": proportional alternates
   strip the side bearings off kana, and a lone character at poster size then
   sits in a box narrower than it was drawn for and reads as squashed. */
.jp {
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", "Meiryo", sans-serif;
  font-feature-settings: normal;
  letter-spacing: normal;
}

.shell {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: hsl(var(--text-subtle));
}

.lede {
  color: hsl(var(--text-muted));
  font-size: 1.1875rem;
  line-height: 1.65;
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   Elevation, ported from the app. `--shade` takes a raw HSL triple, never a
   finished hsl() string: these rules compose the color themselves, sinking the
   element's hue most of the way into --shade-base first so a coral button drops
   a warm shadow rather than ringing itself in a neon halo on this near-black
   violet ground.
   -------------------------------------------------------------------------- */

.elevated,
.pressable {
  --shade-c: color-mix(
    in oklab,
    hsl(var(--shade-base)) 84%,
    hsl(var(--shade, var(--shade-base)))
  );
  box-shadow:
    inset 0 1px 0 0 hsl(var(--edge-light)),
    0 1px 2px -1px color-mix(in srgb, var(--shade-c) 60%, transparent),
    0 12px 26px -14px color-mix(in srgb, var(--shade-c) 72%, transparent);
}

.pressable {
  transition: box-shadow 0.16s ease-out, transform 0.12s ease-out,
    filter 0.16s ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .pressable:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow:
      inset 0 1px 0 0 hsl(var(--edge-light)),
      0 2px 4px -2px color-mix(in srgb, var(--shade-c) 60%, transparent),
      0 18px 34px -16px color-mix(in srgb, var(--shade-c) 72%, transparent);
  }
}

.pressable:active {
  transform: scale(0.977);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  height: 3.5rem;
  padding-inline: 1.75rem;
  border: 0;
  border-radius: 999px;
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn--primary {
  --shade: var(--coral-deep);
  background: hsl(var(--coral));
  color: hsl(var(--on-light));
}

.btn--secondary {
  background: hsl(var(--surface-raised));
  color: hsl(var(--text));
  border: 1px solid hsl(var(--line));
}

.btn--ghost {
  height: 2.75rem;
  padding-inline: 1.125rem;
  font-size: 0.9375rem;
  background: transparent;
  color: hsl(var(--text-muted));
  border: 1px solid hsl(var(--line));
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.btn--ghost:hover {
  color: hsl(var(--text));
  border-color: hsl(var(--line-strong));
}

/* --------------------------------------------------------------------------
   The wordmark: 行 + Ikou, with a contrail that is exactly as wide as the
   letters above it and a jet climbing off the final "u".
   -------------------------------------------------------------------------- */

.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding-right: 3.375rem; /* runway for the jet, which sits out of flow */
  text-decoration: none;
  color: hsl(var(--text));
}

.wordmark__lockup {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4375rem;
}

.wordmark__kanji {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
  color: hsl(var(--coral));
}

.wordmark__name {
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.3125rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
}

.wordmark__trail {
  position: relative;
  width: 100%;
  height: 2px;
  margin-top: 0.375rem;
}

.wordmark__trail::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px 0 0 999px;
  background: linear-gradient(to right, hsl(var(--coral) / 0), hsl(var(--coral)));
}

.wordmark__jet {
  position: absolute;
  left: 100%;
  bottom: 0;
  width: 2.375rem;
  color: hsl(var(--coral));
}

.wordmark--sm {
  padding-right: 2.5rem;
}
.wordmark--sm .wordmark__kanji {
  font-size: 1.375rem;
}
.wordmark--sm .wordmark__name {
  font-size: 1.0625rem;
}
.wordmark--sm .wordmark__trail {
  height: 1.5px;
  margin-top: 0.25rem;
}
.wordmark--sm .wordmark__jet {
  width: 1.75rem;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: hsl(var(--brand-bar) / 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid hsl(var(--line) / 0.6);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.site-nav a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(var(--text-muted));
  text-decoration: none;
}

.site-nav a:hover {
  color: hsl(var(--text));
}

@media (max-width: 46rem) {
  .site-nav {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section {
  padding-block: clamp(4rem, 9vw, 7rem);
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 2.75rem;
}

.section__head h2 {
  font-size: clamp(1.875rem, 4.4vw, 2.75rem);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}

/* One enormous glyph, cropped by the section edge — the departure-board scale
   that Japanese signage is actually set at, used as ground rather than accent. */
.hero__watermark {
  position: absolute;
  top: -7rem;
  right: -3rem;
  font-size: min(38rem, 70vw);
  line-height: 0.78;
  font-weight: 700;
  color: hsl(var(--grape) / 0.07);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 54rem) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding-inline: 1rem;
  border-radius: 999px;
  background: hsl(var(--sun));
  color: hsl(var(--on-light));
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  width: fit-content;
}

.hero h1 {
  font-size: clamp(2.5rem, 5vw, 3.875rem);
  margin-block: 1.5rem 1.5rem;
  max-width: 15ch;
}

/* A hand-drawn-feeling highlight behind the payoff words, straight off the
   app's own hero. */
.mark {
  position: relative;
  display: inline-block;
  z-index: 0;
}

.mark > span {
  position: relative;
  z-index: 1;
}

.mark::after {
  content: "";
  position: absolute;
  inset-inline: -6px;
  bottom: 0.06em;
  height: 0.28em;
  border-radius: 999px;
  background: hsl(var(--coral));
  transform: rotate(-1deg);
  z-index: 0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
  margin-top: 2.25rem;
}

.hero__note {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  color: hsl(var(--text-subtle));
}

/* --------------------------------------------------------------------------
   The phone. Not a screenshot — the drill screen rebuilt from the app's own
   tokens, so it cannot go stale against a redesign the way a PNG would.
   -------------------------------------------------------------------------- */

.phone {
  --shade: var(--grape);
  width: min(19rem, 100%);
  margin-inline: auto;
  aspect-ratio: 9 / 19;
  border-radius: 2.5rem;
  padding: 0.5rem;
  background: linear-gradient(
    170deg,
    hsl(var(--surface-raised)),
    hsl(var(--ink-deep))
  );
  border: 1px solid hsl(var(--line));
}

.phone__screen {
  height: 100%;
  border-radius: 2.05rem;
  background: hsl(var(--ink));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.875rem 0.875rem 1rem;
  gap: 0.75rem;
}

.phone__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: hsl(var(--text-subtle));
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phone__progress {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: hsl(var(--surface-raised));
  overflow: hidden;
}

.phone__progress span {
  display: block;
  height: 100%;
  width: 62%;
  border-radius: 999px;
  background: hsl(var(--lime));
}

.phone__card {
  --shade: var(--blossom);
  flex: 1;
  border-radius: 1.375rem;
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--line));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  text-align: center;
}

.phone__glyph {
  font-size: 6.5rem;
  line-height: 1;
  font-weight: 700;
  color: hsl(var(--blossom));
}

.phone__romaji {
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.phone__hint {
  font-size: 0.75rem;
  color: hsl(var(--text-subtle));
  font-weight: 600;
}

.phone__answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.phone__answers span {
  height: 2.75rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: hsl(var(--on-light));
}

.phone__answers .again {
  background: hsl(var(--rose));
}

.phone__answers .got {
  background: hsl(var(--lime));
}

/* --------------------------------------------------------------------------
   Tracks — seven flat color blocks, one per thing the app teaches.
   -------------------------------------------------------------------------- */

.tracks {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.625rem;
}

@media (max-width: 60rem) {
  .tracks {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 30rem) {
  .tracks {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 60rem) {
  .track:last-child {
    grid-column: span 2;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 1rem;
    min-height: 6.5rem;
  }
}

.track {
  --shade: var(--tone);
  border-radius: 1.25rem;
  padding: 1rem 1rem 1.125rem;
  background: hsl(var(--tone));
  color: hsl(var(--on-light));
  min-height: 9.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
}

.track__glyph {
  font-size: 2.75rem;
  line-height: 1;
  font-weight: 700;
}

.track__name {
  display: block;
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.track__sub {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.72;
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Signs — the promise, made literal. Set as the signage it is.
   -------------------------------------------------------------------------- */

.signs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.sign {
  --shade: var(--ink-deep);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.75rem 1.125rem;
  border-radius: 0.875rem;
  background: hsl(var(--ink-deep));
  border: 1px solid hsl(var(--line));
}

.sign b {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.1;
  color: hsl(var(--text));
}

.sign i {
  font-style: normal;
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(var(--text-subtle));
}

/* --------------------------------------------------------------------------
   Features
   -------------------------------------------------------------------------- */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}

.feature {
  --shade: var(--tone);
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.75rem;
  border-radius: 1.5rem;
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--line));
}

.feature__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
  display: grid;
  place-items: center;
  background: hsl(var(--tone));
  color: hsl(var(--on-light));
  flex-shrink: 0;
}

.feature__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.feature h3 {
  font-size: 1.25rem;
  font-weight: 700;
}

.feature p {
  color: hsl(var(--text-muted));
  font-size: 1rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Session — a real sequence, so it gets real numbering.
   -------------------------------------------------------------------------- */

.session {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem 2rem;
  counter-reset: step;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding-top: 1.5rem;
  border-top: 2px solid hsl(var(--line));
}

.step__n {
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: hsl(var(--coral));
  font-variant-numeric: tabular-nums;
}

.step h3 {
  font-size: 1.125rem;
  font-weight: 700;
}

.step p {
  color: hsl(var(--text-muted));
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Get the app
   -------------------------------------------------------------------------- */

.get {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  padding: clamp(2rem, 5vw, 3.5rem);
  background: hsl(var(--coral));
  color: hsl(var(--on-light));
  --shade: var(--coral-deep);
}

.get__watermark {
  position: absolute;
  right: -1.5rem;
  bottom: -4rem;
  font-size: 12rem;
  line-height: 1;
  font-weight: 700;
  color: hsl(var(--on-light) / 0.13);
  pointer-events: none;
  user-select: none;
}

.get__inner {
  position: relative;
  display: grid;
  gap: 1.75rem;
  max-width: 40rem;
}

/* Scoped to the copy block alone — unscoped, this also caught the store row
   and stacked the two plates full-width. */
.get__copy {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.get h2 {
  font-size: clamp(1.75rem, 4.2vw, 2.5rem);
}

.get p {
  font-size: 1.0625rem;
  opacity: 0.85;
  max-width: 32rem;
}

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  align-items: stretch;
}

/* Both store plates share one silhouette so the pair reads as a set, whatever
   each one's state. */
.store {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 4rem;
  padding: 0.75rem 1.5rem 0.75rem 1.25rem;
  border-radius: 1rem;
  text-decoration: none;
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
}

.store__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: left;
}

.store__text small {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.7;
}

.store__text strong {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.store--live {
  --shade: var(--ink-deep);
  background: hsl(var(--on-light));
  color: hsl(var(--text));
}

/* The Play plate is deliberately *not* a link while the listing does not
   exist. A disabled-looking button is a worse lie than no button; this one
   states its own state instead. */
.store--soon {
  background: hsl(var(--on-light) / 0.16);
  color: hsl(var(--on-light));
  border: 1.5px dashed hsl(var(--on-light) / 0.38);
  cursor: default;
}

.store__play {
  width: 1.75rem;
  height: 1.9375rem;
  flex-shrink: 0;
}

.store--soon .store__play {
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid hsl(var(--line));
  padding-block: 2.75rem 3.5rem;
  margin-top: clamp(3rem, 7vw, 5rem);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.site-footer a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(var(--text-muted));
  text-decoration: none;
}

.site-footer a:hover {
  color: hsl(var(--text));
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer small {
  display: block;
  margin-top: 1.75rem;
  font-size: 0.875rem;
  color: hsl(var(--text-subtle));
}

/* --------------------------------------------------------------------------
   Motion. Everything here resolves to a visible resting state — the page is
   fully readable as a still frame, which is what a shared link renders as.
   -------------------------------------------------------------------------- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__grid > * {
    animation: rise 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  }
  .hero__grid > *:nth-child(2) {
    animation-delay: 0.09s;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .pressable:hover,
  .pressable:active {
    transform: none;
  }
}