/* =====================================================================
   LAUNCH SWITCHES  (one line per app)
   ---------------------------------------------------------------------
   While an app is in App Review the site shows "Coming soon to the
   App Store". When the app goes live, UNCOMMENT its line below and
   redeploy. That hides the "coming soon" label and shows the official
   "Download on the App Store" badge everywhere for that app.
   ===================================================================== */

/* [data-app="wealth-check"] .store-soon{display:none} [data-app="wealth-check"] .store-live{display:inline-block} */


/* =====================================================================
   Studio theme (neutral, so every app fits)
   ===================================================================== */
:root{--accent-studio:#f2542d;
  color-scheme:light dark;
  --bg:#fbfbfa; --surface:#ffffff; --surface-2:#f3f3f1; --text:#17171a; --muted:#5c5c66;
  --border:#e4e4e0; --accent:#17171a; --accent-ink:#ffffff; --tint:#f3f3f1;
  --radius:20px; --max:1120px;
  --shadow:0 1px 2px rgb(0 0 0/.04),0 8px 24px rgb(0 0 0/.06);
  --font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0e0e10; --surface:#16161a; --surface-2:#1d1d22; --text:#ededf0; --muted:#a3a3ad;
    --border:#2a2a30; --accent:#ededf0; --accent-ink:#0e0e10; --tint:#16161a;
    --shadow:0 1px 2px rgb(0 0 0/.4),0 8px 24px rgb(0 0 0/.35);
  }
}

/* Per-app themes: set on <body data-app="..."> or on any element (e.g. a card) */
[data-app="wealth-check"]{
  --accent:#0f5a3c; --accent-ink:#ffffff; --tint:#e9f3ed; --app-bg:#f6faf7; --app-text:#1c2a24; --app-muted:#5b6b63;
}
@media (prefers-color-scheme:dark){
  [data-app="wealth-check"]{
    --accent:#4fc596; --accent-ink:#0d1612; --tint:#13241c; --app-bg:#0d1612; --app-text:#e8f1ec; --app-muted:#9fb2a8;
  }
}
/* On an app's own page, the whole page takes the app colours */
body[data-app]{--bg:var(--app-bg);--text:var(--app-text);--muted:var(--app-muted)}
@media (prefers-color-scheme:dark){ body[data-app]{--surface:#13201a;--surface-2:#182a21;--border:#22382d} }
@media (prefers-color-scheme:light){ body[data-app]{--surface:#ffffff;--surface-2:#eef5f0;--border:#dbe7df} }

/* =====================================================================
   Base
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 var(--font);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,5.2vw,3.6rem);letter-spacing:-.035em}
h2{font-size:clamp(1.6rem,3.2vw,2.25rem);letter-spacing:-.03em}
h3{font-size:1.1rem}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.lead{font-size:clamp(1.1rem,1.8vw,1.3rem);color:var(--muted);max-width:40ch}
.skip{position:absolute;left:-9999px;top:8px;background:var(--surface);color:var(--text);padding:8px 14px;border-radius:8px;z-index:10}
.skip:focus{left:8px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header / footer */
.site-header{border-bottom:1px solid var(--border)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand{display:inline-flex;align-items:center;text-decoration:none;border-radius:8px}
.brand-lockup{display:block;height:30px;width:auto}
/* Studio logo colours stay the same on every page (not tied to app themes) */
.brand,.site-footer{--logo-ink:#17171a;--logo-glyph:#ffffff}
@media (prefers-color-scheme:dark){.brand,.site-footer{--logo-ink:#ededf0;--logo-glyph:#17171a}}
.lk-i{fill:var(--logo-ink)} .lk-g{fill:var(--logo-glyph)} .lk-d{fill:var(--accent-studio)}
.foot-brand{display:inline-flex;align-items:center;gap:10px;margin:0}
.foot-mark{width:20px;height:20px;flex:none}
/* Studio accent (pixel orange): decorative/large only, never small text */
.accent-dot{color:var(--accent-studio)}
.studio-eyebrow::before{content:"";display:inline-block;width:.5em;height:.5em;border-radius:50%;background:var(--accent-studio);margin-right:.6em;vertical-align:.08em}
.site-nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.site-nav a{display:block;padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--muted);font-size:.95rem;font-weight:500}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--text);background:var(--surface-2)}
.site-footer{border-top:1px solid var(--border);margin-top:96px;padding:32px 0 48px;color:var(--muted);font-size:.92rem}
.site-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px}
.site-footer ul{display:flex;flex-wrap:wrap;gap:6px 20px;list-style:none;margin:0;padding:0}
.site-footer a{color:var(--muted)} .site-footer a:hover{color:var(--text)}

section{padding:72px 0 0}
.section-head{margin-bottom:28px;max-width:60ch}
.section-head p{color:var(--muted);font-size:1.08rem}

/* Buttons and store states */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;font-weight:600;text-decoration:none;border:1px solid var(--border);background:var(--surface);color:var(--text)}
.btn:hover{border-color:var(--muted)}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.btn-primary:hover{filter:brightness(1.08)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.store-live{display:none}
.store-live img{height:48px;width:auto}
.store-soon{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;font-weight:600;font-size:.95rem;
  background:var(--tint);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.store-soon::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.8}
.small .store-soon{padding:7px 14px;font-size:.85rem}
.small .store-live img{height:40px}

/* =====================================================================
   Home
   ===================================================================== */
.hero{padding-top:96px;padding-bottom:24px}
.hero h1{max-width:20ch}
.apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:24px}
.apps-grid.has-featured{grid-template-columns:1fr}
@media (min-width:900px){.apps-grid.has-featured{grid-template-columns:2fr 1fr}}
.app-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.app-card .shot{background:var(--tint);border-bottom:1px solid var(--border);aspect-ratio:1600/686;overflow:hidden}
.app-card .shot img{width:100%;height:100%;object-fit:cover}
.app-card .body{padding:24px;display:flex;flex-direction:column;gap:14px;flex:1}
.app-id{display:flex;align-items:center;gap:16px}
.app-id img{width:64px;height:64px;border-radius:22.5%;box-shadow:0 2px 8px rgb(0 0 0/.15)}
.app-id h3{margin:0;font-size:1.35rem}
.app-id p{margin:0;color:var(--muted);font-size:.95rem}
.app-card .tagline{font-size:1.08rem;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.chips li{font-size:.82rem;padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.app-card .foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:6px}
.app-card .more{font-weight:600;color:var(--accent);text-decoration:none}
.app-card .more:hover{text-decoration:underline}
.app-card .more::after{content:"";position:absolute;inset:0}  /* whole card clickable */
.app-card .store-live,.app-card .store-soon{position:relative;z-index:1}
.placeholder{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:32px;border:1.5px dashed color-mix(in srgb,var(--muted) 45%,transparent);border-radius:var(--radius);color:var(--muted);min-height:220px}
.placeholder h3{color:var(--text);margin:0}
.placeholder p{margin:0}
.about{display:grid;gap:32px}
@media (min-width:860px){.about{grid-template-columns:1fr 1fr;align-items:start}}
.principles{display:grid;gap:14px;list-style:none;padding:0;margin:0}
.principles li{padding:18px 20px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.principles strong{display:block;margin-bottom:2px}
.principles span{color:var(--muted);font-size:.97rem}
.contact-card{padding:36px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border)}
.contact-card a.email{font-size:clamp(1.3rem,3vw,1.8rem);font-weight:650;letter-spacing:-.02em}

/* =====================================================================
   App page
   ===================================================================== */
.app-hero{padding:64px 0 16px;overflow:hidden}
.app-hero .wrap{display:grid;gap:48px;align-items:center}
@media (min-width:900px){.app-hero .wrap{grid-template-columns:1.05fr .95fr}}
.app-hero .icon{width:96px;height:96px;border-radius:22.5%;box-shadow:0 6px 20px rgb(0 0 0/.18);margin-bottom:22px}
.app-hero .subtitle{font-size:1.05rem;font-weight:600;color:var(--accent);margin:-.25em 0 .75em}
.app-hero .lead{color:var(--text);opacity:.85;margin-bottom:28px}
.app-hero .note{margin-top:16px;font-size:.93rem;color:var(--muted)}
.phones{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:0;min-height:420px}
.phone{border-radius:44px;padding:9px;background:#0b0b0c;box-shadow:0 30px 60px -20px rgb(0 0 0/.35),0 0 0 1px rgb(255 255 255/.06) inset;width:min(44vw,270px)}
.phone img{border-radius:35px;width:100%}
.phones .phone:nth-child(2){margin-left:-56px;transform:translateY(-36px);width:min(40vw,250px);position:relative;z-index:-1}
.phones .phone:first-child{z-index:1}
.phones{isolation:isolate}

.pillars{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.pillar{padding:26px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border)}
.pillar h3{color:var(--accent)}
.pillar p{margin:0;color:var(--muted)}
.features{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));list-style:none;padding:0;margin:0}
.features li{display:flex;gap:14px;padding:20px;border-radius:16px;background:var(--surface);border:1px solid var(--border)}
@media (min-width:700px){.features li{flex-direction:column;gap:12px}}
.features svg{flex:none;width:28px;height:28px;color:var(--accent);margin-top:2px}
.features h3{margin:0 0 4px;font-size:1.02rem}
.features p{margin:0;color:var(--muted);font-size:.96rem}

.gallery{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 24px 24px;margin:0;list-style:none;
  scroll-padding:0 24px;-webkit-overflow-scrolling:touch}
@media (min-width:1168px){.gallery{padding-left:calc((100vw - var(--max))/2 + 24px);scroll-padding-left:calc((100vw - var(--max))/2 + 24px)}}
.gallery li{flex:none;width:clamp(200px,24vw,250px);scroll-snap-align:start}
.gallery figure{margin:0}
.gallery .phone{width:100%;padding:7px;border-radius:36px}
.gallery .phone img{border-radius:29px}
.gallery figcaption{margin-top:12px;font-size:.92rem;color:var(--muted);text-align:center}
.gallery-hint{font-size:.88rem;color:var(--muted);margin-top:-12px}
.ipad{display:grid;gap:36px;align-items:center;margin-top:56px}
@media (min-width:860px){.ipad{grid-template-columns:1fr 1.2fr}}
.tablet{border-radius:30px;padding:12px;background:#0b0b0c;box-shadow:0 30px 60px -24px rgb(0 0 0/.35);max-width:520px;justify-self:center}
.tablet img{border-radius:20px}

.pricing{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));max-width:820px}
.plan{padding:28px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border)}
.plan.featured{border:2px solid var(--accent)}
.plan .price{font-size:2.2rem;font-weight:750;letter-spacing:-.03em;margin:4px 0 2px}
.plan .per{color:var(--muted);font-size:.92rem;margin-bottom:18px}
.plan ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.plan li{padding-left:28px;position:relative}
.plan li::before{content:"";position:absolute;left:2px;top:.45em;width:14px;height:8px;border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(-45deg)}
.fineprint{font-size:.88rem;color:var(--muted);margin-top:18px;max-width:70ch}

.privacy-band{padding:40px;border-radius:var(--radius);background:var(--tint);border:1px solid var(--border);display:grid;gap:24px}
@media (min-width:860px){.privacy-band{grid-template-columns:1.1fr 1fr;align-items:center}}
.privacy-band h2{color:var(--accent)}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-weight:600}
.checks li{display:flex;gap:10px;align-items:center}
.checks li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
@media (prefers-color-scheme:dark){.checks li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230d1612' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}}
.links-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.link-card{display:block;padding:22px;border-radius:16px;background:var(--surface);border:1px solid var(--border);text-decoration:none}
.link-card:hover{border-color:var(--accent)}
.link-card strong{display:block;color:var(--accent);margin-bottom:2px}
.link-card span{color:var(--muted);font-size:.95rem}
.cta-band{text-align:center;padding:56px 24px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border)}
.cta-band img{width:72px;height:72px;border-radius:22.5%;margin:0 auto 18px}
.cta-band .actions{justify-content:center;margin-top:20px}

/* 404 */
.notfound{padding-top:120px;padding-bottom:40px;text-align:center}
.notfound .actions{justify-content:center}

@media (max-width:600px){
  body{font-size:16px}
  .site-nav ul{gap:0}
  .site-nav a{padding:8px 8px;font-size:.9rem}
  .placeholder{min-height:0;padding:24px}
  .hero{padding-top:56px}
  section{padding-top:56px}
  .phones{min-height:0}
  .phone{width:min(52vw,230px)}
  .phones .phone:nth-child(2){width:min(46vw,210px);margin-left:-44px;transform:translateY(-24px)}
  .privacy-band,.contact-card{padding:26px}
}
.notfound .lead{margin:0 auto 28px}
.hero .lead{margin-bottom:0}
.hero + section{padding-top:36px}