@font-face {
  font-family: 'Limely Round';
  src: url('/fonts/round-9cd742348e.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Limely Round';
  src: url('/fonts/round-bold-09f20194c2.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

/*
 * Limely's homepage. Bright and soft: the app's green-white page, pastel
 * grounds taken from the app's feature tiles, and one rounded typeface. The
 * one bold thing is the hero's blocks — the features fitted around the
 * calendar — which drop into place once when the page opens.
 */
:root {
  --paper: #fbfdf7;
  --ink: #24321c;
  --muted: #5d6956;
  --lime: #5f8f2e;
  --lime-deep: #4a7322;
  --line: #e2e9d6;
  --band-lime: #eef7df;
  --band-peach: #fff1ea;
  --sky: #cfe4f8;
  --leaf: #d5ecb2;
  --rose: #f8d2e1;
  --peach: #ffdacb;
  --lavender: #e4dbfa;
  /* Served by the site itself (site/fonts, cut down at build): one rounded family, regular and extra bold. */
  --font: 'Limely Round', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', system-ui, sans-serif;
  --bold: 800;
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.85;
  font-synthesis: none;
}

/* Headings and labels: the same rounded family, extra bold. */
h1,
h2,
h3,
dt,
.brand,
.button,
.pill,
.text-link,
.cal-head,
.stores li {
  font-weight: var(--bold);
}

body:lang(en) {
  line-height: 1.65;
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: 0.02em;
}

h1 {
  font-size: clamp(2.1rem, 8.8vw, 3.4rem);
  line-height: 1.3;
}

h1:lang(en) {
  font-size: clamp(2rem, 7.4vw, 2.75rem);
  line-height: 1.2;
  letter-spacing: 0;
}

h1 .line {
  display: block;
}

/* A phrase of a Japanese heading: lines break between phrases, not inside them. */
.ph {
  display: inline-block;
}

h2 {
  font-size: clamp(1.5rem, 5vw, 2.05rem);
  line-height: 1.45;
  margin-bottom: 0.6em;
}

h3 {
  font-size: 1.0625rem;
  line-height: 1.5;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--lime-deep);
}

a:focus-visible,
.button:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
  border-radius: 8px;
}

img {
  max-width: 100%;
}

.lead {
  font-size: 1.0625rem;
  color: var(--muted);
  max-width: 34em;
}

/* Header and footer */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1080px;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 20px 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
}

.lang {
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

.foot {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 20px max(32px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--muted);
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-bottom: 12px;
}

.foot a {
  color: var(--muted);
}

/* Hero */

.hero {
  display: grid;
  gap: 40px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 20px 72px;
}

.hero .lead {
  margin-top: 1.1em;
}

.soon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 0.9375rem;
  color: var(--muted);
}

.pill {
  display: inline-block;
  padding: 2px 14px;
  border-radius: 999px;
  background: var(--leaf);
  color: var(--lime-deep);
  font-size: 0.875rem;
}

.button {
  display: inline-block;
  margin-top: 8px;
  padding: 13px 28px;
  border-radius: 999px;
  background: var(--lime);
  color: #fff;
  text-decoration: none;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.14);
}

.button:hover {
  background: var(--lime-deep);
}

/* The blocks: the calendar three tiles wide and tall, the features around it. */
.blocks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.cal {
  grid-column: 1 / 4;
  grid-row: 1 / 4;
  display: flex;
  flex-direction: column;
  padding: 7% 7% 6%;
  border-radius: 26px;
  background: #fff;
  box-shadow: inset 0 -5px 0 #e7eedc, 0 18px 40px -22px rgba(74, 115, 34, 0.45);
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: clamp(0.85rem, 3.4vw, 1.05rem);
}

.cal-week,
.cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-week {
  margin: 6px 0 4px;
  font-size: clamp(0.5rem, 2vw, 0.65rem);
  color: var(--muted);
  text-align: center;
}

.cal-days {
  flex: 1;
  grid-auto-rows: 1fr;
}

.day {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px;
  border-radius: 6px;
  font-size: clamp(0.45rem, 1.8vw, 0.6rem);
  line-height: 1.2;
  color: var(--muted);
}

.day i {
  font-style: normal;
}

.day.today {
  background: var(--band-lime);
}

.day.today i {
  color: var(--lime-deep);
}

.day b {
  display: block;
  height: 4px;
  border-radius: 2px;
}

.day b.sky { background: #8dbde9; }
.day b.lime { background: #a8d36e; }
.day b.rose { background: #e891b4; }
.day b.peach { background: #f5a98b; }
.day b.lavender { background: #b4a2ec; }

.piece {
  aspect-ratio: 1;
}

.cal { --i: 0; }
.p-memos { grid-column: 4; grid-row: 1; --i: 1; --r: -8deg; }
.p-bell { grid-column: 4; grid-row: 2; --i: 2; --r: 7deg; }
.p-home { grid-column: 4; grid-row: 3; --i: 3; --r: -5deg; }
.p-add { grid-column: 1; grid-row: 4; --i: 4; }

/* A feature tile, as in the app, on a pastel ground: a toy block with its shaded lower edge. */
.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 28%;
  background: var(--ground);
  box-shadow: inset 0 -4px 0 rgba(36, 50, 28, 0.07);
}

.tile svg {
  width: 46%;
  height: 46%;
  fill: none;
  stroke: var(--ink-tile);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tile.mini {
  width: 26px;
  border-radius: 8px;
  box-shadow: none;
}

.tile.add {
  background: transparent;
  border: 2px dashed #b9d49a;
  box-shadow: none;
}

.tile.add svg {
  stroke: var(--lime);
}

@media (prefers-reduced-motion: no-preference) {
  .block {
    animation: drop 0.62s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
    animation-delay: calc(var(--i) * 110ms + 200ms);
  }

  @keyframes drop {
    from {
      opacity: 0;
      transform: translateY(-30px) rotate(var(--r, 0deg));
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* Bands */

.band {
  padding: 72px 20px;
}

.band > h2,
.band > p,
.band > .split,
.band > .combos,
.band > .trust,
.band > .stores {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

.band-paper { background: var(--paper); }
.band-lime { background: var(--band-lime); }
.band-peach { background: var(--band-peach); }

.split {
  display: grid;
  gap: 44px;
  align-items: center;
}

.phone {
  width: min(78%, 300px);
  margin: 0 auto;
  padding: 9px;
  border-radius: 38px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 26px 50px -26px rgba(74, 115, 34, 0.5);
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 30px;
}

.points {
  display: grid;
  gap: 18px;
  margin: 28px 0 0;
}

.points div {
  padding-left: 16px;
  border-left: 4px solid var(--leaf);
}

.points dt {
  font-size: 1.0625rem;
}

.points dd {
  margin: 2px 0 0;
  color: var(--muted);
}

.features {
  display: grid;
  gap: 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.features li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  align-items: start;
}

.features p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Features still to come: their tiles not yet set in place (dashed, as the hero's ＋). */
.soon-label {
  margin: 36px 0 0;
}

.features.coming {
  margin-top: 18px;
}

.features.coming h3 {
  color: var(--muted);
}

.features.coming .tile {
  background: transparent;
  border: 2px dashed color-mix(in srgb, var(--ink-tile) 45%, transparent);
  box-shadow: none;
}

/* The combinations: each a menu bar of its tiles. */
.combos {
  display: grid;
  gap: 32px;
  margin-top: 32px;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), inset 0 -3px 0 #edf2e5;
}

.bar .tile {
  width: 44px;
}

.plus {
  color: #9fb38a;
  font-weight: var(--bold);
}

.combos p {
  margin: 4px 0 0;
  color: var(--muted);
}


.trust {
  display: grid;
  gap: 22px;
  margin-top: 24px;
  margin-bottom: 28px;
}

.trust dt {
  font-size: 1.0625rem;
}

.trust dd {
  margin: 2px 0 0;
  color: var(--muted);
}

.text-link {
  text-underline-offset: 4px;
}

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  margin-bottom: 28px;
  padding: 0;
  list-style: none;
}

.stores li {
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
  border-radius: 16px;
  border: 1.5px dashed #c3d6ad;
  background: #fff;
  line-height: 1.4;
}

.stores small {
  font-family: var(--font);
  color: var(--muted);
}

/* Privacy policy, terms, support and the guide */

.doc {
  max-width: 700px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

.doc h1 {
  font-size: clamp(1.75rem, 6vw, 2.3rem);
  margin-bottom: 0.4em;
}

.doc h2 {
  font-size: 1.15rem;
  margin: 2em 0 0.6em;
}

.doc h3 {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 1.2em 0 0.5em;
}

.doc .meta {
  color: var(--muted);
  font-size: 0.875rem;
}

.doc ul {
  padding-left: 1.3em;
}

.doc li {
  margin-bottom: 0.5em;
}

.faq {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}

.faq div {
  padding: 14px 18px;
}

.faq div + div {
  border-top: 1px solid var(--line);
}



.faq dd {
  margin: 4px 0 0;
  color: var(--muted);
}

.strong {
  font-size: 1.125rem;
}

/* Wider screens: the hero and the bands side by side. */
@media (min-width: 880px) {
  .hero {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    padding-top: 56px;
    padding-bottom: 104px;
  }

  .band {
    padding: 104px 32px;
  }

  .split {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 72px;
  }

  .split.reverse > :first-child {
    order: 2;
  }

  .combos {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }

  .trust {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}

.t-calendar { --ground: #ffded5; --ink-tile: #e0664f; }
.t-memos { --ground: #d4eef1; --ink-tile: #1a8f9c; }
.t-health { --ground: #fbdbe6; --ink-tile: #d4517a; }
.t-notifications { --ground: #e9e1fa; --ink-tile: #8b6cc9; }
.t-home { --ground: #d6f0e2; --ink-tile: #3f9a6b; }
.t-balance { --ground: #d9e8f7; --ink-tile: #3b82c4; }
.t-budget { --ground: #fdeccb; --ink-tile: #c98a10; }