/* Pique site: Daylight Glass.
   Cream base, soft colour glows, matte frosted glass over greyscale stone shapes.
   Orange is for fills; orange TEXT is #B23F0E. */
:root {
  --cream: #FBF2EC;
  --peach: #FFD9C2;
  --blush: #F9CFCB;
  --apricot: #FFC49B;
  --honey: #F5A524;
  --rose: #E8456F;
  --blue: #5F8BFF;
  --orange: #FF6B35;
  --orange-text: #B23F0E;
  --ink: #2B1911;
  --ink-2: #5E4337;
  --ink-3: #7B5D4F;
  --stone-1: #E4DED9;
  --stone-2: #D3CBC5;
  --stone-3: #BFB5AE;
  --rim: rgba(255, 255, 255, 0.78);
  --glass: rgba(255, 255, 255, 0.5);
  --glass-strong: rgba(255, 255, 255, 0.66);
  --shadow: 0 18px 44px rgba(120, 70, 40, 0.12), 0 2px 6px rgba(120, 70, 40, 0.06);
  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* the daylight: fixed colour glows behind everything */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60vmax 50vmax at 88% -8%, rgba(255, 196, 155, 0.65), transparent 60%),
    radial-gradient(50vmax 45vmax at -10% 38%, rgba(249, 207, 203, 0.6), transparent 62%),
    radial-gradient(55vmax 45vmax at 70% 108%, rgba(255, 217, 194, 0.7), transparent 60%),
    var(--cream);
}
img { max-width: 100%; display: block; }
a { color: var(--orange-text); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; z-index: 50; }
.skip:focus { left: 8px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }

/* wordmark: canonical css lives in pique-logo.css; here only the colour */
.pique-wordmark { color: var(--ink); }
.pique-wordmark:hover { color: var(--ink); }

/* ───────── glass ───────── */
.glass {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  backdrop-filter: blur(22px) saturate(1.1);
  border: 1px solid var(--rim);
  border-radius: 28px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -10px 24px rgba(255, 190, 160, 0.12),
    var(--shadow);
}
.glass.strong { background: var(--glass-strong); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, 0.82); }
}

/* greyscale stone shapes the glass sits in front of */
.stone { position: absolute; pointer-events: none; z-index: 0; }
.stone.ring { border-radius: 50%; border: 22px solid var(--stone-2); opacity: 0.8; }
.stone.pill { border-radius: 999px; background: linear-gradient(135deg, var(--stone-1), var(--stone-3)); opacity: 0.7; }
.stone.blob { border-radius: 46% 54% 52% 48% / 52% 44% 56% 48%; background: linear-gradient(150deg, var(--stone-1), var(--stone-2)); opacity: 0.75; }

/* ───────── buttons / badges ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  background: var(--orange); color: var(--ink);
  font: 700 16px/1 var(--font); text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 24px rgba(255, 107, 53, 0.28);
  transition: transform 0.15s;
}
.btn:hover { color: var(--ink); transform: translateY(-1px); }
.btn.quiet { background: var(--glass-strong); border: 1px solid var(--rim); box-shadow: var(--shadow); }
.badges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.badges a { display: block; line-height: 0; border-radius: 10px; }
.badges img { height: 48px; width: auto; }
.badges img.gp { height: 68px; margin: -10px -6px; }

/* ───────── header ───────── */
.site-head { position: relative; z-index: 5; padding: 18px 0; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-head nav { display: none; gap: 28px; }
.site-head nav a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 15px; }
.site-head nav a:hover { color: var(--ink); }
.site-head .btn { min-height: 42px; padding: 0 18px; font-size: 15px; }
@media (min-width: 860px) { .site-head nav { display: flex; } }

/* ───────── footer ───────── */
.site-foot { position: relative; z-index: 2; padding: 40px 0 56px; color: var(--ink-2); font-size: 15px; }
.site-foot .wrap { display: grid; gap: 20px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-foot a { color: var(--ink-2); }
.site-foot a:hover { color: var(--ink); }
.site-foot small { color: var(--ink-3); font-size: 14px; }

/* ───────── document pages (privacy, terms, support, delete) ───────── */
.doc-wrap { position: relative; z-index: 1; padding-bottom: 20px; }
.doc { padding: clamp(24px, 5vw, 56px); margin-top: 8px; }
.doc h1 { font-size: clamp(32px, 6vw, 46px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 8px; font-weight: 800; }
.doc .updated { color: var(--ink-3); font-size: 15px; margin: 0 0 28px; }
.doc h2 { font-size: 22px; line-height: 1.2; margin: 40px 0 10px; font-weight: 800; letter-spacing: -0.01em; }
.doc h3 { font-size: 17px; margin: 24px 0 6px; font-weight: 700; color: var(--ink); }
.doc p, .doc li { color: var(--ink-2); max-width: 68ch; }
.doc p { margin: 0 0 14px; }
.doc ul, .doc ol { margin: 0 0 14px; padding-left: 22px; }
.doc li { margin-bottom: 7px; }
.doc strong { color: var(--ink); font-weight: 700; }
.doc hr { border: 0; border-top: 1px solid rgba(94, 67, 55, 0.16); margin: 36px 0; }
.doc .note { background: rgba(255, 255, 255, 0.55); border: 1px solid var(--rim); border-radius: 18px; padding: 16px 18px; margin: 18px 0; }
.doc .note p:last-child, .doc .note ul:last-child { margin-bottom: 0; }
.doc .note h3 { margin-top: 0; }
.doc .older { background: rgba(255, 217, 194, 0.45); }
.doc code { font-size: 0.92em; background: rgba(255, 255, 255, 0.6); padding: 1px 6px; border-radius: 6px; }
.doc details { border-top: 1px solid rgba(94, 67, 55, 0.14); padding: 14px 0; }
.doc details:last-of-type { border-bottom: 1px solid rgba(94, 67, 55, 0.14); }
.doc summary { cursor: pointer; font-weight: 700; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.doc summary::-webkit-details-marker { display: none; }
.doc summary::after { content: '+'; font-size: 24px; line-height: 1; color: var(--orange-text); }
.doc details[open] summary::after { content: '\2212'; }
.doc details p { margin: 10px 0 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pique-wordmark .pique-dot { animation: none !important; }
  * { transition: none !important; }
}

/* keep decorative shapes inside the page width */
.doc-wrap, .hero, .sec, .cta { overflow-x: clip; }
.site-foot .pique-wordmark, .site-foot .pique-wordmark:hover { color: var(--ink); }