/* Approved daylight direction, implemented with live text and real archive data. */
.welcome-page { --landing-ink: #152f29; --landing-soft: #f4f8f4; --landing-space: clamp(42px, 6vw, 80px); max-width: 1440px; padding: 24px clamp(24px, 4.3vw, 72px) 64px; }
.welcome-page .welcome-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0; padding: 28px 0 40px; min-height: 570px; }
.welcome-page .hero-copy { z-index: 2; padding-block: 20px; }
.hero-kicker { display: flex; align-items: center; gap: 9px; color: var(--brand); font-size: .77rem; font-weight: 650; letter-spacing: .005em; margin-bottom: 23px; }
.welcome-page .welcome-hero h1 { color: var(--landing-ink); font-size: clamp(2.75rem, 4.5vw, 4.4rem); font-weight: 680; line-height: 1.08; letter-spacing: -.047em; max-width: 13em; }
.welcome-page .hero-description { margin-top: 25px; color: #41524c; font-size: clamp(1.1rem, 1.7vw, 1.5rem); line-height: 1.45; max-width: 31ch; letter-spacing: -.015em; }
.hero-context { color: var(--muted); font-size: .92rem; line-height: 1.65; max-width: 46ch; margin-top: 17px; }
.welcome-page .hero-actions { gap: 12px; margin-top: 27px; }
.welcome-page .hero-actions .btn { min-height: 52px; padding: 13px 21px; border-radius: 11px; font-size: .9rem; gap: 11px; }
.welcome-page .hero-actions .btn .icon:first-child { width: 23px; height: 23px; }
.welcome-page .hero-footnote { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: .71rem; margin-top: 17px; }
.hero-footnote strong { font-weight: 600; color: #41524c; }
.landing-free-mark { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; font-size: .64rem; color: var(--brand); background: #e3f0e7; margin-right: 2px; }
.landing-visual { position: relative; align-self: stretch; min-width: 0; min-height: 530px; margin-left: -36px; }
.landing-scene { position: absolute; width: calc(100% + 52px); max-width: none; height: 100%; object-fit: cover; object-position: 56% center; border-radius: 20px 0 0 80px; mask-image: linear-gradient(to right, transparent, #000 15%, #000 96%, transparent), linear-gradient(to bottom, #000 94%, transparent); mask-composite: intersect; }
.landing-phone { position: absolute; right: -6px; top: 43px; width: 199px; padding: 25px 13px 13px; border: 5px solid #28372f; border-radius: 30px; background: #fcfefc; color: var(--ink); box-shadow: 0 18px 28px #14291e35, 0 0 0 2px #96a29c; transform: rotate(3deg); }
.landing-phone-camera { position: absolute; width: 54px; height: 9px; border-radius: 10px; background: #23352c; top: 8px; left: calc(50% - 27px); }
.landing-phone-brand { display: flex; align-items: center; gap: 6px; }
.landing-phone-brand img { flex: 0 0 29px; width: 29px; height: 29px; object-fit: contain; }
.landing-phone-brand strong { display: block; font-size: .66rem; }
.landing-phone-brand span { display: block; font-size: .5rem; color: var(--muted); margin-top: 1px; }
.landing-phone-tabs { display: flex; gap: 14px; padding: 15px 0 11px; border-bottom: 1px solid var(--line); color: #65736b; font-size: .52rem; }
.landing-phone-tabs .is-current { color: var(--brand); font-weight: 650; }
.landing-phone-notice { display: flex; align-items: center; gap: 5px; margin-block: 12px 16px; padding: 7px 5px; background: #fff3dc; border-radius: 5px; font-size: .51rem; color: #78500d; }
.landing-amber-dot { width: 5px; height: 5px; border-radius: 50%; background: #b87a16; }
.landing-phone-label { font-size: .6rem; font-weight: 650; }
.landing-phone-chart { width: 100%; margin-block: 8px; }
.landing-phone-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-block: 10px; border-block: 1px solid var(--line-soft); }
.landing-phone-facts span { display: block; font-size: .47rem; color: var(--muted); }
.landing-phone-facts strong { display: block; font-size: .68rem; font-weight: 600; margin-top: 3px; }
.landing-phone-note { margin-top: 10px; color: #617267; font-size: .48rem; line-height: 1.45; }
.landing-phone-link { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 12px; min-height: 32px; padding: 6px 8px; border-radius: 5px; background: #e5f2e9; color: var(--brand); font-size: .55rem; font-weight: 650; text-decoration: none; }
.landing-phone-link:hover { background: #d7eadc; }
.landing-phone-link .icon { width: 13px; height: 13px; }
.landing-visual-caption { position: absolute; left: 34px; right: 4px; bottom: 0; color: #67716a; font-size: .62rem; text-align: right; }
.landing-feature-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 26px 30px; border-block: 1px solid var(--line); gap: 25px; }
.landing-feature-strip > a { display: flex; align-items: center; gap: 15px; text-decoration: none; color: var(--ink); min-width: 0; }
.landing-feature-strip > a:hover strong { color: var(--brand); }
.landing-feature-icon { display: flex; align-items: center; justify-content: center; width: 57px; height: 57px; flex: 0 0 57px; background: #e7f3e8; color: var(--brand); border-radius: 50%; }
.landing-feature-icon .icon { width: 28px; height: 28px; stroke-width: 1.6; }
.landing-feature-strip strong { display: block; font-size: .96rem; font-weight: 650; }
.landing-feature-strip a > span > span { display: block; margin-top: 4px; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.landing-feature-arrow { margin-left: auto; color: var(--brand); width: 15px; height: 15px; }
.welcome-page .section-heading h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.027em; max-width: 28ch; }
.welcome-page .section-heading p { font-size: .95rem; line-height: 1.7; margin-top: 12px; }
.hero-description strong { color: var(--ink); font-weight: 600; }
.product-jump-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 26px; border-bottom: 1px solid var(--line); padding-block: 20px; font-size: .8rem; font-weight: 550; }
.product-jump-links a { text-decoration: none; color: var(--muted); }
.product-jump-links a:hover { color: var(--brand); text-decoration: underline; }
.product-control-story { display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items: center; padding-block: var(--landing-space); scroll-margin-top: 26px; }
.product-section-label { font-size: .92rem; font-weight: 600; color: var(--brand); margin-bottom: 10px; }
.product-story-copy h2, .product-platforms h2, .product-resource h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
.product-story-copy > p:not(.product-section-label) { margin-top: 18px; color: var(--muted); line-height: 1.7; }
.product-actions-list { list-style: none; display: grid; gap: 17px; padding: 0; margin: 24px 0; font-size: .9rem; line-height: 1.65; color: var(--muted); }
.product-actions-list strong { display: block; color: var(--ink); margin-bottom: 2px; }
.product-record { margin: 0; padding: 30px; background: var(--surface); border: 1px solid #dfe9e1; border-radius: 19px; box-shadow: 0 18px 64px #123e2b0b; min-width: 0; }
.product-record-heading { display: flex; flex-direction: column; gap: 5px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.product-record-heading span { color: var(--muted); font-size: .78rem; }
.product-record-heading strong { font-size: 1.25rem; }
.product-record-label { font-size: .85rem; margin-top: 22px; font-weight: 600; }
.product-record > img { width: 100%; margin-top: 10px; }
.product-record-explanation { margin-top: 18px; font-size: .88rem; line-height: 1.65; }
.product-record-explanation strong { color: var(--warning); }
.product-record-explanation p { color: var(--muted); margin-top: 5px; }
.product-record figcaption { font-size: .75rem; line-height: 1.65; color: var(--muted); margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); }
.product-features { padding: 0 0 var(--landing-space); }
.product-feature-list { margin: 0; }
.product-feature-list > div { display: grid; grid-template-columns: minmax(150px, .65fr) 1.65fr; gap: 30px; padding-block: 20px; border-bottom: 1px solid var(--line); }
.product-feature-list dt { font-weight: 600; font-size: 1rem; }
.product-feature-list dd { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.7; max-width: 72ch; }
.product-web { padding-block: 12px var(--landing-space); scroll-margin-top: 26px; }
.product-web-views { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.product-web-views > article { padding: 27px 28px; background: var(--landing-soft); border: 1px solid #e0eae2; border-radius: 14px; min-width: 0; }
.product-view-name { color: var(--brand); font-weight: 650; font-size: 1.35rem; margin-bottom: 12px; }
.product-view-name > span { display: inline-block; font-size: .8rem; color: #7c9987; margin-right: 14px; font-variant-numeric: tabular-nums; vertical-align: 2px; }
.product-web-views h3 { font-size: 1.12rem; margin-bottom: 12px; }
.product-web-views article > p:not(.product-view-name) { font-size: .92rem; color: var(--muted); line-height: 1.7; }
.product-web-views ul { padding-left: 18px; margin-block: 18px 22px; font-size: .88rem; line-height: 1.6; }
.product-web-views li + li { margin-top: 8px; }
.product-web-note { margin-top: 26px; font-size: .8rem; color: var(--muted); max-width: 82ch; line-height: 1.6; }
.product-platforms { border-radius: 20px; padding: 42px; background: var(--brand-wash); scroll-margin-top: 26px; }
.product-section-intro { margin-top: 17px; max-width: 72ch; color: var(--muted); line-height: 1.7; font-size: .96rem; }
.product-platform-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 30px; }
.product-platform-columns article { min-width: 0; }
.product-platform-columns h3 { font-size: 1.1rem; line-height: 1.4; margin-block: 14px 10px; }
.product-platform-columns p { font-size: .88rem; line-height: 1.7; }
.product-platform-columns .product-use-case { color: var(--muted); margin-top: 13px; font-size: .82rem; }
.product-platform-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 30px; padding-top: 20px; border-top: 1px solid #cddfd2; }
.product-platform-footer p { font-size: .78rem; color: var(--muted); max-width: 63ch; line-height: 1.6; }
.welcome-page .audience-section { padding-block: var(--landing-space); }
.welcome-page .audience-split p { font-size: .93rem; line-height: 1.75; }
.welcome-page .check-list { font-size: .86rem; }
.product-resource { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; padding: 44px; border-radius: 20px; background: var(--brand-dark); color: #fff; scroll-margin-top: 26px; }
.product-resource h2 { margin-top: 18px; }
.product-resource p { font-size: .92rem; line-height: 1.75; color: #d8e9df; margin-top: 18px; }
.product-resource-detail { padding-top: 62px; }
.product-resource-detail h3 { font-size: 1.25rem; }
.product-resource-detail .btn { margin-top: 24px; }
.product-roadmap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; margin-top: 46px; padding-block: 12px 36px; }
.product-roadmap h2 { margin-top: 14px; font-size: 1.5rem; line-height: 1.35; }
.product-roadmap p { color: var(--muted); font-size: .88rem; line-height: 1.7; margin-top: 13px; }
.product-roadmap ul { list-style: none; padding: 0; margin: 0; }
.product-roadmap li { border-bottom: 1px solid var(--line); }
.product-roadmap li a { display: block; padding-block: 18px; text-decoration: none; }
.product-roadmap li:first-child a { padding-top: 0; }
.product-roadmap strong { display: block; font-size: 1rem; }
.product-roadmap span:not(.badge) { display: block; font-size: .85rem; color: var(--muted); margin-top: 7px; line-height: 1.6; }
.product-roadmap a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.product-start { padding-block: 20px 18px; }
.product-start .care-path { margin-top: 24px; }
.product-start .care-path li div > span { font-size: .72rem; }
.product-start > p { color: var(--muted); font-size: .85rem; line-height: 1.7; margin: 22px 0; max-width: 76ch; }
@media(max-width:1100px) { .product-control-story { gap: 25px; grid-template-columns: 1.1fr 1fr; } .product-platform-columns { gap: 18px; } .product-platforms, .product-resource { padding: 27px; } }
@media(max-width:800px) { .product-control-story, .product-web-views, .product-platform-columns, .product-resource, .product-roadmap { grid-template-columns: 1fr; } .product-control-story { padding-block: 36px; } .product-record { max-width: 510px; width: 100%; justify-self: center; } .product-platform-columns { gap: 25px; } .product-platform-columns h3 { margin-top: 10px; } .product-platform-columns article + article { padding-top: 24px; border-top: 1px solid #cddfd2; } .product-resource-detail { padding-top: 0; } .product-resource { gap: 28px; } .product-roadmap { gap: 24px; } .product-feature-list > div { grid-template-columns: .8fr 1.2fr; gap: 18px; } }
@media(max-width:520px) { .product-jump-links { gap: 11px 18px; font-size: .82rem; } .product-feature-list > div { grid-template-columns: 1fr; gap: 8px; } .product-record, .product-platforms, .product-resource { padding: 20px; } .product-record-label { font-size: .78rem; } .product-record figcaption { font-size: .72rem; } .product-story-copy h2, .product-platforms h2, .product-resource h2 { font-size: 1.6rem; } .product-web-views { gap: 25px; } .product-roadmap { margin-top: 32px; } .product-platform-footer { gap: 15px; } }
@media(min-width:1450px) { .landing-phone { right: 7px; top: 25px; width: 216px; padding: 28px 14px 17px; } .landing-phone-brand strong { font-size: .74rem; } .landing-phone-brand span { font-size: .57rem; } .landing-phone-tabs { font-size: .59rem; } .landing-phone-notice { font-size: .57rem; } .landing-phone-label { font-size: .69rem; } .landing-phone-facts strong { font-size: .78rem; } .landing-phone-facts span { font-size: .55rem; } .landing-phone-note { font-size: .54rem; } .landing-phone-link { font-size: .63rem; min-height: 37px; } }
@media(max-width:1100px) { .welcome-page .welcome-hero { grid-template-columns: 1.15fr 1fr; min-height: 560px; } .welcome-page .hero-actions .btn { padding-inline: 15px; font-size: .8rem; } .landing-visual { margin-left: -18px; } .landing-phone { width: 182px; right: -4px; top: 62px; } .landing-scene { width: calc(100% + 40px); object-position: 51% center; } .landing-feature-strip { gap: 16px; } .landing-feature-icon { flex-basis: 43px; width: 43px; height: 43px; } .landing-feature-icon .icon { width: 23px; height: 23px; } .landing-feature-strip > a { gap: 11px; } .landing-feature-strip strong { font-size: .83rem; } .landing-feature-strip a > span > span { font-size: .71rem; } .landing-feature-arrow { display: none; } }
@media(max-width:800px) { .welcome-page { padding: 16px 28px 45px; } .welcome-page .welcome-hero { grid-template-columns: 1fr; padding-top: 6px; padding-bottom: 20px; min-height: 0; } .welcome-page .welcome-hero h1 { font-size: clamp(2.5rem, 6.9vw, 3.6rem); max-width: 16em; } .hero-kicker { margin-bottom: 20px; } .welcome-page .hero-description { font-size: 1.23rem; max-width: 38ch; } .hero-context { max-width: 58ch; } .welcome-page .hero-copy { padding-bottom: 0; } .landing-visual { min-height: 445px; margin: 18px 0 0; } .landing-scene { width: 100%; border-radius: 16px; object-position: center 57%; mask-image: linear-gradient(to bottom, #000 94%, transparent); mask-composite: add; } .landing-phone { right: 20px; top: 21px; width: 194px; } .landing-visual-caption { bottom: 1px; right: 16px; } .landing-feature-strip { grid-template-columns: 1fr; padding-block: 23px; gap: 22px; } .landing-feature-strip > a { gap: 17px; } .landing-feature-icon { flex-basis: 45px; width: 45px; height: 45px; } .landing-feature-strip strong { font-size: 1rem; } .landing-feature-strip a > span > span { font-size: .81rem; } .landing-feature-arrow { display: block; } .product-jump-links { justify-content: flex-start; } .product-control-story { gap: 30px; padding-block: 44px; } .product-record { max-width: none; } .product-feature-list > div { grid-template-columns: .8fr 1.2fr; } .product-resource { gap: 28px; } }
@media(max-width:520px) { .welcome-page { padding: 12px 20px 38px; } .welcome-page .welcome-hero h1 { font-size: clamp(2.2rem, 9.1vw, 2.95rem); line-height: 1.09; letter-spacing: -.043em; } .hero-kicker { font-size: .65rem; gap: 7px; margin-bottom: 18px; } .hero-kicker img { width: 19px; height: 19px; } .welcome-page .hero-description { font-size: 1.12rem; margin-top: 20px; } .hero-context { font-size: .83rem; margin-top: 14px; } .welcome-page .hero-actions { flex-wrap: nowrap; gap: 9px; margin-top: 23px; } .welcome-page .hero-actions .btn { flex: 1; font-size: .74rem; gap: 7px; min-height: 49px; padding: 10px 8px; white-space: nowrap; } .welcome-page .hero-actions .btn .icon:first-child { width: 18px; height: 18px; } .welcome-page .hero-actions .btn .icon:last-child { display: none; } .welcome-page .hero-footnote { font-size: .66rem; line-height: 1.7; gap: 4px; } .landing-visual { min-height: 355px; margin-top: 20px; } .landing-scene { height: 325px; object-position: 49% center; border-radius: 14px; mask-image: linear-gradient(to bottom, #000 88%, transparent); } .landing-phone { width: 163px; right: 2px; top: 5px; padding: 24px 10px 10px; border-width: 4px; border-radius: 24px; transform: rotate(3deg); } .landing-phone-brand img { width: 24px; height: 24px; flex-basis: 24px; } .landing-phone-brand strong { font-size: .58rem; } .landing-phone-brand span { font-size: .44rem; } .landing-phone-tabs { gap: 11px; font-size: .45rem; padding-block: 11px 8px; } .landing-phone-notice { font-size: .45rem; margin-block: 9px 12px; padding: 6px 4px; gap: 4px; } .landing-phone-label { font-size: .54rem; } .landing-phone-facts span { font-size: .42rem; } .landing-phone-facts strong { font-size: .62rem; } .landing-phone-note { font-size: .43rem; margin-top: 8px; } .landing-phone-link { font-size: .5rem; margin-top: 8px; min-height: 33px; } .landing-visual-caption { font-size: .57rem; right: 0; bottom: 0; } .landing-feature-strip { margin-top: 6px; } .product-feature-list > div { grid-template-columns: 1fr; } .product-web-views > article { padding: 23px; } .welcome-page .audience-split p { font-size: .87rem; } .welcome-page .section-heading p { font-size: .88rem; } }
@media(prefers-reduced-motion:reduce) { .welcome-page *, .welcome-page *::before, .welcome-page *::after { scroll-behavior: auto; transition: none; animation: none; } }