/* KaiTale page stylesheet: a ruled notebook page in ink, highlighter yellow and margin red.
   The palette is the app's own (ink #16233B, paper #F4F6F8, highlighter #FFE14A, margin red #C93A26). */

body.sp-page {
  --sp-paper: #f4f6f8;
  --sp-card: #ffffff;
  --sp-wash: #e6ecf3;
  --sp-rule: #b9cce3;
  --sp-ink: #16233b;
  --sp-ink-muted: #55627a;
  --sp-highlight: #ffe14a;
  --sp-margin: #c93a26;
  --sp-shadow: #b6bbc3;
  /* Uneven corners, so every box looks cut by hand rather than by a ruler. */
  --sp-wobble: 28px 12px 26px 14px / 14px 26px 12px 28px;
  background-color: var(--sp-paper);
  color: var(--sp-ink);
  color-scheme: light;
}

/* Header and footer on paper */
.sp-page .site-header {
  border-bottom: 2px solid var(--sp-ink);
}

.sp-page .brand {
  color: var(--sp-ink);
}

.sp-page .brand-mark {
  --brand-mark: var(--sp-margin);
}

.sp-page nav a,
.sp-page footer a,
.sp-page footer span {
  color: var(--sp-ink-muted);
}

.sp-page nav a:hover,
.sp-page nav a:focus-visible,
.sp-page footer a:hover,
.sp-page footer a:focus-visible {
  color: var(--sp-margin);
}

.sp-page footer {
  border-top: 2px solid var(--sp-ink);
}

/* The highlighter: a marker stroke behind the words, not a box around them. */
.sp-mark {
  background: linear-gradient(transparent 56%, var(--sp-highlight) 56%, var(--sp-highlight) 94%, transparent 94%);
  padding: 0 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* HERO */
.sp-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  padding: 72px 0 64px;
}

.sp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sp-ink-muted);
  margin-bottom: 24px;
}

.sp-eyebrow img {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  box-shadow: 2px 3px 0 var(--sp-shadow);
}

.sp-hero h1 {
  font-size: clamp(42px, 5.6vw, 72px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--sp-ink);
  margin: 0 0 26px;
}

.sp-lead {
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.6;
  color: var(--sp-ink-muted);
  margin: 0 0 30px;
  max-width: 34em;
}

.sp-platforms {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--sp-ink);
  background: var(--sp-card);
  border: 2px solid var(--sp-ink);
  border-radius: var(--sp-wobble);
  padding: 9px 18px;
  margin-right: 14px;
}

.sp-platforms .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sp-margin);
}

.sp-status {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--sp-ink);
  margin-top: 14px;
}

.sp-hero-visual {
  display: flex;
  justify-content: center;
}

/* The notebook leans a little, as the one on the app icon does. */
.sp-notebook {
  width: min(100%, 360px);
  height: auto;
  transform: rotate(-3deg);
}

/* SECTIONS */
.sp-section {
  padding: 56px 0;
}

.sp-section-title {
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--sp-ink);
  margin: 0 0 12px;
}

.sp-section-desc {
  font-size: 18px;
  color: var(--sp-ink-muted);
  margin: 0 0 40px;
  max-width: 36em;
}

/* Cards: an ink outline and the paper underneath showing at one corner. */
.sp-steps,
.sp-features-grid {
  display: grid;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sp-steps {
  grid-template-columns: repeat(3, 1fr);
}

.sp-features-grid {
  grid-template-columns: repeat(2, 1fr);
}

.sp-card {
  background: var(--sp-card);
  border: 2px solid var(--sp-ink);
  border-radius: var(--sp-wobble);
  box-shadow: 5px 6px 0 var(--sp-shadow);
  padding: 28px 28px 30px;
}

.sp-steps .sp-card:nth-child(2) {
  transform: rotate(0.6deg);
}

.sp-steps .sp-card:nth-child(3) {
  transform: rotate(-0.5deg);
}

.sp-card h3 {
  font-size: 23px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--sp-ink);
  margin: 0 0 10px;
}

.sp-card p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--sp-ink-muted);
  margin: 0;
}

.sp-step-num {
  display: inline-block;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--sp-ink);
  margin-bottom: 14px;
  transform: rotate(-4deg);
}

.sp-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 2px solid var(--sp-ink);
  border-radius: 16px 10px 15px 9px / 9px 15px 10px 16px;
  background: var(--sp-highlight);
  color: var(--sp-ink);
  margin-bottom: 16px;
}

.sp-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* KAITALE CLOUD: the one dark page in the notebook */
.sp-cloud {
  background: var(--sp-ink);
  color: var(--sp-paper);
  border-radius: 40px 18px 36px 20px / 20px 36px 18px 40px;
  padding: 64px 48px;
  margin: 40px 0 24px;
}

.sp-cloud .sp-section-title {
  color: var(--sp-paper);
}

.sp-cloud .sp-section-desc {
  color: #c9d3e2;
}

.sp-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sp-plan {
  border: 2px solid var(--sp-paper);
  border-radius: var(--sp-wobble);
  padding: 26px 26px 28px;
}

.sp-plan h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 8px;
}

.sp-plan p {
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  color: #c9d3e2;
}

.sp-plan-pro {
  background: var(--sp-highlight);
  border-color: var(--sp-highlight);
  color: var(--sp-ink);
}

.sp-plan-pro p {
  color: var(--sp-ink);
}

.sp-cloud-note {
  margin: 28px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--sp-paper);
}

/* COMING SOON */
.sp-soon {
  padding: 56px 0 88px;
  text-align: center;
}

.sp-soon .sp-section-desc {
  margin: 0 auto;
}

.sp-soon a {
  color: var(--sp-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--sp-margin);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.sp-soon a:hover,
.sp-soon a:focus-visible {
  color: var(--sp-margin);
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .sp-hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px 0;
  }

  .sp-hero-visual {
    order: -1;
  }

  .sp-notebook {
    width: min(72%, 300px);
  }

  .sp-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .sp-features-grid,
  .sp-plans {
    grid-template-columns: 1fr;
  }

  .sp-cloud {
    padding: 44px 24px;
  }

  .sp-section {
    padding: 40px 0;
  }
}

/* Japanese: no spaces to break on, and the Latin sizes overflow a phone line. */
.sp-hero h1:lang(ja) {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.3;
  letter-spacing: 0;
  word-break: auto-phrase;
}

.sp-section-title:lang(ja) {
  letter-spacing: 0;
  line-height: 1.3;
  word-break: auto-phrase;
}

@media (max-width: 600px) {
  .sp-hero h1:lang(ja) {
    font-size: 7.6vw;
  }
}

/* Vietnamese: stacked diacritics need more room between lines than the Latin default. */
.sp-hero h1:lang(vi),
.sp-section-title:lang(vi) {
  line-height: 1.2;
}

/* RECORDING, ACTED OUT ON THE NOTEBOOK
   The bars move like a voice being recorded, the lamp blinks and the clock
   (kaitale.js) counts. Still under the reduced-motion setting. */
.sp-wave path {
  transform-box: fill-box;
  transform-origin: center;
  animation: sp-voice 1.1s ease-in-out infinite alternate;
}

.sp-wave path:nth-child(3n) { animation-duration: 0.74s; animation-delay: -0.3s; }
.sp-wave path:nth-child(3n + 1) { animation-duration: 0.96s; animation-delay: -0.62s; }
.sp-wave path:nth-child(4n + 2) { animation-duration: 1.28s; animation-delay: -0.15s; }
.sp-wave path:nth-child(5n) { animation-duration: 0.58s; animation-delay: -0.4s; }
.sp-wave path:nth-child(7n + 3) { animation-duration: 1.46s; animation-delay: -0.9s; }

@keyframes sp-voice {
  from { transform: scaleY(0.28); }
  to { transform: scaleY(1.12); }
}

.sp-rec-lamp {
  animation: sp-lamp 1.2s steps(2, jump-none) infinite;
}

@keyframes sp-lamp {
  from { opacity: 1; }
  to { opacity: 0.2; }
}

.sp-rec-time {
  font: 700 15px/1 inherit;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  fill: var(--sp-ink);
}

@media (prefers-reduced-motion: reduce) {
  .sp-wave path,
  .sp-rec-lamp {
    animation: none;
  }
}

/* SCREENSHOTS: one strip per device, scrolled sideways. */
.sp-shots-device {
  margin: 34px 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--sp-ink);
}

.sp-shots {
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 4px 8px 16px 2px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.sp-shots:focus-visible {
  outline: 3px solid var(--sp-ink);
  outline-offset: 4px;
}

.sp-shots li {
  flex: none;
  scroll-snap-align: start;
}

.sp-shots img {
  display: block;
  height: min(540px, 68vh);
  width: auto;
  border: 2px solid var(--sp-ink);
  border-radius: 20px 16px 22px 15px / 16px 22px 15px 20px;
  box-shadow: 5px 6px 0 var(--sp-shadow);
  background: var(--sp-highlight);
}

@media (max-width: 600px) {
  .sp-shots img {
    height: min(440px, 62vh);
  }
}

/* IPHONE DUO, OPENING AND CLOSING
   The left half is a leaf hinged on the middle line. Its inside carries the
   left of the big screen, its back the cover screen. Folded over, it lies on
   the right half and shows the cover; the phone slides so that either state
   sits in the middle. Shown open and still under the reduced-motion setting. */
.sp-fold {
  display: flex;
  justify-content: center;
  padding: 6px 0 30px;
  perspective: 1500px;
}

.sp-fold-device {
  --h: min(400px, 60vw);
  --body: #181c28;
  --bezel: calc(var(--h) * 0.022);
  position: relative;
  height: var(--h);
  width: calc(var(--h) * 1.4216);
  transform-style: preserve-3d;
  transform: translateX(calc((1 - var(--e, 1)) * -25%)) scale(calc(0.9 + 0.1 * var(--e, 1)));
  will-change: transform;
}

.sp-fold-half {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  box-sizing: border-box;
  padding: var(--bezel);
  background: var(--body);
}

.sp-fold-half img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Corner radii follow the device: about 8% of the short side on the outer
   corners, nearly square along the hinge. */
.sp-fold-right {
  left: 50%;
  padding-left: 0;
  border-radius: 0 14.5% 14.5% 0 / 0 10.3% 10.3% 0;
}

.sp-fold-right img {
  border-radius: 0 12% 12% 0 / 0 8.4% 8.4% 0;
}

.sp-fold-leaf {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  transform-origin: right center;
  transform-style: preserve-3d;
  transform: rotateY(calc((1 - var(--e, 1)) * 180deg));
  will-change: transform;
}

.sp-fold-leaf .sp-fold-half {
  left: 0;
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.sp-fold-left {
  padding-right: 0;
  border-radius: 14.5% 0 0 14.5% / 10.3% 0 0 10.3%;
}

.sp-fold-left img {
  border-radius: 12% 0 0 12% / 8.4% 0 0 8.4%;
}

.sp-fold-cover {
  transform: rotateY(180deg);
  border-radius: 3% 14.5% 14.5% 3% / 2.1% 10.3% 10.3% 2.1%;
}

.sp-fold-cover img {
  border-radius: 1.4% 12% 12% 1.4% / 1% 8.4% 8.4% 1%;
}

/* The page scrolls the phone open: kaitale.js sets --e (0 closed, 1 open) from
   the scroll position, and the track is tall so the device stays put while it
   moves. Without the script, or with reduced motion, the phone stays open. */
.sp-fold-track {
  position: relative;
}

.sp-fold-sticky {
  position: relative;
}

.sp-fold-track.is-scrolly {
  height: 220vh;
}

.sp-fold-track.is-scrolly .sp-fold-sticky {
  position: sticky;
  top: calc(50vh - var(--fold-h, 240px));
}

.sp-fold-sticky {
  opacity: calc(var(--in, 1) * var(--out, 1));
  filter: blur(calc((1 - var(--in, 1) * var(--out, 1)) * 10px)) drop-shadow(0 calc(10px + 18px * var(--e, 1)) calc(14px + 20px * var(--e, 1)) rgba(22, 35, 59, 0.22));
}