/* SESAME public site. The kits' inline styles as named classes: mk-* marketing, au-* auth, rq-* request form.
   Tokens and .ss-* components live in css/ds and are copied unchanged from the design system. */

/* Base */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg-page);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%}
a{color:var(--text-primary);text-decoration:none}
a:hover{color:var(--pink-600)}
a.ss-btn:hover{color:inherit}
a.ss-btn--primary,a.ss-btn--primary:hover,a.ss-btn--secondary,a.ss-btn--secondary:hover{color:#fff}
a:focus-visible,button:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:300;background:var(--ink-900);color:#fff;padding:8px 12px;border-radius:var(--radius-2);font:600 13px var(--font-body)}
.skip-link:focus{top:12px;color:#fff}
.mk-spacer{flex:1}
.mono-label{font:500 11px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}
.mk-link{color:var(--ink-700)}
.mk-link:hover{color:var(--text-primary)}
.mk-link--active{color:var(--text-primary);font-weight:600}

/* Checkbox tick shows only when checked (Checkbox.jsx renders the icon conditionally) */
.ss-check__box .ss-icon{visibility:hidden}
.ss-check--on .ss-check__box .ss-icon{visibility:visible}

/* Grey labelled image placeholder (Ph) */
.ph{background:var(--ink-100);display:grid;place-items:center;font:500 10px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);text-align:center}

/* Header */
.mk-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-default)}
.mk-header__in{max-width:1200px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:32px}
.mk-logo{display:flex;flex:none}
.mk-logo img{height:20px;width:auto;display:block}
.mk-logo--sm img{height:16px}
.mk-nav{display:flex;gap:24px;font-size:14px;font-weight:500}
.mk-header__examples{display:none;font-size:14px;font-weight:500}
@media(max-width:820px){.mk-nav{display:none!important}.mk-header__examples{display:block}.mk-header__request{display:none!important}}
@media(max-width:560px){.mk-header__in{gap:12px;padding:0 16px}.mk-header .mk-logo img{height:16px}}

/* Shared section pieces */
.mk-wrap{max-width:1200px;margin:0 auto;padding:96px 24px}
.mk-band--top{border-top:1px solid var(--border-default)}
.mk-band--card{background:var(--surface-card);border-top:1px solid var(--border-default);border-bottom:1px solid var(--border-default)}
.mk-eyebrow{font:500 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:14px}
.mk-kicker{display:flex;align-items:center;gap:10px;font:500 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.mk-h2{font:700 clamp(32px,4vw,48px)/1.05 var(--font-display);letter-spacing:-.03em;margin:0;text-wrap:balance}
.mk-h2--640{max-width:640px}
.mk-h2--620{max-width:620px}
@media(max-width:560px){.mk-wrap{padding:72px 16px}}

/* Hero */
.mk-hero{max-width:1200px;margin:0 auto;padding:72px 24px 96px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:56px;align-items:center}
.mk-hero__title{font:700 clamp(44px,6.4vw,84px)/1 var(--font-display);letter-spacing:-.035em;margin:20px 0 22px;text-wrap:balance}
.mk-hero__lede{font-size:18px;line-height:1.55;color:var(--ink-700);margin:0 0 32px;max-width:520px;text-wrap:pretty}
.mk-hero__form{display:flex;gap:8px;flex-wrap:wrap;max-width:560px}
.mk-grow{flex:1 1 260px}
.mk-hero__notes{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;font:500 11px var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary)}
@media(max-width:560px){.mk-hero{padding:48px 16px 72px;gap:40px}.mk-hero__form .ss-btn{width:100%}}

/* Hero build panel */
.mk-build-panel{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-2);box-shadow:var(--shadow-overlay);overflow:hidden;min-width:0}
.mk-build-panel__bar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border-default);font:500 11px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}
.mk-build-panel__domain{text-transform:none;letter-spacing:0;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mk-build{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:360px}
.mk-build__steps{list-style:none;margin:0;padding:16px;display:flex;flex-direction:column;gap:12px;border-right:1px solid var(--border-default);background:var(--ink-50)}
.mk-build__steps li{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--text-muted)}
.mk-build__steps li.is-done,.mk-build__steps li.is-current{color:var(--text-primary)}
.mk-build__steps li.is-current{font-weight:600}
.mk-build__mark{width:16px;display:inline-flex;color:var(--pink-600)}
.is-done .mk-build__mark{color:var(--success)}
.mk-build__dot{width:6px;height:6px;background:currentColor;margin:0 5px}
.mk-build__num{font:500 10px var(--font-mono);color:var(--text-muted)}
.mk-build__main{padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.mk-build__photo{height:150px;transition:background .4s}
.mk-build__photo.is-curated{background:var(--ink-200)}
.ss-ai__meta{color:var(--text-muted)}
.ss-ai__text.is-waiting{color:var(--text-muted)}
.mk-rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mk-room{border:1px solid var(--border-default);min-width:0}
.mk-room__ph{height:48px}
.mk-room__name{padding:6px 8px;font-size:12px;font-weight:600}
@media(max-width:560px){.mk-build{grid-template-columns:1fr}.mk-build__steps{display:none!important}}

/* How it works */
.mk-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;margin-top:48px;border-top:1px solid var(--ink-900)}
.mk-step{padding:24px 24px 0 0}
.mk-step__n{font:500 12px var(--font-mono);color:var(--pink-600)}
.mk-step__title{font:600 22px/1.2 var(--font-display);letter-spacing:-.015em;margin:12px 0 8px}
.mk-step__text{margin:0;font-size:15px;line-height:1.55;color:var(--text-secondary);max-width:340px}

/* Curator */
.mk-curator{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:56px}
.mk-curator__lede{font-size:17px;line-height:1.6;color:var(--ink-700);margin:20px 0 28px;max-width:460px}
.mk-settings{display:flex;flex-direction:column;gap:14px;padding:20px;border:1px solid var(--border-default);background:var(--bg-page);max-width:420px}
.mk-settings__title{font:600 13px var(--font-body)}
.mk-settings__langs{display:flex;gap:20px;flex-wrap:wrap}
.mk-curator__work{display:flex;flex-direction:column;gap:16px;min-width:0}
.mk-curator__list{display:flex;flex-direction:column;gap:16px}
.ss-ai__text[contenteditable="true"]{outline:1px dashed var(--ink-300);outline-offset:4px}
.mk-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mk-photo{position:relative;border:1px solid var(--border-default)}
.mk-photo__ph{aspect-ratio:4/3}
.mk-photo__pick{position:absolute;top:6px;left:6px}

/* Features */
.mk-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:48px}
.mk-feature__icon{color:var(--text-primary)}

/* Closing CTA */
.mk-cta{background:var(--ink-900);color:#fff}
.mk-cta__in{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-end;justify-content:space-between}
.mk-cta__title{color:#fff}
.mk-cta__text{color:var(--ink-300);font-size:17px;margin:16px 0 0}

/* Footer */
.mk-footer{border-top:1px solid var(--border-default)}
.mk-footer__in{max-width:1200px;margin:0 auto;padding:32px 24px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;font-size:13px;color:var(--text-secondary)}
.mk-footer__copy{font-family:var(--font-mono);font-size:11px}
@media(max-width:560px){.mk-footer__in{padding:28px 16px;gap:16px 20px}.mk-footer .mk-spacer{flex-basis:100%}}

/* Examples */
.mk-page-hero{max-width:1200px;margin:0 auto;padding:72px 24px 40px}
.mk-page-hero__title{font:700 clamp(40px,5.6vw,72px)/1.02 var(--font-display);letter-spacing:-.035em;margin:20px 0 18px;max-width:820px;text-wrap:balance}
.mk-page-hero__lede{font-size:18px;line-height:1.55;color:var(--ink-700);margin:0;max-width:560px}
.mk-examples{max-width:1200px;margin:0 auto;padding:24px 24px 96px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:40px}
@media(max-width:560px){.mk-page-hero{padding:48px 16px 32px}.mk-examples{padding:16px 16px 72px}}
.mk-example{display:flex;flex-direction:column;gap:16px;min-width:0}
.mk-ex{position:relative}
.mk-ex__hit{position:absolute;inset:0;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:var(--radius-2)}
.mk-chrome{border:1px solid var(--border-default);background:var(--surface-card);border-radius:var(--radius-2);overflow:hidden;transition:border-color var(--dur-fast) var(--ease-out)}
.mk-ex:hover .mk-chrome,.mk-ex:focus-within .mk-chrome{border-color:var(--ink-900)}
.mk-chrome__bar{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-bottom:1px solid var(--border-default);background:var(--ink-50)}
.mk-chrome__dots{display:flex;gap:5px}
.mk-chrome__dots span{width:8px;height:8px;background:var(--ink-300)}
.mk-chrome__host{flex:1;text-align:center;font:400 11px var(--font-mono);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-frame{position:relative;width:100%;aspect-ratio:1440/900;overflow:hidden;background:var(--ink-100)}
.mk-frame__loading{position:absolute;inset:0;display:grid;place-items:center;font:500 10px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}
.mk-frame iframe{position:absolute;top:0;left:0;width:1440px;height:900px;border:0;transform:scale(var(--scale,.4));transform-origin:0 0;pointer-events:none;background:transparent}
.mk-example__meta{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.mk-example__info{flex:1 1 220px;min-width:0}
.mk-example__head{display:flex;align-items:center;gap:8px}
.mk-example__name{font:600 22px/1.2 var(--font-display);letter-spacing:-.015em;margin:0}
.mk-example__host{font:400 12px var(--font-mono);color:var(--text-secondary);margin-top:6px}
.mk-example__note{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--ink-700)}
.mk-example__actions{display:flex;gap:8px}

/* Examples viewer */
.mk-viewer{position:fixed;inset:0;z-index:150;background:rgba(20,20,24,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;padding:24px}
.mk-viewer__panel{flex:1;display:flex;flex-direction:column;background:var(--bg-page);border:1px solid var(--border-default);border-radius:var(--radius-2);box-shadow:var(--shadow-overlay);overflow:hidden;animation:ss-rise var(--dur-base) var(--ease-out);min-width:0}
.mk-viewer__bar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border-default);background:var(--surface-card);flex-wrap:wrap}
.mk-viewer__name{font:600 16px var(--font-display)}
.mk-viewer__host{font:400 12px var(--font-mono);color:var(--text-secondary)}
.mk-viewer__stage{flex:1;display:flex;justify-content:center;padding:0;background:var(--ink-100);min-height:0}
.mk-viewer__stage.is-device{padding:20px}
.mk-viewer__stage iframe{width:100%;max-width:100%;height:100%;border:0;background:#fff;transition:width .3s var(--ease-out)}
.mk-viewer__stage.is-device iframe{box-shadow:var(--shadow-overlay)}
body.is-locked{overflow:hidden}
@media(max-width:560px){.mk-viewer{padding:8px}.mk-viewer__bar{gap:8px;padding:8px 10px}.mk-viewer__host{display:none}}

/* Toasts */
.mk-toasts{position:fixed;right:24px;bottom:24px;z-index:200;display:flex;flex-direction:column;gap:8px}
.mk-toasts:empty{display:none}
a.ss-toast__action{display:inline-block;color:#fff}
a.ss-toast__action:hover{color:var(--pink-200)}
@media(max-width:560px){.mk-toasts{left:16px;right:16px;bottom:16px}.mk-toasts .ss-toast{width:100%}}

/* Prose pages: privacy, terms, errors */
.mk-prose{max-width:720px;margin:0 auto;padding:72px 24px 96px;font-size:16px;line-height:1.65;color:var(--ink-700)}
.mk-prose__title{font:700 clamp(36px,4.6vw,56px)/1.05 var(--font-display);letter-spacing:-.03em;margin:0 0 20px;color:var(--text-primary)}
@media(max-width:560px){.mk-prose{padding:48px 16px 72px}}

/* Auth layout (AuthLayout + Showcase in the app kit) */
.au{min-height:100vh;display:flex;background:var(--bg-page)}
.au__main{flex:1 1 0;min-width:0;display:flex;flex-direction:column;padding:28px clamp(16px,5vw,64px)}
.au__logo{align-self:flex-start}
.au__center{flex:1;display:grid;place-items:center;padding:40px 0}
.au__box{width:100%;max-width:400px}
.au__foot{font:400 12px var(--font-body);color:var(--text-secondary);display:flex;gap:16px}
.au-show{flex:1 1 0;background:var(--ink-900);color:#fff;display:flex;flex-direction:column;position:relative;overflow:hidden}
.au-show__in{flex:1;display:flex;flex-direction:column;justify-content:center;padding:48px clamp(32px,6vw,88px);gap:20px}
.au-show__label{color:var(--ink-400)}
.au-show__text{font:500 clamp(26px,2.6vw,38px)/1.2 var(--font-display);letter-spacing:-.02em;min-height:4.8em;max-width:560px}
.au-show__sub{font:400 14px var(--font-body);color:var(--ink-400)}
@media(max-width:900px){.au-show{display:none!important}}
.au-h{margin-bottom:28px}
.au-h__title{font:700 36px/1.08 var(--font-display);letter-spacing:-.03em;margin:10px 0}
.au-h__sub{margin:0;font-size:15px;line-height:1.55;color:var(--ink-700)}
.au-note{margin-top:28px;font-size:14px;color:var(--ink-700)}
.au-note a{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Request access form (RequestForm in the app kit) */
.rq{display:flex;flex-direction:column;gap:14px}
.rq__notice{display:flex;gap:10px;align-items:flex-start;padding:12px;background:var(--ink-50);border:1px solid var(--border-default);font-size:13px;line-height:1.5;color:var(--ink-700)}
.rq__notice strong{color:var(--text-primary)}
.rq__notice-icon{margin-top:2px;color:var(--text-primary)}
.rq__error{display:flex;gap:10px;align-items:flex-start;padding:12px;background:var(--danger-100);border:1px solid var(--danger);color:var(--danger-600);font-size:13px;line-height:1.5}
.rq__error .ss-icon{margin-top:2px}
.rq__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
.rq__optional{font-weight:400;color:var(--text-secondary)}
.rq__textarea{font:400 14px/1.5 var(--font-body);padding:12px;border:1px solid var(--border-strong);border-radius:var(--radius-2);resize:vertical;outline:0;background:#fff;color:var(--text-primary)}
.rq__textarea:hover{border-color:var(--ink-500)}
.rq__textarea:focus{border-color:var(--ink-900);box-shadow:0 0 0 3px var(--focus-ring)}
.rq__textarea::placeholder{color:var(--text-muted)}
.ss-field__hint--error:empty{display:none}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.rq-dialog{max-width:520px}
.rq-dialog .ss-dialog__body{color:var(--ink-700)}
@media(max-width:560px){.ss-dialog-scrim{padding:12px}.rq-dialog{max-height:calc(100vh - 24px)}}
.rq-done{display:flex;flex-direction:column;gap:12px;padding:8px 0}
.rq-done__icon{width:40px;height:40px;display:grid;place-items:center;background:var(--success-100);color:var(--success);border-radius:var(--radius-1)}
.rq-done__title{font:600 20px/1.2 var(--font-display);letter-spacing:-.01em;margin:0;color:var(--text-primary)}
.rq-done__text{margin:0;font-size:14px;line-height:1.55;color:var(--ink-700)}
.rq-done__again{align-self:flex-start}