@charset "utf-8"; @import url('fonts.css'); @import url('open-color.css'); :root { --font-body: 17px; --font-small: 15px; --font-caption: 13px; --font-micro: 11px; --font-display: 60px; --font-heading-xl: 40px; --font-heading-lg: 32px; --font-heading-md: 24px; --font-heading-sm: 19px; --line-height-text: 1.5; --color-main: #3CDBC0; --color-main-rgb: 60,219,192; --color-sub: #a55eea; --color-sub-rgb: 165,94,234; --color-gradi-1: #56bccb; --color-gradi-1-rgb: 86,188,203; --color-gradi-2: #719dd5; --color-gradi-2-rgb: 113,157,213; --color-gradi-3: #8b7de0; --color-gradi-3-rgb: 139,125,224; --font-title: 'Montserrat','Spoqa Han Sans Neo','SUIT','Pretendard','Noto Sans KR','Apple SD Gothic Neo',-apple-system,'Segoe UI','Helvetica Neue','Malgun Gothic','맑은 고딕',Arial,돋움,Dotum,sans-serif; --font-text: 'Roboto','Pretendard','Spoqa Han Sans Neo','Noto Sans KR','Apple SD Gothic Neo',-apple-system,'Segoe UI','Helvetica Neue','Malgun Gothic','맑은 고딕',Arial,돋움,Dotum,sans-serif; --font-mono: 'Roboto Mono','Roboto','Pretendard','Noto Sans Mono','Noto Sans KR','Apple SD Gothic Neo',-apple-system,'Segoe UI','Helvetica Neue','Malgun Gothic','맑은 고딕',Arial,돋움,Dotum,sans-serif; --transition-slow: all .3s ease-in-out; --transition-fast: all .1s ease-in-out; --ink: #172321; --text-muted: #65716e; --line: #dfe6e3; --surface: #f4f6f5; --gradient: linear-gradient(120deg,var(--color-gradi-1),var(--color-gradi-2),var(--color-gradi-3)); --radius: 24px; --wrap: 1280px; } :where(.gw-chrome, .gw-landing) * { box-sizing: border-box; } html { scroll-padding-top: 100px; } .gw-chrome, .gw-landing { margin: 0; background: #fff; color: var(--ink); -webkit-font-smoothing: antialiased; font-family: var(--font-text); font-size: var(--font-body); line-height: 1.65; word-break: keep-all; } body.modal-open { overflow: hidden; } :where(.gw-chrome, .gw-landing) h1, :where(.gw-chrome, .gw-landing) h2, :where(.gw-chrome, .gw-landing) h3, :where(.gw-chrome, .gw-landing) h4, :where(.gw-chrome, .gw-landing) p { margin: 0; } :where(.gw-chrome, .gw-landing) h1, :where(.gw-chrome, .gw-landing) h2, :where(.gw-chrome, .gw-landing) h3, :where(.gw-chrome, .gw-landing) h4 { font-family: var(--font-title); line-height: 1.3; letter-spacing: -.055em; } :where(.gw-chrome, .gw-landing) a { color: inherit; text-decoration: none; } :where(.gw-chrome, .gw-landing) button, :where(.gw-chrome, .gw-landing) input, :where(.gw-chrome, .gw-landing) textarea, :where(.gw-chrome, .gw-landing) select { font: inherit; } :where(.gw-chrome, .gw-landing) button { cursor: pointer; } :where(.gw-chrome, .gw-landing) button, :where(.gw-chrome, .gw-landing) a, :where(.gw-chrome, .gw-landing) input, :where(.gw-chrome, .gw-landing) select, :where(.gw-chrome, .gw-landing) textarea { -webkit-tap-highlight-color: transparent; } :where(.gw-chrome, .gw-landing) button { border: 0; } :where(.gw-chrome, .gw-landing) a, :where(.gw-chrome, .gw-landing) button { touch-action: manipulation; } :where(.gw-chrome, .gw-landing) button:disabled { cursor: wait; } :where(.gw-chrome, .gw-landing) button:focus-visible, :where(.gw-chrome, .gw-landing) a:focus-visible, :where(.gw-chrome, .gw-landing) input:focus-visible, :where(.gw-chrome, .gw-landing) select:focus-visible, :where(.gw-chrome, .gw-landing) textarea:focus-visible { outline: 3px solid #8261d2; outline-offset: 4px; } :where(.gw-chrome, .gw-landing) ul { list-style: none; margin: 0; padding: 0; } :where(.gw-chrome, .gw-landing) ::selection { background: var(--color-main); color: var(--ink); } :where(.gw-chrome, .gw-landing) .hidden, :where(.gw-chrome, .gw-landing) [hidden] { display: none!important; } :where(.gw-chrome, .gw-landing) .wrap { width: calc(100% - 96px); max-width: var(--wrap); margin: 0 auto; } :where(.gw-chrome, .gw-landing) .section { padding: 110px 0; } :where(.gw-chrome, .gw-landing) .eyebrow { display: block; font-family: var(--font-mono); font-size: var(--font-caption); font-weight: 500; line-height: 1.5; letter-spacing: .08em; } :where(.gw-chrome, .gw-landing) .section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 48px; } :where(.gw-chrome, .gw-landing) .section-heading .eyebrow { margin-bottom: 20px; } :where(.gw-chrome, .gw-landing) .section-heading h2, :where(.gw-chrome, .gw-landing) .results-grid h2, :where(.gw-chrome, .gw-landing) .faq-grid h2, :where(.gw-chrome, .gw-landing) .contact-grid h2 { font-size: clamp(32px,3.6vw,48px); font-weight: 750; } :where(.gw-chrome, .gw-landing) .section-heading>p, :where(.gw-chrome, .gw-landing) .section-description { color: var(--text-muted); font-size: var(--font-body); line-height: 1.8; } :where(.gw-chrome, .gw-landing) .section-heading small { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .muted { color: #8a9390; } :where(.gw-chrome, .gw-landing) .mint-text { color: var(--color-main); } :where(.gw-chrome, .gw-landing) .button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; transition: var(--transition-slow); min-height: 52px; padding: 13px 22px; border: 1px solid transparent; border-radius: 8px; font-size: var(--font-body); font-weight: 650; line-height: 1.5; } :where(.gw-chrome, .gw-landing) .button i { transition: transform .3s; font-size: 20px; } :where(.gw-chrome, .gw-landing) .button:hover i { transform: translate(2px,-2px); } :where(.gw-chrome, .gw-landing) .button-dark { background: var(--ink); color: #fff; } :where(.gw-chrome, .gw-landing) .button-dark:hover { background: #30433e; } :where(.gw-chrome, .gw-landing) .button-outline { border-color: #cbd5d0; background: transparent; color: var(--ink); } :where(.gw-chrome, .gw-landing) .button-outline:hover { border-color: var(--ink); background: rgba(23,35,33,.04); } :where(.gw-chrome, .gw-landing) .button-row { display: flex; flex-wrap: wrap; gap: 12px; } :where(.gw-chrome, .gw-landing) .skip-link { position: fixed; top: -70px; left: 20px; z-index: 200; padding: 12px; background: var(--ink); color: white; } :where(.gw-chrome, .gw-landing) .skip-link:focus { top: 10px; } :where(.gw-chrome, .gw-landing) .announcement, .announcement.gw-chrome { min-height: 34px; padding: 7px 20px; background: var(--ink); color: #d4ddda; font-size: var(--font-small); line-height: 20px; text-align: center; } :where(.gw-chrome, .gw-landing) .announcement a, .announcement.gw-chrome a { margin-left: 12px; color: var(--color-main); } :where(.gw-chrome, .gw-landing) .site-header, .site-header.gw-chrome { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(18px); border-bottom: 1px solid transparent; background: rgba(255,255,255,.94); } :where(.gw-chrome, .gw-landing) .site-header.scrolled, .site-header.gw-chrome.scrolled { border-color: var(--line); } :where(.gw-chrome, .gw-landing) .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; width: calc(100% - 96px); max-width: var(--wrap); height: 88px; margin: auto; } :where(.gw-chrome, .gw-landing) .logo { display: flex; align-items: center; gap: 9px; font-family: var(--font-title); font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -.04em; } :where(.gw-chrome, .gw-landing) .logo-light { font-weight: 500; } :where(.gw-chrome, .gw-landing) .logo small { display: block; font-family: var(--font-mono); font-size: var(--font-micro); font-weight: 400; letter-spacing: .1em; } :where(.gw-chrome, .gw-landing) .logo-symbol { position: relative; width: 34px; height: 36px; border-radius: 9px; background: var(--ink); color: var(--color-main); font-size: 29px; font-weight: 800; line-height: 31px; text-align: center; } :where(.gw-chrome, .gw-landing) .logo-symbol>span { position: absolute; top: 0; right: -6px; color: var(--color-sub); font-size: 20px; } :where(.gw-chrome, .gw-landing) .desktop-nav { display: flex; gap: 30px; font-size: var(--font-small); font-weight: 600; } :where(.gw-chrome, .gw-landing) .desktop-nav a { transition: color .2s; } :where(.gw-chrome, .gw-landing) .desktop-nav a:hover, :where(.gw-chrome, .gw-landing) .desktop-nav a.active { color: #16806d; } :where(.gw-chrome, .gw-landing) .header-cta { display: flex; align-items: center; gap: 18px; padding: 10px 17px; border: 1px solid var(--ink); border-radius: 7px; font-size: var(--font-small); font-weight: 650; } :where(.gw-chrome, .gw-landing) .header-cta:hover { background: var(--color-main); } :where(.gw-chrome, .gw-landing) .menu-toggle { display: none; padding: 8px; background: transparent; font-size: 25px; } :where(.gw-chrome, .gw-landing) .mobile-menu { padding: 10px 24px 24px; border-top: 1px solid var(--line); } :where(.gw-chrome, .gw-landing) .mobile-menu a { display: block; padding: 12px 0; } :where(.gw-chrome, .gw-landing) .hero { padding-top: 22px; } :where(.gw-chrome, .gw-landing) .hero-grid { display: grid; grid-template-columns: 1.12fr 1fr; gap: 16px; } :where(.gw-chrome, .gw-landing) .hero-main { position: relative; display: flex; overflow: hidden; flex-direction: column; min-height: 470px; padding: 38px 40px 24px; border-radius: var(--radius); background: var(--color-main); } :where(.gw-chrome, .gw-landing) .hero-main .eyebrow { display: flex; align-items: center; gap: 8px; } :where(.gw-chrome, .gw-landing) .live-dot { display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } :where(.gw-chrome, .gw-landing) .hero-main h1 { margin: 34px 0 22px; font-size: clamp(38px,4.4vw,62px); font-weight: 800; line-height: 1.22; letter-spacing: -.065em; } :where(.gw-chrome, .gw-landing) .outline-text { color: transparent; -webkit-text-stroke: 1.5px var(--ink); } :where(.gw-chrome, .gw-landing) .hero-main p { margin-bottom: 27px; font-size: var(--font-body); line-height: 1.7; } :where(.gw-chrome, .gw-landing) .hero-main>.button { align-self: flex-start; } :where(.gw-chrome, .gw-landing) .hero-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 20px; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .orbit-mark { font-size: 57px; line-height: 1; } :where(.gw-chrome, .gw-landing) .hero-preview { position: relative; display: flex; overflow: hidden; flex-direction: column; padding: 30px; border-radius: var(--radius); background: #d2c3f2; } :where(.gw-chrome, .gw-landing) .preview-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; font-family: var(--font-mono); font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .preview-top i { margin-right: 6px; font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .small-tag { padding: 3px 8px; border: 1px solid rgba(23,35,33,.3); border-radius: 30px; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .mini-editor { position: relative; transform: rotate(-3deg); width: 94%; margin: 0 auto 18px; padding: 0 24px 15px; border: 1px solid #d9d9e4; border-radius: 12px; box-shadow: 0 15px 30px #51426e16; background: #fff; } :where(.gw-chrome, .gw-landing) .editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -24px 20px; padding: 12px 15px; border-bottom: 1px solid #eee; color: #7e8581; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .window-dots { display: flex; gap: 4px; } :where(.gw-chrome, .gw-landing) .window-dots b { width: 5px; height: 5px; border-radius: 50%; background: #d9dedc; } :where(.gw-chrome, .gw-landing) .window-dots b:first-child { background: #a4d6c9; } :where(.gw-chrome, .gw-landing) .editor-label { color: #7e8581; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .keyword-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 7px 0 22px; padding: 10px; border-radius: 5px; background: #f1f7f4; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .keyword-chip .live-dot { color: #24b197; } :where(.gw-chrome, .gw-landing) .mini-editor h2 { font-size: 28px; font-weight: 750; line-height: 1.35; } :where(.gw-chrome, .gw-landing) .mini-editor>p { min-height: 40px; margin: 13px 0; color: #7e8581; font-size: var(--font-caption); line-height: 1.8; } :where(.gw-chrome, .gw-landing) .skeleton-lines span { display: block; width: 100%; height: 5px; margin: 9px 0; border-radius: 9px; background: #edf0ef; } :where(.gw-chrome, .gw-landing) .skeleton-lines span:last-child { width: 62%; } :where(.gw-chrome, .gw-landing) .editor-footer { display: flex; justify-content: space-between; margin-top: 24px; padding-top: 12px; border-top: 1px solid #edf0ef; color: #5d7268; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .editor-footer>span:first-child { color: #118673; } :where(.gw-chrome, .gw-landing) .floating-label { position: absolute; right: 18px; bottom: 26px; display: flex; align-items: center; gap: 12px; transform: rotate(3deg); padding: 15px 18px; border: 1px solid #e5e5e5; border-radius: 10px; box-shadow: 0 8px 30px #44355419; background: #fff; font-size: var(--font-small); font-weight: 650; } :where(.gw-chrome, .gw-landing) .floating-label small { display: block; margin-top: 3px; color: #8b9290; font-size: var(--font-caption); font-weight: 400; } :where(.gw-chrome, .gw-landing) .check-circle { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #dff8f0; color: #139d82; } :where(.gw-chrome, .gw-landing) .floating-label>i { margin-left: 16px; font-size: 19px; } :where(.gw-chrome, .gw-landing) .hero-tile { display: flex; justify-content: space-between; flex-direction: column; transition: var(--transition-slow); padding: 25px 30px; border: 1px solid var(--line); border-radius: var(--radius); } :where(.gw-chrome, .gw-landing) .hero-tile:hover { transform: translateY(-4px); } :where(.gw-chrome, .gw-landing) .hero-tile>div { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 17px 0; } :where(.gw-chrome, .gw-landing) .hero-tile strong { font-family: var(--font-title); font-size: 27px; font-weight: 750; line-height: 1.3; letter-spacing: -.025em; } :where(.gw-chrome, .gw-landing) .tile-note { display: flex; align-items: center; justify-content: space-between; gap: 15px; color: var(--text-muted); font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .tile-note i { font-size: 20px; } :where(.gw-chrome, .gw-landing) .tile-icon { display: grid; place-items: center; transform: rotate(-7deg); width: 75px; height: 75px; border-radius: 16px; background: #e5f5f0; color: #25aa8d; font-size: 47px; } :where(.gw-chrome, .gw-landing) .tile-dark { border-color: var(--ink); background: var(--ink); color: #fff; } :where(.gw-chrome, .gw-landing) .tile-dark .eyebrow { color: #a7b9b0; } :where(.gw-chrome, .gw-landing) .tile-dark .tile-note { color: #9dadab; } :where(.gw-chrome, .gw-landing) .tiny-platforms { display: grid; grid-template-columns: repeat(2,32px); gap: 7px; transform: rotate(9deg); } :where(.gw-chrome, .gw-landing) .tiny-platforms span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; font-size: var(--font-body); font-weight: 750; } :where(.gw-chrome, .gw-landing) .hero-caption { display: flex; justify-content: space-between; padding: 22px 2px 0; color: #6b7471; font-family: var(--font-mono); font-size: var(--font-caption); letter-spacing: .04em; } :where(.gw-chrome, .gw-landing) .hero-caption a { display: flex; align-items: center; gap: 16px; } :where(.gw-chrome, .gw-landing) .platforms { display: flex; align-items: center; gap: 70px; padding: 56px 0 64px; } :where(.gw-chrome, .gw-landing) .platforms>p { min-width: 175px; font-size: var(--font-body); line-height: 1.6; } :where(.gw-chrome, .gw-landing) .platforms>p strong { font-weight: 650; } :where(.gw-chrome, .gw-landing) .platform-list { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 25px; } :where(.gw-chrome, .gw-landing) .platform-list>div { display: flex; align-items: center; gap: 12px; } :where(.gw-chrome, .gw-landing) .platform-logo { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 10px; background: var(--surface); font-family: var(--font-title); font-size: 23px; } :where(.gw-chrome, .gw-landing) .platform-logo.naver { background: #03C75A; color: #fff; } :where(.gw-chrome, .gw-landing) .platform-logo.wordpress { background: #21759B; color: #fff; } :where(.gw-chrome, .gw-landing) .platform-logo.tistory { background: #EB531F; color: #fff; } :where(.gw-chrome, .gw-landing) .platform-logo.blogger { background: #FF5722; color: #fff; } :where(.gw-chrome, .gw-landing) .platform-logo.instagram { background: radial-gradient(circle at 25% 105%,#FFDC80 0%,#FCAF45 21%,#F77737 34%,#E1306C 54%,#C13584 70%,#833AB4 85%,#405DE6 100%); color: #fff; } :where(.gw-chrome, .gw-landing) .platform-logo.threads { background: #000; color: #fff; } :where(.gw-chrome, .gw-landing) .platform-list span { font-size: var(--font-small); font-weight: 600; } :where(.gw-chrome, .gw-landing) .platform-list small { display: block; margin-top: 2px; color: #8c9591; font-family: var(--font-mono); font-size: var(--font-caption); font-weight: 400; } :where(.gw-chrome, .gw-landing) .features-section { background: var(--surface); } :where(.gw-chrome, .gw-landing) .feature-bento { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } :where(.gw-chrome, .gw-landing) .feature-card { position: relative; overflow: hidden; min-height: 320px; padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: #fff; } :where(.gw-chrome, .gw-landing) .feature-large { display: grid; grid-template-columns: .95fr 1fr; grid-column: span 2; gap: 20px; } :where(.gw-chrome, .gw-landing) .number-label { display: block; margin-bottom: 20px; color: #687b72; font-family: var(--font-mono); font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .feature-card h3 { margin-bottom: 15px; font-size: 25px; font-weight: 750; } :where(.gw-chrome, .gw-landing) .feature-card p { color: var(--text-muted); font-size: var(--font-small); line-height: 1.8; } :where(.gw-chrome, .gw-landing) .writing-visual { position: relative; align-self: center; min-width: 0; padding-top: 20px; } :where(.gw-chrome, .gw-landing) .prompt-bubble { position: absolute; top: 0; left: -12px; z-index: 2; display: flex; align-items: center; gap: 8px; transform: rotate(-4deg); padding: 13px 16px; border-radius: 9px; box-shadow: 0 10px 25px #102c2220; background: var(--ink); color: white; font-size: var(--font-caption); white-space: nowrap; } :where(.gw-chrome, .gw-landing) .prompt-bubble>i { color: var(--color-main); font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .prompt-bubble>span { margin-left: 10px; color: #8caaa0; } :where(.gw-chrome, .gw-landing) .paper-visual { position: relative; transform: rotate(5deg); width: 90%; margin: 7px auto -40px; padding: 35px 20px 25px; border: 1px solid #dce7e2; border-radius: 10px; background: #f6f9f7; } :where(.gw-chrome, .gw-landing) .paper-label { color: #65736c; font-family: var(--font-mono); font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .paper-visual strong { display: block; margin: 18px 0; font-size: 20px; font-weight: 700; line-height: 1.4; } :where(.gw-chrome, .gw-landing) .paper-line { display: block; height: 5px; margin: 9px 0; border-radius: 4px; background: #dde7e1; } :where(.gw-chrome, .gw-landing) .paper-line.short { width: 65%; } :where(.gw-chrome, .gw-landing) .paper-tags { display: flex; gap: 5px; margin: 20px 0 0; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .paper-tags>span { padding: 4px; border-radius: 4px; background: #e4eee8; } :where(.gw-chrome, .gw-landing) .paper-visual>i { position: absolute; right: -13px; bottom: 40px; color: var(--color-sub); font-size: 45px; } :where(.gw-chrome, .gw-landing) .mint-card { background: #e0f6ee; } :where(.gw-chrome, .gw-landing) .image-visual { position: absolute; right: 38px; bottom: -17px; width: 150px; height: 140px; } :where(.gw-chrome, .gw-landing) .image-frame { position: absolute; inset: 0; overflow: hidden; transform: rotate(9deg); border: 7px solid white; border-radius: 10px; box-shadow: 0 5px 20px #244e3020; background: #c2e6e0; } :where(.gw-chrome, .gw-landing) .image-frame.back { transform: rotate(-13deg) translate(-15px,-9px); background: #d8cbef; } :where(.gw-chrome, .gw-landing) .sun { position: absolute; top: 16px; right: 17px; width: 27px; height: 27px; border-radius: 50%; background: #fff3be; } :where(.gw-chrome, .gw-landing) .mountain { position: absolute; bottom: -65px; left: 0; transform: rotate(45deg); width: 140px; height: 140px; border-radius: 15px; background: #47ac98; } :where(.gw-chrome, .gw-landing) .image-frame>i { position: absolute; top: 8px; left: 8px; color: white; font-size: 20px; } :where(.gw-chrome, .gw-landing) .purple-card { background: #e9e1f6; } :where(.gw-chrome, .gw-landing) .connected-platforms { display: flex; gap: 8px; margin-top: 25px; } :where(.gw-chrome, .gw-landing) .connected-platforms span { display: grid; place-items: center; transform: rotate(-8deg); width: 43px; height: 43px; border-radius: 12px; box-shadow: 0 5px 8px #5d3e7f09; background: #fff; font-weight: 750; } :where(.gw-chrome, .gw-landing) .connected-platforms span:nth-child(even) { transform: rotate(8deg); } :where(.gw-chrome, .gw-landing) .compact-card { display: flex; justify-content: center; flex-direction: column; min-height: 240px; } :where(.gw-chrome, .gw-landing) .compact-card>i { margin-bottom: 24px; font-size: 28px; } :where(.gw-chrome, .gw-landing) .compact-card .number-label { margin-bottom: 9px; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .compact-card h3 { font-size: 21px; } :where(.gw-chrome, .gw-landing) .feature-bento>.compact-card:last-child { align-items: center; flex-direction: row; grid-column: 1 / -1; gap: 35px; min-height: 180px; background: var(--gradient); color: #fff; } :where(.gw-chrome, .gw-landing) .feature-bento>.compact-card:last-child>i { margin: 0; font-size: 65px; } :where(.gw-chrome, .gw-landing) .feature-bento>.compact-card:last-child p, :where(.gw-chrome, .gw-landing) .feature-bento>.compact-card:last-child .number-label { color: #fff; } :where(.gw-chrome, .gw-landing) .tour-section { background: #15231e; color: white; } :where(.gw-chrome, .gw-landing) .light-heading>p { color: #a6b5ae; } :where(.gw-chrome, .gw-landing) .light-heading .eyebrow { color: #8ba397; } :where(.gw-chrome, .gw-landing) .tour-workspace { display: grid; overflow: hidden; grid-template-columns: 175px minmax(0,1fr); border: 1px solid #405149; border-radius: 18px; box-shadow: 0 30px 60px #07110b24; background: #f6f8f6; color: var(--ink); } :where(.gw-chrome, .gw-landing) .workspace-sidebar { display: flex; flex-direction: column; padding: 28px 14px; background: #20332a; color: #a1b8aa; } :where(.gw-chrome, .gw-landing) .workspace-logo { display: block; margin: 0 16px 35px; color: var(--color-main); font-family: var(--font-title); font-size: 45px; font-weight: 750; line-height: 1; } :where(.gw-chrome, .gw-landing) .workspace-logo>span { color: #d1c1f1; font-size: 20px; } :where(.gw-chrome, .gw-landing) .workspace-menu { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; padding: 10px 11px; border-radius: 7px; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .workspace-menu i { font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .workspace-menu.active { background: #354a3e; color: var(--color-main); } :where(.gw-chrome, .gw-landing) .workspace-bottom { margin-top: auto; padding: 35px 10px 0; font-family: var(--font-mono); font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .workspace-bottom .live-dot { color: var(--color-main); } :where(.gw-chrome, .gw-landing) .workspace-bottom small { display: block; margin: 7px 12px; color: #7f978a; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .workspace-content { min-width: 0; padding: 32px; } :where(.gw-chrome, .gw-landing) .workspace-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; } :where(.gw-chrome, .gw-landing) .workspace-title .eyebrow { color: #769082; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .workspace-title h3 { margin-top: 5px; font-size: 22px; } :where(.gw-chrome, .gw-landing) .demo-badge { display: inline-block; padding: 4px 9px; border: 1px solid #d8e4dc; border-radius: 5px; background: #fff; color: #7b8a80; font-size: var(--font-caption); white-space: nowrap; } :where(.gw-chrome, .gw-landing) .demo-form { margin-top: 25px; } :where(.gw-chrome, .gw-landing) .demo-form>label { display: block; margin-bottom: 9px; font-size: var(--font-small); font-weight: 600; } :where(.gw-chrome, .gw-landing) .demo-input-row { display: flex; align-items: center; gap: 13px; padding: 6px 7px 6px 16px; border: 1px solid #c1d5c9; border-radius: 9px; background: #fff; } :where(.gw-chrome, .gw-landing) .demo-input-row>i { color: #109d80; font-size: 20px; } :where(.gw-chrome, .gw-landing) .demo-input-row input { flex: 1; width: 0; min-width: 0; border: none; background: transparent; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .demo-input-row .button { gap: 10px; min-height: 40px; padding: 9px 14px; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .suggestions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 11px; color: #8b968f; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .suggestions button { padding: 4px 8px; border-radius: 4px; background: #e8eeea; color: #5c7164; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .suggestions button:hover { background: #d6ebe1; } :where(.gw-chrome, .gw-landing) .tour-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 25px 0 18px; } :where(.gw-chrome, .gw-landing) .tour-steps>span { transition: var(--transition-slow); padding-bottom: 9px; border-bottom: 2px solid #e1e9e3; color: #8d9b92; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .tour-steps>span.active { border-color: #27b594; color: #159477; } :where(.gw-chrome, .gw-landing) .demo-result-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 18px; } :where(.gw-chrome, .gw-landing) .demo-article, :where(.gw-chrome, .gw-landing) .quality-panel { min-width: 0; padding: 20px; border: 1px solid #e0e7e1; border-radius: 10px; background: #fff; } :where(.gw-chrome, .gw-landing) .article-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; color: #7a8c80; font-family: var(--font-mono); font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .article-meta>span .live-dot { margin-right: 4px; color: #34b792; } :where(.gw-chrome, .gw-landing) .article-meta button { padding: 4px; background: transparent; color: #718379; font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .demo-article h4 { min-height: 52px; font-size: 20px; line-height: 1.4; } :where(.gw-chrome, .gw-landing) .demo-article>p { min-height: 92px; margin: 12px 0; color: #738078; font-size: var(--font-small); line-height: 1.9; white-space: pre-line; } :where(.gw-chrome, .gw-landing) .demo-placeholder { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 85px; margin: 15px 0 13px; border-radius: 6px; background: linear-gradient(120deg,#d4efdf,#e3ddf3); color: #658575; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .demo-placeholder i { font-size: 25px; } :where(.gw-chrome, .gw-landing) .demo-disclaimer { color: #89968c; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .quality-panel .eyebrow { color: #7d8c82; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .quality-panel h4 { margin-top: 7px; font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .quality-ring { position: relative; width: 120px; height: 120px; margin: 15px auto; } :where(.gw-chrome, .gw-landing) .quality-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; } :where(.gw-chrome, .gw-landing) .quality-ring circle { fill: none; stroke: #edf2ed; stroke-width: 8; } :where(.gw-chrome, .gw-landing) .quality-ring .ring-value { transition: stroke-dashoffset .5s; stroke: #34b994; stroke-linecap: round; stroke-dasharray: 308; stroke-dashoffset: 308; } :where(.gw-chrome, .gw-landing) .quality-ring>span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; font-family: var(--font-title); font-size: 34px; font-weight: 700; line-height: 1.2; } :where(.gw-chrome, .gw-landing) .quality-ring small { color: #9ca79e; font-size: var(--font-caption); font-weight: 400; } :where(.gw-chrome, .gw-landing) .quality-panel li { display: flex; justify-content: space-between; gap: 6px; padding: 6px 0; color: #6c7d71; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .quality-panel li.checked>span { color: #10a981; } :where(.gw-chrome, .gw-landing) .quality-panel>p { margin-top: 10px; color: #95a197; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .results-grid { display: grid; align-items: center; grid-template-columns: 1fr 1fr; gap: 80px; } :where(.gw-chrome, .gw-landing) .results-grid>.reveal>.eyebrow { margin-bottom: 20px; } :where(.gw-chrome, .gw-landing) .results-grid .section-description { margin-top: 25px; } :where(.gw-chrome, .gw-landing) .results-numbers { display: flex; gap: 60px; margin-top: 32px; } :where(.gw-chrome, .gw-landing) .results-numbers strong { display: block; font-family: var(--font-title); font-size: 45px; font-weight: 700; letter-spacing: -.06em; } :where(.gw-chrome, .gw-landing) .results-numbers span { color: #8c9690; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .chart-card { padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); } :where(.gw-chrome, .gw-landing) .chart-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 35px; font-size: var(--font-body); font-weight: 600; } :where(.gw-chrome, .gw-landing) .bar-row { margin-top: 25px; } :where(.gw-chrome, .gw-landing) .bar-row>div:first-child { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .bar-row b { font-family: var(--font-title); font-size: 23px; } :where(.gw-chrome, .gw-landing) .bar-row small { margin-left: 4px; font-family: var(--font-text); font-size: var(--font-caption); font-weight: 400; } :where(.gw-chrome, .gw-landing) .bar-track { overflow: hidden; height: 35px; border-radius: 5px; background: #e4e9e5; } :where(.gw-chrome, .gw-landing) .bar { display: block; transform-origin: left; height: 100%; border-radius: 5px; } :where(.gw-chrome, .gw-landing) .bar.before { width: 100%; background: #aeb9b0; } :where(.gw-chrome, .gw-landing) .bar.after { width: 25%; background: var(--gradient); } :where(.gw-chrome, .gw-landing) .chart-legend { display: flex; gap: 18px; margin-top: 25px; color: #7e8b81; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .chart-legend i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #aeb9b0; } :where(.gw-chrome, .gw-landing) .chart-legend>span:last-child i { background: var(--color-gradi-1); } :where(.gw-chrome, .gw-landing) .chart-card>p { margin-top: 22px; padding-top: 15px; border-top: 1px solid var(--line); color: #8c968f; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .usecases-section { padding-top: 0; } :where(.gw-chrome, .gw-landing) .slider-controls { display: flex; gap: 8px; } :where(.gw-chrome, .gw-landing) .slider-controls button { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: white; font-size: 18px; } :where(.gw-chrome, .gw-landing) .slider-controls button:disabled { cursor: default; opacity: .35; } :where(.gw-chrome, .gw-landing) .usecase-swiper .swiper-wrapper { display: flex; gap: 24px; } :where(.gw-chrome, .gw-landing) .usecase-swiper .swiper-slide { flex-shrink: 0; width: calc((100% - 48px)/3); } :where(.gw-chrome, .gw-landing) .usecase-swiper.swiper-initialized .swiper-wrapper { gap: 0; } :where(.gw-chrome, .gw-landing) .case-visual { position: relative; display: flex; overflow: hidden; align-items: center; justify-content: center; height: 210px; margin-bottom: 23px; border-radius: 15px; } :where(.gw-chrome, .gw-landing) .case-visual::after { content: ''; position: absolute; width: 160px; height: 160px; border: 1px solid #ffffff9c; border-radius: 50%; } :where(.gw-chrome, .gw-landing) .case-visual i { z-index: 1; transform: rotate(-12deg); font-size: 85px; } :where(.gw-chrome, .gw-landing) .case-visual>span { position: absolute; right: 16px; bottom: 12px; font-family: var(--font-mono); font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .case-mint { background: #c3efe3; color: #217763; } :where(.gw-chrome, .gw-landing) .case-purple { background: #dfd2f4; color: #7b51a7; } :where(.gw-chrome, .gw-landing) .case-peach { background: #f4ddcc; color: #99735c; } :where(.gw-chrome, .gw-landing) .usecase-card>.eyebrow { color: #7c8d82; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .usecase-card h3 { margin: 15px 0; font-size: 25px; font-weight: 700; } :where(.gw-chrome, .gw-landing) .usecase-card p { color: #77837b; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .swiper-pagination { position: relative!important; margin-top: 25px; } :where(.gw-chrome, .gw-landing) .swiper-pagination-bullet-active { background: var(--ink)!important; } :where(.gw-chrome, .gw-landing) .pricing-section { background: var(--surface); } :where(.gw-chrome, .gw-landing) .pricing-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; } :where(.gw-chrome, .gw-landing) .price-card { position: relative; padding: 30px 22px; border: 1px solid var(--line); border-radius: 13px; background: #fff; } :where(.gw-chrome, .gw-landing) .price-card>.eyebrow { color: #6f8678; } :where(.gw-chrome, .gw-landing) .price-card h3 { margin: 15px 0 23px; font-family: var(--font-text); font-size: var(--font-body); font-weight: 500; letter-spacing: -.03em; } :where(.gw-chrome, .gw-landing) .price { margin-bottom: 8px; font-family: var(--font-title); font-size: 32px; font-weight: 750; line-height: 1.4; letter-spacing: -.05em; } :where(.gw-chrome, .gw-landing) .price small { margin-left: 5px; color: #8b9b91; font-family: var(--font-text); font-size: var(--font-caption); font-weight: 400; letter-spacing: 0; } :where(.gw-chrome, .gw-landing) .price-card>p { color: #7d8c82; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .price-card .button { gap: 8px; width: 100%; min-height: 45px; margin: 25px 0; padding: 11px 12px; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .price-card ul { padding-top: 20px; border-top: 1px solid var(--line); } :where(.gw-chrome, .gw-landing) .price-card li { margin-bottom: 13px; color: #607568; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .price-card li::before { content: '✓'; margin-right: 9px; color: #20a885; } :where(.gw-chrome, .gw-landing) .price-card.custom-price li::before { color: var(--color-sub); } :where(.gw-chrome, .gw-landing) .featured-price { border: 1.5px solid #2fb69a; background: #e7f8f0; } :where(.gw-chrome, .gw-landing) .recommend { position: absolute; top: -13px; left: 22px; padding: 5px 10px; border-radius: 5px; background: var(--ink); color: var(--color-main); font-family: var(--font-mono); font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .custom-price { background: #f0ebf7; } :where(.gw-chrome, .gw-landing) .pricing-note { margin-top: 25px; color: #859087; font-size: var(--font-caption); text-align: center; } :where(.gw-chrome, .gw-landing) .insight-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; } :where(.gw-chrome, .gw-landing) .insight-card { padding: 0; background: transparent; color: var(--ink); text-align: left; } :where(.gw-chrome, .gw-landing) .insight-art { position: relative; display: flex; overflow: hidden; align-items: center; gap: 20px; transition: var(--transition-slow); height: 200px; padding: 30px; border-radius: 14px; } :where(.gw-chrome, .gw-landing) .insight-card:hover .insight-art { transform: translateY(-5px); } :where(.gw-chrome, .gw-landing) .insight-art i { transform: rotate(-15deg); font-size: 65px; } :where(.gw-chrome, .gw-landing) .insight-art span { font-family: var(--font-title); font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -.025em; } :where(.gw-chrome, .gw-landing) .art-one { background: #d6eee5; color: #3a7964; } :where(.gw-chrome, .gw-landing) .art-two { background: #e1d8f2; color: #8260a4; } :where(.gw-chrome, .gw-landing) .art-three { background: #d4e6f0; color: #5d8196; } :where(.gw-chrome, .gw-landing) .insight-card>.eyebrow { margin: 21px 0 12px; color: #86938a; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .insight-card h3 { font-size: 23px; line-height: 1.4; } :where(.gw-chrome, .gw-landing) .read-more { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line); color: #7f8b83; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .faq-section { padding-top: 0; } :where(.gw-chrome, .gw-landing) .faq-grid { display: grid; grid-template-columns: .85fr 1.4fr; gap: 90px; } :where(.gw-chrome, .gw-landing) .faq-grid>.reveal>.eyebrow, :where(.gw-chrome, .gw-landing) .contact-grid>.reveal>.eyebrow { margin-bottom: 20px; } :where(.gw-chrome, .gw-landing) .faq-grid .section-description { margin-top: 25px; } :where(.gw-chrome, .gw-landing) .faq-grid .section-description a { display: inline-block; margin-top: 10px; border-bottom: 1px solid #99b2a4; } :where(.gw-chrome, .gw-landing) .faq-list { border-top: 1px solid var(--ink); } :where(.gw-chrome, .gw-landing) .faq-list h3 { font-family: var(--font-text); font-size: var(--font-body); font-weight: 500; letter-spacing: -.025em; } :where(.gw-chrome, .gw-landing) .faq-list h3>button { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; padding: 23px 0; border-bottom: 1px solid var(--line); background: transparent!important; color: var(--ink)!important; font-weight: 550; text-align: left; } :where(.gw-chrome, .gw-landing) .faq-list h3>button i { transition: transform .25s; font-size: 20px; } :where(.gw-chrome, .gw-landing) .faq-list button[aria-expanded="true"] i { transform: rotate(45deg); } :where(.gw-chrome, .gw-landing) .faq-answer { padding: 20px 18px; background: #f4f7f5; color: #6c7d71; font-size: var(--font-small); line-height: 1.9; } :where(.gw-chrome, .gw-landing) .download-section { position: relative; overflow: hidden; background: var(--color-main); } :where(.gw-chrome, .gw-landing) .download-inner { display: flex; align-items: center; justify-content: space-between; gap: 50px; padding-top: 70px; padding-bottom: 70px; } :where(.gw-chrome, .gw-landing) .download-inner h2 { margin: 22px 0 18px; font-size: clamp(32px,3.6vw,48px); font-weight: 750; } :where(.gw-chrome, .gw-landing) .download-inner p { margin-bottom: 30px; font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .download-inner .button-outline { border-color: #209b85; } :where(.gw-chrome, .gw-landing) .download-emblem { position: relative; transform: rotate(-12deg); padding-right: 60px; font-family: var(--font-title); font-size: 250px; font-weight: 800; line-height: 1; letter-spacing: -.1em; } :where(.gw-chrome, .gw-landing) .download-emblem>span { position: absolute; top: -10px; right: -12px; color: #fff; font-size: 150px; } :where(.gw-chrome, .gw-landing) .contact-grid { display: grid; grid-template-columns: .85fr 1.2fr; gap: 100px; } :where(.gw-chrome, .gw-landing) .contact-grid .section-description { margin-top: 25px; } :where(.gw-chrome, .gw-landing) .contact-brand { display: flex; align-items: center; gap: 40px; margin-top: 35px; font-family: var(--font-title); font-size: var(--font-body); font-weight: 700; } :where(.gw-chrome, .gw-landing) .contact-note { display: block; margin-top: 20px; color: #9aa49b; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .contact-form { padding: 30px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); } :where(.gw-chrome, .gw-landing) .contact-form label { display: block; margin: 18px 0 8px; font-size: var(--font-small); font-weight: 600; } :where(.gw-chrome, .gw-landing) .form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } :where(.gw-chrome, .gw-landing) .form-two label { margin-top: 0; } :where(.gw-chrome, .gw-landing) .contact-form input:not([type="checkbox"]), :where(.gw-chrome, .gw-landing) .contact-form select, :where(.gw-chrome, .gw-landing) .contact-form textarea { display: block; width: 100%; min-width: 0; padding: 12px; border: 1px solid #dce4de; border-radius: 6px; background: #fff; color: var(--ink); font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .contact-form textarea { resize: vertical; } :where(.gw-chrome, .gw-landing) .contact-form .checkbox-label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; color: #687e6e; font-size: var(--font-caption); font-weight: 400; } :where(.gw-chrome, .gw-landing) .checkbox-label input { accent-color: #209e80; } :where(.gw-chrome, .gw-landing) .checkbox-label>span { color: #8f9c92; } :where(.gw-chrome, .gw-landing) .contact-form>.button { justify-content: space-between; width: 100%; } :where(.gw-chrome, .gw-landing) .site-footer, .site-footer.gw-chrome { padding: 55px 0 20px; background: #15231e; color: #fff; } :where(.gw-chrome, .gw-landing) .footer-top { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-bottom: 45px; } :where(.gw-chrome, .gw-landing) .footer-wordmark { position: relative; display: flex; align-items: center; gap: 8px; font-family: var(--font-title); font-size: 35px; font-weight: 800; letter-spacing: -.06em; } :where(.gw-chrome, .gw-landing) .footer-wordmark span { color: #94a89b; font-weight: 500; } :where(.gw-chrome, .gw-landing) .footer-wordmark i { position: absolute; top: -14px; right: -18px; color: var(--color-main); font-size: 23px; font-style: normal; } :where(.gw-chrome, .gw-landing) .footer-top p { margin-left: auto; color: #adc0b4; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .footer-top>a:last-child { margin-left: 50px; color: #adc0b4; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; padding-top: 20px; border-top: 1px solid #34453b; color: #82988a; font-family: var(--font-mono); font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .floating-contact, .floating-contact.gw-chrome { position: fixed; right: 25px; bottom: 25px; z-index: 40; display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid #ffffff66; border-radius: 50%; box-shadow: 0 4px 18px #20392a20; background: var(--ink); color: var(--color-main); font-size: 23px; } :where(.gw-chrome, .gw-landing) .info-dialog { overflow: auto; width: min(560px,calc(100% - 32px)); max-height: 85dvh; padding: 30px; border: 1px solid var(--line); border-radius: 17px; background: #fff; color: var(--ink); } :where(.gw-chrome, .gw-landing) .info-dialog::backdrop { backdrop-filter: blur(4px); background: #102419aa; } :where(.gw-chrome, .gw-landing) .dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; } :where(.gw-chrome, .gw-landing) .dialog-header button { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; background: var(--surface); font-size: 21px; } :where(.gw-chrome, .gw-landing) .info-dialog h2 { margin-bottom: 20px; font-size: 26px; } :where(.gw-chrome, .gw-landing) #dialog-content { color: #65776a; font-size: var(--font-body); line-height: 1.9; white-space: pre-line; overflow-wrap: anywhere; } :where(.gw-chrome, .gw-landing) #dialog-content h3 { margin: 20px 0 8px; color: var(--ink); font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) #dialog-content ul { margin: 15px 0; } :where(.gw-chrome, .gw-landing) #dialog-content li { margin: 10px 0; } :where(.gw-chrome, .gw-landing) .info-dialog>.button { width: 100%; margin-top: 28px; } :where(.gw-chrome, .gw-landing) #toast { position: fixed; bottom: 30px; left: 50%; z-index: 100; pointer-events: none; transform: translate(-50%,12px); transition: var(--transition-slow); opacity: 0; max-width: calc(100vw - 40px); padding: 13px 22px; border-radius: 9px; box-shadow: 0 5px 25px #142b3333; background: var(--ink); color: #fff; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) #toast.visible { transform: translate(-50%,0); opacity: 1; } :where(.gw-chrome, .gw-landing) .lenis.lenis-smooth { scroll-behavior: auto!important; } @media (min-width:1500px) { :where(.gw-chrome, .gw-landing) .hero-main { min-height: 490px; } } @media (max-width:1100px) { :where(.gw-chrome, .gw-landing) .wrap, :where(.gw-chrome, .gw-landing) .header-inner { width: calc(100% - 64px); } :where(.gw-chrome, .gw-landing) .desktop-nav { gap: 18px; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .header-inner { gap: 20px; } :where(.gw-chrome, .gw-landing) .hero-main { min-height: 455px; padding: 30px; } :where(.gw-chrome, .gw-landing) .hero-preview { padding: 25px 20px; } :where(.gw-chrome, .gw-landing) .hero-main h1 { font-size: clamp(38px,4.6vw,53px); } :where(.gw-chrome, .gw-landing) .hero-main p { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .hero-main .button { padding: 12px 15px; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .hero-tile strong { font-size: 24px; } :where(.gw-chrome, .gw-landing) .platforms { gap: 30px; } :where(.gw-chrome, .gw-landing) .platform-list { gap: 18px; } :where(.gw-chrome, .gw-landing) .platform-list>div { gap: 8px; } :where(.gw-chrome, .gw-landing) .platform-list span { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .platforms>p { min-width: 140px; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .feature-card { padding: 24px; } :where(.gw-chrome, .gw-landing) .feature-large { grid-template-columns: 1fr .9fr; } :where(.gw-chrome, .gw-landing) .feature-card h3 { font-size: 22px; } :where(.gw-chrome, .gw-landing) .feature-card p { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .prompt-bubble { padding: 12px; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .paper-visual strong { font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .results-grid, :where(.gw-chrome, .gw-landing) .faq-grid, :where(.gw-chrome, .gw-landing) .contact-grid { gap: 45px; } :where(.gw-chrome, .gw-landing) .tour-workspace { grid-template-columns: 155px minmax(0,1fr); } :where(.gw-chrome, .gw-landing) .workspace-content { padding: 25px; } :where(.gw-chrome, .gw-landing) .price-card { padding: 25px 17px; } :where(.gw-chrome, .gw-landing) .price { font-size: 27px; } :where(.gw-chrome, .gw-landing) .price-card h3 { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .price small { display: block; } :where(.gw-chrome, .gw-landing) .insight-art { gap: 14px; padding: 25px; } :where(.gw-chrome, .gw-landing) .insight-art i { font-size: 50px; } :where(.gw-chrome, .gw-landing) .insight-art span { font-size: 19px; } } @media (max-width:900px) { :where(.gw-chrome, .gw-landing) .desktop-nav { display: none; } :where(.gw-chrome, .gw-landing) .header-cta { margin-left: auto; } :where(.gw-chrome, .gw-landing) .menu-toggle { display: block; } :where(.gw-chrome, .gw-landing) .section { padding: 80px 0; } :where(.gw-chrome, .gw-landing) .hero-grid { grid-template-columns: 1fr 1fr; gap: 12px; } :where(.gw-chrome, .gw-landing) .hero-main { min-height: 430px; padding: 26px; } :where(.gw-chrome, .gw-landing) .hero-main .eyebrow { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .hero-main h1 { font-size: 40px; } :where(.gw-chrome, .gw-landing) .hero-main p { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .hero-preview { padding: 25px 13px; } :where(.gw-chrome, .gw-landing) .preview-top { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .mini-editor { padding: 0 17px 15px; } :where(.gw-chrome, .gw-landing) .editor-toolbar { margin-right: -17px; margin-left: -17px; } :where(.gw-chrome, .gw-landing) .mini-editor h2 { font-size: 24px; } :where(.gw-chrome, .gw-landing) .keyword-chip { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .floating-label { right: 9px; padding: 12px; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .floating-label small { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .hero-tile { padding: 23px; } :where(.gw-chrome, .gw-landing) .hero-tile strong { font-size: 21px; } :where(.gw-chrome, .gw-landing) .tile-note { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .tile-icon { width: 55px; height: 55px; font-size: 35px; } :where(.gw-chrome, .gw-landing) .platforms { align-items: flex-start; flex-direction: column; gap: 25px; } :where(.gw-chrome, .gw-landing) .platforms>p br { display: none; } :where(.gw-chrome, .gw-landing) .platform-list { width: 100%; } :where(.gw-chrome, .gw-landing) .section-heading { gap: 25px; } :where(.gw-chrome, .gw-landing) .section-heading>p { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .section-heading h2, :where(.gw-chrome, .gw-landing) .results-grid h2, :where(.gw-chrome, .gw-landing) .faq-grid h2, :where(.gw-chrome, .gw-landing) .contact-grid h2 { font-size: 34px; } :where(.gw-chrome, .gw-landing) .feature-bento { grid-template-columns: repeat(2,1fr); } :where(.gw-chrome, .gw-landing) .feature-large { grid-template-columns: 1fr 1fr; } :where(.gw-chrome, .gw-landing) .feature-bento>.compact-card:last-child { grid-column: span 2; } :where(.gw-chrome, .gw-landing) .feature-card { min-height: 280px; } :where(.gw-chrome, .gw-landing) .compact-card { min-height: 220px; } :where(.gw-chrome, .gw-landing) .tour-workspace { grid-template-columns: 1fr; } :where(.gw-chrome, .gw-landing) .workspace-sidebar { display: none; } :where(.gw-chrome, .gw-landing) .results-grid { gap: 30px; } :where(.gw-chrome, .gw-landing) .chart-card { padding: 22px; } :where(.gw-chrome, .gw-landing) .chart-title { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .chart-legend { gap: 10px; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .usecases-section { padding-top: 0; } :where(.gw-chrome, .gw-landing) .usecase-card h3 { font-size: 22px; } :where(.gw-chrome, .gw-landing) .pricing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px 18px; } :where(.gw-chrome, .gw-landing) .price-card { padding: 30px; } :where(.gw-chrome, .gw-landing) .price { font-size: 32px; } :where(.gw-chrome, .gw-landing) .price small { display: inline; } :where(.gw-chrome, .gw-landing) .insight-grid { gap: 16px; } :where(.gw-chrome, .gw-landing) .insight-art { align-items: flex-start; justify-content: center; flex-direction: column; gap: 10px; height: 200px; } :where(.gw-chrome, .gw-landing) .insight-art span { font-size: 18px; } :where(.gw-chrome, .gw-landing) .insight-card h3 { font-size: 19px; } :where(.gw-chrome, .gw-landing) .faq-section { padding-top: 0; } :where(.gw-chrome, .gw-landing) .faq-grid { grid-template-columns: .8fr 1.2fr; gap: 40px; } :where(.gw-chrome, .gw-landing) .download-emblem { padding-right: 40px; font-size: 170px; } :where(.gw-chrome, .gw-landing) .download-emblem>span { top: -3px; right: 0; font-size: 100px; } :where(.gw-chrome, .gw-landing) .contact-grid { grid-template-columns: 1fr 1.3fr; gap: 30px; } :where(.gw-chrome, .gw-landing) .contact-form { padding: 23px; } :where(.gw-chrome, .gw-landing) .form-two { grid-template-columns: 1fr; gap: 0; } :where(.gw-chrome, .gw-landing) .form-two>div:last-child label { margin-top: 18px; } :where(.gw-chrome, .gw-landing) .footer-wordmark { font-size: 27px; } :where(.gw-chrome, .gw-landing) .footer-top>a:last-child { margin-left: 10px; } } @media (max-width:640px) { :where(.gw-chrome, .gw-landing) .wrap, :where(.gw-chrome, .gw-landing) .header-inner { width: calc(100% - 36px); } :where(.gw-chrome, .gw-landing) .section { padding: 64px 0; } :where(.gw-chrome, .gw-landing) .announcement, .announcement.gw-chrome { padding: 6px 12px; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .announcement a, .announcement.gw-chrome a { margin-left: 5px; } :where(.gw-chrome, .gw-landing) .header-inner { gap: 10px; height: 70px; } :where(.gw-chrome, .gw-landing) .logo { gap: 7px; font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .logo small { font-size: var(--font-micro); } :where(.gw-chrome, .gw-landing) .logo-symbol { width: 29px; height: 31px; font-size: 25px; line-height: 27px; } :where(.gw-chrome, .gw-landing) .header-cta { gap: 5px; padding: 8px 10px; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .header-cta i { display: none; } :where(.gw-chrome, .gw-landing) .menu-toggle { padding: 5px; font-size: 24px; } :where(.gw-chrome, .gw-landing) .hero { padding-top: 12px; } :where(.gw-chrome, .gw-landing) .hero-grid { grid-template-columns: 1fr; } :where(.gw-chrome, .gw-landing) .hero-main { min-height: 430px; padding: 28px; border-radius: 19px; } :where(.gw-chrome, .gw-landing) .hero-main h1 { margin-top: 32px; font-size: clamp(39px,10vw,53px); } :where(.gw-chrome, .gw-landing) .hero-main p { font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .hero-main .eyebrow { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .hero-main .button { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .hero-bottom { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .hero-preview { min-height: 405px; padding: 25px; border-radius: 19px; } :where(.gw-chrome, .gw-landing) .preview-top { margin-bottom: 20px; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .mini-editor { width: 90%; margin-bottom: 25px; padding-right: 20px; padding-left: 20px; } :where(.gw-chrome, .gw-landing) .editor-toolbar { margin-right: -20px; margin-left: -20px; } :where(.gw-chrome, .gw-landing) .mini-editor h2 { font-size: 27px; } :where(.gw-chrome, .gw-landing) .mini-editor>p { min-height: 35px; } :where(.gw-chrome, .gw-landing) .keyword-chip { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .floating-label { right: 16px; bottom: 22px; padding: 12px 15px; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .hero-tile { min-height: 190px; padding: 24px; border-radius: 19px; } :where(.gw-chrome, .gw-landing) .hero-tile strong { font-size: 25px; } :where(.gw-chrome, .gw-landing) .hero-tile .eyebrow { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .tile-note { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .hero-caption { gap: 12px; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .hero-caption a { gap: 7px; } :where(.gw-chrome, .gw-landing) .platforms { padding-top: 40px; padding-bottom: 45px; } :where(.gw-chrome, .gw-landing) .platform-list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; } :where(.gw-chrome, .gw-landing) .platform-list>div { gap: 12px; } :where(.gw-chrome, .gw-landing) .platform-list span { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .section-heading { display: block; margin-bottom: 30px; } :where(.gw-chrome, .gw-landing) .section-heading .eyebrow { margin-bottom: 15px; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .section-heading h2, :where(.gw-chrome, .gw-landing) .results-grid h2, :where(.gw-chrome, .gw-landing) .faq-grid h2, :where(.gw-chrome, .gw-landing) .contact-grid h2 { font-size: 32px; } :where(.gw-chrome, .gw-landing) .section-heading>p { margin-top: 22px; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .feature-bento { grid-template-columns: 1fr; gap: 14px; } :where(.gw-chrome, .gw-landing) .feature-large { display: block; grid-column: auto; min-height: 455px; } :where(.gw-chrome, .gw-landing) .feature-card { padding: 26px; } :where(.gw-chrome, .gw-landing) .feature-card h3 { font-size: 24px; } :where(.gw-chrome, .gw-landing) .feature-card p { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .writing-visual { width: 75%; margin: 30px auto 0; } :where(.gw-chrome, .gw-landing) .paper-visual { min-height: 230px; padding-top: 30px; } :where(.gw-chrome, .gw-landing) .prompt-bubble { left: -25px; padding: 12px; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .paper-visual strong { font-size: 19px; } :where(.gw-chrome, .gw-landing) .mint-card, :where(.gw-chrome, .gw-landing) .purple-card { min-height: 270px; } :where(.gw-chrome, .gw-landing) .purple-card .connected-platforms { margin-top: 25px; } :where(.gw-chrome, .gw-landing) .compact-card { align-items: center; justify-content: flex-start; flex-direction: row; gap: 23px; min-height: 165px; } :where(.gw-chrome, .gw-landing) .compact-card>i { margin-bottom: 0; font-size: 30px; } :where(.gw-chrome, .gw-landing) .compact-card h3 { font-size: 19px; } :where(.gw-chrome, .gw-landing) .compact-card p { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .feature-bento>.compact-card:last-child { grid-column: auto; gap: 23px; min-height: 180px; } :where(.gw-chrome, .gw-landing) .feature-bento>.compact-card:last-child>i { font-size: 35px; } :where(.gw-chrome, .gw-landing) .workspace-content { padding: 20px 16px; } :where(.gw-chrome, .gw-landing) .workspace-title h3 { font-size: 19px; } :where(.gw-chrome, .gw-landing) .workspace-title .eyebrow { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .demo-badge { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .demo-input-row { flex-wrap: wrap; gap: 10px; padding: 10px; } :where(.gw-chrome, .gw-landing) .demo-input-row input { width: calc(100% - 35px); padding: 5px 0; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .demo-input-row .button { width: 100%; } :where(.gw-chrome, .gw-landing) .suggestions { gap: 6px; } :where(.gw-chrome, .gw-landing) .tour-steps { gap: 5px; margin-top: 22px; } :where(.gw-chrome, .gw-landing) .tour-steps>span { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .demo-result-grid { grid-template-columns: 1fr; gap: 12px; } :where(.gw-chrome, .gw-landing) .demo-article, :where(.gw-chrome, .gw-landing) .quality-panel { padding: 18px; } :where(.gw-chrome, .gw-landing) .demo-article h4 { min-height: 0; font-size: 21px; } :where(.gw-chrome, .gw-landing) .demo-article>p { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .quality-panel { display: grid; column-gap: 12px; align-items: center; grid-template-columns: 1fr 1fr; } :where(.gw-chrome, .gw-landing) .quality-panel .eyebrow { grid-column: span 2; } :where(.gw-chrome, .gw-landing) .quality-panel h4 { grid-column: span 2; } :where(.gw-chrome, .gw-landing) .quality-ring { margin: 12px auto; } :where(.gw-chrome, .gw-landing) .quality-panel>p { grid-column: span 2; } :where(.gw-chrome, .gw-landing) .quality-panel li { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .results-grid { grid-template-columns: 1fr; gap: 35px; } :where(.gw-chrome, .gw-landing) .results-grid .section-description { font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .results-numbers { margin-top: 25px; } :where(.gw-chrome, .gw-landing) .chart-card { padding: 25px; } :where(.gw-chrome, .gw-landing) .usecases-section { padding-top: 0; } :where(.gw-chrome, .gw-landing) .usecases-section .section-heading { display: flex; align-items: flex-end; gap: 12px; } :where(.gw-chrome, .gw-landing) .slider-controls { gap: 5px; } :where(.gw-chrome, .gw-landing) .slider-controls button { width: 34px; height: 34px; } :where(.gw-chrome, .gw-landing) .usecase-swiper .swiper-wrapper { overflow-x: auto; gap: 16px; } :where(.gw-chrome, .gw-landing) .usecase-swiper .swiper-slide { width: 88%; } :where(.gw-chrome, .gw-landing) .usecase-swiper.swiper-initialized .swiper-wrapper { overflow: visible; gap: 0; } :where(.gw-chrome, .gw-landing) .usecase-card h3 { font-size: 25px; } :where(.gw-chrome, .gw-landing) .case-visual { height: 215px; } :where(.gw-chrome, .gw-landing) .pricing-grid { grid-template-columns: 1fr; gap: 25px; } :where(.gw-chrome, .gw-landing) .price-card { padding: 30px; } :where(.gw-chrome, .gw-landing) .price-card h3 { font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .price-card>p { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .price { font-size: 37px; } :where(.gw-chrome, .gw-landing) .price-card .button { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .price-card li { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .pricing-note { font-size: var(--font-caption); text-align: left; } :where(.gw-chrome, .gw-landing) .insight-grid { grid-template-columns: 1fr; gap: 35px; } :where(.gw-chrome, .gw-landing) .insight-art { align-items: center; flex-direction: row; gap: 25px; height: 190px; } :where(.gw-chrome, .gw-landing) .insight-art i { font-size: 70px; } :where(.gw-chrome, .gw-landing) .insight-art span { font-size: 28px; } :where(.gw-chrome, .gw-landing) .insight-card h3 { font-size: 24px; } :where(.gw-chrome, .gw-landing) .read-more { margin-top: 15px; } :where(.gw-chrome, .gw-landing) .faq-section { padding-top: 0; } :where(.gw-chrome, .gw-landing) .faq-grid, :where(.gw-chrome, .gw-landing) .contact-grid { grid-template-columns: 1fr; gap: 30px; } :where(.gw-chrome, .gw-landing) .faq-list h3 { font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .faq-list h3>button { padding: 21px 0; } :where(.gw-chrome, .gw-landing) .download-inner { align-items: flex-start; padding-top: 55px; padding-bottom: 55px; } :where(.gw-chrome, .gw-landing) .download-inner h2 { font-size: 31px; } :where(.gw-chrome, .gw-landing) .download-inner p { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .download-emblem { display: none; } :where(.gw-chrome, .gw-landing) .download-inner .eyebrow { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .download-inner .button-row { flex-direction: column; } :where(.gw-chrome, .gw-landing) .download-inner .button { justify-content: space-between; } :where(.gw-chrome, .gw-landing) .contact-form { padding: 24px 20px; } :where(.gw-chrome, .gw-landing) .form-two { grid-template-columns: 1fr; } :where(.gw-chrome, .gw-landing) .contact-brand { margin-top: 25px; } :where(.gw-chrome, .gw-landing) .footer-top { display: block; padding-bottom: 30px; } :where(.gw-chrome, .gw-landing) .footer-wordmark { display: inline-flex; font-size: 32px; } :where(.gw-chrome, .gw-landing) .footer-top p { margin: 25px 0 18px; } :where(.gw-chrome, .gw-landing) .footer-top>a:last-child { margin: 0; } :where(.gw-chrome, .gw-landing) .footer-bottom { display: flex; align-items: flex-start; flex-direction: column; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .floating-contact, .floating-contact.gw-chrome { right: 16px; bottom: 16px; width: 44px; height: 44px; font-size: 21px; } :where(.gw-chrome, .gw-landing) .info-dialog { padding: 24px; } :where(.gw-chrome, .gw-landing) .info-dialog h2 { font-size: 24px; } } @media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto!important; } :where(.gw-chrome, .gw-landing) *, :where(.gw-chrome, .gw-landing) *::before, :where(.gw-chrome, .gw-landing) *::after { transition-duration: .01ms!important; animation-duration: .01ms!important; } } .gw-chrome, .gw-landing { font-size: var(--font-body); line-height: var(--line-height-text); } :where(.gw-chrome, .gw-landing) h1, :where(.gw-chrome, .gw-landing) h2, :where(.gw-chrome, .gw-landing) h3, :where(.gw-chrome, .gw-landing) h4 { font-weight: 700; line-height: 1.5; letter-spacing: 0; } :where(.gw-chrome, .gw-landing) .section-heading h2, :where(.gw-chrome, .gw-landing) .results-grid h2, :where(.gw-chrome, .gw-landing) .faq-grid h2, :where(.gw-chrome, .gw-landing) .contact-grid h2, :where(.gw-chrome, .gw-landing) .download-inner h2 { font-size: var(--font-heading-xl); font-weight: 700; line-height: 1.5; letter-spacing: -.025em; } :where(.gw-chrome, .gw-landing) .section-heading>p, :where(.gw-chrome, .gw-landing) .section-description, :where(.gw-chrome, .gw-landing) .hero-main p, :where(.gw-chrome, .gw-landing) .feature-card p, :where(.gw-chrome, .gw-landing) .usecase-card p, :where(.gw-chrome, .gw-landing) .download-inner p, :where(.gw-chrome, .gw-landing) .faq-answer, :where(.gw-chrome, .gw-landing) #dialog-content { font-size: var(--font-body); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .eyebrow { font-size: var(--font-caption); line-height: 1.5; letter-spacing: .04em; overflow-wrap: anywhere; } :where(.gw-chrome, .gw-landing) .button { min-height: 52px; font-size: var(--font-body); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .announcement, .announcement.gw-chrome { padding: 10px 20px; font-size: var(--font-small); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .announcement a, .announcement.gw-chrome a { display: inline-block; } :where(.gw-chrome, .gw-landing) .header-inner { height: auto; min-height: 100px; padding-top: 14px; padding-bottom: 14px; } :where(.gw-chrome, .gw-landing) .logo { font-size: 22px; } :where(.gw-chrome, .gw-landing) .logo small { font-size: var(--font-micro); line-height: 1.5; letter-spacing: 0; } :where(.gw-chrome, .gw-landing) .desktop-nav { gap: 24px; font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .header-cta { gap: 12px; min-height: 46px; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .hero-grid { grid-template-columns: minmax(0,1.12fr) minmax(0,1fr); } :where(.gw-chrome, .gw-landing) .hero-main { min-height: 580px; } :where(.gw-chrome, .gw-landing) .hero-main h1 { margin-top: 28px; font-size: var(--font-display); font-weight: 700; line-height: 1.3; letter-spacing: -.025em; } :where(.gw-chrome, .gw-landing) .hero-main>.button { text-align: left; white-space: normal; } :where(.gw-chrome, .gw-landing) .hero-bottom { gap: 20px; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .hero-preview { min-width: 0; min-height: 580px; padding-bottom: 100px; } :where(.gw-chrome, .gw-landing) .preview-top { gap: 12px; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .preview-top>span:first-child { min-width: 0; } :where(.gw-chrome, .gw-landing) .small-tag { flex-shrink: 0; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .mini-editor { width: 94%; margin-bottom: 0; } :where(.gw-chrome, .gw-landing) .editor-toolbar { gap: 12px; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .editor-label, :where(.gw-chrome, .gw-landing) .keyword-chip, :where(.gw-chrome, .gw-landing) .mini-editor>p, :where(.gw-chrome, .gw-landing) .editor-footer { font-size: var(--font-caption); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .keyword-chip i { flex-shrink: 0; } :where(.gw-chrome, .gw-landing) .mini-editor h2 { font-size: var(--font-heading-lg); line-height: 1.5; letter-spacing: -.025em; } :where(.gw-chrome, .gw-landing) .mini-editor>p { min-height: 60px; } :where(.gw-chrome, .gw-landing) .editor-footer { flex-wrap: wrap; gap: 8px; } :where(.gw-chrome, .gw-landing) .floating-label { right: 20px; bottom: 20px; max-width: calc(100% - 40px); font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .floating-label small { font-size: var(--font-caption); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .floating-label>i { margin-left: 4px; } :where(.gw-chrome, .gw-landing) .hero-tile strong { font-size: var(--font-heading-lg); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .tile-note { align-items: flex-start; gap: 15px; font-size: var(--font-small); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .tile-note i { flex-shrink: 0; } :where(.gw-chrome, .gw-landing) .hero-caption { flex-wrap: wrap; gap: 15px; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .platforms { flex-wrap: wrap; gap: 32px; } :where(.gw-chrome, .gw-landing) .platforms>p { font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .platform-list { gap: 24px; min-width: 0; } :where(.gw-chrome, .gw-landing) .platform-list>div { min-width: 0; } :where(.gw-chrome, .gw-landing) .platform-list span { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .platform-list small { font-size: var(--font-caption); letter-spacing: 0; } :where(.gw-chrome, .gw-landing) .platform-logo { flex-shrink: 0; } :where(.gw-chrome, .gw-landing) .feature-card h3, :where(.gw-chrome, .gw-landing) .usecase-card h3, :where(.gw-chrome, .gw-landing) .insight-card h3 { font-size: var(--font-heading-md); font-weight: 700; line-height: 1.5; } :where(.gw-chrome, .gw-landing) .feature-large { grid-template-columns: 1fr 1fr; min-height: 410px; } :where(.gw-chrome, .gw-landing) .feature-card .number-label { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .mint-card { min-height: 410px; padding-bottom: 170px; } :where(.gw-chrome, .gw-landing) .purple-card { min-height: 330px; } :where(.gw-chrome, .gw-landing) .compact-card { min-height: 270px; } :where(.gw-chrome, .gw-landing) .compact-card h3 { font-size: var(--font-heading-sm); } :where(.gw-chrome, .gw-landing) .prompt-bubble { width: max-content; max-width: calc(100% + 12px); font-size: var(--font-caption); line-height: 1.5; white-space: normal; } :where(.gw-chrome, .gw-landing) .prompt-bubble>span { flex-shrink: 0; } :where(.gw-chrome, .gw-landing) .paper-visual { width: 94%; margin-top: 30px; } :where(.gw-chrome, .gw-landing) .paper-visual strong { font-size: var(--font-heading-sm); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .paper-label, :where(.gw-chrome, .gw-landing) .paper-tags { font-size: var(--font-caption); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .paper-tags { flex-wrap: wrap; } :where(.gw-chrome, .gw-landing) .tour-workspace { grid-template-columns: 210px minmax(0,1fr); } :where(.gw-chrome, .gw-landing) .workspace-menu { gap: 8px; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .workspace-menu i { flex-shrink: 0; } :where(.gw-chrome, .gw-landing) .workspace-bottom, :where(.gw-chrome, .gw-landing) .workspace-bottom small { font-size: var(--font-caption); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .workspace-title { align-items: flex-start; flex-wrap: wrap; } :where(.gw-chrome, .gw-landing) .workspace-title .eyebrow { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .workspace-title h3 { font-size: var(--font-heading-md); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .demo-badge { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .demo-form>label { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .demo-input-row input { padding-top: 10px; padding-bottom: 10px; font-size: var(--font-body); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .demo-input-row .button { min-height: 48px; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .suggestions, :where(.gw-chrome, .gw-landing) .suggestions button { font-size: var(--font-caption); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .suggestions button { min-height: 36px; padding: 7px 10px; } :where(.gw-chrome, .gw-landing) .tour-steps>span { font-size: var(--font-small); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .demo-result-grid { grid-template-columns: minmax(0,1.5fr) minmax(250px,1fr); } :where(.gw-chrome, .gw-landing) .article-meta { gap: 8px; font-size: var(--font-caption); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .article-meta button { padding: 8px; } :where(.gw-chrome, .gw-landing) .demo-article h4 { min-height: 0; font-size: var(--font-heading-sm); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .demo-article>p { min-height: 0; font-size: var(--font-body); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .demo-placeholder, :where(.gw-chrome, .gw-landing) .demo-disclaimer, :where(.gw-chrome, .gw-landing) .quality-panel .eyebrow, :where(.gw-chrome, .gw-landing) .quality-ring small, :where(.gw-chrome, .gw-landing) .quality-panel>p { font-size: var(--font-caption); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .demo-disclaimer { display: block; } :where(.gw-chrome, .gw-landing) .demo-placeholder { min-height: 100px; padding: 15px; } :where(.gw-chrome, .gw-landing) .demo-placeholder>i { flex-shrink: 0; } :where(.gw-chrome, .gw-landing) .quality-panel h4 { font-size: var(--font-heading-sm); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .quality-panel li { gap: 12px; padding: 9px 0; font-size: var(--font-small); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .quality-panel li>span { flex-shrink: 0; } :where(.gw-chrome, .gw-landing) .quality-ring>span { font-size: 36px; } :where(.gw-chrome, .gw-landing) .results-numbers span { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .chart-title { flex-wrap: wrap; font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .bar-row>div:first-child { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .bar-row small { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .chart-legend { flex-wrap: wrap; gap: 10px 18px; font-size: var(--font-caption); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .chart-card>p { font-size: var(--font-caption); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .case-visual>span, :where(.gw-chrome, .gw-landing) .usecase-card>.eyebrow { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .price-card h3 { min-height: 51px; font-size: var(--font-body); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .price { font-size: 40px; line-height: 1.5; } :where(.gw-chrome, .gw-landing) .price small { display: block; margin-left: 0; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .price-card>p, :where(.gw-chrome, .gw-landing) .price-card li { font-size: var(--font-small); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .price-card .button { min-height: 50px; font-size: var(--font-small); white-space: normal; } :where(.gw-chrome, .gw-landing) .recommend, :where(.gw-chrome, .gw-landing) .pricing-note { font-size: var(--font-caption); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .recommend { top: -16px; } :where(.gw-chrome, .gw-landing) .insight-card>.eyebrow { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .read-more { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .faq-list h3 { font-size: var(--font-heading-sm); font-weight: 700; line-height: 1.5; } :where(.gw-chrome, .gw-landing) .faq-answer { font-size: var(--font-body); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .contact-brand { font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .contact-note { font-size: var(--font-caption); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .contact-form label { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .contact-form input:not([type="checkbox"]), :where(.gw-chrome, .gw-landing) .contact-form select, :where(.gw-chrome, .gw-landing) .contact-form textarea { padding: 14px; font-size: var(--font-body); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .contact-form .checkbox-label { align-items: flex-start; gap: 8px; font-size: var(--font-caption); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .checkbox-label input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; } :where(.gw-chrome, .gw-landing) .footer-top { flex-wrap: wrap; } :where(.gw-chrome, .gw-landing) .footer-top p, :where(.gw-chrome, .gw-landing) .footer-top>a:last-child { font-size: var(--font-small); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .footer-bottom { font-size: var(--font-caption); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .info-dialog h2 { font-size: var(--font-heading-md); } :where(.gw-chrome, .gw-landing) #dialog-content { font-size: var(--font-body); line-height: 1.5; } :where(.gw-chrome, .gw-landing) #dialog-content h3 { font-size: var(--font-heading-sm); } :where(.gw-chrome, .gw-landing) #toast { font-size: var(--font-small); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .demo-disclaimer, :where(.gw-chrome, .gw-landing) .quality-panel>p, :where(.gw-chrome, .gw-landing) .chart-card>p, :where(.gw-chrome, .gw-landing) .pricing-note, :where(.gw-chrome, .gw-landing) .contact-note { color: #65716e; } :where(.gw-chrome, .gw-landing) .footer-bottom { color: #b2c4b9; } @media (max-width:1100px) { :where(.gw-chrome, .gw-landing) .desktop-nav { display: none; } :where(.gw-chrome, .gw-landing) .header-cta { margin-left: auto; } :where(.gw-chrome, .gw-landing) .menu-toggle { display: block; } :where(.gw-chrome, .gw-landing) .hero-main h1 { font-size: 44px; } :where(.gw-chrome, .gw-landing) .hero-main { min-height: 550px; } :where(.gw-chrome, .gw-landing) .hero-preview { min-height: 550px; } :where(.gw-chrome, .gw-landing) .hero-main p, :where(.gw-chrome, .gw-landing) .hero-main .button { font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .hero-tile strong { font-size: var(--font-heading-md); } :where(.gw-chrome, .gw-landing) .platforms { align-items: flex-start; flex-direction: column; } :where(.gw-chrome, .gw-landing) .platform-list { width: 100%; } :where(.gw-chrome, .gw-landing) .feature-bento { grid-template-columns: repeat(2,minmax(0,1fr)); } :where(.gw-chrome, .gw-landing) .feature-large { grid-column: span 2; } :where(.gw-chrome, .gw-landing) .feature-card { min-height: 310px; } :where(.gw-chrome, .gw-landing) .feature-card h3 { font-size: var(--font-heading-md); } :where(.gw-chrome, .gw-landing) .feature-card p { font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .mint-card { min-height: 360px; } :where(.gw-chrome, .gw-landing) .tour-workspace { grid-template-columns: minmax(0,1fr); } :where(.gw-chrome, .gw-landing) .workspace-sidebar { display: none; } :where(.gw-chrome, .gw-landing) .pricing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 20px; } :where(.gw-chrome, .gw-landing) .price-card h3 { font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .results-grid { gap: 35px; } :where(.gw-chrome, .gw-landing) .insight-grid { gap: 20px; } :where(.gw-chrome, .gw-landing) .insight-art { align-items: flex-start; justify-content: center; flex-direction: column; height: 230px; } } @media (max-width:900px) { :where(.gw-chrome, .gw-landing) .section-heading { display: block; } :where(.gw-chrome, .gw-landing) .section-heading>p { margin-top: 22px; } :where(.gw-chrome, .gw-landing) .section-heading h2, :where(.gw-chrome, .gw-landing) .results-grid h2, :where(.gw-chrome, .gw-landing) .faq-grid h2, :where(.gw-chrome, .gw-landing) .contact-grid h2, :where(.gw-chrome, .gw-landing) .download-inner h2 { font-size: 32px; } :where(.gw-chrome, .gw-landing) .hero-grid { grid-template-columns: minmax(0,1fr); } :where(.gw-chrome, .gw-landing) .hero-main { min-height: 510px; } :where(.gw-chrome, .gw-landing) .hero-main h1 { font-size: 60px; } :where(.gw-chrome, .gw-landing) .hero-preview { min-height: 570px; padding: 30px 30px 110px; } :where(.gw-chrome, .gw-landing) .mini-editor { width: 85%; } :where(.gw-chrome, .gw-landing) .hero-tile>div { gap: 30px; } :where(.gw-chrome, .gw-landing) .hero-tile strong { font-size: 32px; } :where(.gw-chrome, .gw-landing) .tile-note { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .demo-result-grid { grid-template-columns: minmax(0,1fr); } :where(.gw-chrome, .gw-landing) .quality-panel { display: grid; align-items: center; grid-template-columns: 150px minmax(0,1fr); gap: 0 25px; } :where(.gw-chrome, .gw-landing) .quality-panel .eyebrow, :where(.gw-chrome, .gw-landing) .quality-panel h4, :where(.gw-chrome, .gw-landing) .quality-panel>p { grid-column: 1 / -1; } :where(.gw-chrome, .gw-landing) .quality-ring { grid-column: 1; } :where(.gw-chrome, .gw-landing) .quality-panel ul { grid-column: 2; } :where(.gw-chrome, .gw-landing) .results-grid { grid-template-columns: minmax(0,1fr); } :where(.gw-chrome, .gw-landing) .faq-grid, :where(.gw-chrome, .gw-landing) .contact-grid { grid-template-columns: minmax(0,1fr); gap: 35px; } :where(.gw-chrome, .gw-landing) .insight-grid { grid-template-columns: minmax(0,1fr); gap: 35px; } :where(.gw-chrome, .gw-landing) .insight-art { align-items: center; justify-content: flex-start; flex-direction: row; gap: 30px; height: 210px; } :where(.gw-chrome, .gw-landing) .insight-card h3 { font-size: 24px; } :where(.gw-chrome, .gw-landing) .insight-art span { font-size: 28px; } :where(.gw-chrome, .gw-landing) .footer-top>a:last-child { margin-left: 0; } } @media (max-width:640px) { :root { --font-display: 44px; --font-heading-xl: 28px; --font-heading-lg: 24px; --font-heading-md: 22px; } .gw-chrome, .gw-landing { font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .announcement, .announcement.gw-chrome { padding: 10px 18px; font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .header-inner { flex-wrap: wrap; gap: 12px; min-height: 84px; padding-top: 12px; padding-bottom: 12px; } :where(.gw-chrome, .gw-landing) .logo { gap: 8px; font-size: 19px; } :where(.gw-chrome, .gw-landing) .logo small { font-size: var(--font-micro); } :where(.gw-chrome, .gw-landing) .header-cta { justify-content: center; order: 3; width: 100%; min-height: 42px; margin-left: 0; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .menu-toggle { width: 44px; height: 44px; margin-left: auto; } :where(.gw-chrome, .gw-landing) .hero-main { min-height: 530px; padding: 24px; } :where(.gw-chrome, .gw-landing) .hero-main .eyebrow, :where(.gw-chrome, .gw-landing) .preview-top { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .hero-main h1 { font-size: 44px; line-height: 1.5; letter-spacing: -.025em; } :where(.gw-chrome, .gw-landing) .hero-main p { font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .hero-main .button { padding: 13px 15px; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .hero-bottom { align-items: flex-start; gap: 12px; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .orbit-mark { font-size: 42px; } :where(.gw-chrome, .gw-landing) .hero-preview { min-height: 620px; padding: 25px 17px 120px; } :where(.gw-chrome, .gw-landing) .mini-editor { width: 90%; padding-right: 17px; padding-left: 17px; } :where(.gw-chrome, .gw-landing) .editor-toolbar { flex-wrap: wrap; margin-right: -17px; margin-left: -17px; } :where(.gw-chrome, .gw-landing) .mini-editor h2 { font-size: 24px; } :where(.gw-chrome, .gw-landing) .keyword-chip { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .floating-label { right: 13px; bottom: 20px; gap: 9px; max-width: calc(100% - 26px); padding: 12px; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .floating-label small { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .floating-label>i { display: none; } :where(.gw-chrome, .gw-landing) .hero-tile { min-height: 260px; padding: 24px; } :where(.gw-chrome, .gw-landing) .hero-tile strong { font-size: 24px; } :where(.gw-chrome, .gw-landing) .tile-icon { flex-shrink: 0; width: 50px; height: 50px; font-size: 32px; } :where(.gw-chrome, .gw-landing) .hero-caption { align-items: flex-start; font-size: var(--font-caption); line-height: 1.5; } :where(.gw-chrome, .gw-landing) .platform-list { gap: 25px 16px; } :where(.gw-chrome, .gw-landing) .platform-list>div { align-items: flex-start; gap: 9px; } :where(.gw-chrome, .gw-landing) .platform-list span { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .platform-list small { font-size: var(--font-caption); overflow-wrap: anywhere; } :where(.gw-chrome, .gw-landing) .platform-logo { width: 35px; height: 35px; font-size: 22px; } :where(.gw-chrome, .gw-landing) .section-heading h2, :where(.gw-chrome, .gw-landing) .results-grid h2, :where(.gw-chrome, .gw-landing) .faq-grid h2, :where(.gw-chrome, .gw-landing) .contact-grid h2, :where(.gw-chrome, .gw-landing) .download-inner h2 { font-size: 28px; line-height: 1.5; } :where(.gw-chrome, .gw-landing) .section-heading>p, :where(.gw-chrome, .gw-landing) .results-grid .section-description, :where(.gw-chrome, .gw-landing) .feature-card p, :where(.gw-chrome, .gw-landing) .download-inner p { font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .feature-bento { grid-template-columns: minmax(0,1fr); } :where(.gw-chrome, .gw-landing) .feature-large { grid-column: auto; min-height: 580px; } :where(.gw-chrome, .gw-landing) .feature-card h3 { font-size: 22px; } :where(.gw-chrome, .gw-landing) .writing-visual { width: 85%; margin-top: 35px; } :where(.gw-chrome, .gw-landing) .prompt-bubble { left: -12px; max-width: calc(100% + 24px); font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .paper-visual { min-height: 270px; } :where(.gw-chrome, .gw-landing) .paper-visual strong { font-size: 19px; } :where(.gw-chrome, .gw-landing) .mint-card { min-height: 380px; } :where(.gw-chrome, .gw-landing) .purple-card { min-height: 330px; } :where(.gw-chrome, .gw-landing) .compact-card { align-items: flex-start; gap: 18px; min-height: 220px; padding: 26px; } :where(.gw-chrome, .gw-landing) .compact-card h3 { font-size: 19px; } :where(.gw-chrome, .gw-landing) .compact-card>i { flex-shrink: 0; } :where(.gw-chrome, .gw-landing) .feature-bento>.compact-card:last-child { grid-column: auto; gap: 18px; min-height: 240px; } :where(.gw-chrome, .gw-landing) .workspace-content { padding: 22px 16px; } :where(.gw-chrome, .gw-landing) .workspace-title { gap: 12px; } :where(.gw-chrome, .gw-landing) .workspace-title h3 { font-size: 22px; } :where(.gw-chrome, .gw-landing) .demo-input-row { padding: 12px; } :where(.gw-chrome, .gw-landing) .demo-input-row input { font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .demo-input-row .button { width: 100%; font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .tour-steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 12px; } :where(.gw-chrome, .gw-landing) .tour-steps>span { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .demo-article>p { font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .quality-panel { display: flex; align-items: stretch; flex-direction: column; gap: 0; } :where(.gw-chrome, .gw-landing) .quality-panel li { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .quality-ring { align-self: center; } :where(.gw-chrome, .gw-landing) .chart-title { font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .chart-legend { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .pricing-grid { grid-template-columns: minmax(0,1fr); gap: 30px; } :where(.gw-chrome, .gw-landing) .price-card { padding: 28px; } :where(.gw-chrome, .gw-landing) .price-card h3 { min-height: 0; font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .price { font-size: 36px; } :where(.gw-chrome, .gw-landing) .price small { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .price-card>p, :where(.gw-chrome, .gw-landing) .price-card li, :where(.gw-chrome, .gw-landing) .price-card .button { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .pricing-note { font-size: var(--font-caption); } :where(.gw-chrome, .gw-landing) .insight-card h3 { font-size: 22px; } :where(.gw-chrome, .gw-landing) .insight-art { gap: 20px; padding: 24px; } :where(.gw-chrome, .gw-landing) .insight-art span { font-size: 24px; } :where(.gw-chrome, .gw-landing) .insight-art i { font-size: 52px; } :where(.gw-chrome, .gw-landing) .faq-list h3 { font-size: 19px; } :where(.gw-chrome, .gw-landing) .faq-answer { font-size: var(--font-body); } :where(.gw-chrome, .gw-landing) .footer-top p, :where(.gw-chrome, .gw-landing) .footer-top>a:last-child { font-size: var(--font-small); } :where(.gw-chrome, .gw-landing) .footer-bottom { font-size: var(--font-caption); overflow-wrap: anywhere; } :where(.gw-chrome, .gw-landing) #dialog-content { font-size: var(--font-body); } } :where(.gw-chrome, .gw-landing) .platform-list { display: grid; align-items: start; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 20px 16px; } :where(.gw-chrome, .gw-landing) .platform-list>div { align-items: center; } :where(.gw-chrome, .gw-landing) .platform-list span { min-width: 0; overflow-wrap: anywhere; } :where(.gw-chrome, .gw-landing) .connected-platforms { display: grid; grid-template-columns: repeat(3,minmax(0,43px)); gap: 10px; padding: 3px; } :where(.gw-chrome, .gw-landing) .connected-platforms span { max-width: 100%; } @media (max-width:1239px) { :where(.gw-chrome, .gw-landing) .platforms { align-items: stretch; flex-direction: column; } :where(.gw-chrome, .gw-landing) .platform-list { grid-template-columns: repeat(3,minmax(0,1fr)); } } @media (max-width:640px) { :where(.gw-chrome, .gw-landing) .platform-list { grid-template-columns: repeat(2,minmax(0,1fr)); } } /* 그누보드 공통 화면과 반응형 컨테이너 */ .skip-link { position: fixed; top: 0; left: 20px; z-index: 10000; transform: translateY(-110%); padding: 12px 16px; background: #172321; color: #fff; font-size: 16px; text-decoration: none; } .skip-link:focus { top: 10px; transform: translateY(0); outline: 3px solid #3CDBC0; outline-offset: 2px; } body { min-width: 0; margin: 0; background: #fff; } .gw-chrome, .gw-landing { color: var(--ink); font-family: var(--font-text); font-size: 17px; line-height: 1.5; word-break: keep-all; } .gw-subpage { width: calc(100% - 48px); max-width: 1280px; min-height: 50vh; margin: 50px auto 80px; } .gw-subpage #container { float: none; width: 100%; min-width: 0; margin: 0; font-family: var(--font-text); } .gw-subpage #container_title { margin: 0 0 32px; font-family: var(--font-title); font-size: 28px; } .gw-subpage .tbl_head01 { overflow-x: auto; } .gw-subpage .tbl_head01 table { min-width: 580px; } .gw-subpage .btn_submit { background: #172321; color: #fff; } @media(max-width:640px) { .gw-subpage { width: calc(100% - 32px); margin-top: 28px; } .mbskin { width: calc(100% - 32px); max-width: 400px; } } .gw-login-brand { margin: 60px auto 0; color: #172321; font: 700 26px var(--font-title); text-align: center; } .gw-login-brand span { font-weight: 400; } .gw-login-brand p { margin-top: 12px; color: #65716e; font: 15px var(--font-text); } #mb_login { margin-top: 30px; }