:root {
    --portal-ink: #28241e;
    --portal-muted: #776f64;
    --portal-cream: #f5f0e7;
    --portal-paper: #fffdf9;
    --portal-gold: #a87935;
    --portal-gold-deep: #805823;
    --portal-gold-soft: #eadcc4;
    --portal-green: #718476;
    --portal-border: rgba(79, 62, 39, .12);
    --portal-shadow: 0 18px 55px rgba(68, 50, 28, .07);
    --portal-display: "Cormorant Garamond", Georgia, serif;
    --portal-body: Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; color: var(--portal-ink); background: radial-gradient(circle at 12% 5%, rgba(212, 183, 133, .14), transparent 26rem), var(--portal-cream); font-family: var(--portal-body); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }

.portal-preview-bar { position: sticky; z-index: 40; top: 0; display: flex; min-height: 58px; padding: .65rem clamp(1rem, 4vw, 3rem); align-items: center; justify-content: center; gap: 2rem; color: #eee8dc; background: #211f1b; box-shadow: 0 6px 24px rgba(0, 0, 0, .16); }
.portal-preview-bar > div { display: grid; gap: .1rem; }
.portal-preview-bar strong { color: #e0bd82; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.portal-preview-bar span { color: #a9a397; font-size: .65rem; }
.portal-preview-bar form { display: flex; align-items: center; gap: .5rem; }
.portal-preview-bar label { color: #bcb5a9; font-size: .65rem; }
.portal-preview-bar select { padding: .45rem 2rem .45rem .65rem; color: #f5f1e9; border: 1px solid #4c463c; border-radius: 8px; background: #302d27; }
.portal-preview-bar a { color: #d7c8ad; font-size: .68rem; text-decoration: none; }

.customer-portal-shell { width: min(1180px, calc(100% - 1.25rem)); margin: 0 auto; }
.portal-brand-header { display: flex; min-height: 80px; padding: 1rem .25rem; align-items: center; justify-content: space-between; gap: 1rem; }
.portal-brand { display: flex; align-items: center; gap: .65rem; color: inherit; text-decoration: none; }
.portal-brand > span { display: grid; width: 38px; height: 38px; place-items: center; color: var(--portal-paper); border-radius: 50%; background: var(--portal-ink); font: 600 1.3rem var(--portal-display); }
.portal-brand strong { font: 600 1.35rem var(--portal-display); letter-spacing: .04em; }
.portal-header-order { display: block; text-align: center; }
.portal-header-order span { display: block; margin-top: .12rem; color: var(--portal-muted); font-size: .56rem; }
.portal-header-order strong { display: block; font: 600 1.08rem var(--portal-display); }
.portal-secure { color: var(--portal-muted); font-size: .68rem; }
.portal-secure i { color: var(--portal-green); }
.portal-eyebrow, .portal-section-heading > span { color: var(--portal-gold); font-size: .63rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }

.portal-order-summary { position: relative; padding: 1.15rem; overflow: hidden; color: #f9f5ed; border-radius: 20px; background: linear-gradient(145deg, #29261f, #3d362c); box-shadow: 0 22px 60px rgba(45, 35, 23, .14); }
.portal-experience-grid { display: grid; grid-template-areas: "summary" "tracking" "timeline" "stage" "products" "details" "saint" "prayer" "help"; gap: .75rem; }
.portal-experience-grid > .portal-order-summary { grid-area: summary; }
.portal-experience-grid > .portal-tracking { grid-area: tracking; }
.portal-experience-grid > .portal-journey { grid-area: timeline; }
.portal-experience-grid > .portal-stage-detail { grid-area: stage; }
.portal-experience-grid > .portal-order-items { grid-area: products; }
.portal-experience-grid > .portal-purchase-details { grid-area: details; }
.portal-experience-grid > .portal-saint { grid-area: saint; }
.portal-experience-grid > .portal-prayer { grid-area: prayer; }
.portal-experience-grid > .portal-help-card { grid-area: help; }
.portal-order-summary::after { position: absolute; width: 230px; height: 230px; top: -140px; right: -90px; content: ""; border: 1px solid rgba(217, 180, 113, .18); border-radius: 50%; box-shadow: 0 0 0 35px rgba(217, 180, 113, .025), 0 0 0 70px rgba(217, 180, 113, .02); }
.portal-summary-heading { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .65rem; }
.portal-summary-heading h1 { margin: .25rem 0 .1rem; font: 500 2.15rem/.95 var(--portal-display); }
.portal-summary-heading p { margin: 0; color: #bdb5a8; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.portal-summary-status { display: inline-flex; width: fit-content; padding: .55rem .75rem; align-items: center; gap: .45rem; color: #ead5ad; border: 1px solid rgba(224, 189, 130, .2); border-radius: 999px; background: rgba(224, 189, 130, .07); font-size: .68rem; }
.portal-summary-status i { animation: portal-status-pulse 3s ease-in-out infinite; }
.portal-summary-grid { position: relative; z-index: 1; display: grid; margin: .9rem 0 0; padding: .85rem 0 0; grid-template-columns: 1fr 1fr; gap: .75rem .65rem; border-top: 1px solid rgba(255, 255, 255, .1); }
.portal-summary-grid div { display: grid; gap: .3rem; }
.portal-summary-grid dt { color: #aaa195; font-size: .58rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.portal-summary-grid dd { margin: 0; font: 600 .9rem var(--portal-display); }
.portal-summary-grid dd small { display: block; margin-top: .15rem; color: #aaa195; font: 400 .58rem var(--portal-body); }
.portal-summary-total { grid-column: 1 / -1; }
.portal-summary-total dd { color: #edcf98; font-size: 1.2rem; }

.portal-journey { position: relative; margin: 0; padding: 1.15rem 0; overflow: hidden; border: 1px solid var(--portal-border); border-radius: 18px; background: rgba(255, 253, 249, .82); box-shadow: var(--portal-shadow); }
.portal-journey .portal-section-heading { padding: 0 1.25rem; }
.portal-section-heading h2 { margin: .32rem 0 0; font: 600 1.8rem/1.05 var(--portal-display); }
.portal-section-heading p { margin: .45rem 0 0; color: var(--portal-muted); font-size: .68rem; line-height: 1.55; }
.portal-timeline { position: relative; display: flex; margin: 1.7rem 0 0; padding: .2rem 1.25rem 1rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--portal-gold-soft) transparent; list-style: none; }
.portal-timeline::before { position: absolute; top: 25px; left: 3rem; width: 1088px; height: 1px; content: ""; background: var(--portal-gold-soft); }
.portal-timeline li { position: relative; flex: 0 0 136px; scroll-snap-align: center; }
.portal-timeline button { display: grid; width: 100%; padding: 0 .35rem; justify-items: center; gap: .4rem; border: 0; outline: 0; background: transparent; text-align: center; cursor: pointer; }
.portal-timeline button:focus-visible { border-radius: 12px; box-shadow: 0 0 0 3px rgba(168, 121, 53, .18); }
.portal-timeline-marker { z-index: 1; display: grid; width: 48px; height: 48px; place-items: center; color: #a9a196; border: 1px solid var(--portal-gold-soft); border-radius: 50%; background: var(--portal-paper); font-size: .7rem; transition: transform .2s ease, box-shadow .2s ease; }
.portal-timeline button:hover .portal-timeline-marker { transform: translateY(-2px); }
.portal-timeline .is-complete .portal-timeline-marker { color: white; border-color: var(--portal-green); background: var(--portal-green); }
.portal-timeline .is-current .portal-timeline-marker { color: var(--portal-gold); border: 6px solid #efe4d2; background: var(--portal-paper); box-shadow: 0 0 0 2px var(--portal-gold); }
.portal-timeline strong { min-height: 2.5em; font: 600 .92rem/1.2 var(--portal-display); }
.portal-timeline .is-future strong { color: #a59e94; font-weight: 500; }
.portal-timeline time, .portal-timeline small { color: #958c81; font-size: .56rem; }
.portal-timeline-continuation { position: absolute; z-index: 2; right: .35rem; bottom: 2.7rem; display: grid; width: 28px; height: 64px; place-items: center; color: var(--portal-gold-deep); background: linear-gradient(90deg, rgba(255, 253, 249, 0), var(--portal-paper) 58%); pointer-events: none; }

.portal-stage-detail { display: grid; min-height: 0; margin: 0; padding: 1.15rem; gap: 1rem; border: 1px solid var(--portal-border); border-radius: 18px; background: linear-gradient(145deg, var(--portal-paper), #fdf8ef); box-shadow: var(--portal-shadow); }
.portal-stage-detail.is-changing { animation: portal-stage-change .28s ease; }
.portal-stage-header { display: flex; align-items: center; gap: .85rem; }
.portal-stage-header > div { min-width: 0; }
.portal-stage-icon { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; color: var(--portal-gold-deep); border: 1px solid var(--portal-gold-soft); border-radius: 50%; background: #f7eddd; box-shadow: 0 8px 24px rgba(128, 88, 35, .08); }
.portal-stage-header h2 { max-width: 760px; margin: .32rem 0 0; font: 600 2.25rem/.95 var(--portal-display); }
.portal-stage-copy { display: grid; align-content: start; gap: .55rem; }
.portal-stage-copy > strong { color: var(--portal-gold-deep); font: 600 1.15rem var(--portal-display); }
.portal-stage-copy p { max-width: 650px; margin: 0; color: var(--portal-muted); font-size: .8rem; line-height: 1.75; }
.portal-stage-copy small { display: block; margin-top: .35rem; color: var(--portal-green); font-size: .62rem; }
.portal-stage-media { width: 100%; }
.portal-stage-video { overflow: hidden; border-radius: 18px; background: #302c25; aspect-ratio: 16 / 9; box-shadow: 0 18px 48px rgba(43, 34, 23, .14); }
.portal-video-poster { position: relative; display: grid; width: 100%; height: 100%; padding: 0; overflow: hidden; place-items: center; color: white; border: 0; background: #302c25; cursor: pointer; }
.portal-video-poster img, .portal-stage-video iframe, .portal-stage-video video { width: 100%; height: 100%; border: 0; object-fit: cover; }
.portal-video-poster::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(29, 25, 20, .55), transparent 60%); }
.portal-video-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #c5a871; background: radial-gradient(circle, #4a4235, #29251f); font-size: 2.2rem; }
.portal-video-play { z-index: 1; display: grid; width: 58px; height: 58px; place-items: center; color: var(--portal-ink); border-radius: 50%; background: #f4dfb9; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); font-size: 1.5rem; transition: transform .2s ease; }
.portal-video-poster:hover .portal-video-play { transform: scale(1.05); }
.portal-video-poster small { position: absolute; z-index: 1; bottom: 1rem; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.portal-stage-video-empty { position: relative; display: grid; padding: 1.25rem; align-content: center; justify-items: center; gap: .55rem; color: #f2e4cc; border: 1px solid rgba(225, 191, 132, .18); background: radial-gradient(circle at 50% 32%, #4b4235, #29251f 68%); text-align: center; }
.portal-stage-video-empty::before { position: absolute; width: 46%; aspect-ratio: 1; content: ""; border: 1px solid rgba(225, 191, 132, .08); border-radius: 50%; box-shadow: 0 0 0 30px rgba(225, 191, 132, .025); }
.portal-stage-video-empty strong, .portal-stage-video-empty small, .portal-video-empty-mark { position: relative; z-index: 1; }
.portal-stage-video-empty strong { font: 600 1.3rem var(--portal-display); }
.portal-stage-video-empty small { max-width: 250px; color: #bdb09c; font-size: .58rem; line-height: 1.5; }
.portal-video-empty-mark { display: grid; width: 58px; height: 58px; place-items: center; color: var(--portal-ink); border-radius: 50%; background: #f4dfb9; box-shadow: 0 10px 30px rgba(0, 0, 0, .24); font-size: 1.4rem; }

.portal-content-grid { display: grid; gap: 1rem; }
.portal-side-column { display: grid; align-content: start; gap: 1rem; }
.portal-card { padding: 1.3rem; border: 1px solid var(--portal-border); border-radius: 18px; background: var(--portal-paper); box-shadow: var(--portal-shadow); }
.portal-order-items ul { display: grid; margin: 1.2rem 0 0; padding: 0; gap: 0; list-style: none; }
.portal-order-items li { display: grid; padding: .9rem 0; align-items: center; grid-template-columns: 82px minmax(0, 1fr); gap: .9rem; border-top: 1px solid var(--portal-border); }
.portal-order-items li > strong { grid-column: 2; font: 600 .92rem var(--portal-display); }
.portal-product-image { display: grid; width: 82px; height: 82px; overflow: hidden; place-items: center; color: var(--portal-gold); border: 1px solid rgba(168, 121, 53, .12); border-radius: 16px; background: linear-gradient(145deg, #f8f1e5, #eee2ce); }
.portal-product-image img { width: 100%; height: 100%; object-fit: cover; }
.portal-product-placeholder { position: relative; display: grid; width: 100%; height: 100%; place-content: center; justify-items: center; }
.portal-product-placeholder[hidden] { display: none; }
.portal-product-placeholder::before, .portal-product-placeholder::after { position: absolute; inset: 9px; content: ""; border: 1px solid rgba(168, 121, 53, .16); border-radius: 50%; }
.portal-product-placeholder::after { inset: 15px; }
.portal-product-placeholder strong { z-index: 1; font: 600 1.35rem var(--portal-display); }
.portal-product-placeholder small { z-index: 1; margin-top: -.15rem; font: 500 .34rem var(--portal-body); letter-spacing: .08em; text-transform: uppercase; }
.portal-product-copy { display: grid; min-width: 0; gap: .18rem; }
.portal-product-copy strong { font: 600 1rem var(--portal-display); }
.portal-product-copy span, .portal-product-copy small { overflow-wrap: anywhere; color: var(--portal-muted); font-size: .62rem; }
.portal-items-total { display: flex; padding-top: .9rem; align-items: center; justify-content: space-between; border-top: 1px solid var(--portal-border); }
.portal-items-total span { color: var(--portal-muted); font-size: .62rem; }
.portal-items-total strong { font: 600 1.05rem var(--portal-display); }
.portal-purchase-list { display: grid; margin: 1rem 0 0; gap: 0; }
.portal-purchase-list > div { display: grid; padding: .7rem 0; grid-template-columns: 30px minmax(0, 1fr); gap: .12rem .55rem; border-top: 1px solid var(--portal-border); }
.portal-purchase-list i { grid-row: 1 / span 2; display: grid; width: 28px; height: 28px; place-items: center; color: var(--portal-gold-deep); border-radius: 9px; background: var(--portal-cream); }
.portal-purchase-list dt { color: var(--portal-muted); font-size: .54rem; letter-spacing: .04em; text-transform: uppercase; }
.portal-purchase-list dd { margin: 0; font: 600 .82rem/1.4 var(--portal-display); }
.portal-financial dl { display: grid; margin: 1.2rem 0; gap: .65rem; }
.portal-financial dl div { display: flex; justify-content: space-between; gap: 1rem; color: var(--portal-muted); font-size: .7rem; }
.portal-financial dd { margin: 0; color: var(--portal-ink); font-weight: 600; }
.portal-financial .is-total { padding-top: .75rem; color: var(--portal-ink); border-top: 1px solid var(--portal-border); font: 600 1.12rem var(--portal-display); }
.portal-payment-state { display: flex; padding: .85rem; align-items: center; gap: .75rem; border-radius: 12px; background: #edf2ec; }
.portal-payment-state > i { color: var(--portal-green); font-size: 1.3rem; }
.portal-payment-state div { display: grid; gap: .1rem; }
.portal-payment-state small { color: var(--portal-muted); font-size: .55rem; }
.portal-payment-state strong { font-size: .68rem; }
.portal-address address { display: grid; margin: 1.2rem 0 0; gap: .35rem; color: var(--portal-muted); font-size: .7rem; font-style: normal; line-height: 1.5; }
.portal-address address strong { color: var(--portal-ink); font: 600 1.05rem var(--portal-display); }
.portal-promise { display: flex; align-items: center; gap: 1rem; }
.portal-promise > i { color: var(--portal-gold); font-size: 1.7rem; }
.portal-promise div { display: grid; gap: .2rem; }
.portal-promise span { color: var(--portal-muted); font-size: .6rem; text-transform: uppercase; }
.portal-promise strong { font: 600 1.5rem var(--portal-display); }
.portal-promise small, .portal-muted { color: var(--portal-muted); font-size: .62rem; line-height: 1.55; }
.portal-saint { position: relative; display: flex; overflow: hidden; align-items: flex-start; gap: 1rem; background: linear-gradient(145deg, #fffdf9, #f8f1e4); }
.portal-saint > i { color: var(--portal-gold); font-size: 1.55rem; }
.portal-saint div { display: grid; gap: .3rem; }
.portal-saint span, .portal-saint small { color: var(--portal-muted); font-size: .55rem; letter-spacing: .05em; text-transform: uppercase; }
.portal-saint h2 { margin: .1rem 0; font: 600 1.45rem var(--portal-display); }
.portal-saint p { margin: 0; color: var(--portal-muted); font-size: .63rem; line-height: 1.55; }
.portal-saint a { width: fit-content; margin-top: .35rem; color: var(--portal-gold-deep); font-size: .62rem; font-weight: 600; text-decoration: none; }
.portal-tracking-details { display: grid; margin: 1rem 0; grid-template-columns: 1fr 1fr; gap: .8rem; }
.portal-tracking-details div { display: grid; gap: .2rem; }
.portal-tracking-details dt, .portal-tracking-code small { color: var(--portal-muted); font-size: .55rem; text-transform: uppercase; }
.portal-tracking-details dd { margin: 0; font: 600 .95rem var(--portal-display); }
.portal-tracking-code { display: grid; margin: 1rem 0; padding: .85rem; gap: .2rem; border-radius: 10px; background: var(--portal-cream); }
.portal-tracking-code strong { overflow-wrap: anywhere; font-size: .8rem; letter-spacing: .05em; }
.portal-tracking-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.portal-primary-action, .portal-secondary-action { display: inline-flex; min-height: 46px; padding: .72rem 1rem; align-items: center; justify-content: center; gap: .45rem; border-radius: 11px; font-size: .68rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .18s ease, background .18s ease; }
.portal-primary-action { color: white; border: 1px solid var(--portal-ink); background: var(--portal-ink); }
.portal-secondary-action { color: var(--portal-ink); border: 1px solid var(--portal-border); background: var(--portal-paper); }
.portal-primary-action:hover, .portal-secondary-action:hover { transform: translateY(-1px); }
.portal-help-section { margin-top: 1rem; }
.portal-care-grid { display: grid; gap: 1rem; }
.portal-prayer { position: relative; overflow: hidden; background: linear-gradient(145deg, #fffdf9, #f6eee2); }
.portal-prayer::after { position: absolute; width: 160px; height: 160px; right: -90px; bottom: -90px; content: ""; border: 1px solid rgba(168, 121, 53, .16); border-radius: 50%; box-shadow: 0 0 0 25px rgba(168, 121, 53, .025); }
.portal-prayer-symbol { display: grid; width: 42px; height: 42px; margin-bottom: 1rem; place-items: center; color: var(--portal-gold); border: 1px solid var(--portal-gold-soft); border-radius: 50%; }
.portal-prayer-form { position: relative; z-index: 1; display: grid; margin-top: 1rem; gap: .6rem; }
.portal-prayer-form label { font-size: .65rem; font-weight: 600; }
.portal-prayer-form textarea { width: 100%; padding: .85rem; color: var(--portal-ink); border: 1px solid var(--portal-border); border-radius: 11px; outline: 0; background: rgba(255, 255, 255, .8); font: .75rem/1.6 var(--portal-body); resize: vertical; }
.portal-prayer-form textarea:focus { border-color: var(--portal-gold); box-shadow: 0 0 0 3px rgba(166, 122, 59, .1); }
.portal-prayer-form small { color: var(--portal-muted); font-size: .56rem; }
.portal-prayer .portal-section-heading > strong { display: block; margin-top: .7rem; color: var(--portal-gold-deep); font: 600 1rem var(--portal-display); }
.portal-interactions { display: grid; margin-top: 1rem; gap: .65rem; }
.portal-interactions a { display: flex; min-height: 56px; padding: .8rem 1rem; align-items: center; gap: .7rem; color: var(--portal-ink); border: 1px solid var(--portal-border); border-radius: 14px; background: var(--portal-paper); box-shadow: var(--portal-shadow); font-size: .68rem; font-weight: 600; text-decoration: none; }
.portal-interactions i { color: var(--portal-gold); font-size: 1rem; }
.portal-ticket-form { display: grid; margin-top: 1.25rem; gap: .55rem; }
.portal-ticket-form label { margin-top: .35rem; font-size: .65rem; font-weight: 600; }
.portal-ticket-form input, .portal-ticket-form select, .portal-ticket-form textarea { width: 100%; padding: .8rem .85rem; color: var(--portal-ink); border: 1px solid var(--portal-border); border-radius: 10px; outline: 0; background: white; font-size: .75rem; }
.portal-ticket-form input:focus, .portal-ticket-form select:focus, .portal-ticket-form textarea:focus { border-color: var(--portal-gold); box-shadow: 0 0 0 3px rgba(166, 122, 59, .1); }
.portal-ticket-form textarea { resize: vertical; }
.portal-ticket-form small { color: var(--portal-muted); font-size: .58rem; text-align: center; }
.portal-ticket-links { display: grid; gap: .65rem; margin-top: 1rem; }
.portal-ticket-links a { display: flex; align-items: center; gap: .75rem; padding: .8rem; color: inherit; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; text-decoration: none; }
.portal-ticket-links a > span { display: grid; flex: 1; gap: .2rem; }
.portal-ticket-links small { color: #c8c0b4; }
.portal-ticket-links em { padding: .25rem .5rem; color: #42351f; border-radius: 999px; background: #f0d5a6; font-size: .58rem; font-style: normal; font-weight: 700; }
.portal-conversation-page { max-width: 780px; }
.portal-conversation { padding: 1rem; }
.portal-conversation-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--portal-border); padding-bottom: 1rem; }
.portal-conversation-header span { color: var(--portal-gold-deep); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.portal-conversation-header h1 { margin: .2rem 0 0; font: 600 1.65rem var(--portal-display); }
.portal-ticket-status { flex: 0 0 auto; padding: .35rem .6rem; color: #6d542b; border-radius: 999px; background: #f4ead8; font-size: .58rem; }
.portal-message-list { display: flex; max-height: min(58vh, 620px); margin: 0; padding: 1rem 0; overflow-y: auto; flex-direction: column; gap: .7rem; list-style: none; scroll-behavior: smooth; }
.portal-message { width: min(88%, 600px); padding: .75rem .85rem; border: 1px solid var(--portal-border); border-radius: 16px 16px 16px 4px; background: #fffdf9; box-shadow: 0 5px 18px rgba(60,48,31,.045); }
.portal-message.is-customer { align-self: flex-end; border-color: #e7d4b4; border-radius: 16px 16px 4px; background: #f6eddd; }
.portal-message > div { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.portal-message strong { color: var(--portal-gold-deep); font-size: .63rem; letter-spacing: .04em; text-transform: uppercase; }
.portal-message time { color: var(--portal-muted); font-size: .55rem; }
.portal-message p { margin: .4rem 0 0; font-size: .72rem; line-height: 1.65; white-space: pre-wrap; }
.portal-conversation-reply { padding-top: .85rem; border-top: 1px solid var(--portal-border); }
.portal-conversation-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.portal-conversation-actions span { color: var(--portal-muted); font-size: .6rem; }
.portal-prayer-history { max-width: 780px; margin-inline: auto; }
.portal-prayer-list { display: grid; gap: .75rem; margin-top: 1rem; }
.portal-prayer-status { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: .7rem; padding: .9rem; border: 1px solid var(--portal-border); border-radius: 14px; background: #fffdf9; }
.portal-prayer-status > i { color: var(--portal-gold); font-size: 1.15rem; }
.portal-prayer-status strong { font: 600 1rem var(--portal-display); }
.portal-prayer-status p { margin: .25rem 0; color: var(--portal-muted); font-size: .66rem; }
.portal-prayer-status blockquote { margin: .6rem 0; padding-left: .65rem; border-left: 2px solid #e8d2ad; font-size: .68rem; line-height: 1.55; }
.portal-prayer-status time { color: var(--portal-muted); font-size: .56rem; }
.portal-help-card { position: relative; overflow: hidden; background: linear-gradient(145deg, #29261f, #3b352c); color: #f8f1e6; }
.portal-help-card .portal-section-heading h2 { color: #fffaf1; }
.portal-help-card .portal-section-heading p { color: #bdb4a7; }
.portal-help-symbol { display: grid; width: 42px; height: 42px; margin-bottom: .85rem; place-items: center; color: #f0d5a6; border: 1px solid rgba(234, 213, 173, .22); border-radius: 50%; background: rgba(234, 213, 173, .07); }
.portal-ticket-disclosure { margin-top: 1rem; }
.portal-ticket-disclosure > summary { width: 100%; list-style: none; color: var(--portal-ink); border-color: #f2dfbb; background: #f2dfbb; }
.portal-ticket-disclosure > summary::-webkit-details-marker { display: none; }
.portal-ticket-disclosure > summary .bi-chevron-down { margin-left: auto; transition: transform .2s ease; }
.portal-ticket-disclosure[open] > summary .bi-chevron-down { transform: rotate(180deg); }
.portal-help-card .portal-ticket-form label { color: #ddd3c4; }
.portal-form-success, .portal-form-error { margin-top: 1rem; padding: .75rem; border-radius: 9px; font-size: .68rem; }
.portal-form-success { color: #4e6752; background: #edf3ed; }
.portal-form-error { color: #8d4d47; background: #f7e9e7; }
.portal-footer { display: grid; padding: 3rem 0 7rem; justify-items: center; gap: .35rem; color: var(--portal-muted); text-align: center; }
.portal-footer strong { color: var(--portal-ink); font: 600 1.4rem var(--portal-display); }
.portal-footer span { font-size: .68rem; }
.portal-footer small { margin-top: .7rem; font-size: .55rem; }
.portal-help-button { position: fixed; z-index: 30; right: .75rem; bottom: .75rem; display: flex; min-height: 50px; padding: .75rem 1rem; align-items: center; justify-content: center; gap: .55rem; color: white; border-radius: 25px; background: var(--portal-ink); box-shadow: 0 10px 30px rgba(37, 35, 31, .24); font-size: .68rem; font-weight: 600; text-decoration: none; }
.portal-copy-feedback { position: fixed; z-index: 60; bottom: 4.6rem; left: 50%; padding: .7rem 1rem; color: white; border-radius: 999px; background: var(--portal-ink); box-shadow: var(--portal-shadow); font-size: .68rem; transform: translateX(-50%); animation: portal-feedback 2s ease both; }

@keyframes portal-status-pulse { 50% { transform: scale(1.08); } }
@keyframes portal-stage-change { from { opacity: .4; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes portal-feedback { 0%, 100% { opacity: 0; transform: translate(-50%, 6px); } 15%, 85% { opacity: 1; transform: translate(-50%, 0); } }

@media (min-width: 430px) {
    .portal-order-items li { grid-template-columns: 88px minmax(0, 1fr) auto; }
    .portal-product-image { width: 88px; height: 88px; }
    .portal-order-items li > strong { grid-column: auto; }
}

@media (min-width: 768px) {
    .customer-portal-shell { width: min(1180px, calc(100% - 3rem)); }
    .portal-header-order { display: block; }
    .portal-order-summary { padding: 1.5rem; }
    .portal-summary-heading { grid-template-columns: 1fr auto; align-items: start; }
    .portal-summary-heading h1 { font-size: 2.7rem; }
    .portal-summary-grid { grid-template-columns: repeat(5, 1fr); }
    .portal-summary-total { grid-column: auto; }
    .portal-stage-detail { padding: 1.5rem; grid-template-columns: 1fr; }
    .portal-stage-header { grid-column: 1 / -1; }
    .portal-stage-media { grid-column: 1; grid-row: auto; }
    .portal-stage-copy { grid-column: 1; grid-row: auto; align-self: start; }
    .portal-content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portal-care-grid { margin-top: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .portal-help-section { margin-top: 0; }
    .portal-interactions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .portal-help-button { right: max(1.25rem, calc((100vw - 1180px) / 2)); }
}

@media (min-width: 1024px) {
    .portal-experience-grid.has-delivery-saint { grid-template-areas: "summary summary summary summary summary summary tracking tracking tracking saint saint saint" "timeline timeline timeline timeline timeline timeline timeline timeline timeline timeline timeline timeline" "stage stage stage stage stage stage products products products details details details" "prayer prayer prayer prayer prayer prayer help help help help help help"; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: 1rem; }
    .portal-experience-grid.without-delivery-saint { grid-template-areas: "summary summary summary summary summary summary summary summary tracking tracking tracking tracking" "timeline timeline timeline timeline timeline timeline timeline timeline timeline timeline timeline timeline" "stage stage stage stage stage stage products products products details details details" "prayer prayer prayer prayer prayer prayer help help help help help help"; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: 1rem; }
    .portal-experience-grid > .portal-order-summary, .portal-experience-grid > .portal-tracking, .portal-experience-grid > .portal-saint { min-height: 100%; }
    .portal-experience-grid > .portal-stage-detail, .portal-experience-grid > .portal-order-items, .portal-experience-grid > .portal-purchase-details { align-self: stretch; }
    .portal-timeline { padding-inline: 1rem; overflow-x: hidden; }
    .portal-timeline::before { right: calc(1rem + 5.3%); left: calc(1rem + 5.3%); width: auto; }
    .portal-timeline li { min-width: 0; flex: 1 1 0; }
    .portal-timeline strong { padding-inline: .1rem; font-size: clamp(.72rem, .82vw, .87rem); }
    .portal-timeline-continuation { display: none; }
}

@media (max-width: 767.98px) {
    .portal-preview-bar { position: relative; padding: .75rem 1rem; align-items: stretch; flex-direction: column; gap: .6rem; }
    .portal-preview-bar form { justify-content: space-between; }
    .portal-preview-bar select { max-width: 62%; }
    .portal-preview-bar > a { position: absolute; top: .8rem; right: 1rem; }
    .portal-preview-bar > div { padding-right: 6rem; }
    .portal-brand-header { min-height: 68px; }
    .portal-brand strong { display: none; }
    .portal-header-order { margin-right: auto; text-align: left; }
    .portal-header-order strong { font-size: 1rem; }
    .portal-header-order span { font-size: .52rem; }
    .portal-secure { font-size: 0; }
    .portal-secure i { font-size: 1rem; }
    .portal-help-section { scroll-margin-top: 1rem; }
}

@media (max-width: 429.98px) {
    .portal-order-summary { border-radius: 18px; }
    .portal-summary-heading h1 { font-size: 1.9rem; }
    .portal-card, .portal-stage-detail, .portal-journey { border-radius: 16px; }
    .portal-tracking-actions > * { width: 100%; }
    .portal-help-button { left: .75rem; }
    .portal-conversation-header { align-items: stretch; flex-direction: column; }
    .portal-ticket-status { align-self: flex-start; }
    .portal-message { width: 92%; }
    .portal-conversation-actions { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}