/* The site shell: what the landing page, the start screen, the calendar,
   the account page, privacy and terms share. One width (1140px), one
   header, one navy footer with the wordmark set large, and the marketing
   colours from design.md section 8.

   Every class here is prefixed site or named for this file alone, so it can
   sit beside app.css (the app pages) or a page's own <style> (the landing
   page, privacy, terms) without either redefining the other. The editor's
   workspace does not use it: it fills the screen. */

:root{
  --sun:#FBC55A;  --sun-t:#FFF0C9;
  --violet:#8B7CFF; --violet-t:#E8E4FF;
  --mint:#4ECB8D; --mint-t:#D6F4E5;
  --sky:#4DA3FF;  --sky-t:#DCECFF;
  --pink:#FF6FAE; --pink-t:#FFE0EE;
  --blush:#FFE3DC;
  --r-xl:28px;
  --site-w:1140px;
}

.siteShell{max-width:var(--site-w); margin:0 auto; padding:0 20px}

/* header: wordmark, the page's links, and a slot on the right (the app's
   account box, or the landing page's Open the app) */
.siteTop{display:flex; align-items:center; gap:28px; padding-top:18px; padding-bottom:18px; min-height:82px}   /* sides come from .siteShell */
.siteTop .wordmark{font-family:"Bricolage Grotesque", "Figtree", sans-serif; font-weight:800; font-size:24px; letter-spacing:-.03em; color:#16253F; text-decoration:none; flex-shrink:0}
.siteTop .wordmark em{font-style:normal; color:#EE5340}
.siteNav{display:flex; gap:26px; margin:0 auto; flex-wrap:wrap}
.siteNav a{color:#16253F; text-decoration:none; font-size:15px; font-weight:500; opacity:.78}
.siteNav a:hover, .siteNav a[aria-current="page"]{opacity:1}
.siteNav a[aria-current="page"]{text-decoration:underline; text-decoration-color:#EE5340; text-decoration-thickness:2px; text-underline-offset:6px}
.siteRight{display:flex; align-items:center; gap:10px; margin-left:auto}
.siteNav + .siteRight{margin-left:0}
@media(max-width:820px){ .siteNav{display:none} }

/* footer */
.siteFoot{margin-top:96px; background:#16253F; color:#C9D2E3; padding:56px 0 0; overflow:hidden; font-family:"Figtree", system-ui, sans-serif}
.siteCols{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:24px}
.siteCols h4{color:#fff; font:600 14px/1 "Figtree", sans-serif; margin:0 0 14px}
.siteCols a{display:block; color:#C9D2E3; text-decoration:none; font-size:14px; margin-bottom:10px}
.siteCols a:hover{color:#fff}
.siteCols p{margin:12px 0 0; font-size:14px; line-height:1.6; max-width:26em}
.siteCols .wordmark{font-family:"Bricolage Grotesque", "Figtree", sans-serif; font-weight:800; font-size:22px; letter-spacing:-.03em; color:#fff; text-decoration:none}
.siteCols .wordmark em{font-style:normal; color:#EE5340}
.siteGiant{font-family:"Bricolage Grotesque", "Figtree", sans-serif; font-weight:800; letter-spacing:-.05em; font-size:min(220px, calc((100vw - 48px) / 5.1));
           line-height:.8; color:#fff; margin:56px 0 0; white-space:nowrap; text-align:center}
.siteGiant em{font-style:normal; color:#EE5340}
.siteFine{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px; padding:22px 0 26px; border-top:1px solid rgba(255,255,255,.12); margin-top:28px}
@media(max-width:760px){ .siteCols{grid-template-columns:1fr 1fr} .siteCols > div:first-child{grid-column:1 / -1} }

/* small shared pieces */
.c-sun{background:var(--sun-t)} .c-violet{background:var(--violet-t)} .c-mint{background:var(--mint-t)}
.c-sky{background:var(--sky-t)} .c-pink{background:var(--pink-t)} .c-blush{background:var(--blush)}
.siteTag{display:inline-flex; align-items:center; gap:6px; font:600 13px/1 "Figtree", sans-serif; padding:8px 12px; border-radius:999px; white-space:nowrap}
.siteIco{width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.siteIco svg{width:24px; height:24px}

/* The account box carries its own Calendar link. Beside the header's links
   it says the same thing twice, so it shows only where they fold away. */
@media(min-width:821px){ .siteRight .authBox a[href="/calendar"]{display:none} }

/* The analytics question (js/minilytics.js), asked once, bottom of the screen.
   Both answers are the same size: saying no is as easy as saying yes. */
.mlAsk{position:fixed; left:16px; right:16px; bottom:16px; z-index:1000; max-width:560px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; padding:14px 16px; background:var(--surface, #fff); color:var(--ink, #16253F); border:1px solid var(--line, #E6E2D6); border-radius:16px; box-shadow:0 4px 12px rgba(22,37,63,.08), 0 16px 40px rgba(22,37,63,.12); font-size:14px; line-height:1.45}
.mlAsk p{flex:1 1 260px; margin:0}
.mlAsk a{color:inherit}
.mlAskBtns{display:flex; gap:8px; flex:0 0 auto}
.mlAskBtns button{min-height:40px; padding:0 16px; border-radius:999px; font:inherit; font-weight:600; cursor:pointer; border:1.5px solid var(--ink, #16253F)}
.mlNo{background:transparent; color:var(--ink, #16253F)}
.mlYes{background:var(--ink, #16253F); color:#fff}