/* PathLife Studio — shared brand system.
   Night-navy sky, electric blue glow, gold path: taken from the PathLife app icon. Single dark look. */
:root{
  --night:#04091A; --night-2:#0A1835; --panel:#0E1E40; --panel-2:#13274F;
  --line:rgba(120,160,255,.16); --line-2:rgba(120,160,255,.28);
  --blue:#1A5FD4; --blue-bright:#4A9FFF; --sky:#B8D4FF;
  --gold:#F5C53A; --gold-bright:#FFE680; --gold-dark:#C4900A; --gold-ink:#1A1000;
  --white:#F0F6FF; --dim:rgba(240,246,255,.68); --faint:rgba(240,246,255,.42);
  --display:"Cinzel", "Trajan Pro", Georgia, serif;
  --body:"Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --gold-grad:linear-gradient(135deg,var(--gold-dark),var(--gold) 55%,var(--gold-bright));
  --wrap:1160px; --r:18px;
  color-scheme:dark;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--night)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}
body{background:var(--night);color:var(--white);font:400 17px/1.6 var(--body);margin:0;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
h1,h2,h3{margin:0;text-wrap:balance}
h1,h2{font-family:var(--display);font-weight:800;line-height:1.08;letter-spacing:.01em}
h2{font-size:clamp(30px,4.2vw,48px)}
h3{font:600 20px/1.25 var(--body)}
p{margin:0}
.gold-text{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.blue-text{background:linear-gradient(180deg,var(--white),var(--blue-bright));-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font:500 12px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.lede{font-size:19px;color:var(--dim);max-width:58ch}
section{padding-block:clamp(64px,9vw,112px);position:relative}
.sec-head{display:grid;gap:16px;margin-bottom:48px;max-width:720px}
.icon-tile{border-radius:23%;overflow:hidden;display:block;flex:none;background:var(--night-2)}
.icon-tile img{display:block;width:100%;height:100%;transform:scale(1.04)}

/* starfield */
.sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.sky::before{content:"";position:absolute;inset:-20% -10% auto;height:120%;background:radial-gradient(60% 55% at 70% 30%,rgba(26,95,212,.42),transparent 70%),radial-gradient(40% 40% at 15% 80%,rgba(245,197,58,.08),transparent 70%)}
.sky::after{content:"";position:absolute;inset:0;background-image:radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.7),transparent 60%),radial-gradient(1px 1px at 28% 62%,rgba(255,255,255,.5),transparent 60%),radial-gradient(1.5px 1.5px at 44% 12%,rgba(255,255,255,.8),transparent 60%),radial-gradient(1px 1px at 58% 74%,rgba(255,255,255,.45),transparent 60%),radial-gradient(1px 1px at 82% 22%,rgba(255,255,255,.7),transparent 60%),radial-gradient(1.5px 1.5px at 92% 66%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1px 1px at 6% 88%,rgba(255,255,255,.5),transparent 60%),radial-gradient(1px 1px at 68% 44%,rgba(255,255,255,.4),transparent 60%),radial-gradient(1px 1px at 36% 36%,rgba(255,255,255,.35),transparent 60%);animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.55}}
.hero{overflow:hidden}
.hero > .wrap{position:relative;z-index:1}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(4,9,26,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:70px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .wordmark{height:38px;width:auto;display:block}
.foot-grid .brand .wordmark{height:44px}
.brand-name{display:grid;gap:3px}
.brand-name b{font:800 18px/1 var(--display);letter-spacing:.04em}
.brand-name small{font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.nav .links{display:flex;gap:28px;margin-left:auto}
.nav .links a{text-decoration:none;font-weight:500;font-size:15px;color:var(--dim);padding-block:6px;border-bottom:2px solid transparent}
.nav .links a:hover{color:var(--white)}
.nav .links a[aria-current="page"]{color:var(--white);border-bottom-color:var(--gold)}
.nav .btn{padding:10px 18px;font-size:14px}
@media (max-width:860px){.nav .links{display:none}.nav .btn{margin-left:auto}}

/* breadcrumb */
.crumbs{border-bottom:1px solid var(--line);background:rgba(10,24,53,.5)}
.crumbs ol{list-style:none;margin:0;padding-block:12px;display:flex;flex-wrap:wrap;gap:8px;font:500 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--faint)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line-2)}
.crumbs a{text-decoration:none;color:var(--dim)}
.crumbs a:hover{color:var(--gold)}
.crumbs [aria-current]{color:var(--white)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:600 15px/1 var(--body);padding:14px 22px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,border-color .2s}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:var(--gold-grad);color:var(--gold-ink);box-shadow:0 8px 24px -10px rgba(245,197,58,.6)}
.btn-gold:hover{box-shadow:0 10px 30px -8px rgba(245,197,58,.75)}
.btn-ghost{border-color:var(--line-2);color:var(--white);background:rgba(255,255,255,.04)}
.btn-ghost:hover{border-color:var(--blue-bright)}
.btn svg{width:18px;height:18px;flex:none}
.store{padding:11px 22px 11px 18px}
.store svg{width:22px;height:22px;fill:currentColor}
.store span{display:grid;gap:3px;text-align:left}
.store em{font:500 10px/1 var(--body);font-style:normal;opacity:.75;letter-spacing:.04em}
.store b{font:700 17px/1 var(--body)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.stars{color:var(--gold);letter-spacing:2px}

/* status pills */
.pill{display:inline-flex;align-items:center;gap:7px;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;border-radius:999px;border:1px solid}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.live{color:#7BE0A8;border-color:rgba(123,224,168,.35);background:rgba(123,224,168,.08)}
.pill.dev{color:var(--gold);border-color:rgba(245,197,58,.4);background:rgba(245,197,58,.08)}
.pill.dev::before{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}

/* faq */
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font:600 18px/1.35 var(--body)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:500 22px/1 var(--mono);color:var(--gold);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--dim);padding-bottom:22px;max-width:62ch}
details a{color:var(--blue-bright)}

/* contact card */
.help-card{position:relative;overflow:hidden;background:radial-gradient(80% 120% at 100% 100%,rgba(26,95,212,.55),transparent 60%),linear-gradient(135deg,var(--panel-2),var(--night-2));border:1px solid var(--line-2);border-radius:26px;padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px;align-items:center}
.help-card h2{font-size:clamp(28px,3.8vw,42px)}
.help-card p{color:var(--dim);margin-top:14px;max-width:50ch}
.help-actions{display:grid;gap:12px;justify-items:start;min-width:0}
.email{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:500 15px/1 var(--mono);max-width:100%}
.email code{background:rgba(4,9,26,.55);border:1px solid var(--line);padding:10px 12px;border-radius:10px;user-select:all;overflow-wrap:anywhere;font:inherit}
.copy{font:600 13px/1 var(--body);background:transparent;color:var(--white);border:1.5px solid var(--line-2);border-radius:999px;padding:9px 14px;cursor:pointer}
.copy:hover{border-color:var(--gold)}
.help-card small{font:500 12px/1.4 var(--mono);color:var(--faint)}
@media (max-width:760px){.help-card{grid-template-columns:1fr}}

/* footer */
footer{border-top:1px solid var(--line);padding-block:56px 36px;background:linear-gradient(180deg,var(--night),#030714)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px}
.foot-grid p{color:var(--dim);font-size:15px;max-width:34ch;margin-top:16px}
.foot-grid h4{margin:0 0 14px;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot-grid a{text-decoration:none;color:var(--dim);font-size:15px}
.foot-grid a:hover{color:var(--white)}
.foot-base{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font:500 12px/1.5 var(--mono);color:var(--faint)}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid > div:first-child{grid-column:1/-1}}