.marketing { --m-ink:#332d40; --m-violet:#7352ad; --m-dark:#55377f; --m-lilac:#efeafa; --m-apricot:#ffce87; --m-muted:#696373; --m-line:#ded7e9; margin:0; background:#faf9fc; color:var(--m-ink); font:17px/1.6 "Avenir Next",Avenir,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
.marketing * { box-sizing:border-box; }
.marketing [hidden] { display:none !important; }
.marketing a { color:inherit; text-underline-offset:5px; }
.marketing button,.marketing input { font:inherit; }
.marketing button,.marketing a,.marketing input,.marketing summary { -webkit-tap-highlight-color:transparent; }
.marketing :focus-visible { outline:3px solid var(--m-violet); outline-offset:5px; }
.marketing h1,.marketing h2,.marketing h3,.marketing h4,.marketing p { margin:0; }
.marketing h1,.marketing h2 { font-family:inherit; font-weight:700; letter-spacing:-.05em; line-height:1.08; }
.marketing h2 { font-size:clamp(36px,4.5vw,58px); }
.marketing p { text-wrap:pretty; }
.marketing .m-wrap { width:min(1140px,calc(100% - 88px)); margin-inline:auto; }
.marketing .m-skip { position:absolute; left:20px; top:-80px; z-index:10; padding:12px 18px; background:white; }
.marketing .m-skip:focus { top:10px; }
.marketing .m-header { display:flex; justify-content:space-between; align-items:center; padding-block:29px; }
.marketing .m-wordmark { color:var(--m-ink); font:800 44px "Avenir Next",Avenir,Arial,sans-serif; letter-spacing:-.075em; line-height:1.2; text-decoration:none; }
.marketing .m-header nav { display:flex; align-items:center; gap:30px; font-size:14px; font-weight:600; }
.marketing .m-header nav a { text-decoration:none; }
.marketing .m-header nav a:hover { text-decoration:underline; }
.marketing .m-login { border:1px solid #bdb2cf; border-radius:6px; padding:8px 20px; }
.marketing .m-hero { display:grid; grid-template-columns:1.05fr 1fr; gap:40px; padding-block:67px 96px; align-items:center; }
.marketing .m-intro { font-size:14px; font-weight:600; margin-bottom:24px; }
.marketing h1 { font-size:clamp(52px,6.3vw,80px); }
.marketing .m-lead { margin-top:28px; font-size:23px; line-height:1.5; max-width:440px; letter-spacing:-.025em; }
.marketing .m-description { margin-top:18px; max-width:400px; color:var(--m-muted); font-size:16px; }
.marketing .m-button { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; padding:14px 22px; margin-top:29px; border:1px solid var(--m-dark); border-radius:7px; background:var(--m-dark); color:white; text-decoration:none; font-size:15px; font-weight:650; transition:background .15s; }
.marketing .m-button:hover { background:#402660; }
.marketing .m-button span { font-size:23px; line-height:1; color:var(--m-apricot); }
.marketing .m-release { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--m-muted); margin-top:17px; }
.marketing .m-release > span { width:7px; height:7px; border-radius:50%; background:#568478; }
.marketing .m-hero-scene { min-height:480px; position:relative; isolation:isolate; }
.marketing .m-hero-scene::before { content:""; position:absolute; width:94%; height:91%; background:var(--m-lilac); border-radius:46% 48% 45% 42%; left:4%; top:5%; z-index:-2; }
.marketing .m-scene-project { position:absolute; width:75%; top:127px; left:13%; background:white; border:1px solid #d8cce6; border-radius:10px; padding:27px 29px 22px; box-shadow:0 10px 0 #e0d5ee; transform:rotate(-4deg); z-index:1; }
.marketing .m-scene-symbol { width:50px; height:50px; display:grid; place-items:center; border-radius:50%; background:#d6e6d9; font-size:35px; font-style:italic; font-weight:600; line-height:1; color:#385444; margin-bottom:22px; }
.marketing .m-scene-project > p { font-size:13px; color:var(--m-muted); }
.marketing .m-scene-project h2 { font-size:33px; letter-spacing:-.045em; margin-top:7px; }
.marketing .m-scene-bottom { display:flex; justify-content:space-between; align-items:center; margin-top:28px; border-top:1px solid #eee9f2; padding-top:15px; font-size:12px; }
.marketing .m-tiny-people { display:flex; }
.marketing .m-tiny-people i { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#e4dbf5; border:2px solid white; font-style:normal; font-weight:700; }
.marketing .m-tiny-people i + i { background:#ffdfb0; margin-left:-5px; }
.marketing .m-scene-note { position:absolute; right:0; top:2px; width:225px; background:var(--m-apricot); padding:20px 23px; transform:rotate(6deg); z-index:2; box-shadow:0 5px 0 #edb970; }
.marketing .m-scene-note > span { font-size:11px; font-weight:650; }
.marketing .m-scene-note p { font-size:20px; line-height:1.4; margin:8px 0 17px; }
.marketing .m-scene-note .m-note-signoff { font-weight:400; }
.marketing .m-scene-task { position:absolute; left:1%; bottom:0; z-index:3; display:flex; gap:13px; align-items:center; border:1px solid #bdd3c4; border-radius:7px; background:#e9f2ec; padding:16px 21px; transform:rotate(2deg); font-size:14px; font-weight:600; }
.marketing .m-scene-task small { display:block; font-size:11px; font-weight:400; color:#506058; margin-top:3px; }
.marketing .m-drawn-check { width:25px; height:25px; flex-shrink:0; border:1.5px solid #5e8570; border-radius:6px; display:grid; place-items:center; color:#39664c; }
.marketing .m-drawn-check svg { display:block; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.marketing .m-demo-section { background:var(--m-lilac); padding:72px 0 35px; scroll-margin-top:20px; }
.marketing .m-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:35px; margin-bottom:36px; }
.marketing .m-section-heading p { font-size:16px; color:#61576e; margin-bottom:4px; }
.marketing .m-product-preview { margin:0; }
.marketing .m-product-screenshot { display:block; border:1px solid #c8bada; border-radius:9px; overflow:hidden; background:#f6f4fa; box-shadow:0 5px 0 #ddd2ed; cursor:zoom-in; }
.marketing .m-product-screenshot img { display:block; width:100%; height:auto; }
.marketing .m-product-preview figcaption { margin:22px 0 0; font-size:13px; color:var(--m-muted); text-align:center; }
.marketing .m-product-preview figcaption a { margin-left:8px; }
.marketing .m-fit { display:grid; grid-template-columns:1fr 1fr; gap:90px; padding-block:108px 90px; }
.marketing .m-fit h2 { font-size:clamp(36px,4vw,49px); line-height:1.15; }
.marketing .m-fit-copy { padding-top:47px; }
.marketing .m-fit-copy p + p { margin-top:20px; }
.marketing .m-text-link { display:inline-block; margin-top:25px; color:var(--m-dark); font-size:14px; font-weight:650; }
.marketing .m-details { display:grid; grid-template-columns:1fr 1fr; gap:90px; padding-block:20px 100px; }
.marketing .m-details h2 { font-size:43px; }
.marketing .m-loop-mark { display:block; font-size:56px; line-height:1; color:#cab6e4; margin-bottom:16px; }
.marketing .m-details-list > div { padding:23px 0; border-top:1px solid var(--m-line); }
.marketing .m-details-list h3 { font-size:18px; letter-spacing:-.02em; margin-bottom:9px; }
.marketing .m-details-list p { font-size:15px; color:var(--m-muted); }
.marketing .m-story { background:#f9dfb8; padding-block:70px; }
.marketing .m-story-inner { display:grid; grid-template-columns:1fr 1fr; column-gap:90px; }
.marketing .m-story .m-intro { grid-column:1/-1; }
.marketing .m-story p + p { margin-top:20px; }
.marketing .m-story-signature { font-size:20px; font-weight:500; }
.marketing .m-story-press { margin:32px 0 0; max-width:330px; }
.marketing .m-story-press blockquote { margin:0 0 12px; }
.marketing .m-story-press blockquote p { font-size:20px; line-height:1.4; font-weight:600; }
.marketing .m-story-press figcaption { font-size:13px; line-height:1.6; }
.marketing .m-story-press a { color:inherit; text-underline-offset:3px; }
.marketing .m-story-press time { display:block; }
.marketing .m-questions { padding-block:95px 75px; display:grid; grid-template-columns:1fr 1fr; gap:90px; }
.marketing .m-questions h2 { font-size:41px; }
.marketing details { border-bottom:1px solid var(--m-line); padding:18px 0; }
.marketing details:first-child { padding-top:0; }
.marketing summary { font-size:16px; font-weight:600; cursor:pointer; padding-right:8px; }
.marketing details p { font-size:15px; margin-top:16px; color:var(--m-muted); }
.marketing .m-ending { text-align:center; border-top:1px solid var(--m-line); padding-block:80px 90px; }
.marketing .m-ending p { margin-top:20px; color:var(--m-muted); }
.marketing .m-footer { display:flex; justify-content:space-between; gap:35px; border-top:1px solid var(--m-line); padding-block:34px 46px; }
.marketing .m-footer .m-wordmark { font-size:34px; }
.marketing .m-footer p { font-size:12px; margin-top:7px; color:var(--m-muted); }
.marketing .m-footer > div:last-child { display:flex; flex-direction:column; align-items:flex-end; gap:9px; font-size:12px; }
.marketing .m-footer span { color:var(--m-muted); }
.marketing .m-guide { max-width:740px; padding-block:55px 100px; }
.marketing .m-guide h1 { font-size:clamp(42px,5.7vw,68px); margin:23px 0; }
.marketing .m-guide .m-lead { max-width:none; font-size:22px; margin-bottom:48px; }
.marketing .m-guide h2 { font:600 26px/1.3 "Avenir Next",Avenir,sans-serif; letter-spacing:-.03em; margin:45px 0 16px; }
.marketing .m-guide p,.marketing .m-guide li { margin-block:15px; }
.marketing .m-guide ul { padding-left:22px; }
.marketing .m-guide-example { border-left:4px solid var(--m-apricot); background:var(--m-lilac); padding:15px 26px; margin:30px 0; }
@media(min-width:1400px) { .marketing .m-hero { padding-top:90px; padding-bottom:115px; } }
@media(max-width:900px) {
  .marketing .m-wrap { width:calc(100% - 48px); }
  .marketing .m-hero { gap:20px; padding-block:45px 75px; }
  .marketing .m-hero-scene { min-height:440px; }
  .marketing .m-scene-project { left:6%; width:87%; padding:24px; }
  .marketing .m-scene-note { width:200px; right:0; }
  .marketing .m-scene-project h2 { font-size:28px; }
  .marketing .m-scene-task { left:0; padding:14px; font-size:12px; }
  .marketing .m-fit,.marketing .m-details,.marketing .m-story-inner,.marketing .m-questions { gap:40px; }
}
@media(max-width:650px) {
  .marketing .m-wrap { width:calc(100% - 40px); }
  .marketing .m-header { padding-block:20px; }
  .marketing .m-wordmark { font-size:37px; }
  .marketing .m-header nav { gap:16px; font-size:12px; }
  .marketing .m-header nav a:nth-child(2) { display:none; }
  .marketing .m-login { padding:7px 12px; }
  .marketing .m-hero { grid-template-columns:1fr; padding-block:36px 60px; gap:42px; }
  .marketing .m-intro { font-size:12px; margin-bottom:20px; }
  .marketing h1 { font-size:clamp(40px,12.5vw,58px); }
  .marketing .m-lead { font-size:21px; max-width:370px; }
  .marketing .m-description { font-size:15px; }
  .marketing .m-hero-scene { min-height:425px; width:100%; max-width:430px; margin:auto; }
  .marketing .m-scene-project { width:76%; left:10%; top:105px; padding:23px; }
  .marketing .m-scene-note { width:193px; right:4%; padding:16px 19px; }
  .marketing .m-scene-note p { font-size:17px; }
  .marketing .m-scene-symbol { width:40px; height:40px; font-size:28px; margin-bottom:15px; }
  .marketing .m-scene-task { left:2%; bottom:0; }
  .marketing .m-demo-section { padding-top:45px; }
  .marketing .m-section-heading { display:block; }
  .marketing .m-section-heading p { margin-top:22px; font-size:14px; }
  .marketing .m-fit,.marketing .m-details,.marketing .m-story-inner,.marketing .m-questions { grid-template-columns:1fr; gap:28px; }
  .marketing .m-fit { padding-block:65px 55px; }
  .marketing .m-fit-copy { padding:0; font-size:16px; }
  .marketing .m-details { padding-block:0 60px; }
  .marketing .m-details h2,.marketing .m-questions h2 { font-size:36px; }
  .marketing .m-loop-mark { display:none; }
  .marketing .m-story { padding-block:45px; }
  .marketing .m-story-inner { gap:0; }
  .marketing .m-story h2 { margin-bottom:25px; }
  .marketing .m-story-press { margin:0 0 32px; }
  .marketing .m-story p { font-size:16px; }
  .marketing .m-questions { padding-block:60px; }
  .marketing .m-ending { padding-block:50px 60px; }
  .marketing .m-ending h2 { font-size:40px; }
  .marketing .m-footer { flex-direction:column; gap:25px; }
  .marketing .m-footer > div:last-child { align-items:flex-start; }
  .marketing .m-guide { padding-block:30px 65px; }
  .marketing .m-guide h1 { font-size:46px; }
  .marketing .m-guide .m-lead { font-size:20px; }
}
@media(prefers-reduced-motion:reduce) { .marketing * { transition:none !important; scroll-behavior:auto !important; } }