/* Colorivinette Boutique */
.hl-pink{color:var(--pink)}.hl-teal{color:var(--teal)}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center;padding-top:16px}
.hero .lead{font-size:1.18rem;color:var(--ink-soft);max-width:560px}
.hero h1{margin:6px 0 22px}
.reassure{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.reassure li{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 12px;font-weight:750;font-size:.9rem;display:inline-flex;align-items:center;gap:8px}
.reassure li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--teal)}
.reassure li:nth-child(2)::before{background:var(--orange)}.reassure li:nth-child(3)::before{background:var(--violet)}
.hero-visual{position:relative;margin:0;padding:18px}
.hero-photo{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 70%;border-radius:36px;border:6px solid #fff;box-shadow:0 26px 60px rgba(27,42,92,.16);position:relative;z-index:1;background:var(--peach)}
.hero-visual figcaption{position:relative;z-index:1;font-size:.78rem;color:var(--muted);text-align:right;margin-top:8px;padding-right:12px}
.blob{position:absolute;border-radius:50%;z-index:0}
.blob-a{width:150px;height:150px;background:var(--sun);top:-6px;right:-10px;opacity:.85}
.blob-b{width:110px;height:110px;background:var(--pink);bottom:30px;left:-14px;opacity:.75}
.blob-c{width:70px;height:70px;background:var(--teal);top:40%;right:-22px;opacity:.7}
.today-note{position:absolute;z-index:2;left:-6px;top:44px;background:var(--paper);border-radius:18px;padding:12px 16px;font-weight:800;font-size:.92rem;box-shadow:0 14px 34px rgba(27,42,92,.15);display:flex;align-items:center;gap:10px;max-width:250px}
.dot{width:14px;height:14px;border-radius:50%;flex:none}.dot-orange{background:var(--orange)}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px;position:relative;overflow:hidden}
.step h3{margin-top:14px}
.step p{color:var(--ink-soft);margin:0}
.step-num{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:18px;font-weight:900;font-size:1.4rem;color:#fff}
.step-violet .step-num{background:var(--violet)}.step-orange .step-num{background:#c76a00}.step-teal .step-num{background:var(--teal)}
.step-violet{background:linear-gradient(180deg,#fff 60%,var(--lavender))}.step-orange{background:linear-gradient(180deg,#fff 60%,var(--peach))}.step-teal{background:linear-gradient(180deg,#fff 60%,var(--mint))}

.preview-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:stretch}
.preview-card{border-radius:var(--radius);padding:28px;border:1px solid var(--line);display:flex;flex-direction:column}
.preview-card h3{margin-bottom:14px}
.preview-card .quiet{margin-top:auto;margin-bottom:0;padding-top:14px}
.preview-coloring{background:var(--paper)}
.preview-coloring img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--line);background:#fff}
.preview-riddle{background:var(--peach)}.preview-solution{background:var(--lavender)}
.riddle-sample{font-size:1.3rem;font-weight:800;line-height:1.4}
.tag{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;font-weight:850;color:var(--ink-soft);margin:0 0 6px}

.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.plan{background:var(--paper);border:2px solid var(--line);border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column;position:relative}
.plan h3{font-size:1.5rem;margin:0}
.plan .ribbon{position:absolute;top:-14px;left:28px;background:var(--violet);color:#fff;border-radius:999px;padding:4px 14px;font-size:.8rem;font-weight:850}
.plan.featured{border-color:var(--violet);box-shadow:0 22px 50px rgba(91,54,214,.16)}
.plan-duration{display:inline-block;width:fit-content;border-radius:999px;padding:3px 12px;font-weight:850;font-size:.85rem;margin-bottom:12px}
.plan:nth-child(1) .plan-duration{background:var(--mint);color:#0a5e50}.plan:nth-child(2) .plan-duration{background:var(--peach);color:#8a4500}.plan:nth-child(3) .plan-duration{background:var(--lavender);color:var(--violet-dark)}
.price{font-size:2.9rem;font-weight:900;line-height:1.1;margin:18px 0 4px;letter-spacing:-.02em}
.price-note{font-weight:700;color:var(--ink-soft);margin:0}
.monthly{font-size:.88rem;color:var(--muted);margin:2px 0 16px}
.plan ul{list-style:none;margin:0 0 22px;padding:0}
.plan li{padding:6px 0 6px 28px;position:relative}
.plan li::before{content:"";position:absolute;left:2px;top:13px;width:12px;height:7px;border-left:3px solid var(--teal);border-bottom:3px solid var(--teal);transform:rotate(-45deg)}
.plan button{margin-top:auto;width:100%}

.checkout-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:start}
.checkout-form-card .submit{width:100%;margin-top:24px}
.summary-card{background:var(--mint);border-radius:var(--radius);padding:28px}
.summary-card .h3{font-size:1.35rem}
.summary-line{font-size:1.2rem;font-weight:850;margin-bottom:14px}
.summary-list{padding-left:20px;margin:0 0 16px}
.summary-list li{margin:4px 0}
.payment-card{max-width:860px}
.checkout-state{font-weight:800;font-size:1.1rem}

.receipt-card{background:var(--paper);border-radius:var(--radius);padding:30px;border:2px solid var(--line);max-width:860px;box-shadow:var(--shadow)}
.receipt-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.receipt-head img{border-radius:16px;flex:none}
.receipt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 24px;margin:18px 0}
.receipt-grid div{padding:10px 0;border-bottom:1px solid var(--line)}
.receipt-grid dt{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;font-weight:850;color:var(--muted)}
.receipt-grid dd{margin:2px 0 0;font-weight:750;overflow-wrap:anywhere}
.code-label{font-weight:850;margin:18px 0 8px}
.receipt-warning{background:var(--peach);border-radius:var(--radius-sm);padding:14px 16px;margin:16px 0 8px;font-weight:700}
.documents{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.documents a{display:inline-flex;align-items:center;gap:8px;background:var(--lavender);color:var(--violet-dark);border-radius:999px;padding:10px 16px;font-weight:800;text-decoration:none;min-height:44px}
.documents a:hover{background:#ddd3ff}
.documents p{margin:0;padding:10px 0}

.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 32px}
.faq details{border-bottom:1px solid var(--line-strong);padding:16px 0}
.faq summary{font-weight:800;cursor:pointer;min-height:28px;list-style:none;display:flex;justify-content:space-between;gap:16px}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--lavender);color:var(--violet-dark);font-weight:900}.faq details[open] summary::after{content:"−"}
.faq details p{margin:10px 0 0;color:var(--ink-soft)}

.member-band{display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--navy);color:#fff;border-radius:var(--radius);padding:34px 36px}
.member-band h2{color:#fff;margin-bottom:6px}
.member-band p{margin:0;color:#dfe3f3}
.member-band .button{background:var(--sun);color:var(--navy)}
.member-band .button:hover{background:#ffd866;color:var(--navy)}
.member-band :focus-visible{outline-color:#fff}

.withdrawal-card{max-width:760px;margin-inline:auto}
.withdrawal-card .help{color:var(--muted);font-size:.92rem;margin:4px 0 14px}
.withdrawal-card textarea{width:100%}
.legal-page{max-width:820px;margin-inline:auto}
.legal-page h2{margin-top:28px}
.legal-page ul{padding-left:22px}
.legal-links{list-style:none;padding:0;margin-top:32px;display:flex;flex-wrap:wrap;gap:8px 20px;font-weight:750}
.footer-links{max-width:1180px;margin:0 auto;padding:0 24px 24px;font-weight:750}
@media(max-width:980px){
  .hero{gap:32px}
  .preview-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .preview-coloring{grid-column:1/-1}
  .preview-coloring img{max-width:420px}
  .plans{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:14px}
  .plan{padding:26px 18px}
  .price{font-size:2.3rem}
}
@media(max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-visual{padding:10px 8px;max-width:560px}
  .today-note{position:relative;left:auto;top:auto;margin-top:12px;box-shadow:none;border:1px solid var(--line);max-width:none}
  .blob-a{width:100px;height:100px}.blob-b{width:80px;height:80px;bottom:70px}.blob-c{display:none}
  .steps,.checkout-grid,.faq{grid-template-columns:minmax(0,1fr)}
  .preview-grid{grid-template-columns:minmax(0,1fr)}
  .member-band{flex-direction:column;align-items:flex-start;padding:28px 24px}
  .receipt-card{padding:22px}
  .receipt-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){.plans{grid-template-columns:minmax(0,1fr);gap:26px}.plan{padding:30px 24px}}
@media(max-width:560px){
  .hero .actions .button{width:100%}
  .hero-photo{aspect-ratio:4/3;object-position:45% 75%;border-radius:28px}
  .price{font-size:2.6rem}
  .receipt-head img{width:48px;height:48px}
}
