/* =========================================================
   Design 2 — before/after slider (used by index-2.html)
   Loaded after styles.css. Frame + controls follow the palette;
   the two mock websites are a fictional client and stay fixed.
   ========================================================= */

/* ---------- hero: give the slider more room ---------- */
.hero--slider .hero__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.cmpwrap { opacity: 0; animation: rise 1s .3s var(--ease) forwards; }
.cmpwrap figcaption { margin-top: 16px; font-size: .84rem; color: var(--muted); text-align: center; }

.cmp {
  --pos: 50%;
  container: cmp / inline-size;
  position: relative; aspect-ratio: 1.28; overflow: hidden;
  background: var(--tint); border: 1px solid var(--line-2); border-radius: 20px;
  box-shadow: 0 40px 80px -36px rgba(10, 22, 40, .45), 0 2px 8px rgba(10, 22, 40, .06);
  user-select: none; -webkit-user-select: none;
}
.cmp__layer { position: absolute; inset: 0; }
.cmp__layer--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.cmp__range {
  position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none;
}
.cmp__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100vh; }
.cmp__range::-moz-range-thumb { width: 44px; height: 100vh; border: 0; }

.cmp__handle { position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--pos); width: 0; pointer-events: none; }
.cmp__handle::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--surface);
  box-shadow: 0 0 0 1px rgba(10, 22, 40, .28), 0 0 18px rgba(10, 22, 40, .35);
}
.cmp__knob {
  position: absolute; top: 50%; left: 0; width: 48px; height: 48px; margin: -24px 0 0 -24px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-2);
  box-shadow: 0 8px 22px -6px rgba(10, 22, 40, .5), 0 2px 6px rgba(10, 22, 40, .2);
  transition: transform .25s var(--ease);
}
.cmp__knob svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cmp__knob::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.cmp:not(.is-touched) .cmp__knob::after { animation: knobPulse 2.2s ease-out infinite; }
@keyframes knobPulse { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.cmp:hover .cmp__knob { transform: scale(1.07); }
.cmp__range:focus-visible ~ .cmp__handle .cmp__knob { outline: 3px solid var(--accent-ink); outline-offset: 4px; }

.cmp__tag {
  position: absolute; bottom: 14px; z-index: 3; pointer-events: none;
  font: 500 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px; transition: opacity .25s;
}
.cmp__tag--before { left: 14px; background: var(--navy); color: var(--on-navy); }
.cmp__tag--after { right: 14px; background: var(--accent); color: var(--on-accent); }
.cmp__tag.off { opacity: 0; }

/* ---------- the two mock websites (fixed colors: a fictional client's site) ---------- */
.mock { position: absolute; inset: 0; overflow: hidden; font-size: 1.8cqw; line-height: 1.3; text-align: left; }

/* OLD */
.old {
  background-color: #0a7c84;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, .1) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .1) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, .1) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .1) 75%);
  background-size: 1.6em 1.6em; background-position: 0 0, .8em .8em;
  font-family: "Times New Roman", Times, serif; color: #000;
}
.old__page {
  position: absolute; inset: 4% 3.5% 10% 3.5%;
  background: #fffde7; border: .38em outset #cfcfcf; padding: .9em 1.2em;
  display: flex; flex-direction: column; overflow: hidden;
}
.old__marquee { background: #000080; color: #ff0; font: bold .95em "Courier New", monospace; padding: .3em 0; overflow: hidden; white-space: nowrap; }
.old__marquee span { display: inline-block; padding-left: 100%; animation: marq 16s linear infinite; }
@keyframes marq { to { transform: translateX(-100%); } }
.old__title {
  font: bold 2.7em/1.1 "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive;
  color: #800080; text-align: center; margin: .3em 0 .25em; letter-spacing: 0; text-shadow: .06em .06em #ff9cff;
}
.old__new { font-size: .32em; color: #f00; vertical-align: super; animation: blink 1s steps(1) infinite; text-shadow: none; }
@keyframes blink { 50% { opacity: 0; } }
.old__body { display: flex; gap: 1em; flex: 1; min-height: 0; }
.old__nav { width: 24%; flex: none; background: #c0c0c0; border: .2em inset #f4f4f4; padding: .6em .7em; font: 1.02em Arial, Helvetica, sans-serif; }
.old__nav li { color: #0000ee; text-decoration: underline; margin: .4em 0; }
.old__nav li.v { color: #551a8b; }
.old__main { flex: 1; min-width: 0; font-size: 1em; }
.old__img { height: 7.6em; margin-bottom: .6em; display: grid; place-items: center; background: #e8e8e8; border: .16em inset #808080; color: #555; font: .9em Arial, sans-serif; }
.old__main p { margin: 0 0 .5em; font-size: 1.08em; line-height: 1.2; }
.old__uc {
  text-align: center; font: bold .95em "Arial Black", Arial, sans-serif !important; padding: .3em;
  border: .32em solid; border-image: repeating-linear-gradient(45deg, #000 0 .5em, #ffd400 .5em 1em) 8;
}
.old__foot { margin-top: .5em; border-top: .15em solid #999; padding-top: .45em; text-align: center; font-size: .92em; color: #333; }
.old__ctr { background: #000; color: #0f0; font-family: "Courier New", monospace; padding: 0 .3em; }

/* audit flags (the "problems found" callouts) */
.flag {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .55em; white-space: nowrap;
  padding: .42em .85em .42em .5em; border-radius: 999px;
  background: #C7343A; color: #fff; font: 600 1.05em/1 var(--f-body); letter-spacing: 0;
  box-shadow: 0 .5em 1.2em -.4em rgba(120, 20, 25, .7), 0 0 0 .18em rgba(255, 255, 255, .85);
}
.flag::before {
  content: "!"; display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%;
  background: #fff; color: #C7343A; font-weight: 800; font-size: .85em;
}
.flag--1 { left: 6%; top: 13.5%; }
.flag--2 { left: 6%; top: 52%; }
.flag--3 { left: 30%; top: 40%; }
.flag--4 { left: 6%; top: 80%; }
.flag--5 { left: 60%; top: 5.5%; }

/* NEW */
.fresh { background: #FBF3E4; color: #2A1A0F; font-family: var(--f-body); display: flex; flex-direction: column; }
.fresh__nav { display: flex; align-items: center; gap: 1.8em; padding: 1.2em 2.2em; font-weight: 500; font-size: .95em; }
.fresh__nav b { font: 600 1.6em var(--f-head); letter-spacing: -.02em; margin-right: auto; }
.fresh__nav em { font-style: normal; background: #2A1A0F; color: #FBF3E4; padding: .6em 1.2em; border-radius: 99px; }
.fresh__hero { flex: 1; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 1em; padding: .4em 2.2em; min-height: 0; }
.fresh__eyebrow { font: 500 .8em var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: #8B5A3A; }
.fresh h3 { font: 600 3.4em/.98 var(--f-head); letter-spacing: -.035em; margin: .28em 0 .38em; }
.fresh h3 i { color: #C8562A; font-weight: 600; font-style: normal; }
.fresh__sub { font-size: 1.05em; line-height: 1.45; max-width: 26em; color: #5C4432; }
.fresh__btns { display: flex; gap: .8em; margin-top: 1.3em; font-weight: 600; font-size: .95em; }
.fresh__btns .b1 { background: #C8562A; color: #fff; padding: .85em 1.5em; border-radius: 99px; }
.fresh__btns .b2 { border: 1.5px solid #2A1A0F; padding: .8em 1.4em; border-radius: 99px; }
.fresh__art { position: relative; aspect-ratio: 1; width: 100%; max-height: 100%; align-self: center; }
.sun { position: absolute; inset: 4%; border-radius: 50%; background: #F2C879; }
.loaf {
  position: absolute; border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 34% 28%, #EDB468 0%, #C0772F 68%, #9C5A20 100%);
  box-shadow: 0 .8em 1.4em -.6em rgba(60, 30, 5, .5);
}
.loaf::after {
  content: ""; position: absolute; inset: 20% 16% 38%;
  background: repeating-linear-gradient(104deg, transparent 0 13%, rgba(255, 238, 200, .8) 13% 19%, transparent 19% 33%);
  border-radius: 50%;
}
.l1 { left: 6%; bottom: 14%; width: 66%; height: 40%; rotate: -4deg; }
.l2 { right: 2%; bottom: 36%; width: 46%; height: 30%; rotate: 9deg; }
.fresh__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; padding: .6em 2.2em 2.6em; }
.fresh__cards div { background: #fff; border-radius: 1em; padding: .9em 1.1em; font-weight: 600; box-shadow: 0 .1em .5em rgba(60, 30, 5, .08); }
.fresh__cards small { display: block; font: 400 .78em var(--f-mono); color: #8B5A3A; margin-top: .2em; }

/* narrow frame: bigger type, simpler layout */
@container cmp (max-width: 560px) {
  .mock { font-size: 2.55cqw; }
  .hide-sm { display: none; }
  .fresh__nav { padding: 1em 1.4em; }
  .fresh__hero { grid-template-columns: 1.3fr 1fr; padding: .2em 1.4em; }
  .fresh h3 { font-size: 2.7em; }
  .fresh__sub { display: none; }
  .fresh__cards { padding: .4em 1.4em 3em; gap: .6em; }
  .fresh__cards div { padding: .7em .8em; font-size: .9em; }
  .old__page { inset: 3.5% 3% 12% 3%; padding: .7em .8em; }
  .old__title { font-size: 2.3em; }
  .old__img { height: 5em; }
  .old__main p:not(.old__uc) { display: none; }
  .flag { font-size: 1.12em; }
  .flag--1 { top: 4.4%; }   /* sit over the marquee so the shop name stays readable */
}

/* ---------- audit section: sample report showcase ---------- */
.showcase { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-bottom: clamp(36px, 5vw, 56px); }
.showcase__copy h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.12; letter-spacing: -.03em; }
.showcase__copy > p { margin-top: 14px; color: var(--ink-2); max-width: 46ch; }
.legend { display: grid; gap: 12px; margin-top: 26px; }
.legend li { display: flex; align-items: baseline; gap: 12px; font-size: .96rem; color: var(--ink-2); }
.legend b { color: var(--ink); font-weight: 600; min-width: 5.6em; }
.legend i { width: 10px; height: 10px; border-radius: 50%; flex: none; align-self: center; }
.legend .lg--crit { background: var(--crit); } .legend .lg--warn { background: var(--warn); } .legend .lg--good { background: var(--good); }
.dashwrap.dashwrap--static { opacity: 1; animation: none; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .hero--slider .hero__grid { grid-template-columns: 1fr; }
  .cmp { aspect-ratio: 1.2; }
  .showcase { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cmp { aspect-ratio: .98; }
  .cmp__knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
}
@media (prefers-reduced-motion: reduce) {
  .old__marquee span { animation: none; padding-left: 0; }
  .cmp__knob::after { animation: none; }
}