/* OurSpace guides — shared stylesheet for the static content pages in
   public/guides/. These pages are served verbatim by the host (like /sw.js),
   never touch the React bundle, and deliberately match the landing page's
   dark indigo/purple brand. Self-contained: system fonts, no build step. */

:root {
  color-scheme: dark;
  --bg: #14142c;
  --bg-raise: #1c1c3f;
  --card: rgba(255, 255, 255, 0.06);
  --card-strong: rgba(255, 255, 255, 0.09);
  --line: rgba(255, 255, 255, 0.14);
  --ink: #f1effb;
  --muted: #bcb6dd;
  --faint: #948dbd;
  --link: #c9b8fd;
  --accent-a: #a855f7;
  --accent-b: #ec4899;
  --good: #6ee7b7;
  --warn: #fcd34d;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(60rem 40rem at 85% -10%, rgba(168, 85, 247, 0.16), transparent 60%),
    radial-gradient(50rem 35rem at -10% 25%, rgba(59, 130, 246, 0.12), transparent 60%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent-a);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0 0 8px 0;
  z-index: 10;
}
.skip-link:focus { left: 0; }

a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--accent-a); outline-offset: 2px; border-radius: 2px; }

.wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem; }
.wrap-wide { max-width: 62rem; margin: 0 auto; padding: 0 1.25rem; }

/* Header */
.site-head { border-bottom: 1px solid var(--line); }
.site-head .bar {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.brand img { width: 32px; height: 32px; border-radius: 8px; display: block; }
.brand .crumb { color: var(--faint); font-weight: 500; }
.head-cta {
  margin-left: auto;
  white-space: nowrap;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
}
.head-cta:hover { color: #fff; filter: brightness(1.1); }

/* Article hero */
.hero { padding: 3rem 0 1rem; }
.kicker {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 0.9rem;
}
h1 {
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.standfirst { font-size: 1.15rem; color: var(--muted); margin: 0 0 1.2rem; }
.byline { font-size: 0.9rem; color: var(--faint); margin: 0; }
.byline a { color: var(--faint); }
.byline a:hover { color: var(--ink); }

main { padding-bottom: 4rem; }
section { margin: 2.6rem 0; }

h2 {
  font-size: clamp(1.35rem, 3.5vw, 1.7rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 800;
  margin: 2.4rem 0 0.8rem;
  text-wrap: balance;
}
h3 { font-size: 1.12rem; font-weight: 700; margin: 1.6rem 0 0.5rem; }
p { margin: 0.9rem 0; }
ul, ol { margin: 0.9rem 0; padding-left: 1.4rem; }
li { margin: 0.45rem 0; }
strong { color: #fff; }

/* Honest-disclosure and note callouts */
.note {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent-a);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin: 1.4rem 0;
  font-size: 0.98rem;
  color: var(--muted);
}
.note strong { color: var(--ink); }

/* Step lists */
ol.steps { counter-reset: step; list-style: none; padding-left: 0; }
ol.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.6rem;
  margin: 0.9rem 0;
}
ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
}

/* Tables */
.table-scroll {
  overflow-x: auto;
  margin: 1.4rem 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  -webkit-overflow-scrolling: touch;
}
/* On wide screens, let tables break out of the 46rem article column so
   comparison columns don't have to scroll. Centred on the viewport (the wrap
   itself is centred), and only where 62rem + margins comfortably fit. */
@media (min-width: 70rem) {
  .table-scroll {
    width: 62rem;
    margin-left: 50%;
    transform: translateX(-50%);
  }
}
table { border-collapse: collapse; width: 100%; font-size: 0.93rem; line-height: 1.5; }
caption {
  text-align: left;
  padding: 0.9rem 1rem 0.2rem;
  font-weight: 700;
  color: var(--ink);
}
th, td { text-align: left; vertical-align: top; padding: 0.65rem 1rem; border-top: 1px solid var(--line); }
thead th {
  border-top: none;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
tbody th { font-weight: 700; color: var(--ink); }
td { color: var(--muted); }
td strong { color: var(--ink); }
.yes { color: var(--good); font-weight: 700; }
.no { color: var(--faint); }
.part { color: var(--warn); }

/* Screenshots */
.shots {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
  margin: 1.8rem 0;
  padding: 0;
  list-style: none;
}
.shots li { margin: 0; flex: 0 1 15rem; }
.shots figure { margin: 0; }
.shots img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}
.shots figcaption {
  margin-top: 0.6rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--faint);
}

/* FAQ */
.faq h3 { margin-top: 1.8rem; }
.faq h3 + p { margin-top: 0.3rem; }

/* CTA panel */
.cta {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.16), rgba(236, 72, 153, 0.14));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 2rem 1.75rem;
  text-align: center;
  margin: 3rem 0 1rem;
}
.cta h2 { margin-top: 0; }
.cta p { color: var(--muted); max-width: 34rem; margin-left: auto; margin-right: auto; }
.btn {
  display: inline-block;
  margin-top: 0.8rem;
  padding: 0.8rem 1.8rem;
  border-radius: 14px;
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}
.btn:hover { color: #fff; filter: brightness(1.1); }
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.1rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.2rem;
}
.badge-row img { display: block; }
/* Google's Play badge PNG ships with built-in padding, so it renders half as
   tall again for the two marks to match visually (same trick as Landing.jsx). */
.badge-apple { height: 50px; width: auto; }
.badge-play { height: 75px; width: auto; }

/* Footer */
.site-foot {
  border-top: 1px solid var(--line);
  padding: 2.2rem 0 2.6rem;
  font-size: 0.92rem;
  color: var(--faint);
}
.site-foot h2 { font-size: 1rem; margin: 0 0 0.6rem; }
.site-foot ul { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.site-foot li { margin: 0.4rem 0; }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: #fff; }
.made-in-uk { color: var(--muted); font-weight: 600; }
.fineprint { font-size: 0.8rem; color: var(--faint); }