/* DogLog listing study. Original screenshot pixels and app UI are preserved. */
.listing-studio{padding-top:90px;padding-bottom:28px;scroll-margin-top:30px}
.listing-studio .ls-heading{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:end;margin-bottom:58px}
.listing-studio .ls-heading h2{font-size:clamp(40px,4.3vw,61px);font-weight:500;letter-spacing:-2.8px;line-height:1.06;margin-top:19px;max-width:620px}
.listing-studio .ls-heading h2 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:#ac593e}
.listing-studio .ls-intro{font-size:15px;line-height:1.8;color:#62705e;max-width:450px}
.listing-studio .ls-concept-label{display:inline-flex;align-items:center;gap:9px;margin-top:20px;font-size:11px;color:#765c4b;letter-spacing:.2px}
.listing-studio .ls-concept-label:before{content:"";width:6px;height:6px;background:#b96043;border-radius:50%;flex:none}
.listing-studio .ls-subheading{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-top:25px;border-top:1px solid var(--line,#dfe2d8);margin-bottom:27px}
.listing-studio .ls-subheading h3{font-size:23px;line-height:1.2;letter-spacing:-.7px;font-weight:500}
.listing-studio .ls-number{display:block;font-size:10px;font-weight:600;letter-spacing:1.5px;color:#9b624a;margin-bottom:10px}

.listing-studio .ls-frame,.studio-hero .ls-frame{position:relative;container-type:inline-size;aspect-ratio:320/693;overflow:hidden;isolation:isolate;background:#f3eadd;border-radius:5px;color:#a33128}
.listing-studio .ls-frame:before,.studio-hero .ls-frame:before{content:"";position:absolute;left:-20%;bottom:-8%;width:140%;height:65%;background:#e4b29b;border-radius:50% 50% 0 0;z-index:-1;transform:rotate(-14deg)}
.listing-studio .ls-frame-activities,.studio-hero .ls-frame-activities{background:#e8eadd}
.listing-studio .ls-frame-activities:before,.studio-hero .ls-frame-activities:before{background:#d2d7bc;transform:rotate(14deg)}

.listing-studio .ls-frame-copy,.studio-hero .ls-frame-copy{position:relative;padding:7.5% 8% 0;z-index:1}
.listing-studio .ls-frame-brand,.studio-hero .ls-frame-brand{display:block;font-size:8px;font-size:2.5cqw;font-weight:700;letter-spacing:.2em;margin-bottom:3.5%}
.listing-studio .ls-compare-headline,.studio-hero .ls-hero-headline{display:block;margin:0;font-size:31px;font-size:9.7cqw;line-height:1.04;font-weight:700;letter-spacing:-.045em}
.listing-studio .ls-frame-copy p,.studio-hero .ls-frame-copy p{font-size:12px;font-size:3.75cqw;line-height:1.45;color:#634f42;margin-top:4%;max-width:95%}
.listing-studio .ls-ui-crop,.studio-hero .ls-ui-crop{position:absolute;width:74%;aspect-ratio:257/539;left:13%;bottom:3%;overflow:hidden;border-radius:16% / 8%;box-shadow:0 12px 22px #744c3424;background:#f6f6f4}
.listing-studio .ls-ui-crop img,.studio-hero .ls-ui-crop img{position:absolute;width:124.5136%;max-width:none;height:auto;left:-12.4514%;top:-28.5714%}
.listing-studio .ls-proposal-mark,.studio-hero .ls-proposal-mark{position:absolute;right:5%;top:47%;font-size:6px;font-size:1.9cqw;font-weight:600;letter-spacing:.17em;writing-mode:vertical-rl;color:#925e49;z-index:2}
.listing-studio .ls-comparison-note{font-size:11px;line-height:1.75;color:#6d7567;max-width:1016px;margin:21px auto 0}
.listing-studio .ls-comparison-note a{text-decoration:underline;text-underline-offset:3px}
.listing-studio .ls-rationale{display:grid;grid-template-columns:.8fr 1.2fr;gap:45px;margin-top:33px;padding:26px 0;border-top:1px solid var(--line,#dfe2d8);border-bottom:1px solid var(--line,#dfe2d8)}
.listing-studio .ls-rationale h4{font-size:19px;font-weight:500;line-height:1.4;letter-spacing:-.4px;max-width:330px}
.listing-studio .ls-rationale p{font-size:13px;line-height:1.8;color:#62705e;max-width:600px}
.listing-studio .ls-rationale strong{color:#3f5644;font-weight:600}
.listing-studio .ls-request-row{display:flex;align-items:center;gap:20px;margin-top:25px}
.listing-studio .ls-request-row p{font-size:12px;color:#68745f;line-height:1.6}
.listing-studio .ls-icon-section{margin-top:69px;scroll-margin-top:30px}
.listing-studio .ls-icon-section .ls-subheading{border-top:0;padding-top:0;align-items:flex-end}
.listing-studio .ls-icon-intro{font-size:13px;line-height:1.8;color:#62705e;max-width:420px}

/* A native range supplies pointer and keyboard behavior; the line is decorative. */
.listing-studio .ls-compare{--ls-original:50%;max-width:840px;margin-inline:auto}
.listing-studio .ls-compare.is-enhanced{max-width:320px}
.listing-studio .ls-compare-stage{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;isolation:isolate}
.listing-studio .ls-compare-stage figure{margin:0;min-width:0}
.listing-studio .ls-compare-stage figcaption{font-size:12px;color:#65705e;margin-top:12px;line-height:1.5}
.listing-studio .ls-compare-image{display:block;width:100%;height:auto;aspect-ratio:320/693;object-fit:contain}
.listing-studio .ls-compare-proposed .ls-ui-crop{width:80.3125%;left:10%;bottom:0;box-shadow:none}
.listing-studio .ls-compare.is-enhanced .ls-compare-stage{display:block;aspect-ratio:320/693;overflow:hidden;border-radius:7px;background:#eee6da;box-shadow:0 14px 40px -24px #77523c55}
.listing-studio .ls-compare.is-enhanced figure{position:absolute;inset:0;width:100%;height:100%}
.listing-studio .ls-compare.is-enhanced figcaption{display:none}
.listing-studio .ls-compare.is-enhanced .ls-compare-proposed{z-index:0}
.listing-studio .ls-compare.is-enhanced .ls-compare-proposed .ls-frame{width:100%;height:100%;border-radius:0}
.listing-studio .ls-compare.is-enhanced .ls-compare-original{z-index:1;clip-path:inset(0 calc(100% - var(--ls-original)) 0 0)}
.listing-studio .ls-compare-labels{display:flex;justify-content:space-between;gap:16px;margin-bottom:13px;font-size:12px;font-weight:550;color:#5f705b;line-height:1.4}
.listing-studio .ls-compare-labels span:last-child{text-align:right}
.listing-studio .ls-compare-divider{position:absolute;z-index:2;top:0;bottom:0;left:var(--ls-original);width:2px;transform:translateX(-1px);background:#fff;box-shadow:0 0 0 1px #263e3233;pointer-events:none}
.listing-studio .ls-compare-range{position:absolute;z-index:3;top:0;left:-22px;width:calc(100% + 44px);max-width:none;height:100%;margin:0;padding:0;border:0;border-radius:0;appearance:none;-webkit-appearance:none;background:transparent;color:transparent;cursor:ew-resize;touch-action:pan-y;outline-offset:-4px}
.listing-studio .ls-compare-range::-webkit-slider-runnable-track{width:100%;height:44px;background:transparent;border:0}
.listing-studio .ls-compare-range::-moz-range-track{width:100%;height:44px;background:transparent;border:0}
.listing-studio .ls-compare-range::-webkit-slider-thumb{box-sizing:border-box;appearance:none;-webkit-appearance:none;width:44px;height:44px;margin-top:0;border:2px solid #fff;border-radius:50%;background:#2b4738 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='m15 14-6 6 6 6m10-12 6 6-6 6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/32px 32px no-repeat;box-shadow:0 2px 9px #1d352b50;cursor:ew-resize;touch-action:none}
.listing-studio .ls-compare-range::-moz-range-thumb{box-sizing:border-box;width:44px;height:44px;border:2px solid #fff;border-radius:50%;background:#2b4738 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='m15 14-6 6 6 6m10-12 6 6-6 6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/32px 32px no-repeat;box-shadow:0 2px 9px #1d352b50;cursor:ew-resize;touch-action:none}
.listing-studio .ls-compare-range:focus-visible{outline:3px solid #ed784c}
.listing-studio .ls-compare-range:focus-visible::-webkit-slider-thumb{outline:3px solid #ed784c;outline-offset:3px}
.listing-studio .ls-compare-range:focus-visible::-moz-range-thumb{outline:3px solid #ed784c;outline-offset:3px}
.listing-studio .ls-compare-footer{margin-top:16px}
.listing-studio .ls-compare-footer p{font-size:12px;line-height:1.65;color:#63715e}
.listing-studio .ls-compare-status{display:block;margin-top:9px;font-size:11px;line-height:1.5;color:#7c6a56;font-variant-numeric:tabular-nums}
@media(max-width:680px){.listing-studio .ls-compare-stage{grid-template-columns:1fr;gap:27px}.listing-studio .ls-compare{max-width:400px}.listing-studio .ls-compare-labels{font-size:11px}}

/* Compact icon directions use the same listing context and keep focus on the chosen button. */
.listing-studio .ls-icon-section .ls-subheading{margin-bottom:20px}

.listing-studio .ls-icon-review-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}

.listing-studio .ls-icon-context-label{display:block;font-size:10px;font-weight:600;letter-spacing:.65px;text-transform:uppercase;color:#7e6953;margin-bottom:10px}
.listing-studio .ls-icon-listing{display:flex;align-items:center;gap:13px;min-height:48px}
.listing-studio .ls-icon-listing>img{flex:none;width:48px;height:48px;border-radius:11px;object-fit:contain}
.listing-studio .ls-icon-listing strong{display:block;font-size:14px;line-height:1.35;font-weight:600;color:#273f31}
.listing-studio .ls-icon-listing span{display:block;font-size:11px;color:#737c6a;margin-top:4px;line-height:1.4}

.listing-studio .ls-icon-rationale{font-size:12px;line-height:1.65;color:#68745f;margin-top:10px;max-width:420px}
.listing-studio .ls-icon-choices{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.listing-studio .ls-icon-choices:empty{display:none}
.listing-studio .ls-icon-choice{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:6px;border:1px solid #d4dccd;border-radius:8px;background:#fffef8;cursor:pointer}
.listing-studio .ls-icon-choice[aria-pressed="true"]{border:2px solid #42664a;background:#e9eee1;padding:5px}
.listing-studio .ls-icon-choice img{width:28px;height:28px;object-fit:contain;border-radius:6px}

.listing-studio .ls-icon-review-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--line,#dfe2d8);margin-top:20px;padding-top:10px}
.listing-studio .ls-icon-review-footer p{font-size:12px;color:#68745f;line-height:1.7}
.listing-studio .ls-icon-review-footer a{display:inline-flex;align-items:center;gap:12px;min-height:44px;flex:none;font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.listing-studio .ls-screenshot-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);max-width:1000px;margin-inline:auto;gap:50px;align-items:center}
.listing-studio .ls-screenshot-visual{min-width:0}
.listing-studio .ls-screenshot-aside .ls-rationale{display:block;margin-top:0;border-bottom:0;padding:24px 0 0}
.listing-studio .ls-screenshot-aside .ls-rationale p{margin-top:17px}
.listing-studio .ls-screenshot-aside .ls-request-row{flex-direction:column;align-items:flex-start;gap:12px}
.studio-hero .studio-hero-icons-label{display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:550;color:#576a50;margin-bottom:12px}
.studio-hero .studio-hero-icons-label span{font-size:17px;font-weight:400}
.studio-hero .studio-hero-icon-preview{display:flex;align-items:center;gap:12px}
.studio-hero .studio-hero-icon-preview img{width:48px;height:48px;border-radius:11px;flex:none}
.studio-hero .studio-hero-icon-preview strong{display:block;font-size:12px;font-weight:600;line-height:1.4;color:#415a42}
.studio-hero .studio-hero-icon-preview p{font-size:10px;line-height:1.5;color:#76806c;margin-top:4px}
@media(max-width:850px){.listing-studio .ls-screenshot-layout{gap:28px}}
@media(max-width:680px){.listing-studio .ls-icon-review-row{grid-template-columns:1fr;gap:23px}.listing-studio .ls-screenshot-layout{grid-template-columns:1fr;gap:27px}.listing-studio .ls-compare.is-enhanced{width:min(100%,320px)}.listing-studio .ls-icon-review-footer{flex-direction:column;align-items:flex-start;gap:5px}}

/* First-screen view of the same studio work; shared authentic-UI crop. */
.studio-hero{position:relative;min-width:0;height:570px;isolation:isolate}
.studio-hero .ls-frame{aspect-ratio:320/569}
.studio-hero .ls-ui-crop{width:61%;left:19.5%;bottom:0}
.studio-hero .studio-hero-surface{position:absolute;inset:24px 0 35px;background:#e9ecdf;border-radius:47% 46% 44% 48%;transform:rotate(-5deg);z-index:-1}
.studio-hero .studio-hero-shot{position:absolute;display:block;width:47%;top:38px;left:2%;padding:8px;background:#fffef8;border:1px solid #e4e1d7;border-radius:9px;box-shadow:0 19px 40px -20px #5d493b66;transform:rotate(-5deg)}
.studio-hero .studio-hero-shot-secondary{width:43%;left:auto;right:1%;top:85px;transform:rotate(5deg)}
.studio-hero .studio-hero-shot-label{display:block;font-size:9px;font-weight:600;padding:3px 3px 10px;color:#65715e;letter-spacing:.2px}
.studio-hero .studio-hero-shot:focus-visible,.studio-hero .studio-hero-icons:focus-visible{outline:3px solid var(--orange,#ed784c);outline-offset:6px}
.studio-hero .studio-hero-icons{position:absolute;bottom:37px;left:17%;right:9%;padding:16px 20px;border:1px solid #e3ddcf;border-radius:12px;background:#fffdf6;box-shadow:0 15px 35px -18px #634e3d55;transform:rotate(-2deg)}

.studio-hero .studio-hero-caption{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:10px;color:#6f7964;letter-spacing:.1px}

@media(max-width:1100px){.listing-studio .ls-heading{gap:35px}.studio-hero{height:520px}.studio-hero .studio-hero-shot{top:35px}.studio-hero .studio-hero-shot-secondary{top:78px}.studio-hero .studio-hero-icons{bottom:38px;left:12%;right:3%}}
@media(max-width:850px){.listing-studio{padding-top:65px}.listing-studio .ls-heading{grid-template-columns:1fr;gap:22px;margin-bottom:35px}.listing-studio .ls-heading h2{font-size:48px;max-width:590px}.listing-studio .ls-intro{max-width:590px;font-size:14px}.listing-studio .ls-concept-label{margin-top:13px}.listing-studio .ls-subheading h3{font-size:21px}.listing-studio .ls-rationale{gap:27px}.listing-studio .ls-icon-intro{max-width:340px}.studio-hero{height:475px}.studio-hero .studio-hero-shot{width:51%;left:0;top:38px}.studio-hero .studio-hero-shot-secondary{width:47%;left:auto;right:-1%;top:79px}.studio-hero .studio-hero-icons{bottom:30px;left:6%;right:0;padding:13px 15px}}
@media(max-width:680px){.listing-studio{padding-top:56px;padding-bottom:8px}.listing-studio .ls-heading h2{font-size:42px;letter-spacing:-2px}.listing-studio .ls-heading{margin-bottom:32px}.listing-studio .ls-subheading{align-items:flex-start;flex-direction:column;gap:20px}.listing-studio .ls-comparison-note{margin-top:14px}.listing-studio .ls-rationale{grid-template-columns:1fr;gap:13px;margin-top:25px;padding:24px 0}.listing-studio .ls-rationale h4{max-width:100%;font-size:20px}.listing-studio .ls-request-row{align-items:flex-start;flex-direction:column;gap:11px}.listing-studio .ls-request-row .button-primary,.listing-studio .ls-request-row .button-secondary{width:100%}.listing-studio .ls-icon-section{margin-top:51px}.listing-studio .ls-icon-section .ls-subheading{gap:15px}.listing-studio .ls-icon-intro{max-width:100%}.studio-hero{height:545px;width:min(100%,470px);margin:9px auto 5px}.studio-hero .studio-hero-shot{top:17px;width:48%;left:1%}.studio-hero .studio-hero-shot-secondary{top:58px;width:44%;left:auto;right:1%}.studio-hero .studio-hero-icons{bottom:34px;left:15%;right:5%;padding:15px 18px}.studio-hero .studio-hero-caption{font-size:10px}.studio-hero .studio-hero-surface{inset:15px 0 35px}}
@media(max-width:420px){.listing-studio .ls-heading h2{font-size:38px;letter-spacing:-1.8px}.studio-hero{height:480px}.studio-hero .studio-hero-icons{left:9%;right:2%;bottom:30px}.studio-hero .studio-hero-shot{width:51%;left:0}.studio-hero .studio-hero-shot-secondary{width:47%;right:0}}
@media(max-width:350px){.listing-studio .ls-heading h2{font-size:35px}.studio-hero{height:430px}.studio-hero .studio-hero-icons{left:6%;right:0;padding:13px 15px}.studio-hero .studio-hero-shot-label{font-size:8px;padding-bottom:7px}}
@media(prefers-reduced-motion:reduce){.listing-studio .button-primary,.listing-studio .button-secondary{transition:none;transform:none}}