/* GEMS website, gemsapp.no. Plain CSS, no build step.
   Built 2 Oct 2026 from Liban's Figma page "Gems side". */

/* ---------- Fonts (self-hosted, so no visitor IP goes to Google) ---------- */

/* The design uses Agrandir. It is not free to use on a website, so this
   is Archivo, stretched wider to come close. To use Agrandir: put its
   licensed .woff2 in /fonts and add it first in --font-text below. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-wdth-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Anton: the app's heading font, used on the text pages. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/anton-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/anton-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-text: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-title: 'Anton', Impact, 'Arial Narrow', sans-serif;

  --white: #ffffff;
  --text: #f4f2ee;            /* the app's textPrimary */
  --page: #0a0a0b;            /* the app's surfaceDeep */
  --deep: #0b0a1d;            /* the bottom of the background image */
  --rule: rgba(255, 255, 255, 0.14);
  --link: #8e8bff;            /* readable violet from the background */
  --badge-edge: #a6a6a6;      /* Apple's badge outline */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--deep);
  color: var(--white);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ========================================================================
   HOME
   ======================================================================== */

/* THE STAGE. The Figma frame is 16:9. On a wide screen everything is
   placed on a 16:9 stage measured in --u (one hundredth of the stage
   width), so the page keeps the design's proportions on any screen.
   The stage is as wide as the window, or narrower when the window is
   short, so it always fits in height. The background fills the whole
   window either way. */
.home {
  --u: min(1vw, 1.7778vh);
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--deep) url(/images/background.webp) center top / cover no-repeat;
}
/* Film grain, as in the design. A small tile over the background: it
   also hides the colour banding a compressed gradient would show. */
.home::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url(/images/grain.png) repeat;
  background-size: 200px 200px;
  opacity: 0.55;
  pointer-events: none;
}
.stage {
  position: relative;
  width: calc(100 * var(--u));
  height: calc(56.25 * var(--u));
  margin: 0 auto;
  top: calc((100vh - 56.25 * var(--u)) / 2);
}

/* Left column, centred on 24% of the stage, like the design. */
.intro {
  position: absolute;
  left: calc(24.1 * var(--u));
  top: calc(2.9 * var(--u));
  transform: translateX(-50%);
  width: calc(40 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* The logo pair is centred as a column. The star image also holds the
   two small stars on its right, so centring the image would put the
   big star left of the middle. The nudge moves the big star itself onto
   the centre line, as in the design (5.9% of the image's width). */
.intro h1 { display: flex; flex-direction: column; align-items: center; }
.intro .mark { width: calc(13 * var(--u)); transform: translateX(5.9%); }
.intro .wordmark { width: calc(21.9 * var(--u)); margin-top: calc(2 * var(--u)); }
.intro h1 { margin: 0; }
.tagline {
  margin: calc(4.4 * var(--u)) 0 0;
  font-family: var(--font-text);
  font-stretch: 112%;
  font-weight: 400;
  font-size: calc(3.1 * var(--u));
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--white);
}

/* The App Store badge, drawn to Apple's layout. Until the app is live it
   is not a link; the line under it says so. */
.store {
  margin-top: calc(5.4 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  --badge-h: calc(3.6 * var(--u));
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--badge-h) * 0.16);
  height: var(--badge-h);
  padding: 0 calc(var(--badge-h) * 0.32) 0 calc(var(--badge-h) * 0.28);
  border: 1px solid var(--badge-edge);
  border-radius: calc(var(--badge-h) * 0.18);
  background: #000;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-ui);
}
.badge svg { height: calc(var(--badge-h) * 0.56); width: auto; fill: #fff; }
.badge .lines { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.badge .small { font-size: calc(var(--badge-h) * 0.2); font-weight: 500; letter-spacing: 0.02em; }
.badge .big { font-size: calc(var(--badge-h) * 0.42); font-weight: 500; letter-spacing: -0.01em; margin-top: calc(var(--badge-h) * 0.04); }
a.badge:hover { background: #111; }
a.badge:focus-visible, .foot a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.soon {
  margin: calc(1 * var(--u)) 0 0;
  font-family: var(--font-text);
  font-size: calc(1.05 * var(--u));
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The phone. It runs off the bottom of the window, like in the design. */
.phone {
  position: absolute;
  left: calc(51.2 * var(--u));
  top: calc(8.4 * var(--u));
  width: calc(36.2 * var(--u));
  filter: drop-shadow(0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(5, 3, 30, 0.45));
}

/* Bottom row: Privacy and Support on the left, Nomad on the right. */
.foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 calc(3.4 * var(--u)) calc(3.6 * var(--u));
  pointer-events: none;
}
.foot > * { pointer-events: auto; }
.foot nav { display: flex; gap: calc(2 * var(--u)); }
.foot nav a {
  font-family: var(--font-text);
  font-size: max(13px, calc(0.95 * var(--u)));
  font-weight: 500;
  text-decoration: none;
  opacity: 0.85;
}
.foot nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.foot .nomad img { width: calc(9 * var(--u)); min-width: 90px; }

/* ---------- Phones and tall windows: one column ---------- */
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  .home {
    --u: 1vw;
    /* The landscape image covers the first screen; below it the page
       fades into the image's own darkest colour, so there is no edge. */
    background:
      linear-gradient(to bottom, rgba(11, 10, 29, 0) 55%, var(--deep) 100%) center top / 100% 100vh no-repeat,
      url(/images/background-small.webp) 30% top / auto 100vh no-repeat,
      var(--deep);
    display: flex;
    flex-direction: column;
  }
  .stage {
    position: static;
    width: auto;
    height: auto;
    top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(48px, 12vw, 96px) 20px 0;
  }
  .intro {
    position: static;
    transform: none;
    width: 100%;
    max-width: 560px;
  }
  .intro .mark { width: clamp(96px, 26vw, 170px); }
  .intro .wordmark { width: clamp(190px, 52vw, 330px); margin-top: clamp(14px, 4vw, 26px); }
  .tagline { font-size: clamp(22px, 6.4vw, 40px); margin-top: clamp(22px, 6vw, 40px); }
  .store { margin-top: clamp(28px, 8vw, 48px); --badge-h: clamp(44px, 12vw, 58px); }
  .soon { font-size: 12px; margin-top: 10px; }
  .phone {
    position: static;
    width: min(88vw, 480px);
    margin: clamp(40px, 10vw, 64px) 0 0 4vw;
    /* The bottom third runs out of view behind the footer row. */
    margin-bottom: max(-46vw, -250px);
  }
  .foot {
    position: relative;
    z-index: 1;
    padding: 28px 24px max(28px, env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, rgba(11, 10, 29, 0), var(--deep) 60%);
    align-items: center;
  }
  .foot nav { gap: 20px; }
  .foot nav a { font-size: 14px; }
  .foot .nomad img { width: 84px; min-width: 0; }
}

/* ========================================================================
   MOTION (front page). Added 2 Oct 2026.

   On load, each piece moves into its place, top to bottom: the star,
   the wordmark, the line, the badge, then the phone slides in from the
   right. When the phone has landed it starts to float, slowly, for as
   long as the page is open.

   CSS only: the site has no JavaScript (the CSP forbids it). The
   animations move with `translate`, `scale` and `rotate`, which stack
   on top of `transform`, so the star keeps its centring nudge.

   The phone has two animations on the same property. `phone-in` holds
   its end state (fill: both); `phone-float` starts when it ends and
   takes over from the same position, so there is no jump.
   ======================================================================== */

@keyframes star-in {
  from { opacity: 0; scale: 0.6; rotate: -25deg; }
  to   { opacity: 1; scale: 1;   rotate: 0deg; }
}
@keyframes rise-in {
  from { opacity: 0; translate: 0 calc(2.2 * var(--u)); filter: blur(6px); }
  to   { opacity: 1; translate: 0 0;                     filter: blur(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes phone-in {
  from { opacity: 0; translate: calc(10 * var(--u)) calc(6 * var(--u)); rotate: 7deg; }
  to   { opacity: 1; translate: 0 0;                                    rotate: 0deg; }
}
@keyframes phone-float {
  0%   { translate: 0 0;                          rotate: 0deg; }
  50%  { translate: 0 calc(-1.3 * var(--u));      rotate: -0.6deg; }
  100% { translate: 0 0;                          rotate: 0deg; }
}

@media (prefers-reduced-motion: no-preference) {
  .home .mark     { animation: star-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both; }
  .home .wordmark { animation: rise-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both; }
  .home .tagline  { animation: rise-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both; }
  .home .store    { animation: rise-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.7s both; }
  .home .phone {
    animation:
      phone-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both,
      phone-float 6s ease-in-out 1.65s infinite;
  }
  .home .foot     { animation: fade-in 0.8s ease 1.1s both; }
}

/* ========================================================================
   TEXT PAGES (privacy, support)
   ======================================================================== */

.page {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 120% 420px at 50% -120px, rgba(84, 76, 222, 0.55), rgba(84, 76, 222, 0) 70%),
    var(--page);
  color: var(--text);
}
.page header {
  max-width: 44rem;
  margin: 0 auto;
  padding: 28px 22px 0;
}
.page header a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.page header .mark { width: 34px; }
.page header .wordmark { width: 92px; }
.page main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 56px 22px 40px;
  font: 17px/1.65 var(--font-ui);
}
.page h1 {
  font-family: var(--font-title);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(38px, 8vw, 56px);
  line-height: 1.05;
  margin: 0 0 10px;
  color: var(--white);
}
.page .updated { opacity: 0.8; font-size: 15px; margin: 0 0 40px; }
.page h2 {
  font-family: var(--font-title);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 24px;
  line-height: 1.2;
  margin: 44px 0 12px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  color: var(--white);
}
.page h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 28px; }
.page p, .page ul { margin: 0 0 16px; }
.page ul { padding-left: 1.2rem; }
.page li { margin-bottom: 6px; }
.page strong { font-weight: 650; color: var(--white); }
.page main a { color: var(--link); text-underline-offset: 3px; }
.page code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}
.page .scroll { overflow-x: auto; margin: 0 0 20px; -webkit-overflow-scrolling: touch; }
.page table { border-collapse: collapse; width: 100%; min-width: 26rem; font-size: 15px; }
.page th, .page td {
  text-align: left;
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.page th { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.page .contact {
  display: inline-block;
  margin-top: 4px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--white);
  color: #000 !important;
  font-weight: 700;
  text-decoration: none;
}
.page footer {
  max-width: 44rem;
  margin: 0 auto;
  padding: 28px 22px 48px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  font-size: 14px;
}
.page footer a { text-decoration: none; opacity: 0.9; }
.page footer a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.page footer .nomad { margin-left: auto; }
.page footer .nomad img { width: 72px; }