.comparison-section{padding:100px 0 80px;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#60111622,transparent 62%);}
.comparison-heading{text-align:center;margin:0 auto 44px;max-width:850px;}
.comparison-eyebrow{text-transform:uppercase;color:#ff4949;font-size:10px;letter-spacing:.3em;font-weight:600;margin-bottom:16px;}
.comparison-heading .section-title{margin-bottom:16px;}
.comparison-heading h2 span{color:var(--red);}
.comparison-heading>p:last-child{font-size:15px;color:var(--muted);}
.comparison-laptop{width:100%;max-width:1010px;margin:auto;padding:0 38px;position:relative;}
.laptop-lid{position:relative;background:linear-gradient(135deg,#424247,#111114 20%,#242427 80%,#5a5a60);border:1px solid #74747c;border-radius:24px 24px 8px 8px;padding:22px 12px 0;box-shadow:0 0 0 2px #070709,0 0 70px #e0141422,0 25px 65px #000b;}
.laptop-camera{position:absolute;width:5px;height:5px;border-radius:50%;background:#121a27;box-shadow:0 0 0 2px #09090b;top:9px;left:50%;}
.ps-editor{background:#282828;border:1px solid #060606;border-radius:3px;overflow:hidden;font-family:Arial,sans-serif;color:#c6c6c6;font-size:9px;text-align:left;line-height:1.3;}
.ps-menu{height:25px;background:#242424;display:flex;align-items:center;gap:13px;padding:0 8px;white-space:nowrap;}
.ps-menu b{color:#55b4f9;font-size:14px;margin-right:5px;}
.ps-menu i{font-style:normal;margin-left:auto;color:#888;}
.ps-options{height:29px;display:flex;align-items:center;gap:15px;background:#363636;border-block:1px solid #191919;padding:0 10px;font-size:8px;white-space:nowrap;}
.ps-select{border:1px solid #555;border-radius:2px;padding:2px 7px;background:#292929;}
.ps-option-end{margin-left:auto;}
.ps-workspace{display:grid;grid-template-columns:30px minmax(0,1fr) 174px;height:490px;}
.ps-toolbar{background:#303030;border-right:1px solid #181818;display:flex;align-items:center;flex-direction:column;padding:8px 0;gap:9px;}
.ps-toolbar>span{display:grid;place-items:center;width:23px;height:22px;}
.ps-toolbar>span:first-child{background:#191919;border:1px solid #535353;border-radius:2px;}
.ps-toolbar svg{width:14px;height:14px;fill:none;stroke:#bbb;stroke-width:1.15;stroke-linejoin:round;}
.ps-swatches{position:relative;margin-top:10px;}
.ps-swatches:before,.ps-swatches:after{content:'';position:absolute;width:12px;height:12px;background:white;border:1px solid #aaa;top:7px;left:9px;}
.ps-swatches:after{background:#111;top:1px;left:3px;}
.ps-document{min-width:0;display:grid;grid-template-rows:27px minmax(0,1fr) 20px;}
.ps-document-tab{display:flex;align-items:center;gap:5px;background:#353535;border-bottom:1px solid #181818;font-size:8px;padding:0 10px;}
.ps-document-tab>span:last-child{margin-left:auto;}
.ps-artboard-area{display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;padding:16px;background:#1d1d1d;box-shadow:inset 0 0 25px #0003;}
.comparison-canvas{position:relative;height:100%;max-width:100%;aspect-ratio:4/5;background:#0a0907;box-shadow:0 2px 18px #0008;isolation:isolate;touch-action:pan-y;user-select:none;cursor:ew-resize;}
.comparison-canvas img{position:absolute;width:100%;height:100%;inset:0;display:block;object-fit:contain;pointer-events:none;user-select:none;}
.comparison-before{clip-path:inset(0 0 0 var(--reveal));}
.comparison-divider{position:absolute;left:var(--reveal);top:0;bottom:0;width:1px;background:#ffffffd9;pointer-events:none;opacity:1;}
.comparison-divider span{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#e01414;color:white;font:13px Arial;border:1px solid #fff7;box-shadow:0 2px 8px #0005;}
.comparison-canvas.is-endpoint .comparison-divider{opacity:0;}
.ps-status{display:flex;gap:20px;align-items:center;padding:0 8px;font-size:7px;background:#303030;}
.ps-panels{background:#303030;border-left:1px solid #141414;display:flex;flex-direction:column;overflow:hidden;}
.ps-panel-tabs{display:flex;align-items:center;gap:12px;padding:8px;background:#252525;font-size:8px;border-bottom:1px solid #1b1b1b;}
.ps-panel-tabs b{font-weight:400;color:#eee;}
.ps-panel-tabs span{color:#999;}
.ps-color-area{display:flex;gap:6px;padding:10px;height:108px;flex-shrink:0;}
.ps-color-area div{flex:1;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,#e01414);border:1px solid #171717;}
.ps-color-area i{width:9px;background:linear-gradient(red,#f0f,blue,cyan,lime,yellow,red);}
.ps-properties{padding:8px 10px;font-size:8px;}
.ps-properties p{margin:0 0 9px;font-size:8px;color:#bdbdbd;}
.ps-properties div{display:flex;justify-content:space-between;margin:6px 0;}
.ps-properties div span{border:1px solid #494949;background:#222;padding:1px 5px;min-width:65px;}
.ps-properties hr{border:0;border-top:1px solid #494949;margin:10px 0;}
.ps-layer-options{font-size:8px;padding:10px 7px;}
.ps-layer{padding:7px;display:flex;align-items:center;gap:7px;font-size:8px;border-top:1px solid #292929;}
.ps-layer.active{background:#494949;}
.ps-layer-thumb{width:23px;height:29px;background:url('images/comparisons/social-after.jpg') center/cover;border:1px solid #999;}
.ps-layer-thumb.original{background-image:url('images/comparisons/social-before.png');}
.ps-layer-thumb.bg{background:#171717;}
.ps-layer-footer{font-size:10px;padding:8px;margin-top:auto;border-top:1px solid #202020;text-align:right;}
.laptop-chin{height:18px;display:grid;place-items:center;color:#777;font:5px Arial;letter-spacing:2px;}
.laptop-base{position:relative;height:20px;margin:0 -38px;background:linear-gradient(#929297 0,#c5c5c8 12%,#77777b 35%,#29292c 88%,#111);border-radius:2px 2px 50% 50% / 2px 2px 100% 100%;box-shadow:0 16px 22px #0008;}
.laptop-base span{display:block;width:16%;height:5px;margin:auto;background:#424245;border-radius:0 0 7px 7px;box-shadow:0 1px 1px #ddd8;}
.comparison-controls{max-width:520px;margin:34px auto 0;}
.comparison-range-labels{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#999;margin-bottom:12px;}
.comparison-range-labels label{color:#d2cdd0;font-size:12px;}
#comparison-range{display:block;width:100%;height:30px;margin:0;background:transparent;appearance:none;cursor:ew-resize;touch-action:pan-y;}
#comparison-range::-webkit-slider-runnable-track{height:3px;border-radius:4px;background:linear-gradient(to right,#e01414 var(--progress,0%),#414145 var(--progress,0%));}
#comparison-range::-moz-range-track{height:3px;border-radius:4px;background:#414145;}
#comparison-range::-moz-range-progress{background:#e01414;height:3px;}
#comparison-range::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:50%;margin-top:-9.5px;background:#e01414;border:3px solid #f6eeee;box-shadow:0 0 0 5px #e0141420;}
#comparison-range::-moz-range-thumb{width:16px;height:16px;border:3px solid #f6eeee;border-radius:50%;background:#e01414;}
#comparison-range:focus-visible{outline:2px solid #f25c5c;outline-offset:6px;border-radius:4px;}
.comparison-tabs{display:grid;grid-template-columns:repeat(3,1fr);max-width:570px;margin:22px auto 0;border-bottom:1px solid #ffffff20;gap:16px;}
.comparison-tabs button{border:0;border-bottom:2px solid transparent;background:none;color:#999;display:flex;align-items:center;justify-content:center;gap:10px;font:500 13px var(--body-font);padding:20px 0;cursor:pointer;transition:color .2s,border-color .2s;}
.comparison-tabs small{font-size:9px;opacity:.6;}
.comparison-tabs button[aria-selected=true]{color:white;border-bottom-color:#e01414;}
.comparison-tabs button:focus-visible{outline:1px solid #e01414;outline-offset:3px;}
.comparison-caption{text-align:center;font-size:11px;color:#8d878b;margin:18px auto 0;min-height:1.5em;}
.instagram-icon{width:19px;height:19px;flex:none;color:#ff4545;}
.design-cursor,.design-cursor *{pointer-events:none!important;}
.btn::before,.btn::after{pointer-events:none!important;}
.pricing-card .btn:hover{transform:none;}
@media(max-width:760px){.comparison-section{padding:70px 0 50px;}.comparison-laptop{padding:0 16px;}.laptop-lid{padding:16px 5px 0;border-radius:15px 15px 3px 3px;}.laptop-camera{top:6px;width:3px;height:3px;}.laptop-base{margin-inline:-16px;height:13px;}.ps-workspace{height:390px;grid-template-columns:24px minmax(0,1fr) 105px;}.ps-menu{gap:8px;height:22px;font-size:7px;}.ps-menu span:nth-of-type(n+7){display:none;}.ps-options{font-size:6px;gap:8px;height:23px;}.ps-option-end{display:none;}.ps-panels{font-size:6px;}.ps-panel-tabs{font-size:6px;gap:6px;padding:7px 5px;}.ps-color-area{height:85px;padding:7px;}.ps-properties{padding:7px 5px;}.ps-properties p,.ps-properties div,.ps-layer-options,.ps-layer{font-size:6px;}.ps-properties div span{min-width:40px;padding:1px 3px;}.ps-panel-tabs span:nth-child(3){display:none;}.ps-layer{gap:4px;padding:5px;}.ps-layer-thumb{width:16px;height:22px;}.ps-artboard-area{padding:12px 8px;}.ps-document-tab{font-size:6px;padding:0 5px;}.ps-status{font-size:5px;gap:10px;}.comparison-controls{max-width:85%;}.comparison-tabs{gap:6px;}.comparison-tabs button{font-size:11px;gap:5px;}.comparison-heading{margin-bottom:30px;}.comparison-heading>p:last-child{font-size:13px;}}
@media(max-width:500px){.ps-panels{display:none;}.ps-workspace{grid-template-columns:23px minmax(0,1fr);height:340px;}.ps-options span:last-child{display:none;}.comparison-tabs small{display:none;}.ps-menu{gap:7px;}.comparison-canvas{max-width:100%;}.ps-document-tab{font-size:6px;}.comparison-heading .section-title{font-size:29px;}.comparison-heading>p:last-child{max-width:27ch;margin-inline:auto;}.ps-artboard-area{padding:12px;}.comparison-divider span{width:24px;height:24px;}}
@media(prefers-reduced-motion:reduce){.comparison-tabs button{transition:none;}}

/* Center the paragraph boxes themselves, not just their text. */
.comparison-heading .comparison-eyebrow,.comparison-heading>p:last-child{margin-inline:auto;text-align:center;}
.comparison-heading .comparison-eyebrow{max-width:none;width:100%;}
.comparison-heading .section-title{margin-inline:auto;text-align:center;}
/* Glass bezel, machined rim and a visible foreshortened keyboard deck. */
.laptop-lid{background:linear-gradient(115deg,#34363a 0%,#090a0d 9%,#08090b 75%,#1d1f23 100%);border:1px solid #797d83;border-radius:24px 24px 7px 7px;box-shadow:inset 0 1px 1px #d2d5dc88,inset 2px 0 2px #9ea5b42b,inset -2px 0 2px #91969f33,0 0 0 2px #101114,0 0 55px #e014141a,0 20px 35px #0009;}
.ps-editor{box-shadow:0 0 0 1px #000,0 0 0 2px #ffffff06;border-radius:2px;}
.laptop-camera{background:radial-gradient(circle at 40% 35%,#35455a,#111722 45%,#020307 75%);box-shadow:0 0 0 2px #020204,0 0 0 3px #1b1c20;}
.laptop-chin{color:#45474c;background:linear-gradient(90deg,#ffffff03,transparent 30%,transparent 70%,#ffffff03);height:19px;}
.laptop-base{height:auto;background:none;border-radius:0;margin-top:0;position:relative;box-shadow:none;filter:drop-shadow(0 14px 12px #0009);}
.laptop-base img{display:block;width:100%;height:auto;user-select:none;pointer-events:none;}
@media(max-width:760px){.laptop-lid{border-radius:15px 15px 4px 4px;}.laptop-chin{height:13px;}.laptop-base{height:auto;}}

/* Photographic hardware: screen bounds measured on the 1536 × 1024 asset.
   The HTML editor scales as one surface, preserving the physical screen fit. */
.photographic-laptop{max-width:1140px;padding:0;aspect-ratio:3/2;isolation:isolate;}
.laptop-photo{display:block;width:100%;height:auto;pointer-events:none;user-select:none;}
.photographic-laptop .laptop-lid{position:absolute;left:12.630208%;top:7.910156%;width:74.804688%;height:62.109375%;padding:0;border:0;border-radius:0;background:#282828;box-shadow:none;overflow:hidden;}
.photographic-laptop .ps-editor{position:absolute;inset:0 auto auto 0;width:1149px;height:636px;border:0;border-radius:0;box-shadow:none;transform:scale(var(--screen-scale,0));transform-origin:0 0;display:flex;flex-direction:column;}
.photographic-laptop .ps-menu,.photographic-laptop .ps-options{flex-shrink:0;}
.photographic-laptop .ps-workspace{flex:1;height:auto;min-height:0;}
.photographic-laptop .ps-document{min-height:0;}
.photographic-laptop .ps-toolbar{overflow:hidden;}
.photographic-laptop .comparison-canvas{width:auto;max-width:100%;}
@media(max-width:760px){.photographic-laptop{padding:0;}.photographic-laptop .laptop-lid{padding:0;border-radius:0;}.comparison-controls{margin-top:18px;}}

/* Clip only the hardware photo; the live display and drag target stay intact. */
.laptop-photo{clip-path:url(#laptop-hardware-outline);}
.photographic-laptop.is-reveal-ready{opacity:0;transform:translate3d(0,64px,0);transition:opacity 1.1s ease,transform 1.35s cubic-bezier(.16,1,.3,1);}
.photographic-laptop.is-reveal-ready.is-inview{opacity:1;transform:translate3d(0,0,0);}
@media(prefers-reduced-motion:reduce){.photographic-laptop.is-reveal-ready{opacity:1;transform:none;transition:none;}}

/* Illustrator workspace is used only for the packaging comparison. */
.is-illustrator .ps-menu b{color:#ff9a00;}
.is-illustrator .ps-options{gap:10px;background:#383838;}
.is-illustrator .ps-toolbar{background:#323232;}
.is-illustrator .ps-artboard-area{background:#464646;}
.is-illustrator .ps-document-tab{background:#303030;}
.is-illustrator .ps-layer.active{border-left:2px solid #5594e6;background:#444c57;}
.is-illustrator .ps-layer:not(.active){border-left:2px solid #e77373;}
.ai-fill-swatch,.ai-stroke-swatch{display:inline-block;width:12px;height:12px!important;min-width:12px;border:1px solid #aaa;background:white;}
.ai-stroke-swatch{background:linear-gradient(135deg,white 44%,#e54b4b 45%,#e54b4b 55%,white 56%);}
.ai-white-chip{background:#fff!important;min-width:12px!important;max-width:12px;}
.ai-grid-tools{font-size:16px!important;color:#c5c5c5;letter-spacing:5px;}