:root {
  color-scheme: dark;
  --bg: #050505;
  --surface: #111113;
  --line: #262629;
  --text: #f4f4f5;
  --muted: #a0a0a7;
  --mint: #91edc2;
  --spectrum: linear-gradient(105deg, #f3c894 3%, #d3e898 27%, #89eac1 57%, #8dc9f2 82%, #a99ae9);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 108px; }
body.discovery-page { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.7 system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
body { overflow-x: clip; }
a { color: inherit; text-underline-offset: 4px; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--mint); outline-offset: 6px; }
button { font: inherit; color: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure { margin: 0; }
.page-width { width: min(1160px, calc(100% - 80px)); margin-inline: auto; }
.spectrum-text { background: var(--spectrum); background-clip: text; -webkit-background-clip: text; color: transparent; }
.eyebrow { font-size: 12px; font-weight: 550; letter-spacing: 2px; color: #b7b7be; }
.muted-heading { color: #85858c; }
.site-header { position: sticky; z-index: 20; top: 16px; width: min(1200px, calc(100% - 48px)); height: 64px; margin: 16px auto 0; padding: 0 22px; border: 1px solid #ffffff20; border-radius: 20px; background: #151516cc; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); display: flex; align-items: center; justify-content: space-between; box-shadow: 0 8px 35px #0004; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; font-size: 22px; line-height: 1; font-weight: 720; letter-spacing: -.8px; text-decoration: none; }
.wordmark img { border-radius: 9px; }
.site-header nav { display: flex; gap: 32px; }
.site-header nav a { text-decoration: none; font-size: 12px; color: #b1b1b8; transition: color .2s; }
.site-header nav a:hover { color: #fff; }
.header-actions { display: flex; align-items: center; gap: 18px; }
.language-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 7px 0; border: 0; background: transparent; color: #6f7077; font-size: 12px; line-height: 1; }
.language-toggle .lang-zh { color: #fff; }
html[lang="en"] .language-toggle .lang-zh { color: #6f7077; }
html[lang="en"] .language-toggle .lang-en { color: #fff; }
.nav-cta { font-size: 12px; line-height: 1; border: 1px solid #727276; border-radius: 99px; padding: 12px 17px; text-decoration: none; }
.nav-cta span { margin-left: 6px; }
.nav-cta:hover { background: #fff; color: #111; }
.hero { position: relative; isolation: isolate; text-align: center; padding: 64px 24px 50px; overflow: hidden; }
.hero-aura { position: absolute; z-index: -1; top: -65px; left: 50%; transform: translateX(-50%); width: min(800px, 125vw); height: 440px; background: radial-gradient(ellipse at 38% 37%, #46997518, transparent 46%), radial-gradient(ellipse at 65% 45%, #526db021, transparent 45%), radial-gradient(ellipse at 48% 25%, #b08e6313, transparent 48%); filter: blur(24px); }
.hero-emblem { position: relative; width: 104px; height: 104px; margin: 0 auto 27px; }
.hero-emblem img { width: 100%; height: 100%; border-radius: 25px; filter: drop-shadow(0 15px 28px #31695628); }
.hero .eyebrow { display: inline-flex; gap: 9px; align-items: center; font-size: 12px; letter-spacing: 1px; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: #b5e3c9; box-shadow: 0 0 10px #91edc288; }
h1 { font-size: clamp(46px, 6vw, 78px); font-weight: 650; line-height: 1.18; letter-spacing: -3px; margin: 23px 0 25px; }
.hero-description { font-size: 17px; line-height: 1.85; color: var(--muted); }
.actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 48px; padding: 12px 23px; border-radius: 99px; text-decoration: none; font-size: 14px; font-weight: 550; transition: background .2s, transform .2s; }
.button:hover { transform: translateY(-2px); }
.primary { background: #efeff1; color: #151515; border: 1px solid #efeff1; }
.primary:hover { background: #fff; }
.secondary { background: #131315; border: 1px solid #454549; }
.secondary:hover { background: #222225; }
.hero-meta { color: #898990; font-size: 11px; margin-top: 15px; }
.hero-meta span { padding: 0 6px; }
.scroll-cue { display: inline-flex; gap: 12px; align-items: center; font-size: 10px; letter-spacing: 1px; color: #898990; text-decoration: none; margin-top: 50px; }
.showcase { position: relative; padding-top: 64px; }
.showcase-heading { display: flex; justify-content: space-between; gap: 30px; align-items: flex-end; margin-bottom: 30px; }
.showcase-heading h2 { font-size: 30px; letter-spacing: -1px; margin-top: 12px; font-weight: 570; }
.showcase-heading > p { font-size: 13px; color: var(--muted); }
.showcase-controls { display: flex; flex-direction: column; align-items: center; gap: 13px; margin-top: 27px; }
.demo-tabs { display: inline-flex; background: #18181b; border: 1px solid #2a2a30; border-radius: 99px; padding: 5px; gap: 4px; }
.demo-tabs button { display: flex; align-items: center; gap: 9px; border: 0; background: transparent; color: #8e8e97; padding: 9px 19px; border-radius: 99px; font-size: 9px; transition: background .2s, color .2s; }
.demo-tabs button span { font-size: 12px; }.demo-tabs button[aria-selected="true"] { background: #ededf0; color: #161618; }
.showcase-controls > p { font-size: 9px; color: #85858c; }
.intro-statement { max-width: 830px; margin: 73px auto 0; color: #898990; font-size: 22px; font-weight: 500; line-height: 1.85; letter-spacing: -.4px; }
.intro-statement strong { color: #eaeaec; font-weight: 500; }
.workflow { padding-top: 150px; }
.section-heading h2 { font-size: clamp(40px, 4.8vw, 62px); line-height: 1.2; letter-spacing: -2px; font-weight: 600; margin-top: 20px; }
.feature-row { display: grid; grid-template-columns: 1fr 1.12fr; gap: 95px; align-items: center; margin-top: 110px; }
.feature-row.reverse .feature-copy { order: 2; }.feature-row.reverse { grid-template-columns: 1.12fr 1fr; }
.chapter { font-size: 11px; color: #92929b; letter-spacing: 1px; }
.feature-copy h3 { font-size: clamp(31px, 3.2vw, 43px); line-height: 1.35; font-weight: 550; letter-spacing: -1.5px; margin: 20px 0 26px; }
.feature-copy p { font-size: 15px; color: var(--muted); line-height: 1.95; max-width: 420px; }
.feature-label { display: block; font-size: 10px; color: #bebec5; margin-top: 26px; }.feature-label i { padding: 0 9px; font-style: normal; color: #5f5f69; }
.package-sharing { scroll-margin-top:108px; }
.package-sharing .feature-copy h2 { font-size:clamp(31px,3.2vw,43px); line-height:1.35; font-weight:550; letter-spacing:-1.5px; margin:20px 0 26px; }
.package-tutorial-link { display:inline-flex; align-items:center; gap:14px; margin-top:28px; color:#bfd8f2; font-size:13px; text-decoration:none; border-bottom:1px solid #536a82; padding-bottom:5px; }
.package-tutorial-link:hover { color:#fff; border-color:#bcd8f3; }
.package-visual { min-width:0; padding:28px 22px 19px; background:transparent; }
.package-dialog figcaption { display:flex; align-items:center; gap:10px; margin:0 0 12px; color:#b6c7d8; font-size:11px; line-height:1.7; }
.package-step { display:grid; place-items:center; width:24px; height:24px; flex:0 0 24px; border:1px solid #40546b; border-radius:50%; color:#9cc7f0; font-size:9px; }
/* Clip the screenshot margins in CSS, preserving the original UI pixels. */
.package-dialog-window { display:block; position:relative; width:min(420px,100%); aspect-ratio:var(--dialog-ratio); margin-inline:auto; overflow:hidden; border-radius:3.333333% / var(--dialog-radius); }
.package-dialog-window--export { --dialog-ratio:420/200; --dialog-radius:7%; --image-width:109.761905%; --image-left:-4.761905%; --image-top:-5%; }
.package-dialog-window--import { --dialog-ratio:420/175; --dialog-radius:8%; --image-width:105.952381%; --image-left:-2.142857%; --image-top:-12.571429%; }
.package-dialog-window img { position:absolute; display:block; width:var(--image-width); max-width:none; height:auto; left:var(--image-left); top:var(--image-top); }
/* Match the progress track in the cropped 420 x 200 export screenshot. */
.package-dialog-window--export::before,
.package-dialog-window--export::after { content:""; position:absolute; left:5.47619%; right:5.47619%; top:59%; height:2%; border-radius:999px; pointer-events:none; }
.package-dialog-window--export::before { background:#3b3c3f; }
.package-dialog-window--export::after { background:#368efb; transform-origin:left center; animation:package-export-progress 6.4s linear infinite; }
@keyframes package-export-progress {
  0%,5% { transform:scaleX(.006); }
  28% { transform:scaleX(.3); }
  58% { transform:scaleX(.7); }
  86%,100% { transform:scaleX(1); }
}
@media(prefers-reduced-motion:reduce) {
  .package-dialog-window--export::after { animation:none; transform:scaleX(.65); }
}
.package-transfer { display:flex; align-items:center; justify-content:center; gap:12px; color:#6d97bb; font-size:18px; margin:10px 0 14px; }
.package-transfer > span:first-child,.package-transfer > span:last-child { display:block; width:36px; height:1px; background:#2d445b; }
.package-visual-note { text-align:center; margin-top:14px; color:#71869c; font-size:9px; line-height:1.8; }
.section-kicker { color: #9cf0bd; font-size: 12px; font-weight: 650; letter-spacing: 1px; }
.audience-section { padding-top: 155px; }
.audience-section > h2 { margin-top: 24px; font-size: clamp(34px, 3.6vw, 48px); line-height: 1.28; letter-spacing: -1.7px; font-weight: 590; }
.audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 52px; }
.audience-grid article { min-height: 194px; padding: 30px 26px; border: 1px solid #2b3a32; border-radius: 10px; background: #0d1310; }
.audience-grid article > p { color: #9cf0bd; font-size: 12px; font-weight: 600; }
.audience-grid h3 { margin: 24px 0 14px; color: #f0f2f0; font-size: 20px; line-height: 1.45; font-weight: 580; }
.audience-grid article > div { color: #a5aaa6; font-size: 14px; line-height: 1.9; }
.trial-section { display: grid; grid-template-columns: .92fr 1.25fr; gap: 110px; align-items: start; padding-top: 155px; }
.trial-intro h2 { margin: 24px 0 25px; font-size: clamp(35px, 4vw, 52px); line-height: 1.28; letter-spacing: -1.8px; font-weight: 590; }
.trial-intro > p:not(.section-kicker) { max-width: 455px; color: #a5aaa7; font-size: 14px; line-height: 1.95; }
.trial-intro > a { display: inline-flex; gap: 7px; margin-top: 20px; color: #9cf0bd; font-size: 14px; font-weight: 600; text-underline-offset: 5px; }
.trial-steps { display: grid; gap: 30px; margin: 0; padding: 0; list-style: none; }
.trial-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 18px; }
.trial-steps li > span { color: #9cf0bd; font-size: 12px; font-weight: 650; padding-top: 3px; }
.trial-steps h3 { margin: 0 0 9px; color: #f0f2f0; font-size: 18px; line-height: 1.45; font-weight: 600; }
.trial-steps p { color: #a5aaa7; font-size: 14px; line-height: 1.9; }
.comparison-section { padding-top: 155px; }.comparison-intro { text-align: center; margin-bottom: 55px; }.comparison-intro h2 { font-size: clamp(38px, 4.5vw, 58px); line-height: 1.25; font-weight: 570; letter-spacing: -2px; margin: 20px 0 25px; }.comparison-intro > p:last-child { font-size: 15px; color: var(--muted); line-height: 1.95; }
.comparison-scroll { overflow-x: auto; border: 1px solid #303035; border-radius: 12px; }table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 13px; }caption { text-align: left; font-size: 10px; color: #91919a; padding: 18px 22px; }th, td { padding: 23px; border-top: 1px solid #2a2a2e; text-align: left; vertical-align: top; line-height: 1.9; }thead th { font-size: 21px; font-weight: 570; background: #141416; }thead th:first-child { font-size: 12px; color: #aaaab2; }tbody th { font-size: 12px; font-weight: 450; width: 18%; color: #d0d0d5; }td { width: 41%; color: #a1a1aa; }.mocix-column { background: #121a17; }thead .mocix-column { color: #b1e6c9; }.source-note { color: #8e8e96; font-size: 10px; margin-top: 18px; }.source-note a { color: #b7b7c2; }.mobile-table-hint { display: none; }.decision-note { display: grid; grid-template-columns: 160px 1fr; padding: 24px 0; border-bottom: 1px solid #29292d; margin-top: 26px; gap: 30px; }.decision-note > span { color: #d3d3d9; font-size: 12px; }.decision-note p { font-size: 12px; color: #9c9ca5; }
.faq { display: grid; grid-template-columns: 1fr 1.5fr; gap: 90px; padding-top: 145px; }.faq h2 { font-size: 36px; line-height: 1.4; font-weight: 550; letter-spacing: -1px; margin: 20px 0; }.faq > div > p:last-child { font-size: 13px; color: #898993; }.faq details { border-bottom: 1px solid #2b2b2f; }.faq details:first-child { border-top: 1px solid #2b2b2f; }.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 450; padding: 24px 0; }.faq summary::-webkit-details-marker { display: none; }.faq summary > span { position: relative; flex: 0 0 11px; width: 11px; height: 11px; }.faq summary > span::before, .faq summary > span::after { content: ""; position: absolute; background: #aaaab1; }.faq summary > span::before { width: 11px; height: 1px; top: 5px; }.faq summary > span::after { height: 11px; width: 1px; left: 5px; transition: transform .2s; }.faq details[open] summary > span::after { transform: rotate(90deg); }.faq details > p { padding: 0 24px 25px 0; color: #a0a0a9; font-size: 13px; line-height: 1.9; }.faq details a { color: #ced1d9; }
.closing { position: relative; text-align: center; isolation: isolate; padding: 160px 24px 110px; overflow: hidden; }.closing > img { margin: 0 auto 30px; border-radius: 18px; }.closing h2 { font-size: clamp(36px, 4.5vw, 60px); font-weight: 580; letter-spacing: -2px; margin: 24px 0 30px; }.closing .actions { margin-top: 0; }.closing-meta { color: #898990; font-size: 11px; margin-top: 23px; }.closing-glow { position: absolute; z-index: -1; width: 850px; height: 420px; left: 50%; bottom: -220px; transform: translateX(-50%); background: conic-gradient(from 20deg, #5c78b050, #82644e40, #497d6448, #5c78b050); filter: blur(90px); border-radius: 50%; }
.site-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; padding: 34px 0 40px; border-top: 1px solid #2c2c30; }.site-footer .wordmark { font-size: 25px; }.site-footer p { font-size: 10px; color: #85858f; margin-top: 17px; }.footer-right { text-align: right; }.footer-right p { line-height: 1.85; }
.skip-link { position: fixed; top: -100px; left: 20px; padding: 12px 20px; background: #fff; color: #111; z-index: 100; }.skip-link:focus { top: 15px; }
@media(min-width:1500px) { .hero { padding-top: 78px; } }
@media(max-width:1000px) {
  .page-width { width: calc(100% - 56px); }.feature-row, .feature-row.reverse { gap: 50px; }.trial-section { gap: 55px; }.faq { gap: 50px; }
}
@media(max-width:700px) {
  html { scroll-padding-top: 90px; }.page-width { width: calc(100% - 36px); }.site-header { top: 10px; width: calc(100% - 24px); height: 58px; margin-top: 10px; padding: 0 14px; border-radius: 16px; }.site-header nav { display: none; }.wordmark { font-size: 21px; gap: 7px; }.wordmark img { width: 28px; height: 28px; }.nav-cta { font-size: 11px; padding: 10px 14px; }.hero { padding: 51px 20px 35px; }.hero-emblem { width: 86px; height: 86px; margin-bottom: 27px; }.hero .eyebrow { font-size: 10px; letter-spacing: .3px; }h1 { font-size: clamp(42px, 11.7vw, 64px); letter-spacing: -2.4px; margin: 25px 0; }.hero-description { font-size: 14px; }.button { font-size: 12px; padding: 12px 20px; min-height: 45px; gap: 15px; }.actions { gap: 10px; margin-top: 28px; }.hero-meta { font-size: 9px; }.scroll-cue { margin-top: 42px; font-size: 9px; }.showcase { padding-top: 36px; }.showcase-heading { display: block; margin-bottom: 22px; }.showcase-heading h2 { font-size: 23px; margin-top: 13px; }.showcase-heading > p { display: none; }.eyebrow { font-size: 10px; }.showcase-controls { margin-top: 19px; gap: 10px; }.demo-tabs { gap: 0; padding: 4px; }.demo-tabs button { gap: 6px; padding: 9px 13px; font-size: 8px; }.demo-tabs button span { font-size: 10px; }.showcase-controls > p { font-size: 8px; }.intro-statement { font-size: 18px; margin-top: 49px; line-height: 1.85; }.workflow { padding-top: 85px; }.section-heading h2 { font-size: 42px; margin-top: 18px; }.feature-row, .feature-row.reverse { display: flex; flex-direction: column; align-items: stretch; gap: 28px; margin-top: 65px; }.feature-row.reverse .feature-copy { order: 0; }.feature-copy h3 { font-size: 33px; margin: 15px 0 19px; }.feature-copy p { font-size: 14px; max-width: none; }.chapter { font-size: 10px; }.feature-label { margin-top: 19px; font-size: 9px; }.feature-label i { padding: 0 7px; }.comparison-section { padding-top: 90px; }.comparison-intro { margin-bottom: 32px; text-align: left; }.comparison-intro h2 { font-size: 36px; letter-spacing: -1.5px; margin: 19px 0; }.comparison-intro > p:last-child { font-size: 13px; }.desktop-break { display: none; }th, td { padding: 18px; }.mobile-table-hint { display: block; color: #c0c0cc; }.decision-note { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }.decision-note p { font-size: 11px; }.faq { grid-template-columns: 1fr; gap: 26px; padding-top: 85px; }.faq h2 { font-size: 33px; margin: 16px 0; }.faq summary { font-size: 13px; padding: 21px 0; }.faq details > p { font-size: 12px; padding-right: 15px; }.closing { padding: 100px 18px 75px; }.closing .eyebrow { font-size: 9px; letter-spacing: 1px; }.closing > img { width: 64px; height: 64px; margin-bottom: 26px; }.closing h2 { font-size: 35px; letter-spacing: -1.5px; }.closing .button { font-size: 11px; padding: 12px 17px; gap: 12px; }.closing-meta { font-size: 9px; }.site-footer { gap: 15px; padding: 29px 0; }.site-footer p { font-size: 9px; }.footer-right > a { font-size: 10px; }
}
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; }.button:hover { transform: none; } }
/* Show only the app window interior, excluding wallpaper and its outer stroke. */
.product-gallery { background: transparent; }
.product-screen[hidden] { display: none; }
.screenshot-button { position: relative; display: block; width: 100%; border: 0; background: transparent; padding: 0; cursor: zoom-in; text-align: left; }
.window-crop { display: block; position: relative; width: 100%; aspect-ratio: 1436 / 956; overflow: hidden; border: 0; box-shadow: none; border-radius: 1.5% / 2.25%; }
.window-crop[data-scene="moodboard"] { --image-width: 104.596100%; --image-left: -3.064067%; --image-top: -3.556485%; }
.window-crop[data-scene="connections"] { --image-width: 104.456825%; --image-left: -2.228412%; --image-top: -2.510460%; }
.window-crop[data-scene="storyboard"] { --image-width: 105.362117%; --image-left: -2.924791%; --image-top: -5.543933%; }
.window-crop[data-scene="production"] { --image-width: 105.362117%; --image-left: -2.576602%; --image-top: -1.882845%; }
.window-crop[data-scene^="homepage"] { aspect-ratio:1505/999; --image-width:100%; --image-left:0%; --image-top:0%; border-radius:10px; }
/* Match the screenshot window corners at every size, including the large viewer. */
.window-crop[data-scene="homepage-main"] { border-radius:2% / 3.013013%; clip-path:inset(0 round 2% / 3.013013%); }
.window-crop img { position: absolute; display: block; width: var(--image-width); max-width: none; height: auto; left: var(--image-left); top: var(--image-top); }
.zoom-label { position: absolute; right: 18px; bottom: 17px; color: #fff; background: #121820d9; backdrop-filter: blur(12px); padding: 8px 13px; border: 1px solid #ffffff38; border-radius: 99px; font-size: 10px; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.screenshot-button:hover .zoom-label, .screenshot-button:focus-visible .zoom-label { opacity: 1; transform: none; }
.product-screen figcaption { display: flex; align-items: baseline; gap: 25px; padding: 20px 18px 13px; }
.product-screen figcaption > span { color: #e1e8ed; font-size: 13px; }
.product-screen figcaption p { color: #9aa7b2; font-size: 12px; }
.feature-screenshot { min-width: 0; background: transparent; }
.feature-screenshot-caption { display: flex; justify-content: space-between; gap: 15px; padding: 17px 12px 13px; font-size: 10px; color: #bdc4cd; }
.feature-screenshot-caption > span:last-child { color: #82909f; font-size: 9px; }
.screenshot-viewer { width: min(1500px, 96vw); max-width: 96vw; height: min(1000px, 92dvh); max-height: 92dvh; padding: 0; border: 1px solid #42454d; border-radius: 15px; color: #eee; background: #101114; box-shadow: 0 30px 130px #000a; }
.screenshot-viewer::backdrop { background: #000d; backdrop-filter: blur(12px); }
.screenshot-viewer[open] { display: flex; flex-direction: column; }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 18px; flex-shrink: 0; border-bottom: 1px solid #2e3038; }
.viewer-toolbar > span { color: #bfc4cd; font-size: 12px; }
.viewer-toolbar > div { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.viewer-toolbar form { margin: 0; }
.viewer-toolbar button { background: #24272d; color: #e0e2e6; border: 1px solid #444852; border-radius: 99px; padding: 7px 13px; font-size: 11px; }
.viewer-toolbar button[aria-pressed="true"] { background: #dfe4e8; color: #15181c; }
.viewer-image-scroll { overflow: auto; display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; padding: 12px; overscroll-behavior: contain; }
.viewer-image-scroll .window-crop { width: min(1440px, 100%, calc((min(1000px, 92dvh) - 88px) * 1.5)); flex-shrink: 0; }
.screenshot-viewer.is-zoomed .viewer-image-scroll { display: block; }
.screenshot-viewer.is-zoomed .window-crop { width: 1440px; }
.viewer-image-scroll .window-crop[data-scene^="homepage"] { width:min(1505px,100%,calc((min(1000px,92dvh) - 88px) * 1505 / 999)); }
.screenshot-viewer.is-zoomed .window-crop[data-scene^="homepage"] { width:1505px; }
.more-scenes { margin-top:55px; }
.more-scenes-heading { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:25px; }
.more-scenes-heading h3 { font-size:23px; font-weight:550; letter-spacing:-.5px; }
.more-scenes-heading p { color:var(--muted); font-size:12px; }
.scene-grid { display:flex; flex-wrap:nowrap; align-items:flex-start; gap:12px; padding:8px 0 0; }
.scene-card { flex:1 1 0; min-width:0; transition:flex .85s cubic-bezier(.22,.68,0,1),transform .65s cubic-bezier(.22,.68,0,1); }
.scene-card.is-active { flex:2.75 1 0; transform:translateY(-6px); }
.scene-card .screenshot-button { overflow:hidden; border:1px solid #2c333d; border-radius:12px; box-shadow:0 8px 25px #0002; transition:border-color .65s,box-shadow .65s; }
.scene-card.is-active .screenshot-button { border-color:#739ab5; box-shadow:0 12px 38px #16364d40; }
.scene-card .window-crop { height:clamp(260px,28vw,360px); aspect-ratio:auto; border-radius:0; }
.scene-card .window-crop img { position:static; width:100%; height:100%; object-fit:cover; object-position:50% 50%; filter:brightness(.68) saturate(.75); transition:filter .85s; }
.scene-card.is-active .window-crop img { filter:brightness(1) saturate(1); }
.scene-card .screenshot-button::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,#86c8f4,#a6e6c4); transform:scaleX(0); transform-origin:left; pointer-events:none; }
.scene-grid.is-rotating .scene-card.is-active .screenshot-button::after { animation:scene-dwell 5.5s linear both; }
@keyframes scene-dwell { to { transform:scaleX(1); } }
.scene-card figcaption { padding:15px 3px 0; }
.scene-card figcaption > span { display:block; white-space:nowrap; font-size:14px; color:#8d9aa8; transition:color .6s; }
.scene-card.is-active figcaption > span { color:#e4eef6; }
.scene-card figcaption p { height:44px; margin-top:7px; color:#929eab; font-size:12px; line-height:1.8; opacity:0; transform:translateY(6px); transition:opacity .4s,transform .65s; }
.scene-card.is-active figcaption p { opacity:1; transform:none; transition-delay:.2s; }
.scene-controls { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:14px; }
.scene-hint { font-size:10px; color:#728292; }
.scene-hint-mobile { display:none; }
.scene-navigation { display:flex; align-items:center; gap:12px; }
.scene-navigation[hidden],.scene-rotation-toggle[hidden] { display:none; }
.scene-arrow { width:29px; height:29px; border:1px solid #344150; border-radius:50%; background:transparent; color:#abc1d2; font-size:14px; line-height:1; }
.scene-arrow:hover { border-color:#8eb7d3; color:#fff; }
.scene-picker { display:flex; gap:5px; }
.scene-picker button { position:relative; border:0; border-radius:5px; color:#61778c; background:transparent; padding:6px 9px; font-size:10px; font-variant-numeric:tabular-nums; transition:color .4s,background .4s; }
.scene-picker button[aria-pressed="true"] { color:#dcecf7; background:#182b3b; }
.scene-rotation-toggle { display:flex; align-items:center; gap:7px; color:#8fa5b9; border:0; border-left:1px solid #2b3642; padding:5px 0 5px 14px; margin-left:3px; background:transparent; font-size:10px; }
.scene-rotation-icon { display:block; width:9px; height:10px; border-left:2px solid currentColor; border-right:2px solid currentColor; }
.scene-rotation-toggle[aria-pressed="true"] .scene-rotation-icon { width:0; height:0; border:5px solid transparent; border-left:8px solid currentColor; border-right:0; }
@media(max-width:700px) {
  .product-screen figcaption { display: block; padding: 13px 9px 9px; }
  .product-screen figcaption > span { font-size: 11px; }
  .product-screen figcaption p { font-size: 10px; margin-top: 5px; }
  .zoom-label { opacity: 1; transform: none; font-size: 8px; right: 8px; bottom: 8px; padding: 5px 9px; }
  .demo-tabs { max-width: 100%; }
  .demo-tabs button { padding: 8px 12px; }
  .demo-tabs button span { font-size: 10px; }
  .feature-screenshot-caption { padding: 12px 8px 9px; font-size: 9px; }
  .feature-screenshot-caption > span:last-child { font-size: 8px; }
  .viewer-toolbar { padding: 12px; }
  .viewer-toolbar > span { display: none; }
  .viewer-toolbar > div { justify-content: flex-end; width: 100%; }
  .viewer-image-scroll { padding: 4px; }
}
@media(max-width:360px) { .demo-tabs button { padding: 8px 9px; }.demo-tabs button span { font-size: 9px; } }
@media(max-width:700px) {
  .more-scenes { margin-top:38px; }
  .more-scenes-heading { display:block; margin-bottom:22px; }
  .more-scenes-heading h3 { font-size:21px; }
  .more-scenes-heading p { font-size:11px; margin-top:8px; }
  .scene-card figcaption { padding-top:12px; }
  .scene-card figcaption > span { font-size:14px; }
  .scene-card figcaption p { font-size:11px; }
}
@media(max-width:800px) {
  .scene-grid { overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; gap:16px; padding:8px 2px 10px; scrollbar-width:thin; scrollbar-color:#35516a transparent; }
  .scene-card,.scene-card.is-active { flex:0 0 86%; transform:none; scroll-snap-align:center; }
  .scene-card .window-crop { height:auto; aspect-ratio:1505/999; }
  .scene-card .window-crop img { position:absolute; filter:none; }
  .scene-card figcaption p { height:auto; min-height:40px; opacity:1; transform:none; transition:none; }
  .scene-card figcaption > span { color:#d4e0ea; }
  .scene-controls { align-items:flex-start; flex-wrap:wrap; gap:12px; margin-top:8px; }
  .scene-navigation { margin-left:auto; gap:8px; }
  .scene-hint-desktop { display:none; }
  .scene-hint-mobile { display:inline; }
}
@media(prefers-reduced-motion:reduce) {
  .scene-card,.scene-card img,.scene-card figcaption p { transition:none; }
  .scene-grid.is-rotating .scene-card.is-active .screenshot-button::after { animation:none; }
}
@media(max-width:700px) {
  .package-sharing { scroll-margin-top:90px; }
  .package-sharing .feature-copy h2 { font-size:33px; margin:15px 0 19px; }
  .package-visual { padding:20px 12px 16px; }
  .package-dialog figcaption { font-size:10px; gap:8px; }
  .package-tutorial-link { font-size:12px; margin-top:23px; }
}
@media(max-width:700px) {
  .site-footer { flex-direction: column; align-items: stretch; }
  .footer-right { text-align: left; }
  .header-actions { gap: 11px; }
  .language-toggle { gap: 4px; font-size: 10px; }
  .audience-section, .trial-section { padding-top: 90px; }
  .audience-section > h2 { margin-top: 18px; font-size: 34px; letter-spacing: -1.3px; }
  .audience-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
  .audience-grid article { min-height: 0; padding: 24px 20px; }
  .audience-grid h3 { margin: 16px 0 10px; font-size: 19px; }
  .audience-grid article > div { font-size: 13px; }
  .trial-section { grid-template-columns: 1fr; gap: 42px; }
  .trial-intro h2 { margin: 18px 0 19px; font-size: 35px; letter-spacing: -1.4px; }
  .trial-intro > p:not(.section-kicker), .trial-steps p { font-size: 13px; }
  .trial-steps { gap: 25px; }
  .trial-steps h3 { font-size: 17px; }
}

/* Match the official site's platform selector and direct download action. */
.download-panel { width: min(740px, 100%); margin: 44px auto 0; text-align: center; }
.download-platforms { display: flex; align-items: stretch; gap: 8px; padding: 6px; border: 1px solid #ffffff12; border-radius: 12px; background: #222; }
.download-platforms button { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 8px; padding: 11px 13px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #9ca3af; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .2s, color .2s; }
.download-platforms button:hover { color: #fff; background: #ffffff0d; }
.download-platforms button[aria-pressed="true"] { color: #fff; background: #ffffff1a; border-color: #ffffff1a; box-shadow: inset 0 1px 2px #ffffff08; }
.download-platforms svg { width: 14px; height: 16px; flex-shrink: 0; fill: currentColor; }
.download-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 56px 0 48px; }
.download-details > div + div { border-left: 1px solid #ffffff0d; }
.download-details dt { font-size: 14px; color: #6b7280; margin-bottom: 10px; }
.download-details dd { margin: 0; color: #e5e7eb; font-size: 24px; font-weight: 700; line-height: 1.4; padding: 0 12px; }
.download-description { color: #bfc1ca; font-size: 14px; line-height: 1.9; margin: 24px 12px -24px; }
.download-action { display: flex; justify-content: center; align-items: center; gap: 12px; width: 75%; min-height: 60px; margin: 0 auto; padding: 14px 20px; border-radius: 12px; background: #4d88ff; color: #fff; font-size: 18px; font-weight: 700; text-decoration: none; box-shadow: 0 0 20px #4d88ff4d; transition: filter .2s, box-shadow .2s; }
.download-action:hover { filter: brightness(1.15); box-shadow: 0 0 30px #4d88ff80; }
.download-action svg { width: 21px; height: 21px; }
@media(max-width:700px) {
  .download-panel { margin-top: 32px; }
  .download-platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .download-platforms button { padding: 11px 5px; font-size: 11px; gap: 6px; }
  .download-details { margin: 34px 0; }
  .download-details dt { font-size: 11px; }
  .download-details dd { font-size: clamp(13px, 3.8vw, 20px); padding: 0 7px; }
  .download-description { font-size: 12px; margin-bottom: -10px; }
  .download-action { width: 100%; min-height: 54px; font-size: 16px; }
}

/* A large product icon, drifting light, and a low, asymmetric introduction. */
.hero { display: flex; flex-direction: column; min-height: min(1040px, calc(100svh - 80px)); padding: 66px 0 22px; text-align: left; background: #050505; }
.hero-lights { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-light { position: absolute; display: block; width: min(650px, 52vw); aspect-ratio: 1; border-radius: 50%; filter: blur(65px); will-change: transform; }
.hero-light-warm { left: -20%; top: 8%; background: radial-gradient(ellipse, #ed762e60 0%, #bc48182d 40%, transparent 70%); animation: hero-warm-drift 18s ease-in-out -6s infinite alternate; }
.hero-light-mint { right: -18%; top: 16%; background: radial-gradient(ellipse, #70c68c69 0%, #418c5235 40%, transparent 72%); animation: hero-mint-drift 22s ease-in-out -10s infinite alternate; }
.hero-light-blue { left: 27%; top: 28%; width: min(620px, 48vw); background: radial-gradient(ellipse, #306bcc4f 0%, #214b9626 40%, transparent 72%); animation: hero-blue-drift 20s ease-in-out -4s infinite alternate; }
.hero-stage { display: grid; place-items: center; flex: 1; min-height: 410px; padding: 35px 0 75px; }
.hero-emblem { position: relative; width: clamp(240px, 24vw, 354px); height: auto; aspect-ratio: 1; margin: 0; padding: 0; background: none; box-shadow: none; }
.hero-emblem img { display: block; width: 100%; height: 100%; border-radius: 0; filter: none; object-fit: contain; }
.hero-emblem.is-preparing > img { opacity: 0; }
.hero-emblem.is-entering { perspective: 1000px; }
.hero-emblem.is-entering > img { animation: emblem-arrive 3.2s cubic-bezier(.22,.68,.22,1) both; will-change: transform, opacity; }
@keyframes emblem-arrive {
  0% { opacity: 0; transform: translate3d(-24%, 16%, -120px) rotateX(22deg) rotateY(-55deg) rotateZ(-14deg) scale(.82); }
  18% { opacity: 1; }
  65% { opacity: 1; transform: translate3d(2%, -2%, 12px) rotateX(-3deg) rotateY(7deg) rotateZ(2deg) scale(1.015); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-emblem.is-preparing > img { opacity: 1; }
  .hero-emblem.is-entering > img { animation: none; will-change: auto; }
}
.hero-bottom { display: flex; justify-content: space-between; align-items: center; gap: 44px; margin-top: 25px; }
.hero-copy { min-width: 0; }
.hero-product-name { color: #f0f0f4; font-size: 25px; font-weight: 550; line-height: 1.4; letter-spacing: -.5px; margin-bottom: 8px; }
.hero .hero-tagline { width: fit-content; max-width: 100%; margin: 0 0 18px; font-size: clamp(35px, 3.9vw, 60px); font-weight: 650; line-height: 1.22; letter-spacing: -2px; background: linear-gradient(100deg, #ff8557 0%, #f1d866 24%, #b9e778 48%, #78e0b1 73%, #59d4c7 100%); background-clip: text; -webkit-background-clip: text; color: transparent; }
.hero .hero-tagline > span { display: inline-block; }
.hero-description { color: #ababaf; font-size: 14px; line-height: 1.8; }
.hero .eyebrow { display: block; color: #6e7375; font-size: 11px; font-weight: 450; letter-spacing: .2px; margin-top: 5px; }
.hero-download { display: flex; flex: 0 0 auto; align-items: center; gap: 24px; padding: 14px 15px 14px 23px; border: 1px solid #ffffff2b; border-radius: 99px; background: linear-gradient(115deg, #18191b9e, #242328bd); box-shadow: inset 0 1px 0 #ffffff06, 0 12px 35px #0003; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.hero-download > div { display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.45; white-space: nowrap; }
.hero-download strong { font-size: 14px; font-weight: 600; }
.hero-download > div > span { color: #b8b9bf; }
.hero-download-link { display: inline-flex; align-items: center; justify-content: center; min-width: 82px; min-height: 45px; padding: 9px 18px; font-size: 14px; line-height: 1.4; text-decoration: none; border: 1px solid transparent; border-radius: 99px; background: linear-gradient(#0b0b0e, #0b0b0e) padding-box, linear-gradient(120deg, #ffb168, #ece18b 28%, #99dac9 55%, #9179e9 78%, #e6a6cb) border-box; transition: box-shadow .2s, transform .2s; }
.hero-download-link:hover { transform: translateY(-2px); box-shadow: 0 0 22px #a3a0db28; }
.hero .scroll-cue { display: flex; flex-direction: column; align-items: center; align-self: center; gap: 7px; margin-top: 62px; color: #68696f; font-size: 10px; letter-spacing: .4px; }
.hero .scroll-cue svg { width: 15px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1; }
html[lang="en"] .hero .hero-tagline { font-size: clamp(32px, 3.5vw, 52px); letter-spacing: -1.9px; max-width: 760px; }
html[lang="en"] .hero .hero-tagline > span + span::before { content: ' '; }
@keyframes hero-warm-drift { from { transform: translate(-3%, -12%) scale(.95); } to { transform: translate(52%, 26%) scale(1.2); } }
@keyframes hero-mint-drift { from { transform: translate(4%, 18%) scale(1.1); } to { transform: translate(-44%, -24%) scale(.95); } }
@keyframes hero-blue-drift { from { transform: translate(-24%, 32%) scale(.9); } to { transform: translate(27%, -27%) scale(1.25); } }
@media(max-width:1000px) {
  .hero-bottom { gap: 25px; }
  .hero .hero-tagline { font-size: 36px; letter-spacing: -1.3px; }
  .hero-download { gap: 14px; padding-left: 18px; }
}
@media(max-width:700px) {
  .hero { min-height: calc(100svh - 68px); padding: 35px 0 24px; }
  .hero-stage { min-height: 310px; padding: 30px 0 55px; }
  .hero-emblem { width: clamp(200px, 57vw, 280px); }
  .hero-bottom { flex-direction: column; align-items: flex-start; gap: 28px; margin-top: 0; }
  .hero-product-name { font-size: 21px; }
  .hero .hero-tagline, html[lang="en"] .hero .hero-tagline { font-size: clamp(30px, 8.4vw, 44px); line-height: 1.3; letter-spacing: -1px; margin-bottom: 14px; }
  .hero-description { font-size: 12px; }
  .hero .eyebrow { font-size: 10px; line-height: 1.8; }
  .hero-download { align-self: flex-end; gap: 22px; padding: 11px 12px 11px 19px; }
  .hero-download > div { font-size: 11px; }
  .hero-download strong { font-size: 12px; }
  .hero-download-link { min-width: 73px; min-height: 42px; font-size: 13px; }
  .hero .scroll-cue { margin-top: 36px; font-size: 9px; }
  .hero-light { width: 94vw; filter: blur(38px); }
  .hero-light-warm { left: -64%; top: 9%; }
  .hero-light-mint { right: -62%; top: 7%; }
  .hero-light-blue { left: 2%; top: 17%; width: 85vw; }
}
@media(prefers-reduced-motion: reduce) {
  .hero-light { animation: none; will-change: auto; }
}

/* The comparison guide answers product-selection questions before the demos. */
.comparison-hero { padding-top: 68px; padding-bottom: 56px; }
.guide-breadcrumb { color: var(--muted); font-size: 12px; margin-bottom: 42px; }
.comparison-hero h1 { font-weight: 700; font-size: clamp(36px, 5.2vw, 66px); letter-spacing: -.04em; line-height: 1.22; margin: 22px 0 28px; }
.guide-summary { max-width: 850px; font-size: clamp(18px, 2vw, 23px); line-height: 1.85; }
.guide-detail { max-width: 800px; color: var(--muted); margin-top: 18px; }
.comparison-hero .actions { justify-content: flex-start; }
.guide-byline { margin-top: 32px; color: var(--muted); font-size: 12px; }
.comparison-hero .source-note { margin-top: 8px; }
.comparison-guide #comparison { padding-top: 48px; }
.comparison-entry { margin: 28px 0; font-size: 16px; color: var(--mint); }
@media (max-width: 600px) {
  .comparison-hero { padding-top: 36px; }
  .guide-breadcrumb { margin-bottom: 26px; }
  .comparison-hero .button { width: 100%; gap: 12px; }
}

/* Practical guides and the distinct product-selection article. */
.knowledge-hub { padding-top:90px; padding-bottom:50px; }.knowledge-hub h2 { font-size:clamp(28px,4vw,44px); margin:20px 0; letter-spacing:-1px; }.knowledge-hub > p { color:#aab5c5; line-height:1.85; font-size:14px; }.knowledge-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:30px 0; }.knowledge-cards > a { display:block; padding:28px 22px; border:1px solid #344151; border-radius:13px; background:linear-gradient(125deg,#142232,#10151e); color:#d6e6f8; font-size:16px; line-height:1.8; text-decoration:none; }.knowledge-cards > a:hover { border-color:#91b8ea; }.knowledge-links a { color:#b9d5f6; text-underline-offset:4px; }
.knowledge-comparison { max-width:980px; padding-top:50px; }.knowledge-comparison [hidden] { display:none; }.knowledge-section { padding:25px 0 45px; scroll-margin-top:100px; }.knowledge-section h2 { font-size:clamp(27px,3.4vw,39px); line-height:1.45; margin:15px 0 25px; letter-spacing:-.8px; }.knowledge-section p,.knowledge-section li { color:#b7c2d0; font-size:15px; line-height:1.95; }.knowledge-section strong { color:#eaf0f8; }.knowledge-section a { color:#b5d6ff; text-underline-offset:4px; }.knowledge-section li { margin:10px 0; }.knowledge-section ol,.knowledge-section ul { padding-left:25px; }.knowledge-section .comparison-scroll { margin:28px 0; }.knowledge-section th,.knowledge-section td { font-size:13px; line-height:1.9; }.knowledge-section details { border-bottom:1px solid #333b48; padding:22px 0; }.knowledge-section summary { font-size:16px; line-height:1.7; cursor:pointer; }.knowledge-section details p { margin:16px 0 0; }.knowledge-section .source-note { font-size:12px; }
@media(max-width:700px) { .knowledge-hub { padding-top:70px; }.knowledge-cards { grid-template-columns:1fr; gap:12px; }.knowledge-cards > a { padding:21px; font-size:15px; }.knowledge-comparison { padding-top:15px; }.knowledge-section { padding-bottom:30px; scroll-margin-top:75px; }.knowledge-section p,.knowledge-section li { font-size:14px; }.knowledge-section th,.knowledge-section td { padding:15px; font-size:12px; }.knowledge-section summary { font-size:14px; } }

/* Show the working canvas sooner, while retaining the complete logo animation. */
body[data-homepage] .hero { min-height:0; padding-top:22px; }
body[data-homepage] .hero-stage { min-height:260px; padding:15px 0 30px; }
body[data-homepage] .hero-emblem { width:clamp(200px,18vw,270px); }
body[data-homepage] .hero-bottom { margin-top:0; }
body[data-homepage] .hero .scroll-cue { margin-top:24px; }
.hero-access { display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.hero-web-trial { display:inline-flex; align-items:center; gap:12px; min-height:42px; padding:6px 12px; color:#c4e5da; font-size:13px; text-decoration:none; }
.hero-web-trial:hover { color:#fff; text-decoration:underline; }
body[data-homepage] .homepage-intro { padding-top:30px; padding-bottom:5px; }
body[data-homepage] .homepage-intro h1 { font-size:clamp(25px,3vw,38px); margin:0 0 12px; line-height:1.3; letter-spacing:-.7px; }
body[data-homepage] .homepage-intro .guide-summary { font-size:15px; line-height:1.8; }
.guide-quick-links { font-size:12px; color:#a6c9bb; margin-top:10px; }
body[data-homepage] .showcase { padding-top:28px; }
body[data-homepage] .showcase-heading { margin-bottom:20px; }
.download-device-hint { color:#b8c8d8; font-size:12px; margin:18px auto 8px; max-width:580px; line-height:1.8; }
.download-action[aria-disabled="true"] { opacity:.7; }
.window-crop > picture { display:contents; }
.header-pricing-link { color:#bfc9d0; font-size:11px; white-space:nowrap; }
@media(max-width:700px) {
  body[data-homepage] .hero { padding:10px 0 15px; }
  body[data-homepage] .hero-stage { min-height:208px; padding:10px 0 18px; }
  body[data-homepage] .hero-emblem { width:180px; }
  body[data-homepage] .hero-bottom { gap:16px; }
  body[data-homepage] .hero-product-name { font-size:19px; margin-bottom:4px; }
  body[data-homepage] .hero .hero-tagline { font-size:30px; line-height:1.25; margin-bottom:8px; }
  body[data-homepage] .hero .scroll-cue { margin-top:14px; }
  .hero-access { width:100%; flex-direction:row; align-items:center; justify-content:space-between; gap:10px; }
  .hero-access .hero-download { align-self:auto; gap:12px; padding:8px 9px 8px 14px; }
  .hero-web-trial { font-size:11px; gap:5px; padding:6px 0; white-space:nowrap; }
  body[data-homepage] .homepage-intro { padding-top:20px; }
  body[data-homepage] .homepage-intro h1 { font-size:25px; margin-bottom:8px; }
  body[data-homepage] .homepage-intro .guide-summary { font-size:12px; }
  .guide-quick-links { font-size:10px; margin-top:7px; }
  body[data-homepage] .showcase { padding-top:22px; }
  body[data-homepage] .showcase-heading .eyebrow { display:none; }
  body[data-homepage] .showcase-heading h2 { font-size:21px; margin-top:0; }
  .download-device-hint { font-size:11px; }
  .header-pricing-link { font-size:10px; }
}
@media(max-width:370px) { .hero-access { gap:6px; }.hero-access .hero-download { gap:7px; padding-left:10px; }.hero-web-trial { font-size:10px; }.header-pricing-link { display:none; } }
@media(min-width:701px) { .header-pricing-link { display:none; } }