/* journeyfolio.app marketing chrome (homepage + /concept/). App screens live in ui.css. */
:root{--c-bg:#f4efe6;--c-surface:#fffdf8;--c-text:#10201f;--c-muted:#55625f;--c-border:#e2d9c8;--c-accent:#0e6b62;--c-on-accent:#fff;--c-deep:#0d2423;--c-on-deep:#f4efe6;--c-gold:#e9a23b}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--c-bg:#0c1514;--c-surface:#14201e;--c-text:#eef1ec;--c-muted:#a3b2ad;--c-border:#24332f;--c-accent:#5cc2b2;--c-on-accent:#0b1f1d;--c-deep:#071010;--c-on-deep:#eef1ec}}
:root[data-theme="dark"]{--c-bg:#0c1514;--c-surface:#14201e;--c-text:#eef1ec;--c-muted:#a3b2ad;--c-border:#24332f;--c-accent:#5cc2b2;--c-on-accent:#0b1f1d;--c-deep:#071010;--c-on-deep:#eef1ec}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-bg);color:var(--c-text);font:400 var(--t3)/1.6 var(--f-ui);overflow-x:hidden}
a{color:var(--c-accent)}
.w{max-width:1280px;margin:0 auto;padding:0 var(--s6)}
.site-h{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--c-bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--c-border)}
.site-h .w{height:64px}
.logo{display:inline-flex;align-items:center;gap:var(--s2);font:600 var(--t4) var(--f-display);color:var(--c-text);text-decoration:none;letter-spacing:-.01em}
.lm{width:32px;height:32px;border-radius:8px;display:block}
.pill{display:inline-flex;align-items:center;height:40px;padding:0 var(--s4);border-radius:999px;background:var(--c-accent);color:var(--c-on-accent);font:600 var(--t2) var(--f-ui);text-decoration:none;white-space:nowrap}
.pill.big{height:56px;padding:0 var(--s8);font-size:var(--t3)}
.pill.ghost{background:transparent;color:var(--c-text);border:1px solid var(--c-border)}
.kicker{font:600 var(--t1)/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--c-accent);margin:0 0 var(--s4)}
h1,h2,h3{font-family:var(--f-display);font-weight:500;letter-spacing:-.02em;line-height:1.08;margin:0}
.intro{padding:var(--s16) var(--s6) var(--s8);max-width:880px;margin:0 auto}
.intro h1{font-size:var(--t8)}
.lede{font-size:var(--t4);line-height:1.5;color:var(--c-muted);margin:var(--s6) 0 0;max-width:720px}
.sec-h{padding:var(--s16) 0 var(--s8)}
.sec-h h2{font-size:var(--t7);max-width:720px}
.gallery{display:flex;flex-wrap:wrap;gap:var(--s12) var(--s6);justify-content:center}
.gallery figure{margin:0;width:390px;display:flex;flex-direction:column;gap:var(--s4)}
.gallery figcaption{font-size:var(--t2);color:var(--c-muted);padding:0 var(--s2)}
.gallery figcaption b{color:var(--c-text)}
.cta-band{margin-top:var(--s24);margin-bottom:var(--s16);text-align:center;background:var(--c-deep);color:var(--c-on-deep);border-radius:var(--r3);padding:var(--s16) var(--s6)}
.cta-band h2{font-size:var(--t7)}
.cta-band p{color:color-mix(in srgb,var(--c-on-deep) 75%,transparent);font-size:var(--t4);margin:var(--s4) auto var(--s8);max-width:560px}
.site-f{border-top:1px solid var(--c-border);padding:var(--s8) 0;color:var(--c-muted);font-size:var(--t2)}
@media (max-width:440px){
 .w{padding:0 var(--s4)}
 .intro{padding:var(--s12) var(--s4) var(--s6)}
 .intro h1{font-size:var(--t7)}
 .sec-h{padding:var(--s12) 0 var(--s6)}
 .sec-h h2,.cta-band h2{font-size:var(--t6)}
 .gallery figure{width:100%;align-items:center}
 .gallery .device{zoom:.88}
 .pill.big{height:48px;padding:0 var(--s6)}
}