/* Shared specimen mocks: a fictional AI-generated landing page ("slop")
   and the same product hand-designed ("made"). Sized in container units
   so they scale with whatever frame holds them. */

.mockwrap { container-type: inline-size; position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.mock { position: absolute; inset: 0; overflow: hidden; }

/* ---------- BEFORE: generated ---------- */
.slop { background: #0A0A1C; color: #fff; font-family: "Inter", system-ui, sans-serif; }
.slop .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 4cqi 4cqi; mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); }
.slop .orb1 { position: absolute; width: 62cqi; height: 62cqi; left: -14cqi; top: -30cqi; border-radius: 50%; background: radial-gradient(circle, #7C3AED 0%, transparent 65%); opacity: .75; }
.slop .orb2 { position: absolute; width: 56cqi; height: 56cqi; right: -16cqi; top: -10cqi; border-radius: 50%; background: radial-gradient(circle, #2563EB 0%, transparent 65%); opacity: .6; }
.s-nav { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 2.2cqi 4cqi; font-size: 1.25cqi; }
.s-logo { display: flex; align-items: center; gap: .7cqi; font-weight: 700; font-size: 1.65cqi; }
.s-logo i { width: 1.9cqi; height: 1.9cqi; border-radius: .5cqi; background: linear-gradient(135deg, #8B5CF6, #3B82F6); }
.s-logo em { font-style: normal; font-size: .85cqi; padding: .2cqi .55cqi; border-radius: 99px; background: rgba(139,92,246,.25); border: 1px solid rgba(139,92,246,.55); }
.s-links { display: flex; gap: 2.6cqi; color: #A6A7CC; }
.s-pill { padding: .8cqi 1.7cqi; border-radius: 99px; background: linear-gradient(90deg, #8B5CF6, #3B82F6); font-weight: 600; }
.s-hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4.2cqi 8cqi 0; }
.s-badge { position: relative; font-size: 1.2cqi; padding: .6cqi 1.5cqi; border-radius: 99px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #DCD8FF; }
.s-h { position: relative; font-weight: 800; font-size: 5.3cqi; line-height: 1.06; letter-spacing: -.03em; margin-top: 2cqi; max-width: 64cqi; }
.s-grad { background: linear-gradient(90deg, #A78BFA, #60A5FA 55%, #22D3EE); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-p { position: relative; font-size: 1.5cqi; line-height: 1.5; color: #A6A7CC; max-width: 52cqi; margin-top: 1.8cqi; }
.s-ctas { position: relative; display: flex; gap: 1.2cqi; margin-top: 2.6cqi; font-size: 1.35cqi; font-weight: 600; }
.s-ctas span { padding: 1.2cqi 2.3cqi; border-radius: 99px; }
.s-ctas span:first-child { background: linear-gradient(90deg, #8B5CF6, #3B82F6); box-shadow: 0 0 3.5cqi rgba(139,92,246,.6); }
.s-ctas span:last-child { border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.05); }
.s-cards { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqi; margin-top: 4cqi; width: 100%; max-width: 80cqi; text-align: left; }
.s-card { padding: 1.9cqi; border-radius: 1.4cqi; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); font-size: 1.15cqi; line-height: 1.45; color: #A6A7CC; }
.s-card i { font-style: normal; display: grid; place-items: center; width: 3.3cqi; height: 3.3cqi; border-radius: .8cqi; margin-bottom: 1.2cqi; font-size: 1.7cqi; background: linear-gradient(135deg, rgba(139,92,246,.45), rgba(59,130,246,.45)); }
.s-card b { display: block; color: #fff; font-size: 1.4cqi; margin-bottom: .4cqi; }

/* ---------- AFTER: designed ---------- */
.made { background:#FBFBFA; color:#111; font-family:"Geist",system-ui,sans-serif; }
.made::before { content:""; position:absolute; left:6cqi; right:6cqi; top:32cqi; bottom:0; background-image:radial-gradient(#D4D4D2 .09cqi, transparent .13cqi); background-size:1.1cqi 1.1cqi; -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 60%, transparent 55%, #000 75%, transparent 100%); mask-image:radial-gradient(ellipse 60% 70% at 50% 60%, transparent 55%, #000 75%, transparent 100%); opacity:.7; }
.m-wrap { position:absolute; left:27cqi; top:5cqi; width:54cqi; }
.m-ball { display:block; width:3.1cqi; height:3.1cqi; border-radius:50%; background:radial-gradient(circle at 35% 30%, #F4FF9A, #A6E34A 45%, #3E8E1E 100%); box-shadow:0 .6cqi 1.4cqi -0.4cqi rgba(62,142,30,.45); }
.m-h { font-weight:500; font-size:3.05cqi; line-height:1.14; letter-spacing:-.03em; margin-top:3cqi; }
.m-p { font-weight:400; font-size:2.1cqi; line-height:1.3; letter-spacing:-.02em; color:#8C8C8A; margin-top:1.3cqi; max-width:50cqi; }
.m-ctas { display:flex; gap:.7cqi; margin-top:2.6cqi; font-size:1.05cqi; font-weight:500; }
.m-ctas span { padding:.85cqi 1.3cqi; border-radius:.45cqi; }
.m-ctas span:first-child { background:#161616; color:#fff; box-shadow:0 .2cqi .5cqi rgba(0,0,0,.18); }
.m-ctas span:last-child { background:#fff; box-shadow:0 0 0 1px #E6E6E4, 0 .2cqi .4cqi rgba(0,0,0,.05); }
.m-app { position:absolute; left:15cqi; right:15cqi; top:34cqi; height:40cqi; display:grid; grid-template-columns:14.5cqi 23cqi 1fr; background:#fff; border-radius:.9cqi .9cqi 0 0; box-shadow:0 0 0 1px #ECECEA, 0 2cqi 5cqi -1cqi rgba(0,0,0,.08); font-size:.98cqi; overflow:hidden; }
.a-side { background:#FAFAF9; border-right:1px solid #EFEFED; padding:1cqi .7cqi; }
.a-top { display:flex; justify-content:space-between; align-items:center; padding:0 .4cqi 1.2cqi; }
.dots { display:flex; gap:.45cqi; } .dots i { width:.7cqi; height:.7cqi; border-radius:50%; background:#DEDEDB; }
.ic-side { width:1cqi; height:.85cqi; border:1px solid #9A9A97; border-radius:.2cqi; }
.a-nav { display:flex; justify-content:space-between; align-items:center; padding:.55cqi .6cqi; border-radius:.45cqi; color:#2B2B2A; }
.a-nav span { display:flex; align-items:center; gap:.7cqi; } .a-nav span i { width:1cqi; height:1cqi; border-radius:.25cqi; }
.a-nav em { font-style:normal; color:#9A9A97; font-size:.85cqi; }
.a-nav.on { background:#EDEDEB; }
.gl { width:1cqi; height:1cqi; flex:none; border:1.5px solid #6E6E6C; }
.gl.s { border-radius:50%; } .gl.r { border-radius:.25cqi; } .gl.c { border:0; display:grid; place-items:center; font-size:.95cqi; color:#6E6E6C; } .a-nav.dim { color:#9A9A97; }
.a-grp { font-size:.88cqi; color:#8C8C8A; padding:1.3cqi .6cqi .4cqi; }
.a-list { border-right:1px solid #EFEFED; padding:0 .7cqi; }
.a-bar { display:flex; justify-content:space-between; align-items:center; height:3.6cqi; padding:0 .6cqi; border-bottom:1px solid #F1F1EF; margin:0 -.7cqi; padding:0 1.3cqi; }
.a-bar b { font-weight:600; }
.a-day { color:#8C8C8A; font-size:.88cqi; padding:1.2cqi .6cqi .5cqi; }
.a-item { display:flex; align-items:center; gap:.9cqi; padding:.75cqi .6cqi; border-radius:.5cqi; white-space:nowrap; overflow:hidden; font-weight:500; color:#1E1E1D; }
.a-item i { flex:none; width:1.35cqi; height:1.35cqi; border-radius:.3cqi; display:grid; place-items:center; color:#fff; font-style:normal; font-size:.75cqi; font-weight:600; }
.a-item.on { background:#F0F0EE; }
.a-read { position:relative; }
.a-read .a-bar { margin:0; padding:0 1.3cqi; }
.a-ctl { color:#9A9A97; font-size:.95cqi; white-space:nowrap; }
.a-seg { display:flex; background:#F3F3F1; border-radius:.45cqi; padding:.2cqi; font-size:.92cqi; } .a-seg > * { padding:.35cqi .9cqi; border-radius:.35cqi; color:#8C8C8A; font-weight:500; } .a-seg b { background:#fff; color:#111; box-shadow:0 0 0 1px #ECECEA; }
.a-body { padding:2.4cqi 2.6cqi; }
.a-title { font-weight:600; font-size:2.2cqi; letter-spacing:-.035em; }
.a-src { display:flex; align-items:center; gap:.6cqi; color:#6E6E6C; margin-top:.9cqi; font-size:.95cqi; }
.a-src i { width:1.1cqi; height:1.1cqi; border-radius:.25cqi; background:#232F3E; color:#fff; font-style:normal; font-size:.65cqi; display:grid; place-items:center; font-weight:600; }
.a-sum { margin-top:2cqi; background:#F6F6F4; border-radius:.8cqi; padding:1.3cqi 1.4cqi; line-height:1.55; color:#3A3A39; }
.a-sum small { display:block; color:#8C8C8A; font-size:.88cqi; margin-bottom:.5cqi; }
.a-txt { margin-top:1.8cqi; line-height:1.6; color:#55554F; -webkit-mask-image:linear-gradient(#000 20%, transparent 95%); mask-image:linear-gradient(#000 20%, transparent 95%); }
.a-ask { position:absolute; left:1.3cqi; right:1.3cqi; top:24.5cqi; display:flex; justify-content:space-between; align-items:center; padding:1cqi 1.3cqi; background:#fff; border-radius:1.1cqi; color:#9A9A97; box-shadow:0 0 0 1px #ECECEA, 0 .6cqi 1.6cqi -.4cqi rgba(0,0,0,.12); }
.a-ask i { width:1.5cqi; height:1.5cqi; border-radius:50%; background:#BDBDBA; }

/* Narrow frames: switch both mocks to a phone-ish layout */
@container (max-width: 560px) {
  .s-nav { padding: 4cqi 5cqi; font-size: 3cqi; } .s-logo { font-size: 3.8cqi; gap: 1.4cqi; } .s-logo i { width: 4cqi; height: 4cqi; } .s-logo em { font-size: 2cqi; } .s-links { display: none; }
  .s-pill { padding: 1.6cqi 3cqi; }
  .s-hero { padding: 7cqi 6cqi 0; } .s-badge { font-size: 2.8cqi; padding: 1.2cqi 3cqi; }
  .s-h { font-size: 9.6cqi; max-width: none; margin-top: 4cqi; } .s-p { font-size: 3.4cqi; max-width: none; margin-top: 3.5cqi; }
  .s-ctas { font-size: 3cqi; gap: 2cqi; margin-top: 5cqi; } .s-ctas span { padding: 2.4cqi 4cqi; }
  .s-cards { grid-template-columns: 1fr 1fr; gap: 3cqi; margin-top: 7cqi; } .s-card { padding: 4cqi; font-size: 2.6cqi; border-radius: 3cqi; } .s-card b { font-size: 3cqi; } .s-card i { width: 7cqi; height: 7cqi; font-size: 3.6cqi; border-radius: 2cqi; }
  .m-wrap { left:7cqi; right:7cqi; width:auto; top:8cqi; } .m-ball { width:7cqi; height:7cqi; } .m-h { font-size:7cqi; margin-top:6cqi; } .m-p { font-size:4.4cqi; margin-top:3cqi; }
  .m-ctas { font-size:3cqi; gap:2cqi; margin-top:5cqi; } .m-ctas span { padding:2.2cqi 3.4cqi; border-radius:1.4cqi; }
  .made::before { display:none; }
  .m-app { left:7cqi; right:-14cqi; top:96cqi; height:60cqi; grid-template-columns:1fr; font-size:2.6cqi; border-radius:2.4cqi 0 0 0; } .a-side, .a-list { display:none; }
  .a-read .a-bar { height:9cqi; padding:0 3.5cqi; } .a-seg { font-size:2.4cqi; } .a-ctl { font-size:2.4cqi; }
  .a-body { padding:5cqi 5cqi; } .a-title { font-size:5.4cqi; } .a-src { font-size:2.5cqi; gap:1.4cqi; margin-top:2cqi; } .a-src i { width:3cqi; height:3cqi; font-size:1.7cqi; } .a-sum { margin-top:4cqi; padding:3.4cqi; border-radius:2cqi; } .a-sum small { font-size:2.3cqi; } .a-txt, .a-ask { display:none; }
}

/* Before/after slider core (pages set --accent) */
.ba-body, .ba-body * { cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ba-body .mock { pointer-events: none; }
.ba-body .after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: var(--accent); z-index: 3; }
.ba-handle span { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--accent); color: var(--on-accent, #000); display: grid; place-items: center; font: 600 15px system-ui; box-shadow: 0 8px 24px rgba(0,0,0,.3); }