/* LittleWiz — upgrade (OTO) pages in design A "Studio": cream dotted paper, navy ink, bordered cards with a hard shadow.
   Loaded after sales.css on body.oto-a; only changes the look, never the copy. */
body.oto-a { --ink: #1d2b4f; --blue: #2a8fd6; --coral: #ff6b4a; --sun: #ffc93c; --mint: #2fb98a; --paper: #fdf6ea;
  background: var(--paper); background-image: radial-gradient(rgba(29,43,79,.06) 1px, transparent 1px); background-size: 22px 22px; color: var(--ink); }
.oto-a h1, .oto-a h2, .oto-a h3 { color: var(--ink) !important; font-family: 'Fredoka', 'Nunito', sans-serif; }

/* top bar + header */
.oto-a .oto-bar { background: var(--ink); color: #fff; font-size: 15px; padding: 11px 14px; letter-spacing: .02em; }
.oto-a .oto-bar span { color: var(--sun); }
.oto-a .s-top { background: transparent; padding: 14px 0; }
.oto-a .s-top .brand-mark img { width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); }
.oto-a .s-top .brand b { font: 700 20px 'Fredoka', sans-serif; color: var(--ink); }
.oto-a .oto-steps span { background: #fff; color: #6a7390; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font-weight: 800; }
.oto-a .oto-steps span.done { background: #e9f9f1; color: #138a5e; }
.oto-a .oto-steps span.on { background: var(--coral); color: #fff; }

/* hero */
.oto-a .dr-hero { background: radial-gradient(circle at 12% 20%, #ffe1d6 0, transparent 34%), radial-gradient(circle at 88% 16%, #dff0ff 0, transparent 36%), radial-gradient(circle at 50% 100%, #fff1c2 0, transparent 40%); padding: 30px 0 60px; }
.oto-a .dr-pre { background: #fff; color: var(--ink); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font-size: 13px; letter-spacing: .1em; }
.oto-a .dr-hero h1 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.08; }
.oto-a .dr-hero h1 em { color: var(--blue); background: linear-gradient(transparent 64%, #ffe07a 64%); }
.oto-a .dr-sub { color: #4a5372; }
.oto-a .dr-hero-img img, .oto-a .dr-shot img, .oto-a .dr-row > img, .oto-a .dr-fig img, .oto-a .dr-box-img img {
  border: 2px solid var(--ink); border-radius: 18px; box-shadow: 6px 7px 0 var(--ink); background: #fff; }
.oto-a .dr-ticks { gap: 10px; }
.oto-a .dr-ticks li { border: 2px solid var(--ink); border-radius: 12px; padding: 6px 12px; font-weight: 800; font-size: 14px; color: var(--ink); background: #e9f9f1; box-shadow: 2px 2px 0 var(--ink); }
.oto-a .dr-ticks li:nth-child(2) { background: #e7f4ff; } .oto-a .dr-ticks li:nth-child(3) { background: #fff3c4; } .oto-a .dr-ticks li:nth-child(4) { background: #ffe7ef; }

/* before → after strip */
.oto-a .dr-kdp > div:not(.arrow) { border: 2px solid var(--ink) !important; box-shadow: 4px 5px 0 var(--ink); border-radius: 16px; }
.oto-a .dr-kdp .by-hand { background: #fff; } .oto-a .dr-kdp .with-kit { background: #e9f9f1; }
.oto-a .dr-kdp b { color: var(--ink); } .oto-a .dr-kdp .arrow { color: var(--coral); }

/* the buy button: coral, ink border, hard shadow, zooming in and out */
.oto-a .buy-btn { background: var(--coral); border: 2.5px solid var(--ink); border-radius: 18px; box-shadow: 6px 7px 0 var(--ink); padding: 18px 42px 14px;
  animation: otoZoom 1.6s ease-in-out infinite !important; }
.oto-a .buy-btn:hover { animation-play-state: paused !important; box-shadow: 8px 9px 0 var(--ink); }
.oto-a .buy-btn:active { transform: translate(3px, 4px); box-shadow: 2px 3px 0 var(--ink); }
.oto-a .bb-main { text-shadow: none; }
.oto-a .bb-main::after { content: ''; }
@keyframes otoZoom { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.oto-a .dr-pay { color: #5d6683; }
.oto-a .dr-skip { color: #6a7390 !important; }

/* sections */
.oto-a .dr-sec { padding: 70px 0; }
.oto-a .dr-sec.alt { background: rgba(255,255,255,.55); border-top: 2px dashed rgba(29,43,79,.15); border-bottom: 2px dashed rgba(29,43,79,.15); }
.oto-a .dr-sec h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; }
.oto-a .dr-sec p { color: #4a5372; }
.oto-a .dr-kicker { display: table; margin: 0 auto 12px; color: var(--ink); background: #fff3c4; border: 2px solid var(--ink); border-radius: 999px; padding: 6px 14px; font-size: 12px; letter-spacing: .1em; box-shadow: 2px 2px 0 var(--ink); }
.oto-a .dr-big { color: var(--ink) !important; border-left: 0; padding: 16px 20px; background: #fff3c4; border: 2px solid var(--ink); border-radius: 16px; box-shadow: 4px 5px 0 var(--ink); }
.oto-a .dr-pains div, .oto-a .dr-why div, .oto-a .dr-step, .oto-a .dr-who > div {
  background: #fff; border: 2px solid var(--ink); border-radius: 18px; box-shadow: 4px 5px 0 var(--ink); }
.oto-a .dr-pains div:nth-child(4n+1) { background: #fff; } .oto-a .dr-pains div:nth-child(4n+2) { background: #fff9e8; }
.oto-a .dr-pains div:nth-child(4n+3) { background: #f2f8ff; } .oto-a .dr-pains div:nth-child(4n+4) { background: #fff3f6; }
.oto-a .dr-pains b, .oto-a .dr-why b { color: var(--ink); }
.oto-a .dr-why div { border-top: 8px solid var(--blue); } .oto-a .dr-why div:nth-child(3n+2) { border-top-color: var(--coral); } .oto-a .dr-why div:nth-child(3n+3) { border-top-color: var(--mint); }
.oto-a .dr-why.four div:nth-child(4) { border-top-color: var(--sun); }
.oto-a .dr-step .n { background: var(--sun); color: var(--ink); border: 2px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); }
.oto-a .dr-step img { border: 2px solid var(--ink); object-fit: contain; background: #fff; }

/* feature rows */
.oto-a .dr-row.hl { background: #fff; border: 2px solid var(--ink); border-radius: 22px; box-shadow: 6px 7px 0 var(--ink); }
.oto-a .dr-row.hl > img { box-shadow: none; }
.oto-a .dr-tag { background: var(--coral); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.oto-a .dr-row ul { color: #4a5372; }

/* page grid */
.oto-a .dr-pages figure { background: #fff; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 4px 5px 0 var(--ink); padding: 10px 10px 8px; }
.oto-a .dr-pages img { box-shadow: none; border-radius: 8px; border: 1px solid #e3e6ef; }
.oto-a .dr-pages figcaption { color: var(--ink); font-size: 14px; }
.oto-a .dr-note { color: #6a7390 !important; }

/* tables */
.oto-a .dr-vs, .oto-a .dr-stack { border: 2px solid var(--ink); border-radius: 18px; box-shadow: 5px 6px 0 var(--ink); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.oto-a .dr-vs th { background: var(--ink); }
.oto-a .dr-vs td:nth-child(3) { color: #138a5e; }
.oto-a .dr-stack tr.tot td { background: var(--ink); }
.oto-a .dr-price .now { color: var(--coral); font-size: 72px; text-shadow: 3px 3px 0 var(--ink); -webkit-text-stroke: 1.5px var(--ink); }

/* guarantee with the rosette seal */
.oto-a .dr-guar { background: #fff; border: 2px solid var(--ink); border-radius: 22px; box-shadow: 6px 7px 0 var(--ink); padding: 26px 30px; }
.oto-a .oto-seal { flex: none; width: 170px; }
.oto-a .oto-seal .fe-seal { width: 100%; height: auto; display: block; filter: drop-shadow(3px 5px 0 rgba(29,43,79,.9)); animation: otoSeal 4s ease-in-out infinite; }
@keyframes otoSeal { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(4deg); } }

/* FAQ, final */
.oto-a .faq details { background: #fff; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 3px 4px 0 var(--ink); margin-bottom: 12px; padding: 4px 16px; }
.oto-a .faq summary { font-weight: 800; color: var(--ink); }
.oto-a .dr-final { background: radial-gradient(circle at 15% 20%, #ffe1d6 0, transparent 40%), radial-gradient(circle at 85% 80%, #dff0ff 0, transparent 40%); }
.oto-a .dr-ps { background: #fff; border: 2px solid var(--ink); border-left: 2px solid var(--ink); border-radius: 16px; box-shadow: 4px 5px 0 var(--ink); }
.oto-a .s-foot { background: transparent; }

@media (max-width: 760px) {
  .oto-a .dr-guar { flex-direction: column; text-align: center; }
  .oto-a .oto-seal { width: 150px; }
  .oto-a .buy-btn { padding: 16px 20px 12px; }
  .oto-a .dr-price .now { font-size: 58px; }
}
.oto-a .dr-stack + p, .oto-a .dr-stack + .dr-center { margin-top: 22px; }
.oto-a .faq details { padding: 10px 18px; } .oto-a .faq details[open] summary { margin-bottom: 6px; }
.oto-a .dr-price .was { color: #8a93ad; }