/* mysoftly.ai shared styles: tokens, reset, nav, App Store badges, sticky bar, footer.
   Generated during the Eleventy port (2026-09-07) from the homepage's rules. Page-specific
   styles live in the other files in this folder. */
:root {
    --sky-deep: #2f6fb5;
    --sky: #5aa6e2;
    --sky-soft: #86c4ee;
    --sky-pale: #bcdcec;
    --sky-bg: #eaf4fc;
    --navy: #00004d;
    --blush: #df8fab;
    --blush-soft: #fbeef3;
    --ink: #2b2c3d;
    --ink-soft: #6c6579;
    --ink-faint: #a49c8d;
    --gold: #a8853f;
    --bronze: #8a6d3b;
    --bg: #fbf9f4;
    --surface: #ffffff;
    --border: #eae2d3;
    --border-light: #f2ece0;
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --max-width: 1100px;
}

:root {
    /* guide/page palette (cool near-white) used by the guides and utility pages */
    --color-bg: #FBFAFE;
    --color-surface: #FFFFFF;
    --color-text: #283046;
    --color-text-secondary: #5f6a82;
    --color-text-tertiary: #97a1b5;
    --color-accent: #2f6fb5;
    --color-accent-strong: #245a96;
    --color-accent-soft: #e4f1fb;
    --color-border: #e4ecf5;
    --color-border-light: #eef3f9;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

/* NAV */
nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(251, 249, 244, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}
.nav-inner {
    max-width: var(--max-width); margin: 0 auto; padding: 0.85rem 2rem;
    display: flex; justify-content: space-between; align-items: center;
}
.logo { display: flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; }
.logo-mark {
    width: 30px; height: 30px; border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(47, 111, 181, 0.18);
}
.logo-text { color: #23315a; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }
.nav-links { display: flex; gap: 2rem; list-style: none; align-items: center; }
.nav-links a {
    color: var(--ink-soft); text-decoration: none;
    font-size: 0.9rem; font-weight: 500; transition: color 0.2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-toggle {
    display: none; background: none; border: 0; padding: 5px;
    cursor: pointer; color: var(--ink);
    align-items: center; justify-content: center;
}
.nav-toggle svg { width: 23px; height: 23px; display: block; }
/* Hide the LI, not just the button inside it. A display:none button still leaves
   its <li> as a live flex item, and .nav-links' 32px gap fires against it — which
   pushed the App Store badge 32px short of the right edge and made the whole nav
   (and so every page) read as shifted left. */
.nav-toggle-item { display: none; }
.nav-menu {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(251, 249, 244, 0.97);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 30px rgba(90, 62, 30, 0.12);
    padding: 0.4rem 1.25rem 0.75rem;
}
.nav-menu.open { display: block; }
.nav-menu a {
    display: block; padding: 0.75rem 0.25rem;
    color: var(--ink); text-decoration: none;
    font-size: 0.95rem; font-weight: 500;
    border-bottom: 1px solid var(--border-light);
}
.nav-menu a:last-child { border-bottom: 0; }

/* HERO — full-bleed lifestyle photo, App Store screenshot style */
.hero {
    position: relative; overflow: hidden;
    background: #e9dfd2;
    border-bottom: 1px solid var(--border);
    color: #fff;
    min-height: clamp(560px, 82vh, 800px);
    display: flex;
}
.hero-bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 100% 50%;
}
.hero-scrim {
    position: absolute; inset: 0;
    background:
        radial-gradient(640px 420px at 76% 42%, rgba(255, 178, 92, 0.12), transparent 62%),
        linear-gradient(105deg, rgba(44, 27, 10, 0.66) 0%, rgba(44, 27, 10, 0.48) 34%, rgba(44, 27, 10, 0.18) 56%, rgba(44, 27, 10, 0) 72%),
        linear-gradient(180deg, rgba(44, 27, 10, 0.22) 0%, rgba(44, 27, 10, 0) 30%, rgba(44, 27, 10, 0) 72%, rgba(44, 27, 10, 0.20) 100%);
}
.hero-inner {
    position: relative; z-index: 2;
    max-width: var(--max-width); margin: 0 auto;
    padding: 5rem 2rem 5.5rem;
    display: flex; align-items: center;
    width: 100%;
}
.hero-copy { max-width: 520px; }
.hero h1 {
    font-size: 3.5rem; line-height: 1.08;
    letter-spacing: -0.02em; margin-bottom: 1.3rem;
    font-weight: 500; color: #fff;
    text-shadow: 0 2px 10px rgba(20, 12, 6, 0.55), 0 6px 34px rgba(20, 12, 6, 0.45);
}
.hero h1 em { font-style: italic; color: #f6c2d5; }
.hero .lead {
    font-size: 1.22rem; color: rgba(255, 255, 255, 0.97);
    line-height: 1.65; max-width: 470px; margin-bottom: 2.3rem;
    font-weight: 400;
    text-shadow: 0 1px 8px rgba(20, 12, 6, 0.6), 0 4px 22px rgba(20, 12, 6, 0.45);
}
.cta-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.btn-soon {
    display: inline-flex; align-items: center; gap: 0.55rem;
    background: #fff; color: #1f2740;
    font-weight: 600; font-size: 0.96rem;
    padding: 0.85rem 1.6rem; border-radius: 100px;
    border: 1px solid var(--border);
    cursor: default;
    box-shadow: 0 8px 26px rgba(47,111,181,0.16);
}
.btn-soon::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--blush);
}

.appstore-badge {
    display: inline-flex; align-items: center; gap: 0.7rem;
    background: #000; color: #fff;
    border-radius: 13px; padding: 0.55rem 1.3rem 0.6rem 1.1rem;
    box-shadow: 0 12px 30px rgba(16, 24, 40, 0.28);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.appstore-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(16, 24, 40, 0.34);
}
a.appstore-badge.light:hover {
    box-shadow: 0 18px 46px rgba(10, 6, 2, 0.6), 0 2px 12px rgba(10, 6, 2, 0.45);
}
.appstore-badge svg { width: 26px; height: 26px; fill: #fff; flex-shrink: 0; }
/* White variant: pops over dark photography */
.appstore-badge.light {
    background: #fff; color: #10131c;
    box-shadow: 0 14px 40px rgba(10, 6, 2, 0.55), 0 2px 10px rgba(10, 6, 2, 0.4);
}
.appstore-badge.light svg { fill: #10131c; }
.asb-text { display: flex; flex-direction: column; line-height: 1.12; text-align: left; }
.asb-top { font-size: 0.66rem; opacity: 0.85; }
.asb-bottom { font-size: 1.22rem; font-weight: 600; letter-spacing: -0.01em; }
.nav-badge {
    display: inline-flex; align-items: center; gap: 0.45rem;
    background: #0b0b0f; color: #fff !important;
    border-radius: 100px; padding: 0.45rem 0.95rem;
    font-size: 0.78rem; font-weight: 600; white-space: nowrap;
    text-decoration: none;
    transition: background 0.2s ease;
}
a.nav-badge:hover { background: #2b2c3d; }
.nav-badge svg { width: 13px; height: 13px; fill: #fff; }

/* Sticky mobile download bar. Hidden until the hero CTA scrolls away,
   so it never sits on top of the badge it duplicates. */
.sticky-cta {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 24px rgba(16, 24, 40, 0.10);
    transform: translateY(110%);
    transition: transform 0.28s ease;
}
.sticky-cta.show { transform: translateY(0); }
.sticky-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.9rem; max-width: 460px; margin: 0 auto;
}
.sticky-copy {
    font-size: 0.84rem; line-height: 1.25; color: var(--ink);
    font-weight: 600;
}
.sticky-copy span { display: block; font-weight: 400; color: var(--ink-soft); font-size: 0.76rem; }
.sticky-cta .appstore-badge {
    padding: 0.4rem 0.9rem 0.45rem 0.8rem; border-radius: 11px;
    box-shadow: none; flex-shrink: 0;
}
.sticky-cta .appstore-badge svg { width: 20px; height: 20px; }
.sticky-cta .asb-top { font-size: 0.58rem; }
.sticky-cta .asb-bottom { font-size: 0.95rem; }
@media (max-width: 768px) {
    .sticky-cta { display: block; }
}
@media (prefers-reduced-motion: reduce) {
    .sticky-cta { transition: none; }
}


/* FOOTER */
footer { border-top: 1px solid var(--border); margin-top: 1rem; background: var(--surface); }
.footer-inner {
    max-width: var(--max-width); margin: 0 auto;
    padding: 3.25rem 2rem;
    display: flex; justify-content: space-between;
    align-items: flex-start; gap: 2rem; flex-wrap: wrap;
}
.footer-brand { max-width: 320px; }
.footer-brand .logo { margin-bottom: 0.85rem; }
.footer-brand p { font-size: 0.86rem; color: var(--ink-faint); line-height: 1.65; }
.footer-links { display: flex; gap: 3rem; }
.footer-col h4 {
    font-size: 0.78rem; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--ink-faint);
    font-weight: 600; margin-bottom: 0.8rem;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.5rem; }
.footer-col a { color: var(--ink-soft); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
    max-width: var(--max-width); margin: 0 auto;
    padding: 1.5rem 2rem; border-top: 1px solid var(--border-light);
    display: flex; justify-content: space-between;
    font-size: 0.8rem; color: var(--ink-faint); flex-wrap: wrap; gap: 1rem;
}


/* nav + footer responsive (mirrors the homepage breakpoints) */
@media (max-width: 768px) {
    .nav-inner { padding: 0.85rem 1.5rem; }
    .nav-links { gap: 1.25rem; }
    .footer-inner { flex-direction: column; }
    .footer-links { gap: 1.5rem 2rem; flex-wrap: wrap; }
}
@media (max-width: 620px) {
    .nav-links li.nav-textlink { display: none; }
    .nav-toggle-item { display: flex; align-items: center; }
    .nav-toggle { display: inline-flex; }
    .nav-links { gap: 0.9rem; }
}
@media (max-width: 480px) {
    .nav-inner { padding: 0.85rem 1rem; }
    .logo { gap: 0.45rem; }
    .logo-text { font-size: 1.02rem; }
    .logo-mark { width: 26px; height: 26px; }
    .nav-links { gap: 0.6rem; }
    .nav-links a { font-size: 0.78rem; }
}