/* Catmark landing page — scoped under .cm so the workspace styles stay untouched. */
.cm {
  --cm-bg: #fafafa;
  --cm-surface: #ffffff;
  --cm-ink: #0d0d0d;
  --cm-ink-2: #3a3a3a;
  --cm-muted: #6b6b6b;
  --cm-faint: #9a9a9a;
  --cm-line: #ececec;
  --cm-blue: #2441ff;
  --cm-blue-soft: #eef1ff;
  --cm-radius: 22px;
  --cm-ease: cubic-bezier(.32, .72, 0, 1);
  --cm-move: cubic-bezier(.65, 0, .35, 1);
  --cm-display: "Inter Tight", "Inter", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  height: auto;
  min-height: 100dvh;
  overflow: clip;
  color: var(--cm-ink);
  background: var(--cm-bg);
  font-family: ui-rounded, "SF Pro Rounded", "Inter", -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html[data-route="home"] body,
body.auth-pending, body.auth-signed-out, .auth-empty { background: #fafafa; }
.cm a { color: inherit; }
.cm h1, .cm h2, .cm h3 { font-family: var(--cm-display); font-weight: 500; color: var(--cm-ink); text-wrap: balance; }
.cm-shell { width: min(100% - 48px, 1160px); margin-inline: auto; }
.cm ::selection { background: rgb(36 65 255 / .16); color: inherit; }
/* Anchored sections clear the sticky nav. */
.cm [id] { scroll-margin-top: 72px; }
.cm a:focus-visible, .cm button:focus-visible, .cm summary:focus-visible { outline: 2px solid var(--cm-blue); outline-offset: 3px; border-radius: 10px; }
.cm .cm-btn:focus-visible, .cm .cm-composer:focus-visible, .cm .cm-lang-button:focus-visible { border-radius: 999px; }

/* Buttons */
.cm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 22px; border-radius: 999px;
  font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: transform .2s var(--cm-ease), background .2s ease, box-shadow .2s ease;
}
.cm-btn-sm { height: 34px; padding: 0 16px; font-size: 13px; }
.cm-btn-dark { color: #fff !important; background: var(--cm-ink); }
.cm-btn-dark:hover { background: var(--cm-blue); }

/* Nav */
.cm-nav {
  position: sticky; top: 0; z-index: 50;
  height: 56px; padding: 0 max(24px, calc((100vw - 1160px) / 2));
  display: flex; align-items: center; gap: 28px;
  background: rgb(250 250 250 / .78);
  backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.cm-nav.is-scrolled { border-bottom-color: var(--cm-line); }
.cm-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--cm-display); font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.cm-brand .catmark-logo { width: 15px; height: 24px; color: var(--cm-ink); }
.cm-brand:hover .catmark-logo-body { animation: catmarkLogoBody 2s linear 1; }
.cm-brand:hover .catmark-logo-eye-left { animation: catmarkLogoLeftEye 2s linear 1; }
.cm-brand:hover .catmark-logo-eye-right { animation: catmarkLogoRightEye 2s linear 1; }
.cm-nav-links { margin-left: auto; display: flex; gap: 26px; }
.cm-nav-links a { font-size: 14px; color: var(--cm-ink-2); text-decoration: none; transition: color .15s ease; }
.cm-nav-links a:hover { color: var(--cm-blue); }

/* Hero: a small live canvas around the headline */
.cm-hero { position: relative; min-height: min(860px, calc(100svh - 56px)); padding: 96px 24px 104px; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; text-align: center; isolation: isolate; }
.cm-hero-grid { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(#d9dce3 1.1px, transparent 1.1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(70% 65% at 50% 48%, #000 30%, transparent 78%); mask-image: radial-gradient(70% 65% at 50% 48%, #000 30%, transparent 78%); opacity: .8; }
.cm-hero-inner { position: relative; z-index: 2; width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.cm-hero-inner > * { pointer-events: auto; }
.cm-pill { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 11px; border-radius: 999px; background: rgb(255 255 255 / .8); box-shadow: 0 0 0 1px var(--cm-line), 0 2px 8px rgb(0 0 0 / .03); color: #3d3d3d; font-size: 13px; backdrop-filter: blur(8px); }
.cm-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cm-blue); }
.cm-hero h1 { margin: 30px 0 0; font-size: clamp(40px, 5.4vw, 70px); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; }
.cm:lang(en) .cm-hero h1 { letter-spacing: -.045em; line-height: 1.1; }
.cm:lang(ja) .cm-hero h1 { font-size: clamp(34px, 4.4vw, 60px); letter-spacing: -.01em; }
.cm-hero-line { display: block; white-space: nowrap; }
.cm-select { position: relative; display: inline-block; margin: 0 .16em; vertical-align: bottom; }
.cm-select::before { content: ""; position: absolute; inset: .04em -.1em; border: 1.5px solid var(--cm-blue); background: rgb(36 65 255 / .05); pointer-events: none; transition: inset .6s var(--cm-ease); }
.cm-h { position: absolute; width: 9px; height: 9px; border: 1.5px solid var(--cm-blue); background: #fff; }
.cm-h-tl { left: calc(-.1em - 4.5px); top: calc(.04em - 4.5px); }
.cm-h-tr { right: calc(-.1em - 4.5px); top: calc(.04em - 4.5px); }
.cm-h-bl { left: calc(-.1em - 4.5px); bottom: calc(.04em - 4.5px); }
.cm-h-br { right: calc(-.1em - 4.5px); bottom: calc(.04em - 4.5px); }
.cm-rotator { position: relative; display: inline-block; height: 1.2em; overflow: hidden; vertical-align: bottom; color: var(--cm-blue); transition: width .6s var(--cm-ease); }
.cm-rotator > span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; transform: translateY(70%); filter: blur(8px); transition: opacity .5s var(--cm-ease), transform .7s var(--cm-ease), filter .5s ease; }
.cm-rotator > span.is-active { opacity: 1; transform: none; filter: none; }
.cm-rotator > span.is-leaving { opacity: 0; transform: translateY(-70%); filter: blur(8px); }
.cm-hero-copy { margin: 28px 0 0; color: #5a5a5a; font-size: 17px; line-height: 1.75; }
.cm-composer {
  width: min(100%, 540px); margin-top: 36px; padding: 7px 7px 7px 8px;
  display: flex; align-items: center; gap: 12px;
  border-radius: 999px; background: #fff; text-decoration: none;
  box-shadow: 0 0 0 1px var(--cm-line), 0 12px 32px rgb(0 0 0 / .06);
  transition: box-shadow .25s ease, transform .25s var(--cm-ease);
}
.cm-composer:hover { box-shadow: 0 0 0 1px #cfd5ff, 0 12px 32px rgb(0 0 0 / .06); }
.cm-composer-plus { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #f1f1f1; color: #333; font-size: 20px; font-weight: 300; }
.cm-composer-field { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; color: var(--cm-muted); font-size: 15px; text-align: left; white-space: nowrap; }
.cm-typed { overflow: hidden; text-overflow: ellipsis; }
.cm-caret { width: 1.5px; height: 18px; margin-left: 2px; flex: none; background: var(--cm-blue); animation: cmBlink 1s steps(1) infinite; }
.cm-hero-note { margin: 14px 0 0; color: var(--cm-faint); font-size: 12.5px; }
@keyframes cmBlink { 50% { opacity: 0; } }

/* Floating objects. The outer node carries drag + parallax, the body carries bobbing. */
.cm-float-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cm-float { position: absolute; pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform; }
.cm-float.is-dragging { cursor: grabbing; z-index: 5; }
.cm-float-body { --r: 0deg; transform: rotate(var(--r)); background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 18px 40px rgb(20 30 60 / .1); transition: box-shadow .35s ease, transform .5s var(--cm-ease); animation: cmBob 7s ease-in-out infinite; }
.cm-float:hover .cm-float-body, .cm-float.is-dragging .cm-float-body { box-shadow: 0 0 0 1.5px var(--cm-blue), 0 24px 54px rgb(20 30 60 / .16); }
.cm-float.is-dragging .cm-float-body { transform: rotate(0deg) scale(1.04); animation-play-state: paused; }
.cm-float.is-lit .cm-float-body { box-shadow: 0 0 0 1.5px var(--cm-blue), 0 18px 40px rgb(20 30 60 / .1); transform: rotate(0deg) scale(1.04); }
@keyframes cmBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.cm-f-meta { padding: 9px 4px 2px; text-align: left; }
.cm-f-meta b { display: block; font-size: 12.5px; font-weight: 600; color: var(--cm-ink); }
.cm-f-meta span { display: block; margin-top: 2px; font-size: 11px; color: var(--cm-faint); }
.cm-f-web { left: 7%; top: 15%; }
.cm-f-web .cm-float-body { --r: -5deg; width: 176px; padding: 8px; animation-delay: -1s; }
.cm-f-wiki { height: 92px; border-radius: 9px; background: #f5f4ef; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: Georgia, serif; color: #2a2a2a; }
.cm-f-wiki span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #d7d4cb; font-size: 22px; }
.cm-f-wiki b { font-size: 15px; font-weight: 400; }
.cm-f-wiki small { font-size: 8px; color: #777; }
.cm-f-image { right: 8%; top: 12%; }
.cm-f-image .cm-float-body { --r: 4deg; width: 168px; padding: 8px; animation-delay: -3s; }
.cm-f-image img { display: block; width: 100%; height: 118px; object-fit: cover; border-radius: 9px; background: #0d1422; }
.cm-f-video { right: 5%; bottom: 13%; }
.cm-f-video .cm-float-body { --r: -3deg; width: 196px; padding: 8px; outline: 2px dashed #f29b24; outline-offset: -2px; animation-delay: -5s; }
.cm-f-video-thumb { position: relative; height: 104px; border-radius: 9px; overflow: hidden; }
.cm-f-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-f-video-thumb i { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; background: rgb(15 20 25 / .7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='white'/%3E%3C/svg%3E") center/18px no-repeat; }
.cm-f-note { left: 9%; bottom: 16%; }
.cm-f-note .cm-float-body { --r: 3deg; width: 170px; padding: 16px 16px 12px; background: #fff7d6; text-align: left; box-shadow: 0 0 0 1px rgb(160 120 0 / .12), 0 18px 40px rgb(80 60 0 / .1); animation-delay: -2s; }
.cm-f-note p { margin: 0; font-size: 14px; line-height: 1.5; color: #3b3320; }
.cm-f-note span { display: block; margin-top: 10px; font-size: 11px; color: #9a8a5a; }
.cm-f-tag { left: 11%; top: 47%; }
.cm-f-tag .cm-float-body { --r: -6deg; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--cm-blue); background: var(--cm-blue-soft); box-shadow: 0 0 0 1px #cfd6ff, 0 8px 20px rgb(20 30 60 / .08); animation-delay: -4s; }
.cm-f-folder { right: 9%; top: 47%; }
.cm-f-folder .cm-float-body { --r: 5deg; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; text-align: left; animation-delay: -6s; }
.cm-f-folder b { display: block; font-size: 12.5px; color: var(--cm-ink); }
.cm-f-folder span { display: block; font-size: 11px; color: var(--cm-faint); }
.cm-cursor { position: absolute; left: 0; top: 0; z-index: 6; display: flex; align-items: flex-start; pointer-events: none; opacity: 0; transition: transform 1.8s var(--cm-ease), opacity .4s ease; }
.cm-cursor.is-on { opacity: 1; }
.cm-cursor svg { width: 20px; height: 20px; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .2)); }
.cm-cursor span { margin: 14px 0 0 -2px; padding: 3px 8px; border-radius: 6px 999px 999px 999px; background: #f29b24; color: #fff; font-size: 11px; font-weight: 700; }

/* Language menu */
.cm-lang { position: relative; margin-left: -8px; }
.cm-lang-button { height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--cm-ink-2); font: inherit; font-size: 13.5px; cursor: pointer; transition: background .15s ease; }
.cm-lang-button:hover, .cm-lang-button[aria-expanded="true"] { background: #efefef; }
.cm-lang-button svg { width: 16px; height: 16px; }
.cm-lang-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 140px; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--cm-line), 0 16px 40px rgb(0 0 0 / .12); display: grid; gap: 2px; }
.cm-lang-menu[hidden] { display: none; }
.cm-lang-menu button { height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--cm-ink-2); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.cm-lang-menu button:hover { background: #f4f4f4; }
.cm-lang-menu button[aria-checked="true"] { color: var(--cm-blue); font-weight: 600; }
.cm-lang-menu button[aria-checked="true"]::after { content: "✓"; float: right; }
.cm .guest-tag b { font-weight: inherit; }

/* Showcase: the interactive canvas sits on a coloured stage */
.cm-showcase {
  width: min(100% - 48px, 1240px); margin: 0 auto; padding: 64px clamp(20px, 5vw, 72px) 0;
  border-radius: 28px; overflow: hidden;
  background:
    linear-gradient(160deg, #6f8dff 0%, #3d5cf5 48%, #2441ff 100%);
}
.cm-showcase-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 36px; color: #fff; }
.cm-showcase-head h2 { margin: 0; color: #fff; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.15; letter-spacing: -.04em; }
.cm-showcase-head p { max-width: 340px; margin: 0; color: rgb(255 255 255 / .82); font-size: 14px; line-height: 1.75; }
.cm-demo-frame {
  height: 800px; position: relative; overflow: hidden;
  border-radius: 16px 16px 0 0;
  background-color: #fafbf9;
  background-image: radial-gradient(#dfe3ea 1px, transparent 1px);
  background-size: 22px 22px;
  /* A ring (not a top-edge line) so the highlight follows the rounded corners. */
  box-shadow: 0 0 0 1px rgb(255 255 255 / .28), 0 16px 40px rgb(10 20 60 / .16);
  isolation: isolate;
}
.cm .guest-canvas-topbar { height: 48px; padding: 0 16px; align-items: center; display: flex; justify-content: space-between; border-bottom: 1px solid #ececec; border-radius: inherit; background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.cm .guest-canvas-name { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: #333; font-weight: 600; }
.cm .guest-canvas-viewport { height: calc(100% - 48px); }
/* The sample cards sit right of the world origin; shift so the group is centred in the window. */
@media (min-width: 621px) { .cm .guest-canvas-world { margin-left: -910px; } }
.cm .guest-canvas-actions button { border-radius: 999px; }
.cm-window-dots { display: inline-flex; gap: 6px; }
.cm-window-dots i { width: 10px; height: 10px; border-radius: 50%; background: #e2e2e2; }
.cm-window-dots i:nth-child(1) { background: #ff5f57; }
.cm-window-dots i:nth-child(2) { background: #febc2e; }
.cm-window-dots i:nth-child(3) { background: #28c840; }

/* Capture: Catmark line drawings. Solid 0.75px for objects, round-dotted 1.25px for guides. */
.cm-capture { padding: 140px 0 140px; }
.cm-art-grid { --art-card: #f4f5f9; --art-ink: var(--cm-blue); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 1200px; margin: 0 auto; }
.cm-art-card { min-height: 400px; padding: 34px 28px 28px; display: flex; flex-direction: column; border-radius: 20px; background: var(--art-card); box-shadow: inset 0 0 0 1px rgb(20 30 80 / .05); }
.cm-art { width: 202px; height: 202px; margin: 0 auto 40px; overflow: visible; }
.cm-art-copy { margin-top: auto; }
.cm-art-copy h3 { margin: 0; font-family: "Inter", var(--cm-display); font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.cm-art-copy p { min-height: 3.1em; margin: 6px 0 0; color: #6e717c; font-size: 15px; line-height: 1.55; }
.cm-art .ln { fill: none; stroke: var(--art-ink); stroke-width: .75; }
.cm-art .dt { fill: none; stroke: var(--art-ink); stroke-width: 1.25; stroke-linecap: round; stroke-dasharray: .01 4; }
.cm-art .cm-fill { fill: var(--art-card); }
.cm-art .cm-pupil { fill: var(--art-ink); }
.cm-eye, .js-catch-card { transform-box: fill-box; transform-origin: center; }

/* Entrance: solid lines draw in, guides fade in after them. */
.cm-art-card.is-pending .ln { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.cm-art-card.is-pending .dt, .cm-art-card.is-pending .cm-pupil { opacity: 0; }
.cm-art-card.is-drawing .ln { stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--cm-ease) var(--delay, 0s); }
.cm-art-card.is-drawing .dt, .cm-art-card.is-drawing .cm-pupil { opacity: 1; transition: opacity .5s ease calc(var(--delay, 0s) + .65s); }

/* Cat blinks once the link lands. */
.cm-art-card.is-blink .cm-eye { animation: cmBlink2 .32s var(--cm-move) both; }
@keyframes cmBlink2 { 50% { scale: 1 .12; } }

/* The front snapshot re-captures its content. */
.cm-art-card.is-capture .js-page[data-depth="0"] .cm-page-content .ln { stroke-dasharray: 1 1; animation: cmRedraw .9s var(--cm-ease) both; }
@keyframes cmRedraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Bookmarks drop into their cells; the duplicate lands on top, shakes, and is skipped. */
.cm-art .js-dup { opacity: 0; }
.cm-art-card.is-drop .js-tile { animation: cmDrop .7s var(--cm-move) calc(var(--i) * .09s) both; }
.cm-art-card.is-drop .js-dup { animation: cmSkip 1.3s var(--cm-move) .35s both; }
@keyframes cmDrop { from { translate: 0 -44px; opacity: 0; } 30% { opacity: 1; } to { translate: 0 0; opacity: 1; } }
@keyframes cmSkip { 0% { translate: 0 -44px; opacity: 0; } 35% { translate: 0 0; opacity: 1; } 47% { translate: -3px 0; } 59% { translate: 3px 0; } 68% { translate: 0 0; opacity: 1; } 100% { translate: 0 -16px; opacity: 0; } }

.cm-steps-intro h2, .cm-cta h2 { margin: 28px 0 0; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.18; letter-spacing: -.04em; }
.cm-section-head h2 span, .cm-steps-intro h2 span, .cm-cta h2 span { color: var(--cm-blue); }

/* Steps */
.cm-steps { padding: 0 0 140px; }
.cm-steps-intro { text-align: center; }
.cm-steps-intro h2 { margin-top: 0; }
.cm-steps-intro p { margin: 18px auto 0; max-width: 460px; color: var(--cm-muted); font-size: 15px; line-height: 1.8; }
.cm-steps-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); border-radius: var(--cm-radius); background: var(--cm-surface); box-shadow: 0 0 0 1px var(--cm-line); }
.cm-steps-grid article { padding: 30px 28px 34px; }
.cm-steps-grid article + article { border-left: 1px solid var(--cm-line); }
.cm-steps-grid span { color: var(--cm-blue); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cm-steps-grid h3 { margin: 14px 0 0; font-size: 24px; letter-spacing: -.03em; }
.cm-steps-grid p { margin: 10px 0 0; color: var(--cm-muted); font-size: 14px; line-height: 1.75; }

/* Features bento */
.cm-features { padding: 0 0 140px; }
.cm-section-head { text-align: center; margin-bottom: 56px; }
.cm-section-head h2 { margin: 0; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.14; letter-spacing: -.045em; }
.cm-section-head p:not(.cm-kicker) { margin: 18px 0 0; color: var(--cm-muted); font-size: 16px; }
.cm-kicker { margin: 0 0 14px; color: var(--cm-faint); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.cm-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cm-tile { position: relative; min-height: 300px; padding: 28px; border-radius: var(--cm-radius); background: var(--cm-surface); box-shadow: 0 0 0 1px var(--cm-line); overflow: hidden; display: flex; flex-direction: column; }
.cm-tile h3 { margin: 0; font-size: 24px; line-height: 1.25; letter-spacing: -.03em; }
.cm-tile-copy > p:not(.cm-kicker) { margin: 14px 0 0; color: var(--cm-muted); font-size: 14px; line-height: 1.75; max-width: 320px; }
.cm-tile-wide { grid-column: span 3; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px; align-items: center; min-height: 360px; }
.cm-tile-dark { grid-column: span 2; background: #111; box-shadow: none; }
.cm-tile-dark h3 { color: #fff; }
.cm-tile-dark .cm-kicker { color: #8a8a8a; }

.cm-segment { margin-top: 24px; display: inline-flex; padding: 3px; border-radius: 999px; background: #f0f0f0; }
.cm-segment button { height: 32px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--cm-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.cm-segment button.is-active { background: #fff; color: var(--cm-ink); box-shadow: 0 1px 3px rgb(0 0 0 / .1); }

.cm-view-demo { position: relative; height: 290px; border-radius: 16px; background: #f6f7f9; box-shadow: inset 0 0 0 1px #ececec; overflow: hidden; }
.cm-view-canvas, .cm-view-table { position: absolute; inset: 0; transition: opacity .45s var(--cm-ease), transform .55s var(--cm-ease); }
.cm-view-canvas { background-image: radial-gradient(#dcdfe6 1px, transparent 1px); background-size: 18px 18px; }
.cm-view-table { padding: 18px; opacity: 0; transform: translateY(14px); pointer-events: none; }
.cm-view-demo[data-view="table"] .cm-view-canvas { opacity: 0; transform: scale(.97); }
.cm-view-demo[data-view="table"] .cm-view-table { opacity: 1; transform: none; }
.cm-mini { position: absolute; width: 168px; padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 10px 26px rgb(20 30 60 / .1), 0 0 0 1px #ececec; font-size: 12px; font-weight: 600; color: var(--cm-ink-2); }
.cm-mini b { display: block; height: 88px; margin-bottom: 8px; border-radius: 7px; }
.cm-mini-a { left: 7%; top: 14%; transform: rotate(-2deg); }
.cm-mini-a b { background-image: linear-gradient(135deg, transparent 38%, #f24e1e 38% 46%, #a259ff 46% 54%, #1abcfe 54% 62%, transparent 62%) !important; }
.cm-mini-b { left: 38%; top: 30%; transform: rotate(1.5deg); z-index: 1; }
.cm-mini-c { right: 6%; top: 9%; transform: rotate(-1deg); }
.cm-mini-tag { position: absolute; padding: 5px 10px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #e3e3e3; font-size: 11.5px; font-weight: 600; color: var(--cm-blue); }
.cm-mini-tag-a { left: 9%; bottom: 12%; }
.cm-mini-tag-b { right: 10%; bottom: 18%; }
.cm-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 12px; padding: 12px 14px; border-radius: 10px; font-size: 13px; color: var(--cm-ink-2); }
.cm-row:nth-child(even) { background: #fff; }
.cm-row span:nth-child(2) { color: var(--cm-blue); }
.cm-row span:nth-child(3) { color: var(--cm-faint); }
.cm-row-head { color: var(--cm-faint) !important; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; }
.cm-row-head span { color: inherit !important; }

.cm-share, .cm-snapshots, .cm-feed, .cm-styles, .cm-data-list { margin-top: auto; padding-top: 24px; }
.cm-share { display: grid; gap: 10px; }
.cm-share-link { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 14px; border-radius: 12px; background: #f6f6f6; font-size: 13px; color: var(--cm-ink-2); }
.cm-share-link b { padding: 6px 12px; border-radius: 999px; background: var(--cm-ink); color: #fff; font-size: 12px; }
.cm-share-perms { display: flex; gap: 6px; }
.cm-share-perms span { flex: 1; padding: 8px 0; border-radius: 10px; text-align: center; font-size: 12.5px; color: var(--cm-muted); box-shadow: inset 0 0 0 1px var(--cm-line); }
.cm-share-perms span.is-on { color: var(--cm-blue); background: var(--cm-blue-soft); box-shadow: inset 0 0 0 1px #c8d0ff; font-weight: 600; }
.cm-avatars { display: flex; align-items: center; padding-top: 4px; }
.cm-avatars i { width: 26px; height: 26px; margin-right: -7px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; font-size: 11px; font-style: normal; font-weight: 700; }
.cm-avatars em { margin-left: 16px; color: var(--cm-muted); font-size: 12px; font-style: normal; }

.cm-snapshots { display: grid; gap: 8px; }
.cm-snapshots div { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: #f6f6f6; font-size: 13px; }
.cm-snapshots span { color: var(--cm-muted); font-size: 12px; }
.cm-snapshots em { margin-left: auto; padding: 2px 8px; border-radius: 6px; background: #e7f7ee; color: #1a9a51; font-size: 11px; font-style: normal; font-weight: 600; }
.cm-snapshots div:first-child { background: #fff; box-shadow: 0 0 0 1px var(--cm-line), 0 6px 16px rgb(0 0 0 / .05); }

.cm-feed { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cm-bubble { max-width: 90%; padding: 9px 14px; border-radius: 16px 16px 4px 16px; background: var(--cm-blue); color: #fff; font-size: 13px; }
.cm-bubble-note { background: #f0f0f0; color: var(--cm-ink-2); }
.cm-feed-input { align-self: stretch; margin-top: 6px; padding: 11px 14px; border-radius: 999px; color: var(--cm-faint); font-size: 12.5px; box-shadow: inset 0 0 0 1px var(--cm-line); }

.cm-styles { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-styles > span:not(.cm-swatches) { padding: 8px 13px; border-radius: 10px; font-size: 12.5px; color: var(--cm-muted); box-shadow: inset 0 0 0 1px var(--cm-line); }
.cm-styles > span.is-on { color: var(--cm-ink); box-shadow: inset 0 0 0 2px var(--cm-blue); font-weight: 600; }
.cm-swatches { width: 100%; display: flex; gap: 8px; margin-top: 8px; }
.cm-swatches i { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .6), 0 0 0 1px #e3e3e3; }

.cm-data-list { margin: auto 0 0; list-style: none; padding-left: 0; display: grid; gap: 10px; }
.cm-data-list li { display: flex; align-items: center; gap: 10px; color: #d0d0d0; font-size: 13.5px; }
.cm-data-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #6f86ff; }

/* CTA */
.cm-cta { padding-bottom: 140px; }
.cm-cta-inner { padding: 88px 24px; border-radius: 28px; text-align: center; background: var(--cm-surface); box-shadow: 0 0 0 1px var(--cm-line); }
.cm-cta h2 { margin: 0 0 34px; font-size: clamp(32px, 4.6vw, 56px); }
.cm-cta p { margin: 16px 0 0; color: var(--cm-faint); font-size: 13px; }

/* FAQ */
.cm-faq { padding-bottom: 120px; }
.cm-faq .cm-section-head { margin-bottom: 40px; }
.cm-faq-list { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--cm-line); }
.cm-faq details { border-bottom: 1px solid var(--cm-line); }
.cm-faq summary { position: relative; padding: 22px 44px 22px 0; list-style: none; cursor: pointer; font-size: 16.5px; font-weight: 600; color: var(--cm-ink); }
.cm-faq summary::-webkit-details-marker { display: none; }
.cm-faq summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: #f0f0f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/12px no-repeat; transition: transform .3s var(--cm-ease); }
.cm-faq details[open] summary::after { transform: rotate(45deg); }
.cm-faq summary:hover { color: var(--cm-blue); }
.cm-faq details p { margin: 0; padding: 0 44px 24px 0; color: var(--cm-muted); font-size: 14.5px; line-height: 1.85; }

/* Footer */
.cm-footer { display: flex; align-items: center; gap: 28px; padding: 28px 0 40px; border-top: 1px solid var(--cm-line); color: var(--cm-muted); font-size: 13px; }
.cm-brand-sm { font-size: 15px; }
.cm-brand-sm .catmark-logo { width: 13px; height: 21px; }
.cm-footer nav { display: flex; gap: 22px; margin-left: auto; }
.cm-footer nav a { text-decoration: none; color: var(--cm-muted); }
.cm-footer nav a:hover { color: var(--cm-blue); }

/* Reveal on scroll (only when JS has opted in) */
.cm.has-reveal .cm-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--cm-ease), transform .9s var(--cm-ease); }
.cm.has-reveal .cm-reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .cm-float-body { scale: .82; }
  .cm-f-web { left: 1.5%; top: 9%; }
  .cm-f-image { right: 1.5%; top: 8%; }
  .cm-f-video { right: 1%; bottom: 5%; }
  .cm-f-note { left: 1.5%; bottom: 7%; }
  .cm-f-tag { left: 2%; top: 50%; }
  .cm-f-folder { right: 1.5%; top: 50%; }
}
@media (max-width: 960px) {
  .cm-hero { min-height: 0; padding: 200px 16px 210px; }
  .cm-float-body { scale: 1; }
  .cm-float-body { animation: none; }
  .cm-f-web { left: 4%; top: 22px; }
  .cm-f-web .cm-float-body { width: 132px; }
  .cm-f-wiki { height: 66px; }
  .cm-f-image { right: 4%; top: 34px; }
  .cm-f-image .cm-float-body { width: 124px; }
  .cm-f-image img { height: 80px; }
  .cm-f-note { left: 5%; top: auto; bottom: 28px; }
  .cm-f-note .cm-float-body { width: 140px; padding: 12px; }
  .cm-f-video { right: 4%; bottom: 36px; }
  .cm-f-video .cm-float-body { width: 140px; }
  .cm-f-video-thumb { height: 70px; }
  .cm-f-tag, .cm-f-folder, .cm-cursor { display: none; }
  .cm-capture { padding: 110px 0 96px; }
  .cm-art-grid { grid-template-columns: 1fr; max-width: 520px; }
  .cm-art-card { min-height: 360px; }
  .cm-steps-grid { grid-template-columns: repeat(2, 1fr); }
  .cm-steps-grid article:nth-child(3) { border-left: 0; }
  .cm-steps-grid article:nth-child(n+3) { border-top: 1px solid var(--cm-line); }
  .cm-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-tile-wide { grid-column: span 2; grid-template-columns: 1fr; }
  .cm-showcase-head { flex-direction: column; align-items: start; gap: 14px; }
  .cm-demo-frame { height: 740px; }
}
@media (max-width: 720px) {
  .cm-nav-links { display: none; }
  .cm-nav .cm-btn { margin-left: auto; }
  .cm-br-wide { display: none; }
  .cm-hero h1 { font-size: clamp(34px, 10vw, 46px); }
  .cm-hero-line { white-space: normal; }
  .cm-hero-copy { font-size: 15px; }
  .cm-lang-button span { display: none; }
  .cm-lang-button { padding: 0 9px; }
  .cm-shell { width: calc(100% - 32px); }
  .cm-showcase { width: calc(100% - 16px); border-radius: 22px; padding: 40px 10px 10px; }
  .cm-showcase-head { padding: 0 8px; }
  .cm-demo-frame { height: 530px; border-radius: 14px; }
  .cm .guest-canvas-hint { display: none; }
  .cm-bento { grid-template-columns: 1fr; }
  .cm-tile-wide, .cm-tile-dark { grid-column: auto; }
  .cm-tile { min-height: 0; padding: 24px; }
  .cm-view-demo { height: 250px; }
  .cm-mini { width: 132px; }
  .cm-mini b { height: 68px; }
  .cm-steps-grid { grid-template-columns: 1fr; }
  .cm-steps-grid article + article { border-left: 0; border-top: 1px solid var(--cm-line); }
  .cm-capture, .cm-steps, .cm-features, .cm-cta { padding-bottom: 96px; }
  .cm-cta-inner { padding: 64px 20px; }
  .cm-footer { flex-wrap: wrap; gap: 16px 24px; }
  .cm-footer nav { order: 3; width: 100%; margin-left: 0; flex-wrap: wrap; gap: 12px 20px; }
  .cm-footer-copy { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cm *, .cm *::before, .cm *::after { animation: none !important; transition: none !important; }
  .cm.has-reveal .cm-reveal { opacity: 1; transform: none; }
}