:root{--page-title-display:none;}/* Start custom CSS *//* Star & Stone funnels 250/251 — motion v2 (build_v2.py). Base styles are the FINAL
   state; animations only add "from" frames, so no-support and reduced-motion both
   show the finished page. */
@property --sf26-n { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --sf26-sweep { syntax: '<angle>'; inherits: false; initial-value: 360deg; }

html { scroll-behavior: smooth; }
body.elementor-page-341 { background: #faf6ed; }
#sf26-root { overflow: visible; overflow-x: clip; }

/* ---------- type ---------- */
#sf26-root .sf26-h1 em, #sf26-root .sf26-h2 em { font-style: italic; color: #9c4a0a; }
#sf26-root .sf26-lines > span { display: block; padding: 0 .14em .17em 0; margin-bottom: -.17em; clip-path: inset(-.7em -.7em 0 -.7em); }
#sf26-root .sf26-lines > span > span { display: inline-block; transform-origin: 0 100%; text-wrap: balance; }
#sf26-root .sf26-kicker::before { content: ''; flex: none; width: 34px; height: 1px; background: currentColor; transform-origin: 0 50%; }

/* ---------- buttons + links ---------- */
#sf26-root .sf26-button { position: relative; isolation: isolate; overflow: hidden; transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s cubic-bezier(.2,.8,.2,1), color .3s; }
#sf26-root .sf26-button::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #2a2018; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .6s cubic-bezier(.7,0,.2,1); }
#sf26-root .sf26-button:hover, #sf26-root .sf26-button:focus-visible { transform: translateY(-2px); box-shadow: 0 20px 36px -20px rgba(156,74,10,.8); color: #faf6ed; }
#sf26-root .sf26-button:hover::before, #sf26-root .sf26-button:focus-visible::before { transform: scaleX(1); transform-origin: 0 50%; }
#sf26-root .sf26-button > span, #sf26-root .sf26-link span { display: inline-block; margin-left: .5em; }
#sf26-root .sf26-button:hover > span, #sf26-root .sf26-link:hover span { animation: sf26-arrow .6s cubic-bezier(.2,.8,.2,1); }
@keyframes sf26-arrow { 0% { transform: none; } 42% { transform: translate(.75em,-.75em); opacity: 0; } 43% { transform: translate(-.75em,.75em); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- cards ---------- */
#sf26-cards > .sf26-card { transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s cubic-bezier(.2,.8,.2,1), border-color .4s; }
#sf26-cards > .sf26-card::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; border-radius: 4px 4px 0 0; background: #9c4a0a; transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s cubic-bezier(.7,0,.2,1); }
#sf26-cards > .sf26-card:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -38px rgba(42,32,24,.55); border-color: #d8c3a0; }
#sf26-cards > .sf26-card:hover::before { transform: scaleX(1); }
#sf26-cards > .sf26-card > p:first-child { position: absolute; top: 20px; right: 26px; margin: 0; font-family: Fraunces, serif; font-size: 78px; line-height: 1; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px #cbb999; transition: color .6s, -webkit-text-stroke-color .6s; pointer-events: none; }
#sf26-cards > .sf26-card:hover > p:first-child { color: rgba(156,74,10,.1); -webkit-text-stroke-color: #9c4a0a; }
#sf26-cards-col > .sf26-card { border-top: 1px solid #d9cebc; }
@media (max-width: 767px) { #sf26-cards > .sf26-card > p:first-child { font-size: 54px; top: 14px; right: 16px; } }

/* ---------- section 2 graphics ---------- */
#sf26-g20 { background-image: radial-gradient(circle, rgba(42,32,24,.24) 0 2.3px, transparent 2.9px); background-size: 5% 100%; background-repeat: repeat-x; }
#sf26-g20-dot { background-image: radial-gradient(circle, #9c4a0a 0 4.4px, transparent 5px); animation: sf26-step20 19s steps(20, jump-none) infinite; }
@keyframes sf26-step20 { to { transform: translateX(1900%); } }
#sf26-g-pair > p { animation: sf26-chip 7.5s ease-in-out infinite; }
#sf26-g-pair > p:nth-child(2) { animation-delay: -5s; }
#sf26-g-pair > p:nth-child(3) { animation-delay: -2.5s; }
@keyframes sf26-chip { 0%, 29% { background-color: #2a2018; color: #faf6ed; border-color: #2a2018; } 35%, 100% { background-color: rgba(42,32,24,0); color: #6b5a47; border-color: #b5a58a; } }
#sf26-g-wave > .e-con { animation: sf26-wave 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * 140ms - 3.4s); }
@keyframes sf26-wave { 0%, 100% { background-color: rgba(42,32,24,.16); } 16% { background-color: #9c4a0a; } 40% { background-color: rgba(42,32,24,.16); } }
#sf26-layer-grid > .e-con { position: relative; }
#sf26-layer-grid > .e-con::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #b5a58a; transform-origin: 0 50%; }

/* ---------- marquee ---------- */
#sf26-mq-a, #sf26-mq-b { will-change: transform; }
#sf26-mq-a { animation: sf26-marquee 90s linear infinite; }
#sf26-mq-b { animation: sf26-marquee 70s linear infinite reverse; }
@keyframes sf26-marquee { to { transform: translateX(-50%); } }
#sf26-marquee:hover #sf26-mq-a, #sf26-marquee:hover #sf26-mq-b { animation-play-state: paused; }
#sf26-mq-a > p { margin: 0; flex: none; white-space: nowrap; padding-right: .4em; font-family: Fraunces, serif; font-style: italic; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.1; letter-spacing: -.025em; color: #faf6ed; }
#sf26-mq-a > p span { display: inline-block; padding: 0 .35em; font-style: normal; font-size: .38em; vertical-align: .55em; color: #f1c586; }
#sf26-mq-b > p { margin: 0; flex: none; white-space: nowrap; padding-right: 1.3em; font-family: 'DM Mono', monospace; font-size: 13px; letter-spacing: .32em; color: #9fae91; }
#sf26-mq-b > p span { color: #f1c586; padding: 0 .2em; }

/* ---------- readers + close ---------- */
#sf26-qglyph { margin: 0; font-family: Fraunces, serif; font-size: clamp(200px, 24vw, 340px); line-height: .78; color: transparent; -webkit-text-stroke: 1.3px #cbb999; user-select: none; }
#sf26-honesty { view-timeline-name: --sf26ink; }
@media (min-width: 1025px) { #sf26-fig-col { position: sticky; top: 96px; align-self: flex-start; } }

/* ---------- progress hairline ---------- */
#sf26-progress { transform-origin: 0 50%; }

/* ---------- hero intro (time-based, every browser) ---------- */
@keyframes sf26-fade { from { opacity: 0; } }
@keyframes sf26-rise { from { opacity: 0; translate: 0 28px; filter: blur(7px); } }
@keyframes sf26-line { from { transform: translateY(132%) rotate(4deg); } }
@keyframes sf26-clip { from { clip-path: inset(0 100% 0 0); } }
@keyframes sf26-ember { from { color: #2a2018; } }
@keyframes sf26-pop { from { opacity: 0; scale: .7; } }
@keyframes sf26-draw { from { transform: scaleX(0); } }
#sf26-nav { animation: sf26-fade 1.1s ease-out both; }
#sf26-eyebrow { animation: sf26-clip 1s cubic-bezier(.7,0,.2,1) .1s both; }
#sf26-hero .sf26-lines > span > span { animation: sf26-line 1.25s cubic-bezier(.16,1,.3,1) both; }
#sf26-hero .sf26-lines > span:nth-child(1) > span { animation-delay: .15s; }
#sf26-hero .sf26-lines > span:nth-child(2) > span { animation-delay: .29s; }
#sf26-hero .sf26-lines em { animation: sf26-ember 1s ease-out 1.15s both; }
#sf26-lead { animation: sf26-rise 1.1s cubic-bezier(.16,1,.3,1) .55s both; }
#sf26-cta-box { animation: sf26-rise 1.1s cubic-bezier(.16,1,.3,1) .72s both; }
#sf26-proof > * { animation: sf26-rise 1s cubic-bezier(.16,1,.3,1) both; }
#sf26-proof > :nth-child(1) { animation-delay: 1.05s; }
#sf26-proof > :nth-child(2) { animation-delay: 1.17s; }
#sf26-proof > :nth-child(3) { animation-delay: 1.29s; }

/* ---------- scroll-driven layer ---------- */
@supports (animation-timeline: view()) {
  #sf26-progress { display: block; animation: sf26-draw linear both; animation-timeline: scroll(root block); }

  #sf26-root .sf26-kicker { view-timeline-name: --sf26k; }
  #sf26-root .sf26-kicker::before { animation: sf26-draw cubic-bezier(.65,0,.35,1) both; animation-timeline: --sf26k; animation-range: entry 0% cover 30%; }

  #sf26-root .sf26-h2.sf26-lines > span { view-timeline-name: --sf26ln; }
  #sf26-root .sf26-h2.sf26-lines > span > span { animation: sf26-line cubic-bezier(.2,.7,.2,1) both; animation-timeline: --sf26ln; animation-range: entry 0% cover 42%; }

  #sf26-root .sf26-rise { animation: sf26-rise cubic-bezier(.2,.7,.2,1) both; animation-timeline: view(); animation-range: entry 0% cover 30%; }

  #sf26-cards-col > .sf26-card { animation: sf26-rise cubic-bezier(.2,.7,.2,1) both; animation-timeline: view(); animation-range: entry 0% cover 28%; }

  #sf26-cards > .sf26-card { animation: sf26-card-l cubic-bezier(.2,.7,.2,1) both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  #sf26-cards > .sf26-card:nth-child(even) { animation-name: sf26-card-r; animation-range: entry 14% cover 38%; }
  @keyframes sf26-card-l { from { opacity: 0; translate: 0 80px; rotate: -1.4deg; } }
  @keyframes sf26-card-r { from { opacity: 0; translate: 0 80px; rotate: 1.4deg; } }

  #sf26-layer-grid > .e-con { view-timeline-name: --sf26li; animation: sf26-rise cubic-bezier(.2,.7,.2,1) both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  #sf26-layer-grid > .e-con:nth-child(2) { animation-range: entry 8% cover 32%; }
  #sf26-layer-grid > .e-con:nth-child(3) { animation-range: entry 16% cover 36%; }
  #sf26-layer-grid > .e-con:nth-child(4) { animation-range: entry 24% cover 40%; }
  #sf26-layer-grid > .e-con::before { animation: sf26-draw cubic-bezier(.65,0,.35,1) both; animation-timeline: --sf26li; animation-range: entry 10% cover 40%; }

  #sf26-honesty > span { color: transparent; background-image: linear-gradient(#2a2018, #2a2018), linear-gradient(rgba(42,32,24,.2), rgba(42,32,24,.2)); background-repeat: no-repeat; background-size: 100% 100%, 100% 100%; -webkit-background-clip: text; background-clip: text; animation: sf26-ink linear both; animation-timeline: --sf26ink; animation-range: cover 22% cover 58%; }
  @keyframes sf26-ink { from { background-size: 0% 100%, 100% 100%; } }

  #sf26-qglyph { animation: sf26-glyph cubic-bezier(.2,.7,.2,1) both; animation-timeline: view(); animation-range: entry 0% cover 48%; }
  @keyframes sf26-glyph { from { opacity: 0; translate: 0 70px; rotate: -12deg; } }

  #sf26-example { view-timeline-name: --sf26ex; animation: sf26-card-x cubic-bezier(.2,.7,.2,1) both; animation-timeline: view(); animation-range: entry 0% cover 32%; }
  @keyframes sf26-card-x { from { clip-path: inset(6% 4% round 28px); } }
  #sf26-count-body { view-timeline: --sf26cb block; }
  #sf26-marquee { animation: sf26-band cubic-bezier(.2,.7,.2,1) both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  @keyframes sf26-band { from { clip-path: inset(0 6% round 32px); } }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #sf26-root *, #sf26-root *::before, #sf26-root *::after { animation: none !important; transition: none !important; }
  #sf26-progress { display: none !important; }
}

/* Page-only additions. Palette and motion vocabulary match pages 250/251. */
#sf26-root {
  --cr-paper: #faf6ed; --cr-ink: #2a2018; --cr-muted: #6b5a47;
  --cr-ember: #9c4a0a; --cr-sage: #56674c; --cr-sand: #eee4d2;
  --cr-gap: 1.5rem; --cr-radius: 50%; --cr-turn: 120s;
  --cr-response: .24s; --cr-ease: cubic-bezier(.2,.8,.2,1);
  --cr-petal-fill: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20600%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M300%2038%20C442%2070%20546%20201%20550%20334%20C538%20455%20425%20564%20286%20566%20C181%20554%20106%20493%2071%20407%20C151%20477%20281%20466%20367%20393%20C477%20294%20457%20137%20300%2038%20Z%22%2F%3E%3C%2Fsvg%3E");
  --cr-petal-edge: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20600%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.25%22%20stroke-linejoin%3D%22round%22%20d%3D%22M300%2038%20C442%2070%20546%20201%20550%20334%20C538%20455%20425%20564%20286%20566%20C181%20554%20106%20493%2071%20407%20C151%20477%20281%20466%20367%20393%20C477%20294%20457%20137%20300%2038%20Z%22%2F%3E%3C%2Fsvg%3E");
}
#sf26-root a:focus-visible, #sf26-root summary:focus-visible {
  outline: 2px solid var(--cr-ember); outline-offset: 6px;
}
#sf26-hero .sf26-lines > span:nth-child(3) > span { animation-delay: .43s; }
#sf26-cta-box { animation: sf26-fade .35s ease-out .1s both; }

/* Two rotating systems, with the person kept still at the centre. */
#cr26-dial { container-type: inline-size; isolation: isolate; }
#cr26-dial::before { content: ''; position: absolute; inset: -8%; width: 116%; height: 116%; z-index: -1; border-radius: var(--cr-radius); background: radial-gradient(closest-side, rgba(241,197,134,.26), transparent 80%); }
#cr26-orbit-a::before, #cr26-orbit-b::before { content: ''; position: absolute; border-radius: var(--cr-radius); }
#cr26-orbit-a::before { inset: 12%; width: 76%; height: 76%; border: 1px solid rgba(156,74,10,.42); }
#cr26-orbit-b::before { inset: 26%; width: 48%; height: 48%; border: 1px solid rgba(86,103,76,.48); }
#cr26-orbit-a > .e-con { transform: translate(-50%,-50%) rotate(var(--a)) translateY(-38cqw); }
#cr26-orbit-b > .e-con { transform: translate(-50%,-50%) rotate(var(--a)) translateY(-24cqw); box-shadow: 0 0 0 4px var(--cr-paper); }
#cr26-orbit-a > .e-con, #cr26-orbit-b > .e-con { animation: sf26-pop .8s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(.4s + var(--i) * 45ms); }
#cr26-orbit-a { animation: cr26-spin var(--cr-turn) linear 1.9s infinite; }
#cr26-orbit-b { animation: cr26-spin 78s linear 1.9s infinite reverse; }
#cr26-center { animation: sf26-rise 1.2s cubic-bezier(.16,1,.3,1) .4s both; }
#cr26-art-labels { animation: sf26-fade 1s ease-out .8s both; }
#cr26-ticks { background: repeating-conic-gradient(from -.25deg, rgba(42,32,24,.35) 0deg .5deg, transparent .5deg 6deg); mask-image: radial-gradient(closest-side, transparent 93%, #000 94%, #000 99%, transparent 100%); -webkit-mask-image: radial-gradient(closest-side, transparent 93%, #000 94%, #000 99%, transparent 100%); animation: cr26-dial-in 1.8s cubic-bezier(.16,1,.3,1) .2s both; }
@keyframes cr26-spin { to { transform: rotate(360deg); } }
@keyframes cr26-dial-in { from { opacity: 0; transform: rotate(-75deg) scale(.86); } }
#cr26-dial:hover #cr26-orbit-a, #cr26-dial:hover #cr26-orbit-b { animation-play-state: paused; }
#cr26-method-a, #cr26-method-b { transform: translate(-50%,-50%); }
#cr26-method-a { border: 1px solid var(--cr-ember); background: rgba(156,74,10,.035); }
#cr26-method-b { border: 1px solid var(--cr-sage); background: rgba(86,103,76,.045); }
#cr26-method-a, #cr26-method-b { transition: background-color .4s var(--cr-ease), box-shadow .4s var(--cr-ease), border-color .4s var(--cr-ease); }
#cr26-method-a::after, #cr26-method-b::after { content: ''; position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s var(--cr-ease); mask-image: radial-gradient(closest-side, transparent 97.5%, #000 98%); -webkit-mask-image: radial-gradient(closest-side, transparent 97.5%, #000 98%); }
#cr26-method-a::after { background: conic-gradient(from -45deg, transparent, var(--cr-ember) 80deg, transparent 160deg); }
#cr26-method-b::after { background: conic-gradient(from 135deg, transparent, var(--cr-sage) 80deg, transparent 160deg); }
#sf26-cards-col > .sf26-card { position: relative; }
#sf26-cards-col > .sf26-card::before { content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: var(--cr-ember); transform: scaleX(1); transform-origin: 0 50%; }
#sf26-cards-col > .sf26-card:nth-child(2)::before { background: var(--cr-sage); }
#cr26-reading-preview::before { content: ''; position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); border: 1px solid rgba(181,165,138,.25); pointer-events: none; }
#cr26-faq .sf26-faq { border-radius: 0; background: transparent; }
#cr26-faq .sf26-faq [data-e-type="e-accordion-item-title"] { cursor: pointer; }
#cr26-faq .sf26-faq [data-e-type="e-accordion-item-title"] > p { transition: color var(--cr-response) ease, transform var(--cr-response) var(--cr-ease); }
#cr26-faq .sf26-faq[open] [data-e-type="e-accordion-item-title"] > p:last-child { transform: rotate(45deg); }
#cr26-faq .sf26-faq[open] [data-e-type="e-accordion-item-title"] > p:first-child { color: var(--cr-ember); }
#cr26-faq .sf26-faq[open] [data-e-type="e-accordion-item-content"] { animation: cr26-answer .24s var(--cr-ease) both; }
@keyframes cr26-answer { from { opacity: .55; translate: 0 6px; } }

/* Responsive feedback on actual actions. The hit target never follows a pointer. */
#sf26-root .sf26-button { transition: transform var(--cr-response) var(--cr-ease), box-shadow var(--cr-response) var(--cr-ease), color var(--cr-response) ease; }
#sf26-root .sf26-button::before { transition: transform .32s var(--cr-ease); }
#sf26-root .sf26-button:hover > span, #sf26-root .sf26-button:focus-visible > span { animation: sf26-arrow .38s var(--cr-ease); }
#sf26-root .sf26-button:active { transform: translateY(0) scale(.985); transition-duration: .08s; }
#sf26-root .sf26-button::after { content: ''; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.2) 48%, transparent 70%); transform: translateX(-120%); }
#sf26-root .sf26-button:is(:hover,:focus-visible)::after { animation: cr26-button-sheen .6s var(--cr-ease) both; }
@keyframes cr26-button-sheen { to { transform: translateX(120%); } }

/* Hover illuminates the matching tradition in the diagram: a reading aid, with
   no extra fields, false buttons or added steps in the purchase journey. */
@media (hover: hover) and (pointer: fine) {
  #cr26-method:has(#sf26-cards-col > .sf26-card:nth-child(1):hover) #cr26-method-a,
  #cr26-method:has(#sf26-cards-col > .sf26-card:nth-child(3):hover) #cr26-method-a { background-color: rgba(156,74,10,.09); box-shadow: 0 0 32px -16px rgba(156,74,10,.36); }
  #cr26-method:has(#sf26-cards-col > .sf26-card:nth-child(2):hover) #cr26-method-b,
  #cr26-method:has(#sf26-cards-col > .sf26-card:nth-child(3):hover) #cr26-method-b { background-color: rgba(86,103,76,.1); box-shadow: 0 0 32px -16px rgba(86,103,76,.36); }
  #cr26-method:has(#sf26-cards-col > .sf26-card:nth-child(1):hover) #cr26-method-a::after,
  #cr26-method:has(#sf26-cards-col > .sf26-card:nth-child(2):hover) #cr26-method-b::after,
  #cr26-method:has(#sf26-cards-col > .sf26-card:nth-child(3):hover) #cr26-method-a::after,
  #cr26-method:has(#sf26-cards-col > .sf26-card:nth-child(3):hover) #cr26-method-b::after { opacity: 1; }
  #cr26-dial::before { transition: opacity .4s var(--cr-ease); }
  #cr26-dial:hover::before { opacity: .55; }
  #cr26-reading-preview { transition: transform .5s var(--cr-ease), box-shadow .5s var(--cr-ease); }
  #cr26-reading-preview:hover { transform: translateY(-4px); box-shadow: 0 36px 72px -44px rgba(42,32,24,.3); }
  #cr26-faq summary:hover [data-e-type="e-accordion-item-title"] > p:first-child { color: var(--cr-ember); }
}

/* Liquid glass v2: thin, irregular membranes rather than thick circular lenses.
   The light travels within a fixed edge mask, so it follows the changing shape.
   Reflection, colour and convergence share scroll progress; the copy is above all. */
@property --cr-glass-turn { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --cr-caustic-gain { syntax: '<number>'; inherits: true; initial-value: .35; }
#sf26-close { view-timeline-name: --sf26close; background: radial-gradient(ellipse at 24% 72%, #4c5140, transparent 58%), radial-gradient(ellipse at 86% 18%, #31473c, transparent 56%), #222a24; color: var(--cr-paper); border-top-color: #3e493b; --cr-caustic-gain: .35; transition: --cr-caustic-gain .35s var(--cr-ease); }
#sf26-close::before { content: ''; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(ellipse at 22% 70%, rgba(200,134,65,.16), transparent 48%), radial-gradient(ellipse at 82% 20%, rgba(99,170,141,.16), transparent 45%); }
#sf26-close .sf26-h2 em { color: #f1c586; }
#sf26-close a:focus-visible { outline-color: #f1c586; }
#cr26-close-copy > .sf26-label, #cr26-close-copy .sf26-small { color: #c7d5be; }
#sf26-close:has(#cr26-close-cta:focus-visible) { --cr-caustic-gain: .48; }
@media (hover: hover) and (pointer: fine) { #sf26-close:has(#cr26-close-cta:hover) { --cr-caustic-gain: .48; } }
#sf26-close-art { z-index: 0; }
#sf26-close-art::before {
  content: ''; position: absolute; inset: -12%; width: 124%; height: 124%; pointer-events: none;
  background: repeating-linear-gradient(114deg, transparent 0 58px, rgba(193,222,204,.13) 59px, transparent 60px 90px), repeating-linear-gradient(66deg, transparent 0 96px, rgba(255,255,255,.19) 97px, transparent 98px 140px);
  mask-image: radial-gradient(ellipse at 50% 50%, transparent 24%, rgba(0,0,0,.5) 65%, transparent 92%); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 24%, rgba(0,0,0,.5) 65%, transparent 92%);
}
#sf26-close-art::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: min(760px,110vw); height: 76%; pointer-events: none;
  transform: translate(-50%,-50%) rotate(-16deg); opacity: var(--cr-caustic-gain);
  background: radial-gradient(ellipse at 48% 20%, rgba(255,255,255,.85), transparent 26%), radial-gradient(ellipse at 55% 80%, rgba(178,217,204,.27), transparent 30%), linear-gradient(112deg, transparent 36%, rgba(255,255,255,.25) 42%, rgba(228,201,158,.15) 48%, transparent 54%);
  filter: blur(20px); mix-blend-mode: screen;
}
/* Two hollow lunar petals share one centre. Their contour is a crescent leaf,
   encoded as a scalable SVG mask; no paired rounded lens boxes remain. */
#sf26-ra, #sf26-rb {
  width: min(740px,94vw); aspect-ratio: 1 / 1; overflow: hidden; mix-blend-mode: normal;
  border: 0; border-radius: 0; box-shadow: none;
  mask-image: var(--cr-petal-fill); -webkit-mask-image: var(--cr-petal-fill);
  mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
  backdrop-filter: blur(5px) saturate(1.25); -webkit-backdrop-filter: blur(5px) saturate(1.25);
  filter: drop-shadow(0 0 12px rgba(198,226,201,.1));
}
#sf26-ra { transform: translate(-50%,-50%) rotate(-24deg); background: radial-gradient(ellipse at 72% 48%, rgba(255,255,255,.12), transparent 56%), linear-gradient(124deg, rgba(174,203,188,.035), rgba(221,177,126,.13)); }
#sf26-rb { width: min(560px,76vw); transform: translate(-50%,-50%) translate(12px,36px) rotate(156deg); background: radial-gradient(ellipse at 82% 38%, rgba(255,255,255,.1), transparent 58%), linear-gradient(138deg, rgba(178,217,201,.09), rgba(255,255,255,.01) 52%, rgba(146,179,164,.12)); }
#sf26-ra::before, #sf26-rb::before, #sf26-ra::after, #sf26-rb::after {
  content: ''; position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none;
}
#sf26-ra::before, #sf26-rb::before {
  padding: 0; box-sizing: border-box; transform: none;
  background: conic-gradient(from var(--cr-glass-turn), transparent 0deg 35deg, rgba(255,255,255,.98) 56deg, rgba(202,226,214,.8) 76deg, transparent 99deg 164deg, rgba(255,255,255,.5) 194deg, rgba(234,183,136,.55) 208deg, transparent 230deg 294deg, rgba(217,229,243,.58) 322deg, transparent 346deg);
  mask-image: var(--cr-petal-edge); -webkit-mask-image: var(--cr-petal-edge);
  mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
  mask-composite: add; -webkit-mask-composite: source-over;
}
#sf26-ra::before { --cr-glass-turn: 258deg; }
#sf26-rb::before { --cr-glass-turn: 176deg; }
#sf26-ra::after, #sf26-rb::after {
  inset: -30%; width: 160%; height: 160%; border-radius: 0; opacity: .45;
  background: linear-gradient(116deg, transparent 32%, rgba(255,255,255,.04) 37%, rgba(255,255,255,.44) 40%, rgba(225,242,236,.15) 43%, transparent 48%), linear-gradient(62deg, transparent 58%, rgba(242,203,149,.08) 64%, rgba(255,255,255,.27) 67%, transparent 71%);
  filter: blur(8px); transform: translateX(8%) rotate(10deg); mix-blend-mode: screen;
}
#sf26-rb::after { transform: translateX(-8%) rotate(-12deg); }
#cr26-close-copy > .sf26-lead { color: #e0e5d7; }

@supports (animation-timeline: view()) {
  /* Exit parallax is limited to the artwork; headings and actions stay put. */
  #cr26-dial { animation: cr26-dial-exit linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  @keyframes cr26-dial-exit { to { translate: 0 -28px; rotate: 12deg; scale: .96; } }
  #cr26-method-art { view-timeline-name: --cr26method; }
  #cr26-method-a { animation: cr26-method-a cubic-bezier(.42,0,.58,1) both; animation-timeline: --cr26method; animation-range: entry 15% cover 55%; }
  #cr26-method-b { animation: cr26-method-b cubic-bezier(.42,0,.58,1) both; animation-timeline: --cr26method; animation-range: entry 15% cover 55%; }
  @keyframes cr26-method-a { from { transform: translate(-50%,-50%) translateY(-32%); opacity: 0; } }
  @keyframes cr26-method-b { from { transform: translate(-50%,-50%) translateY(32%); opacity: 0; } }
  #sf26-cards-col > .sf26-card { view-timeline-name: --cr26card; }
  #sf26-cards-col > .sf26-card::before { animation: sf26-draw var(--cr-ease) both; animation-timeline: --cr26card; animation-range: entry 10% cover 38%; }
  #cr26-reading-preview { animation: cr26-paper-in cubic-bezier(.2,.7,.2,1) both; animation-timeline: view(); animation-range: entry 0% cover 32%; }
  @keyframes cr26-paper-in { from { translate: 0 48px; rotate: 2deg; opacity: 0; } }
  #cr26-reading-preview > .e-con > .e-con { animation: cr26-reading-row var(--cr-ease) both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  @keyframes cr26-reading-row { from { opacity: .4; translate: 0 16px; } }
  #sf26-ra { animation: sf26-meet-a cubic-bezier(.42,0,.58,1) both; animation-timeline: --sf26close; animation-range: entry 30% cover 48%; }
  #sf26-rb { animation: sf26-meet-b cubic-bezier(.42,0,.58,1) both; animation-timeline: --sf26close; animation-range: entry 30% cover 48%; }
  @keyframes sf26-meet-a {
    0% { transform: translate(-50%,-50%) translateY(72px) rotate(-82deg) scale(.78); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(-50%,-50%) translateY(0) rotate(-24deg) scale(1); opacity: 1; }
  }
  @keyframes sf26-meet-b {
    0% { transform: translate(-50%,-50%) translate(12px,-56px) rotate(94deg) scale(.72); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(-50%,-50%) translate(12px,36px) rotate(156deg) scale(1); opacity: 1; }
  }
  /* Optical movement and circle movement use the same progress and easing.
     Stop scrolling: light stops. Scroll back: it follows the circle back. */
  #sf26-ra::before { animation: cr26-glass-light-a cubic-bezier(.42,0,.58,1) both; animation-timeline: --sf26close; animation-range: entry 30% cover 48%; }
  #sf26-rb::before { animation: cr26-glass-light-b cubic-bezier(.42,0,.58,1) both; animation-timeline: --sf26close; animation-range: entry 30% cover 48%; }
  #sf26-ra::after { animation: cr26-glass-sheen-a cubic-bezier(.42,0,.58,1) both; animation-timeline: --sf26close; animation-range: entry 30% cover 48%; }
  #sf26-rb::after { animation: cr26-glass-sheen-b cubic-bezier(.42,0,.58,1) both; animation-timeline: --sf26close; animation-range: entry 30% cover 48%; }
  #sf26-close-art::before { animation: cr26-light-field linear both; animation-timeline: --sf26close; animation-range: entry 30% cover 48%; }
  #sf26-close-art::after { animation: cr26-caustic cubic-bezier(.42,0,.58,1) both; animation-timeline: --sf26close; animation-range: entry 30% cover 48%; }
  @keyframes cr26-glass-light-a { from { --cr-glass-turn: 108deg; } to { --cr-glass-turn: 258deg; } }
  @keyframes cr26-glass-light-b { from { --cr-glass-turn: 316deg; } to { --cr-glass-turn: 176deg; } }
  @keyframes cr26-glass-sheen-a { from { transform: translateX(-22%) rotate(-12deg); } to { transform: translateX(8%) rotate(10deg); } }
  @keyframes cr26-glass-sheen-b { from { transform: translateX(22%) rotate(14deg); } to { transform: translateX(-8%) rotate(-12deg); } }
  @keyframes cr26-light-field { from { transform: translate(-18px,12px) rotate(-3deg); opacity: .2; } to { transform: translate(18px,-12px) rotate(3deg); opacity: 1; } }
  @keyframes cr26-caustic { from { transform: translate(-50%,-50%) rotate(-30deg) scale(.78); opacity: 0; } to { transform: translate(-50%,-50%) rotate(-16deg) scale(1); opacity: var(--cr-caustic-gain); } }
}
@media (max-width: 767px) {
  #sf26-art { max-width: 360px; align-self: center; }
  #sf26-root #sf26-proof > p { text-align: left; width: 100%; }
  #sf26-root #sf26-proof { align-items: flex-start; }
  #sf26-fig-col { max-width: 380px; align-self: center; width: 100%; }
  #sf26-ra { width: 142vw; }
  #sf26-rb { width: 112vw; }
  #sf26-ra, #sf26-rb { aspect-ratio: 1 / 1; backdrop-filter: blur(3px) saturate(1.2); -webkit-backdrop-filter: blur(3px) saturate(1.2); }
  #sf26-close-art::before { opacity: .6; }
  #cr26-close-copy > .sf26-small { max-width: 290px; }
}
@media (prefers-reduced-transparency: reduce) {
  #sf26-ra, #sf26-rb { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(60,77,65,.75); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #sf26-root *, #sf26-root *::before, #sf26-root *::after { animation: none !important; transition: none !important; }
  #sf26-progress { display: none !important; }
}

/* Temporary comparison: 01 Xen-inspired living glass; 02 existing lunar bloom.
   All native IDs are unique. This file can be removed with the Xen section. */
@property --x26-light-angle { syntax: '<angle>'; inherits: true; initial-value: 210deg; }
#cr26-lunar-label { color: #c7d5be; }
#x26-close {
  background: radial-gradient(ellipse at 80% 34%, rgba(40,88,97,.4), transparent 55%), radial-gradient(ellipse at 16% 80%, rgba(49,65,75,.42), transparent 54%), #101c21;
  color: #faf6ed; border-top: 1px solid #354446;
  view-timeline-name: --x26scene;
  --cr-caustic-gain: .24; transition: --cr-caustic-gain .35s var(--cr-ease);
}
#x26-close::before {
  content: ''; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  background: radial-gradient(circle at 12% 18%, rgba(183,220,220,.6) 0 1px, transparent 2px), radial-gradient(circle at 35% 75%, rgba(237,195,156,.5) 0 1px, transparent 2px), radial-gradient(circle at 84% 77%, rgba(170,224,225,.6) 0 1px, transparent 2px), radial-gradient(circle at 91% 22%, rgba(225,218,236,.65) 0 1px, transparent 2px), radial-gradient(ellipse at 68% 50%, rgba(104,115,175,.09), transparent 46%);
  opacity: .7;
}
#x26-close::after {
  content: ''; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at 73% 39%, rgba(175,206,222,.2), transparent 34%), radial-gradient(ellipse at 20% 68%, rgba(172,136,182,.14), transparent 30%);
  opacity: var(--cr-caustic-gain); mix-blend-mode: screen;
}
#x26-close:has(#x26-cta:focus-visible) { --cr-caustic-gain: .4; }
@media (hover: hover) and (pointer: fine) { #x26-close:has(#x26-cta:hover) { --cr-caustic-gain: .4; } }
#x26-close .sf26-h2 em { color: #f1c586; }
#x26-close .sf26-label, #x26-close .sf26-small { color: #c3d6d2; }
#x26-copy > .sf26-lead { color: #e0e6de; }
#x26-close a:focus-visible { outline-color: #f1c586; }
#x26-art { z-index: 0; }
#x26-a, #x26-b { transform: translate(-50%,-50%); --x26-light-angle: 210deg; }
#x26-a { left: 74%; top: 43%; width: min(470px,46vw); }
#x26-b { left: 20%; top: 67%; width: min(280px,30vw); --x26-light-angle: 120deg; }
#x26-cell-a, #x26-cell-b {
  aspect-ratio: .92 / 1; overflow: hidden; isolation: isolate;
  border-radius: 45% 55% 62% 38% / 53% 39% 61% 47%;
  background: radial-gradient(ellipse at 62% 44%, rgba(183,133,211,.15), transparent 49%), radial-gradient(ellipse at 24% 75%, rgba(70,157,178,.12), transparent 52%), linear-gradient(135deg, rgba(185,239,242,.035), rgba(207,185,228,.06) 48%, rgba(78,154,177,.045));
  backdrop-filter: blur(5px) saturate(1.3); -webkit-backdrop-filter: blur(5px) saturate(1.3);
  box-shadow: inset 0 0 28px rgba(153,211,226,.07), 0 0 52px -30px rgba(116,179,206,.26);
  animation: x26-cell-breathe 16s ease-in-out infinite alternate;
}
#x26-cell-b { aspect-ratio: 1.06 / 1; animation-delay: -7s; animation-direction: alternate-reverse; }
#x26-cell-a::before, #x26-cell-b::before {
  content: ''; position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; padding: 1.5px; box-sizing: border-box; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--x26-light-angle), transparent 0deg 20deg, rgba(183,234,248,.8) 42deg, rgba(255,247,255,.92) 62deg, rgba(209,172,230,.65) 87deg, transparent 112deg 198deg, rgba(107,207,215,.65) 224deg, rgba(239,209,237,.35) 252deg, transparent 284deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
#x26-cell-a::after, #x26-cell-b::after {
  content: ''; position: absolute; inset: -15%; width: 130%; height: 130%; pointer-events: none; z-index: 2;
  background: repeating-radial-gradient(ellipse at 32% 76%, transparent 0 34px, rgba(222,233,244,.055) 35px, transparent 37px 58px), linear-gradient(120deg, transparent 38%, rgba(210,238,246,.18) 43%, transparent 48%), radial-gradient(ellipse at 63% 39%, rgba(205,174,225,.14), transparent 37%);
  transform: rotate(-18deg); mix-blend-mode: screen; opacity: .65;
  animation: x26-plasma 19s ease-in-out infinite alternate;
}
#x26-core-a, #x26-core-b {
  position: absolute; left: 61%; top: 43%; width: 35%; height: 39%; z-index: 1;
  transform: translate(-50%,-50%) rotate(-18deg); border-radius: 42% 58% 39% 61% / 52% 37% 63% 48%;
  background: radial-gradient(ellipse at 34% 24%, rgba(255,227,235,.84), transparent 37%), radial-gradient(ellipse at 69% 58%, rgba(202,118,181,.58), transparent 48%), radial-gradient(ellipse at 49% 50%, rgba(175,130,195,.6), rgba(133,91,168,.21) 56%, transparent 78%);
  box-shadow: 0 0 36px -6px rgba(199,139,204,.28), inset 0 0 24px rgba(218,180,229,.25);
  opacity: calc(.5 + var(--cr-caustic-gain)); filter: blur(.35px);
  animation: x26-core-drift 12s ease-in-out infinite alternate;
}
#x26-core-b { left: 43%; top: 57%; width: 39%; height: 43%; animation-delay: -5s; background: radial-gradient(ellipse at 36% 28%, rgba(248,230,232,.7), transparent 38%), radial-gradient(ellipse at 68% 64%, rgba(209,128,164,.45), transparent 48%), radial-gradient(ellipse at 49% 50%, rgba(179,139,192,.6), rgba(128,100,165,.2) 56%, transparent 78%); }
#x26-core-a::before, #x26-core-b::before {
  content: ''; position: absolute; inset: 8%; width: 84%; height: 84%; border-radius: inherit; pointer-events: none;
  background: repeating-radial-gradient(ellipse at 24% 67%, transparent 0 8px, rgba(246,214,246,.14) 10px, transparent 12px 23px);
  transform: rotate(28deg); mix-blend-mode: screen;
}
#x26-cell-a > [id^="x26-vesicle-"], #x26-cell-b > [id^="x26-vesicle-"] {
  position: absolute; width: 6%; aspect-ratio: 1 / 1; border-radius: 50%;
  background: radial-gradient(circle at 30% 24%, rgba(240,248,255,.27), rgba(175,217,233,.03) 63%); border: 1px solid rgba(196,226,238,.1);
}
#x26-cell-a > [id$="-0"], #x26-cell-b > [id$="-0"] { left: 24%; top: 28%; }
#x26-cell-a > [id$="-1"], #x26-cell-b > [id$="-1"] { left: 74%; top: 72%; width: 4%; }
#x26-cell-a > [id$="-2"], #x26-cell-b > [id$="-2"] { left: 32%; top: 82%; width: 3%; }
@keyframes x26-cell-breathe { from { border-radius: 45% 55% 62% 38% / 53% 39% 61% 47%; transform: rotate(-7deg) scale(.985); } to { border-radius: 58% 42% 39% 61% / 39% 56% 44% 61%; transform: rotate(5deg) scale(1.025); } }
@keyframes x26-plasma { to { transform: rotate(12deg) translate(3%,-2%); } }
@keyframes x26-core-drift { to { transform: translate(-46%,-54%) rotate(16deg) scale(.94); } }
@supports (animation-timeline: view()) {
  #x26-a { animation: x26-arrive-a cubic-bezier(.42,0,.58,1) both; animation-timeline: --x26scene; animation-range: entry 30% cover 48%; }
  #x26-b { animation: x26-arrive-b cubic-bezier(.42,0,.58,1) both; animation-timeline: --x26scene; animation-range: entry 30% cover 48%; }
  @keyframes x26-arrive-a { 0% { transform: translate(-50%,-50%) translate(74px,52px) scale(.88); opacity: 0; --x26-light-angle: 105deg; } 20% { opacity: 1; } 100% { transform: translate(-50%,-50%) translate(0,0) scale(1); opacity: 1; --x26-light-angle: 210deg; } }
  @keyframes x26-arrive-b { 0% { transform: translate(-50%,-50%) translate(-64px,-34px) scale(.88); opacity: 0; --x26-light-angle: 218deg; } 20% { opacity: 1; } 100% { transform: translate(-50%,-50%) translate(0,0) scale(1); opacity: 1; --x26-light-angle: 120deg; } }
}
@media (max-width: 767px) {
  #x26-a { left: 89%; top: 34%; width: 78vw; }
  #x26-b { left: 8%; top: 76%; width: 58vw; }
  #x26-cell-a, #x26-cell-b { backdrop-filter: blur(3px) saturate(1.25); -webkit-backdrop-filter: blur(3px) saturate(1.25); }
  #x26-close::before { opacity: .5; }
}
@media (prefers-reduced-transparency: reduce) {
  #x26-cell-a, #x26-cell-b { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(32,54,65,.8); }
}
@media (prefers-reduced-motion: reduce) {
  #x26-close *, #x26-close *::before, #x26-close *::after, #x26-close::before, #x26-close::after { animation: none !important; transition: none !important; }
}/* End custom CSS */