@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-latin-600-normal.woff2") format("woff2")}

:root{
  color-scheme:dark;
  --bg:#050506;
  --bg-band:#08080B;
  --card:#0D0D12;
  --card-lit:#100F18;
  --line:#1B1A22;
  --line-2:#23222C;
  --line-3:#2E2C3A;
  --line-strong:#7A768F;
  --head:#F7F4FC;
  --head-2:#F4F1FA;
  --text:#ECE9F4;
  --text-2:#B9B6C6;
  --muted:#9A96AC;
  --list:#CFCBDD;
  --soft:#D8D4E6;
  --accent:#B9A7F5;
  --on-accent:#0B0A12;
  --link:#CFC4FA;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:6%;
  --gap-xl:8rem;
  --gap-lg:6rem;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:1.0625rem;line-height:1.6}
img{max-width:100%}
[hidden]{display:none!important}
h1,h2,h3,p,ul,figure{margin:0}
a{color:var(--link)}
a:hover{color:#fff}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--link);outline-offset:4px;border-radius:6px}

.skip{position:absolute;left:1rem;top:-4rem;padding:0.75rem 1rem;background:var(--accent);color:var(--on-accent);font-weight:600;border-radius:8px;text-decoration:none;z-index:10}
.skip:focus{top:1rem;color:var(--on-accent)}

.wrap{max-width:1160px;margin:0 auto}
.site-header{padding:0 var(--gutter)}
.site-header .wrap{padding:1.25rem 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.5rem 1.5rem}
.brand{display:inline-flex;align-items:center;gap:0.75rem;padding:0.25rem 0;font-family:var(--serif);font-size:1.5rem;font-weight:600;line-height:1.2;color:var(--head-2);text-decoration:none}
.brand:hover{color:var(--head-2)}
.mark{display:block;width:44px;height:44px;border-radius:10px;border:1px solid var(--line-2);transition:filter 300ms ease-out}
.brand:hover .mark{filter:brightness(1.3)}
.site-nav{display:flex;flex-wrap:wrap;gap:0.25rem 0.5rem}
.site-nav a,.site-footer nav a{padding:0.75rem 0.625rem;color:var(--text-2);text-decoration:none;font-size:0.9375rem;transition:color 150ms ease-out}
.site-nav a:hover,.site-footer nav a:hover{color:#fff}

.display{font-family:var(--serif);font-weight:500;color:var(--head);text-wrap:balance}
h1.display{font-size:clamp(2.75rem,6.4vw,5.5rem);line-height:1}
h2.display{font-size:clamp(2.25rem,4.4vw,3.75rem);line-height:1.05}
.lead{max-width:32rem;font-size:1.1875rem;color:var(--text-2)}
.sub{color:var(--text-2)}
.note{font-size:0.9375rem;color:var(--muted)}

.btn{display:inline-block;padding:1rem 1.875rem;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:600;text-align:center;text-decoration:none;transition:filter 150ms ease-out,transform 150ms ease-out}
.btn:hover{color:var(--on-accent);filter:brightness(1.12)}
.btn:active{transform:scale(0.98)}
.text-link{padding:0.875rem 0.25rem;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line-strong);transition:border-color 150ms ease-out}
.text-link:hover{border-color:#fff}

/* Hero */
.hero{padding:3rem var(--gutter) var(--gap-xl);overflow-x:clip}
.hero-grid{display:flex;flex-wrap:wrap;align-items:center;gap:3rem 4rem}
.hero-copy{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:1.5rem}
.cta{display:flex;flex-direction:column;gap:0.75rem;margin-top:1.5rem}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem 1.5rem}
.hero-art-col{flex:1.3 1 420px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:0.5rem}
.art{position:relative;width:100%;max-width:680px;aspect-ratio:2000/1730;animation:emerge 900ms var(--ease-out) both}
.art img{position:relative;display:block;width:100%;height:auto}
.pool{position:absolute;inset:-6%;background:radial-gradient(ellipse closest-side at 52% 44%,rgba(150,140,190,0.3),rgba(150,140,190,0))}
.warm{position:absolute;inset:-10%;opacity:0;background:radial-gradient(ellipse closest-side at 52% 44%,rgba(255,214,160,0.42),rgba(233,164,90,0.16) 55%,rgba(199,123,58,0))}
.art.swell .warm{animation:swell 1800ms cubic-bezier(0.4,0,0.2,1) both}
.glow{position:absolute;left:25.85%;top:40.95%;width:12%;aspect-ratio:1;transition:transform 550ms var(--ease-out),opacity 400ms ease-out}
.art.swell .glow{opacity:0}
.ring{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle closest-side,rgba(255,226,176,0) 30%,rgba(255,226,176,0.95) 37%,rgba(240,179,106,0.55) 47%,rgba(199,123,58,0.14) 72%,rgba(199,123,58,0) 100%)}
.ring.pa{animation:clickA 520ms 140ms var(--ease-out)}
.ring.pb{animation:clickB 520ms 140ms var(--ease-out)}
.tapzone{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tapzone:focus-visible{outline-offset:-6px;border-radius:24px}
.bead-status{display:flex;flex-direction:column;align-items:center;gap:0.25rem;text-align:center}
.bead-label{font-family:var(--serif);font-size:1.5rem;line-height:1.2;color:var(--head-2)}
.bead-label.la{animation:sayA 260ms ease-out}
.bead-label.lb{animation:sayB 260ms ease-out}

/* Text beside a phone */
.split{display:flex;flex-wrap:wrap;align-items:center;gap:4rem 6rem}
.split.reverse{flex-direction:row-reverse}
.split-copy{flex:1 1 460px;min-width:0;display:flex;flex-direction:column}
.phone{flex:0 1 300px;min-width:0;margin:0 auto}
.phone img{display:block;width:100%;height:auto;border:1px solid #3A3846;border-radius:44px}

.rosary{padding:0 var(--gutter) var(--gap-xl)}
.rosary .split-copy{gap:3rem}
.points{display:flex;flex-direction:column;gap:2rem;max-width:34rem}
.points h3{font-size:1.1875rem;font-weight:600;color:var(--head-2);margin-bottom:0.25rem}
.points p{color:var(--text-2)}

/* Banded sections */
.band{padding:var(--gap-lg) var(--gutter);background:var(--bg-band);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-inner{display:flex;flex-direction:column;gap:3rem}
.band-head{display:flex;flex-direction:column;gap:0.75rem;max-width:36rem}
.row{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.5rem 3rem;padding:1.5rem 0;border-top:1px solid var(--line-2)}
.row h3{flex:0 0 180px;font-family:var(--serif);font-size:2.125rem;line-height:1.1;font-weight:600;color:var(--head-2)}
.row p{flex:1 1 320px;min-width:0;color:var(--text-2)}
.row .opts{flex:0 1 240px;font-size:0.9375rem;color:var(--accent)}

/* Cathedral line and paintings */
.cathedral{padding:var(--gap-xl) 0;display:flex;flex-direction:column;gap:4rem}
.quote-wrap{padding:0 var(--gutter)}
.quote-inner{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem;text-align:center}
.quote{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(2rem,4.2vw,3.25rem);line-height:1.15;text-wrap:balance;color:var(--head-2)}
.quote-inner p{max-width:34rem;margin:0 auto;color:var(--text-2)}
.arcade-wrap{display:flex;flex-direction:column;gap:1rem}
.arcade{display:flex;gap:1.5rem;overflow-x:auto;padding:0.5rem var(--gutter) 1.5rem;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--line-3) transparent}
.arcade figure{flex:0 0 240px;display:flex;flex-direction:column;gap:0.75rem;scroll-snap-align:center}
.niche{display:block;width:240px;height:340px;object-fit:cover;border-radius:120px 120px 4px 4px}
.niche.right{object-position:68% 50%}
.arcade figcaption{font-size:0.875rem;line-height:1.4;color:var(--muted)}
.arcade figcaption span{display:block;color:var(--soft)}
.arcade-nav{display:flex;justify-content:center;gap:0.75rem;padding:0 var(--gutter)}
.round{width:48px;height:48px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:50%;background:transparent;color:var(--text);cursor:pointer;transition:border-color 150ms ease-out,transform 150ms ease-out}
.round:hover{border-color:#fff}
.round:active{transform:scale(0.96)}

/* Feature groups */
.groups{padding:0 var(--gutter) var(--gap-xl)}
.groups .wrap{display:flex;flex-direction:column;gap:var(--gap-xl)}
.groups .split-copy{gap:1.5rem}
.group-title{padding-bottom:1rem;border-bottom:1px solid var(--line-2);font-family:var(--serif);font-weight:600;font-size:1.875rem;line-height:1.1;color:var(--head)}
.item h3{font-size:1.0625rem;font-weight:600;color:var(--head-2);margin-bottom:0.25rem}
.item p{font-size:1rem;color:var(--text-2)}
.tag{font-size:0.8125rem;font-weight:500;color:var(--accent)}
.item .today{margin-top:0.25rem;font-family:var(--serif);font-style:italic;font-size:1.25rem;line-height:1.3;color:var(--accent)}
.today:empty{display:none}

/* Pricing */
.pricing .band-inner{max-width:960px;margin:0 auto}
.pricing .band-head{max-width:none;text-align:center}
.pricing .band-head p{max-width:34rem;margin:0 auto}
.plans{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:stretch}
.plan{flex:1 1 320px;min-width:0;padding:2rem;display:flex;flex-direction:column;gap:1.5rem;border:1px solid var(--line-3);border-radius:24px;background:var(--card)}
.plan.free{border-color:var(--accent);background:var(--card-lit)}
.plan h3{font-size:1.0625rem;font-weight:600;color:var(--text-2);margin-bottom:0.5rem}
.plan.free h3{color:var(--accent)}
.price-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.25rem 0.75rem;color:var(--text-2)}
.price{font-family:var(--serif);font-size:3.5rem;line-height:1;color:var(--head)}
.plan ul{padding-left:1.25rem;display:flex;flex-direction:column;gap:0.5rem;color:var(--list)}
.plan .foot{margin-top:auto;font-size:0.9375rem;color:var(--text-2)}
.plan .btn{margin-top:auto}
.fine{max-width:36rem;margin:0 auto;text-align:center;font-size:0.875rem;color:var(--muted)}

/* Closing */
.closing{padding:var(--gap-xl) var(--gutter)}
.closing-inner{max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:2rem;text-align:center}
.closing h2{font-size:clamp(2.5rem,5vw,4.5rem);line-height:1.02}
.closing-cta{display:flex;flex-direction:column;align-items:center;gap:0.75rem}
.closing .btn{padding:1.125rem 2.125rem}
.soon{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--accent)}

.site-footer{padding:1.5rem var(--gutter) 3rem;border-top:1px solid var(--line)}
.site-footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.5rem 2rem;font-size:0.875rem;color:var(--muted)}
.motto{flex:1 0 100%;padding-bottom:1rem;text-align:center;color:var(--text-2)}
.motto span{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--soft)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:0.25rem 0.5rem}

/* Privacy, Terms, Support */
.doc{max-width:44rem;margin:0 auto;padding:3rem var(--gutter) var(--gap-lg)}
.doc h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.5rem,5vw,3.5rem);line-height:1.05;color:var(--head)}
.doc .updated{margin-top:0.5rem;color:var(--muted);font-size:0.9375rem}
.doc h2{margin-top:2.5rem;font-family:var(--serif);font-weight:600;font-size:1.625rem;line-height:1.2;color:var(--head-2)}
.doc p,.doc ul{margin-top:0.75rem;color:var(--text-2)}
.doc ul{padding-left:1.25rem}
.doc li+li{margin-top:0.5rem}
.center{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:3rem var(--gutter);text-align:center}
.center p{color:var(--text-2)}

@keyframes emerge{from{opacity:0;filter:blur(14px)}to{opacity:1;filter:blur(0)}}
@keyframes emergeFade{from{opacity:0}to{opacity:1}}
@keyframes swell{0%{opacity:0}45%{opacity:1}100%{opacity:0}}
@keyframes clickA{0%{transform:scale(1);filter:brightness(1)}25%{transform:scale(1.22);filter:brightness(1.5)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes clickB{0%{transform:scale(1);filter:brightness(1)}25%{transform:scale(1.22);filter:brightness(1.5)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes sayA{from{opacity:0.25}to{opacity:1}}
@keyframes sayB{from{opacity:0.25}to{opacity:1}}
@keyframes lit{0%{filter:brightness(0.4)}35%{filter:brightness(1)}65%{filter:brightness(1)}100%{filter:brightness(0.4)}}
@keyframes kindle{from{color:#55516A}to{color:#F4F1FA}}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @supports (animation-timeline:view()){
    .niche{animation:lit linear both;animation-timeline:view(inline);animation-range:entry 0% exit 100%}
    .quote{animation:kindle linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  }
}

@media (prefers-reduced-motion:reduce){
  .art{animation:emergeFade 300ms ease-out both}
  .glow{transition:opacity 300ms ease-out}
  .ring.pa,.ring.pb{animation:none}
  .btn,.round,.mark{transition:none}
  .btn:active,.round:active{transform:none}
}

@media (max-width:640px){
  :root{--gap-xl:5rem;--gap-lg:4rem}
  .brand{font-size:1.25rem}
  .mark{width:40px;height:40px}
  .row h3{flex-basis:100%}
  .plan{padding:1.5rem}
}

/* Screenshots that fade into the page */
.phone.fade img{border-bottom:0;border-radius:44px 44px 0 0;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}

/* Featured painting */
.feature-wrap{padding:0 var(--gutter)}
.feature{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:3rem 4.5rem}
.frame{flex:2.2 1 34rem;min-width:0;display:flex;flex-direction:column;gap:1rem}
.frame button{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:6px}
.frame button::after{content:"";position:absolute;inset:-1.25rem;z-index:-1;border-radius:1.5rem;background:radial-gradient(ellipse closest-side,rgba(255,214,160,0.13),rgba(255,214,160,0))}
.frame img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 0 0 1px rgba(216,212,230,0.12),0 2.5rem 6rem -1.5rem rgba(0,0,0,0.9);transition:transform 700ms var(--ease-out),filter 700ms var(--ease-out)}
.frame button:hover img{transform:scale(1.012);filter:brightness(1.06)}
.frame figcaption{font-family:var(--serif);font-style:italic;font-size:1.125rem;color:var(--text-2)}
.feature-copy{flex:1 1 20rem;min-width:0;display:flex;flex-direction:column;gap:1.5rem}
.feature-copy .quote{text-align:left}
.feature-copy p{max-width:30rem;color:var(--text-2)}

/* Bigger gallery arches, each opens larger */
.arcade{gap:1.75rem}
.arcade figure{flex-basis:280px}
.niche{width:280px;height:400px;border-radius:140px 140px 4px 4px;box-shadow:0 0 0 1px rgba(216,212,230,0.1);transition:transform 600ms var(--ease-out)}
.zoom{display:block;padding:0;border:0;background:none;cursor:zoom-in;border-radius:140px 140px 4px 4px}
.zoom:hover .niche{transform:translateY(-6px)}

dialog.lightbox{border:0;padding:0;background:transparent;color:var(--text);max-width:min(92vw,75rem);max-height:92vh;margin:auto;overflow:visible}
dialog.lightbox::backdrop{background:rgba(3,3,4,0.94)}
.lightbox figure{display:flex;flex-direction:column;align-items:center;gap:1rem}
.lightbox img{display:block;max-width:100%;max-height:calc(92vh - 5rem);width:auto;height:auto;border-radius:4px}
.lightbox figcaption{text-align:center;color:var(--text-2)}
.lightbox .round{position:fixed;top:1.25rem;right:1.25rem;background:rgba(5,5,6,0.6)}

/* Rosary styles */
.styles{padding:0 var(--gutter) var(--gap-xl)}
.styles-inner{display:flex;flex-direction:column;gap:2.5rem}
.styles-head{display:flex;flex-direction:column;align-items:center;gap:0.75rem;text-align:center}
.styles-head .sub{max-width:34rem}
.stage{--tint:196,214,240;position:relative;width:100%;max-width:62rem;margin:0 auto;aspect-ratio:3490/3020}
.stage::before{content:"";position:absolute;inset:-4% -8%;background:radial-gradient(ellipse 46% 40% at 50% 50%,rgba(var(--tint),0.16),rgba(var(--tint),0) 100%),radial-gradient(ellipse 50% 46% at 50% 52%,#24222e 0%,#121119 55%,rgba(5,5,6,0) 100%);transition:background 900ms ease-out}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(0.985);filter:drop-shadow(0 1.5rem 2rem rgba(0,0,0,0.6));transition:opacity 900ms ease-out,transform 1200ms var(--ease-out)}
.stage img.on{opacity:1;transform:none}
.style-name{margin-top:-1.5rem;text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,2.6vw,2.25rem);color:var(--head-2)}
.swatches{display:flex;flex-wrap:wrap;justify-content:center;gap:0.5rem 1rem;padding:0;list-style:none}
.swatch{display:flex;flex-direction:column;align-items:center;gap:0.5rem;min-width:5.5rem;padding:0.625rem 0.5rem;border:0;border-radius:12px;background:none;color:var(--text-2);font:inherit;font-size:0.875rem;cursor:pointer;transition:color 200ms ease-out}
.swatch img{display:block;width:56px;height:56px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line-3);transition:box-shadow 250ms ease-out,transform 250ms var(--ease-out)}
.swatch:hover{color:var(--text)}
.swatch:hover img{transform:translateY(-2px)}
.swatch[aria-pressed="true"]{color:var(--head-2)}
.swatch[aria-pressed="true"] img{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--accent)}
.swatch.free{cursor:default}
.swatch.free:hover img{transform:none}
.swatch small{display:block;margin-top:-0.375rem;font-size:0.75rem;color:var(--muted)}
.styles-foot{max-width:36rem;margin:0 auto;text-align:center;color:var(--text-2)}

@media (prefers-reduced-motion:reduce){
  .stage img,.stage::before,.frame img,.niche,.swatch img{transition:opacity 300ms ease-out;transform:none!important}
}
@media (max-width:640px){
  .arcade figure{flex-basis:224px}
  .niche{width:224px;height:320px;border-radius:112px 112px 4px 4px}
  .zoom{border-radius:112px 112px 4px 4px}
  .swatch{min-width:4.5rem}
  .swatch img{width:48px;height:48px}
}