/* Desktop v12 and mobile v0.4. Loaded only for the authenticated journey/password UI. */
.campaign--journey {
 background: #004def url("brand/tnl-pattern-v12.svg") center top / 100% auto no-repeat;
}
.campaign--journey .screen--access .screen-content { max-width: 672px; }
.campaign--journey .site-header nav { top: 28px; right: 40px; gap: 40px; font-size: 20px; }
.campaign--journey .screen--access h1 { max-width: 650px; }
.campaign--journey .how-to { margin: 36px 0 0; }
.campaign--journey .how-to h2 { margin: 0 0 14px; font-size: 22px; line-height: 1.2; }
.campaign--journey .how-to__note { margin: 0 0 18px; font-size: 18px; line-height: 1.2; }
.campaign--journey .how-to__placeholder {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 24px;
 aspect-ratio: 2.02;
 border: 1px solid rgb(255 255 255 / 65%);
 border-radius: 10px;
 background: rgb(0 0 128 / 65%);
}
.campaign--journey .how-to__play { display: block; font-size: 72px; line-height: 1; }
.campaign--journey .how-to__placeholder p { margin: 0; font-size: 18px; }
.campaign--journey .screen--access .campaign-help { max-width: none; margin: 36px 0 0; font-size: 22px; font-weight: 700; line-height: 1.2; }
.campaign--journey .screen--access .campaign-help a { display: inline; text-decoration: none; overflow-wrap: anywhere; }
.campaign--journey .access-continue { margin-top: 34px; }
.campaign--journey .access-continue button { margin-top: 0; }
.campaign--journey .details-intro-mobile { display: none; }
.campaign--journey .screen--upload .intro { font-size: 18px; font-weight: 400; line-height: 1.2; }
.campaign--journey .image-upload #photo-privacy { display: none; } /* Rights guidance is in the introduction. */
.campaign--journey .social-handles { font-size: 11px; overflow-wrap: anywhere; }
.campaign--journey .download-layout { row-gap: 20px; }
.campaign--journey .download-actions { grid-column: 1 / -1; margin-top: 0; }
.campaign--journey .uploaded-photo .photo-preview,
.campaign--journey .asset .photo-preview {
 width: min(100%, 220px);
 height: auto;
 max-height: none;
 aspect-ratio: 1;
 object-fit: cover;
 border-radius: 50%;
}

@media (max-width: 700px) {
 .campaign--journey { background-image: url("brand/tnl-pattern-mobile-v04.svg"); background-size: 100% auto; }
 .campaign--journey .screen { padding: 58px 23px 40px; }
 .campaign--journey .site-header nav { top: 14px; right: 23px; gap: 16px; font-size: 13.333px; }
 .campaign--journey .campaign-brand { margin-bottom: 24px; }
 .campaign--journey .campaign-brand img { width: 134px; }
 .campaign--journey .step { padding: 10px 12px; margin-bottom: 22px; font-size: 16px; }
 .campaign--journey h1 { font-size: 25px; line-height: 1.2; margin-bottom: 18px; overflow-wrap: normal; }
 .campaign--journey .intro { font-size: 17.333px; line-height: 1.2; margin-bottom: 18px; }
 .campaign--journey .screen--details .intro { margin-bottom: 10px; }
 .campaign--journey .details-intro-desktop { display: none; }
 .campaign--journey .details-intro-mobile { display: inline; }
 .campaign--journey .form-note { font-size: 13.333px; line-height: 1.2; margin-bottom: 24px; }
 .campaign--journey .field { margin-bottom: 22px; }
 .campaign--journey .field label { font-size: 17.333px; line-height: 1.2; margin-bottom: 8px; }
 .campaign--journey .optional-label { font-size: 13.333px; }
 .campaign--journey input, .campaign--journey textarea { font-size: 16px; padding: 6px 9px; line-height: 1.2; }
 .campaign--journey .currency-input span { top: 6px; left: 9px; font-size: 16px; }
 .campaign--journey .currency-input input { padding-left: 23px; }
 .campaign--journey .field-hint { font-size: 10.667px; line-height: 1.2; margin-top: 12px; }
 .campaign--journey .textarea-wrap textarea { min-height: 90px; padding-bottom: 9px; }
 .campaign--journey .character-count { font-size: 11px; margin-top: 8px; }
 .campaign--journey .screen button, .campaign--journey .screen .button { min-width: 92px; min-height: 34px; padding: 6px 12px; font-size: 16.667px; line-height: 1.2; border-radius: 6px; }
 .campaign--journey .how-to { margin-top: 18px; }
 .campaign--journey .how-to h2 { margin-bottom: 12px; font-size: 17.333px; }
 .campaign--journey .how-to__note { margin-bottom: 10px; font-size: 13.333px; }
 .campaign--journey .how-to__placeholder { gap: 14px; border-radius: 5px; }
 .campaign--journey .how-to__play { font-size: 38px; }
 .campaign--journey .how-to__placeholder p { font-size: 10.667px; }
 .campaign--journey .screen--access .campaign-help { margin-top: 20px; font-size: 17.333px; }
 .campaign--journey .screen--access .campaign-help a { display: block; margin-top: 4px; font-size: 13.333px; font-weight: 400; }
 .campaign--journey .access-continue { margin-top: 24px; }
 .campaign--journey .screen--upload h1 { font-size: clamp(22px, 6.667vw, 36px); letter-spacing: -.3px; }
 .campaign--journey .screen--upload .intro { font-size: 13.333px; line-height: 1.2; }
 .campaign--journey .image-upload { margin: 24px 0 18px; padding: 22px 24px 18px; }
 .campaign--journey .upload-icon { width: 40px; height: 30px; margin-bottom: 8px; }
 .campaign--journey .image-upload > label:not(.file-picker) { font-size: 13.333px; margin-bottom: 8px; }
 .campaign--journey .image-upload .file-picker { width: 110px; min-height: 26px; margin-bottom: 10px; border-radius: 5px; font-size: 10.667px; }
 .campaign--journey #upload-guidance { font-size: 10.667px; line-height: 1.2; }
 .campaign--journey .upload-continue { font-size: 13.333px; margin-bottom: 20px; }
 .campaign--journey .step-actions { margin-top: 0; gap: 8px; }
 .campaign--journey .campaign-help { margin-top: 20px; font-size: 13.333px; line-height: 1.2; }
 .campaign--journey .campaign-help a { overflow-wrap: anywhere; }
 .campaign--journey .preview-layout { gap: 24px; margin-top: 24px; }
 .campaign--journey .asset { width: 200px; max-width: 100%; min-height: 314px; padding: 34px 19px 42px; margin: 0 auto; }
 .campaign--journey .asset-note { font-size: 10.667px; line-height: 1.2; }
 .campaign--journey .asset-copy { padding: 40px 0; }
 .campaign--journey .asset-copy h2 { font-size: 17.333px; line-height: 1.2; margin-bottom: 14px; }
 .campaign--journey .asset-copy p { font-size: 13.333px; line-height: 1.2; }
 .campaign--journey .preview-actions { padding: 0; background: transparent; border-radius: 0; }
 .campaign--journey .preview-actions h2 { width: 240px; min-height: 138px; margin-bottom: 20px; padding: 30px; font-size: 25px; }
 .campaign--journey .preview-actions p { max-width: none; margin-bottom: 20px; font-size: 17.333px; }
 .campaign--journey .preview-actions .preview-edit-form { flex-direction: row; justify-content: center; gap: 12px; }
 .campaign--journey .preview-edit-form button { flex: 1 1 0; width: auto; min-width: 0; padding: 8px 5px; font-size: 13.333px; }
 .campaign--journey .generate-form { align-items: center; gap: 12px; margin-top: 12px; }
 .campaign--journey .generate-form .consent-row { flex: auto; align-self: stretch; gap: 8px; }
 .campaign--journey .consent-row label { font-size: 10.667px; line-height: 1.3; }
 .campaign--journey .consent-row input[type="checkbox"] { flex-basis: 16px; width: 16px; height: 16px; margin-top: 0; }
 .campaign--journey .generate-form [data-consent-submit] { min-width: 82px; font-size: 13.333px; min-height: 28px; }
 .campaign--journey .preview-terms { margin-top: 24px; padding-top: 24px; }
 .campaign--journey .preview-terms h2 { margin-bottom: 12px; font-size: 17.333px; }
 .campaign--journey .terms-copy { font-size: 13.333px; line-height: 1.2; }
 .campaign--journey .download-layout { gap: 24px; margin-top: 0; }
 .campaign--journey .download-layout .video-preview { max-width: none; padding-top: 24px; grid-row: 1; }
 .campaign--journey .video-preview summary { font-size: 13.333px; }
 .campaign--journey .download-layout .generated-video { width: 100%; aspect-ratio: 985 / 1360; object-fit: contain; }
 .campaign--journey .download-actions { grid-row: 2; gap: 8px; }
 .campaign--journey .download-card { grid-row: 3; padding: 26px; }
 .campaign--journey .download-card .download-cause { margin-bottom: 16px; font-size: 17.333px; }
 .campaign--journey .download-card h3 { margin-bottom: 18px; font-size: 17.333px; }
 .campaign--journey .download-card p { margin-bottom: 16px; font-size: 13.333px; line-height: 1.2; }
 .campaign--journey .social-handles { font-size: 8.667px; line-height: 1.2; }
 .campaign--journey .logout { margin-top: 44px; }
 .campaign--journey .screen .text-button { min-width: 0; min-height: 24px; padding: 0; font-size: 13.333px; }
}