/* Shared by every page of the site: colours, type, header, buttons, the
   Download panel, social links and footer.

   Two looks, like the app (lib/ui/theme.dart): Lime (the brand) and Blush
   (rose on blush, the app's own values). Both are light and low in
   saturation for big areas, with soft charcoal text instead of black and
   the strong colour kept for small accents. site.js sets data-look on
   <html> and remembers the choice. */
:root, [data-look="lime"] {
  color-scheme: light;
  --bg: #F7F9F1; --s1: #FFFFFF; --s2: #EEF3E3; --tint: #E8F5CC;
  --ink: #2A2C30; --mut: #61656B; --dim: #A4A8A0; --line: rgba(42,44,48,.09);
  --accent: #C6FF3D; --on-accent: #1E2A06;   /* buttons and fills */
  --accent-ink: #4A7A00;                     /* the accent as a line or text on white */
  --hl: #DCFF8A;                             /* the highlighter */
  --halo: rgba(198,255,61,.5);
  --bad: #D64545; --other: #C2386F; --other-hl: #FFC6D9;
}
[data-look="blush"] {
  --bg: #FDF5F8; --s1: #FFFFFF; --s2: #F8E4EB; --tint: #FBE1EB;
  --ink: #2B1D24; --mut: #735E68; --dim: #B9A6AF; --line: rgba(43,29,36,.09);
  --accent: #C2386F; --on-accent: #FFFFFF;
  --accent-ink: #C2386F;
  --hl: #FFC6D9;
  --halo: rgba(255,148,188,.45);
  --bad: #BF3A2B; --other: #4A7A00; --other-hl: #DCFF8A;
}
:root {
  --display: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--body); overflow-x: hidden; transition: background .5s, color .5s; }
a { color: inherit; }
canvas { display: block; }
[hidden] { display: none !important; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 18px; }
@media (min-width: 720px) { .wrap { padding: 0 36px; } }
/* Headlines: rounded and in normal case, which read softer than capitals. */
.d { font-family: var(--display); font-weight: 900; letter-spacing: -.035em; line-height: 1; }
.hl { background: linear-gradient(180deg, transparent 58%, var(--hl) 58%, var(--hl) 94%, transparent 94%); padding: 0 .08em; transition: background .5s; }
.mut { color: var(--mut); }
.tag { display: inline-flex; align-items: center; gap: 10px; font: 800 13px/1 var(--body); letter-spacing: .04em; color: var(--mut); }
.tag::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--tint); }

/* Header */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 12px 0; transition: background .3s, box-shadow .3s; }
.top.solid { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.top .wrap { display: flex; align-items: center; gap: 16px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 900 21px var(--body); letter-spacing: -.01em; margin-right: auto; }
.logo img { width: 34px; height: 34px; border-radius: 10px; }
.top nav { display: flex; gap: 22px; }
.top nav a { text-decoration: none; font-weight: 800; font-size: 15px; color: var(--mut); }
.top nav a:hover { color: var(--ink); }
@media (max-width: 899px) { .top nav, .top .socials { display: none; } }

/* The look switch: Lime or Blush, as in the app. */
.looks { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--s1); box-shadow: 0 0 0 1px var(--line); }
.looks button { width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; position: relative; }
.looks button[data-look="lime"] { background: #C6FF3D; }
.looks button[data-look="blush"] { background: #FF94BC; }
.looks button[aria-pressed="true"]::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink); }

/* Buttons: the look's colour, never black. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--accent); color: var(--on-accent); text-decoration: none; border: 0; cursor: pointer;
  font: 900 16px/1 var(--body); letter-spacing: -.005em; padding: 0 22px; height: 46px; border-radius: 999px;
  box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--accent) 80%, #000); transition: transform .15s, box-shadow .25s, background .5s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 80%, #000); }
.btn svg { width: 18px; height: 18px; }
.btn.big { height: 60px; padding: 0 32px; font-size: 18px; }
.btn.big svg { width: 22px; height: 22px; }

/* The panel the Download button opens on a laptop (on a phone it goes
   straight to the store). */
.dl-panel { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--ink) 25%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.dl-panel.open { opacity: 1; visibility: visible; }
.dl-card { position: relative; width: min(340px, 100%); background: var(--s1); border-radius: 30px; padding: 30px 26px 24px; text-align: center;
  box-shadow: 0 30px 80px -24px rgba(0,0,0,.3); transform: translateY(14px) scale(.97); transition: transform .3s cubic-bezier(.2,1.2,.4,1); }
.dl-panel.open .dl-card { transform: none; }
.dl-card img { width: 180px; height: 180px; border-radius: 20px; padding: 12px; background: #fff; box-shadow: 0 0 0 6px var(--tint); }
.dl-card b { display: block; font: 900 24px/1.1 var(--display); letter-spacing: -.02em; margin: 20px 0 16px; }
.dl-links { display: flex; justify-content: center; gap: 18px; }
.dl-links a { display: inline-flex; align-items: center; gap: 7px; color: var(--mut); font-weight: 800; font-size: 14px; text-decoration: none; }
.dl-links a:hover { color: var(--ink); }
.dl-links svg { width: 16px; height: 16px; }
.dl-x { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--s2); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }

/* Social links (hidden until site.js has a link for them) */
.socials { display: flex; gap: 8px; }
.socials a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--s1); box-shadow: 0 0 0 1px var(--line); transition: background .2s; }
.socials a:hover { background: var(--tint); }
.socials svg { width: 19px; height: 19px; }

/* Footer */
.foot { padding: 30px 0 calc(30px + env(safe-area-inset-bottom)); position: relative; z-index: 1; background: var(--bg); box-shadow: 0 -1px 0 var(--line); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; margin-right: auto; }
.foot nav a { color: var(--mut); text-decoration: none; font-weight: 700; font-size: 14px; }
.foot nav a:hover { color: var(--ink); }
.foot .copy { color: var(--dim); font-size: 13px; font-weight: 700; }

/* A Download bar for phones once the first screen has scrolled away */
.sticky { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; transform: translateY(150%); transition: transform .35s cubic-bezier(.2,.9,.2,1); }
.sticky.show { transform: none; }
.sticky .btn { width: 100%; height: 56px; }
@media (min-width: 900px) { .sticky { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}