/* Landing. An Apple-style product page: huge calm type, the live product, then one idea per tile. */
:root {
  --ground: #f5f5f7;
  --card: #ffffff;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #aeaeb2;
  --line: rgb(0 0 0 / 0.08);
  --fill: rgb(0 0 0 / 0.05);
  --up: #248a3d;
  --glass: rgb(245 245 247 / 0.76);
  --ease: cubic-bezier(0.25, 0.9, 0.3, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #000000;
    --card: #1c1c1e;
    --ink: #f5f5f7;
    --ink-2: #98989d;
    --ink-3: #636366;
    --line: rgb(255 255 255 / 0.1);
    --fill: rgb(255 255 255 / 0.09);
    --up: #30d158;
    --glass: rgb(0 0 0 / 0.72);
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; color: var(--ink); font: 17px/1.4 var(--font); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
main { overflow: clip; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid #2a78d6; outline-offset: 3px; }

.nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 clamp(20px, 4vw, 40px); background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); }
.logo { width: 24px; height: 24px; flex: none; margin-right: 4px; }
.mark { display: inline-flex; align-items: center; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.nav__right { display: flex; align-items: center; gap: 20px; font-size: 15px; }
@media (max-width: 560px) { .nav__extra { display: none; } }

.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; border-radius: 27px; background: var(--ink); color: var(--ground); font-size: 17px; font-weight: 600; white-space: nowrap; transition: transform 0.2s var(--ease), opacity 0.2s; }
.pill:hover { opacity: 0.86; }
.pill:active { transform: scale(0.97); }
.pill--small { min-height: 38px; padding: 0 16px; font-size: 14px; }
.pill--quiet { background: var(--fill); color: var(--ink); }
.pill--on-art { background: #1d1d1f; color: #fff; }
.link { font-size: 17px; font-weight: 500; padding: 14px 10px; }
.link::after { content: " ↓"; color: var(--ink-2); }

.hero { max-width: 980px; margin: 0 auto; padding: clamp(56px, 11vh, 120px) 24px clamp(36px, 6vh, 64px); text-align: center; }
h1 { font-size: clamp(50px, 9.4vw, 112px); line-height: 0.98; font-weight: 700; letter-spacing: -0.045em; margin: 0 0 22px; text-wrap: balance; }
.hero p { font-size: clamp(20px, 2.6vw, 28px); line-height: 1.22; letter-spacing: -0.02em; color: var(--ink-2); margin: 0 auto 32px; max-width: 24em; text-wrap: balance; }
.cta { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }

.stage { margin: 0 clamp(12px, 2vw, 24px); padding: clamp(14px, 5vw, 72px) clamp(10px, 5vw, 72px) clamp(20px, 3vw, 36px); border-radius: clamp(28px, 3vw, 44px); background: #dfeaf5 url("/img/art-hero.jpg") center / cover; display: flex; flex-direction: column; align-items: center; }
.window { width: min(960px, 100%); height: clamp(640px, 76vh, 760px); border-radius: clamp(20px, 2.2vw, 30px); background: #f5f5f7; overflow: hidden; box-shadow: 0 30px 80px rgb(30 40 70 / 0.22); }
.window iframe { display: block; width: 100%; height: 100%; border: 0; }
.stage__note { margin: 28px 0 0; font-size: 15px; color: #3a3a3f; }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin: clamp(12px, 1.4vw, 20px) clamp(12px, 2vw, 24px) 0; }
@media (max-width: 760px) { .tiles { grid-template-columns: 1fr; } }
.tile { background: var(--card); border-radius: clamp(28px, 3vw, 44px); padding: clamp(32px, 5vw, 64px); min-height: clamp(340px, 38vw, 480px); display: flex; flex-direction: column; justify-content: space-between; gap: 36px; min-width: 0; }
.tile--wide { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 6vw, 88px); }
@media (max-width: 760px) { .tile--wide { grid-template-columns: 1fr; } }
.tile h2 { font-size: clamp(36px, 5vw, 64px); line-height: 1.02; font-weight: 700; letter-spacing: -0.04em; margin: 0; text-wrap: balance; }
.tile p { margin: 14px 0 0; font-size: clamp(18px, 1.9vw, 22px); line-height: 1.26; letter-spacing: -0.015em; color: var(--ink-2); }

.moments { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.moments li { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 20px; background: var(--ground); font-size: 17px; }
.moments i { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--fill); display: grid; place-items: center; font-style: normal; font-size: 14px; font-weight: 600; }
.moments img { flex: none; width: 36px; height: 36px; border-radius: 50%; }
.moments b { flex: 1; font-weight: 500; }
.moments span { color: var(--ink-2); font-size: 15px; }

.moments i.idea { background: var(--ink); }
.moments i.idea::after { content: "+"; color: var(--ground); font-size: 18px; font-weight: 500; }
.makes { display: flex; flex-wrap: wrap; gap: 8px; }
.makes span { padding: 12px 18px; border-radius: 24px; background: var(--ground); font-size: clamp(17px, 1.8vw, 21px); font-weight: 500; letter-spacing: -0.015em; }
.said p { margin: 0; color: var(--ink); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.18; font-weight: 500; letter-spacing: -0.02em; }
.said .said__no { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 2px; font-size: clamp(17px, 1.6vw, 20px); font-weight: 400; margin-bottom: 18px; letter-spacing: -0.01em; }

.works b { display: block; font-size: clamp(96px, 13vw, 168px); line-height: 0.9; font-weight: 700; letter-spacing: -0.05em; color: var(--up); font-variant-numeric: tabular-nums; }
.works span { display: block; margin-top: 14px; font-size: clamp(20px, 2.2vw, 28px); font-weight: 500; letter-spacing: -0.02em; }

.press { display: flex; justify-content: flex-start; }
.tile .press + p { margin: 0; }
.press span { min-width: min(240px, 100%); padding: 18px 48px; border-radius: 40px; background: var(--ink); color: var(--ground); font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; text-align: center; box-shadow: 0 18px 44px rgb(0 0 0 / 0.16); }

.big { font-size: clamp(44px, 7vw, 88px); line-height: 1; font-weight: 700; letter-spacing: -0.045em; text-align: center; margin: 0 0 clamp(32px, 5vw, 56px); }
.plans { max-width: 880px; margin: 0 auto; padding: clamp(88px, 14vw, 168px) 20px 0; }
.plans__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .plans__grid { grid-template-columns: 1fr; } }
.plan { background: var(--card); border-radius: 32px; padding: 32px; display: flex; flex-direction: column; align-items: flex-start; }
.plan h3 { font-size: 17px; font-weight: 500; color: var(--ink-2); margin: 0 0 16px; }
.price { font-size: 64px; line-height: 1; font-weight: 700; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.price small { font-size: 17px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.plan p { flex: 1; margin: 14px 0 28px; font-size: 18px; line-height: 1.3; color: var(--ink-2); }
.plan .pill { width: 100%; }
.fine { text-align: center; font-size: 14px; color: var(--ink-2); margin: 20px 0 0; }

.faq { max-width: 720px; margin: 0 auto; padding: clamp(88px, 14vw, 168px) 20px; }
details { border-bottom: 0.5px solid var(--line); }
summary { padding: 22px 0; font-size: clamp(18px, 2vw, 21px); font-weight: 500; letter-spacing: -0.015em; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--ink-2); font-weight: 300; font-size: 24px; line-height: 1; transition: transform 0.25s var(--ease); }
details[open] summary::after { transform: rotate(45deg); }
details p { margin: -8px 0 22px; color: var(--ink-2); max-width: 36em; }

.closer { margin: 0 clamp(12px, 2vw, 24px); padding: clamp(80px, 14vw, 176px) 24px; border-radius: clamp(28px, 3vw, 44px); background: #fbdccb url("/img/art-close.jpg") center / cover; color: #1d1d1f; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.closer h2 { font-size: clamp(42px, 7.4vw, 96px); line-height: 1; font-weight: 700; letter-spacing: -0.045em; margin: 0; max-width: 11em; text-wrap: balance; }

.foot { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding: 32px clamp(20px, 4vw, 40px) 44px; font-size: 14px; color: var(--ink-2); }
.foot div { display: flex; flex-wrap: wrap; gap: 20px; }
.foot small { font-size: 13px; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } }

/* The story: one card that changes as you scroll, so there's always one place to look. */
.story { position: relative; margin: clamp(32px, 6vw, 72px) 0; }
.story__steps { display: none; }
.story__lines { list-style: none; margin: 0 auto; padding: 0 24px; max-width: 720px; display: grid; gap: 40px; }
.story__lines span { display: block; font-size: 17px; font-weight: 600; color: #1d67c4; margin-bottom: 8px; }
.story__lines h2 { font-size: clamp(38px, 5.4vw, 68px); line-height: 1.02; font-weight: 700; letter-spacing: -0.04em; margin: 0; text-wrap: balance; }
.story__lines p { margin: 14px 0 0; font-size: clamp(18px, 2vw, 23px); line-height: 1.25; letter-spacing: -0.015em; color: var(--ink-2); }
.story__dots, .scene { display: none; }

.story.live .story__steps { display: block; margin-top: calc(-100svh + 60px); pointer-events: none; }
.story.live .story__steps div { height: 85svh; }
.story.live .story__sticky { position: sticky; top: 60px; height: calc(100svh - 60px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 96px); max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.story.live .story__copy { position: relative; }
.story.live .story__lines { display: block; position: relative; height: clamp(250px, 28vw, 340px); padding: 0; max-width: none; }
.story.live .story__lines li { position: absolute; inset: 0; opacity: 0; transform: translateY(22px); transition: opacity 0.16s linear, transform 0.16s linear; pointer-events: none; }
.story.live .story__lines li.on { opacity: 1; transform: none; transition: opacity 0.4s var(--ease) 0.12s, transform 0.55s var(--ease) 0.12s; }
.story.live .story__lines li.past { transform: translateY(-22px); }
.story.live .story__dots { display: flex; gap: 8px; margin-top: 16px; }
.story__dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--fill); transition: width 0.4s var(--ease), background 0.3s; }
.story__dots i.on { width: 32px; background: var(--ink); }

.story.live .scene { display: block; position: relative; height: min(500px, calc(100svh - 110px)); border-radius: clamp(28px, 3vw, 40px); background: var(--card); box-shadow: 0 30px 80px rgb(0 0 0 / 0.08); overflow: hidden; }
.layer { position: absolute; inset: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px) 48px; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(26px) scale(0.98); transition: opacity 0.45s var(--ease), transform 0.65s var(--ease); pointer-events: none; }
[data-step="0"] .l-plan, [data-step="4"] .l-result, [data-step="1"] .l-thread, [data-step="2"] .l-thread, [data-step="3"] .l-thread { opacity: 1; transform: none; }
.story:not([data-step="0"]) .l-plan { transform: translateY(-26px) scale(0.98); }
.scene__note { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font-size: 13px; color: var(--ink-2); }

.alert { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 20px; background: var(--ink); color: var(--ground); margin-bottom: 18px; font-size: 16px; animation: drop 0.7s var(--ease) both; }
.alert svg { width: 22px; height: 22px; flex: none; }
.alert b { flex: 1; font-weight: 600; }
.alert small { opacity: 0.7; font-size: 13px; }
.scene .moments { font-size: 16px; }
.scene .moments li { font-size: 16px; padding: 14px; transition: background 0.4s, transform 0.5s var(--ease); }
.scene .moments li:first-child { outline: 2px solid #2a78d6; outline-offset: -2px; background: rgb(42 120 214 / 0.07); }
[data-step="0"] .scene .moments li { animation: rise 0.6s var(--ease) both; }
[data-step="0"] .scene .moments li:nth-child(1) { animation-delay: 0.15s; }
[data-step="0"] .scene .moments li:nth-child(2) { animation-delay: 0.27s; }
[data-step="0"] .scene .moments li:nth-child(3) { animation-delay: 0.39s; }

.post, .reply { display: flex; gap: 12px; font-size: clamp(16px, 1.75vw, 20px); line-height: 1.32; letter-spacing: -0.012em; }
.post img, .reply img { flex: none; width: 44px; height: 44px; border-radius: 50%; }
.post p, .reply p { margin: 2px 0 0; }
.post { position: relative; padding-bottom: 22px; }
.post::after { content: ""; position: absolute; left: 21px; top: 50px; bottom: 4px; width: 2px; background: var(--line); }
.post > div { padding: 10px 12px; margin: -10px -12px; border-radius: 14px; }
[data-step="1"] .post > div { background: rgb(42 120 214 / 0.07); }
.reply { opacity: 0; transform: translateY(14px); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); }
.reply > div { flex: 1; min-width: 0; }
.reply small { color: #1d67c4; font-size: 14px; }
[data-step="2"] .reply, [data-step="3"] .reply { opacity: 1; transform: none; }
.ainope { color: var(--ink-3); background: linear-gradient(currentColor, currentColor) 0 55% / 0 2px no-repeat; transition: background-size 0.5s var(--ease) 0.5s, opacity 0.3s 1.25s, max-height 0.35s 1.25s, margin 0.35s 1.25s; max-height: 90px; overflow: hidden; }
[data-step="2"] .ainope, [data-step="3"] .ainope { background-size: 100% 2px; opacity: 0; max-height: 0; margin: 0; }
.typed { min-height: 1.3em; }
.typed.typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: #2a78d6; animation: blink 0.9s steps(2) infinite; }
.postbtn { position: relative; display: inline-grid; margin-top: 14px; min-width: 96px; height: 42px; border-radius: 21px; background: var(--ink); color: var(--ground); font-weight: 600; font-size: 15px; place-items: center; opacity: 0; transform: translateY(10px); transition: opacity 0.35s, transform 0.45s var(--ease), background 0.3s; }
.postbtn span { grid-area: 1 / 1; padding: 0 22px; transition: opacity 0.2s; }
.postbtn span + span { opacity: 0; }
[data-step="3"] .postbtn { opacity: 1; transform: none; animation: press 0.45s var(--ease) 1.05s both; background: var(--ink); }
[data-step="3"] .postbtn span:first-child { opacity: 0; transition-delay: 1.2s; }
[data-step="3"] .postbtn span + span { opacity: 1; transition-delay: 1.25s; }
.tap { position: absolute; right: 18%; bottom: 8%; width: 36px; height: 36px; border-radius: 50%; background: rgb(42 120 214 / 0.32); border: 2px solid #2a78d6; opacity: 0; }
[data-step="3"] .tap { animation: tap 1.5s var(--ease) 0.3s both; }

.l-result svg { display: block; flex: none; width: 100%; height: 170px; color: var(--up); margin-bottom: 18px; overflow: visible; }
.l-result path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.1s; }
[data-step="4"] .l-result path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease) 0.2s; }
.ping { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 8px; border-radius: 18px; background: var(--ground); font-size: 15px; opacity: 0; transform: translateY(12px); }
.ping img { width: 36px; height: 36px; border-radius: 50%; }
.ping b { font-weight: 500; }
[data-step="4"] .ping { animation: rise 0.55s var(--ease) 0.9s both; }
[data-step="4"] .ping + .ping { animation-delay: 1.25s; }

@media (max-width: 760px) {
  .story.live .story__sticky { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: stretch; gap: 14px; padding-top: 16px; padding-bottom: 16px; }
  .story.live .story__lines { height: 148px; }
  .story.live .story__lines span { font-size: 15px; margin-bottom: 4px; }
  .story.live .story__lines h2 { font-size: 30px; }
  .story.live .story__lines p { font-size: 16px; margin-top: 6px; }
  .story.live .story__dots { margin-top: 6px; }
  .story.live .scene { height: auto; min-height: 0; }
}

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-20px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes press { 0% { transform: scale(1); } 45% { transform: scale(0.92); } 100% { transform: scale(1); } }
@keyframes tap { 0% { opacity: 0; transform: translate(70px, 90px) scale(1.2); } 40% { opacity: 1; } 65% { opacity: 1; transform: none; } 75% { transform: scale(0.7); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes nudge { 0%, 88%, 100% { transform: scale(1); } 93% { transform: scale(0.94); } }
@keyframes pop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }
  .hero h1 { animation: rise 0.8s var(--ease) both; }
  .hero p { animation: rise 0.8s var(--ease) 0.12s both; }
  .hero .cta { animation: rise 0.8s var(--ease) 0.24s both; }
  .link::after { display: inline-block; animation: bob 1.8s ease-in-out infinite; }
  .tile.reveal .moments li, .tile.reveal .makes span { opacity: 0; }
  .tile.seen .moments li { animation: rise 0.6s var(--ease) both; }
  .tile.seen .moments li:nth-child(2) { animation-delay: 0.14s; }
  .tile.seen .moments li:nth-child(3) { animation-delay: 0.28s; }
  .tile.seen .makes span { animation: pop 0.5s var(--ease) both; }
  .tile.seen .makes span:nth-child(2) { animation-delay: 0.1s; }
  .tile.seen .makes span:nth-child(3) { animation-delay: 0.2s; }
  .tile.seen .makes span:nth-child(4) { animation-delay: 0.3s; }
  .tile.seen .press span { animation: nudge 3.4s var(--ease) 0.8s infinite; display: inline-block; }
  .said .said__no { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 55% / 0 2px no-repeat; display: inline; }
  .tile.seen .said__no { background-size: 100% 2px; transition: background-size 0.9s var(--ease) 0.5s; }
  details::details-content { height: 0; overflow: clip; transition: height 0.3s var(--ease), content-visibility 0.3s allow-discrete; interpolate-size: allow-keywords; }
  details[open]::details-content { height: auto; }
}
@keyframes bob { 50% { transform: translateY(3px); } }
@media (prefers-color-scheme: dark) { .story__lines span, .reply small { color: #6cb0f5; } }