/* ══════════════════════════════════════════════════════════════════════
   Stotely · Dawn theme — shared foundation
   Single source of truth for tokens, base reset, nav, footer, buttons,
   and the constellation divider. Link this from every page, then add
   page-specific styles in that page's own <style> block.
   Requires the Geist + Raleway webfonts (linked per page in <head>).
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --ink:#2B2333; --soft:#5C5468; --muted:#8E8698;
  --a1:#6E5FB8; --a1-rgb:110,95,184; --a2:#2E8DA6; --a2-rgb:46,141,166;
  --gold:#B27B3A; --rose:#C96C8E;
  --serif:"Raleway","Geist",sans-serif;
  --sans:"Geist","Inter",system-ui,-apple-system,sans-serif;
  --line:rgba(110,95,184,.28);
  /* dawn surfaces */
  --paper:#FFFFFF; --cream:#FBF3EC; --blush:#F6E4DD;
  --hair:rgba(43,35,51,.12); --hair-soft:rgba(43,35,51,.07);
  --frost:rgba(255,255,255,.66);
  /* deep-plum CTA (shared across nav, footer, in-page CTAs) */
  --plum:#2B2333; --on-plum:#FBF3EC;
  /* scroll-compass feel (from the original landing mockup) */
  --deg-per-px:0.18;   /* clockwise degrees per pixel scrolled */
  --ease:0.08;         /* 0=frozen, 1=instant (rotation smoothing) */
}
*{box-sizing:border-box; margin:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans); color:var(--ink); overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* warm ivory ground; pages may layer the Light Constellation image on top */
  background:linear-gradient(180deg, #FDF8F1 0%, #F8F0E5 54%, #F2E8DA 100%) fixed;
}

/* ── splitting nav (frosted pill → left logo-circle + right CTA on scroll) ── */
.nav{position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:10; width:min(880px,92vw);
  display:flex; align-items:center; gap:18px; padding:10px 12px 10px 20px;
  background:var(--frost); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--hair); border-radius:999px;
  box-shadow:0 12px 34px rgba(120,84,74,.16), inset 0 1px 0 rgba(255,255,255,.7);
  transition:width .45s ease, padding .45s ease, background .45s ease, box-shadow .45s ease, border-color .45s ease, -webkit-backdrop-filter .45s ease, backdrop-filter .45s ease;}
.nav__brand{display:flex; align-items:center; justify-content:center; gap:10px; text-decoration:none;
  border:1px solid transparent; border-radius:50%; width:auto; height:auto;
  transition:background .45s ease, border-color .45s ease, box-shadow .45s ease, width .45s ease, height .45s ease;}
/* the pearl stands alone in the home nav, so it carries the brand on its own
   and is sized to hold that weight beside the links */
.nav__brand .mark{width:38px; height:38px; display:block;}
.nav__brand span{font-family:var(--sans); font-size:1.2rem; font-weight:600; letter-spacing:.01em; color:var(--ink);}
.nav__links{display:flex; align-items:center; gap:28px; margin:0 auto;}
.nav__links a{text-decoration:none; color:var(--soft); font-size:.95rem; font-weight:500; opacity:.85; transition:opacity .15s, color .15s;}
.nav__links a:hover{opacity:1; color:var(--ink);}
.nav__cta{flex:0 0 auto; text-decoration:none; padding:.62rem 1.3rem; border-radius:999px;
  color:var(--on-plum); font-size:.92rem; font-weight:600;
  background:var(--plum); border:1px solid rgba(43,35,51,.4);
  box-shadow:0 0 0 5px rgba(43,35,51,.06), 0 6px 18px rgba(120,84,74,.22); transition:transform .15s ease, box-shadow .25s ease;}
.nav__cta:hover{transform:translateY(-1px); box-shadow:0 0 0 7px rgba(43,35,51,.08), 0 10px 26px rgba(120,84,74,.3);}
/* collapsed: the pill dissolves; brand becomes a floating circle, CTA floats right */
.nav.collapsed{width:94vw; padding:0; background:transparent; border-color:transparent; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none; justify-content:space-between;}
.nav.collapsed .nav__links{display:none;}
.nav.collapsed .nav__brand{width:54px; height:54px; gap:0; border-radius:50%;
  background:var(--frost); -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
  border-color:var(--hair); box-shadow:0 10px 26px rgba(120,84,74,.18);}
/* The wordmark hides so the brand can close into its circle. It is a <span>
   on the pages that set their type in CSS and an <img class="wmimg"> on the
   ones that use the drawn wordmark, so both have to be named here. */
.nav.collapsed .nav__brand span,
.nav.collapsed .nav__brand .wmimg{display:none;}
.nav.collapsed .nav__cta{box-shadow:0 0 0 5px rgba(43,35,51,.06), 0 10px 26px rgba(120,84,74,.24);}
/* Phones: the informational links go, but Sign in stays. The old rule hid the
   whole container, and with no menu button in the design that meant every
   marketing page on a phone had NO path to sign in (found 2026-07-31). */
@media (max-width:820px){
  .nav__links{display:flex; gap:0;}
  .nav__links a{display:none;}
  .nav__links a#navSignin{display:inline; margin-right:14px;}
  .nav{justify-content:space-between; width:94vw;}
}

/* ── ringed deep-plum CTA (dimensional shadow layers, no aurora) ── */
.cta-pill{display:inline-flex; align-items:center; gap:.5rem; margin-top:1.9rem; padding:.85rem 1.9rem; border-radius:999px; text-decoration:none;
  font-family:var(--sans); font-size:1rem; font-weight:500; color:var(--on-plum); background:var(--plum); border:1px solid rgba(43,35,51,.4);
  box-shadow:0 0 0 7px rgba(43,35,51,.07), 0 0 0 15px rgba(43,35,51,.04), 0 12px 30px rgba(120,84,74,.28);
  transition:transform .2s ease, box-shadow .25s ease;}
.cta-pill:hover{transform:translateY(-1px); box-shadow:0 0 0 10px rgba(43,35,51,.09), 0 0 0 20px rgba(43,35,51,.05), 0 16px 40px rgba(120,84,74,.34);}

/* ── constellation divider (base contained; modifiers stretch / mute) ── */
.constellation-divider{max-width:1000px; width:92%; margin:0 auto; overflow:hidden;}
.constellation-divider svg{width:116%; margin-left:-8%; height:auto; display:block; opacity:.8;}
.constellation-divider--full{max-width:none; width:100%;}
.constellation-divider--muted svg{opacity:.42; filter:saturate(.5);}

/* ══ Footer (Take your Sparks · Stay in Touch · links · copyright) ══ */
.footer{position:relative; z-index:2; padding-top:8vh;}
.footer__top{max-width:1120px; margin:0 auto; padding:0 clamp(20px,6vw,56px) 7vh; display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; border-bottom:1px solid var(--hair);}
.footer__app{order:1; display:flex; flex-direction:column; align-items:flex-start; gap:12px;}
.footer__signup{order:2;}
@media (min-width:761px){ .footer__signup{border-left:1px solid var(--hair); padding-left:clamp(28px,4vw,64px);} }
@media (max-width:760px){ .footer__top{grid-template-columns:1fr; gap:44px;} .footer__app{order:2;} .footer__signup{order:1;} }
.signup-heading{font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,2.6vw,2.1rem); color:var(--ink); margin-bottom:.6rem;}
.signup-desc{font-family:var(--sans); font-weight:300; font-size:.95rem; line-height:1.55; color:var(--soft); max-width:46ch; margin-bottom:1.5rem;}
.signup-bar{display:flex; align-items:center; gap:8px; width:min(460px,100%); padding:6px 6px 6px 20px; border-radius:999px; background:rgba(255,255,255,.66); border:1px solid var(--hair); box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
.signup-input{flex:1; min-width:0; border:none; background:transparent; outline:none; font-family:var(--sans); font-size:1rem; color:var(--ink); padding:.5rem 0;}
.signup-input::placeholder{color:var(--muted);}
.signup-btn{flex:0 0 auto; border:none; cursor:pointer; border-radius:999px; padding:.6rem 1.4rem; background:var(--plum); color:var(--on-plum); font-family:var(--sans); font-weight:600; font-size:.95rem; transition:transform .15s, background .2s;}
.signup-btn:hover{transform:translateY(-1px);}
.signup-note{font-size:.78rem; color:var(--muted); margin-top:.85rem;}
.signup-note a{color:var(--a2); text-decoration:none;}
.footer__app-tile{width:60px; height:60px; border-radius:8px; display:block; padding:10px; background:linear-gradient(135deg,#3B3358,#2B2333); border:1px solid var(--hair); box-shadow:0 10px 26px rgba(120,84,74,.22);}
.footer__app-text{font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem,2.4vw,2rem); color:var(--ink); line-height:1.12;}
.footer__app-cap{font-family:var(--sans); font-weight:300; font-size:1rem; color:var(--soft); max-width:42ch; margin:0;}
.footer__app-badge{display:inline-block; opacity:.94; transition:.15s;}
.footer__app-badge:hover{opacity:1; transform:translateY(-1px);}
.footer__app-badge img{height:46px; width:auto; display:block; margin-top:4px; border-radius:6px; background:#fff; padding:2px;}
.footer__links{display:flex; gap:22px; flex-wrap:wrap; align-items:center; justify-content:center; max-width:1120px; margin:0 auto; padding:4vh clamp(20px,6vw,56px);}
.footer__links a{display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-size:.9rem; color:var(--soft); text-decoration:none; opacity:.85; transition:.15s;}
.footer__links a:hover{color:var(--ink); opacity:1;}
.footer__links a svg{width:16px; height:16px; flex:0 0 auto; fill:currentColor;}
.footer__links a .fl-arw{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; opacity:.7;}
.footer__bottom{text-align:center; padding:26px 20px; border-top:1px solid rgba(46,141,166,.45);
  background:url("bg-landing-constellation-dark-muted.png") center/cover no-repeat, linear-gradient(180deg,#241D30,#171221);}
.footer__copy{font-family:var(--sans); font-size:.85rem; color:#B4ADC2;}
