/* Public pages: one composition system on the workbench's palette, type and controls. */
:root{
  --mk-card:#f8f8f9;--mk-card-hover:#f4f4f6;
  --mk-stage:#eceef3;--mk-stage-a:rgb(43 124 246 / .2);--mk-stage-b:rgb(237 105 52 / .12);--mk-stage-c:rgb(124 92 246 / .1);
  --mk-grain:.32;--mk-ease:cubic-bezier(.2,.7,.25,1);
}
:root[data-product-theme="dark"]{
  --mk-card:#151518;--mk-card-hover:#19191d;
  --mk-stage:#18191d;--mk-stage-a:rgb(75 151 255 / .3);--mk-stage-b:rgb(237 105 52 / .16);--mk-stage-c:rgb(124 92 246 / .18);
  --mk-grain:.16;
}
:is(.page-home,.page-product,.page-plans,.page-about,.page-solutions,.page-news,.page-faq,.page-contact) .container{width:min(1360px,calc(100% - 80px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)))}
:is(.page-home,.page-product,.page-plans,.page-about,.page-solutions,.page-news,.page-faq,.page-contact) .site-header{background:var(--product-bg);backdrop-filter:none;-webkit-backdrop-filter:none}
:is(.page-home,.page-product,.page-plans,.page-about,.page-solutions,.page-news,.page-faq,.page-contact) .brand :is(img,svg){width:88px}
.eyebrow,.step-number,.micro-label{font:500 11px/1.5 var(--product-font-mono);letter-spacing:.055em;color:var(--muted)}
.diff-add{color:var(--product-diff-add-fg)}.diff-del{color:var(--product-diff-del-fg)}
.status-signal{display:inline-block;flex:none;width:6px;height:6px;border-radius:50%;background:var(--product-success)}.muted-signal{background:var(--product-subtle)}

/* Shared controls: page actions and quiet text links. */
.button-cta{min-height:44px;padding-inline:18px;border-radius:var(--product-radius-control)}
.mk-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:28px}
.mk-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--product-link);font-size:15px;font-weight:500;line-height:1.5}
.mk-link .icon{width:15px;height:15px}
.mk-link:hover{text-decoration:underline;text-underline-offset:4px}

/* Painted stage: gradients and grain behind every product illustration. */
.wb-stage,.mk-art{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(70% 90% at 10% 0%,var(--mk-stage-a),transparent 64%),radial-gradient(60% 85% at 96% 100%,var(--mk-stage-b),transparent 62%),radial-gradient(45% 60% at 72% 16%,var(--mk-stage-c),transparent 70%),var(--mk-stage)}
.wb-stage::after,.mk-art::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--mk-grain);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.mk-art-alt{background:radial-gradient(70% 90% at 92% 0%,var(--mk-stage-c),transparent 64%),radial-gradient(60% 85% at 4% 100%,var(--mk-stage-a),transparent 62%),radial-gradient(40% 55% at 30% 20%,var(--mk-stage-b),transparent 70%),var(--mk-stage)}

/* Hero: a short statement, two actions and the working product. */
.mk-hero{padding-top:72px}
.mk-hero h1{max-width:20em;font-size:clamp(30px,2.8vw,40px);font-weight:500;line-height:1.22;letter-spacing:-.035em;text-wrap:balance}
.mk-lead{max-width:34em;margin-top:14px;color:var(--muted);font-size:18px;line-height:1.6;letter-spacing:-.01em;text-wrap:pretty}
.mk-hero .experience-section{margin-top:48px}

/* Feature cards: copy in one third, a cropped product moment in two thirds. */
.mk-features{display:grid;gap:16px;padding-top:120px}
.mk-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:8px;min-width:0;min-height:520px;padding:8px;border:1px solid var(--line);border-radius:var(--product-radius-surface);background:var(--mk-card)}
.mk-feature-flip{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.mk-feature-flip>.mk-art{order:-1}
.mk-feature-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:24px 20px 20px}
.mk-feature-copy h2{font-size:22px;font-weight:500;line-height:1.4;letter-spacing:-.02em;text-wrap:balance}
.mk-feature-copy p{margin-top:4px;color:var(--muted);font-size:22px;line-height:1.4;letter-spacing:-.02em;text-wrap:pretty}
.mk-feature-copy .mk-link{margin-top:14px}
.mk-art{min-width:0;min-height:320px;border-radius:7px}
.mk-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.mk-feature-stack{--mk-stack-art-height:360px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);min-height:560px}
.mk-feature-stack>.mk-feature-copy{padding-bottom:12px}
.mk-feature-stack .mk-art{min-height:var(--mk-stack-art-height)}

/* Product moments, drawn with the workbench's own components. */
.mk-ui{position:absolute;inset:9% -2px -2px 9%;display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--product-border-strong);border-radius:10px 0 0;background:var(--product-bg);color:var(--ink);box-shadow:var(--product-shadow-lg);font-size:12px;line-height:1.6}
.mk-ui .icon{width:14px;height:14px;flex:none;color:var(--muted)}
.mk-ui code{font:11px/1.6 var(--product-font-mono)}
.mk-ui-head{display:flex;align-items:center;gap:8px;flex:none;height:40px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--product-sidebar);font-size:12px;font-weight:500;white-space:nowrap}
.mk-ui-head>span:not([class]){min-width:0;overflow:hidden;text-overflow:ellipsis}
.mk-ui-state,.mk-ui-tag{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:11px;font-weight:500}
.mk-ui-state{color:var(--product-success)}.mk-ui-state .icon{width:13px;height:13px;color:inherit}
.mk-ui-tag{padding:2px 9px 2px 7px;border-radius:999px;background:color-mix(in srgb,var(--product-brand) 7%,var(--product-surface));color:var(--product-brand-text)}.mk-ui-tag .icon{width:12px;height:12px;color:inherit}
.mk-ui-body{width:100%;max-width:580px;padding:26px 28px}
.mk-ui-user{width:fit-content;max-width:90%;margin-left:auto;padding:9px 13px;border-radius:12px 12px 4px 12px;background:var(--product-fill);font-size:13px;line-height:1.65}
.mk-ui-step{display:flex;align-items:center;gap:8px;min-width:0;margin-top:8px;color:var(--muted);white-space:nowrap}
.mk-ui-user+.mk-ui-step{margin-top:24px}
.mk-ui-step>code:first-of-type{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.mk-ui-step>.icon{width:13px;height:13px}
.mk-ui-pass{color:var(--product-success)}
.mk-ui-reply{margin-top:20px;font-size:13px;line-height:1.75}
.mk-ui-change{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--product-surface);white-space:nowrap}
.mk-ui-composer{flex:none;width:calc(100% - 40px);max-width:560px;margin:auto 0 20px 20px;padding:12px 12px 9px;border:1px solid var(--line);border-radius:12px;background:var(--product-composer);box-shadow:var(--product-shadow-xs)}
.mk-ui-composer>p{color:var(--product-subtle);font-size:12px}
.mk-ui-composer>div{display:flex;align-items:center;gap:8px;margin-top:20px;font-size:11px;white-space:nowrap}
.mk-ui-composer>div>span:first-child{color:var(--muted);font-size:18px;line-height:1}
:is(.mk-ui,.mk-phone) .wb-send .icon{width:13px;height:13px;color:#fff}
.mk-ui-file{display:flex;align-items:center;gap:8px;padding:14px 16px 6px;min-width:0}
.mk-ui-file>code:first-child{margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-ui-diff{margin:0;padding-block:4px;overflow:hidden;font:11px/1.95 var(--product-font-mono)}
.mk-ui-diff code{display:block;font:inherit}
.mk-ui-diff span{display:block;padding-inline:16px;white-space:pre}
.mk-ui-finding{max-width:470px;margin:14px 16px 0;padding:11px 14px;border:1px solid var(--line);border-left:2px solid var(--product-warning);border-radius:8px;background:var(--product-surface);font-size:12px;line-height:1.65}
.mk-ui-finding>p:first-child{display:flex;align-items:center;gap:8px;margin-bottom:4px;color:var(--muted)}
.mk-ui-finding>p:first-child>span{color:var(--product-warning-text);font-size:11px;font-weight:500}
.mk-ui-git{display:flex;align-items:center;gap:8px;max-width:470px;margin:12px 16px 16px;padding:8px 8px 8px 12px;border:1px solid var(--line);border-radius:8px;color:var(--muted);white-space:nowrap}
.mk-ui-git>code{color:var(--ink)}
.mk-ui-button{margin-left:auto;padding:4px 12px;border-radius:6px;background:var(--product-primary);color:var(--product-on-primary);font-size:11px;font-weight:500}
.mk-ui-tasks{inset:auto 9% -2px;top:13%;border-radius:10px 10px 0 0}
.mk-ui-task{display:flex;align-items:center;gap:10px;min-width:0;padding:11px 16px;border-bottom:1px solid var(--line);font-size:13px;white-space:nowrap}
.mk-ui-task>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis}
.mk-ui-task>span:last-child{margin-left:auto;color:var(--muted);font-size:11px}
.mk-ui-label{padding:14px 16px 4px;color:var(--product-subtle);font-size:11px}
.mk-ui-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--product-success)}
.mk-ui-task.is-running .mk-ui-dot{width:11px;height:11px;border:1.5px solid var(--product-border-strong);border-top-color:var(--product-brand);background:none}
.mk-ui-task.is-running>span:last-child{color:var(--product-brand-text)}
.mk-ui-task.is-waiting .mk-ui-dot{background:var(--product-warning)}
.mk-ui-task.is-waiting>span:last-child{color:var(--product-warning-text)}
/* Layout owns centering; entrance and reduced-motion transforms must not move it. */
.mk-art-phone{--mk-phone-inset:20px;display:grid;place-items:center;padding:var(--mk-phone-inset)}
.mk-phone{position:relative;display:flex;flex-direction:column;width:auto;max-width:100%;height:calc(var(--mk-stack-art-height) - 2 * var(--mk-phone-inset));aspect-ratio:390/780;padding:12px 10px;border:1px solid var(--product-border-strong);border-radius:24px;background:var(--product-bg);color:var(--ink);box-shadow:var(--product-shadow-lg);font-size:11px;line-height:1.6;overflow:hidden}
.mk-phone .icon{width:14px;height:14px;flex:none;color:var(--muted)}
.mk-phone-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 2px 10px;font-size:11px}
.mk-phone-head strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-phone-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;padding:6px 0;border-block:1px solid var(--line);color:var(--muted);font-size:9px;text-align:center}
.mk-phone-tabs>*{min-width:0;padding:3px 1px;border-radius:5px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mk-phone-tabs strong{background:var(--product-selected);color:var(--ink)}
.mk-phone-user{width:fit-content;max-width:86%;margin:20px 0 14px auto;padding:8px 11px;border-radius:11px 11px 3px 11px;background:var(--product-fill)}
.mk-phone-reply{padding-inline:2px;line-height:1.75}
.mk-phone-result{display:flex;align-items:center;gap:6px;margin-top:12px;color:var(--muted);white-space:nowrap}
.mk-phone-result .icon{width:12px;height:12px}.mk-phone-result>code:last-child{margin-left:auto}
.mk-phone-input{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding:10px 8px 10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--product-composer);color:var(--product-subtle);font-size:11px}

/* Centered sections and dense cards. */
.mk-section{padding-top:136px;scroll-margin-top:72px}
.mk-section-head{max-width:760px;margin:0 auto 40px;text-align:center}
.mk-section-head h2{font-size:clamp(26px,2.4vw,34px);font-weight:500;line-height:1.3;letter-spacing:-.03em;text-wrap:balance}
.mk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mk-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mk-card{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:24px;border:1px solid var(--line);border-radius:var(--product-radius-surface);background:var(--mk-card)}
.mk-card h3{margin-top:22px;font-size:17px;font-weight:500;line-height:1.45;letter-spacing:-.015em}
.mk-card>.step-number+h3{margin-top:14px}
.mk-card>p{margin-top:6px;color:var(--muted);font-size:15px;line-height:1.65;text-wrap:pretty}
.mk-card-ui{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:30px}
.mk-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 11px;border:1px solid var(--line);border-radius:999px;background:var(--product-bg);color:var(--muted);font-size:12px;line-height:1.5;white-space:nowrap}
.mk-chip .icon{width:13px;height:13px;color:inherit}
.mk-chip.is-on{border-color:var(--product-border-strong);color:var(--ink);box-shadow:var(--product-shadow-xs)}
.mk-chip-link{flex:0 1 32px;height:1px;background:var(--product-border-strong)}
.context-example,.steer-example,.result-example{display:flex;align-items:center;gap:8px;width:100%;min-width:0;min-height:52px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.mk-card>p:has(+:is(.context-example,.steer-example,.result-example)){margin-bottom:20px}
.context-example{flex-wrap:wrap;gap:6px}
.context-example>span{display:inline-flex;align-items:center;gap:5px;min-width:0;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--product-bg);font-size:11px;white-space:nowrap}
.context-example .icon{width:12px;height:12px}
.steer-example>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
.example-status{margin-left:auto;padding:2px 6px;border:1px solid var(--line);border-radius:5px;font-size:11px;white-space:nowrap}
.result-example>span:first-child{display:inline-flex;align-items:center;gap:6px;min-width:0}
.result-example>span:last-child{margin-left:auto}
.mk-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0;padding:0;overflow:hidden;list-style:none;border:1px solid var(--line);border-radius:var(--product-radius-surface);background:var(--line)}
.mk-specs>li{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;align-items:center;min-width:0;padding:18px 20px;background:var(--mk-card)}
.mk-specs>li>:first-child{grid-row:span 2;justify-self:start}
.mk-specs strong{font-size:14px;font-weight:500;line-height:1.5}
.mk-specs>li>span:last-child{color:var(--muted);font-size:13px;line-height:1.55}
.mk-specs kbd,.mk-spec-icon{display:inline-flex;align-items:center;justify-content:center;gap:1px;min-width:40px;height:28px;padding:0 7px;border:1px solid var(--line);border-radius:7px;background:var(--product-bg);color:var(--ink);font:500 12px/1 var(--product-font-mono);box-shadow:0 1px 0 var(--line)}
.mk-specs kbd .icon{width:12px;height:12px}
.mk-spec-icon{color:var(--muted)}.mk-spec-icon .icon{width:15px;height:15px}
.product-boundary{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;color:var(--muted);font-size:13px}
.product-boundary>.mk-link{flex:none;font-size:13px}

/* Closing call to action. */
.mk-cta{padding-block:168px 152px;text-align:center}
.mk-cta h2{font-size:clamp(34px,4.6vw,60px);font-weight:500;line-height:1.15;letter-spacing:-.045em;text-wrap:balance}
.mk-cta .mk-actions{justify-content:center;margin-top:32px}

/* Secondary pages share the hero's type scale. */
:is(.page-about,.page-solutions,.page-faq,.page-news,.page-contact) .page-heading h1,.pricing-intro h1{font-size:clamp(30px,2.8vw,40px);font-weight:500;line-height:1.22;letter-spacing:-.035em}
:is(.page-about,.page-solutions,.page-faq,.page-news,.page-contact) .page-heading .page-intro,.pricing-intro .page-intro{margin-top:12px;font-size:17px;line-height:1.6}
:is(.page-about,.page-solutions,.page-faq,.page-news) .page-wrap,.pricing-intro{padding-top:72px}
.page-plans .pricing-intro{padding-bottom:0}.page-plans .offer-section{padding-top:40px}
.page-contact .page-wrap{padding-top:72px}
.page-contact .support-auth-gate{max-width:none;padding:32px 0;border-top:1px solid var(--line);border-radius:0;background:transparent}
.page-contact .support-auth-gate .actions{flex-wrap:wrap}
.page-contact .support-customer-main .support-card{padding:24px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}

@media(hover:hover) and (pointer:fine){
  .mk-feature:hover,.mk-card:hover{border-color:var(--product-border-strong);background:var(--mk-card-hover)}
  .mk-specs>li:hover{background:var(--mk-card-hover)}
}
@media(max-width:1180px){
  .mk-ui{inset:8% -2px -2px 6%}
  .mk-specs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1023px){
  .mk-features{padding-top:88px}
  .mk-feature,.mk-feature-flip{grid-template-columns:minmax(0,1fr);min-height:0}
  .mk-feature-flip>.mk-art{order:0}
  .mk-feature-copy{padding:20px 16px 12px}
  .mk-art{min-height:400px}
  .mk-pair{grid-template-columns:minmax(0,1fr)}
  .mk-feature-stack{min-height:0}
  .mk-section{padding-top:104px}
}
@media(max-width:767px){
  :is(.page-home,.page-product,.page-plans,.page-about,.page-solutions,.page-news,.page-faq,.page-contact) .container{width:calc(100% - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))}
  :is(.page-home,.page-product,.page-plans,.page-about,.page-solutions,.page-news,.page-faq,.page-contact) .brand :is(img,svg){width:78px}
  .eyebrow,.step-number{font-size:10px}
  .mk-hero{padding-top:40px}
  .mk-hero h1{font-size:clamp(26px,7.2vw,32px);line-height:1.25}
  .mk-lead{margin-top:12px;font-size:16px;line-height:1.65}
  .mk-actions{gap:8px;margin-top:22px}
  .mk-actions .button{padding-inline:16px;font-size:14px}
  .mk-hero .experience-section{margin-top:32px}
  .mk-features{gap:12px;padding-top:72px}
  .mk-feature{padding:6px}
  .mk-feature-copy{padding:18px 14px 10px}
  .mk-feature-copy h2,.mk-feature-copy p{font-size:19px}
  .mk-art{min-height:340px}
  .mk-feature-stack{--mk-stack-art-height:340px}
  .mk-art-phone{--mk-phone-inset:16px}
  .mk-ui{inset:7% -2px -2px 5%}
  .mk-ui-body{padding:20px 18px}
  .mk-ui-user{font-size:12px}.mk-ui-reply{font-size:12px}.mk-ui-composer{display:none}
  .mk-ui-tasks{inset:auto 5% -2px;top:9%}
  .mk-pair{gap:12px}
  .mk-section{padding-top:88px}
  .mk-section-head{margin-bottom:24px}
  .mk-section-head h2{font-size:24px}
  .mk-grid,.mk-grid-2{grid-template-columns:minmax(0,1fr);gap:12px}
  .mk-card{padding:20px}
  .mk-card h3{margin-top:18px;font-size:16px}
  .mk-card>p{font-size:14px}
  .mk-specs{grid-template-columns:minmax(0,1fr)}
  .mk-specs>li{grid-template-columns:48px minmax(0,1fr);column-gap:12px;padding:14px 16px}
  .product-boundary{flex-direction:column;align-items:flex-start;gap:4px;font-size:12px}
  .mk-cta{padding-block:104px 96px}
  .mk-cta h2{font-size:clamp(30px,8.6vw,38px)}
  .mk-cta .mk-actions{margin-top:24px}
  :is(.page-about,.page-solutions,.page-faq,.page-news) .page-wrap,.pricing-intro,.page-contact .page-wrap{padding-top:40px}
  :is(.page-about,.page-solutions,.page-faq,.page-news,.page-contact) .page-heading h1,.pricing-intro h1{font-size:clamp(26px,7.2vw,32px);line-height:1.25}
  :is(.page-about,.page-solutions,.page-faq,.page-news,.page-contact) .page-heading .page-intro,.pricing-intro .page-intro{font-size:15px}
  .page-solutions .solution-choice{padding:22px 20px}.page-solutions .solution-choice h2{font-size:20px}.page-faq .faq-content{margin-top:28px}
  .page-contact .support-auth-gate{padding:24px 0}.page-contact .support-customer-main .support-card{padding:20px 0}
}
@media(max-width:380px){
  .mk-actions .button{padding-inline:14px}
  .mk-chip{padding-inline:9px;font-size:11px}
}