/*
 * Reusable Orymera tool and result components.
 * Product CSS may express only a product-specific motif; this file owns the
 * shared input → processing → durable result composition.
 */

.orymera-tool-page { --orymera-accent: var(--orymera-gold); --orymera-accent-deep: var(--orymera-gold-deep); --orymera-accent-wash: color-mix(in srgb, var(--orymera-accent) 14%, transparent); }
.orymera-tool-page, .orymera-result { overflow: hidden; background: var(--orymera-warm-paper); color: var(--orymera-ink); }

/* Tool hero and form card */
.orymera-tool-hero { position: relative; isolation: isolate; overflow: clip; padding: 132px 0 76px; background: radial-gradient(92% 120% at 88% 4%, #30243b 0%, var(--orymera-night) 54%, var(--orymera-night-2) 100%); color: var(--orymera-paper-on-night); }
.orymera-tool-hero::before, .orymera-tool-hero::after { position: absolute; z-index: -1; width: min(54vw, 680px); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--orymera-accent) 20%, transparent); border-radius: 50%; content: ''; pointer-events: none; }
.orymera-tool-hero::before { top: -33%; right: -20%; }
.orymera-tool-hero::after { top: -10%; right: -38%; width: min(39vw, 500px); border-color: rgb(232 219 210 / 10%); }
.orymera-tool-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
.orymera-tool-page.is-calculating > section:not(.orymera-tool-hero) { display: none; }
.orymera-tool-hero.is-calculating { display: grid; min-height: 100svh; align-items: center; padding: 96px 0 48px; background: var(--orymera-warm-paper); color: var(--orymera-ink); }
.orymera-tool-hero.is-calculating .orymera-tool-hero__grid { display: block; width: 100%; max-width: none; padding: 0; }
.orymera-tool-hero.is-calculating .orymera-tool-hero__copy { display: none; }
.orymera-tool-hero.is-calculating .orymera-tool-form-card { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.orymera-tool-hero.is-calculating .orymera-calculator > .orymera-kicker,
.orymera-tool-page.is-calculating .orymera-calculator > .orymera-kicker,
.orymera-calculator.is-calculating > .orymera-kicker { display: none; }
.orymera-tool-hero .orymera-kicker, .orymera-tool-hero--on-night .orymera-kicker, .orymera-result-upsell--on-night .orymera-kicker { color: var(--orymera-accent); }
.orymera-tool-hero__copy h1 { max-width: var(--orymera-width-display); margin: 0 0 24px; color: var(--orymera-on-night-strong); font: 400 clamp(48px, 4.35vw, 56px)/1.04 var(--orymera-display); letter-spacing: -.02em; text-wrap: pretty; }
.orymera-tool-hero__copy h1 em { font-style: italic; font-weight: 500; }
.orymera-tool-hero__copy > p:not(.orymera-kicker) { max-width: 46ch; margin: 0 0 22px; color: var(--orymera-on-night); font-size: 18px; line-height: 1.55; }
.orymera-tool-form-card { position: relative; padding: clamp(28px, 3vw, 38px); border-color: rgb(232 219 210 / 18%); background: var(--orymera-paper-bright); color: var(--orymera-ink); box-shadow: 0 24px 54px rgb(8 3 12 / 24%); }
.orymera-tool-form-card .orymera-kicker { color: var(--orymera-label); }
.orymera-trust { display: inline-flex; align-items: center; gap: 7px; color: var(--orymera-on-night-faint); font-size: 13px; }
.orymera-trust .orymera-icon { color: var(--orymera-accent); }

/* Processing and recoverable states */
.orymera-processing { display: grid; min-height: calc(100svh - 144px); align-content: center; justify-items: center; padding: 48px clamp(20px, 6vw, 80px); text-align: center; animation: orymera-processing-enter 320ms cubic-bezier(.16, 1, .3, 1) both; }
.orymera-processing[hidden], .orymera-review[hidden] { display: none; }
.orymera-processing__kicker { margin: 0 0 9px; color: var(--orymera-label); font-family: var(--orymera-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.orymera-processing__orbit { --orymera-loader-size: clamp(112px, 14vw, 144px); margin: 0 0 24px; }
.orymera-processing__label { width: min(100%, 28rem); margin: 0; color: var(--orymera-ink); font: 400 clamp(40px, 5vw, 64px)/1.02 var(--orymera-display); letter-spacing: -.035em; text-align: center; text-wrap: pretty; }
.orymera-processing__detail { max-width: 45ch; margin: 24px 0 0; color: var(--orymera-text-muted); font-size: 17px; line-height: 1.6; }
.orymera-processing__progress { width: min(100%, 600px); height: 2px; margin: 38px 0 18px; overflow: hidden; background: var(--orymera-rule); }
.orymera-processing__progress span { display: block; width: 58%; height: 100%; background: var(--orymera-accent); animation: orymera-processing-progress 2.2s ease-in-out infinite; }
.orymera-processing__note, .orymera-state__note { margin: 0; color: var(--orymera-label); font-size: 11px; }
.orymera-state { padding: 64px 24px; text-align: center; }
.orymera-state h2 { margin: 10px 0; font: 400 36px/1.1 var(--orymera-display); }
.orymera-state p:not(.orymera-kicker) { margin: 0 auto 24px; color: var(--orymera-text-muted); font-size: 15px; }
.orymera-status { max-width: 36ch; min-height: 18px; margin: 14px auto 0; color: var(--orymera-text-muted); font-size: 12px; text-align: center; }
.orymera-status:empty { min-height: 0; margin-top: 0; }
.orymera-status.is-error { color: #9b3d3d; }
.orymera-status.is-unavailable { color: var(--orymera-label); }

/* Reading result */
.orymera-result { min-height: 70vh; }
.orymera-result-hero { position: relative; padding: calc(106px + env(safe-area-inset-top)) 0 28px; background: radial-gradient(120% 90% at 78% -10%, rgb(141 101 116 / 40%), transparent 60%), radial-gradient(90% 70% at 10% 110%, rgb(193 155 99 / 18%), transparent 55%), var(--orymera-night); color: var(--orymera-paper-on-night); }
.orymera-result-hero__copy { max-width: 70ch; min-width: 0; }
.orymera-result-hero h1 { max-width: var(--orymera-width-display); margin: 14px 0 0; color: var(--orymera-on-night-strong); font: 400 clamp(32px, 5vw, 48px)/1.1 var(--orymera-display); letter-spacing: -.035em; text-wrap: pretty; }
.orymera-result-hero__intro { max-width: 56ch; margin: 14px 0 0; color: var(--orymera-on-night); font-size: 16px; line-height: 1.65; }
.orymera-result-hero__back { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; margin: 0 0 18px; color: var(--orymera-on-night); font-size: 14px; }
.orymera-result__body { padding: var(--orymera-section-y-sm) 0 var(--orymera-section-y); }
.orymera-result__loading { display: grid; justify-items: center; padding: 74px 24px; color: var(--orymera-label); text-align: center; }
.orymera-result__loading[hidden] { display: none; }
.orymera-result__loading p { margin: 22px 0 0; font: 400 22px/1.2 var(--orymera-display); }
.orymera-result-card { overflow: hidden; padding: clamp(24px, 4vw, 48px); }
.orymera-result-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 8px; }
.orymera-result-card .orymera-kicker, .orymera-state .orymera-kicker { color: var(--orymera-label); }
.orymera-result__placement { margin: 10px 0 0; color: var(--orymera-label); font: 400 clamp(26px, 3vw, 34px)/1.2 var(--orymera-display); }
.orymera-result__coord { display: block; margin-top: 12px; }
.orymera-result__ruler { margin-top: 12px; max-width: 260px; }
.orymera-result-card__share { display: grid; flex: none; justify-items: end; gap: 4px; max-width: 28ch; }
.orymera-result__share { display: inline-flex; flex: none; min-height: 44px; align-items: center; gap: 8px; padding: 6px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--orymera-label); cursor: pointer; font: 600 12px var(--orymera-body); letter-spacing: .14em; text-transform: uppercase; }
.orymera-result__share + .orymera-result__link-note { display: none; }
.orymera-result__share:not([hidden]) + .orymera-result__link-note { display: block; }
.orymera-result__timing { display: grid; gap: 7px; margin-top: 26px; padding: 20px 0 4px; border-top: 1px solid var(--orymera-rule); }
.orymera-result__timing p { margin: 0; color: var(--orymera-text-strong); font-size: 16px; line-height: 1.55; }
.orymera-result__timing-label { margin-bottom: 3px; color: var(--orymera-label); font-family: var(--orymera-mono); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.orymera-result__timing [data-orymera-report-window] { color: var(--orymera-ink); font: 400 clamp(24px, 3vw, 34px)/1.25 var(--orymera-display); }
.orymera-result__reading { max-width: min(80ch, 100%); padding-top: 24px; overflow-wrap: anywhere; }
.orymera-result__reading p { margin: 0 0 22px; color: var(--orymera-text-strong); font-size: 17px; line-height: 1.78; }
.orymera-result__reading .orymera-result__timing-title { color: var(--orymera-ink); font: 400 clamp(24px, 3vw, 34px)/1.2 var(--orymera-display); letter-spacing: -.02em; }
.orymera-result__quotes { margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--orymera-rule); }
.orymera-result__quotes blockquote { margin: 16px 0; color: var(--orymera-ink); font: italic 400 23px/1.4 var(--orymera-display); }
.orymera-result__method { max-width: min(80ch, 100%); margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--orymera-rule); color: var(--orymera-text-muted); font-size: 14px; line-height: 1.65; }
.orymera-result__method p { margin: 0; }
.orymera-result__method .orymera-kicker { margin-bottom: 8px; }
.orymera-result__signature-note { max-width: 70ch; color: var(--orymera-text-muted); font-size: 14px; line-height: 1.65; }
.orymera-result__link-note { margin: 0; color: var(--orymera-text-muted); font-size: 12px; line-height: 1.5; text-align: end; }
.orymera-disclaimer { display: block; margin-top: 22px; color: var(--orymera-label); font-size: 12px; line-height: 1.5; }
.orymera-disclaimer--on-night { color: var(--orymera-paper-on-night); }

/* Reusable content sections */
.orymera-tool-section { padding: var(--orymera-section-y-sm) 0; background: var(--orymera-warm-paper); }
.orymera-tool-section--paper { background: var(--orymera-paper); }
.orymera-tool-section--on-night { padding: var(--orymera-section-y) 0; background: radial-gradient(120% 120% at 50% 0, #2a1633 0, var(--orymera-night) 55%, var(--orymera-night-2) 100%); color: var(--orymera-paper-on-night); }
.orymera-tool-section--on-night > .orymera-shell > .orymera-kicker, .orymera-tool-section--on-night > .orymera-shell > h2 { display: block; max-width: 760px; margin-inline: auto; text-align: center; }
.orymera-tool-section--on-night h2 { color: var(--orymera-on-night-strong); }
.orymera-tool-section h2, .orymera-tool-section--on-night h2 { max-width: var(--orymera-width-display); margin: 0; font: 400 clamp(34px, 3.2vw, 40px)/1.1 var(--orymera-display); text-wrap: pretty; }
.orymera-tool-section__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; }
.orymera-tool-copy { max-width: 900px; }
.orymera-tool-copy p, .orymera-tool-method__steps p { margin: 0 0 20px; color: var(--orymera-text-strong); font-size: 18px; line-height: 1.7; }
.orymera-tool-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--orymera-rule); }
.orymera-tool-stats span { display: grid; gap: 5px; color: var(--orymera-text); font-size: 14px; }
.orymera-tool-stats strong { color: var(--orymera-accent); font: 400 30px/1 var(--orymera-display); }
.orymera-tool-method__steps { display: flex; flex-direction: column; gap: 26px; }
.orymera-tool-method__steps article { display: flex; gap: 18px; }
.orymera-tool-method__steps b { flex: none; width: 24px; color: var(--orymera-accent); font: 400 16px var(--orymera-display); }
.orymera-tool-method__steps h3 { margin: 0 0 6px; font: 400 21px/1.2 var(--orymera-display); }
.orymera-tool-method__steps p { margin: 0; color: var(--orymera-text); font-size: 15px; line-height: 1.6; }
.orymera-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 900px; margin: 46px auto 0; }
.orymera-tiers article { padding: 32px; }
.orymera-tiers article.is-featured { position: relative; background: var(--orymera-warm-paper); color: var(--orymera-ink); }
.orymera-tiers article.is-featured::before { position: absolute; top: 0; right: 32px; left: 32px; height: 2px; background: var(--orymera-accent); content: ''; }
.orymera-tiers strong { display: block; margin: 14px 0 20px; color: var(--orymera-on-night-strong); font: 400 34px/1 var(--orymera-display); }
.orymera-tiers .is-featured strong { color: var(--orymera-ink); font-size: 27px; }
.orymera-tiers p { min-height: 0; margin: 0 0 10px; color: var(--orymera-on-night); font-size: 15px; line-height: 1.55; }
.orymera-tiers .is-featured p { color: var(--orymera-text-strong); }
.orymera-tiers p:last-of-type { margin-bottom: 24px; }
.orymera-faq { padding: var(--orymera-section-y-sm) 0; background: var(--orymera-paper); }
.orymera-faq__list { margin-top: 30px; }
.orymera-faq__list article { padding: 24px 0; border-top: 1px solid var(--orymera-rule); }
.orymera-faq__list article:last-child { border-bottom: 1px solid var(--orymera-rule); }
.orymera-faq__list h3 { margin: 0 0 10px; font: 400 22px/1.2 var(--orymera-display); }
.orymera-faq__list p { max-width: 65ch; margin: 0; color: var(--orymera-text-strong); font-size: 16px; line-height: 1.6; }
.orymera-sign-guides { background: var(--orymera-warm-paper); }
.orymera-sign-guides__intro { max-width: 61ch; margin: 18px 0 0; color: var(--orymera-text-strong); font-size: 17px; line-height: 1.65; }
.orymera-sign-guides__intro a { color: var(--orymera-ink); font-weight: 700; text-decoration-color: var(--orymera-accent); text-underline-offset: .2em; }
.orymera-sign-guides__groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 36px; border-top: 1px solid var(--orymera-rule); border-bottom: 1px solid var(--orymera-rule); }
.orymera-sign-guides__group { padding: 24px 28px 26px; }
.orymera-sign-guides__group + .orymera-sign-guides__group { border-left: 1px solid var(--orymera-rule); }
.orymera-sign-guides__group h3 { margin: 0 0 16px; color: var(--orymera-accent); font: 400 20px/1.1 var(--orymera-display); }
.orymera-sign-guides__group ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.orymera-sign-guides__group a { color: var(--orymera-text-strong); font-size: 14px; line-height: 1.35; text-decoration-color: color-mix(in srgb, var(--orymera-accent) 48%, transparent); text-underline-offset: 3px; }
.orymera-sign-guides__group a:hover { color: var(--orymera-accent); }
.orymera-closing { padding: 80px 0; background: var(--orymera-warm-paper); text-align: center; }
.orymera-closing h2 { max-width: var(--orymera-width-display); margin: 0 auto 26px; font: 400 38px/1.08 var(--orymera-display); text-wrap: pretty; }
.orymera-closing p { margin: 22px 0 0; color: var(--orymera-text-muted); font-size: 12px; }
.orymera-tool-card { display: grid; gap: 12px; padding: 28px; }
.orymera-tool-card__meta { color: var(--orymera-label); font-family: var(--orymera-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.orymera-tool-card__badges { display: flex; flex-wrap: wrap; gap: 8px; color: var(--orymera-label); font-size: 12px; }

/* Result upsell stays a dark, reusable content block. */
.orymera-result-upsell { position: relative; margin: 40px clamp(-48px, -4vw, -24px) clamp(-48px, -4vw, -24px); padding: clamp(44px, 5vw, 68px) clamp(32px, 6vw, 72px) 30px; overflow: hidden; border-top: 1px solid color-mix(in srgb, var(--orymera-accent) 22%, transparent); background: var(--orymera-night); color: var(--orymera-paper-bright); }
.orymera-result-upsell::after { position: absolute; top: -164px; right: -126px; width: 340px; height: 340px; border: 1px solid color-mix(in srgb, var(--orymera-accent) 22%, transparent); border-radius: 50%; box-shadow: 0 0 0 15px color-mix(in srgb, var(--orymera-accent) 3%, transparent), 0 0 0 36px color-mix(in srgb, var(--orymera-accent) 2%, transparent); content: ''; pointer-events: none; }
.orymera-result-upsell__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(250px, .88fr); gap: clamp(40px, 6vw, 92px); align-items: start; }
.orymera-result-upsell h2 { max-width: var(--orymera-width-display); margin: 0; color: var(--orymera-paper-bright); font: 400 clamp(31px, 4vw, 50px)/.97 var(--orymera-display); letter-spacing: -.04em; text-wrap: pretty; }
.orymera-result-upsell p:not(.orymera-kicker):not(.orymera-result-upsell__note) { max-width: 48ch; margin: 26px 0 0; color: var(--orymera-paper-on-night); font-size: 15px; line-height: 1.7; }
.orymera-result-upsell__layers { display: grid; margin-bottom: 28px; border-top: 1px solid rgb(232 219 210 / 18%); border-bottom: 1px solid rgb(232 219 210 / 18%); }
.orymera-result-upsell__layer { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 16px 0; }
.orymera-result-upsell__layer + .orymera-result-upsell__layer { border-top: 1px solid rgb(232 219 210 / 18%); }
.orymera-result-upsell__label { color: var(--orymera-accent); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.orymera-result-upsell__layer p { max-width: none !important; margin: 0 !important; color: var(--orymera-paper-bright) !important; font-size: 13px !important; line-height: 1.5 !important; }
.orymera-result-upsell__action { display: grid; justify-items: center; }
.orymera-result-upsell__cta { width: min(100%, 280px); min-height: 50px; gap: 12px; padding: 12px 20px; font: 700 12px/1 var(--orymera-body); letter-spacing: .01em; }
.orymera-result-upsell__note { margin: 12px 0 0 !important; color: var(--orymera-paper-on-night) !important; font-size: 12px !important; line-height: 1.5 !important; }
.orymera-result-upsell__expiry { position: relative; z-index: 1; margin: 30px 0 0; padding-top: 18px; border-top: 1px solid rgb(232 219 210 / 16%); color: var(--orymera-paper-on-night); font-size: 12px; line-height: 1.5; }

@keyframes orymera-processing-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes orymera-processing-progress { 0% { transform: translateX(-105%); } 55% { transform: translateX(75%); } 100% { transform: translateX(175%); } }
@media (max-width: 850px) { .orymera-tool-hero { padding-top: 104px; } .orymera-tool-hero__grid, .orymera-tool-section__grid { grid-template-columns: 1fr; gap: 36px; } .orymera-tool-section--on-night { padding: var(--orymera-section-y-sm) 0; } .orymera-tiers { grid-template-columns: 1fr; margin-top: 30px; } .orymera-sign-guides__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } .orymera-sign-guides__group:nth-child(3) { border-left: 0; border-top: 1px solid var(--orymera-rule); } .orymera-sign-guides__group:nth-child(4) { border-top: 1px solid var(--orymera-rule); } }
@media (max-width: 700px) { .orymera-result-upsell__grid { grid-template-columns: 1fr; gap: 34px; } .orymera-result-upsell h2 { max-width: 100%; } .orymera-result-upsell::after { top: 52%; right: -150px; width: 320px; height: 320px; } }
@media (max-width: 560px) { .orymera-tool-hero { padding: 104px 0 44px; } .orymera-tool-hero__grid { gap: 32px; } .orymera-tool-hero__copy h1 { font-size: 40px; } .orymera-tool-hero__copy > p:not(.orymera-kicker) { font-size: 16px; } .orymera-tool-form-card { padding: 24px; } .orymera-tool-hero.is-calculating { padding: 78px 0 28px; } .orymera-processing { min-height: calc(100svh - 106px); padding: 36px 20px; } .orymera-processing__label { font-size: 42px; } .orymera-processing__detail { font-size: 15px; } .orymera-tool-section h2, .orymera-tool-section--on-night h2 { font-size: 30px; } .orymera-tool-stats { gap: 22px; } .orymera-tiers article { padding: 24px; } .orymera-tiers article.is-featured::before { right: 24px; left: 24px; } .orymera-sign-guides__groups { grid-template-columns: 1fr; margin-top: 28px; } .orymera-sign-guides__group { padding: 21px 0; } .orymera-sign-guides__group + .orymera-sign-guides__group, .orymera-sign-guides__group:nth-child(3), .orymera-sign-guides__group:nth-child(4) { border-top: 1px solid var(--orymera-rule); border-left: 0; } .orymera-closing { padding: 60px 24px; } .orymera-result-hero { padding-top: calc(96px + env(safe-area-inset-top)); padding-bottom: 20px; } .orymera-result-card { padding: 25px 20px 30px; } .orymera-result-card__heading { flex-wrap: wrap; gap: 8px; } .orymera-result-card__share { width: 100%; max-width: none; justify-items: start; } .orymera-result__link-note { text-align: start; } .orymera-result-upsell { margin: 42px -20px -30px; padding: 36px 20px 26px; } .orymera-result-upsell__cta { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .orymera-processing, .orymera-processing__progress span { animation: none; } }