/* MotionHouse page: extras on top of the AdsHouse dark wizard styles. */
.mh .mh-types{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.mh .mh-types .thumb{aspect-ratio:4/3;overflow:hidden;display:block}
.mh .mh-types .thumb svg{display:block;width:100%;height:100%}
.mh .ad-thumb svg{display:block;width:100%;height:100%;border-radius:8px}
.mh .mh-auto{display:inline-flex;margin-bottom:6px}
.mh-colors{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;transition:opacity .2s ease}
.mh-colors.off{opacity:.35;pointer-events:none}
.mh-color{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);cursor:pointer}
.mh-color input[type=color]{flex:none;width:42px;height:42px;padding:0;border:0;border-radius:10px;background:none;cursor:pointer}
.mh-color input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.mh-color input[type=color]::-webkit-color-swatch{border:1px solid rgba(255,255,255,.25);border-radius:10px}
.mh-color input[type=color]::-moz-color-swatch{border:1px solid rgba(255,255,255,.25);border-radius:10px}
.mh-color b{display:block;font-size:13px;color:#fff}
.mh-color small{display:block;font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:#AFA8C6}
.mh-swatches{display:flex;gap:6px;align-items:center;margin-top:4px}
.mh-swatches i{width:22px;height:22px;border-radius:7px;border:1px solid rgba(255,255,255,.2)}
.mh-swatches .auto{font-size:11px;color:#AFA8C6}
.mh-summary{display:grid;gap:6px}
.mh-summary .srow{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);font-size:13px}
.mh-summary .srow .k{color:#AFA8C6;font-weight:700}
.mh-summary .srow .v{color:#F1EEFA;overflow-wrap:anywhere}
.mh-summary .srow.bad{border-color:rgba(255,107,107,.5);background:rgba(255,107,107,.08)}
.mh-summary .srow.bad .v{color:#FFB3B3}
.mh .copybig .after{display:grid;gap:8px;margin-top:14px}
.mh-hero-art{position:relative;min-height:300px}
.mh-frame{position:absolute;width:150px;aspect-ratio:9/16;border-radius:18px;padding:16px 12px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;color:#fff;font-family:Manrope,Arial,sans-serif;background:radial-gradient(70% 50% at 50% 25%,rgba(107,1,248,.55),transparent 70%),#0D0B14;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px rgba(0,0,0,.5)}
.mh-frame b{font-size:17px;line-height:1.05;letter-spacing:-.03em;font-weight:800}
.mh-frame em{font-style:normal;color:#C4B5FD}
.mh-frame i{font-style:normal;font-size:11.5px;color:#B9B3CC;line-height:1.3}
.mh-frame .k{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--fl-accent);padding:3px 8px;border-radius:99px}
.mh-frame strong{font-size:44px;line-height:1;font-weight:800;letter-spacing:-.05em;color:#C4B5FD}
.mh-frame.f1{left:4%;top:30px;transform:rotate(-7deg)}
.mh-frame.f2{left:50%;top:0;margin-left:-75px;z-index:2;width:165px}
.mh-frame.f3{right:4%;top:30px;transform:rotate(7deg)}
.mh-dialog{width:min(760px,calc(100% - 28px));max-height:calc(100% - 40px);padding:22px;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:#16131F;color:#F1EEFA;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.mh-dialog::backdrop{background:rgba(8,6,14,.7);backdrop-filter:blur(6px)}
.mh-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mh-dialog h3{margin:0;font-size:20px}
.mh-dialog p{margin:6px 0 12px;color:#AFA8C6;font-size:13px}
.mh-dialog pre{margin:0;max-height:55vh;overflow:auto;white-space:pre-wrap;padding:14px;border-radius:12px;background:#0D0B14;border:1px solid rgba(255,255,255,.1);font:12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:#E9E4FF}
.mh-dialog footer{margin-top:14px;display:flex;justify-content:flex-end}
.mh-dialog footer .btn-copy{width:auto;padding-inline:22px}
@media(max-width:900px){.mh-hero-art{display:none}}
@media(max-width:560px){.mh-summary .srow{grid-template-columns:minmax(0,1fr) auto}.mh-summary .srow .k{grid-column:1/-1}}
.mh .tip-line{margin:0 0 12px;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.5;color:#D9D3EC;background:rgba(107,1,248,.12);border:1px solid rgba(167,139,250,.25)}
.mh .tip-line a{color:#C4B5FD;font-weight:700}
.mh .tip-line[hidden],.mh [data-show-if][hidden]{display:none}
.mh .req-tag{font-size:11.5px;font-weight:700;color:#FFB3B3}
.mh textarea.script.vo{min-height:170px}
.mh label .opt-tag[hidden],.mh label .req[hidden]{display:none}
/* v2: looks, voices, hero frames */
.mh-frame.img{padding:0;overflow:hidden;background:#0D0B14}
.mh-frame.img img{width:100%;height:100%;object-fit:cover;display:block}
.mh-typebar{display:flex;flex-wrap:wrap;gap:8px}
.mh-type{position:relative;cursor:pointer}
.mh-type input{position:absolute;opacity:0;pointer-events:none}
.mh-type .box{display:inline-flex;align-items:center;gap:9px;padding:10px 14px 10px 11px;border-radius:14px;border:1.5px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#E9E4FF;font-size:14px;transition:border-color .15s ease,background .15s ease}
.mh-type svg{width:22px;height:22px;flex:none;fill:rgba(255,255,255,.55)}
.mh-type svg .a{fill:#8B5CF6}
.mh-type b{font-weight:700}
.mh-type:hover .box{border-color:rgba(167,139,250,.5)}
.mh-type input:checked+.box{border-color:#8B5CF6;background:rgba(139,92,246,.16);color:#fff}
.mh-type input:checked+.box svg{fill:#fff}
.mh-type input:focus-visible+.box{outline:2px solid #C4B5FD;outline-offset:2px}
#fld_type .hint[data-show-if]{margin-top:8px}
.lbl-note{display:block;font-weight:500;font-size:12.5px;color:#AFA8C6;margin-top:3px;letter-spacing:0;text-transform:none}
.mh-looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:12px}
.mh-look{position:relative;cursor:pointer}
.mh-look input{position:absolute;opacity:0;pointer-events:none}
.mh-look .box{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;border:2px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);transition:border-color .15s ease}
.mh-look .vid{position:relative;display:block;aspect-ratio:9/16;background:#0D0B14;overflow:hidden}
.mh-look video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mh-look .ex{position:absolute;left:8px;bottom:8px;right:48px;font-size:11px;font-weight:700;color:#fff;background:rgba(10,8,18,.82);box-shadow:0 2px 8px rgba(0,0,0,.25);backdrop-filter:blur(6px);padding:4px 8px;border-radius:99px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-sound{position:absolute;right:8px;bottom:8px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(10,8,18,.82);backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.mh-sound .ico{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.mh-sound .on{display:none}.mh-sound.on .on{display:block}.mh-sound.on .off{display:none}
.mh-sound.on{background:#8B5CF6;border-color:#8B5CF6}
.mh-look .txt{padding:9px 10px 10px;display:grid;gap:2px}
.mh-look .txt b{font-size:14px;color:#fff}
.mh-look .txt small{font-size:11.5px;color:#AFA8C6;line-height:1.3}
.mh-look:hover .box{border-color:rgba(167,139,250,.5)}
.mh-look input:checked+.box{border-color:#8B5CF6;box-shadow:0 0 0 3px rgba(139,92,246,.25)}
.mh-look input:focus-visible+.box{outline:2px solid #C4B5FD;outline-offset:2px}
.mh-look .auto-art{display:grid;place-items:center;background:radial-gradient(60% 45% at 50% 40%,rgba(107,1,248,.35),transparent),#15121F}
.mh-look .auto-art .ico{width:40px;height:40px;color:#C4B5FD}
/* "Pick for me": a slim bar under the samples */
.mh-look.pick-auto{grid-column:1/-1}
.mh-look.pick-auto .box{flex-direction:row;align-items:center}
.mh-look.pick-auto .vid{aspect-ratio:auto;width:64px;height:64px;flex:none;border-radius:12px;margin:8px}
.mh-look.pick-auto .vid .ico{width:28px;height:28px}
#railThumb img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:560px){.mh-looks{grid-template-columns:1fr 1fr}.mh-type .box{font-size:13px;padding:9px 12px 9px 10px}}
.mh-voices{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:8px}
.mh-voice{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);cursor:pointer}
.mh-voice input{accent-color:#8B5CF6;flex:none}
.mh-voice span{display:grid;gap:1px;flex:1;min-width:0}
.mh-voice b{font-size:13.5px;color:#fff}
.mh-voice small{font-size:12px;color:#AFA8C6}
.mh-voice:has(input:checked){border-color:#8B5CF6;background:rgba(139,92,246,.12)}
.mh-play{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center;cursor:pointer}
.mh-play .ico{width:14px;height:14px}
.mh-play.on{background:#8B5CF6;border-color:#8B5CF6}

/* ---------- Frameland fixes, 9 November 2026 ---------- */
/* Look labels: a solid chip that stays readable on light samples and wraps instead of clipping
   (the generic .ex example-box style from the tools stylesheet used to override it). */
.mh .mh-look .ex{background:rgba(10,8,18,.88);border:0;color:#fff;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;padding:5px 9px;border-radius:10px;right:46px;font-size:11.5px;font-weight:700;margin:0}
/* Look cards keep the same height whatever the description length. */
.mh .mh-look .txt{min-height:64px;align-content:start}
/* Formats: four across, two by two on tablets, one column on phones. */
.mh #fld_formats .choices{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.mh #fld_formats .choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.mh #fld_formats .choices{grid-template-columns:minmax(0,1fr)}}
/* Video types: equal-width buttons that line up in a grid. */
.mh .mh-typebar{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
.mh .mh-type .box{display:flex;width:100%;height:100%}
/* Summary thumbnail: show the middle of the sample, where the words are. */
.mh .ad-thumb img{object-position:50% 50%}

/* ---------- Phase 3: MotionHouse works like AdsHouse (11 November 2026) ---------- */
/* Sample player button over the hero art (the AdsHouse tour pill). */
.mh .mh-tour-btn{position:absolute;inset:0;z-index:4;border:0;background:none;padding:0;cursor:pointer}
.mh .mh-tour-btn .tour-pill{left:10px;bottom:10px}
.mh .mh-tour-btn:hover .tour-pill{background:rgba(14,11,44,.82);transform:translateY(-1px)}
.mh .mh-tour-btn:focus-visible{outline:3px solid var(--fl-accent-light);outline-offset:4px;border-radius:16px}
.mh .hero-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.mh .hero-links .linkish{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* MotionHouse Preview picture on the start page. */
.mh .mh-preview-shot{margin:0}
.mh .mh-preview-shot img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid rgba(255,255,255,.1)}

/* Picture-style choice cards for voice-over, pace, background, music and effects. */
.mh .choices.mh-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.mh .choices.mh-cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.mh .choices.mh-cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.mh .choices.mh-cards.one{grid-template-columns:minmax(0,1fr)}
@media(max-width:900px){.mh .choices.mh-cards.three,.mh .choices.mh-cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.mh .choices.mh-cards,.mh .choices.mh-cards.three,.mh .choices.mh-cards.four{grid-template-columns:minmax(0,1fr)}}
.mh .mh-cards .choice .box{height:100%}
.mh .mh-swatch .badge.sw{border:1px solid rgba(255,255,255,.18)}
.mh .mh-swatch .badge.sw.look{background:linear-gradient(135deg,#1b1826 0 48%,#f3c15a 48% 56%,#6b01f8 56%)}
.mh .mh-swatch .badge.sw.dark{background:#0d0b14}
.mh .mh-swatch .badge.sw.light{background:#f6f4ee}
.mh .mh-swatch .badge.sw.brand{background:var(--mh-brand-bg,#0d0b14)}

/* "How Claude will read it" under Words on screen. */
.mh .mh-read{margin-top:14px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.03);padding:12px 14px;display:grid;gap:10px}
.mh .mh-read-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;font-size:13px;color:#A9A3BF}
.mh .mh-read-head b{color:#F1EEFA;font-size:14px}
.mh .mh-read-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mh .mh-read-list li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:4px 10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.04);font-size:14px;color:#E9E4FF}
.mh .mh-read-list .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(185,166,255,.16);color:#E9E4FF;font-size:12px;font-weight:700}
.mh .mh-read-list .t{min-width:0;overflow-wrap:anywhere}
.mh .mh-read-list .s{font-size:12px;color:#A9A3BF;font-variant-numeric:tabular-nums;white-space:nowrap}
.mh .mh-read-list .w{grid-column:2/-1;font-size:12px;color:#F3C15A}
.mh .mh-read-list li.long{background:rgba(243,193,90,.07)}
.mh .mh-read-list li.end .n{background:rgba(107,1,248,.35)}
.mh .compare{margin-top:12px}

/* Summary card: format chips like AdsHouse's hook chips. */
.mh .mh-fmt{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.mh .mh-fmt .blk{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;background:rgba(185,166,255,.16);color:#E9E4FF;font-size:12px;font-weight:700}

/* Sample player dialog. */
.mh-tour{width:min(820px,calc(100% - 32px))}
.mh-tour .mh-tour-body{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:16px;align-items:start;margin:14px 0 10px}
.mh-tour video{width:100%;aspect-ratio:9/16;border-radius:12px;background:#0d0b14;display:block}
.mh-tour .mh-tour-looks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mh-tour .mh-tour-looks button{display:grid;gap:5px;padding:0;border:2px solid transparent;border-radius:12px;background:none;color:inherit;font:inherit;font-size:12px;font-weight:700;cursor:pointer;text-align:center}
.mh-tour .mh-tour-looks button[aria-pressed="true"]{border-color:var(--fl-accent-light)}
.mh-tour .mh-tour-looks img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:10px;display:block}
@media(max-width:640px){.mh-tour .mh-tour-body{grid-template-columns:minmax(0,1fr)}.mh-tour video{max-height:60vh;width:auto;margin:0 auto}}
.ah-setup .mh-optional{font-size:13px}