/* One design unit for the public home: a 1440px desktop grows with the viewport.
   rem floors preserve browser text preferences; phones use a separate composition. */
body.enter-home {
  --home-unit: max(.0625rem, .0694444444vw);
  --home-header: calc(80 * var(--home-unit));
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: calc(18 * var(--home-unit));
}
.enter-home .button, .enter-home .hero-actions .button { font-size: calc(17 * var(--home-unit)); min-height: calc(52 * var(--home-unit)); padding: calc(14 * var(--home-unit)) calc(25 * var(--home-unit)); }
.enter-home .enter-source-hero { height: max(100svh, calc(960 * var(--home-unit))); min-height: 0; }
.enter-home .hero__stage { width: 100%; perspective: calc(1100 * var(--home-unit)); }
.enter-home .hero__content { width: 58%; top: 52%; }
.enter-home .hero .hero__headline { font-size: calc(64 * var(--home-unit)); line-height: 1.4; margin-top: calc(26 * var(--home-unit)); }
.enter-home .hero-portal { width: 80px; height: 110px; zoom: var(--home-scale, 1); }
.enter-home .hero__prompt-group { width: 100%; }
.enter-home .hero__prompt-group > p { font-size: calc(18 * var(--home-unit)); line-height: 1.9; margin-top: calc(22 * var(--home-unit)); }
.enter-home .hero__prompt-group .hero-actions { gap: calc(16 * var(--home-unit)); margin-top: calc(26 * var(--home-unit)); }
.enter-home .hero-library-row { margin-top: calc(42 * var(--home-unit)); }
.enter-home .hero-library-row > p { font-size: calc(16 * var(--home-unit)); margin-bottom: calc(22 * var(--home-unit)); }
.enter-home .logo-slot { width: calc(148 * var(--home-unit)); height: calc(40 * var(--home-unit)); }
.enter-home .logo-mark { font-size: calc(22 * var(--home-unit)); gap: calc(7 * var(--home-unit)); }
.enter-home .logo-mark svg { width: calc(28 * var(--home-unit)); height: calc(28 * var(--home-unit)); }
/* Brand marks stay outside the copy, with room for their scroll movement. */
.enter-home .hero-media { display: block; transform: none; transform-origin: center; }
.enter-home .hero-media img { object-fit: contain; }
.enter-home .hero-extra--icon :is(img, svg) { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.enter-home .hero-media.is-behind-logos { opacity: 1 !important; visibility: visible; }
.enter-home .patterns-section { padding-block: calc(110 * var(--home-unit)) calc(90 * var(--home-unit)); }
.enter-home .section-heading.centered h2 { font-size: calc(58 * var(--home-unit)); }
.enter-home .pattern-tabs { gap: calc(16 * var(--home-unit)); margin-block: calc(40 * var(--home-unit)) calc(65 * var(--home-unit)); }
.enter-home .pattern-tabs button { font-size: calc(22 * var(--home-unit)); padding: calc(12 * var(--home-unit)) calc(14 * var(--home-unit)); }
.enter-home .pattern-track { gap: calc(24 * var(--home-unit)); }
.enter-home .pattern-card { width: calc(355 * var(--home-unit)); }
.enter-home .pattern-card .pattern-image { height: calc(430 * var(--home-unit)); border-radius: calc(16 * var(--home-unit)); }
.enter-home .pattern-label { font-size: calc(25 * var(--home-unit)); }
.enter-home .pattern-card.webapp-card .pattern-image { height: auto; aspect-ratio: 1.4; }
.enter-home .webapp-card .pattern-image img { object-fit: contain; }
.enter-home .pattern-unavailable { padding: 24px; max-width: 100vw; white-space: normal; }
.enter-home .library-brands { max-width: calc(1040 * var(--home-unit)); font-size: calc(18 * var(--home-unit)); }
.enter-home .library-brands a { font-size: calc(18 * var(--home-unit)); }
.enter-home .workflow-section { scroll-margin-top: var(--home-header); }
.enter-home .workflow-sticky { top: var(--home-header); height: calc(100svh - var(--home-header)); min-height: calc(640 * var(--home-unit)); padding: calc(36 * var(--home-unit)); }
.enter-home .workflow-shell { max-width: none; gap: calc(50 * var(--home-unit)); padding: calc(30 * var(--home-unit)) 0; }
.enter-home .workflow-copy-column h2 { font-size: calc(48 * var(--home-unit)); }
.enter-home .workflow-copy-column > p { font-size: calc(17 * var(--home-unit)); }
.enter-home .workflow-steps { gap: calc(8 * var(--home-unit)); margin-top: calc(25 * var(--home-unit)); }
.enter-home .workflow-steps button { font-size: calc(25 * var(--home-unit)); gap: calc(15 * var(--home-unit)); padding-block: calc(15 * var(--home-unit)); }
.enter-home .workflow-number { font-size: calc(16 * var(--home-unit)); min-width: calc(24 * var(--home-unit)); }
.enter-home .workflow-screen { width: 100%; }
.enter-home .anything-scene__title { inset: 0; width: 90%; height: max-content; margin: auto; transform: none; font-size: clamp(32px, 3.61vw, 72px); }
.enter-home .enter-orbit-skip { font-size: calc(16 * var(--home-unit)); bottom: calc(24 * var(--home-unit)); }
.enter-home .crossing-belts { --icon: calc(72 * var(--home-unit)); --step: calc(140 * var(--home-unit)); --column-left: 18%; --column-right: 82%; }
.enter-home .library-message { width: 60%; max-width: 60%; }
.enter-home .library-message h2 { font-size: calc(26 * var(--home-unit)); margin-bottom: calc(28 * var(--home-unit)); }
.enter-home .library-message .library-line { font-size: calc(40 * var(--home-unit)); }
.enter-home .library-skip { font-size: calc(17 * var(--home-unit)); }
.enter-home .closing-section { padding-block: calc(110 * var(--home-unit)); }
.enter-home .ticker-brand { font-size: calc(24 * var(--home-unit)); line-height: 1.25; gap: calc(16 * var(--home-unit)); }
.enter-home .ticker-brand img { width: calc(40 * var(--home-unit)); height: calc(40 * var(--home-unit)); }
@media (min-width: 901px) {
  .enter-home .anything-scene__stage { scale: var(--home-scale, 1); }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .enter-home .hero .hero__headline { font-size: 4.45vw; }
  .enter-home .workflow-copy-column h2 { font-size: 36px; }
  .enter-home .workflow-steps button { font-size: 20px; }
}
@media (max-width: 900px) {
  body.enter-home { --home-header: 64px; }
                .enter-home .enter-source-hero { height: auto; }
  .enter-home .hero__stage { min-height: 100svh; padding: var(--hero-top-space, 280px) 20px var(--hero-bottom-space, 216px); }
  .enter-home .hero__stage--intro-complete { perspective: none; }
  .enter-home .hero__content { position: relative; width: 100%; top: auto; left: auto; transform: none; }
  .enter-home .hero .hero__headline { font-size: clamp(26px, 8vw, 56px); margin-top: 24px; }
  .enter-home .hero-portal { width: 68px; height: 94px; zoom: 1; }
  .enter-home .hero__prompt-group > p { font-size: 16px; margin-top: 22px; }
  .enter-home .hero__prompt-group .button, .enter-home .hero-actions .button { font-size: 16px; padding: 14px 20px; min-height: 48px; }
  .enter-home .hero__prompt-group .hero-actions { gap: 12px; margin-top: 24px; flex-wrap: wrap; }
  .enter-home .hero-library-row { margin-top: 34px; }
  .enter-home .hero-library-row > p { font-size: 14px; margin-bottom: 18px; }
  .enter-home .logo-slot { width: 19%; height: 36px; }
  .enter-home .logo-mark { font-size: 15px; }
  .enter-home .logo-mark svg { width: 26px; height: 26px; }
  .enter-home .logo-mark:has(svg) span { display: none; }
  .enter-home .section-heading.centered h2 { font-size: clamp(32px, 5.5vw, 48px); }
  .enter-home .pattern-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: calc(100% - 32px); gap: 8px; margin-block: 28px 40px; }
  .enter-home .pattern-tabs button { font-size: 16px; padding: 12px 8px; white-space: normal; }
  .enter-home .pattern-card { width: 280px; }
  .enter-home .pattern-card .pattern-image { height: 340px; }
  .enter-home .pattern-label { font-size: 22px; }
  .enter-home .workflow-sticky { position: relative; top: 0; height: auto; min-height: 0; padding: 72px 20px; }
  .enter-home .workflow-shell { gap: 32px; padding: 0; }
  .enter-home .workflow-copy-column h2 { font-size: clamp(32px, 5vw, 44px); }
  .enter-home .workflow-copy-column > p { font-size: 16px; }
  .enter-home .workflow-steps { grid-template-columns: 1fr; gap: 4px; }
  .enter-home .workflow-steps button { font-size: 18px; padding-block: 10px; gap: 12px; min-height: 48px; }
  .enter-home .workflow-number { font-size: 14px; }
  .enter-home .library-message { width: calc(100% - 96px); max-width: none; }
  .enter-home .library-message h2 { font-size: 20px; padding: 0; }
  .enter-home .library-message .library-line { font-size: clamp(18px, 4.6vw, 32px); }
  .enter-home .crossing-belts { --icon: 36px; --step: 102px; --column-left: 6%; --column-right: 94%; --row-top: 20%; --row-bottom: 80%; }
            }
@media (max-width: 360px) {
  .enter-home .hero__stage { padding-inline: 16px; }
  .enter-home .hero .hero__headline { font-size: 25px; }
  .enter-home .hero__prompt-group .button { padding-inline: 16px; font-size: 15px; }
}

/* Finish the flight before showing copy, so late-arriving icons cannot cover it. */
.enter-home .hero__stage:not(.hero__stage--intro-complete) .hero__prompt-group { opacity: 0 !important; visibility: hidden !important; }
.enter-home .hero__stage--intro-complete .hero__prompt-group { transform: none !important; animation: home-prompt-reveal .7s ease-out both; }
@keyframes home-prompt-reveal { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@media(prefers-reduced-motion:reduce) { .enter-home .hero__stage--intro-complete .hero__prompt-group { transform: none !important; animation: none; } }

.enter-home .hero-stat-phrase { display: inline-block; }
.enter-home .skip-link { top: 0; transform: translateY(-150%); font-size: 16px; }
.enter-home .skip-link:focus { top: 12px; transform: none; }
.enter-home .hero-actions svg { width: 1em; height: 1em; }

/* A phone recording per card, browsed with native horizontal scrolling. */
@media (max-width: 900px) {
  .enter-home .workflow-section { height: auto; }
  .enter-home .workflow-shell { grid-template-columns: minmax(0,1fr); }
  .enter-home .workflow-shell > * { min-width: 0; }
  .enter-home .workflow-sticky { position: relative; top: 0; overflow: visible; }
  .enter-home .workflow-steps { display: flex; flex-direction: row; gap: 24px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; }
  .enter-home .workflow-steps button { flex: none; white-space: nowrap; font-size: 17px; }
  .enter-home .workflow-screen { display: flex; gap: 20px; width: 100%; height: auto; aspect-ratio: auto; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; clip-path: none; padding: 0 0 16px; }
  .enter-home .workflow-panel[data-workflow-state] { position: relative; inset: auto; flex: 0 0 min(86vw,340px); width: min(86vw,340px); height: auto; overflow: clip; overscroll-behavior: auto; border-radius: 16px; scroll-snap-align: start; transform: none; opacity: 1; transition: none; will-change: auto; pointer-events: auto; }
  .enter-home .workflow-recording { width: 100%; height: auto; aspect-ratio: 390 / 844; display: block; border-radius: 16px; box-shadow: none; }
  .enter-home .library-message { width: calc(100% - 112px); max-width: 480px; }
  .enter-home .library-message h2 { font-size: clamp(18px,4.7vw,24px); line-height: 1.65; text-wrap: balance; }
  .enter-home .library-message .library-line { white-space: normal; text-wrap: balance; font-size: clamp(17px,4.5vw,24px); }
}
@media (max-width:900px) {
    }

@media (max-width: 900px) {
  .enter-home .workflow-steps { padding-inline: var(--workflow-tab-start, 0px) var(--workflow-tab-end, 0px); scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .enter-home .workflow-steps button { scroll-snap-align: center; }
  .enter-home .workflow-screen { padding-inline: max(0px, calc((100% - min(86vw,340px)) / 2)); }
  .enter-home .workflow-panel[data-workflow-state] { scroll-snap-align: center; }
  .enter-home .workflow-steps, .enter-home .workflow-screen { cursor: grab; user-select: none; }
  .enter-home .workflow-dragging { cursor: grabbing; scroll-snap-type: none; }
}

@media (max-width: 900px) {
  .enter-home .pattern-viewport { margin-left: 24px; width: calc(100% - 24px); }
}

.workflow-recording-caption { display: none; }
@media (max-width: 900px) {
  .enter-home .workflow-recording-caption { display: block; margin: 16px 8px 0; font-size: 15px; line-height: 1.7; text-align: center; color: #777774; }
}


/* Keep the website preview; its brand belongs beside the name below it. */
.enter-home .pattern-branded-card .pattern-label { display: flex; align-items: center; justify-content: flex-start; gap: 10px; text-align: left; }
.enter-home .pattern-branded-card .pattern-label .pattern-site-logo { width: 28px; height: 28px; flex: 0 0 28px; object-fit: contain; object-position: center; }

/* Keep the workflow close to the preceding section, including tall desktop windows. */
@media (min-width: 901px) {
  .enter-home .workflow-sticky { align-items: flex-start; padding-top: clamp(32px, 6svh, 72px); }
  .enter-home .workflow-shell { margin-block: 0; padding-top: 0; }
}

/* The sticky stage follows its content so upper alignment does not leave an empty screen below. */
@media (min-width: 901px) {
  .enter-home .workflow-sticky { height: auto; min-height: 0; padding-bottom: clamp(48px, 12vw, 180px); }
}

/* Phone composition: compact sections, readable copy, and every workflow step in view. */
@media (max-width: 900px) {
  body.enter-home { font-size: 16px; }
  .enter-home #design-hub-intro { padding: 48px 20px !important; }
  .enter-home #design-hub-intro h2 { font-size: clamp(24px, 6.3vw, 32px) !important; text-wrap: balance; }
  .enter-home #design-hub-intro p { font-size: 15px; line-height: 1.85; margin-top: 20px; }
  .enter-home #design-hub-intro p:last-child { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0; }
  .enter-home #design-hub-intro p:last-child a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
  .enter-home .hero__stage { min-height: 0; }
  .enter-home .hero__prompt-group > p { max-width: 340px; margin-inline: auto; font-size: 15px; }
  .enter-home .hero .hero__headline { font-size: clamp(25px, 7.5vw, 48px); }
  .enter-home .patterns-section { padding-block: 64px 48px; }
  .enter-home .section-heading.centered h2 { font-size: clamp(28px, 7vw, 40px); }
  .enter-home .pattern-tabs { margin-block: 24px 28px; }
  .enter-home .pattern-tabs button { min-height: 48px; font-size: 15px; }
  .enter-home .pattern-card { width: min(74vw, 300px); }
  .enter-home .pattern-card .pattern-image { height: 300px; }
  .enter-home .pattern-label { font-size: 18px; }
  .enter-home .workflow-sticky { padding: 56px 20px; }
  .enter-home .workflow-copy-column h2 { font-size: clamp(28px, 7vw, 40px); }
  .enter-home .workflow-copy-column > p { font-size: 15px; line-height: 1.8; }
  .enter-home .workflow-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; overflow: visible; scroll-snap-type: none; cursor: auto; }
  .enter-home .workflow-steps button { min-width: 0; min-height: 48px; justify-content: center; padding: 10px 6px; font-size: 14px; white-space: normal; border-radius: 12px; background: #f5f5f6; line-height: 1.5; }
  .enter-home .workflow-steps button[aria-selected=true] { background: #252529; color: white; }
  .enter-home .workflow-shell { gap: 24px; }
  .enter-home .workflow-screen { touch-action: pan-x pan-y; }
  .enter-home .workflow-recording-caption { margin-top: 12px; font-size: 14px; }
  .enter-home .library-scroll, .enter-home .library-sticky { height: auto; min-height: 600px; }
  .enter-home .library-sticky { position: relative; }
  .enter-home .library-message { width: calc(100% - 96px); }
  .enter-home .library-message h2 { font-size: 20px; }
  .enter-home .library-message .library-line { font-size: clamp(18px, 4.8vw, 28px); line-height: 1.7; }
  .enter-home .closing-section { padding-block: 64px; }
  .footer-reveal .public-footer { position: relative; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .enter-home .hero-actions .button { font-size: 14px; padding-inline: 16px; }
  .enter-home .workflow-steps button { font-size: 13px; }
}

@media (max-width: 900px) { .enter-home #design-hub-heading > span { display: block; } }

.enter-home .library-message .library-update { display: block; margin-top: 8px; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: .04em; color: #6b6b70; }