@charset "UTF-8";

/* Synnk Collective AB — synnk.net
   Palette and layout follow the "Coming soon" mockup: a cream sheet, two
   purples, one centred column, and full-bleed rules separating the bands.
   No webfonts, no third-party requests: everything here is served from our own
   origin, which keeps the page fast and avoids shipping visitor IPs to a
   font/analytics CDN. */

:root {
  /* The three colours the mockup uses, and nothing else. Deep plum carries
     every word; the brighter violet draws the rules, the links and the frame
     around the waitlist mark. Both clear WCAG AA on the cream ground
     (6.4:1 and 4.7:1), so the page never needs a fourth ink. */
  --cream: #f7f3e9;
  --plum: #8f1eae;
  --violet: #9440dd;

  --bg: var(--cream);
  --fg: var(--plum);
  --muted: var(--violet);
  --rule: var(--violet);

  /* The mockup is set in Inter, with the usual system fallbacks. Nothing is
     downloaded: if a visitor has Inter, they get it; if not, their platform UI
     font stands in and the layout is unchanged. */
  --font: Inter, "Inter Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    monospace;

  /* One heading size for the whole sheet — in the mockup the hero and both
     section headings are set at exactly the same size. */
  --display: clamp(2.125rem, 5.6vw, 3.5rem);

  --measure: 62rem;
  --pad: clamp(1.25rem, 5vw, 2.5rem);
  --band: clamp(3.5rem, 9vw, 6.5rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* --- Language switching -------------------------------------------------
   Both languages ship in the HTML so the page is readable with JavaScript off
   (English is the default). The toggle only ever *hides* the inactive
   language — it never sets `display` on the visible one, so elements keep
   whatever layout their own rules give them (grid, flex, inline, …). */
html[data-lang="en"] [lang="sv"],
html[data-lang="sv"] [lang="en"] {
  display: none !important;
}

/* --- Typography --------------------------------------------------------- */

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: var(--display);
}

h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
}

h3 {
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1rem;
  text-wrap: pretty;
}

a {
  color: var(--violet);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--plum);
}

:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 2px;
}

.accent {
  color: var(--violet);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.25rem;
}

.lede {
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
  line-height: 1.55;
  max-width: 46ch;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--plum);
  color: var(--cream);
  padding: 0.75rem 1rem;
  z-index: 10;
}

.skip-link:focus {
  left: 0;
}

/* --- Shell --------------------------------------------------------------
   Sections run the full width so their top border reaches both edges of the
   window, the way the rules do on the mockup; only `.wrap` is constrained. */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--pad);
}

section {
  padding-block: var(--band);
}

section + section {
  border-top: 2px solid var(--rule);
}

/* --- Header -------------------------------------------------------------
   The mockup has no header, so this one stays out of the way: cream, no
   border, no blur. The first rule a visitor sees is the one under the hero. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--cream);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  min-height: 4.25rem;
  padding-block: 0.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--plum);
  text-decoration: none;
}

.brand svg {
  display: block;
  width: 6.5rem;
  height: auto;
}

.brand:hover {
  color: var(--violet);
}

/* Language toggle */
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--violet);
  border-radius: 999px;
  overflow: hidden;
}

.lang-toggle button {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--violet);
  padding: 0.375rem 0.7rem;
  cursor: pointer;
  min-height: 2rem;
}

.lang-toggle button[aria-pressed="true"] {
  background: var(--plum);
  color: var(--cream);
}

.lang-toggle button:hover:not([aria-pressed="true"]) {
  color: var(--plum);
}

/* --- The one-sheet landing page ------------------------------------------
   Everything on the front page is centred on a single column, as on the
   mockup. Scoped to `.sheet` so the legal and support pages, which are
   long-form reading, keep their ragged-right prose. */

.sheet {
  text-align: center;
}

.sheet h1,
.sheet h2 {
  font-size: var(--display);
  max-width: 20ch;
  margin-inline: auto;
}

.sheet p {
  max-width: 64ch;
  margin-inline: auto;
}

.sheet h2 + p,
.sheet .lede {
  margin-top: 1.75rem;
}

.sheet .lede {
  max-width: 56ch;
}

.hero {
  padding-block: clamp(3rem, 7vw, 5rem) var(--band);
}

/* The framed square from the mockup, now holding the waitlist QR. The code's
   own SVG carries four modules of quiet zone, so it can sit flush inside the
   frame and still scan. Nothing here inverts on hover: an inverted QR is not
   readable by most scanners, and someone may well be pointing a phone at the
   screen while their cursor rests on it. */
.waitlist-mark {
  display: grid;
  place-items: center;
  width: clamp(11rem, 24vw, 14rem);
  aspect-ratio: 1;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  border: 2px solid var(--violet);
  color: var(--plum);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.waitlist-mark:hover,
.waitlist-mark:focus-visible {
  border-color: var(--plum);
}

.qr {
  display: block;
  width: 100%;
  height: auto;
  /* Modules are sharp-edged squares; smoothing them costs scan reliability at
     the sizes this is drawn on screen. */
  shape-rendering: crispEdges;
}

.waitlist-cta {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Where the app actually stands, said plainly. The site is the public face of
   a company whose app has not shipped, so this line stays on the page. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 2rem;
  padding: 0.5rem 0.9375rem 0.5rem 0.8125rem;
  border: 1px solid var(--violet);
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--muted);
}

.status::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--violet);
  flex: none;
}

.hero-note {
  margin: 1rem auto 0;
  font-size: 0.9375rem;
  color: var(--muted);
  max-width: 46ch;
}

.hero-note a {
  font-weight: 500;
}

/* --- The waitlist dock ---------------------------------------------------
   The hero's code kept within reach after it has scrolled away. Hidden until
   site.js adds `.is-visible`, so it never sits on top of the hero while the
   real code is still on screen — and never appears at all without JavaScript,
   which costs nothing, because the hero still has the code. */

.qr-dock {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 6;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.875rem;
  max-width: calc(100vw - 2rem);
  background: var(--cream);
  border: 2px solid var(--violet);
  /* The page is flat everywhere else, but this panel floats over body copy and
     has to read as being in front of it. */
  box-shadow: 0 12px 32px -14px rgba(143, 30, 174, 0.45);

  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}

.qr-dock.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.qr-dock-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--plum);
  text-decoration: none;
}

.qr-dock-link .qr {
  width: 5.5rem;
  flex: none;
}

.qr-dock-text {
  display: grid;
  gap: 0.125rem;
  text-align: left;
  max-width: 9rem;
}

.qr-dock-text strong {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
}

.qr-dock-hint {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet);
}

.qr-dock-close {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--violet);
  padding: 0.125rem 0.25rem;
  margin: -0.25rem -0.25rem 0 0;
  cursor: pointer;
}

.qr-dock-close:hover {
  color: var(--plum);
}

/* On a phone the code is dead weight — nobody can scan the screen they are
   holding — so the dock collapses to a plain full-width button. */
@media (max-width: 40rem) {
  .qr-dock {
    left: 1rem;
    right: 1rem;
    max-width: none;
    align-items: center;
    padding: 0.75rem 0.875rem;
  }

  .qr-dock-link {
    flex: 1;
  }

  .qr-dock-link .qr,
  .qr-dock-hint {
    display: none;
  }

  .qr-dock-text {
    max-width: none;
  }
}

/* Row of links separated by middots — used on the 404 page. */
.inline-links {
  margin-top: 2rem;
  color: var(--muted);
}

.inline-links a {
  font-weight: 500;
  white-space: nowrap;
}

/* --- Contact ------------------------------------------------------------
   Company registration details live here because the site is what Apple and
   D&B check against. They read as a list on the prose pages and as a centred
   row of columns on the sheet. */

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

/* A wrapping row rather than a grid: the postal address is four lines tall and
   in a grid it would set the height of every cell beside it, leaving the two
   short entries below stranded under a band of empty cream. */
.sheet .contact-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem 3rem;
  margin-top: 2.5rem;
}

.sheet .contact-list > div {
  min-width: 10rem;
}

.contact-list dt,
.contact-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.contact-list dd {
  margin: 0;
  font-size: 1.0625rem;
}

.contact-list a {
  font-weight: 500;
}

address {
  font-style: normal;
}

/* --- Long-form legal/support pages -------------------------------------- */

.prose {
  max-width: 44rem;
}

.prose h2 {
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  margin-top: 3rem;
  margin-bottom: 0.875rem;
}

.prose h2:first-of-type {
  margin-top: 2rem;
}

.prose h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.prose ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.prose li {
  margin-bottom: 0.5rem;
}

.prose li::marker {
  color: var(--violet);
}

.page-head {
  padding-block: clamp(3rem, 7vw, 4.5rem) 0;
}

.updated {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 1.25rem;
}

.note {
  border-left: 3px solid var(--violet);
  padding: 0.25rem 0 0.25rem 1.125rem;
  margin: 1.75rem 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* --- Footer -------------------------------------------------------------
   Same cream ground as the rest of the sheet, closed off by the same rule
   that separates the bands above it. */

.site-footer {
  border-top: 2px solid var(--rule);
  padding-block: clamp(3rem, 6vw, 4rem);
  color: var(--fg);
}

.sheet + .site-footer {
  text-align: center;
}

.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  justify-items: center;
}

.footer-grid h2 {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-grid li {
  margin-bottom: 0.375rem;
}

.footer-tagline {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--violet);
  font-size: 0.875rem;
  color: var(--muted);
}

.footer-bottom p {
  margin: 0;
}

/* Footer variant for the legal/support pages, which don't need the full grid. */
.footer-slim {
  margin: 0;
  padding: 0;
  border: 0;
}