.screen-generating,.screen-preview{display:flex;align-items:center;justify-content:center}
.screen-paywall{display:flex;align-items:stretch;justify-content:center;padding-top:var(--sp-5);padding-bottom:var(--sp-5)}

.pencil-sketch-defs{position:absolute;width:0;height:0;overflow:hidden}

.pencil-hatch{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.13;
  background-image:repeating-linear-gradient(45deg, var(--ink) 0, var(--ink) 1px, transparent 1px, transparent 12px),repeating-linear-gradient(-45deg, var(--ink) 0, var(--ink) 1px, transparent 1px, transparent 16px)}

.co-gen{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);width:100%;max-width:340px;text-align:center}
.co-gen-title{font-family:var(--font-display);font-size:var(--fs-h2);line-height:1.2;min-height:108px;margin:0}

.co-gen-frame{position:relative;width:240px;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-sunken);box-shadow:var(--shadow-md);filter:blur(0) saturate(1) brightness(1)}
.co-gen-frame::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;mix-blend-mode:overlay;background-image:var(--grain)}

.co-gen-progress{width:100%;max-width:240px;height:3px;border-radius:var(--r-pill);background:var(--paper-sunken);overflow:hidden}
.co-gen-progress-fill{position:relative;height:100%;width:0;background:var(--accent);border-radius:var(--r-pill);transition:width linear;overflow:hidden}
.co-gen-progress-fill::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-120%);animation:co-gen-shine 1.8s ease-in-out infinite}
.co-gen-stage-row{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);box-sizing:border-box;min-height:72px;padding:0 var(--sp-2)}
.co-gen-stage{line-height:1.3;font-size:var(--fs-small);font-weight:600;color:var(--sky-ink-soft);margin:0;transition:opacity .3s var(--ease)}
.co-gen-dots{display:inline-flex;gap:4px;align-items:center;flex-shrink:0}
.co-gen-dot{width:5px;height:5px;border-radius:50%;background:var(--sky-gold);animation:co-gen-dot-wave 1.4s ease-in-out infinite}
.co-gen-dot:nth-child(2){animation-delay:.16s}
.co-gen-dot:nth-child(3){animation-delay:.32s}
.co-gen-fact{width:100%;box-sizing:border-box;min-height:64px;line-height:1.3;font-size:var(--fs-caption);color:var(--sky-ink-faint);margin:0;padding:0 var(--sp-2);transition:opacity .3s var(--ease)}
.co-gen-caption{font-size:var(--fs-caption);color:var(--sky-ink-faint);margin:0}

@keyframes co-gen-shine{from{transform:translateX(-120%)}to{transform:translateX(220%)}}
@keyframes co-gen-dot-wave{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

.co-preview{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;gap:var(--sp-5);text-align:center}
.co-preview-title{font-family:var(--font-display);font-size:var(--fs-h2);line-height:1.2;margin:0}
.co-preview-frame{position:relative;width:220px;margin:0 auto;aspect-ratio:3/4;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-sunken);box-shadow:var(--shadow-md)}
.co-preview-frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);filter:blur(18px) saturate(.55) brightness(.9);opacity:0;transition:opacity var(--dur-2) var(--ease)}
.co-preview-frame img.co-preview-img--ready{opacity:1;animation:co-preview-breathe 8s ease-in-out infinite alternate}

@keyframes co-preview-breathe{from{filter:blur(18px) saturate(.55) brightness(.9)}to{filter:blur(22px) saturate(.55) brightness(.88)}}
.co-preview-grain{position:absolute;inset:0;opacity:.3;mix-blend-mode:overlay;background-image:var(--grain)}
.co-preview-lock{position:absolute;left:var(--sp-3);right:var(--sp-3);bottom:var(--sp-3);background:var(--ink);color:var(--paper-raised);font-size:var(--fs-caption);font-weight:700;text-align:center;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-pill)}
.co-preview-chips{list-style:none;margin:0;padding:0;width:100%;max-width:280px;display:flex;flex-direction:column;gap:var(--sp-2)}
.co-preview-chip{background:var(--paper-raised);border:1px solid var(--line);box-shadow:var(--shadow-sm);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-caption);font-weight:700;color:var(--ink-soft);text-align:left;animation:co-preview-chip-in .4s var(--ease) both}
.co-preview-chip:nth-child(1){animation-delay:.05s}
.co-preview-chip:nth-child(2){animation-delay:.15s}
.co-preview-chip:nth-child(3){animation-delay:.25s}
.co-preview-chip:nth-child(4){animation-delay:.35s}
.co-preview-chip:nth-child(5){animation-delay:.45s}

@keyframes co-preview-chip-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.co-preview-note{font-size:var(--fs-small);color:var(--sky-ink-faint);margin:0}
.co-preview-cta{max-width:320px}

.co-pay{width:100%;max-height:100%;display:flex}
.co-pay-card{position:relative;width:100%;max-height:calc(100dvh - var(--sp-5) * 2);background:var(--paper-raised);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:var(--sp-6) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4);overflow:hidden;animation:co-pay-card-in .45s var(--ease) both}

@keyframes co-pay-card-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.co-pay-grain{position:absolute;inset:0;z-index:-1;opacity:.22;mix-blend-mode:overlay;background-image:var(--grain);pointer-events:none}
.co-pay-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-4);text-align:center}
.co-pay-teaser{position:relative;width:96px;margin:0 auto;aspect-ratio:3/4;border-radius:var(--r-md);overflow:hidden;background:var(--paper-sunken);box-shadow:var(--shadow-sm)}
.co-pay-teaser-img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);filter:blur(16px) saturate(.55) brightness(.9)}
.co-pay-teaser-lock{position:absolute;left:0;right:0;bottom:0;background:var(--ink);color:var(--paper-raised);font-size:10px;font-weight:700;text-align:center;padding:4px 2px}
.co-pay-label{font-size:var(--fs-caption);font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint)}
.co-pay-price{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-3) 0}
.co-pay-price-value{font-family:var(--font-display);font-size:var(--fs-display);font-weight:700;color:var(--gold)}
.co-pay-price-row{display:flex;align-items:baseline;justify-content:center;gap:var(--sp-2)}
.co-pay-price-old{position:relative;display:inline-block;color:var(--ink-faint);font-size:var(--fs-body)}
.co-pay-price-old::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--ink-faint);transform:scaleX(0);transform-origin:left;animation:co-pay-strike .3s ease-out .1s forwards}
.co-pay-price-total{font-size:var(--fs-body);font-weight:800;color:var(--ink)}

@keyframes co-pay-strike{to{transform:scaleX(1)}}

.co-pay-promo{display:flex;flex-direction:column;gap:var(--sp-1);padding-bottom:var(--sp-3);border-bottom:1px solid var(--line)}
.co-pay-promo-row{display:flex;gap:var(--sp-2)}
.co-pay-promo-input{
  flex:1;
  min-width:0;
  padding:14px var(--sp-4);
  border:1px solid var(--line-strong);
  border-radius:var(--r-pill);
  background:var(--paper-raised);
  color:var(--ink);
  font-size:var(--fs-body);
}
.co-pay-promo-apply{width:auto;padding:14px var(--sp-5);}
.co-pay-promo-hint{font-size:var(--fs-caption);color:var(--ink-faint)}
.co-pay-promo-msg{min-height:1.4em;margin:0;font-size:var(--fs-small);color:var(--ink-faint)}
.co-pay-promo-msg--error{color:var(--accent)}
.co-pay-promo-applied{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.co-pay-promo-applied-text{font-size:var(--fs-small);font-weight:700;color:var(--success)}
.co-pay-promo-toggle{flex:0 0 auto;background:none;border:0;padding:0;font-size:var(--fs-caption);color:var(--ink-faint);text-decoration:underline}

.co-gift-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:var(--gutter);background:var(--scrim);backdrop-filter:blur(3px);animation:co-gift-overlay-in var(--dur-2) var(--ease) both}
.co-gift-card{position:relative;width:100%;max-width:300px;background:var(--paper-raised);color:var(--ink);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:var(--sp-6) var(--sp-5);display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);text-align:center;overflow:hidden;border:1px solid var(--gold-soft);animation:co-gift-card-in var(--dur-3) var(--ease-spring) both}
.co-gift-card::before{content:"";width:40px;height:2px;border-radius:var(--r-pill);background:var(--gold);order:-1}
.co-gift-grain{position:absolute;inset:0;opacity:.2;mix-blend-mode:overlay;background-image:var(--grain);pointer-events:none}
.co-gift-spark{font-size:26px;line-height:1;color:var(--gold);text-shadow:0 0 14px var(--gold-soft)}
.co-gift-title{font-family:var(--font-display);font-size:var(--fs-h3);margin:0}
.co-gift-text{font-size:var(--fs-body);color:var(--ink-soft);margin:0}
.co-gift-code{color:var(--gold-strong)}
.co-gift-cta{margin-top:var(--sp-2)}
.co-gift-close{background:none;border:0;padding:var(--sp-1);font-size:var(--fs-caption);color:var(--ink-faint);text-decoration:underline}
.co-gift-fine{font-size:11px;color:var(--ink-soft);margin:0}

@keyframes co-gift-overlay-in{from{opacity:0}to{opacity:1}}
@keyframes co-gift-card-in{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
.co-pay-includes{list-style:none;margin:0;padding:var(--sp-4) 0;display:flex;flex-direction:column;gap:var(--sp-2);text-align:left;font-size:var(--fs-body);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.co-pay-includes li{position:relative;padding-left:var(--sp-5)}
.co-pay-includes li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--trust)}
.co-pay-personal{font-family:var(--font-script);font-style:italic;font-size:var(--fs-body-lg);color:var(--ink-soft);margin:0}
.co-pay-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2)}
.co-pay-badge{font-size:var(--fs-caption);font-weight:700;color:var(--ink-soft);background:var(--paper-sunken);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--sp-1) var(--sp-3)}
.co-pay-line{font-size:var(--fs-small);color:var(--ink-soft);margin:0}
.co-pay-merchant{display:flex;flex-direction:column;gap:var(--sp-1);font-size:var(--fs-caption);color:var(--ink-faint);border-top:1px solid var(--line);padding-top:var(--sp-3)}
.co-pay-merchant p{margin:0}
.co-pay-footer{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--sp-2);text-align:center;padding-top:var(--sp-2);padding-bottom:env(safe-area-inset-bottom)}

.co-pay-cta{margin:0}
.co-pay-consent-note{font-size:var(--fs-caption);color:var(--ink-faint);margin:0}
.co-pay-email-note{font-size:var(--fs-caption);color:var(--ink-faint);margin:0}
.co-pay-fine{font-size:var(--fs-caption);color:var(--ink-faint);margin:0}
.co-pay-legal{font-size:var(--fs-caption);color:var(--ink-soft);line-height:1.4;margin:0}
.co-pay-offer{color:inherit;text-decoration:underline}