/* Homepage-only hero, adapted from Drypals. Keep site.css and other pages independent. */
.home-refresh { --bg: #fff; }
.site-header.home-header { position: sticky; top: 12px; z-index: 1; width: min(100% - 48px, 1080px); margin: 20px auto 0; background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border: 2px solid transparent; border-radius: 32px; corner-shape: squircle; border-image: url('/images/home-hero/header-frame.svg') 32 fill / 32px / 0 stretch; }
.home-refresh main section[id] { scroll-margin-top: 112px; }
/* Match the existing 30px emoji line box with the native app artwork. */
.home-refresh #features .feature-icon { display: inline-block; width: 36px; height: 36px; vertical-align: -6px; object-fit: contain; }
.home-refresh #features .feature-icon-health { filter: drop-shadow(0 1px 2px rgb(0 0 0 / .16)); }
.home-header:has(.lang-dropdown[open]) { z-index: 20; }
.home-header .bar { max-width: none; height: auto; padding: 14px 20px; }
.home-header .logo { transform: translateY(2px); }
.home-header .logo img { display: block; width: 140px; height: auto; }
.home-header .site-nav { font-family: 'Playpen Sans', system-ui, sans-serif; font-weight: 500; }
.home-header .home-app-link { display: block; border-radius: 11px; }
.home-header .home-app-link img { display: block; width: 44px; height: 44px; border-radius: 11px; }
.home-header :focus-visible { outline: 3px solid #20332c; outline-offset: 5px; }
.home-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; align-content: center; gap: 64px; width: min(100% - 48px, 1080px); min-height: min(820px, calc(100svh - 96px)); margin-inline: auto; padding: 32px 0 64px; color: #20332c; }
.home-hero .hero-copy { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; padding-block: 24px; }
.home-hero h1 { margin: 0; color: #174258; font-family: 'Playpen Sans', system-ui, sans-serif; font-size: clamp(38px, 5vw, 68px); font-weight: 800; line-height: 1.2; text-transform: lowercase; }
.home-hero .title-word, .home-hero .every-day { white-space: nowrap; }
.home-hero .title-word { display: inline-block; }
.home-hero [data-title-letter] { display: inline-block; letter-spacing: -.065em; margin-right: var(--letter-space, 0em); transform: translateY(var(--letter-lift, 0em)) rotate(var(--letter-tilt, 0deg)) scale(var(--letter-scale, 1)); transform-origin: 50% 70%; }
.home-hero .every-day { display: inline-block; isolation: isolate; }
/* Translations may need an extra line; keep individual words together. */
html:not([lang="en"]) .home-hero .every-day { white-space: normal; }
html:is([lang="ja"], [lang="ko"]) .home-hero h1 { line-height: 1.45; }
html:is([lang="ja"], [lang="ko"]) .home-hero [data-title-letter] { letter-spacing: -.025em; }
html[lang="ko"] .home-hero .intro { word-break: keep-all; }
/* Keep the paint box wider than the glyph; tighten with margins so the
background clip cannot cut off overhanging strokes or descenders. */
.home-hero [data-title-accent] { letter-spacing: 0; padding: .14em; margin: -.14em calc(-.24em + var(--letter-space, 0em)) -.14em -.14em; mix-blend-mode: multiply; }
.home-hero [data-ink="orange"] { --grain-ink: #ff4000; --grain-base: #ff4a38; }
.home-hero [data-ink="mint"] { --grain-ink: #16bc7b; --grain-base: #5c8163; }
.home-hero [data-ink="purple"] { --grain-ink: #624cff; --grain-base: #376bff; }
.home-hero [data-ink="yellow"] { --grain-ink: #ff9900; --grain-base: #ff7652; }
/* Screen colored ink over a corrected base: white paper keeps the palette,
while the texture's black speckles become saturated ink, never gray. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
.home-hero [data-title-accent] {
background-color: #fff;
background-image: linear-gradient(var(--grain-ink), var(--grain-ink)), url('/images/home-hero/headline-noise.webp'), linear-gradient(var(--grain-base), var(--grain-base));
background-blend-mode: screen, multiply, normal;
background-size: auto, 3em 3em, auto;
background-position: 0 0, var(--grain-position, 50% 0%), 0 0;
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.home-hero [data-title-accent]:nth-child(2) { --grain-position: 15% 70%; }
.home-hero [data-title-accent]:nth-child(3) { --grain-position: 55% 100%; }
.home-hero [data-title-accent]:nth-child(4) { --grain-position: 85% 35%; }
.home-hero [data-title-accent]:nth-child(5) { --grain-position: 50% 40%; }
}
@media (forced-colors: active) { .home-hero [data-title-accent] { background: none; -webkit-text-fill-color: currentColor; mix-blend-mode: normal; } }
.home-hero .intro { max-width: 390px; margin: 24px 0 28px; font-family: 'Playpen Sans', system-ui, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.65; color: #59665d; }
.home-hero .download-badges { display: flex; align-items: center; gap: 14px; width: min(100%, 411px); }
.home-hero .download-badges a { display: block; min-width: 0; border-radius: 12px; }
/* Proportional widths preserve both official SVGs at the same height. */
.home-hero .install { flex: 119.66407; }
.home-hero .health-badge { flex: 144.34031; }
.home-hero .download-badges img { display: block; width: 100%; height: auto; }
.home-hero a:focus-visible, .home-hero button:focus-visible, .home-hero summary:focus-visible { outline: 3px solid #20332c; outline-offset: 5px; }
.home-hero .social-proof { display: flex; width: min(100%, 344px); gap: 24px; margin-top: auto; padding-top: 28px; color: #262626; }
.home-hero .stat { position: relative; flex: 1; min-width: 0; padding: 0 28px; text-align: center; }
.home-hero .stat::before, .home-hero .stat::after { content: ''; position: absolute; top: 50%; width: 30px; height: 60px; transform: translateY(-50%); background-position: center; background-size: contain; background-repeat: no-repeat; }
.home-hero .stat::before { left: 0; background-image: url('/images/home-hero/laurel-leading.svg'); }
.home-hero .stat::after { right: 0; background-image: url('/images/home-hero/laurel-trailing.svg'); }
.home-hero .stat p { margin: 0; }
.home-hero .stat strong { display: block; margin-bottom: 0; font-family: 'Lilita One', system-ui, sans-serif; font-size: 34px; font-weight: 400; line-height: 1; }
.home-hero .stat span { display: block; font-family: 'Playpen Sans', system-ui, sans-serif; font-size: 13px; font-weight: 800; line-height: 1.25; }
.home-hero .hero-visual { position: relative; min-width: 0; }
.home-hero .year-calendar { width: calc(100% - 40px); max-width: 460px; margin: 0 auto; padding-block: 16px; }
.home-hero .recap-sheet { border: 1px solid #0000000a; border-radius: 2px; background: #fff; transform: rotateZ(-2deg) scale(.96); box-shadow: 0 8px 24px #00000012; }
.home-hero .recap-sheet img { display: block; width: 100%; height: auto; border-radius: inherit; }
.home-hero .phone-preview { position: absolute; right: 22px; bottom: -18px; width: min(calc(43% - 17.2px), 197.8px); padding: clamp(4px, .5vw, 6px); border: 2px solid #535357; border-radius: 16% / 7.5%; background: #111114; transform: rotate(6deg); transform-origin: top right; box-shadow: 0 20px 36px #00000026, 0 4px 10px #00000018, inset 0 0 0 1px #000; }
.home-hero .phone-preview img { display: block; width: 100%; height: auto; border-radius: 13% / 6%; }
.home-hero .phone-preview::before { content: ''; position: absolute; z-index: 1; top: 3%; left: 50%; width: 26%; height: 3.2%; border-radius: 999px; background: #111114; transform: translateX(-50%); }
.home-hero .phone-preview::after { content: ''; position: absolute; bottom: 2.6%; left: 50%; width: 30%; height: 3px; border-radius: 999px; background: #111114; transform: translateX(-50%); }
.home-hero [hidden] { display: none !important; }
.home-balloons { position: fixed; z-index: 10; inset: 0; overflow: hidden; pointer-events: none; }
.home-balloons .balloon { position: absolute; display: block; max-width: none; pointer-events: auto; cursor: crosshair; user-select: none; touch-action: manipulation; }
.home-balloons .balloon-confetti { position: absolute; border-radius: 50%; pointer-events: none; }
@media (min-width: 801px) {
  .home-hero .hero-copy { padding-block: clamp(0px, calc((100svh - 700px) * .12), 24px); }
  .home-hero h1 { font-size: clamp(38px, min(5vw, 7.2svh), 68px); }
  .home-hero .intro { margin-block: clamp(16px, 2.5svh, 24px) clamp(20px, 3svh, 28px); font-size: clamp(16px, 2.4svh, 18px); }
  .home-hero .year-calendar { max-width: clamp(280px, calc((100svh - 270px) * .7115), 460px); }
  .home-hero .phone-preview { width: min(calc(43% - 17.2px), clamp(120.4px, calc((100svh - 270px) * .305945), 197.8px)); }
}
@media (max-width: 800px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 44px; padding: 32px 0 72px; }
  .home-hero .hero-copy { align-items: center; align-self: auto; padding-block: 0; text-align: center; }
  .home-hero .social-proof { margin-top: 28px; padding-top: 0; }
  .home-hero h1 { font-size: clamp(38px, 8vw, 60px); }
  .home-hero .year-calendar { width: 100%; }
  .home-hero .recap-sheet { transform: rotateZ(-1.5deg) scale(.94); }
  .home-hero .phone-preview { width: min(43%, 197.8px); bottom: -14px; }
}
@media (max-width: 420px) {
  .home-header .bar { padding: 12px; gap: 12px; }
  .home-header .logo img { width: 116px; }
  .home-header .site-nav { gap: 10px; }
  .home-header .home-app-link img { width: 36px; height: 36px; }
  .home-hero .download-badges { gap: 8px; }
  .home-hero .stat span { font-size: clamp(10px, 3vw, 13px); }
}