/* /thank-you/ — the page Stripe returns a contributor to.
   Inherits everything from chapter.css; this is only the page's own shape. */

.stf-thanks{min-height:100vh;display:flex;flex-direction:column}
.stf-thanks-main{flex:1;padding-top:88px;padding-bottom:88px;max-width:700px}

.stf-thanks h1{font-family:var(--font-display);font-size:3rem;margin:0 0 28px}

.stf-thanks-body p{font-size:1.125rem;line-height:1.7;margin:0 0 24px;text-wrap:pretty}
.stf-thanks-body p:first-child{font-size:1.25rem;color:var(--text-secondary)}

.stf-thanks-back{margin:40px 0 0}

.stf-btn{display:inline-block;font-family:var(--font-display);font-weight:600;font-size:1rem;
  padding:15px 28px;border-radius:8px;text-decoration:none;border:1.5px solid transparent}
.stf-btn-outline{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.stf-btn-outline:hover{background:var(--accent-warm);color:var(--white);border-color:var(--accent-warm)}

@media (max-width:600px){
  .stf-thanks h1{font-size:2.25rem}
  .stf-thanks-main{padding-top:56px}
  .stf-btn{width:100%;text-align:center}
}


/* --- the card, and the pattern artwork behind it ---------------------------
   Same construction as /book-login/ and /register/, deliberately - see
   login.css for the full reasoning.

   The two load-bearing bits, repeated because they are easy to delete by
   mistake: url() is relative to THIS FILE (../../ reaches wp-content/), and
   isolation:isolate is what stops the z-index:-1 artwork escaping to the root
   and painting behind .stf-chapter's white background, where it vanishes.

   The column was widened 640 -> 700 to absorb the card's 48px inset, so the
   text measure here is what it always was. */

.stf-thanks-card{
  box-sizing:border-box;
  position:relative;
  isolation:isolate;
  background:transparent;
  border-radius:14px;
  padding:48px 48px 52px}

.stf-thanks-card::before{
  content:'';
  position:absolute;
  z-index:-1;
  height:72.6vh;
  width:48.4vh;                    /* height x the art's 432:648 ratio - keep these in step */
  top:-56px;
  right:calc(100% - 5px);
  background-image:url('../../uploads/stf-pattern/PatternExport_081326-23.svg');
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  pointer-events:none}

@media (max-width:900px){
  .stf-thanks-card::before{display:none}
}
@media (max-width:600px){
  .stf-thanks-card{padding:32px 24px 36px;border-radius:10px}
}