/* Shared product illustrations and composition. Load before the page stylesheet. */
.product-dark a:focus-visible { outline-color:var(--color-highlight) }
.product-dark button:focus-visible { outline-color:var(--color-highlight) }
.product-player button:focus-visible { outline-color:var(--color-highlight) }
.product-container { width:min(var(--size-1320),calc(100% - var(--size-80))); margin-inline:auto }
.product-skip { position:fixed; top:var(--size-10); left:var(--size-10); z-index:1000; background:var(--color-surface); padding:var(--size-12); transform:translateY(-160%) }
.product-skip:focus { transform:none }
.product-header { background:var(--color-background); border-bottom:var(--size-1) var(--border-style) var(--color-surface-accent); position:sticky; top:0; z-index:40 }
.product-logo>span { font:var(--font-weight-regular) var(--size-12) var(--font-family-body); letter-spacing:0 }
.product-mainnav a:hover { color:var(--color-accent) }
.product-mainnav a[aria-current] { color:var(--color-accent) }
.product-header-cta svg { width:var(--size-21); height:var(--size-21) }
.product-menu { display:none; background:none; border:0; padding:var(--size-12) }
.product-menu span { display:block; width:var(--size-22); height:var(--size-1); background:var(--color-primary); margin:var(--size-6) 0 }
.product-hero { padding:var(--size-72) 0 var(--size-76) }
.product-hero-copy { min-width:0 }
.product-eyebrow:before { content:''; width:var(--size-23); height:var(--size-1); background:currentColor; flex-shrink:0 }
.product-hero h1 { font:var(--font-weight-display) clamp(var(--size-43),4.3vw,var(--size-66))/var(--line-height-1-08) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-045em); color:var(--color-primary); margin-bottom:var(--size-28) }
.product-hero h1 em { font-weight:var(--font-weight-regular); color:var(--color-accent) }
.product-lead { font:var(--font-weight-regular) var(--size-17)/var(--line-height-1-85) var(--font-family-body); color:var(--color-text-muted); max-width:var(--size-740) }
.product-hero .product-lead { font-size:var(--size-16); max-width:var(--size-600) }
.product-hero-meta svg { width:var(--size-23); height:var(--size-23) }
.product-section { padding:var(--size-96) 0 }
.product-head { max-width:var(--size-850); margin-bottom:var(--size-40) }
.product-head h2 { font:var(--font-weight-display) clamp(var(--size-34),3.6vw,var(--size-52))/var(--line-height-1-13) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-035em); color:var(--color-primary) }
.product-head>.product-lead { margin-top:var(--size-24) }
.product-dark .product-eyebrow { color:var(--color-highlight) }
.product-dark .product-head h2 { color:var(--color-white) }
.product-dark .product-lead { color:var(--color-background) }
.product-icon { width:var(--size-44); height:var(--size-44); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-9); background:var(--color-surface-accent); color:var(--color-primary); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0 }
.product-sectionnav { position:sticky; top:var(--header-height); z-index:30; background:var(--color-background); border-block:var(--size-1) var(--border-style) var(--color-surface-accent) }
.product-sectionnav>.product-container>span { font:var(--font-weight-medium) var(--size-10) var(--font-family-mono); text-transform:uppercase; color:var(--color-text-muted); letter-spacing:var(--letter-spacing-1em) }
.product-sectionnav a { font-size:var(--size-12); white-space:nowrap; padding:var(--size-18) 0; border-bottom:var(--size-2) var(--border-style) transparent; color:var(--color-text-muted) }
.product-sectionnav a:hover { color:var(--color-primary); border-bottom-color:var(--color-primary) }
.product-sectionnav a[aria-current] { color:var(--color-primary); border-bottom-color:var(--color-primary) }
.product-player { background:var(--color-primary); border:var(--size-1) var(--border-style) var(--color-primary); border-radius:var(--size-12); padding:var(--size-26); min-width:0; width:100%; box-shadow:var(--size-9) var(--size-9) 0 var(--color-surface-accent) }
.product-player-top>span { color:var(--color-highlight); font:var(--font-weight-regular) var(--size-9)/var(--line-height-1-7) var(--font-family-mono); letter-spacing:var(--letter-spacing-04em); max-width:27ch }
.product-play { font-size:var(--size-10); line-height:var(--line-height-label); background:transparent; color:var(--color-white); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-5); min-height:var(--size-34); padding:var(--size-7) var(--size-10); white-space:nowrap }
.product-play:hover { background:var(--color-accent) }
.product-tabs button { padding:var(--size-11) var(--size-6); border-radius:var(--size-5); background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-surface-accent); color:var(--color-primary); font-size:var(--size-11); line-height:var(--line-height-label); min-height:var(--size-41) }
.product-tabs button[aria-selected=true] { background:var(--color-highlight); border-color:var(--color-highlight); font-weight:var(--font-weight-bold) }
.product-stage { height:var(--size-365); overflow:hidden; background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-surface-accent); border-radius:var(--size-8) }
.product-window { height:100%; background:var(--color-surface); color:var(--color-primary) }
.product-windowbar { height:var(--size-30); display:flex; justify-content:space-between; align-items:center; padding:0 var(--size-12); background:var(--color-background); border-bottom:var(--size-1) var(--border-style) var(--color-surface-accent) }
.product-windowbar i { width:var(--size-5); height:var(--size-5); border-radius:50%; background:var(--color-illustration-739582) }
.product-windowbar small { font:var(--size-8) var(--font-family-mono); color:var(--color-text-muted) }
.product-site-top>strong { font:var(--font-weight-display) var(--size-23) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-035em); margin-right:auto }
.product-site-top>span { font-size:var(--size-8) }
.product-site-top svg { width:var(--size-15); height:var(--size-15) }
.product-site-body small { font:var(--size-8)/var(--line-height-1-5) var(--font-family-mono); color:var(--color-accent) }
.product-site-body h3 { font:var(--font-weight-display) var(--size-30)/var(--line-height-1-08) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-04em); margin:var(--size-12) 0 }
.product-site-body p { font-size:var(--size-10); line-height:var(--line-height-body); color:var(--color-text-muted) }
.product-ui-button { display:inline-flex; align-items:center; gap:var(--size-10); padding:var(--size-8) var(--size-10); border-radius:var(--size-4); background:var(--color-primary); color:var(--color-white); font-size:var(--size-8); margin-top:var(--size-16) }
.product-ui-button svg { width:var(--size-12); height:var(--size-12) }
.product-site-art { height:var(--size-170); padding:var(--size-19) var(--size-16); background:var(--color-surface-secondary); border-radius:var(--size-7); display:flex; flex-direction:column; justify-content:center; gap:var(--size-13); min-width:0 }
.product-site-art>b { font:var(--font-weight-display) var(--size-56)/var(--line-height-1) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-07em); color:var(--color-primary) }
.product-site-art i { width:var(--size-22); height:var(--size-22); border-radius:50%; background:var(--color-primary) }
.product-site-art i:nth-child(2) { background:var(--color-accent) }
.product-site-art i:nth-child(3) { background:var(--color-highlight) }
.product-site-art>small { font-size:var(--size-7); color:var(--color-text-muted) }
.product-site-bottom { background:var(--color-surface-secondary); font-size:var(--size-8); display:flex; justify-content:space-between; gap:var(--size-7); padding:var(--size-11) var(--size-20) }
.product-app-shell>aside { background:var(--color-primary); display:flex; align-items:center; flex-direction:column; gap:var(--size-24); padding:var(--size-22) var(--size-8); color:var(--color-highlight) }
.product-app-shell>aside svg { width:var(--size-20); height:var(--size-20) }
.product-app-body { padding:var(--size-23) var(--size-20); min-width:0 }
.product-app-title>h3 { font:var(--font-weight-display) var(--size-26)/var(--line-height-1-15) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-04em) }
.product-app-title>svg { width:var(--size-20); height:var(--size-20) }
.product-app-stats>span { font-size:var(--size-9); color:var(--color-text-muted); padding:var(--size-11); background:var(--color-surface-secondary); border-radius:var(--size-5) }
.product-app-stats strong { display:block; font-size:var(--size-11); color:var(--color-primary); margin-top:var(--size-4); font-weight:var(--font-weight-medium) }
.product-app-row>b { font-size:var(--size-10); font-weight:var(--font-weight-medium) }
.product-app-row>small { font-size:var(--size-8); margin-left:auto; color:var(--color-accent); white-space:nowrap }
.product-dot { width:var(--size-6); height:var(--size-6); border-radius:50%; background:var(--color-accent); flex-shrink:0 }
.product-app-end { font-size:var(--size-9); color:var(--color-text-muted); margin-top:var(--size-17) }
.product-mobile-scene { display:flex; height:100%; align-items:center; justify-content:center; gap:var(--size-20); padding:var(--size-22) var(--size-18); background:var(--color-background); color:var(--color-primary) }
.product-mobile-copy { min-width:0 }
.product-mobile-copy>small { font:var(--size-8) var(--font-family-mono); color:var(--color-accent) }
.product-mobile-copy h3 { font:var(--font-weight-display) var(--size-25)/var(--line-height-1-15) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-035em); margin:var(--size-15) 0 var(--size-24) }
.product-mobile-copy svg { width:var(--size-15); height:var(--size-15) }
.product-phone { width:var(--size-160); height:var(--size-295); flex:0 0 var(--size-160); border:var(--size-2) var(--border-style) var(--color-primary); border-radius:var(--size-22); background:var(--color-surface); padding:var(--size-16) var(--size-12) var(--size-10); position:relative; box-shadow:var(--size-5) var(--size-5) 0 var(--color-surface-accent) }
.product-phone-notch { position:absolute; top:var(--size-5); left:calc(50% - var(--size-21)); width:var(--size-42); height:var(--size-4); border-radius:var(--size-5); background:var(--color-primary) }
.product-phone-top svg { width:var(--size-12); height:var(--size-12) }
.product-phone>small { font:var(--size-7) var(--font-family-mono); color:var(--color-text-muted) }
.product-phone h4 { font:var(--font-weight-display) var(--size-22)/var(--line-height-1-1) var(--font-family-display); margin:var(--size-7) 0 var(--size-13); letter-spacing:var(--letter-spacing-negative-04em) }
.product-phone-course { padding:var(--size-10); background:var(--color-surface-secondary); border-radius:var(--size-7) }
.product-phone-course svg { width:var(--size-18); height:var(--size-18); margin-bottom:var(--size-6) }
.product-phone-course strong { display:block; font-size:var(--size-8); font-weight:var(--font-weight-medium) }
.product-phone-course>span { display:block; font-size:var(--size-7); color:var(--color-text-muted); margin-top:var(--size-3) }
.product-phone-list svg { width:var(--size-11); height:var(--size-11) }
.product-phone-nav { display:flex; justify-content:space-around; margin-top:var(--size-13) }
.product-phone-nav svg { width:var(--size-15); height:var(--size-15) }
.product-progress { height:var(--size-3); background:var(--color-illustration-487769); margin:var(--size-19) 0 var(--size-15); border-radius:var(--size-3) }
.product-progress i { display:block; width:0; height:100%; background:var(--color-highlight); border-radius:var(--size-3) }
.product-player figcaption>strong { display:block; color:var(--color-white); font-size:var(--size-12); font-weight:var(--font-weight-medium); min-height:var(--size-42); line-height:var(--line-height-1-7) }
.product-player figcaption>span { display:flex; justify-content:space-between; color:var(--color-surface-secondary); font:var(--size-9)/var(--line-height-1-7) var(--font-family-mono); margin-top:var(--size-8) }
.product-scene-count { font-weight:var(--font-weight-regular) }
.product-needs h3 { font:var(--font-weight-bold) var(--size-21)/var(--line-height-1-4) var(--font-family-body); color:var(--color-primary); margin:var(--size-20) 0 var(--size-13); letter-spacing:var(--letter-spacing-negative-02em) }
.product-needs p { font-size:var(--size-16); line-height:var(--line-height-relaxed); color:var(--color-text-muted) }
.product-service-art { height:var(--size-174); flex:0 0 var(--size-174); background:var(--color-background); display:flex; align-items:center; justify-content:center; gap:var(--size-22); padding:var(--size-25); border-bottom:var(--size-1) var(--border-style) var(--color-surface-accent); color:var(--color-primary); overflow:hidden }
.product-service-content { padding:var(--size-32) }
.product-service-content h3 { font:var(--font-weight-bold) var(--size-23)/var(--line-height-1-35) var(--font-family-body); letter-spacing:var(--letter-spacing-negative-025em); color:var(--color-primary); margin:var(--size-20) 0 var(--size-17); max-width:var(--size-560) }
.product-service-content>p { font-size:var(--size-16); line-height:var(--line-height-1-85); color:var(--color-text-muted) }
.product-service-content>ul svg { width:var(--size-19); height:var(--size-19); margin-top:var(--size-2); color:var(--color-accent) }
.product-service-featured { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); background:var(--color-primary); border-color:var(--color-primary) }
.product-service-featured .product-service-content { grid-column:1; grid-row:1; padding:var(--size-38) }
.product-service-featured .product-service-content h3 { color:var(--color-white); font-size:var(--size-27) }
.product-service-featured .product-service-content>p { color:var(--color-background) }
.product-service-featured .product-service-content>ul>li { color:var(--color-background) }
.product-service-featured .product-service-content>ul svg { color:var(--color-highlight) }
.product-service-featured .product-service-art { grid-column:2; grid-row:1; align-self:center; margin:var(--size-32) var(--size-32) var(--size-32) 0; min-height:var(--size-285); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-8); background:var(--color-surface) }
.product-product-map>div:first-child { display:flex; gap:var(--size-13); align-items:center; background:var(--color-primary); color:var(--color-white); border-radius:var(--size-7); padding:var(--size-18) var(--size-22); font-size:var(--size-16); font-weight:var(--font-weight-medium) }
.product-product-map>div:first-child svg { color:var(--color-highlight) }
.product-map-line { height:var(--size-24); width:var(--size-1); background:var(--color-illustration-739582) }
.product-map-grid>span { display:grid; place-items:center; min-height:var(--size-55); background:var(--color-surface-secondary); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-5); font-size:var(--size-13) }
.product-mini-desktop { width:var(--size-210); height:var(--size-117); padding:var(--size-12); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-7); background:var(--color-surface); display:grid; grid-template-columns:1.4fr 1fr; gap:var(--size-8) }
.product-mini-desktop>div { grid-column:1/-1; height:var(--size-8); background:var(--color-primary); border-radius:var(--size-3); width:65% }
.product-mini-desktop>span { background:var(--color-surface-secondary); border-radius:var(--size-3) }
.product-mini-desktop>span:last-child { background:var(--color-highlight); grid-row:2/4; grid-column:2 }
.product-mini-phone { border:var(--size-2) var(--border-style) var(--color-primary); border-radius:var(--size-10); width:var(--size-60); height:var(--size-120); background:var(--color-surface); padding:var(--size-9) var(--size-6); display:grid; gap:var(--size-7) }
.product-mini-phone>span { background:var(--color-surface-secondary); border-radius:var(--size-3) }
.product-mini-phone>span:last-child { background:var(--color-primary) }
.product-mini-flow svg { width:var(--size-31); height:var(--size-31) }
.product-mini-flow b { font-size:var(--size-12); font-weight:var(--font-weight-medium) }
.product-mini-flow>i { font-style:normal; color:var(--color-text-muted) }
.product-mini-panel { width:min(var(--size-340),100%); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-7); background:var(--color-surface); display:grid; grid-template-columns:var(--size-40) 1fr; overflow:hidden }
.product-mini-panel>aside { background:var(--color-primary); padding:var(--size-16) var(--size-8); color:var(--color-highlight) }
.product-mini-panel>div { padding:var(--size-15) }
.product-mini-panel strong { font:var(--font-weight-display) var(--size-22) var(--font-family-display) }
.product-mini-panel b { font-weight:var(--font-weight-medium) }
.product-mini-panel em { font-style:normal; margin-left:auto; color:var(--color-text-muted) }
.product-mini-panel i { width:var(--size-5); height:var(--size-5); border-radius:50%; background:var(--color-accent) }
.product-mini-system>b { font:var(--font-weight-display) var(--size-52)/var(--line-height-1) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-05em) }
.product-swatches>i { width:var(--size-25); height:var(--size-25); background:var(--color-primary); border-radius:50% }
.product-swatches>i:nth-child(2) { background:var(--color-accent) }
.product-swatches>i:nth-child(3) { background:var(--color-highlight) }
.product-component { display:flex; align-items:center; justify-content:center; min-height:var(--size-38); border-radius:var(--size-5); font-size:var(--size-10) }
.product-input-example { display:flex; align-items:center; justify-content:center; min-height:var(--size-38); border-radius:var(--size-5); font-size:var(--size-10) }
.product-component { background:var(--color-primary); color:var(--color-white) }
.product-input-example { background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); color:var(--color-text-muted) }
.product-mini-web { width:var(--size-290); background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-7); padding:var(--size-15) var(--size-18) }
.product-mini-web>strong { font:var(--font-weight-display) var(--size-17) var(--font-family-display) }
.product-mini-web b { font:var(--font-weight-display) var(--size-23)/var(--line-height-1-1) var(--font-family-display) }
.product-mini-web>div>span { padding:var(--size-8); background:var(--color-surface-secondary); border-radius:var(--size-4); font:var(--font-weight-display) var(--size-32) var(--font-family-display) }
.product-mini-code>div { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--size-11); width:var(--size-82); min-height:var(--size-88); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-6); background:var(--color-surface) }
.product-mini-code>div>span { font:var(--size-9) var(--font-family-mono) }
.product-mini-code b { font:var(--font-weight-display) var(--size-29)/var(--line-height-1) var(--font-family-display) }
.product-mini-code i { font-style:normal; font-size:var(--size-14) }
.product-experience-grid .product-head { margin-bottom:var(--size-30) }
.product-feature-list { display:grid; gap:var(--size-18); color:var(--color-background); font-size:var(--size-15) }
.product-feature-list svg { color:var(--color-highlight) }
.product-experience-example { background:var(--color-surface); color:var(--color-primary); padding:var(--size-32); border-radius:var(--size-12); min-width:0 }
.product-example-kicker { font:var(--font-weight-medium) var(--size-10)/var(--line-height-1-7) var(--font-family-mono); letter-spacing:var(--letter-spacing-06em); color:var(--color-accent) }
.product-experience-example>h3 { font:var(--font-weight-display) var(--size-29)/var(--line-height-1-16) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-025em); margin:var(--size-18) 0 var(--size-26) }
.product-state-grid>div { padding:var(--size-20); background:var(--color-background); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-7); min-width:0 }
.product-state-grid .product-icon { width:var(--size-38); height:var(--size-38) }
.product-state-grid svg { width:var(--size-20); height:var(--size-20) }
.product-state-grid strong { display:block; font-size:var(--size-13); line-height:var(--line-height-1-6); margin:var(--size-15) 0 var(--size-7) }
.product-state-grid>div>span:last-child { font-size:var(--size-12); line-height:var(--line-height-1-7); display:block; color:var(--color-text-muted) }
.product-visual-note { font:var(--size-9)/var(--line-height-1-7) var(--font-family-mono); color:var(--color-text-muted); margin-top:var(--size-22) }
.product-handoff-grid .product-head { margin-bottom:var(--size-28) }
.product-handoff-points svg { width:var(--size-20); height:var(--size-20); color:var(--color-accent) }
.product-handoff-sheet { border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-10); background:var(--color-surface); padding:var(--size-34); box-shadow:var(--size-8) var(--size-8) 0 var(--color-surface-accent); min-width:0 }
.product-sheet-header>span { font:var(--font-weight-medium) var(--size-10)/var(--line-height-1-7) var(--font-family-mono) }
.product-handoff-sheet>h3 { font:var(--font-weight-display) var(--size-34)/var(--line-height-1-15) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-03em); color:var(--color-primary); margin:var(--size-28) 0 }
.product-spec-row>span { color:var(--color-text-muted) }
.product-spec-row>b { font-weight:var(--font-weight-medium); color:var(--color-primary) }
.product-spec-bottom { display:flex; gap:var(--size-20); align-items:center; justify-content:space-between; margin-top:var(--size-23); padding:var(--size-17); background:var(--color-surface-secondary); border-radius:var(--size-6) }
.product-spec-bottom svg { width:var(--size-19); height:var(--size-19) }
.product-spec-bottom>i { font-style:normal; color:var(--color-accent) }
.product-handoff-sheet figcaption { font:var(--size-9)/var(--line-height-1-7) var(--font-family-mono); color:var(--color-text-muted); margin-top:var(--size-18) }
.product-deliverables>article { background:var(--color-background); padding:var(--size-28); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-10) }
.product-deliverables h3 { font:var(--font-weight-bold) var(--size-19)/var(--line-height-1-4) var(--font-family-body); letter-spacing:var(--letter-spacing-negative-02em); color:var(--color-primary); margin:var(--size-20) 0 var(--size-15) }
.product-deliverables p { font-size:var(--size-14); line-height:var(--line-height-relaxed); color:var(--color-text-muted) }
.product-scope-note { font-size:var(--size-13); line-height:var(--line-height-relaxed); color:var(--color-text-muted); margin-top:var(--size-26); max-width:var(--size-900) }
.product-process>li { display:grid; grid-template-columns:var(--size-44) minmax(0,1fr); gap:var(--size-20); padding:var(--size-30); background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-10) }
.product-process-number { width:var(--size-44); height:var(--size-44); display:grid; place-items:center; font:var(--font-weight-medium) var(--size-11) var(--font-family-mono); background:var(--color-surface-accent); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-8); color:var(--color-primary) }
.product-process>li>div { display:flex; flex-direction:column }
.product-process h3 { font:var(--font-weight-bold) var(--size-20)/var(--line-height-1-4) var(--font-family-body); letter-spacing:var(--letter-spacing-negative-02em); color:var(--color-primary); margin:0 0 var(--size-14) }
.product-process p { font-size:var(--size-15); line-height:var(--line-height-relaxed); color:var(--color-text-muted); margin-bottom:var(--size-22) }
.product-process-output { display:block; background:var(--color-surface-secondary); padding:var(--size-12) var(--size-15); border-radius:var(--size-6); font:var(--font-weight-medium) var(--size-12)/var(--line-height-1-7) var(--font-family-body); color:var(--color-primary); margin-top:auto }
.product-work-list { border-top:var(--size-1) var(--border-style) var(--color-border-strong) }
.product-work-list h3 { font:var(--font-weight-display) var(--size-28)/var(--line-height-1-3) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-025em); color:var(--color-primary) }
.product-work-list p { font-size:var(--size-14); color:var(--color-text-muted) }
.product-work-more { margin-top:var(--size-32) }
.product-faq-grid .product-head { position:sticky; top:var(--size-180) }
.product-faqs details { background:none; border:0; border-radius:0 }
.product-faqs details+details { border-top:var(--size-1) var(--border-style) var(--color-border-strong) }
.product-faqs summary::-webkit-details-marker { display:none }
.product-faq-toggle:before { content:'+'; display:block; font:var(--font-weight-regular) var(--size-25)/var(--line-height-1) var(--font-family-body); width:var(--size-20); color:var(--color-accent) }
.product-faqs details[open] .product-faq-toggle:before { content:'−' }
.product-faqs details>div { padding:0 var(--size-37) var(--size-24) 0 }
.product-faqs details>div>p { font-size:var(--size-15); line-height:var(--line-height-1-85); color:var(--color-text-muted) }
.product-closing .product-head { margin-bottom:var(--size-25) }
.product-closing .product-head h2 { font-size:clamp(var(--size-35),3.6vw,var(--size-50)) }
.product-start-guide { background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-surface-accent); border-radius:var(--size-12); padding:var(--size-32); color:var(--color-primary); min-width:0 }
.product-start-guide h3 { font:var(--font-weight-display) var(--size-30)/var(--line-height-1-2) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-025em); margin:var(--size-17) 0 var(--size-25) }
.product-start-grid>div { padding:var(--size-20); background:var(--color-background); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-7); min-height:var(--size-145); display:flex; flex-direction:column; align-items:flex-start; gap:var(--size-17); min-width:0 }
.product-start-grid strong { font:var(--font-weight-medium) var(--size-13)/var(--line-height-1-6) var(--font-family-body) }
.product-start-guide>p:last-child { font-size:var(--size-12); line-height:var(--line-height-relaxed); color:var(--color-text-muted); margin-top:var(--size-24) }
.product-footer { background:var(--color-surface-footer); color:var(--color-surface-secondary); padding:var(--size-60) 0 var(--size-25) }
.product-footer .product-logo { color:var(--color-white) }
.product-footer-top>div { max-width:var(--size-460) }
.product-footer-top p { font-size:var(--size-14); line-height:var(--line-height-relaxed); margin:var(--size-22) 0 var(--size-16) }
.product-footer-top>div>a:last-child { font-size:var(--size-14) }
.product-footer a:hover { color:var(--color-white) }
@media (min-width:1500px) {
.product-hero h1 { font-size:var(--size-68) } }
@media (min-width:1500px) {
.product-player { padding:var(--size-30) } }
@media (min-width:1500px) {
.product-stage { height:var(--size-370) } }
@media (min-width:1500px) {
.product-site-art { height:var(--size-188) } }
@media (min-width:1500px) {
.product-mobile-copy h3 { font-size:var(--size-29) } }
@media (min-width:1500px) {
.product-phone { height:var(--size-306) } }
@media (max-width:1150px) {
.product-container { width:calc(100% - var(--size-64)) } }
@media (max-width:1150px) {
.product-hero h1 { font-size:var(--size-48) } }
@media (max-width:1150px) {
.product-player { padding:var(--size-21) } }
@media (max-width:1150px) {
.product-player-top>span { font-size:var(--size-8) } }
@media (max-width:1150px) {
.product-site-top { padding-inline:var(--size-15) } }
@media (max-width:1150px) {
.product-site-top>span { display:none } }
@media (max-width:1150px) {
.product-site-body h3 { font-size:var(--size-27) } }
@media (max-width:1150px) {
.product-site-art { padding:var(--size-15) var(--size-12) } }
@media (max-width:1150px) {
.product-site-art>b { font-size:var(--size-49) } }
@media (max-width:1150px) {
.product-site-art i { width:var(--size-19); height:var(--size-19) } }
@media (max-width:1150px) {
.product-site-bottom { padding-inline:var(--size-15); font-size:var(--size-7) } }
@media (max-width:1150px) {
.product-app-title h3 { font-size:var(--size-23) } }
@media (max-width:1150px) {
.product-app-body { padding-inline:var(--size-15) } }
@media (max-width:1150px) {
.product-app-row>b { font-size:var(--size-9) } }
@media (max-width:1150px) {
.product-phone { width:var(--size-145); flex-basis:var(--size-145) } }
@media (max-width:1150px) {
.product-mobile-copy h3 { font-size:var(--size-22) } }
@media (max-width:1150px) {
.product-hero-meta li { font-size:var(--size-11) } }
@media (max-width:1150px) {
.product-experience-example { padding:var(--size-26) } }
@media (max-width:1150px) {
.product-state-grid>div { padding:var(--size-17) } }
@media (max-width:1150px) {
.product-service-content { padding:var(--size-28) } }
@media (max-width:1150px) {
.product-service-featured .product-service-content { padding:var(--size-32) } }
@media (max-width:1150px) {
.product-service-featured .product-service-art { margin:var(--size-26) var(--size-26) var(--size-26) 0 } }
@media (max-width:950px) {
.product-header-inner { height:var(--size-78) } }
@media (max-width:950px) {
.product-header-cta { margin-left:auto } }
@media (max-width:950px) {
.product-mainnav { position:absolute; top:var(--size-78); left:0; right:0; display:none; background:var(--color-background); padding:var(--size-25) var(--size-32); border-bottom:var(--size-1) var(--border-style) var(--color-border-strong); flex-direction:column; gap:var(--size-18) } }
@media (max-width:950px) {
.product-mainnav.is-open { display:flex } }
@media (max-width:950px) {
.product-menu { display:block } }
@media (max-width:950px) {
.product-sectionnav { top:var(--size-78) } }
@media (max-width:950px) {
.product-hero-copy { max-width:var(--size-780) } }
@media (max-width:950px) {
.product-hero h1 { font-size:clamp(var(--size-48),6.4vw,var(--size-62)) } }
@media (max-width:950px) {
.product-hero .product-lead { max-width:var(--size-700); font-size:var(--size-17) } }
@media (max-width:950px) {
.product-hero-meta li { font-size:var(--size-13) } }
@media (max-width:950px) {
.product-player { max-width:var(--size-650); justify-self:center; padding:var(--size-28) } }
@media (max-width:950px) {
.product-stage { height:var(--size-370) } }
@media (max-width:950px) {
.product-player-top>span { font-size:var(--size-10); max-width:none } }
@media (max-width:950px) {
.product-site-top>span { display:block } }
@media (max-width:950px) {
.product-site-body h3 { font-size:var(--size-36) } }
@media (max-width:950px) {
.product-site-art { height:var(--size-190); padding:var(--size-20) } }
@media (max-width:950px) {
.product-site-art>b { font-size:var(--size-65) } }
@media (max-width:950px) {
.product-site-art i { width:var(--size-27); height:var(--size-27) } }
@media (max-width:950px) {
.product-site-art>small { font-size:var(--size-8) } }
@media (max-width:950px) {
.product-site-bottom { font-size:var(--size-9); padding:var(--size-13) var(--size-25) } }
@media (max-width:950px) {
.product-mobile-copy h3 { font-size:var(--size-31) } }
@media (max-width:950px) {
.product-phone { width:var(--size-170); flex-basis:var(--size-170); height:var(--size-320); padding-inline:var(--size-14) } }
@media (max-width:950px) {
.product-phone h4 { font-size:var(--size-25) } }
@media (max-width:950px) {
.product-phone-course { padding:var(--size-13) } }
@media (max-width:950px) {
.product-phone-course strong { font-size:var(--size-9) } }
@media (max-width:950px) {
.product-app-body { padding:var(--size-27) } }
@media (max-width:950px) {
.product-app-title h3 { font-size:var(--size-30) } }
@media (max-width:950px) {
.product-app-row>b { font-size:var(--size-12) } }
@media (max-width:950px) {
.product-app-row>small { font-size:var(--size-10) } }
@media (max-width:950px) {
.product-app-end { font-size:var(--size-11) } }
@media (max-width:950px) {
.product-sectionnav>.product-container>span { display:none } }
@media (max-width:950px) {
.product-section { padding:var(--size-75) 0 } }
@media (max-width:950px) {
.product-needs p { font-size:var(--size-15) } }
@media (max-width:950px) {
.product-needs h3 { font-size:var(--size-19) } }
@media (max-width:950px) {
.product-head h2 { font-size:var(--size-42) } }
@media (max-width:950px) {
.product-service-content h3 { font-size:var(--size-21) } }
@media (max-width:950px) {
.product-service-content>p { font-size:var(--size-15) } }
@media (max-width:950px) {
.product-service-featured .product-service-art { padding:var(--size-20) } }
@media (max-width:950px) {
.product-experience-example { max-width:var(--size-650); width:100% } }
@media (max-width:950px) {
.product-handoff-sheet { max-width:var(--size-650); width:100% } }
@media (max-width:950px) {
.product-start-guide { max-width:var(--size-650); width:100% } }
@media (max-width:950px) {
.product-state-grid>div { padding:var(--size-24) } }
@media (max-width:950px) {
.product-state-grid strong { font-size:var(--size-15) } }
@media (max-width:950px) {
.product-state-grid>div>span:last-child { font-size:var(--size-14) } }
@media (max-width:950px) {
.product-work-list h3 { grid-column:1 } }
@media (max-width:950px) {
.product-work-list p { grid-column:1 } }
@media (max-width:950px) {
.product-work-list .text-link { grid-column:2; grid-row:1/3 } }
@media (max-width:950px) {
.product-process h3 { font-size:var(--size-18) } }
@media (max-width:950px) {
.product-process p { font-size:var(--size-14) } }
@media (max-width:950px) {
.product-faq-grid h2 { font-size:var(--size-36) } }
@media (max-width:950px) {
.product-faqs summary { font-size:var(--size-15) } }
@media (max-width:950px) {
.product-footer-bottom { font-size:var(--size-10) } }
@media (max-width:650px) {
.product-container { width:calc(100% - var(--size-40)) } }
@media (max-width:650px) {
.product-logo { font-size:var(--size-31) } }
@media (max-width:650px) {
.product-logo>span { font-size:var(--size-10) } }
@media (max-width:650px) {
.product-header-cta { display:none } }
@media (max-width:650px) {
.product-menu { margin-left:auto } }
@media (max-width:650px) {
.product-mainnav { top:var(--size-72); padding-inline:var(--size-20) } }
@media (max-width:650px) {
.product-sectionnav { top:var(--size-72) } }
@media (max-width:650px) {
.product-sectionnav>.product-container { min-height:var(--size-55) } }
@media (max-width:650px) {
.product-hero { padding:var(--size-43) 0 var(--size-58) } }
@media (max-width:650px) {
.product-hero h1 { font-size:clamp(var(--size-38),8.3vw,var(--size-51)); letter-spacing:var(--letter-spacing-negative-04em) } }
@media (max-width:650px) {
.product-hero .product-lead { font-size:var(--size-15); line-height:var(--line-height-1-85) } }
@media (max-width:650px) {
.product-hero-meta li { font-size:var(--size-12) } }
@media (max-width:650px) {
.product-player { padding:var(--size-21) var(--size-17); box-shadow:var(--size-5) var(--size-5) 0 var(--color-surface-accent) } }
@media (max-width:650px) {
.product-player-top>span { font-size:var(--size-8); max-width:24ch } }
@media (max-width:650px) {
.product-play { font-size:var(--size-9); padding:var(--size-7) var(--size-8) } }
@media (max-width:650px) {
.product-tabs button { font-size:var(--size-10); padding:var(--size-10) var(--size-5) } }
@media (max-width:650px) {
.product-stage { height:var(--size-330) } }
@media (max-width:650px) {
.product-site-top { height:var(--size-52); padding:var(--size-10) var(--size-14) } }
@media (max-width:650px) {
.product-site-top>strong { font-size:var(--size-21) } }
@media (max-width:650px) {
.product-site-top>span { font-size:var(--size-7) } }
@media (max-width:650px) {
.product-site-body small { font-size:var(--size-7) } }
@media (max-width:650px) {
.product-site-body h3 { font-size:var(--size-26) } }
@media (max-width:650px) {
.product-site-body p { font-size:var(--size-9) } }
@media (max-width:650px) {
.product-ui-button { font-size:var(--size-7); padding:var(--size-8); margin-top:var(--size-14) } }
@media (max-width:650px) {
.product-site-art { height:var(--size-157); padding:var(--size-14) var(--size-10) } }
@media (max-width:650px) {
.product-site-art>b { font-size:var(--size-44) } }
@media (max-width:650px) {
.product-site-art i { width:var(--size-17); height:var(--size-17) } }
@media (max-width:650px) {
.product-site-art>small { font-size:var(--size-6) } }
@media (max-width:650px) {
.product-site-bottom { font-size:var(--size-7); padding:var(--size-11) var(--size-14) } }
@media (max-width:650px) {
.product-app-shell>aside { padding-inline:var(--size-6) } }
@media (max-width:650px) {
.product-app-shell>aside svg { width:var(--size-18); height:var(--size-18) } }
@media (max-width:650px) {
.product-app-body { padding:var(--size-20) var(--size-13) } }
@media (max-width:650px) {
.product-app-title h3 { font-size:var(--size-24) } }
@media (max-width:650px) {
.product-app-title>svg { width:var(--size-18); height:var(--size-18) } }
@media (max-width:650px) {
.product-app-stats>span { font-size:var(--size-8); padding:var(--size-10) } }
@media (max-width:650px) {
.product-app-stats strong { font-size:var(--size-9) } }
@media (max-width:650px) {
.product-app-row>b { font-size:var(--size-9) } }
@media (max-width:650px) {
.product-app-row>small { font-size:var(--size-8) } }
@media (max-width:650px) {
.product-app-end { font-size:var(--size-9) } }
@media (max-width:650px) {
.product-mobile-copy>small { font-size:var(--size-7) } }
@media (max-width:650px) {
.product-mobile-copy h3 { font-size:var(--size-23); margin-bottom:var(--size-20) } }
@media (max-width:650px) {
.product-mobile-copy svg { width:var(--size-12); height:var(--size-12) } }
@media (max-width:650px) {
.product-phone { width:var(--size-140); flex-basis:var(--size-140); height:var(--size-290); padding:var(--size-15) var(--size-10) var(--size-10) } }
@media (max-width:650px) {
.product-phone h4 { font-size:var(--size-21) } }
@media (max-width:650px) {
.product-phone-course { padding:var(--size-9) } }
@media (max-width:650px) {
.product-phone-course strong { font-size:var(--size-7) } }
@media (max-width:650px) {
.product-phone-nav { margin-top:var(--size-10) } }
@media (max-width:650px) {
.product-player figcaption>strong { font-size:var(--size-11); min-height:var(--size-38) } }
@media (max-width:650px) {
.product-player figcaption>span { font-size:var(--size-8) } }
@media (max-width:650px) {
.product-section { padding:var(--size-58) 0 } }
@media (max-width:650px) {
.product-head { margin-bottom:var(--size-30) } }
@media (max-width:650px) {
.product-head h2 { font-size:var(--size-34) } }
@media (max-width:650px) {
.product-head>.product-lead { font-size:var(--size-15); margin-top:var(--size-21) } }
@media (max-width:650px) {
.product-needs .product-icon { grid-row:1/3 } }
@media (max-width:650px) {
.product-needs h3 { margin:0 0 var(--size-10); font-size:var(--size-20) } }
@media (max-width:650px) {
.product-needs p { grid-column:2; font-size:var(--size-15) } }
@media (max-width:650px) {
.product-service-featured { display:flex; grid-column:auto } }
@media (max-width:650px) {
.product-service-featured .product-service-art { order:0; margin:0; border-radius:0; min-height:var(--size-240); height:var(--size-240); padding:var(--size-25); background:var(--color-surface); border:0; border-bottom:var(--size-1) var(--border-style) var(--color-border-strong) } }
@media (max-width:650px) {
.product-service-featured .product-service-content { order:1; padding:var(--size-26) } }
@media (max-width:650px) {
.product-service-featured .product-service-content h3 { font-size:var(--size-23) } }
@media (max-width:650px) {
.product-service-content { padding:var(--size-26) } }
@media (max-width:650px) {
.product-service-content h3 { font-size:var(--size-21) } }
@media (max-width:650px) {
.product-service-content>p { font-size:var(--size-15) } }
@media (max-width:650px) {
.product-service-content>ul>li { font-size:var(--size-13) } }
@media (max-width:650px) {
.product-service-art { height:var(--size-160); flex-basis:var(--size-160); padding:var(--size-20) } }
@media (max-width:650px) {
.product-map-grid>span { min-height:var(--size-43) } }
@media (max-width:650px) {
.product-product-map { max-width:var(--size-290) } }
@media (max-width:650px) {
.product-product-map>div:first-child { padding:var(--size-13) var(--size-20); font-size:var(--size-14) } }
@media (max-width:650px) {
.product-map-line { height:var(--size-19) } }
@media (max-width:650px) {
.product-mini-flow>span { min-width:var(--size-64) } }
@media (max-width:650px) {
.product-mini-code>div { width:var(--size-72) } }
@media (max-width:650px) {
.product-experience-example { padding:var(--size-25) var(--size-22) } }
@media (max-width:650px) {
.product-experience-example h3 { font-size:var(--size-27) } }
@media (max-width:650px) {
.product-state-grid>div { padding:var(--size-17) } }
@media (max-width:650px) {
.product-state-grid strong { font-size:var(--size-12) } }
@media (max-width:650px) {
.product-state-grid>div>span:last-child { font-size:var(--size-12) } }
@media (max-width:650px) {
.product-handoff-sheet { padding:var(--size-27) var(--size-22); box-shadow:var(--size-5) var(--size-5) 0 var(--color-surface-accent) } }
@media (max-width:650px) {
.product-handoff-sheet>h3 { font-size:var(--size-30) } }
@media (max-width:650px) {
.product-handoff-points svg { margin-top:var(--size-3) } }
@media (max-width:650px) {
.product-deliverables .product-icon { grid-row:1/3 } }
@media (max-width:650px) {
.product-deliverables h3 { margin:0 0 var(--size-12); font-size:var(--size-18) } }
@media (max-width:650px) {
.product-deliverables p { grid-column:2 } }
@media (max-width:650px) {
.product-process-number { width:var(--size-40); height:var(--size-40) } }
@media (max-width:650px) {
.product-process h3 { font-size:var(--size-19) } }
@media (max-width:650px) {
.product-process p { font-size:var(--size-14) } }
@media (max-width:650px) {
.product-process-output { font-size:var(--size-11); padding:var(--size-12) } }
@media (max-width:650px) {
.product-work-list>article { display:block; padding:var(--size-26) 0 } }
@media (max-width:650px) {
.product-work-list h3 { font-size:var(--size-27); margin-bottom:var(--size-12) } }
@media (max-width:650px) {
.product-work-list p { font-size:var(--size-14); margin-bottom:var(--size-19) } }
@media (max-width:650px) {
.product-faq-grid .product-head { position:static } }
@media (max-width:650px) {
.product-faq-grid h2 { font-size:var(--size-34) } }
@media (max-width:650px) {
.product-faqs details>div>p { font-size:var(--size-14) } }
@media (max-width:650px) {
.product-closing .product-head h2 { font-size:var(--size-35) } }
@media (max-width:650px) {
.product-closing .product-lead { font-size:var(--size-15) } }
@media (max-width:650px) {
.product-start-guide { padding:var(--size-25) var(--size-22) } }
@media (max-width:650px) {
.product-start-guide h3 { font-size:var(--size-28) } }
@media (max-width:650px) {
.product-start-grid strong { font-size:var(--size-12) } }
@media (max-width:650px) {
.product-start-grid .product-icon { width:var(--size-38); height:var(--size-38) } }
@media (max-width:650px) {
.product-start-grid svg { width:var(--size-21); height:var(--size-21) } }
@media (max-width:650px) {
.product-footer { padding-top:var(--size-48) } }
@media (max-width:360px) {
.product-container { width:calc(100% - var(--size-32)) } }
@media (max-width:360px) {
.product-hero h1 { font-size:var(--size-36) } }
@media (max-width:360px) {
.product-player { padding:var(--size-18) var(--size-13) } }
@media (max-width:360px) {
.product-mobile-copy h3 { font-size:var(--size-21) } }
@media (max-width:360px) {
.product-phone { width:var(--size-125); flex-basis:var(--size-125) } }
@media (max-width:360px) {
.product-site-top>span { display:none } }
@media (max-width:360px) {
.product-site-body h3 { font-size:var(--size-24) } }
@media (max-width:360px) {
.product-tabs button { font-size:var(--size-9) } }
@media (max-width:360px) {
.product-mini-code>div { width:var(--size-65) } }
@media (max-width:360px) {
.product-start-grid>div { padding:var(--size-14) } }
@media (max-width:360px) {
.product-start-guide { padding-inline:var(--size-18) } }
@media (max-width:360px) {
.product-state-grid .product-icon { grid-row:1/3 } }
@media (max-width:360px) {
.product-state-grid strong { margin:0 0 var(--size-5) } }
@media (max-width:360px) {
.product-state-grid>div>span:last-child { grid-column:2 } }
@media print {
.product-header { display:none } }
@media print {
.product-sectionnav { display:none } }
@media print {
.product-footer { display:none } }
@media print {
.product-menu { display:none } }
@media print {
.product-play { display:none } }
@media print {
.product-tabs { display:none } }
@media print {
.product-progress { display:none } }
@media print {
.product-section { padding:var(--size-30) 0 } }
@media print {
.product-hero { padding:var(--size-30) 0 } }
@media print {
.product-container { width:94% } }
@media print {
.product-service { break-inside:avoid } }
@media print {
.product-process>li { break-inside:avoid } }
@media print {
.product-dark { print-color-adjust:exact; -webkit-print-color-adjust:exact } }
@media print {
.product-player { print-color-adjust:exact; -webkit-print-color-adjust:exact } }
@media print {
.product-service-featured { print-color-adjust:exact; -webkit-print-color-adjust:exact } }
.product-site-body>div:first-child { line-height:var(--line-height-art-1-3) }
.product-phone { line-height:var(--line-height-art-1-4) }
.product-phone>small { display:block; line-height:var(--line-height-art-1-4) }
.product-app-end { margin-top:var(--size-10) }
@media (min-width:651px) and (max-width:950px) {
.product-app-body { padding:var(--size-20) } }
.product-service { background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-12); overflow:hidden; min-width:0; display:flex; flex-direction:column }
.product-split>.product-head { margin:0 }
.product-hero { padding:var(--size-74) 0 var(--size-80) }
.product-hero h1 { font:var(--font-weight-display) clamp(var(--size-44),4.7vw,var(--size-68))/var(--line-height-1-09) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-045em); color:var(--color-primary); margin:0 0 var(--size-26) }
.product-hero h1 em { color:var(--color-accent); font-weight:var(--font-weight-regular) }
.product-hero .product-lead { font-size:var(--size-16) }
.product-board { background:var(--color-primary); padding:var(--size-28); border-radius:var(--size-16); color:var(--color-white); min-width:0 }
.product-caption { font:var(--font-weight-medium) var(--size-10)/var(--line-height-1-7) var(--font-family-mono); letter-spacing:var(--letter-spacing-06em); text-transform:uppercase }
.product-browser { background:var(--color-surface); color:var(--color-primary); border-radius:var(--size-9); overflow:hidden }
.product-chrome { padding:var(--size-12) var(--size-18); background:var(--color-surface-secondary); display:flex; justify-content:space-between; font-size:var(--size-10) }
.product-screen { padding:var(--size-25) }
.product-brand>small { font-size:var(--size-9) }
.product-screen-hero h3 { font:var(--font-weight-display) var(--size-31)/var(--line-height-1-12) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-03em) }
.product-screen-hero p { font-size:var(--size-11); line-height:var(--line-height-1-7); margin-top:var(--size-12) }
.product-art { background:var(--color-surface-secondary); aspect-ratio:1; display:grid; place-content:center; text-align:center; border-radius:var(--size-6) }
.product-art>b { font:var(--font-weight-display) var(--size-69)/var(--line-height-1) var(--font-family-display) }
.product-art>span { font-size:var(--size-9); margin-top:var(--size-12) }
.product-fake-button { display:inline-flex; background:var(--color-primary); color:var(--color-white); padding:var(--size-8) var(--size-12); border-radius:var(--size-4); font-size:var(--size-10); margin-top:var(--size-17); gap:var(--size-10); align-items:center }
.product-fake-button svg { width:var(--size-14); height:var(--size-14) }
.product-strip span { padding:var(--size-10) var(--size-5); background:var(--color-background); text-align:center; font-size:var(--size-9) }
.product-board-bottom svg { width:var(--size-20); height:var(--size-20); color:var(--color-highlight) }
.product-note { font-size:var(--size-12); line-height:var(--line-height-1-7); color:var(--color-text-muted); margin-top:var(--size-20) }
.product-board>.product-note { color:var(--color-surface-secondary); font-size:var(--size-10) }
.product-overview h3 { font-size:var(--size-22); font-weight:var(--font-weight-bold); margin:var(--size-17) 0 var(--size-12); line-height:var(--line-height-art-1-4) }
.product-overview p { font-size:var(--size-15) }
.product-card { background:var(--color-surface); border-radius:var(--size-10); padding:var(--size-30); display:flex; flex-direction:column; min-width:0 }
.product-card h3 { font:var(--font-weight-bold) var(--size-21)/var(--line-height-1-4) var(--font-family-body); margin:var(--size-20) 0 var(--size-14) }
.product-card p { font-size:var(--size-14); line-height:var(--line-height-1-85); margin-bottom:var(--size-23) }
.product-card .product-delivery { font-size:var(--size-12); line-height:var(--line-height-1-7); background:var(--color-background); padding:var(--size-15); margin-top:auto; border-radius:var(--size-5) }
.product-delivery b { display:block; font-size:var(--size-10); letter-spacing:var(--letter-spacing-05em); text-transform:uppercase; color:var(--color-accent); margin-bottom:var(--size-5) }
.product-journey article { position:relative; background:var(--color-surface); padding:var(--size-27) var(--size-23); border-radius:var(--size-8); color:var(--color-primary) }
.product-journey article:not(:last-child):after { content:'→'; position:absolute; right:var(--length-px-negative-20); top:var(--size-40); width:var(--size-18); text-align:center; color:var(--color-highlight); font-size:var(--size-22) }
.product-journey .product-step { font:var(--font-weight-medium) var(--size-11) var(--font-family-mono); color:var(--color-accent) }
.product-journey h3 { font-size:var(--size-21); margin:var(--size-22) 0 var(--size-12); line-height:var(--line-height-art-1-3) }
.product-journey p { font-size:var(--size-14); line-height:var(--line-height-relaxed) }
.product-question { font:var(--font-weight-display) var(--size-23)/var(--line-height-1-35) var(--font-family-display); margin:var(--size-22) 0 0; padding:var(--size-19) 0 0; border-top:var(--size-1) var(--border-style) var(--color-border-strong) }
.product-flow { background:var(--color-surface); border-radius:var(--size-12); padding:var(--size-30) }
.product-flow>h3 { font:var(--font-weight-display) var(--size-29)/var(--line-height-1-2) var(--font-family-display); margin-bottom:var(--size-22) }
.product-flow-row { display:flex; align-items:center; gap:var(--size-16); padding:var(--size-17) var(--size-20); background:var(--color-background); border-radius:var(--size-6); min-height:var(--size-85) }
.product-flow-row b { font-size:var(--size-15) }
.product-flow-row small { font-size:var(--size-12); line-height:var(--line-height-1-6); color:var(--color-text-muted) }
.product-flow-result { background:var(--color-surface-secondary); padding:var(--size-18); margin-top:var(--size-22); font-size:var(--size-13); border-radius:var(--size-5) }
.product-points svg { margin-top:var(--size-3); color:var(--color-accent) }
.product-visible>article { padding:var(--size-36); background:var(--color-background); border-radius:var(--size-10) }
.product-visible h3 { font:var(--font-weight-bold) var(--size-23)/var(--line-height-1-3) var(--font-family-body); margin:var(--size-18) 0 }
.product-visible p { font-size:var(--size-15) }
.product-visible li svg { width:var(--size-19); height:var(--size-19); margin-top:var(--size-4) }
.product-snippet { background:var(--color-surface); padding:var(--size-22); border-radius:var(--size-6); margin-top:var(--size-26) }
.product-snippet small { font-size:var(--size-10); display:block; color:var(--color-accent); margin-bottom:var(--size-9) }
.product-snippet strong { font-size:var(--size-16); display:block; margin-bottom:var(--size-9) }
.product-snippet p { font-size:var(--size-12) }
.product-source a { border-bottom:var(--size-1) var(--border-style) currentColor }
.product-analysis { background:var(--color-surface); padding:var(--size-30); border-radius:var(--size-12) }
.product-analysis h3 { font-size:var(--size-21); margin:var(--size-20) 0 var(--size-12); line-height:var(--line-height-art-1-4) }
.product-analysis>p { font-size:var(--size-14) }
.product-heat { margin-top:var(--size-25); padding:var(--size-23); background:var(--color-background); border-radius:var(--size-6); position:relative; overflow:hidden; min-height:var(--size-235) }
.product-heat-head { width:75%; height:var(--size-12); background:var(--color-surface-accent); margin-bottom:var(--size-13) }
.product-heat-line { width:90%; height:var(--size-6); background:var(--color-surface-accent); margin-bottom:var(--size-9) }
.product-heat-panels span { height:var(--size-50); background:var(--color-surface-accent); border-radius:var(--size-3) }
.product-heat-cta { display:inline-block; padding:var(--size-9) var(--size-18); background:var(--color-primary); color:var(--color-white); font-size:var(--size-11); border-radius:var(--size-4); position:relative; z-index:2 }
.product-spot { position:absolute; left:var(--size-24); bottom:var(--size-21); width:var(--size-150); height:var(--size-100); border-radius:50%; background:radial-gradient(ellipse,var(--color-illustration-e68d3d90) 0%,var(--color-illustration-dce75560) 45%,transparent 70%); z-index:1; pointer-events:none }
.product-spot.product-second { left:auto; right:var(--size-20); bottom:var(--size-80); width:var(--size-120); height:var(--size-90); opacity:.7 }
.product-legend i { width:var(--size-55); height:var(--size-7); border-radius:var(--size-9); background:linear-gradient(90deg,var(--color-surface-accent),var(--color-illustration-dce755),var(--color-illustration-e68d3d)) }
.product-metric { display:grid; grid-template-columns:var(--size-40) 1fr; gap:var(--size-12); align-items:center; background:var(--color-background); border-radius:var(--size-5); padding:var(--size-16) }
.product-metric strong { font-size:var(--size-13); display:block }
.product-metric small { font-size:var(--size-11); color:var(--color-text-muted); display:block; margin-top:var(--size-3) }
.product-metric svg { color:var(--color-accent) }
.product-insight { margin-top:var(--size-24); background:var(--color-primary); color:var(--color-white); border-radius:var(--size-7); padding:var(--size-22); display:grid; grid-template-columns:1fr 1fr; gap:var(--size-30); font-size:var(--size-14) }
.product-insight b { color:var(--color-highlight); display:block; font-size:var(--size-10); letter-spacing:var(--letter-spacing-04em); margin-bottom:var(--size-6) }
.product-kit { background:var(--color-primary); padding:var(--size-30); border-radius:var(--size-12); color:var(--color-white) }
.product-kit-inner { padding:var(--size-27); background:var(--color-surface); border-radius:var(--size-7); color:var(--color-primary) }
.product-kit-header>b { font:var(--font-weight-display) var(--size-45) var(--font-family-display) }
.product-swatches i { height:var(--size-43); background:var(--color-primary); border-radius:var(--size-4) }
.product-swatches i:nth-child(2) { background:var(--color-accent) }
.product-swatches i:nth-child(3) { background:var(--color-surface-secondary) }
.product-swatches i:nth-child(4) { background:var(--color-highlight) }
.product-kit-buttons>span:first-child { background:var(--color-primary); color:var(--color-white); padding:var(--size-10) var(--size-15); border-radius:var(--size-4) }
.product-kit-field { margin-top:var(--size-23); padding:var(--size-13); background:var(--color-background); font-size:var(--size-12) }
.product-kit-labels span { padding:var(--size-13); background:var(--color-background); font-size:var(--size-11); text-align:center }
.product-kit>.product-note { color:var(--color-surface-secondary); font-size:var(--size-11) }
.product-package article { padding:var(--size-34); background:var(--color-surface); border-radius:var(--size-9) }
.product-package h3 { font-size:var(--size-22); margin:var(--size-16) 0 }
.product-package p { font-size:var(--size-15) }
.product-package li svg { width:var(--size-20); height:var(--size-20); margin-top:var(--size-3) }
.product-package .product-tag { font:var(--font-weight-medium) var(--size-10) var(--font-family-mono); color:var(--color-accent); letter-spacing:var(--letter-spacing-05em) }
.product-cta { background:var(--color-surface); color:var(--color-primary); border-radius:var(--size-10); padding:var(--size-30) }
.product-cta h3 { font:var(--font-weight-display) var(--size-30)/var(--line-height-1-2) var(--font-family-display); margin-bottom:var(--size-25) }
.product-cta-grid>div { padding:var(--size-22); background:var(--color-background); display:flex; flex-direction:column; gap:var(--size-18); min-height:var(--size-145); border-radius:var(--size-6); font-size:var(--size-14) }
.product-closing .product-lead { color:var(--color-background) }
.product-closing .product-head { margin-bottom:0 }
.product-closing .product-note { color:var(--color-background) }
@media (max-width:1100px) {
.product-journey article:after { display:none } }
@media (max-width:1100px) {
.product-screen { padding:var(--size-20) } }
@media (max-width:1100px) {
.product-screen-hero h3 { font-size:var(--size-27) } }
@media (max-width:1100px) {
.product-board { padding:var(--size-23) } }
@media (max-width:1100px) {
.product-art>b { font-size:var(--size-54) } }
@media (max-width:950px) {
.product-hero h1 { font-size:var(--size-58) } }
@media (max-width:950px) {
.product-board { max-width:var(--size-650); width:100%; margin:auto } }
@media (max-width:950px) {
.product-screen-hero h3 { font-size:var(--size-37) } }
@media (max-width:950px) {
.product-screen-hero p { font-size:var(--size-13) } }
@media (max-width:950px) {
.product-board-bottom>span { font-size:var(--size-13) } }
@media (max-width:950px) {
.product-art>b { font-size:var(--size-80) } }
@media (max-width:650px) {
.product-hero { padding:var(--size-45) 0 var(--size-50) } }
@media (max-width:650px) {
.product-hero h1 { font-size:var(--size-42) } }
@media (max-width:650px) {
.product-hero .product-lead { font-size:var(--size-15) } }
@media (max-width:650px) {
.product-card { padding:var(--size-25) } }
@media (max-width:650px) {
.product-analysis { padding:var(--size-25) } }
@media (max-width:650px) {
.product-visible>article { padding:var(--size-25) } }
@media (max-width:650px) {
.product-package article { padding:var(--size-25) } }
@media (max-width:650px) {
.product-card p { font-size:var(--size-15) } }
@media (max-width:650px) {
.product-card h3 { font-size:var(--size-21) } }
@media (max-width:650px) {
.product-board { padding:var(--size-19) } }
@media (max-width:650px) {
.product-screen { padding:var(--size-18) } }
@media (max-width:650px) {
.product-screen-hero h3 { font-size:var(--size-27) } }
@media (max-width:650px) {
.product-screen-hero p { font-size:var(--size-11) } }
@media (max-width:650px) {
.product-art>b { font-size:var(--size-53) } }
@media (max-width:650px) {
.product-board-bottom svg { width:var(--size-17); height:var(--size-17) } }
@media (max-width:650px) {
.product-strip span { font-size:var(--size-8) } }
@media (max-width:650px) {
.product-brand>small { font-size:var(--size-8) } }
@media (max-width:650px) {
.product-journey article { padding:var(--size-25) } }
@media (max-width:650px) {
.product-journey h3 { margin-top:var(--size-13) } }
@media (max-width:650px) {
.product-question { font-size:var(--size-22) } }
@media (max-width:650px) {
.product-flow { padding:var(--size-23) } }
@media (max-width:650px) {
.product-kit { padding:var(--size-23) } }
@media (max-width:650px) {
.product-cta { padding:var(--size-23) } }
@media (max-width:650px) {
.product-flow-row b { font-size:var(--size-14) } }
@media (max-width:650px) {
.product-cta-grid>div { padding:var(--size-17); font-size:var(--size-13) } }
@media (max-width:650px) {
.product-kit-inner { padding:var(--size-22) } }
@media (max-width:650px) {
.product-overview>article { padding-bottom:var(--size-12) } }
@media (max-width:650px) {
.product-board>.product-caption { font-size:var(--size-9) } }
.product-stage { background:var(--color-surface); border-radius:var(--size-8); padding:var(--size-24); color:var(--color-primary); min-height:var(--size-390) }
.product-demo-nav small { font:var(--font-weight-medium) var(--size-9) var(--font-family-mono) }
.product-stage h3 { font:var(--font-weight-display) var(--size-29)/var(--line-height-1-2) var(--font-family-display); margin:var(--size-21) 0 var(--size-9) }
.product-stage p { font-size:var(--size-12); line-height:var(--line-height-1-7) }
.product-options>div { padding:var(--size-16); background:var(--color-background); border-radius:var(--size-5); font-size:var(--size-12) }
.product-options strong { display:block; margin-bottom:var(--size-6) }
.product-options small { font-size:var(--size-10) }
.product-options>div:first-child { background:var(--color-surface-secondary); box-shadow:inset 0 0 0 var(--size-1) var(--color-accent) }
.product-slots span { padding:var(--size-6) var(--size-14); background:var(--color-background); font-size:var(--size-11); border-radius:var(--size-4) }
.product-slots span:first-child { background:var(--color-primary); color:var(--color-white) }
.product-demo-bottom b { background:var(--color-primary); color:var(--color-white); padding:var(--size-10) var(--size-18); border-radius:var(--size-4); font-size:var(--size-11) }
.product-toggle button { border:var(--size-1) var(--border-style) var(--color-border); background:transparent; color:var(--color-white); padding:var(--size-9) var(--size-15); font-size:var(--size-12); border-radius:var(--size-5) }
.product-toggle button[aria-selected=true] { background:var(--color-highlight); color:var(--color-primary); border-color:var(--color-highlight) }
.product-toggle button:focus-visible { outline-color:var(--color-white) }
.product-phone { border:var(--size-2) var(--border-style) var(--color-primary); border-radius:var(--size-23); background:var(--color-background); padding:var(--size-17) var(--size-15) }
.product-phone-top { display:flex; justify-content:space-between; font-size:var(--size-9); margin-bottom:var(--size-19) }
.product-phone h4 { font:var(--font-weight-display) var(--size-24)/var(--line-height-1-2) var(--font-family-display); margin-bottom:var(--size-15) }
.product-phone-row { background:var(--color-surface); padding:var(--size-11); margin-bottom:var(--size-9); font-size:var(--size-11); border-radius:var(--size-5) }
.product-phone-row strong { display:block }
.product-phone-row small { display:block }
.product-phone-row small { font-size:var(--size-9); margin-top:var(--size-3) }
.product-phone-action { background:var(--color-primary); color:var(--color-white); text-align:center; padding:var(--size-10); border-radius:var(--size-5); font-size:var(--size-10) }
.product-mobile-copy>p { margin-top:var(--size-15) }
.product-mobile-copy svg { color:var(--color-accent); margin-bottom:var(--size-15) }
.product-caption { min-height:var(--size-42); margin-top:var(--size-18); font-size:var(--size-12); line-height:var(--line-height-1-7); color:var(--color-white) }
.product-compare article { background:var(--color-surface); border-radius:var(--size-10); padding:var(--size-32) }
.product-compare h3 { font:var(--font-weight-display) var(--size-32)/var(--line-height-1-2) var(--font-family-display); margin:var(--size-22) 0 var(--size-17) }
.product-compare p { font-size:var(--size-15) }
.product-compare li svg { width:var(--size-20); height:var(--size-20); margin-top:var(--size-4) }
.product-scope article { background:var(--color-background); border-radius:var(--size-8); padding:var(--size-28); display:grid; grid-template-columns:var(--size-44) 1fr; gap:0 var(--size-20) }
.product-scope .product-icon { grid-row:1/4 }
.product-scope h3 { font:var(--font-weight-bold) var(--size-21)/var(--line-height-1-4) var(--font-family-body); margin-bottom:var(--size-13) }
.product-scope p { font-size:var(--size-15); margin-bottom:var(--size-20) }
.product-scope small { font-size:var(--size-12); color:var(--color-accent); font-weight:var(--font-weight-medium) }
.product-states>div { background:var(--color-surface); color:var(--color-primary); padding:var(--size-23); border-radius:var(--size-7) }
.product-states h3 { font-size:var(--size-17); margin:var(--size-18) 0 var(--size-10) }
.product-states p { font-size:var(--size-13); line-height:var(--line-height-relaxed) }
.product-prototype { background:var(--color-surface); border-radius:var(--size-10); padding:var(--size-28); color:var(--color-primary) }
.product-prototype h3 { font:var(--font-weight-display) var(--size-28)/var(--line-height-1-2) var(--font-family-display); margin-bottom:var(--size-23) }
.product-proto-row { display:flex; gap:var(--size-15); align-items:center; background:var(--color-background); padding:var(--size-17); border-radius:var(--size-5) }
.product-proto-row b { font-size:var(--size-14) }
.product-proto-row p { font-size:var(--size-12) }
.product-delivery>article { padding:var(--size-27); background:var(--color-background); border-radius:var(--size-7) }
.product-delivery h3 { font-size:var(--size-19); line-height:var(--line-height-art-1-4); margin:var(--size-19) 0 var(--size-12) }
.product-delivery p { font-size:var(--size-14) }
.product-related>article { padding:var(--size-30); background:var(--color-surface); border-radius:var(--size-9) }
.product-related h3 { font:var(--font-weight-display) var(--size-29)/var(--line-height-1-25) var(--font-family-display); margin-bottom:var(--size-15) }
.product-related p { font-size:var(--size-15); margin-bottom:var(--size-22) }
@media (max-width:1100px) {
.product-stage { padding:var(--size-20) } }
@media (max-width:1100px) {
.product-phone { padding:var(--size-15) var(--size-11) } }
@media (max-width:1100px) {
.product-stage h3 { font-size:var(--size-26) } }
@media (max-width:650px) {
.product-stage { padding:var(--size-18); min-height:var(--size-375) } }
@media (max-width:650px) {
.product-mobile-copy h3 { font-size:var(--size-23) } }
@media (max-width:650px) {
.product-mobile-copy p { font-size:var(--size-11) } }
@media (max-width:650px) {
.product-options>div { padding:var(--size-12) } }
@media (max-width:650px) {
.product-demo-bottom b { padding:var(--size-9) var(--size-12) } }
@media (max-width:650px) {
.product-compare article { padding:var(--size-25) } }
@media (max-width:650px) {
.product-related>article { padding:var(--size-25) } }
@media (max-width:650px) {
.product-scope h3 { font-size:var(--size-19) } }
@media (max-width:650px) {
.product-states>div { padding:var(--size-18) } }
@media (max-width:650px) {
.product-states h3 { font-size:var(--size-15) } }
@media (max-width:650px) {
.product-states p { font-size:var(--size-12) } }
@media (max-width:650px) {
.product-prototype { padding:var(--size-23) } }
@media (max-width:650px) {
.product-toggle button { font-size:var(--size-11); padding:var(--size-9) var(--size-13) } }
@media (max-width:650px) {
.product-caption { font-size:var(--size-11) } }
@media (max-width:370px) {
.product-mobile-copy { display:none } }
@media (max-width:370px) {
.product-phone { width:var(--size-175); margin:auto } }
.product-mobile-copy>svg { width:var(--size-48); height:var(--size-48); margin-bottom:var(--size-20); color:var(--color-primary); stroke-width:1.8 }
#yaklasim .product-overview>article { background:var(--color-background); border-radius:var(--size-9); padding:var(--size-30); min-width:0 }
#yaklasim .product-overview h3 { margin-top:var(--size-20) }
#yaklasim .product-overview p { margin:0 }
@media (max-width:650px) {
#yaklasim .product-overview>article { padding:var(--size-25) } }
@media (max-width:650px) {
.product-mobile-copy>svg { width:var(--size-48); height:var(--size-48); margin-bottom:var(--size-20) } }
.product-scope h3 { color:var(--color-primary) }
.product-delivery h3 { color:var(--color-primary) }
.product-compare h3 { color:var(--color-primary) }
#yaklasim .product-overview p { color:var(--color-text) }
.product-scope p { color:var(--color-text) }
.product-delivery p { color:var(--color-text) }
.product-compare p { color:var(--color-text) }
.product-related p { color:var(--color-text) }
.product-scope small { color:var(--color-primary); font-size:var(--size-13); line-height:var(--line-height-1-7) }
.product-proto-row { background:var(--color-primary); color:var(--color-white); min-height:var(--size-92); padding:var(--size-19) var(--size-20) }
.product-proto-row b { color:var(--color-white); font-size:var(--size-15); line-height:var(--line-height-label) }
.product-proto-row p { color:var(--color-background); font-size:var(--size-14); line-height:var(--line-height-1-7); margin-top:var(--size-4) }
.product-proto-row .product-icon { background:var(--color-surface-accent); color:var(--color-primary); border-color:var(--color-surface-accent) }
.product-prototype .product-connector { height:var(--size-32); color:var(--color-primary); font-size:0 }
.product-prototype .product-connector:before { content:''; display:block; width:var(--size-2); height:var(--size-18); background:var(--color-primary) }
.product-prototype .product-connector:after { content:''; position:absolute; width:var(--size-8); height:var(--size-8); border-right:var(--size-2) var(--border-style) var(--color-primary); border-bottom:var(--size-2) var(--border-style) var(--color-primary); transform:translateY(var(--size-5)) rotate(45deg) }
.product-prototype .product-connector { position:relative }
.product-note { color:var(--color-text-muted); font-size:var(--size-13); line-height:var(--line-height-1-75) }
.product-prototype .product-note { color:var(--color-text-muted); font-size:var(--size-13); line-height:var(--line-height-1-75) }
.product-states p { font-size:var(--size-14); color:var(--color-text) }
.product-caption { color:var(--color-background); font-size:var(--size-13); line-height:var(--line-height-1-75) }
.product-kit>.product-note { color:var(--color-background); font-size:var(--size-12) }
.product-options small { color:var(--color-text-muted) }
.product-phone-row small { color:var(--color-text-muted) }
.product-demo-nav small { font-size:var(--size-11); color:var(--color-primary) }
.product-options small { font-size:var(--size-12) }
.product-stage p { font-size:var(--size-13) }
.product-mobile-copy>p { color:var(--color-text) }
.product-process-output { color:var(--color-primary); font-size:var(--size-12); background:var(--color-surface-accent) }
@media (max-width:650px) {
.product-proto-row { padding:var(--size-17) var(--size-15) } }
@media (max-width:650px) {
.product-proto-row p { font-size:var(--size-13) } }
@media (max-width:650px) {
.product-states p { font-size:var(--size-13) } }
@media (max-width:650px) {
.product-caption { font-size:var(--size-12) } }
@media (max-width:650px) {
.product-mobile-copy>p { font-size:var(--size-12) } }
@media (max-width:650px) {
.product-demo-nav small { font-size:var(--size-10) } }
@media (max-width:650px) {
.product-options small { font-size:var(--size-11) } }
.product-prototype { background:var(--color-primary); color:var(--color-white) }
.product-prototype>h3 { color:var(--color-white) }
.product-prototype .product-proto-row { background:var(--color-surface-accent); color:var(--color-primary) }
.product-prototype .product-proto-row b { color:var(--color-primary) }
.product-prototype .product-proto-row p { color:var(--color-text) }
.product-prototype .product-proto-row .product-icon { background:var(--color-surface); color:var(--color-primary); border-color:var(--color-white) }
.product-prototype .product-connector:before { background:var(--color-highlight) }
.product-prototype .product-connector:after { border-color:var(--color-highlight) }
.product-prototype .product-note { color:var(--color-background) }
#yaklasim .product-overview>article { background:var(--color-surface-secondary) }
.product-scope article { background:var(--color-surface-secondary) }
.product-delivery>article { background:var(--color-surface-secondary) }
#surec .product-process>li { background:var(--color-surface); box-shadow:0 var(--size-3) var(--size-16) var(--color-overlay-7267626128372c36312c35322c2e303729) }
.product-header-inner { height:var(--size-88); display:flex; gap:var(--size-44); align-items:center }
.product-logo { display:inline-flex; align-items:baseline; gap:var(--size-8); color:var(--color-primary); font:var(--font-weight-display) var(--size-34)/var(--line-height-1) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-055em); white-space:nowrap }
.product-mainnav { display:flex; gap:var(--size-30); margin-left:auto; font-size:var(--size-14) }
.product-header-cta { display:flex; gap:var(--size-18); align-items:center; font-size:var(--size-13); font-weight:var(--font-weight-medium); color:var(--color-primary) }
.product-hero-grid { display:grid; grid-template-columns:minmax(0,1.07fr) minmax(0,1fr); gap:6%; align-items:center }
.product-eyebrow { display:flex; gap:var(--size-12); align-items:center; color:var(--color-accent); font:var(--font-weight-medium) var(--size-11)/var(--line-height-1-7) var(--font-family-mono); letter-spacing:var(--letter-spacing-08em); text-transform:uppercase; margin-bottom:var(--size-21) }
.product-actions { display:flex; gap:var(--size-18) var(--size-28); align-items:center; flex-wrap:wrap; margin-top:var(--size-30) }
.product-hero-meta { display:flex; flex-wrap:wrap; gap:var(--size-17) var(--size-23); margin-top:var(--size-30) }
.product-hero-meta li { display:flex; align-items:center; gap:var(--size-9); font-size:var(--size-12); line-height:var(--line-height-1-6); color:var(--color-primary) }
.product-sectionnav>.product-container { display:flex; align-items:center; gap:var(--size-40); min-height:var(--size-62) }
.product-sectionnav .product-container>div { display:flex; gap:var(--size-32); overflow-x:auto; scrollbar-width:none }
.product-player-top { display:flex; justify-content:space-between; gap:var(--size-14); align-items:center; margin-bottom:var(--size-21) }
.product-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--size-7); margin-bottom:var(--size-16) }
.product-windowbar>span { display:flex; gap:var(--size-5) }
.product-site-top { height:var(--size-58); display:flex; align-items:center; gap:var(--size-15); padding:var(--size-10) var(--size-20) }
.product-site-body { display:grid; grid-template-columns:1.2fr .8fr; gap:var(--size-15); align-items:center; padding:var(--size-16) var(--size-20) var(--size-24) }
.product-site-art>span { display:flex; gap:var(--size-7) }
.product-app-shell { display:grid; grid-template-columns:var(--size-43) minmax(0,1fr); height:calc(100% - var(--size-30)) }
.product-app-title { display:flex; gap:var(--size-14); align-items:center; justify-content:space-between }
.product-app-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--size-10); margin:var(--size-20) 0 }
.product-app-row { display:flex; align-items:center; gap:var(--size-8); border-bottom:var(--size-1) var(--border-style) var(--color-surface-accent); padding:var(--size-12) 0 }
.product-mobile-copy>div { display:flex; align-items:center; gap:var(--size-7); font-size:var(--size-9); margin-top:var(--size-12) }
.product-phone-top { display:flex; justify-content:space-between; font-size:var(--size-7); align-items:center; margin-bottom:var(--size-15) }
.product-phone-list { display:flex; align-items:center; justify-content:space-between; font-size:var(--size-8); padding:var(--size-9) 0; border-bottom:var(--size-1) var(--border-style) var(--color-surface-accent) }
.product-needs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--size-40) }
.product-services { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--size-28) }
.product-service-content>ul { margin-top:var(--size-23); display:grid; gap:var(--size-10) }
.product-service-content>ul>li { display:flex; gap:var(--size-10); align-items:flex-start; font-size:var(--size-14); line-height:var(--line-height-1-7); color:var(--color-text) }
.product-product-map { width:100%; max-width:var(--size-320); display:flex; flex-direction:column; align-items:center }
.product-map-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--size-12); width:100%; border-top:var(--size-1) var(--border-style) var(--color-illustration-739582); padding-top:var(--size-20) }
.product-mini-flow { display:flex; align-items:center; justify-content:center; gap:var(--size-15); width:100% }
.product-mini-flow>span { display:flex; flex-direction:column; align-items:center; gap:var(--size-12); min-width:var(--size-70) }
.product-mini-panel>div>span { display:flex; align-items:center; gap:var(--size-9); border-top:var(--size-1) var(--border-style) var(--color-surface-accent); padding-top:var(--size-9); margin-top:var(--size-9); font-size:var(--size-9) }
.product-mini-system { width:var(--size-270); display:grid; grid-template-columns:1fr 1fr; gap:var(--size-16); align-items:center }
.product-swatches { display:flex; gap:var(--size-8) }
.product-mini-web>div { display:flex; gap:var(--size-25); align-items:center; justify-content:space-between; margin-top:var(--size-15) }
.product-mini-code { display:flex; gap:var(--size-17); align-items:center; justify-content:center }
.product-experience-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:7%; align-items:center }
.product-feature-list>li { display:flex; gap:var(--size-14); align-items:center }
.product-state-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--size-16) }
.product-handoff-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:8%; align-items:center }
.product-handoff-points { display:grid; gap:var(--size-14); margin-bottom:var(--size-30) }
.product-handoff-points p { display:flex; gap:var(--size-12); align-items:center; font-size:var(--size-15); color:var(--color-text) }
.product-sheet-header { display:flex; justify-content:space-between; align-items:center; gap:var(--size-20); color:var(--color-accent) }
.product-spec-row { display:grid; grid-template-columns:.6fr 1fr; gap:var(--size-16); align-items:start; padding:var(--size-17) 0; border-top:var(--size-1) var(--border-style) var(--color-surface-accent); font-size:var(--size-12); line-height:var(--line-height-1-7) }
.product-spec-bottom>span { display:flex; gap:var(--size-10); align-items:center; font-size:var(--size-12); color:var(--color-primary) }
.product-deliverables { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--size-24) }
.product-process { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--size-24) }
.product-work-list>article { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:var(--size-26); align-items:center; padding:var(--size-30) 0; border-bottom:var(--size-1) var(--border-style) var(--color-border-strong) }
.product-faq-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:8%; align-items:start }
.product-faqs summary { display:flex; gap:var(--size-24); align-items:center; justify-content:space-between; list-style:none; cursor:pointer; padding:var(--size-24) 0; color:var(--color-primary); font:var(--font-weight-medium) var(--size-16)/var(--line-height-1-65) var(--font-family-body) }
.product-closing-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:7%; align-items:center }
.product-start-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--size-16); grid-auto-rows:1fr }
.product-footer-top { display:flex; justify-content:space-between; gap:var(--size-70) }
.product-footer-top>nav { display:flex; gap:var(--size-24); align-items:flex-start; font-size:var(--size-13); flex-wrap:wrap }
.product-footer-bottom { display:flex; justify-content:space-between; gap:var(--size-25); margin-top:var(--size-50); padding-top:var(--size-22); border-top:var(--size-1) var(--border-style) var(--color-illustration-487769); font-size:var(--size-10); line-height:var(--line-height-relaxed) }
.product-footer-bottom>div { display:flex; gap:var(--size-22) }
@media (min-width:1500px) {
.product-hero-grid { gap:var(--size-80) } }
@media (min-width:1500px) {
.product-site-body { padding-block:var(--size-22) } }
@media (min-width:1500px) {
.product-mobile-scene { gap:var(--size-32) } }
@media (min-width:1500px) {
.product-site-bottom { padding-block:var(--size-14) } }
@media (max-width:1150px) {
.product-header-inner { gap:var(--size-30) } }
@media (max-width:1150px) {
.product-mainnav { gap:var(--size-23) } }
@media (max-width:1150px) {
.product-hero-grid { gap:4%; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) } }
@media (max-width:1150px) {
.product-site-body { padding-inline:var(--size-15); gap:var(--size-11); grid-template-columns:1.15fr .85fr } }
@media (max-width:1150px) {
.product-mobile-scene { gap:var(--size-13); padding-inline:var(--size-13) } }
@media (max-width:1150px) {
.product-mobile-copy>div { font-size:var(--size-8); gap:var(--size-5) } }
@media (max-width:1150px) {
.product-hero-meta { gap:var(--size-15) } }
@media (max-width:1150px) {
.product-needs { gap:var(--size-30) } }
@media (max-width:1150px) {
.product-deliverables { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:1150px) {
.product-experience-grid { gap:5% } }
@media (max-width:1150px) {
.product-handoff-grid { gap:5% } }
@media (max-width:1150px) {
.product-state-grid { gap:var(--size-13) } }
@media (max-width:1150px) {
.product-sectionnav .product-container>div { gap:var(--size-27) } }
@media (max-width:950px) {
.product-hero-grid { grid-template-columns:minmax(0,1fr); gap:var(--size-42) } }
@media (max-width:950px) {
.product-site-body { padding:var(--size-21) var(--size-25) var(--size-27); gap:var(--size-22) } }
@media (max-width:950px) {
.product-mobile-scene { gap:var(--size-45) } }
@media (max-width:950px) {
.product-mobile-copy>div { font-size:var(--size-11); gap:var(--size-9) } }
@media (max-width:950px) {
.product-phone-list { padding-block:var(--size-11); font-size:var(--size-9) } }
@media (max-width:950px) {
.product-sectionnav .product-container>div { width:100%; justify-content:space-between; gap:var(--size-28) } }
@media (max-width:950px) {
.product-needs { gap:var(--size-24) } }
@media (max-width:950px) {
.product-service-featured { grid-template-columns:minmax(0,1fr) minmax(0,.9fr) } }
@media (max-width:950px) {
.product-experience-grid { grid-template-columns:minmax(0,1fr); gap:var(--size-40) } }
@media (max-width:950px) {
.product-handoff-grid { grid-template-columns:minmax(0,1fr); gap:var(--size-40) } }
@media (max-width:950px) {
.product-closing-grid { grid-template-columns:minmax(0,1fr); gap:var(--size-40) } }
@media (max-width:950px) {
.product-work-list>article { grid-template-columns:minmax(0,1fr) auto; gap:var(--size-13) var(--size-28) } }
@media (max-width:950px) {
.product-process>li { padding:var(--size-25); gap:var(--size-17) } }
@media (max-width:950px) {
.product-faq-grid { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:6% } }
@media (max-width:950px) {
.product-footer-top { flex-direction:column; gap:var(--size-35) } }
@media (max-width:950px) {
.product-footer-top>nav { gap:var(--size-27) } }
@media (max-width:650px) {
.product-header-inner { height:var(--size-72); gap:var(--size-14) } }
@media (max-width:650px) {
.product-sectionnav .product-container>div { justify-content:flex-start; gap:var(--size-25) } }
@media (max-width:650px) {
.product-sectionnav a { font-size:var(--size-11); padding-block:var(--size-15) } }
@media (max-width:650px) {
.product-hero-grid { gap:var(--size-36) } }
@media (max-width:650px) {
.product-eyebrow { font-size:var(--size-10); gap:var(--size-10); margin-bottom:var(--size-18) } }
@media (max-width:650px) {
.product-actions { gap:var(--size-19) var(--size-24); margin-top:var(--size-27) } }
@media (max-width:650px) {
.product-hero-meta { margin-top:var(--size-27); gap:var(--size-16) } }
@media (max-width:650px) {
.product-player-top { gap:var(--size-10); margin-bottom:var(--size-18) } }
@media (max-width:650px) {
.product-tabs { gap:var(--size-6); margin-bottom:var(--size-13) } }
@media (max-width:650px) {
.product-site-body { padding:var(--size-15) var(--size-14) var(--size-22); gap:var(--size-13); grid-template-columns:1.25fr .75fr } }
@media (max-width:650px) {
.product-site-art>span { gap:var(--size-5) } }
@media (max-width:650px) {
.product-app-shell { grid-template-columns:var(--size-33) minmax(0,1fr) } }
@media (max-width:650px) {
.product-app-stats { gap:var(--size-8); margin:var(--size-17) 0 } }
@media (max-width:650px) {
.product-mobile-scene { gap:var(--size-15); padding:var(--size-15) var(--size-11) } }
@media (max-width:650px) {
.product-mobile-copy>div { font-size:var(--size-8); gap:var(--size-5) } }
@media (max-width:650px) {
.product-phone-list { font-size:var(--size-8); padding-block:var(--size-9) } }
@media (max-width:650px) {
.product-needs { grid-template-columns:1fr; gap:var(--size-28) } }
@media (max-width:650px) {
.product-needs>div { display:grid; grid-template-columns:var(--size-44) minmax(0,1fr); gap:0 var(--size-17) } }
@media (max-width:650px) {
.product-services { grid-template-columns:1fr; gap:var(--size-23) } }
@media (max-width:650px) {
.product-map-grid { gap:var(--size-10); padding-top:var(--size-15) } }
@media (max-width:650px) {
.product-mini-flow { gap:var(--size-10) } }
@media (max-width:650px) {
.product-mini-code { gap:var(--size-12) } }
@media (max-width:650px) {
.product-state-grid { gap:var(--size-12) } }
@media (max-width:650px) {
.product-feature-list { font-size:var(--size-14); gap:var(--size-17) } }
@media (max-width:650px) {
.product-spec-row { font-size:var(--size-11); gap:var(--size-12); grid-template-columns:.65fr 1fr } }
@media (max-width:650px) {
.product-spec-bottom { gap:var(--size-12); padding:var(--size-14) } }
@media (max-width:650px) {
.product-spec-bottom>span { font-size:var(--size-10); gap:var(--size-7) } }
@media (max-width:650px) {
.product-handoff-points p { font-size:var(--size-14); align-items:flex-start } }
@media (max-width:650px) {
.product-deliverables { grid-template-columns:1fr; gap:var(--size-20) } }
@media (max-width:650px) {
.product-deliverables>article { padding:var(--size-25); display:grid; grid-template-columns:var(--size-44) minmax(0,1fr); gap:0 var(--size-16) } }
@media (max-width:650px) {
.product-process { grid-template-columns:1fr; gap:var(--size-21) } }
@media (max-width:650px) {
.product-process>li { padding:var(--size-25) var(--size-21); grid-template-columns:var(--size-40) minmax(0,1fr); gap:var(--size-16) } }
@media (max-width:650px) {
.product-faq-grid { grid-template-columns:1fr; gap:var(--size-5) } }
@media (max-width:650px) {
.product-faqs summary { font-size:var(--size-15); gap:var(--size-20); padding-block:var(--size-22) } }
@media (max-width:650px) {
.product-start-grid { gap:var(--size-12) } }
@media (max-width:650px) {
.product-start-grid>div { padding:var(--size-17); min-height:var(--size-145); gap:var(--size-15) } }
@media (max-width:650px) {
.product-footer-top>nav { gap:var(--size-18) var(--size-25) } }
@media (max-width:650px) {
.product-footer-bottom { flex-direction:column; gap:var(--size-15); margin-top:var(--size-35) } }
@media (max-width:650px) {
.product-footer-bottom>div { flex-wrap:wrap; gap:var(--size-18) } }
@media (max-width:360px) {
.product-mobile-scene { gap:var(--size-9) } }
@media (max-width:360px) {
.product-mini-code { gap:var(--size-8) } }
@media (max-width:360px) {
.product-state-grid { grid-template-columns:1fr } }
@media (max-width:360px) {
.product-state-grid>div { display:grid; grid-template-columns:var(--size-38) 1fr; gap:0 var(--size-12) } }
.product-app-row { padding-block:var(--size-10) }
@media (min-width:651px) and (max-width:950px) {
.product-site-body { padding-block:var(--size-12) var(--size-18) } }
.product-split { display:grid; grid-template-columns:1fr 1fr; gap:var(--size-64); align-items:center }
.product-board>.product-caption { display:flex; justify-content:space-between; gap:var(--size-16); color:var(--color-highlight); margin-bottom:var(--size-20) }
.product-brand { display:flex; align-items:center; justify-content:space-between; font-size:var(--size-16) }
.product-screen-hero { display:grid; grid-template-columns:1.2fr 1fr; gap:var(--size-18); align-items:center; margin:var(--size-26) 0 }
.product-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--size-8) }
.product-board-bottom { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--size-10); margin-top:var(--size-18) }
.product-board-bottom>span { display:flex; gap:var(--size-9); align-items:center; font-size:var(--size-11) }
.product-overview { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--size-40) }
.product-services { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--size-22) }
.product-journey { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--size-22); margin-top:var(--size-42) }
.product-flow-row>div { display:flex; flex-direction:column; gap:var(--size-3) }
.product-connector { height:var(--size-28); display:flex; justify-content:center; align-items:center; color:var(--color-accent); font-size:var(--size-22); line-height:var(--line-height-art-1) }
.product-points { display:grid; gap:var(--size-19); margin:var(--size-26) 0 }
.product-points>p { display:flex; align-items:flex-start; gap:var(--size-13); font-size:var(--size-15) }
.product-visible { display:grid; grid-template-columns:1fr 1fr; gap:var(--size-25) }
.product-visible ul { margin:var(--size-23) 0; display:grid; gap:var(--size-13) }
.product-visible li { display:flex; gap:var(--size-11); font-size:var(--size-14) }
.product-source { display:flex; flex-wrap:wrap; gap:var(--size-20); font-size:var(--size-11); margin-top:var(--size-22) }
.product-heat-panels { display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--size-12); margin:var(--size-23) 0 }
.product-legend { display:flex; justify-content:space-between; font-size:var(--size-10); gap:var(--size-16); margin-top:var(--size-12) }
.product-legend>span:first-child { display:flex; align-items:center; gap:var(--size-8) }
.product-metrics { display:grid; gap:var(--size-12); margin-top:var(--size-25) }
.product-kit-header { display:flex; justify-content:space-between; align-items:center; font-size:var(--size-12); border-bottom:var(--size-1) var(--border-style) var(--color-border-strong); padding-bottom:var(--size-18) }
.product-swatches { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--size-10); margin:var(--size-23) 0 }
.product-kit-buttons { display:flex; gap:var(--size-18); align-items:center; flex-wrap:wrap; font-size:var(--size-11) }
.product-kit-labels { display:grid; grid-template-columns:1fr 1fr; gap:var(--size-10); margin-top:var(--size-15) }
.product-package { display:grid; grid-template-columns:1fr 1fr; gap:var(--size-28) }
.product-package ul { margin-top:var(--size-23); display:grid; gap:var(--size-14) }
.product-package li { display:flex; gap:var(--size-13); font-size:var(--size-14) }
.product-cta-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--size-14) }
@media (max-width:1100px) {
.product-split { gap:var(--size-35) } }
@media (max-width:1100px) {
.product-services { grid-template-columns:1fr 1fr } }
@media (max-width:1100px) {
.product-journey { grid-template-columns:1fr 1fr; gap:var(--size-22) } }
@media (max-width:950px) {
.product-split { grid-template-columns:1fr; gap:var(--size-38) } }
@media (max-width:950px) {
.product-overview { gap:var(--size-25) } }
@media (max-width:650px) {
.product-services { grid-template-columns:1fr } }
@media (max-width:650px) {
.product-overview { grid-template-columns:1fr } }
@media (max-width:650px) {
.product-visible { grid-template-columns:1fr } }
@media (max-width:650px) {
.product-package { grid-template-columns:1fr } }
@media (max-width:650px) {
.product-insight { grid-template-columns:1fr } }
@media (max-width:650px) {
.product-screen-hero { gap:var(--size-12); margin:var(--size-23) 0 } }
@media (max-width:650px) {
.product-board-bottom { gap:var(--size-7) } }
@media (max-width:650px) {
.product-board-bottom>span { font-size:var(--size-10); gap:var(--size-6) } }
@media (max-width:650px) {
.product-journey { grid-template-columns:1fr } }
@media (max-width:650px) {
.product-flow-row { padding:var(--size-14); gap:var(--size-12) } }
@media (max-width:650px) {
.product-insight { gap:var(--size-18) } }
.product-demo-nav { display:flex; justify-content:space-between; gap:var(--size-10); align-items:center; padding-bottom:var(--size-16); border-bottom:var(--size-1) var(--border-style) var(--color-border-strong); font-size:var(--size-13) }
.product-options { display:grid; grid-template-columns:1fr 1fr; gap:var(--size-10); margin-top:var(--size-20) }
.product-slots { display:flex; gap:var(--size-9); margin:var(--size-16) 0 }
.product-demo-bottom { display:flex; justify-content:space-between; align-items:center; gap:var(--size-12); margin-top:var(--size-20); font-size:var(--size-10) }
.product-toggle { display:flex; gap:var(--size-9); margin-bottom:var(--size-20) }
.product-mobile-wrap { display:grid; grid-template-columns:1fr var(--size-185); gap:var(--size-20); align-items:center; min-height:var(--size-342) }
.product-compare { display:grid; grid-template-columns:1fr 1fr; gap:var(--size-25) }
.product-compare ul { display:grid; gap:var(--size-12); margin-top:var(--size-23) }
.product-compare li { display:flex; gap:var(--size-12); font-size:var(--size-14) }
.product-scope { display:grid; grid-template-columns:1fr 1fr; gap:var(--size-24) }
.product-states { display:grid; grid-template-columns:1fr 1fr; gap:var(--size-15) }
.product-delivery { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--size-22) }
.product-related { display:grid; grid-template-columns:1fr 1fr; gap:var(--size-28) }
@media (max-width:1100px) {
.product-mobile-wrap { grid-template-columns:1fr var(--size-160); gap:var(--size-12) } }
@media (max-width:650px) {
.product-compare { grid-template-columns:1fr } }
@media (max-width:650px) {
.product-scope { grid-template-columns:1fr } }
@media (max-width:650px) {
.product-delivery { grid-template-columns:1fr } }
@media (max-width:650px) {
.product-related { grid-template-columns:1fr } }
@media (max-width:650px) {
.product-mobile-wrap { grid-template-columns:1fr var(--size-150); gap:var(--size-12); min-height:var(--size-339) } }
@media (max-width:650px) {
.product-scope article { padding:var(--size-24); gap:0 var(--size-15) } }
@media (max-width:650px) {
.product-proto-row { padding:var(--size-14); gap:var(--size-12) } }
@media (max-width:370px) {
.product-mobile-wrap { grid-template-columns:1fr } }
@media (max-width:370px) {
.product-states { grid-template-columns:1fr } }
#yaklasim .product-overview { gap:var(--size-24); align-items:stretch }
@media (max-width:950px) {
#yaklasim .product-overview { grid-template-columns:1fr; gap:var(--size-20) } }