/* Homepage only — pulls the landing page toward the web app's look: soft pastel wash,
   white rounded sheets, round tinted quick actions, and the app one tap away everywhere. */

/* The wash sits on its own fixed, composited layer: a fixed background-attachment would repaint the whole screen every scroll frame. */
.home { background: var(--cream); }
.home::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--wash); transform: translateZ(0); }
.home .paper, .home .dark { background: transparent; }

/* ---------- hero ---------- */
.hx { padding: 128px 0 40px; background: none; overflow: hidden; isolation: isolate; }
.hx-blobs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Soft glows drawn as gradients (no blur filter) and moved with transform only, so they stay on the GPU. */
.hx-blobs i { position: absolute; border-radius: 50%; opacity: .6; will-change: transform; animation: hx-drift 18s ease-in-out infinite alternate; }
.hx-blobs i:nth-child(1) { width: 520px; height: 520px; left: -140px; top: -120px; background: radial-gradient(closest-side, #CDEBD7, rgba(205,235,215,0)); }
.hx-blobs i:nth-child(2) { width: 460px; height: 460px; right: 4%; top: 6%; background: radial-gradient(closest-side, #F7CCD4, rgba(247,204,212,0)); animation-delay: -6s; }
.hx-blobs i:nth-child(3) { width: 520px; height: 520px; right: 30%; bottom: -260px; background: radial-gradient(closest-side, #F6E3A8, rgba(246,227,168,0)); animation-delay: -12s; }
@keyframes hx-drift { to { transform: translate(60px, 40px) scale(1.12); } }

.hx-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hx h1 { font-size: clamp(54px, 7vw, 108px); }
.hx .lede { margin-top: 22px; font-size: clamp(17px, 1.5vw, 20px); }
.hx .hero-note { margin-top: 18px; }
.hx .hero-copy-wrap { will-change: transform, opacity; }
.launcher { position: relative; z-index: 2; }
.hx-peek { display: inline-block; margin-top: 14px; font-size: 14.5px; color: var(--muted); }

/* the launcher card: a slice of the app */
.launcher { margin-top: 28px; padding: 16px; border-radius: 30px; background: rgba(255,255,255,.86);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(13,14,18,.06), 0 24px 60px rgba(13,14,18,.10); max-width: 600px; }
.lx-search { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 6px 0 18px; border-radius: 999px; background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s; }
.lx-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink); }
.lx-search > svg { width: 19px; height: 19px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; }
.lx-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font: inherit; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.lx-search input::placeholder { color: var(--muted-light); font-weight: 500; }
.lx-search input::-webkit-search-cancel-button { display: none; }
.lx-go { width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; background: var(--ink); display: grid; place-items: center; transition: transform .25s var(--spring); }
.lx-go:hover { transform: scale(1.06); }
.lx-go svg { width: 18px; height: 18px; fill: none; stroke: var(--cream); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.lx-quick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 16px 0 14px; }
.lx-quick a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 2px; border-radius: 18px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); text-align: center; line-height: 1.2; transition: background .2s; }
.lx-quick a:hover { background: rgba(255,255,255,.8); }
.lx-ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(13,14,18,.05); transition: transform .3s var(--spring); }
.lx-quick a:hover .lx-ico { transform: translateY(-3px) scale(1.06); }
.lx-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lx-ico svg .f { fill: var(--ink); stroke: none; }
.tint-sky { background: var(--sky); } .tint-butter { background: var(--butter); } .tint-sage { background: var(--sage); }

.lx-actions { display: grid; grid-template-columns: 1.15fr 1fr; gap: 8px; }
.lx-actions .btn { height: 58px; padding: 0 18px; font-size: 16px; }
.btn-ghost-soft { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost-soft:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* hero visual: the reel with app cards floating off it */
.hx-visual { height: clamp(560px, 78vh, 760px); }
.hx-card { position: absolute; z-index: 6; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 24px;
  background: #fff; will-change: transform;
  box-shadow: 0 0 0 1px rgba(13,14,18,.05), 0 24px 50px rgba(13,14,18,.16); animation: bob 7s ease-in-out infinite; }
.hx-card small { font-size: 12px; font-weight: 700; color: var(--muted); }
.hx-card b { font-size: 21px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.hx-card-a { left: -6%; top: 16%; max-width: 290px; }
.hx-card-b { right: -4%; bottom: 12%; width: 230px; animation-delay: -3.5s; }
.hx-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.hx-pills span { font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 999px; }
.hx-mini-eyebrow { display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px !important; font-weight: 800 !important; }
.hx-mini-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.hx-seg { display: inline-flex; align-self: flex-start; padding: 3px; border-radius: 999px; background: var(--cream); }
.hx-seg i { font-style: normal; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; color: var(--muted); }
.hx-seg i.on { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); }
.hx-btn { display: block; text-align: center; padding: 11px 12px; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 13px; font-weight: 700; }

@media (max-width: 1100px) { .hx-card-a { left: -2%; } .hx-card-b { right: -2%; } }
@media (max-width: 980px) {
  .hx { padding-top: 104px; }
  .hx-grid { grid-template-columns: 1fr; }
  .launcher { max-width: none; }
  .hx-visual { height: clamp(500px, 74vh, 640px); margin-top: 16px; }
  .hx-card-a { left: 0; top: 8%; }
  .hx-card-b { right: 0; bottom: 8%; }
}
@media (max-width: 560px) {
  .launcher { padding: 12px; border-radius: 26px; margin-left: -4px; margin-right: -4px; }
  .lx-quick { grid-template-columns: repeat(3, 1fr); row-gap: 10px; }
  .lx-ico { width: 52px; height: 52px; }
  .lx-actions { grid-template-columns: 1fr; }
  .hx-peek { display: none; }
  .hx-card { padding: 12px 14px; border-radius: 20px; }
  .hx-card b { font-size: 17px; }
  .hx-card-a { max-width: 230px; top: 5%; left: -2px; }
  .hx-card-a .hx-pills { display: none; }
  .hx-card-b { display: none; }
}

/* ---------- showcase: the device itself is a door ---------- */
.home .device-browser { display: block; position: relative; transition: transform .5s var(--ease), box-shadow .5s; }
.home .device-browser:hover { transform: translateY(-6px); box-shadow: 0 50px 110px rgba(20,22,21,.2), 0 0 0 1px var(--line); }
.device-open { position: absolute; left: 50%; bottom: 22px; transform: translate(-50%, 10px); padding: 12px 20px; border-radius: 999px; background: var(--ink); color: var(--cream);
  font-weight: 800; font-size: 14.5px; opacity: 0; transition: opacity .3s, transform .4s var(--ease); box-shadow: var(--shadow-md); white-space: nowrap; }
.device-browser:hover .device-open, .device-browser:focus-visible .device-open { opacity: 1; transform: translate(-50%, 0); }
.home .screen { display: block; color: inherit; }
.home .screen figcaption em { display: inline-block; margin-top: 8px; font-style: normal; font-weight: 800; font-size: 13.5px; padding: 6px 12px; border-radius: 999px; background: var(--white); box-shadow: var(--shadow-sm); transition: background .2s, color .2s; }
.home .screen:hover figcaption em { background: var(--ink); color: var(--cream); }
@media (hover: none) { .device-open { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- sheets: white app panels on the wash ---------- */
.sheet { padding: clamp(28px, 4.5vw, 64px); border-radius: clamp(28px, 3vw, 40px); background: rgba(255,255,255,.82);
  box-shadow: 0 0 0 1px rgba(13,14,18,.05), 0 30px 80px rgba(13,14,18,.07); }
.sheet-wash { background: var(--wash), rgba(255,255,255,.86); }
.examples .list-head { align-items: flex-end; }
.examples .ex-grid { margin-top: 6px; }
.home .ex-card { border-radius: 26px; }
.section-sheet { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); }
.together.sheet { display: grid; }
@media (max-width: 560px) {
  .sheet { padding: 24px 18px; border-radius: 28px; margin-left: -6px; margin-right: -6px; }
}

/* ---------- difference + vs ---------- */
.home .vs-grid { margin-top: clamp(50px, 7vw, 90px); }
.home .vs-card { border-radius: 28px; box-shadow: inset 0 0 0 1px rgba(13,14,18,.04); padding: 28px; }
.home .vs-card .vs-not { color: var(--ink-3); opacity: .7; }
.home .vs-card p:last-child { color: var(--ink-3); }

/* ---------- small polish ---------- */
.home .how-steps li { border-radius: 26px; }
.home .map-card { border-radius: 32px; }
.home .map-hint { border-radius: 26px; }
.home .chip { box-shadow: var(--shadow-sm); border-color: transparent; }
.home .chip.is-on { border-color: var(--ink); }
.home .marquee { border-color: rgba(13,14,18,.06); background: rgba(255,255,255,.4); }
.home #plus .price-grid { margin-top: 34px; }
.home #plus .price-card:not(.is-plus) { box-shadow: 0 0 0 1px var(--line); }

/* ---------- final ---------- */
.home .final { padding-bottom: clamp(60px, 8vw, 110px); }
.final-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; margin-top: clamp(40px, 6vw, 70px); text-align: left; }
.home .app-band { grid-template-columns: auto 1fr; grid-template-areas: "tile copy" "tile actions"; column-gap: 26px; row-gap: 22px; align-items: start; border-radius: 34px;
  padding: clamp(28px, 4vw, 44px); background: var(--wash), var(--white); box-shadow: 0 0 0 1px rgba(13,14,18,.05), var(--shadow-md); }
.home .app-band > div:nth-child(2) { grid-area: copy; }
.home .app-band-actions { grid-area: actions; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 18px; }
.home .app-band .lede { margin-top: 10px; font-size: 16.5px; }
.app-tile { grid-area: tile; width: 78px; height: 78px; border-radius: 22px; overflow: hidden; background: var(--cream); display: grid; place-items: center; box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(13,14,18,.05); }
.app-tile img { width: 66px; height: 66px; }
@media (max-width: 560px) { .app-tile img { width: 54px; height: 54px; } }
.home .pocket { grid-template-columns: 1fr; align-content: space-between; gap: 22px; border: 0; border-radius: 34px; padding: clamp(28px, 4vw, 44px); background: rgba(255,255,255,.7); box-shadow: 0 0 0 1px rgba(13,14,18,.05); }
.home .pocket .waitlist { width: 100%; max-width: none; margin-bottom: 26px; box-shadow: 0 0 0 1px var(--line); }
.home .pocket .waitlist-msg { text-align: left; padding-left: 8px; }
@media (max-width: 900px) {
  .final-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .home .app-band { grid-template-columns: 1fr; grid-template-areas: "tile" "copy" "actions"; }
  .app-tile { width: 64px; height: 64px; border-radius: 18px; }
  .home .app-band-actions .btn { width: 100%; }
}

/* ---------- mobile dock: a small "Open Rove" pill, one tap from anywhere ----------
   Sized to Apple's 44pt minimum (48px here), only as wide as its label, clear of the home indicator,
   and it slips away while scrolling down (as Safari's own toolbar does) so the two never stack up. */
.app-dock { display: none; }
@media (max-width: 760px) {
  .app-dock { position: fixed; z-index: 70; left: 50%; bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 8px));
    display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 18px 0 6px; border-radius: 999px;
    background: var(--ink); color: var(--cream); box-shadow: 0 10px 28px rgba(13,14,18,.28);
    transform: translate(-50%, calc(100% + 30px)); transition: transform .45s var(--ease);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .app-dock.is-on { transform: translate(-50%, 0); }
  .app-dock:active { transform: translate(-50%, 0) scale(.96); }
  .app-dock-ico { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--cream); display: grid; place-items: center; }
  .app-dock-ico img { width: 30px; height: 30px; }
  .app-dock-btn { font-weight: 800; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
  .home .footer { padding-bottom: 90px; }
}
@media (max-width: 760px), (prefers-reduced-motion: reduce) { .hx-blobs i, .hx-card { animation: none; will-change: auto; } }
/* Phones: the reveal animations slide in without the blur, which is costly to repaint on mobile GPUs. */
@media (max-width: 760px) {
  .home .reveal, .home .stagger:not(.stagger-done) > *, .home .hero-visual { filter: none !important; }
}