/* My Apiaries — myapiaries.co.uk
   Built from the Claude Design handoff "My Apiaries.dc.html". The prototype
   carried every rule as an inline style attribute; the values below are those
   values, lifted into classes so the two pages can share them.

   No web font is loaded. The design asks for SF Pro, which is Apple's and not
   redistributable; system-ui resolves to exactly that on the Apple devices this
   app runs on. Pulling Inter from Google Fonts would also mean every visitor's
   IP reaching Google, which the privacy policy on this very site says does not
   happen. */

:root {
  --ink:        #1d1d1f;
  --ink-72:     rgba(29,29,31,0.72);
  --ink-56:     rgba(29,29,31,0.56);
  --paper:      #ffffff;
  --wash:       #f5f5f7;
  --slate:      #272729;
  --on-dark:    #f5f5f7;
  --on-dark-72: rgba(245,245,247,0.72);
  --on-dark-45: rgba(245,245,247,0.45);
  --blue:       #0066cc;
  --blue-hover: #0071e3;
  --blue-dark:  #2997ff;   /* the blue that carries on a dark background */
  --hairline:   #e0e0e0;
  --shadow:     rgba(0,0,0,0.22) 3px 5px 30px;
  --display:    'SF Pro Display', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text:       'SF Pro Text', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wrap:       1024px;
  --gutter:     22px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); overflow-x: clip; }
body { font-family: var(--text); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; }

/* Keyboard users need to be able to skip the nav. */
.skip { position: absolute; left: -9999px; top: 0; background: #fff; color: var(--ink);
  padding: 10px 16px; z-index: 100; border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 50; height: 44px; background: #000;
  display: flex; align-items: center; justify-content: center; }
.nav-in { width: 100%; max-width: var(--wrap); padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-brand { display: flex; align-items: center; gap: 8px; color: var(--on-dark);
  font-size: 14px; font-weight: 600; letter-spacing: -0.28px; }
.nav-brand:hover { text-decoration: none; }
.nav-brand img { width: 20px; height: 20px; border-radius: 5px; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--on-dark); font-size: 12px; opacity: 0.6; white-space: nowrap;
  transition: opacity .2s ease; }
.nav-links a:hover, .nav-links a:focus-visible { opacity: 1; }
.nav-links a.on { opacity: 1; font-weight: 600; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { background: var(--wash); padding: 96px var(--gutter) 80px;
  display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-icon { width: 96px; height: 96px; border-radius: 21px; margin-bottom: 32px; }
.hero h1 { margin: 0; font-family: var(--display); font-size: 64px; line-height: 1.06;
  font-weight: 600; letter-spacing: -0.374px; max-width: 14ch; text-wrap: balance; }
.hero-lede { margin: 28px 0 0; font-size: 24px; font-weight: 300; line-height: 1.42;
  max-width: 30ch; color: var(--ink); }
.hero-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 36px; }
.hero-note { font-size: 12px; color: var(--ink-56); }
.hero-shot { width: 320px; max-width: 82vw; margin: 72px 0 0; border-radius: 38px; box-shadow: var(--shadow); }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 48px;
  padding: 0 26px; border-radius: 999px; background: var(--blue); color: #fff;
  font-size: 18px; font-weight: 400; transition: background .2s ease, transform .1s ease; }
.btn:hover { background: var(--blue-hover); text-decoration: none; }
.btn:active { transform: scale(0.95); }
/* Pre-launch: a status pill, not a button. Deliberately not clickable-looking —
   a dead blue button is worse than an honest label. */
.btn-soon { background: rgba(29,29,31,0.06); color: var(--ink-72); border: 1px solid var(--hairline);
  font-size: 17px; cursor: default; }
.btn-soon:hover { background: rgba(29,29,31,0.06); }
.btn-soon:active { transform: none; }

.btn-onDark { height: 44px; padding: 0 24px; background: var(--blue-dark); color: #000; font-size: 15px; }
.btn-onDark:hover { background: var(--blue-dark); text-decoration: none; }

/* ── Alternating feature bands ───────────────────────────────────────────── */
.band { padding: 96px var(--gutter); }
.band-wash  { background: var(--wash); }
.band-paper { background: var(--paper); }
.band-slate { background: var(--slate); color: var(--on-dark); }
.band-split { max-width: var(--wrap); margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 64px; align-items: center; }
.band-copy { display: flex; flex-direction: column; gap: 20px; }
.eyebrow { font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--blue); }
.band-slate .eyebrow { color: var(--blue-dark); }
.band-copy h2 { margin: 0; font-family: var(--display); font-size: 44px; line-height: 1.1;
  font-weight: 600; letter-spacing: -0.374px; }
.band-copy p { margin: 0; font-size: 17px; line-height: 1.47; color: var(--ink-72); max-width: 42ch; }
.band-slate .band-copy p { color: var(--on-dark-72); }
.band-copy .fineprint { font-size: 12px; color: var(--ink-56); }
.shots { display: flex; gap: 24px; justify-content: center; align-items: flex-start; }
.shots img { width: 260px; max-width: 44%; border-radius: 32px; box-shadow: var(--shadow); }
/* On the alerts band the screenshots sit first in the DOM but read second. */
.shots-first { order: 2; }
.copy-second { order: 1; }

/* ── Card grid ───────────────────────────────────────────────────────────── */
.stack { max-width: var(--wrap); margin: 0 auto; display: flex; flex-direction: column; gap: 48px; }
.stack > h2 { margin: 0; font-family: var(--display); font-size: 40px; line-height: 1.1;
  font-weight: 600; letter-spacing: -0.374px; max-width: 20ch; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.card { background: var(--paper); border: 1px solid var(--hairline); border-radius: 18px;
  padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.card h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.28px; }
.card p { margin: 0; font-size: 15px; line-height: 1.47; color: var(--ink-72); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq-wrap { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.faq-wrap > h2 { margin: 0; font-family: var(--display); font-size: 40px; line-height: 1.1;
  font-weight: 600; letter-spacing: -0.374px; }
.faq-list { display: flex; flex-direction: column; gap: 28px; }
.faq-item { display: flex; flex-direction: column; gap: 8px; }
.faq-item h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.28px; }
.faq-item p { margin: 0; font-size: 17px; line-height: 1.47; color: var(--ink-72); }

/* ── Support ─────────────────────────────────────────────────────────────── */
.support-wrap { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column;
  align-items: center; gap: 20px; text-align: center; }
.support-wrap h2 { margin: 0; font-family: var(--display); font-size: 40px; line-height: 1.1;
  font-weight: 600; letter-spacing: -0.374px; }
.support-wrap p { margin: 0; font-size: 17px; line-height: 1.47; color: var(--on-dark-72); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.foot { background: #000; color: var(--on-dark-72); padding: 40px var(--gutter); }
.foot-in { max-width: var(--wrap); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 20px;
  justify-content: space-between; align-items: center; }
.foot span { font-size: 12px; }
.foot-links { display: flex; gap: 24px; }
.foot-links a { font-size: 12px; color: var(--on-dark-72); }
.foot-ogl { font-size: 10px; color: var(--on-dark-45); }

/* ── Privacy page ────────────────────────────────────────────────────────── */
.doc-head { background: var(--wash); padding: 80px var(--gutter) 64px; }
.doc-head-in { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.doc-head h1 { margin: 0; font-family: var(--display); font-size: 48px; line-height: 1.08;
  font-weight: 600; letter-spacing: -0.374px; }
.doc-head p { margin: 0; font-size: 19px; line-height: 1.47; color: var(--ink-72); }
.doc-head .doc-date { font-size: 12px; color: var(--ink-56); }
.doc { background: var(--paper); padding: 64px var(--gutter) 96px; }
.doc-in { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 44px; }
.doc section { display: flex; flex-direction: column; gap: 12px; }
.doc h2 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.28px; }
.doc p { margin: 0; font-size: 17px; line-height: 1.47; }
.doc strong { font-weight: 600; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .band-split { gap: 44px; }
  /* Stacked, the screenshots should follow their copy rather than lead it. */
  .shots-first { order: 2; }
  .copy-second { order: 1; }
}
@media (max-width: 720px) {
  .hero { padding: 64px var(--gutter) 56px; }
  .hero h1 { font-size: 42px; }
  .hero-lede { font-size: 20px; }
  .hero-shot { margin-top: 52px; }
  .band { padding: 64px var(--gutter); }
  .band-copy h2 { font-size: 32px; }
  .stack > h2, .faq-wrap > h2, .support-wrap h2 { font-size: 30px; }
  .doc-head { padding: 56px var(--gutter) 44px; }
  .doc-head h1 { font-size: 34px; }
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 11px; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 34px; }
  /* Four nav links plus the brand will not fit; let them scroll. */
  .nav-in { gap: 12px; }
  .nav-links { overflow-x: auto; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .shots { gap: 14px; }
}