/* Two expansive demo previews per row keep differences legible before selection. */
.question-7,.question-8{max-width:1240px}.question-7 .question-body,.question-8 .question-body{margin-left:0}.question-7 .question-heading,.question-8 .question-heading{max-width:850px}.visual-picker{margin-top:35px}.style-recommendation{display:flex;align-items:center;gap:22px;width:100%;padding:24px 28px;border:1px solid #d0d8c7;border-radius:18px;text-align:left;margin-bottom:32px;background:#f0f2e9}.style-recommendation>span{font-size:32px;color:#8b9c71}.style-recommendation strong{display:block;font-size:16px;font-weight:550}.style-recommendation small{display:block;font-size:12px;color:#7d8c70;margin-top:8px;line-height:1.7}.style-recommendation>b{margin-left:auto;font-size:25px;font-weight:400}.style-recommendation.selected{border-color:#7e9266;background:#e8eddf;box-shadow:0 0 0 3px #a4b38d22}.visual-catalog{display:grid;grid-template-columns:1fr 1fr;gap:30px}.visual-card{background:#fffef9;border:1px solid #dde1d4;border-radius:20px;overflow:hidden;box-shadow:0 8px 30px #27361d05;transition:border-color .2s,box-shadow .2s}.visual-card.selected{border-color:#849d68;box-shadow:0 0 0 3px #91a67633}.visual-thumbnail{display:block;position:relative;width:100%;padding:12px 12px 0;text-align:left;background:#e9e9df}.mini-browser{display:flex;align-items:center;gap:4px;height:24px;padding:0 10px;background:#fff9;border-radius:7px 7px 0 0}.mini-browser i{width:4px;height:4px;border-radius:50%;background:#c6c9bd}.mini-browser>span{margin-left:auto;font-size:7px;color:#939b86;letter-spacing:1px}.thumbnail-viewport{display:block;position:relative;width:100%;height:350px;overflow:hidden;background:#eee}.thumbnail-viewport iframe{position:absolute;left:0;top:0;border:0;transform-origin:top left;pointer-events:none}.thumbnail-open{position:absolute;bottom:15px;right:24px;background:#fbfaf0ee;backdrop-filter:blur(12px);border:1px solid #fff8;border-radius:25px;padding:10px 15px;font-size:10px;box-shadow:0 5px 20px #0001;color:#37402e}.visual-thumbnail:hover .thumbnail-open{background:#283323;color:#fff}.visual-card-copy{padding:24px}.visual-card-copy>div{display:flex;align-items:center;gap:15px}.visual-card-index{font-family:Georgia,serif;color:#9da88e;font-size:14px;align-self:flex-start;padding-top:5px}.visual-card-copy h2{font-size:25px;letter-spacing:-.8px;font-weight:500;margin:0}.visual-card-copy h2 small{display:block;font-family:Montserrat,sans-serif;letter-spacing:0;font-size:11px;color:#7c896f;margin-top:6px}.visual-card-copy p{font-size:12px;line-height:1.8;margin:20px 0 10px;color:#59684e}.visual-card-copy>small{font-size:10px;color:#95a186}.choose-style{font-size:11px;padding:10px 16px;border:1px solid #ced6c3;border-radius:25px;margin-left:auto;white-space:nowrap}.choose-style[aria-pressed=true]{background:#293823;color:#fff;border-color:#293823}.visual-picker>.j-help{padding:25px 0 0}.style-dialog{width:min(1350px,96vw);height:94dvh;max-height:94dvh;max-width:96vw;border:1px solid #c7d1bc;border-radius:22px;padding:0;background:#efefe7;color:#273322;box-shadow:0 25px 100px #0004}.style-dialog::backdrop{background:#101b14bb;backdrop-filter:blur(7px)}.style-dialog[open]{display:flex;flex-direction:column}.style-dialog-head{display:flex;justify-content:space-between;align-items:center;padding:20px 30px;gap:20px}.style-dialog-head span{font-size:8px;letter-spacing:1.5px;color:#7b896d}.style-dialog-head h2{font-size:28px;margin:5px 0 0;font-weight:500}.style-dialog-head>div:last-child{display:flex;gap:13px}.style-dialog-head button{border:1px solid #bdc9b0;border-radius:50%;width:38px;height:38px;font-size:19px}.style-dialog-body{flex:1;min-height:0;background:#dce0d3;display:flex;justify-content:center}.style-dialog-body iframe{border:0;width:100%;height:100%;background:#fff;transition:width .35s}.style-dialog-body.phone-demo iframe{width:min(390px,100%)}.style-dialog footer{display:flex;align-items:center;justify-content:space-between;padding:17px 30px;gap:25px}.style-dialog footer p{font-size:12px;line-height:1.7}.style-dialog footer small{display:block;font-size:10px;color:#7e8c72}.style-dialog .j-primary{padding:15px 24px;font-size:12px;min-height:48px}
.question-8>.question-body>.j-field,.question-8>.question-body>.j-more{max-width:760px;margin-left:60px}.motion-picker{margin-top:55px;border-top:1px solid #dbe1d2;padding-top:40px}.motion-heading{display:flex;align-items:center;justify-content:space-between;gap:30px}.motion-heading h2{font-size:28px;letter-spacing:-1px;font-weight:500;margin:0 0 15px}.motion-heading p{font-size:13px;color:#829374;line-height:1.9;max-width:700px}.motion-master{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:11px}.motion-master input,.effect-card input{accent-color:#738d59;width:18px;height:18px;flex-shrink:0}.motion-mode{display:flex;gap:12px;margin:28px 0}.motion-mode button{padding:13px 20px;border:1px solid #c5cfb9;border-radius:30px;font-size:11px}.motion-mode button[aria-pressed=true]{background:#283323;color:#fff}.effect-catalog{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.effect-card{border:1px solid #d7decd;background:#fffdf8;border-radius:17px;overflow:hidden}.effect-card.selected{border-color:#8c9f78}.effect-card>label{display:flex;align-items:flex-start;gap:12px;padding:20px;cursor:pointer}.effect-card strong{font-size:13px;font-weight:550;display:block}.effect-card small{display:block;font-size:11px;line-height:1.9;color:#879479;margin-top:8px}.effect-demo{position:relative;height:205px;overflow:hidden;perspective:700px;background:#1c2921;color:#e9ebdd;isolation:isolate;cursor:crosshair}.effect-demo-grid{position:absolute;inset:0;background-image:linear-gradient(#b8cba612 1px,transparent 1px),linear-gradient(90deg,#b8cba612 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(#000,transparent)}.demo-object{position:absolute;width:90px;height:110px;left:calc(50% - 45px);top:38px;border:22px solid;border-color:#e8dfbc #acb08a #687655 #f7eacb;border-radius:44%;transform:rotate(-25deg);box-shadow:15px 20px 22px #0005}.demo-object i{position:absolute;width:32px;height:32px;background:radial-gradient(circle at 25% 20%,#ffeacf,#e8a16b 25%,#984c2f 80%);border-radius:50%;right:-45px;top:10px}.demo-object b{position:absolute;inset:-13px;border:1px solid #efad71;border-radius:44%}.demo-caption{position:absolute;bottom:15px;left:15px;right:15px;text-align:center;font-size:8px;letter-spacing:.7px;color:#a9b89a}.demo-lines{display:none;position:absolute;left:20%;right:20%;top:50px}.demo-lines i{display:block;background:#cbd4b5;border-radius:6px;width:100%;height:22px;margin-bottom:13px}.demo-lines i:nth-child(2){width:75%;background:#98ab7a}.demo-lines i:nth-child(3){width:50%;background:#e4a577}.demo-action{display:none}.demo-float .demo-object{animation:demo-float 4s ease-in-out infinite}.demo-tilt .demo-object{transform:rotateX(var(--demo-y,8deg)) rotateY(var(--demo-x,-20deg)) rotateZ(-18deg);transition:transform .2s}.demo-reveal .demo-object{display:none}.demo-reveal .demo-lines{display:block}.demo-reveal .demo-lines i{animation:demo-reveal 5s ease infinite;animation-delay:calc(var(--i,0)*.3s)}.demo-reveal .demo-lines i:nth-child(2){--i:1}.demo-reveal .demo-lines i:nth-child(3){--i:2}.demo-parallax .demo-object{animation:demo-parallax 5s ease-in-out infinite}.demo-parallax .effect-demo-grid{animation:demo-float 5s ease-in-out infinite}.demo-spotlight:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--spot-x,50%) var(--spot-y,40%),#fff9,transparent 48%);mix-blend-mode:soft-light}.demo-magnetic .demo-object{display:none}.demo-magnetic .demo-action{display:block;position:absolute;left:calc(50% - 70px);top:75px;width:140px;padding:15px;text-align:center;background:#e5aa7a;color:#263322;border-radius:40px;font-size:12px;transform:translate(var(--mag-x,0),var(--mag-y,0));transition:transform .2s}.effects-disabled{opacity:.5}.effects-disabled *{animation:none!important}.motion-intensity{margin:25px 0;display:flex;gap:25px;align-items:center;font-size:12px}.motion-intensity select{background:#fffdf8;border:1px solid #ccd6c0;border-radius:10px;padding:13px;font:inherit;color:#3f5034}.motion-picker>.j-help{max-width:800px}.effect-demo:focus-visible{outline:3px solid #ef9e74;outline-offset:-5px}
@keyframes demo-float{50%{translate:0 -12px}}@keyframes demo-reveal{0%,15%,100%{opacity:0;translate:0 12px}35%,80%{opacity:1;translate:0}}@keyframes demo-parallax{50%{translate:0 22px}}
@media(max-width:900px){.effect-catalog{grid-template-columns:1fr 1fr}.visual-card-copy>div{gap:8px}.visual-card-index{display:none}.visual-card-copy{padding:18px}.visual-card-copy h2{font-size:22px}.choose-style{padding:9px 12px;font-size:10px}.motion-heading{display:block}.motion-master{margin-top:20px}.style-dialog{height:95dvh}}
@media(max-width:700px){.visual-catalog{grid-template-columns:1fr;gap:24px}.style-recommendation{padding:20px;gap:15px}.style-recommendation strong{font-size:13px}.style-recommendation small{font-size:11px}.visual-card-copy h2{font-size:26px}.visual-card-copy{padding:22px}.visual-card-copy p{font-size:12px}.thumbnail-open{font-size:9px}.question-8>.question-body>.j-field,.question-8>.question-body>.j-more{margin-left:0}.effect-catalog{grid-template-columns:1fr}.effect-demo{height:215px}.motion-heading h2{font-size:25px}.motion-mode{flex-direction:column}.motion-intensity{align-items:stretch;flex-direction:column;gap:12px}.style-dialog{max-width:100vw;width:100vw;border-radius:0;height:100dvh;max-height:100dvh}.style-dialog-head{padding:13px 17px;gap:12px}.style-dialog-head h2{font-size:23px}.style-dialog-head span{font-size:6px}.style-dialog-head button{width:30px;height:30px;font-size:15px}.style-dialog-head>div:last-child{gap:7px}.style-dialog footer{padding:14px 17px;gap:12px}.style-dialog footer p{display:none}.style-dialog .j-primary{width:100%;justify-content:space-between}.effect-card strong{font-size:15px}.effect-card small{font-size:12px}}
@media(prefers-reduced-motion:reduce){.visual-picker *,.motion-picker *,.style-dialog *{animation:none!important;transition:none!important}.demo-reveal .demo-lines i{opacity:1;translate:none}}

.result-rationale{margin:0 0 25px;padding:18px 23px;border:1px solid #d6ddcc;border-radius:14px;max-width:900px}.result-rationale summary{font-size:12px;cursor:pointer;color:#687c57}.result-rationale p{font-size:13px;line-height:1.9;margin-top:15px;color:#637658}

.advanced-visual-link{grid-column:1/-1;display:flex;justify-content:space-between;padding:18px 22px;border:1px solid #c6d2ba;border-radius:12px;font-size:13px;color:#647956;background:#f3f6ec}

/* Finished art boards preserve typography and image framing at any card width. */
.visual-thumbnail{padding:0;background:#eeece3;overflow:hidden}.design-cover{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;transition:transform .55s ease}.visual-thumbnail:hover .design-cover{transform:scale(1.025)}.visual-thumbnail:focus-visible{outline:3px solid #a15b33;outline-offset:-4px}.thumbnail-open{bottom:16px;right:16px;font-size:11px}.style-concept{flex:1;min-height:0;overflow:auto;background:#dce0d3;text-align:center}.style-concept img{display:block;width:100%;height:auto;margin:auto;max-width:1200px}.preview-mode{display:flex;align-items:center;gap:10px;padding:0 30px 15px}.preview-mode button{padding:10px 16px;border:1px solid #bdc9b0;border-radius:24px;font-size:11px}.preview-mode button[aria-pressed=true]{background:#283323;color:#fff}.preview-mode>span{margin-left:auto;font-size:10px;color:#7b896d}.style-dialog [hidden]{display:none!important}@media(max-width:700px){.preview-mode{padding:0 17px 13px;gap:6px}.preview-mode button{font-size:10px;padding:9px 12px}.preview-mode>span{display:none}.style-concept{display:flex;align-items:center}.style-concept img{flex-shrink:0}}