/* Home follows design-system-v0.2; other page layouts retain their stage-one shell. */
.phone[data-screen="now"] {
  background: var(--paper);
  height: var(--preview-height);
}
.home-preview:not(.show-review) .mobile-review[open] .review-sidebar { display: block; }
.home-preview .phone[data-screen="now"] .topbar { padding: 0 18px; }
.phone[data-screen="now"] .home-manage { color: var(--accent); }
.phone[data-screen="now"] .home-manage .icon { width: 22px; height: 22px; }
.phone[data-screen="now"] .page-scroll { container-type: size; }
.phone[data-screen="now"] .home-page {
  --orb-size: 264px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
  padding: 0 0 14px !important;
  position: relative;
}
.home-page .greeting { padding: 37px 20px 0; text-align: center; }
.home-page .greeting h1 { font-family: var(--font-body); font-size: var(--text-display); line-height: var(--leading-display); font-weight: var(--weight-semibold); letter-spacing: 0; }
.home-page .greeting p { font-size: var(--text-md); line-height: var(--leading-lg); margin-top: 10px; }
.home-space-stage { position: relative; width: 100%; height: calc(var(--orb-size) + 154px); flex-shrink: 0; margin-top: 50px; overflow: hidden; isolation: isolate; }
.home-page .space-carousel { --orb-size: inherit; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; overflow: hidden; touch-action: pan-y; outline-offset: -4px; }
.home-page .space-orb {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--orb-size);
  height: var(--orb-size);
  padding: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 8px 26px rgba(78,45,31,.035);
  transition: none;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
  touch-action: pan-y;
}
.home-page .space-orb[aria-hidden="true"] { pointer-events: none; }
.home-page .space-orb .home-space-art { width: var(--home-art-width, 72%); height: var(--home-art-height, 76%); flex: none; }
.home-page .space-orb img { pointer-events: none; }
.home-page .space-orb.is-create { background: var(--accent-light); box-shadow: none; }
.home-create-outline { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); fill: none; stroke: color-mix(in srgb, var(--accent) 38%, var(--paper)); stroke-width: 1; stroke-dasharray: 6 5; pointer-events: none; }
.home-create-content { display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--accent-strong); font: var(--weight-medium) var(--text-lg)/var(--leading-lg) var(--font-body); pointer-events: none; }
.home-create-plus { width: clamp(32px, calc(var(--orb-size) * .2), 48px); height: clamp(32px, calc(var(--orb-size) * .2), 48px); color: var(--accent); stroke-width: 1.4; }
.home-page.is-dragging .space-orb { cursor: grabbing; }
.home-page .space-picker { position: absolute; top: calc(var(--orb-size) + 15px); left: 50%; transform: translateX(-50%) scale(.8); transform-origin: 50% 22.881%; width: 250px; height: auto; aspect-ratio: 723 / 236; margin: 0; z-index: 2; }
.home-page .picker-arc { inset: 0; width: 100%; height: 100%; fill: none; stroke: #e9e6e1; stroke-width: 3.4; stroke-linecap: round; }
.home-page .picker-arc-tail { stroke-dasharray: 5 8; }
.home-page .picker-dots { position: absolute; inset: 0; display: block; }
.home-page .picker-dots button { position: absolute; left: 22.025%; top: 54.685%; transform: translate(-50%, -50%); width: 55px; height: 55px; margin: 0; padding: 0; border-radius: 50%; }
.home-page .picker-dots button:nth-child(2) { left: 49.793%; top: 22.881%; margin: 0; }
.home-page .picker-dots button:nth-child(3) { left: 77.56%; }
.home-page .picker-dots button span { position: relative; width: calc(10px + 7px * var(--dot-active, 0)); height: calc(10px + 7px * var(--dot-active, 0)); border: 1.2px solid color-mix(in srgb, #e9e6e1 calc(var(--dot-active, 0) * 100%), #c9beb5); background: var(--paper); box-shadow: none; }
.home-page .picker-dots button span::after { content: ''; position: absolute; width: 10px; height: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--accent); opacity: var(--dot-active, 0); }
.home-page .space-description { opacity: var(--wheel-content-opacity, 1); }
.home-page .space-description { position: absolute; top: calc(var(--orb-size) + 78px); left: 15%; right: 15%; min-height: 0; padding: 0; pointer-events: none; z-index: 2; }
.home-page .space-description h2 { font-family: var(--font-rounded); font-size: var(--text-display); line-height: var(--leading-display); font-weight: var(--weight-medium); }
.home-page .space-description p { font-family: var(--font-body); font-size: 15px; line-height: 25px; margin-top: 11px; text-wrap: balance; }
.home-page .home-actions { width: 100%; max-width: 332px; padding: 20px 24px 0; margin-top: auto; flex-shrink: 0; }
.home-page .home-actions .primary { min-height: var(--button-height); font-size: var(--button-prominent-size); line-height: var(--button-prominent-leading); font-weight: var(--weight-semibold); border-radius: var(--button-radius); }
.home-page .helper-link { width: 100%; font-size: var(--button-font-size); line-height: var(--leading-md); padding: 7px 0; min-height: 44px; color: var(--muted); }
.home-page .helper-link[hidden] { display: block; visibility: hidden; }
.phone[data-screen="now"] .home-indicator:after { background: #4e2d1f; width: 105px; height: 4px; }
@media (max-width: 760px) {
  .home-preview .phone[data-screen="now"] { height: 100dvh; max-width: 430px; padding-top: var(--safe-top); }
  .phone[data-screen="now"] .home-page { --orb-size: min(65.7vw, 282px); }
  .home-preview .phone[data-screen="now"] .topbar { height: var(--header-mobile-height); }
  .home-page .greeting { padding-top: 44px; }
  .home-page .space-description { left: 12%; right: 12%; }
  .phone[data-screen="now"] .home-indicator:after { display: none; }
}
/* Account for the footer's extra 17px without switching the main composition early. */
@container (height < 723px) {
  .phone[data-screen="now"] .home-page .greeting { padding-top: 24px; }
  .phone[data-screen="now"] .home-space-stage { margin-top: 32px; }
}
@container (height < 683px) {
  .phone[data-screen="now"] .home-page { --orb-size: 200px; padding-bottom: 8px !important; }
  .phone[data-screen="now"] .home-page .greeting { padding-top: 14px; }
  .phone[data-screen="now"] .home-page .greeting h1 { font-size: var(--text-page); line-height: 36px; }
  .phone[data-screen="now"] .home-page .greeting p { margin-top: 6px; }
  .phone[data-screen="now"] .home-space-stage { margin-top: 16px; height: calc(var(--orb-size) + 130px); }
  .phone[data-screen="now"] .home-page .home-actions { padding-top: 12px; }
}
@container (height < 533px) {
  .phone[data-screen="now"] .home-page { --orb-size: 136px; padding-bottom: 4px !important; }
  .phone[data-screen="now"] .home-page .greeting { padding-top: 8px; }
  .phone[data-screen="now"] .home-page .greeting h1 { font-size: var(--text-3xl); line-height: var(--leading-page); }
  .phone[data-screen="now"] .home-page .greeting p { line-height: var(--leading-md); margin-top: 4px; }
  .phone[data-screen="now"] .home-space-stage { margin-top: 12px; height: calc(var(--orb-size) + 114px); }
  .phone[data-screen="now"] .home-page .space-picker { top: calc(var(--orb-size) + 4px); width: 220px; }
  .phone[data-screen="now"] .home-page .space-description { top: calc(var(--orb-size) + 52px); }
  .phone[data-screen="now"] .home-page .space-description h2 { font-size: 25px; line-height: var(--leading-page); }
  .phone[data-screen="now"] .home-page .space-description p { margin-top: 4px; font-size: var(--text-sm); line-height: var(--leading-md); }
  .phone[data-screen="now"] .home-page .home-actions { padding-top: 4px; }
  .phone[data-screen="now"] .home-page .home-actions .primary { font-size: var(--button-font-size); }
}
@container (height < 440px) {
  .phone[data-screen="now"] .home-page { --orb-size: 120px; }
}