/* Round 03: the approved 12 composition, corrected and developed in three directions. */

/* The two portraits called out in the references are true 1:1 circles. */
.design-12 .finder-photo-main,
.design-12 .finder-photo-small {
  --portrait-size:clamp(205px,27vw,330px);
  inset:auto;
  top:38px;
  width:var(--portrait-size);
  height:var(--portrait-size);
  max-width:none;
  aspect-ratio:1;
  border-radius:50%;
  transform:none;
  box-shadow:0 0 0 7px #fff7,7px 11px 0 #a175b622;
}
.design-12 .finder-photo-main {left:1%}
.design-12 .finder-photo-small {right:1%}
.design-12 .finder-photo-main img,
.design-12 .finder-photo-small img {display:block;width:100%;height:100%;object-fit:cover}

/* STYLE 02 / 04: reverse the 01 / 03 silhouette, with the cut at upper left. */
.design-12 .lp-paths .path-card:nth-child(even) .path-visual>img {
  border-radius:8px 8px 100px 100px;
  clip-path:polygon(0 12%,12% 0,100% 0,100% 100%,0 100%);
}

/* Shared details: tiny frames and labels, kept behind meaningful content. */
.design-13 .lp-finder,
.design-14 .lp-finder,
.design-15 .lp-finder {overflow:hidden}
.design-13 .lp-heading .lp-ribbon,
.design-14 .lp-heading .lp-ribbon,
.design-15 .lp-heading .lp-ribbon {box-shadow:4px 5px 0 #fff9}
.design-13 .lp-paths .path-card,
.design-14 .lp-paths .path-card,
.design-15 .lp-paths .path-card {position:relative}
.design-13 .lp-paths .path-card::after,
.design-14 .lp-paths .path-card::after,
.design-15 .lp-paths .path-card::after {
  content:'';position:absolute;right:12px;top:10px;width:30px;height:30px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  color:var(--card);opacity:.65;pointer-events:none;
}

/* 13 — Dot Atelier: framed editorial cards, dotted confetti and corner tabs. */
.design-13 {--ink:#634969;--accent:#9a60a6;--lp-coral:#c792b9}
.design-13 .lp-finder {
  background:radial-gradient(circle,#fff8 0 2px,transparent 2.5px) 0 0/30px 30px,
    radial-gradient(circle at 12% 76%,#f4d9ec 0,transparent 29%),
    radial-gradient(circle at 91% 24%,#d5ede4 0,transparent 26%),
    linear-gradient(120deg,#f4dfed,#f2e8f8 58%,#e6f5ed);
}
.design-13 .lp-finder::before {
  content:'';position:absolute;inset:24px 3.5% 24px;border:1px solid #fff9;
  border-radius:30px;pointer-events:none;
}
.design-13 .lp-finder::after {
  content:'✦  ·  ✧';position:absolute;right:7%;top:18%;font-size:22px;
  letter-spacing:.65em;color:#b98dcc;opacity:.75;pointer-events:none;
}
.design-13 .finder-photo-main,
.design-13 .finder-photo-small {border:8px solid white;box-shadow:0 0 0 4px #dcb8db,8px 11px 0 #a175b626}
.design-13 .lp-finder .finder-question {border-color:#c6a7d2;background:#fffdfdf2;border-radius:18px;box-shadow:0 0 0 7px #fff8,9px 10px 0 #cbb1d42c}
.design-13 .lp-finder .finder-question::after {
  content:'';position:absolute;inset:12px;border:1px solid #eadbe9;border-radius:12px;pointer-events:none;
}
.design-13 .values-strip {background:linear-gradient(100deg,#b48ac9,#cc9cbd)}
.design-13 .header-quiz,.design-13 .button.primary {background:linear-gradient(110deg,#a76db3,#bd7fa5)}
.design-13 .mobile-action button {background:linear-gradient(110deg,#a76db3,#bd7fa5)}
.design-13 .lp-paths::before {background:radial-gradient(circle,#d7bdda66 0 2px,transparent 2.5px) 0 0/34px 34px,#fbf1f8}
.design-13 .lp-paths .path-card {border-style:dashed;box-shadow:8px 8px 0 #e7d7e9}
.design-13 .lp-compare::before {background:linear-gradient(90deg,#e4cde966 1px,transparent 1px) 0 0/38px 38px,#fffdfb}
.design-13 .lp-quiz::before {background:radial-gradient(circle,#fff 0 2px,transparent 2.5px) 0 0/29px 29px,#eee0f2}
.design-13 .lp-journal::before {background:radial-gradient(circle at 8% 16%,#efd9ee 0,transparent 28%),#fffafc}
.design-13 .journal-card {outline:1px solid #dab9d5;outline-offset:6px}

/* 14 — Ribbon Garden: soft garden bands, double rules and rounded tabs. */
.design-14 {--ink:#64525a;--accent:#b86083;--lp-coral:#e294a9}
.design-14 .lp-finder {
  background:radial-gradient(circle at 11% 36%,#fff8e6 0,transparent 23%),
    radial-gradient(circle at 88% 72%,#d7f1e6 0,transparent 22%),
    repeating-linear-gradient(-42deg,#fce9ef 0 22px,#f9e1eb 22px 24px,#fce9ef 24px 46px);
}
.design-14 .lp-finder::before {
  content:'';position:absolute;left:-3%;right:-3%;top:18px;height:13px;
  background:radial-gradient(circle at 50% 100%,#fff9 0 8px,transparent 8.5px) 0 0/24px 13px repeat-x;
  pointer-events:none;
}
.design-14 .lp-finder::after {
  content:'';position:absolute;left:7%;right:7%;bottom:24px;border-bottom:2px double #d99bb6aa;
  pointer-events:none;
}
.design-14 .finder-title .lp-ribbon {background:linear-gradient(100deg,#e5a2b9,#a4d6c1);color:#704b63}
.design-14 .lp-finder h1 {color:#95637c}
.design-14 .lp-finder h1 em {color:#d8789b;text-shadow:2px 4px 0 #f0d4df}
.design-14 .lp-finder .finder-question h2 {color:#b76586}
.design-14 .finder-seal {background:#f7d6de;color:#a7627f}
.design-14 .lp-finder .finder-options button:first-child {background:#fbe1e9;border-color:#edbbce;color:#ad6380}
.design-14 .lp-finder .finder-options button:nth-child(2) {background:#e4f4e9;border-color:#b8dbc9;color:#5a9078}
.design-14 .lp-finder .finder-options button:nth-child(3) {background:#fff1d9;border-color:#eedcae;color:#9c7c4b}
.design-14 .values-strip {background:linear-gradient(100deg,#e99cba,#a9d5be)}
.design-14 .header-quiz,.design-14 .button.primary {background:linear-gradient(110deg,#cb6f93,#b96c9f)}
.design-14 .mobile-action button {background:linear-gradient(110deg,#cb6f93,#b96c9f)}
.design-14 .finder-photo-main,
.design-14 .finder-photo-small {border:8px solid white;box-shadow:0 0 0 3px #f5c8d7,0 0 0 8px #fff8,8px 11px 0 #ba789a29}
.design-14 .lp-finder .finder-question {border:5px double #e6b8c8;border-radius:7px;background:#fffdf9f2;box-shadow:9px 9px 0 #dda6be47}
.design-14 .lp-paths::before {background:repeating-linear-gradient(135deg,#fff8f8 0 18px,#fceff0 18px 20px),#fff8f8}
.design-14 .lp-paths .path-card {border-style:double;border-width:4px;box-shadow:7px 8px 0 #e9d9df}
.design-14 .lp-paths .path-card::before {content:'✿';position:absolute;right:21px;bottom:13px;font-size:18px;color:var(--card);opacity:.6}
.design-14 .lp-compare::before {background:radial-gradient(circle at 10% 90%,#d7efe7,transparent 26%),#fffbf8}
.design-14 .lp-quiz::before {background:repeating-linear-gradient(-45deg,#f6eaf2 0 23px,#eddced 23px 25px)}
.design-14 .lp-journal::before {background:radial-gradient(circle at 96% 9%,#ddf2e8 0,transparent 27%),#fff9f8}
.design-14 .journal-card {border-bottom:4px double #e6bdd1}

/* 15 — Pearl Pop: aurora wash, offset rings and restrained geometry. */
.design-15 {--ink:#445d64;--accent:#3a9e9b;--lp-coral:#78c7c2}
.design-15 .lp-finder {
  background:radial-gradient(circle at 9% 72%,#d6faf0 0,transparent 30%),
    radial-gradient(circle at 89% 28%,#fbd7e8 0,transparent 29%),
    radial-gradient(circle at 45% 8%,#fff8da 0,transparent 19%),
    linear-gradient(115deg,#ddf5f3,#e6e4f6 55%,#f7dbe7);
}
.design-15 .lp-finder::before {
  content:'';position:absolute;left:3%;top:25%;width:90px;height:90px;border:1px solid #fff9;
  border-radius:50%;box-shadow:0 0 0 12px #fff3,0 0 0 24px #fff3;pointer-events:none;
}
.design-15 .lp-finder::after {
  content:'';position:absolute;right:4%;bottom:17%;width:105px;height:105px;
  border:1px solid #fff9;transform:rotate(45deg);pointer-events:none;
}
.design-15 .finder-title .lp-ribbon {background:linear-gradient(100deg,#b9e8d9,#dfbdeb);color:#477871}
.design-15 .lp-finder h1 {color:#568f92}
.design-15 .lp-finder h1 em {color:#5cbab0;text-shadow:2px 4px 0 #c8eee7}
.design-15 .lp-finder .finder-question h2 {color:#4d9793}
.design-15 .question-label {background:#8acfc3}
.design-15 .values-strip {background:linear-gradient(100deg,#68bdba,#a790c9)}
.design-15 .header-quiz,.design-15 .button.primary {background:linear-gradient(110deg,#43a9a5,#6faebc)}
.design-15 .mobile-action button {background:linear-gradient(110deg,#43a9a5,#6faebc)}
.design-15 .finder-photo-main,
.design-15 .finder-photo-small {border:8px solid white;box-shadow:0 0 0 5px #a9e4d9a8,0 0 0 11px #fff8,8px 11px 0 #7bbab340}
.design-15 .finder-seal {background:#c4e8e2;color:#477e79}
.design-15 .lp-finder .finder-question {border-color:#a5d7d1;background:#ffffffdf;box-shadow:0 0 0 8px #fff7,10px 12px 0 #88c8c538}
.design-15 .lp-finder .finder-options button:first-child {background:#dff3ef;border-color:#a5d9d0;color:#398b82}
.design-15 .lp-paths::before {background:radial-gradient(circle at 20% 10%,#d3f4ee 0,transparent 30%),radial-gradient(circle at 90% 89%,#f1d9ee 0,transparent 27%),#f8f9fb}
.design-15 .lp-paths .path-card {box-shadow:6px 8px 0 #d6ebe9;border-color:#b8dad9}
.design-15 .lp-paths .path-card::before {content:'';position:absolute;left:8px;bottom:8px;width:24px;height:24px;border-left:1px solid #8bcfc5;border-bottom:1px solid #8bcfc5;pointer-events:none}
.design-15 .lp-compare::before {background:linear-gradient(90deg,#b9e7e133 1px,transparent 1px) 0 0/42px 42px,linear-gradient(#b9e7e133 1px,transparent 1px) 0 0/42px 42px,#fff}
.design-15 .lp-quiz::before {background:radial-gradient(circle at 30% 50%,#d4f3ec,transparent 34%),linear-gradient(110deg,#eaf4fa,#f5e5f5)}
.design-15 .lp-journal::before {background:linear-gradient(120deg,#f2fbf8,#fff5fa)}
.design-15 .journal-card {box-shadow:5px 7px 0 #cdece766}

@media(max-width:1100px) and (min-width:701px) {
  .design-12 .finder-photo-main,.design-12 .finder-photo-small {--portrait-size:clamp(170px,25vw,270px);top:64px}
  .design-12 .finder-photo-main {left:-3%}
  .design-12 .finder-photo-small {right:-3%}
}
@media(max-width:700px) {
  .design-12 .mobile-action button {gap:8px;white-space:nowrap;font-size:10px;padding:10px 9px}
  .design-12 .finder-scene {height:clamp(114px,35vw,145px)}
  .design-12 .finder-photo-main,.design-12 .finder-photo-small {
    --portrait-size:clamp(112px,35vw,145px);
    inset:auto;top:0;width:var(--portrait-size);height:var(--portrait-size);
    border-width:5px;transform:none;
  }
  .design-12 .finder-photo-main {left:3%}
  .design-12 .finder-photo-small {right:3%}
  .design-13 .lp-finder::after {top:22%;right:4%;font-size:13px}
  .design-14 .lp-finder::after {bottom:14px}
  .design-15 .lp-finder::before {width:48px;height:48px;left:-1%;top:28%}
  .design-15 .lp-finder::after {width:50px;height:50px;right:-1%;bottom:23%}
  .design-13 .journal-card {outline-offset:3px}
}