/* Kasaneru LP
   White-based, with the thin black outlines the app's own cityscape widget is
   drawn in. Deliberately committed to a single light look — no dark variant —
   so the page always reads bright. Structure comes from hairline borders
   rather than fills or shadows. */

:root {
  --paper: #ffffff;
  --paper-alt: #fafafa;
  --ink: #111114;
  --ink-mid: #43434a;
  --ink-muted: #86868b;
  /* Matched to the phone bezel's gradient (#3a3a3c → #1c1c1e) so the outlines
     and the device frame read as one drawing. A touch lighter than the body
     ink, which keeps 1px borders from out-weighting the frame. */
  --line: #2c2c30;
  --line-soft: #dcdce1;     /* internal dividers, where full black is too loud */
  --accent: #3b82f6;
  --accent-soft: rgba(59, 130, 246, 0.09);
  --radius: 14px;
  --wrap: 1120px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Noto Sans JP", "Yu Gothic", sans-serif;
  font-size: 17px;
  line-height: 1.8;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 40px;
}

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

/* A plain full-width bar — no capsule, no shadow, nothing that floats. The only
   thing separating header from page is the frosted material itself, which is
   also why there is no divider line: the blur is the edge. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* The frost lives on a pseudo-element rather than on .site-header so it can be
   masked. Masking is the whole trick: a backdrop-filter that stops dead at the
   bar's bottom edge draws a hard seam, which is the same visual artefact the
   removed hairline was. Fading the material out instead — and overshooting past
   the bar so the fade has room — lets content dissolve into the white. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0 0 -36px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.82) 48%, rgba(255, 255, 255, 0));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  -webkit-mask-image: linear-gradient(to bottom, #000 48%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 48%, transparent 100%);
}

.header-inner {
  /* Lifts the row above the frost, which is a positioned pseudo-element and
     would otherwise paint over this unpositioned content. */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 76px;
}

/* Firefox, and Safari with "Reduce transparency" on, get no backdrop blur — so
   the bar falls back to near-solid white rather than a washed-out ghost. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.97) 55%, rgba(255, 255, 255, 0));
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

/* Captured from the home screen, so it already carries the platform's Liquid
   Glass treatment and its own squircle with transparent corners — adding a
   border here would draw a box around a shape that already has one. */
.brand-mark {
  width: 32px;
  height: 32px;
}

.wordmark {
  /* A wordmark, not a label: geometric sans with gentle tracking — Avenir
     Next on Apple devices, which is most of this audience. Cased exactly
     as the trademark filing has it: Kasaneru, capital K only. */
  font-family: "Avenir Next", Avenir, Futura, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.1em;
  color: var(--ink);
}

.lang-switch {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
}

.lang-switch a { color: var(--ink-muted); text-decoration: none; }
.lang-switch a:hover { color: var(--ink); }
.lang-switch [aria-current] { color: var(--ink); }

.status-chip {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
}

/* ---------- Typography ---------- */

h1 {
  font-size: clamp(27px, 4.1vw, 42px);
  line-height: 1.42;
  letter-spacing: -0.01em;
  font-weight: 800;
  margin: 0 0 28px;
}

h1 em {
  font-style: normal;
  /* Full-strength accent — the exact blue of the app's own sent-message
     bubbles (Theme.swift, light accent #3B82F6), so the page's one moment of
     colour is the same colour the product uses. */
  box-shadow: inset 0 -0.36em 0 var(--accent);
}

h2 {
  font-size: clamp(25px, 3.6vw, 36px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  font-weight: 800;
  margin: 0 0 28px;
}

h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
}

/* Japanese wraps at any character, so a headline left to itself breaks
   mid-phrase (「…言葉にす / る。」). Each phrase is its own inline-block: the
   line falls between phrases when it has to, and never inside one unless the
   phrase alone is wider than the column. */
.nb {
  display: inline-block;
  line-break: strict;
}

.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin: 0 0 22px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.lede, .section-lede {
  color: var(--ink-mid);
  margin: 0 0 24px;
}

/* The hero opens with a poem, and a first-time visitor deserves one plain
   line saying what this even is before the poetry starts. Same treatment as
   the section eyebrows so it reads as a label, not a second headline. */
.hero-eyebrow { color: var(--ink-mid); margin-bottom: 26px; }

.section-lede.wide { max-width: 62ch; }
.muted { color: var(--ink-muted); }

.footnote {
  margin: 40px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-muted);
  max-width: 62ch;
}

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

.cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 44px;
}

.cta-row.center { justify-content: center; }

.btn {
  display: inline-block;
  padding: 15px 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  background: var(--ink);
  color: var(--paper);
}

/* The app is not on the App Store yet — the CTA is deliberately inert
   rather than pointing somewhere that does not exist. */
.btn-disabled {
  background: var(--paper);
  color: var(--ink-muted);
  cursor: default;
  border-style: dashed;
  border-color: var(--ink-muted);
}

.cta-note {
  font-size: 14px;
  color: var(--ink-muted);
}

/* The App Store button, while there is nothing behind it yet.
   Deliberately not a disabled-looking <a>: the store page for an app in
   review answers "not available in your region", which reads as broken
   rather than as not-yet. Saying so in place is the honest version, and it
   keeps the shape of the page the release will slot into. */
.btn-pending {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  font-weight: 600;
  color: var(--ink-mid);
  background: var(--paper-alt);
}

.btn-pending::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  /* A slow pulse: something is happening, nothing is wrong. */
  animation: pending-pulse 2.4s ease-in-out infinite;
}

@keyframes pending-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-pending::before { animation: none; }
}

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

.hero { padding: 128px 0 104px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 80px;
  align-items: center;
}

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

/* Two phones in the hero: the reel autoplays up front, the still sits behind.
   Slight counter-rotations keep it looking placed rather than pasted. */
/* The reel is film, not a screenshot — a single frameless cinema card,
   upright like every other object on the page. */
.reel-card {
  width: 100%;
  max-width: 300px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
}
.reel-card video { display: block; width: 100%; }

/* ---------- Device frame ---------- */

/* A real bezel rather than a hairline outline — it reads as a phone at a
   glance, which the flat outline version did not. */
.device {
  width: 100%;
  max-width: 300px;
  border-radius: 42px;
  padding: 9px;
  background: linear-gradient(160deg, #3a3a3c, #1c1c1e);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
}

.device img {
  border-radius: 34px;
  width: 100%;
}

.device video {
  border-radius: 34px;
  width: 100%;
  display: block;
}

.reel-wrap { display: flex; justify-content: center; margin-top: 56px; }

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

.section { padding: 128px 0; }

.section-alt {
  background: var(--paper-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.split {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 88px;
  align-items: center;
}

.split-reverse .split-copy { order: 2; }
.split-reverse .split-shot { order: 1; }
.split-shot { display: flex; justify-content: center; }

/* ---------- Steps ---------- */

.steps {
  list-style: none;
  margin: 72px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.steps li {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 34px;
}

.steps p { margin: 0; color: var(--ink-mid); font-size: 15.5px; }

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 16px;
}

/* ---------- Framework list ---------- */

.framework-list {
  list-style: none;
  margin: 36px 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

/* Three fixed columns — acronym, the element names it stands for (always in
   English, since the letters are English), and a gloss. Mixing a breakdown
   into some rows and a prose description into others read as sloppy. */
.framework-list li {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 16px;
  padding: 17px 2px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15.5px;
}

.framework-list i {
  font-style: normal;
  font-size: 13.5px;
  color: var(--ink-muted);
  text-align: right;
}

.framework-list li:last-child { border-bottom: 1px solid var(--line); }

.framework-list b {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.framework-list span { color: var(--ink-mid); }

/* ---------- Cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 64px;
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 34px;
}

.card p { margin: 0; color: var(--ink-mid); font-size: 15.5px; }

/* ---------- Plans ---------- */

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 64px;
}

.plan {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 34px;
}

/* Emphasis by darkening the line rather than thickening it — a 2px border
   would out-weigh the phone frame and break the shared outline weight. */
.plan-featured { border-color: var(--ink); }

.plan h3 { font-size: 17px; letter-spacing: 0.04em; }

.plan-price small { font-size: 0.55em; font-weight: 400; color: var(--ink-mid); }

.plan-price {
  margin: 0 0 26px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-muted);
}

.plan ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}

.plan li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
  color: var(--ink-mid);
}

.plan li:last-child { border-bottom: none; }
.plan li.off { color: var(--ink-muted); }

/* ---------- Closing ---------- */

.closing {
  padding: 144px 0;
  text-align: center;
  border-top: 1px solid var(--line);
}

.closing p {
  color: var(--ink-mid);
  max-width: 56ch;
  margin: 0 auto;
}

.closing .cta-note { display: block; margin-top: 16px; }

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

.site-footer {
  border-top: 1px solid var(--line);
  padding: 40px 0;
  font-size: 14px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

/* The marks are filed but not yet registered, so no ® anywhere — saying a mark
   is registered before it is would be a false marking under 商標法74条.
   "登録出願中" is the phrasing that is allowed while examination is running. */
.footer-inner { flex-wrap: wrap; }
.footer-tm { font-size: 0.85em; }

/* Operator block: the who-runs-this facts, set quietly above the copyright. */
.footer-company {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 24px;
  row-gap: 6px;
  margin-bottom: 28px;
  font-size: 13.5px;
  color: var(--ink-mid);
}
.footer-company dt { color: var(--ink-faint, #8a8a8e); white-space: nowrap; }
.footer-company dd { margin: 0; }
.footer-company a { color: inherit; }
@media (max-width: 480px) {
  .footer-company { grid-template-columns: 1fr; row-gap: 2px; }
  .footer-company dt { margin-top: 10px; }
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero-grid,
  .split {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  /* Copy always leads on narrow screens, regardless of desktop order. */
  .split-reverse .split-copy,
  .split-reverse .split-shot { order: initial; }

  .steps,
  .cards,
  .plans { grid-template-columns: 1fr; }

  /* The gloss drops under the element names rather than being squeezed
     against the right edge. */
  .framework-list li {
    grid-template-columns: 76px minmax(0, 1fr);
    row-gap: 4px;
  }

  .framework-list i {
    grid-column: 2;
    text-align: left;
  }

  .hero { padding: 64px 0 48px; }
  .section { padding: 84px 0; }
  .closing { padding: 88px 0; }

  /* On a phone the hero reads straight down: the promise, the way to get it,
     the film, then the argument the film is making. Unwrapping .hero-copy
     makes its children grid items too, which is the only way the reel can sit
     between the button and the paragraphs it illustrates. Own gaps, since the
     grid's 56px is far too much between a heading and its button. */
  .hero-copy { display: contents; }
  .hero-grid { gap: 0; }
  .hero-grid h1 { order: 1; margin-bottom: 0; }
  .hero-grid .hero-eyebrow { order: 0; margin-bottom: 18px; }
  .hero-grid .cta-row { order: 2; margin-top: 28px; }
  .hero-shot { order: 3; margin-top: 36px; }
  .hero-grid .lede { order: 4; margin: 28px 0 0; }
  .hero-grid .lede + .lede { margin-top: 16px; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .wrap { padding: 0 24px; }
  .device { max-width: 258px; }
  .reel-card { max-width: 258px; }
}

/* ---------- Legal pages (terms / privacy / tokushoho) ---------- */

.legal { max-width: 720px; margin: 0 auto; padding: 72px 24px 96px; }
.legal h1 { font-size: 28px; margin-bottom: 8px; }
.legal h2 { font-size: 17px; margin: 36px 0 10px; }
.legal p, .legal li { font-size: 15px; line-height: 1.9; color: var(--ink-mid); }
.legal ul { padding-left: 22px; }
.legal .muted { color: #8a8a8e; font-size: 13.5px; }
.legal .back { display: inline-block; margin-bottom: 40px; font-size: 14px; }