/* Hallmark v2.0.0 · deal: manual · theme: LIMITLESS+ app (tokens read from app.abundancealchemist.com, 9 Nov 2026) · genre: product, light · signature: the year ring, four gold arcs that draw as you scroll, the app's Path made visible */
/* brand over floor: the app's own signature is one Newsreader italic word in gold inside a Host Grotesk heading ("Begin where the body is."), so it is kept here deliberately, one per heading at most; tracked gold micro-labels are the app's own pattern too */
:root{
--canvas:#f5f5f3;--glow-1:#d6dde7;--glow-2:#eee5d6;--cream-warm:#ecedea;--paper:#fff;--champagne:#f3f4f6;
--forest:#1a1d22;--sage:#1f242b;--sage-mid:#343a44;--muted:#4a505a;--quiet:#8a8f98;
--gold:#b39a70;--gold-soft:#cdba97;--gold-ink:#6a5532;--gold-dim:hsla(38,31%,57%,.38);
--p1:#e7dcc6;--p2:#c2a877;--p3:#8a744d;
--glass:hsla(0,0%,100%,.38);--glass-solid:hsla(0,0%,100%,.92);--glass-edge:hsla(0,0%,100%,.7);--glass-hi:hsla(0,0%,100%,.95);
--line:rgba(26,29,34,.12);--shadow:0 12px 32px rgba(26,29,34,.07);--shadow-lg:0 30px 80px rgba(26,29,34,.12);
--on-feature:#f3f4f6;--on-feature-muted:#c3c8d0;--dark-glass:rgba(255,255,255,.06);--dark-edge:rgba(243,244,246,.14);
--display:"Host Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--serif:"Newsreader",Georgia,serif;
--r-card:24px;--r-hero:28px;--r-pill:999px;--ease:cubic-bezier(.16,1,.3,1)}
html,body{margin:0;background:var(--canvas);overflow-x:clip}
::selection{background:var(--gold-dim);color:var(--forest)}
a{color:var(--forest);text-underline-offset:3px}a:hover{color:var(--gold-ink)}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-0.035em;margin:0;text-wrap:balance;min-width:0}
h2{font-size:52px;line-height:1.04}
.it{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--gold);letter-spacing:-0.01em}
p{text-wrap:pretty}
.label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.wrap{max-width:1180px;margin:0 auto;padding-left:40px;padding-right:40px;box-sizing:border-box}
.glass{background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--shadow),inset 0 1px 0 var(--glass-hi);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4)}
.solid{background:var(--glass-solid);border:1px solid var(--glass-edge);box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:var(--r-pill);background:var(--forest);color:var(--paper);text-decoration:none;font-weight:500;font-size:16px;letter-spacing:-0.01em;box-shadow:0 10px 24px rgba(26,29,34,.18);transition:background-color .16s var(--ease),transform .16s var(--ease)}
.btn:hover{background:var(--sage-mid);color:var(--paper)}
.btn:active,.btn-ghost:active,.btn-light:active{transform:scale(.97)}
.btn-ghost{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--r-pill);text-decoration:none;font-weight:500;font-size:15px;transition:transform .16s var(--ease)}
.btn-light{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 28px;border-radius:var(--r-pill);background:var(--on-feature);color:var(--forest);text-decoration:none;font-weight:500;font-size:16px;transition:transform .16s var(--ease)}
.btn-light:hover{color:var(--forest)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;border-radius:var(--r-pill);background:var(--glass-solid);border:1px solid var(--line);font-size:14px;color:var(--sage)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold);display:inline-block}
.shot{display:block;width:100%;border-radius:18px}
details{border-top:1px solid var(--line);padding:20px 0}
summary{cursor:pointer;font-weight:500;font-size:18px;list-style:none;letter-spacing:-0.01em}
summary::-webkit-details-marker{display:none}

/* atmosphere: the app's two glows and grain */
.page{position:relative;font-family:var(--display);color:var(--forest);background:var(--canvas);width:100%;min-height:100%}
.page::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(900px 700px at 8% 2%,var(--glow-1),transparent 70%),radial-gradient(900px 700px at 96% 10%,var(--glow-2),transparent 70%)}
.page::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background-image:url(/assets/img/grain.webp);opacity:.5;mix-blend-mode:multiply}
.page>*{position:relative;z-index:1}

/* hero composition */
.stagebox{position:relative;height:640px;max-width:980px;margin:0 auto}
.phone{position:absolute;left:calc(50% - 150px);top:0;width:300px;border-radius:48px;padding:10px;background:var(--forest);box-shadow:var(--shadow-lg)}
.phone img{display:block;width:100%;border-radius:38px}
.float{position:absolute;border-radius:var(--r-card);padding:18px 20px}
.f1{left:0;top:96px;width:300px}
.f2{right:0;top:40px;width:290px}
.f3{right:40px;top:380px;width:280px}
.f4{left:40px;top:400px;width:260px}
.seg{height:8px;border-radius:99px}

/* the year ring */
.ringbox{position:relative;width:440px;height:440px;margin:0 auto}
.ringbox svg{width:100%;height:100%;display:block;transform:rotate(-90deg)}
.arc{fill:none;stroke-width:18;stroke-linecap:round}
@media (max-width:900px){
.bgpanel{padding:56px 22px !important}.ringpin{position:static !important}}
.ring-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.b{border-radius:var(--r-card);padding:28px;overflow:hidden;position:relative}

.track{display:flex;gap:16px;width:max-content}
.strip{overflow-x:auto}

@media (prefers-reduced-motion:no-preference){
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.r1{animation:rise .7s var(--ease) both}.r2{animation:rise .7s .1s var(--ease) both}.r3{animation:rise .7s .2s var(--ease) both}.r4{animation:rise .9s .3s var(--ease) both}
.f1{animation:floaty 7s ease-in-out infinite}.f2{animation:floaty 8s 1s ease-in-out infinite}.f3{animation:floaty 9s .5s ease-in-out infinite}.f4{animation:floaty 7.5s 1.5s ease-in-out infinite}
.strip{overflow:hidden}.track{animation:drift 80s linear infinite}.strip:hover .track{animation-play-state:paused}
}
@media (max-width:900px){
.wrap{padding-left:20px;padding-right:20px}
h2{font-size:34px}
.h1{font-size:46px !important}
.split{flex-direction:column !important}
.grid2,.grid3,.grid4{grid-template-columns:minmax(0,1fr) !important}
.bento{grid-template-columns:minmax(0,1fr)}
.bento .b{grid-column:auto !important}
.stagebox{height:560px}
.phone{width:240px;left:calc(50% - 120px)}
.f1,.f4{display:none}
.f2{right:-6px;top:300px;width:230px}
.f3{display:none}
.ringbox{width:300px;height:300px}
.track img{width:300px !important}
.hide-s{display:none !important}
.split>*{flex-basis:auto !important;width:100%;box-sizing:border-box}
.f1,.f3,.f4{display:none !important}
header .btn{padding:0 16px !important;font-size:14px !important}
h2{font-size:34px !important}
.h1{font-size:44px !important}
.statement,#statement{font-size:34px !important}
.bento .b{padding:22px}
.mhero .facts3 div{padding:14px 20px}
}

/* ---- build additions (not on the board) ---- */
/* phone first screen at 390 x 660: eyebrow, headline, subhead, source line and the first button */
@media (max-width:640px){
header.wrap{padding-top:10px !important;padding-bottom:4px !important}
header.wrap>div{padding:6px 6px 6px 18px !important}
header.wrap>div>div:first-child{font-size:12px;letter-spacing:.12em;line-height:1.25}
header .btn{white-space:nowrap}
.hero{padding-top:14px !important}
.hero .label{font-size:11px;line-height:1.5}
.hero .h1{font-size:32px !important;line-height:1.05 !important;margin-top:10px !important}
.hero p.r2{font-size:16px !important;line-height:1.5 !important;margin-top:12px !important}
.hero p.r2+p.r2{font-size:12px !important;margin-top:6px !important}
.hero .hero-cta{margin-top:16px !important;gap:10px !important}
.hero .hero-cta .btn{width:100%}
.hero .hero-cta span{max-width:none !important;font-size:13px !important}
}
/* sticky price bar: hidden while the hero button is on screen (JS adds .is-hidden) */
.pricebar{transition:opacity .2s var(--ease),transform .2s var(--ease)}
.pricebar.is-hidden{opacity:0;transform:translateY(16px);pointer-events:none}
.pricebar .btn{white-space:nowrap}
[data-placeholder]{outline:1px dashed rgba(179,154,112,.7);outline-offset:2px}