:root{
  --ink:#141318; --panel:#1d1b27; --panel-2:#242231; --panel-edge:rgba(246,242,208,.10);
  --band-violet:#4a3185; --band-indigo:#2c2a5e; --glow:#f6f2d0; --glow-strong:#fffbe0;
  --text:#e9e7de; --muted:#aaa7b9; --display:"Syne",sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",monospace; --maxw:1020px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--text);font-family:var(--body);font-size:1.06rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--glow)}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:4px}

/* header */
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem clamp(1rem,4vw,2.5rem);background:rgba(20,19,24,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--panel-edge)}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--text);font-family:var(--display);font-weight:700;font-size:1.02rem}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-tag{font-family:var(--mono);font-weight:400;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.brand img{border-radius:50%;width:40px;height:40px;object-fit:cover}
.header-right{display:flex;align-items:center;gap:1.2rem}
.site-header nav{display:flex;gap:clamp(.7rem,2vw,1.3rem);flex-wrap:wrap}
.site-header nav a{color:var(--muted);text-decoration:none;font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;transition:color .2s}
.site-header nav a:hover{color:var(--glow)}
.header-social{display:flex;gap:.7rem}
.header-social a{color:var(--muted);transition:color .2s,transform .15s;display:flex}
.header-social a:hover{color:var(--glow);transform:translateY(-2px)}

/* hero: an even indigo with the faintest center-lightening so what light
   there is relates to the dots, not the bottom edge. The real light comes from
   the dots themselves (each blooms on the canvas, see script.js). */
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(70% 75% at 50% 52%, #1f1636, transparent 75%),
    #140e2b;
  border-bottom:1px solid #2b2a2a;
  text-align:center;padding:clamp(2rem,5vw,3.2rem) 1.25rem clamp(1.6rem,3.5vw,2.4rem)}
.hero h1{position:relative;z-index:2;font-family:var(--display);font-weight:800;font-size:clamp(2rem,5.5vw,3.4rem);line-height:1.05;letter-spacing:-.01em;color:var(--glow-strong);margin:0}
.reveal-wrap{position:relative;z-index:2;width:min(560px,88vw);height:clamp(80px,15vw,120px);margin:.9rem auto 1rem}
/* aggregate glow wash: spills well beyond the word into the banner; opacity is
   driven by the reveal (script.js) so it flickers and goes dark with the dots */
.reveal-aglow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:200%;height:520%;max-width:96vw;pointer-events:none;opacity:0;
  background:radial-gradient(50% 50% at 50% 50%, rgba(246,242,208,.08), rgba(246,242,208,.025) 38%, transparent 68%)}
.reveal-wrap canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-galaxy-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero .cta-row{position:relative;z-index:2}
.cta-row{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:.8rem 1.6rem;border-radius:999px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:.98rem;transition:transform .15s,box-shadow .2s,background .2s;cursor:pointer;border:none}
.btn:hover{transform:translateY(-2px)}
.btn-glow{background:var(--glow);color:#211c33;box-shadow:0 0 22px rgba(246,242,208,.35)}
.btn-glow:hover{box-shadow:0 0 34px rgba(246,242,208,.55)}
.btn-line{color:var(--glow);border:1px solid rgba(246,242,208,.45);background:transparent}
.btn-line:hover{background:rgba(246,242,208,.08)}

/* sections */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(2.6rem,6vw,4rem) clamp(1.25rem,4vw,2rem);scroll-margin-top:5.5rem}
.eyebrow{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.section h2{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.2rem);margin-bottom:1.4rem;color:var(--glow-strong)}

/* effect feature */
.feature-lede{color:var(--muted);margin-bottom:0}
.feature-tagline{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.8rem;
  color:var(--glow);
  text-align:center;
  margin-top:1.8rem;
  margin-bottom:1.1rem;
}
.ct-num{
  font-family:var(--mono);
  color:var(--band-indigo);
  background:var(--glow);
  border-radius:6px;
  padding:.08em .5em;
  margin-right:.6rem;
  font-weight:700;
  font-size:.85em;
}

/* cryptatrope table: 2 cells on top, 1 wide below */
.ct-table{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.ct-cell{background:var(--panel);border:1px solid var(--panel-edge);border-radius:16px;padding:1.5rem;display:flex;flex-direction:column;color:var(--text)}
.ct-wide{grid-column:1 / -1}
.ct-head{margin-bottom:1.1rem}
.ct-title{font-family:var(--display);font-weight:700;font-size:1.18rem;color:var(--glow-strong)}
.ct-sub{display:block;color:var(--muted);font-size:.9rem;font-family:var(--mono);margin-top:.2rem}
.ct-cell p{margin-bottom:1rem}
.ct-cell .lite-yt{max-width:none;width:100%}
.ct-foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:.7rem;padding-top:1rem;text-align:center}
.ct-foot .note{font-size:.85rem;color:var(--muted);max-width:24rem}
.ct-wide-grid{display:flex;flex-direction:column;gap:1.6rem;align-items:stretch}
.ct-custom-video{width:100%;border-radius:12px;border:1px solid var(--panel-edge);display:block}
@media(max-width:760px){
  .ct-table{grid-template-columns:1fr}
  .ct-wide-grid{gap:1.3rem}
}
@media(prefers-reduced-motion:reduce){
  .ct-custom-video{pointer-events:none}
}

.acc-quote{border-left:3px solid var(--band-violet);padding:.3rem 0 .3rem 1rem;margin:.2rem 0 1.1rem;font-style:italic;color:var(--glow);font-size:1.02rem}
.acc-quote cite{display:block;margin-top:.4rem;font-style:normal;font-size:.82rem;color:var(--muted);font-family:var(--mono)}

/* lite youtube embed */
.lite-yt{position:relative;aspect-ratio:16/9;max-width:560px;margin:.2rem 0 1.1rem;border-radius:12px;overflow:hidden;cursor:pointer;background:#000}
.lite-yt img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .2s}
.lite-yt:hover img{opacity:1}
.lite-yt .play{position:absolute;inset:0;display:grid;place-items:center}
.lite-yt .play svg{width:62px;height:62px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.lite-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}


/* designs carousel */
.designs{}
.carousel-wrap{position:relative}
.carousel{display:flex;gap:1rem;overflow-x:auto;padding:.3rem .2rem 1.2rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--band-violet) transparent}
.carousel::-webkit-scrollbar{height:8px}
.carousel::-webkit-scrollbar-thumb{background:var(--band-violet);border-radius:99px}
.dcard{flex:0 0 auto;width:min(300px,72vw);background:var(--panel);border:1px solid var(--panel-edge);border-radius:14px;overflow:hidden;line-height:0}
.dcard img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#000}
.carousel-nav{display:flex;gap:.5rem;justify-content:flex-end;margin-bottom:.6rem}
.carousel-nav button{width:40px;height:40px;border-radius:50%;border:1px solid var(--panel-edge);background:var(--panel);color:var(--glow);cursor:pointer;display:grid;place-items:center;transition:border-color .2s,background .2s}
.carousel-nav button:hover{border-color:rgba(246,242,208,.4);background:var(--panel-2)}
.designs-cta{margin-top:1.2rem}

/* maker kits */
.kits{}
.kits-intro{color:var(--muted);max-width:46rem;margin-bottom:1.6rem}
.kits-intro a{color:var(--glow)}
.designs .kits-intro{margin-bottom:.5rem}
.kit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem}
.kit-card{display:flex;background:var(--panel);border:1px solid var(--panel-edge);border-radius:14px;overflow:hidden}
.kit-card img{width:140px;flex:0 0 140px;aspect-ratio:1/1;object-fit:cover;background:#000}
.kit-card .kit-body{padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.kit-card h3{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--glow-strong)}
.kit-card p{color:var(--muted);font-size:.9rem;flex:1}
.kit-card .btn{align-self:center;margin-top:.3rem;padding:.6rem 1.2rem;font-size:.9rem}
@media(max-width:760px){.kit-grid{grid-template-columns:1fr}}
@media(max-width:460px){.kit-card{flex-direction:column}.kit-card img{width:100%;flex:none}}

/* about */
.about{}
.about-copy p{margin-bottom:1rem;max-width:46rem;color:var(--muted)}
.about-copy p:last-child{margin-bottom:0}
.about-grid{display:grid;grid-template-columns:1fr 360px;gap:2.5rem;align-items:start}
.about-copy h2{margin:0 0 1.2rem}
.about-scene{width:100%;border-radius:16px;border:1px solid var(--panel-edge);display:block}
@media(max-width:760px){.about-grid{grid-template-columns:1fr;gap:1.5rem}.about-scene{max-width:420px}}

/* media */
.media-list{list-style:none}
.media-list li{display:grid;grid-template-columns:52px 110px 1fr;column-gap:1rem;align-items:start;padding:1.1rem 0;border-bottom:1px solid var(--panel-edge)}
.media-list li:first-child{border-top:1px solid var(--panel-edge)}
.media-logo{width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--panel)}
.media-date{font-family:var(--mono);font-size:.85rem;color:var(--muted);padding-top:.5rem}
.media-list a{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--glow-strong);text-decoration:none}
.media-list a:hover{text-decoration:underline}
.media-list p{color:var(--muted);font-size:.95rem}

/* contact */
.contact-copy{max-width:40rem;margin-bottom:1.4rem;color:var(--muted)}
.contact-grid{display:grid;grid-template-columns:auto 1fr;gap:1.8rem;align-items:center}
.contact-photo{width:120px;height:120px;border-radius:50%;object-fit:cover;flex-shrink:0}
@media(max-width:600px){.contact-grid{grid-template-columns:1fr;gap:1.2rem}.contact-photo{width:100px;height:100px}}

/* footer */
.site-footer{border-top:1px solid var(--panel-edge);background:linear-gradient(to bottom,var(--ink),#100f17);padding:2.4rem 1.25rem 2rem;text-align:center}
.footer-inner{max-width:var(--maxw);margin:0 auto}
.footer-line{color:var(--muted);font-size:.92rem}
.footer-copy{margin-top:.4rem;font-family:var(--mono);font-size:.78rem;color:rgba(170,167,185,.7)}

@media(max-width:860px){}
@media(max-width:560px){.site-header{flex-wrap:wrap;gap:.5rem}.media-list li{grid-template-columns:44px 1fr;column-gap:.8rem;row-gap:.4rem}.media-date{grid-column:2;grid-row:1;padding-top:.6rem}.media-list li>div{grid-column:1 / -1;grid-row:2}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn:hover,.dcard:hover{transform:none}}

/* custom cryptatrope: intro + tier accordion + how-it-works */
.ct-cell .custom-intro{color:var(--text);margin-top:-.2rem;margin-bottom:-.6rem}
.ct-cell .custom-intro em{font-style:italic;margin-right:.12em}
.tier-acc{display:flex;flex-direction:column;gap:.6rem}
.tier{background:var(--panel-2);border:1px solid var(--panel-edge);border-radius:12px;overflow:hidden}
.tier > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:.8rem;
  padding:.85rem 1.1rem;font-family:var(--display);font-weight:700;color:var(--glow-strong);
  transition:background .2s;
}
.tier > summary::-webkit-details-marker{display:none}
.tier > summary:hover{background:rgba(246,242,208,.05)}
.tier-head-main{flex:1;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.tier-name{font-size:1.02rem}
.tier-tag{font-family:var(--body);font-weight:400;font-size:.82rem;color:var(--muted);line-height:1.4}
.tier-price{font-family:var(--mono);font-weight:500;font-size:.95rem;color:var(--glow);white-space:nowrap}
.tier-chev{color:var(--muted);flex:0 0 auto;transition:transform .2s}
.tier[open-anim] > summary .tier-chev{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.tier[open] > summary .tier-chev{transform:rotate(180deg)}}
.tier-body{overflow:hidden;display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.tier[open-anim] .tier-body{grid-template-rows:1fr}
.tier-body > .tier-body-inner{min-height:0;padding:0 1.1rem;overflow:hidden}
.tier[open-anim] .tier-body > .tier-body-inner{padding-bottom:1.1rem}
/* reduced-motion / no-JS fallback: native [open] shows content instantly */
@media(prefers-reduced-motion:reduce){
  .tier[open] .tier-body{grid-template-rows:1fr;transition:none}
  .tier[open] .tier-body > .tier-body-inner{padding-bottom:1.1rem}
}
.tier-body p{color:var(--text);font-size:.97rem;margin-bottom:1rem}
.tier-point{color:var(--text);font-size:.95rem;line-height:1.5;margin:0 0 .9rem}
.tier-sub{display:inline-block;margin-top:.12rem;font-size:.84rem;color:var(--muted);line-height:1.45}
.tier-body-inner > .tier-point:last-child{margin-bottom:0}
.tier-point + .tier-sublist{margin-top:-.3rem;margin-bottom:.9rem}
.tier-sublist{list-style:none;margin:.55rem 0 0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.tier-sublist > li{position:relative;padding-left:1.1rem;color:var(--text);font-size:.95rem;line-height:1.5}
.tier-sublist > li::before{content:"";position:absolute;left:.1rem;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--glow)}
.tier-inscription{font-family:var(--mono);font-size:.82rem;line-height:1.6;color:var(--muted);background:var(--ink);border:1px solid var(--panel-edge);border-radius:8px;padding:.9rem 1rem;margin:0 auto 1rem;max-width:38rem;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.5rem 1.4rem}
.tier-inscription-item{white-space:nowrap}
.tier-buy{display:block;width:fit-content;margin-left:auto;margin-right:auto;padding:.6rem 1.3rem;font-size:.92rem}
.custom-howto{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--panel-edge)}
.custom-howto p{color:var(--muted);font-size:.9rem;margin-bottom:.8rem;text-align:center}
.custom-howto p:first-child{color:var(--text)}
.custom-howto p:last-child{margin-bottom:0}
@media(prefers-reduced-motion:reduce){.tier-chev{transition:none}}

/* ---- "Compare options" expander + comparison table ---- */
/* the control: slimmer and centered, gold label, set apart from the tier cards
   so it reads as an action rather than a fourth tier */
.tier-compare{background:transparent;border:none;border-radius:0;margin-top:.5rem}
.tier-compare > summary.cmp-summary{display:flex;align-items:center;justify-content:center;gap:.5rem;width:fit-content;margin:0 auto;padding:.6rem 1.3rem;cursor:pointer;list-style:none;border:1px solid rgba(246,242,208,.45);border-radius:999px;transition:background .2s,border-color .2s}
.tier-compare > summary.cmp-summary::-webkit-details-marker{display:none}
.tier-compare > summary.cmp-summary:hover{background:rgba(246,242,208,.06);border-color:var(--glow)}
.cmp-summary-label{font-family:var(--mono);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--glow)}
.tier-compare > summary.cmp-summary:hover .cmp-summary-label{color:var(--glow-strong)}
.tier-compare > summary.cmp-summary .tier-chev{color:var(--glow)}

.tier-compare .tier-body-inner{padding-left:0;padding-right:0}
.tier-compare[open-anim] .tier-body > .tier-body-inner{padding:0 0 1.1rem}
@media(prefers-reduced-motion:reduce){.tier-compare[open] .tier-body > .tier-body-inner{padding:0 0 1.1rem}}

.tier-compare .cmp-intro{color:var(--muted);font-size:.92rem;line-height:1.55;text-align:center;max-width:34rem;margin:.9rem auto .9rem}
.tier-compare .cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--panel-2);border:1px solid var(--panel-edge);border-radius:14px}
.tier-compare .cmp{width:100%;border-collapse:collapse;font-family:var(--body);font-size:.9rem;min-width:32rem;table-layout:fixed}
.tier-compare .cmp thead th{text-align:center;vertical-align:middle;padding:1rem .6rem;border-bottom:1px solid var(--panel-edge);width:22.6%}
.tier-compare .cmp thead th.cmp-feat-col{width:32.2%;text-align:left;padding-left:1.3rem}
.tier-compare .cmp-tier{display:block;font-family:var(--display);font-weight:700;font-size:1rem;color:var(--glow);line-height:1.2}
.tier-compare .cmp-c3 .cmp-tier{color:var(--glow-strong)}
.tier-compare .cmp-price{display:block;font-family:var(--mono);font-size:.8rem;color:var(--muted);margin-top:.25rem}
.tier-compare .cmp tbody td{padding:.7rem .6rem;vertical-align:middle;border-top:1px solid rgba(246,242,208,.06);color:var(--text);text-align:center}
.tier-compare .cmp tbody td.cmp-feat{color:var(--text);text-align:left;padding-left:1.3rem;font-weight:500}
.tier-compare .cmp tbody tr td:last-child,.tier-compare .cmp thead th:last-child{padding-right:1.3rem}
.tier-compare .cmp tbody td.cmp-sub{padding-left:3rem;color:#7a7788;font-size:.85rem;font-weight:400}
.tier-compare .cmp tbody tr.cmp-subrow td.cmp-feat{color:#7a7788}
.tier-compare .cmp-alt{display:inline-block;margin-top:.2rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:#8a8799;font-weight:400}
.tier-compare .cmp-ctr{text-align:center}
.tier-compare .cmp-yes{display:inline-block;font-size:.62rem;line-height:1;color:var(--glow);vertical-align:middle;text-shadow:0 0 6px rgba(246,242,208,.65),0 0 12px rgba(246,242,208,.35)}
.tier-compare .cmp-no{color:#8a8799;font-size:.9rem}
.tier-compare .cmp-c1{background:rgba(246,242,208,.025)}
.tier-compare .cmp-c2{background:rgba(246,242,208,.055)}
.tier-compare .cmp-c3{background:rgba(246,242,208,.1)}
.tier-compare .cmp-cell-sub{color:#8a8799;font-size:.8rem}
.tier-compare .cmp-group td{border-top:1px solid var(--panel-edge);padding-top:1.4rem}

/* legal page */
.legal{max-width:760px}
.notfound{max-width:560px;text-align:center;padding-top:clamp(3rem,10vw,6rem)}
.notfound h2{margin:0 0 1rem;font-size:clamp(1.6rem,4vw,2.2rem)}
.notfound-copy{color:var(--muted);margin:0 0 2rem;line-height:1.6}
.notfound-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.legal h1{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.2rem);margin-bottom:.4rem;color:var(--glow-strong)}
.legal h2{margin-bottom:.4rem}
.legal-updated{font-family:var(--mono);font-size:.82rem;color:var(--muted);margin-bottom:1.8rem}
.legal-intro{color:var(--text);margin-bottom:1.6rem}
.legal h3{font-family:var(--display);font-weight:700;font-size:1.12rem;color:var(--glow);margin:1.8rem 0 .6rem}
.legal p{color:var(--muted);margin-bottom:.9rem}
.legal a{color:var(--glow)}
.legal-back{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--panel-edge)}
.legal-addr-label{font-family:var(--display);font-weight:700;font-size:1.12rem;color:var(--glow);margin:1.8rem 0 .6rem}
.legal-addr{font-style:normal;color:var(--muted);line-height:1.6}

/* card 3 custom: image stays left (ct-wide-grid); how-it-works spans full width below */
#letters-pricing{scroll-margin-top:5.5rem}
#refunds{scroll-margin-top:5.5rem}
#privacy{scroll-margin-top:5.5rem}

.kits-affil{font-size:.82rem;color:var(--muted);margin-top:.6rem}

/* cryptatrope supply note + affiliate disclosure (below the 3-option table) */
.ct-supply{margin-top:1.6rem;color:var(--muted);font-size:.9rem;text-align:left}
.ct-supply a{color:var(--glow)}
/* =========================================================================
   CRYPTATROPE LETTERS CONFIGURATOR (modal + form)
   ========================================================================= */
.cfg-overlay{position:fixed;inset:0;z-index:100;background:rgba(10,9,14,.72);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding:clamp(.5rem,3vw,2.5rem);overflow-y:auto}
.cfg-overlay[hidden]{display:none}
.cfg-panel{background:var(--panel);border:1px solid var(--panel-edge);border-radius:18px;width:min(640px,100%);max-width:100%;margin:auto;box-shadow:0 24px 70px rgba(0,0,0,.55);display:flex;flex-direction:column;max-height:calc(100vh - 2rem);position:relative}
.cfg-panel-wide{width:min(860px,100%)}
.cfg-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.2rem;background:linear-gradient(to bottom,var(--panel),rgba(29,27,39,.96));border-bottom:1px solid var(--panel-edge);border-radius:18px 18px 0 0}
.cfg-eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0}
.cfg-close{display:inline-flex;align-items:center;gap:.4rem;background:var(--panel-2);border:1px solid var(--panel-edge);color:var(--text);border-radius:999px;padding:.45rem .85rem;font-family:var(--display);font-weight:700;font-size:.85rem;cursor:pointer;transition:border-color .2s,background .2s}
.cfg-close:hover{border-color:rgba(246,242,208,.4);background:rgba(246,242,208,.06);color:var(--glow)}
.cfg-scroll{padding:1.3rem clamp(1.1rem,3vw,1.8rem) 1.6rem;overflow-y:auto}
.cfg-title{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,3vw,1.6rem);color:var(--glow-strong);margin:0 0 .5rem}
.cfg-title-lead,.cfg-title-tier{white-space:nowrap}
.cfg-subtitle{margin:0}
/* phase label: gold mono caps marking a phase of the form (Design, Before
   checkout). Sits flush-left; peers across the two phases. The gap from a
   phase label to its following sentence is the sentence's top margin (.5rem),
   identical in both phases. */
.cfg-phase-label{display:block;font-family:var(--mono);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--glow)}
/* intro sentence under the Design label; its bottom margin (1.8rem) matches
   the inter-section gap and the Before-checkout intro's bottom margin, so
   every numbered section has the same space above it. */
.cfg-section{margin-bottom:1.8rem}
.cfg-h{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--glow);margin:0 0 .35rem}
/* numbered hung-heading sections: the "0N" marker plus gold heading hang
   flush-left in a left gutter while content indents to a shared edge. The
   section is padded left by the gutter width; the marker is pulled back into
   the gutter with a negative margin. The count continues across both phases. */
.cfg-section-hung{padding-left:2.1rem}
.cfg-section-num{font-family:var(--mono);font-weight:500;font-size:.82rem;letter-spacing:.04em;color:var(--glow);display:inline-block;width:2.1rem;margin-left:-2.1rem}
/* Before checkout phase block: full-width divider above marks the major break
   from the Design phase. The phase label and its two intro lines sit
   flush-left; the numbered subsections inside hang their headings. */
.cfg-delivery{border-top:1px solid rgba(246,242,208,.14);padding-top:1.5rem;margin-top:.5rem}
.cfg-phase-lede{color:var(--text);font-size:.95rem;line-height:1.55;margin:.5rem 0 .3rem}
/* contact line; its bottom margin (1.8rem) matches the Design intro's, so the
   first numbered section in each phase has equal space above it. */
.cfg-phase-sub{color:var(--muted);font-size:.85rem;line-height:1.5;margin:0 0 1.8rem}
.cfg-help{color:var(--muted);font-size:.88rem;line-height:1.5;margin:0 0 .9rem}
.cfg-help-2{margin:.2rem 0 .9rem}
.cfg-lines{display:flex;flex-direction:column;gap:.55rem}
.cfg-line{display:grid;grid-template-columns:18ch 122px;gap:.6rem;align-items:center}
.cfg-line-solo{grid-template-columns:18ch}
.cfg-line-head{margin-bottom:-.1rem}
.cfg-line-head-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--glow);text-align:left}
.cfg-input,.cfg-pos,.cfg-anim-sel,.cfg-anim-pos,.cfg-format-sel{font-family:var(--mono);font-size:.95rem;background:var(--ink);color:var(--text);border:1px solid var(--panel-edge);border-radius:8px;padding:.6rem .7rem;width:100%}
.cfg-input{letter-spacing:.02em;text-align:center}
.cfg-input:focus,.cfg-pos:focus,.cfg-anim-sel:focus,.cfg-anim-pos:focus,.cfg-format-sel:focus{outline:2px solid var(--glow);outline-offset:1px;border-color:transparent}
.cfg-pos,.cfg-anim-sel,.cfg-anim-pos,.cfg-format-sel{cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23aaa7b9' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .55rem center;padding-right:1.8rem}

/* stereo/mono toggle */
.cfg-toggle{display:inline-flex;border:1px solid var(--panel-edge);border-radius:999px;padding:.25rem;gap:.25rem;background:var(--ink);margin-bottom:.9rem}
.cfg-toggle-btn{font-family:var(--display);font-weight:700;font-size:.88rem;color:var(--muted);background:transparent;border:none;border-radius:999px;padding:.45rem 1.1rem;cursor:pointer;transition:background .2s,color .2s}
.cfg-toggle-btn.is-on{background:var(--glow);color:#211c33}
.cfg-toggle-btn:not(.is-on):hover{color:var(--glow)}

/* 2D/3D display line + parallax */
.cfg-display{font-size:.9rem;line-height:1.5;color:var(--text);margin:0 0 .4rem}
.cfg-display-tag{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;border-radius:5px;padding:.12rem .45rem;margin-right:.5rem;border:1px solid transparent}
.cfg-display-tag.is-3d{color:#211c33;background:var(--glow);border-color:var(--glow)}
.cfg-display-tag.is-2d{color:#ddd0ff;background:rgba(127,119,221,.28);border-color:rgba(127,119,221,.5)}

/* parallax switch */
.cfg-switch{display:inline-flex;align-items:center;gap:.65rem;background:transparent;border:none;padding:0;cursor:pointer;color:var(--text);font-size:.95rem}
.cfg-switch-track{position:relative;display:inline-block;width:42px;height:24px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid var(--panel-edge);flex:0 0 auto;transition:background .15s}
.cfg-switch-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--glow);transition:left .15s}
.cfg-switch.is-on .cfg-switch-track{background:var(--band-violet)}
.cfg-switch.is-on .cfg-switch-knob{left:22px}
.cfg-switch:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:6px}
.cfg-switch-label{font-family:inherit}
.cfg-parallax{margin:0 0 1.1rem}
.cfg-parallax .cfg-help-2{margin:.05rem 0 0 0}
.cfg-marquee-row{margin:0}

/* viewpoint grid (monoscopic) */
.cfg-vp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.cfg-vp-col{display:flex;flex-direction:column;gap:.5rem}
.cfg-vp-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--glow);margin:0 0 .15rem;text-align:left}
.cfg-vp-col .cfg-input{width:100%}

/* inscription */
.cfg-inscription-seg{margin-bottom:.35rem}
.cfg-inscription-fields{margin-top:.35rem}
.cfg-inscription-default{margin:.35rem auto 0;max-width:30rem}
.cfg-marquee .cfg-help-2{margin:.05rem 0 0 0}
/* inscription fields: two columns of 8, filling col 1 (lines 1-8) then col 2 (9-16) */
.cfg-inscription-grid{display:grid;grid-template-columns:repeat(2,max-content);grid-template-rows:repeat(8,auto);grid-auto-flow:column;column-gap:1.4rem;row-gap:.55rem}

/* animations */
.cfg-anim-slots{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1rem}
.cfg-anim-slot{display:grid;grid-template-columns:250px 170px;gap:.6rem;align-items:center}
.cfg-anim-head{margin-bottom:.1rem;align-items:end}
.cfg-anim-pos-wrap{min-width:0}
.cfg-fineprint{color:var(--muted);font-size:.82rem;line-height:1.5;font-style:italic;margin:.5rem 0 0}
.cfg-marquee .cfg-fineprint{margin-top:1.3rem}

/* bottom block */
.cfg-foot{margin-top:.5rem;padding-top:1.2rem;border-top:1px solid var(--panel-edge);display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}
.cfg-submit{padding:.75rem 1.7rem}
.cfg-submit:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.cfg-submit:disabled:hover{transform:none;box-shadow:none}
/* 3D printing section: standalone File Format select, width matched to the
   anim type select (250px), capped on small screens; caps labels sit just
   above their content. The External Supplies label gets top margin to
   separate it from the selector above, and the closing italic ask line gets
   extra space so it doesn't crowd the supplies text. */
.cfg-format-sel{width:250px;max-width:100%}
.cfg-pending-note{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--muted);margin:0;max-width:32rem}
.cfg-available-note{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--glow);margin:0}
.cfg-terms-link{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.cfg-terms-link:hover{color:var(--glow)}
.cfg-terms-line{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--muted);margin:0}

/* acknowledgment checkbox (Before checkout, section 06) */
.cfg-ack{display:flex;gap:.65rem;align-items:flex-start;cursor:pointer}
.cfg-ack-box{appearance:auto;-webkit-appearance:auto;width:1.1rem;height:1.1rem;margin:.12rem 0 0;flex:0 0 auto;accent-color:var(--glow);cursor:pointer}
.cfg-ack-text{color:var(--muted);font-size:.88rem;line-height:1.5}
/* required-section marker: gold asterisk on gated headings, defined by the
   legend under the Design intro */
.cfg-req-star{color:var(--glow)}
.cfg-req-note{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--muted);margin:0}

@media(max-width:760px){
  .cfg-vp-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:460px){
  .cfg-section-hung{padding-left:1.6rem}
  .cfg-section-num{width:1.6rem;margin-left:-1.6rem;font-size:.78rem}
  .cfg-line{grid-template-columns:1fr 104px;gap:.45rem}
  .cfg-line-solo,.cfg-lines-narrow .cfg-line-solo{grid-template-columns:1fr}
  .cfg-inscription-grid{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
  .cfg-anim-slot{grid-template-columns:1fr;gap:.4rem}
  .cfg-anim-head{display:none}
  .cfg-anim-pos-wrap{margin-left:1.25rem}
  .cfg-anim-pos-wrap .cfg-anim-pos{width:11rem;max-width:100%}
  .cfg-vp-grid{grid-template-columns:1fr}
}

/* ---- verification (Turnstile) block: appears at the end of the BEFORE
   CHECKOUT flow once the design and before-checkout conditions are met.
   Centered and set apart, as the final step before the button. ---- */
.cfg-verify{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin:1.8rem 0 .4rem}
.cfg-verify-label{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--glow);margin:0;text-align:center}
.cfg-verify-widget{min-height:65px;display:flex;justify-content:center}

/* ---- confirmation screen: replaces the form after a successful save ---- */
.cfg-confirm{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;padding:1.5rem 0}
.cfg-confirm-lede{font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--glow-strong);margin:0}
.cfg-confirm-row{display:flex;flex-direction:column;align-items:center;gap:.25rem}
.cfg-confirm-key{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--glow)}
.cfg-confirm-val{font-family:var(--mono);color:var(--text)}
.cfg-confirm-ref{font-size:1.3rem;letter-spacing:.08em;color:var(--glow-strong)}
.cfg-confirm-uuid{font-size:.82rem;letter-spacing:.02em;color:var(--muted);word-break:break-all;max-width:24rem}
.cfg-confirm-note{font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;color:var(--muted);line-height:1.5;margin:0;max-width:30rem}
.cfg-confirm-done{margin-top:.4rem;padding:.7rem 1.7rem}