/* LocateYu — marketing site
   Palette, type scale and spacing are lifted from the app's design tokens
   (mockup/tokens.css). Change a value here, mirror it there. */

:root {
  --cream:  #FDF4E8;
  --cream2: #F5EADC;
  --cream3: #E9DACB;

  --plum:      #31202D;
  --plum2:     #3D2937;
  --plum3:     #4A3242;
  --plum-deep: #261823;

  --text-primary:   #31202D;
  --text-secondary: #4A3242;
  --text-muted:     #6B5163;

  --dark-primary:   #FDF4E8;
  --dark-secondary: #E6CBD5;
  --dark-muted:     #D3B3C0;

  --wine-fill:    #A03A56;
  --wine-text:    #8E3E55;
  --wine-on-dark: #C97F8E;
  --wine-on:      #FFF4F7;
  --wine-border:  #E0BCC6;
  --wine-wash:    #F6E6EA;

  --mauve:       #D3B3C0;
  --mauve-light: #E6CBD5;
  --sage-fill:   #3F6B58;
  --sage-on-dark:#7FAE97;

  --line-hairline: #E4D6C6;
  --line-border:   #D2BFB0;
  --line-dark:     #4A3242;

  --font-body: "Newsreader", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --wrap: 1120px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ── base ─────────────────────────────────────────────── */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--wine-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }

h1, h2, h3 { margin: 0; font-weight: 400; }

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

.display {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.015em;
}

.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.kicker--dark { color: var(--mauve); }

.skip {
  position: absolute; left: -9999px;
  background: var(--plum); color: var(--cream);
  padding: 10px 16px; z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

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

/* ── brand lockup ─────────────────────────────────────── */

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.brand__mark { width: 34px; height: 34px; border-radius: 9px; }
.brand__word {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 25px;
  letter-spacing: -.02em;
  color: var(--text-primary);
}
.brand__word em { font-style: italic; color: var(--wine-text); }
.foot .brand__word { color: var(--cream); }
.foot .brand__word em { color: var(--mauve); }

/* ── buttons ──────────────────────────────────────────── */

.btn {
  display: inline-block;
  background: var(--wine-fill);
  color: var(--wine-on);
  border: 1px solid var(--wine-fill);
  border-radius: 999px;
  padding: 13px 26px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms var(--ease), transform 160ms var(--ease);
}
.btn:hover { background: #8E3049; transform: translateY(-1px); }
.btn--sm { padding: 9px 18px; font-size: 10.5px; }
.btn--full { width: 100%; margin-top: 8px; }
.btn--ghost {
  background: transparent;
  color: var(--mauve-light);
  border-color: rgba(211,179,192,.45);
}
.btn--ghost:hover { background: rgba(211,179,192,.10); color: var(--cream); }

/* ── header ───────────────────────────────────────────── */

.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253,244,232,.92);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--line-hairline);
}
.top__in { display: flex; align-items: center; gap: 24px; height: 68px; }
.top__right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.topnav { display: flex; gap: 26px; margin-left: 18px; }
.topnav a {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.topnav a:hover { color: var(--wine-text); border-bottom-color: var(--wine-border); }

/* language menu */
.lang { position: relative; }
.lang__btn {
  display: flex; align-items: center; gap: 7px;
  background: none;
  border: 1px solid var(--line-border);
  border-radius: 999px;
  padding: 8px 13px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--text-secondary);
  cursor: pointer;
}
.lang__btn:hover { border-color: var(--wine-border); color: var(--wine-text); }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  margin: 0; padding: 6px;
  list-style: none;
  min-width: 168px;
  background: var(--cream);
  border: 1px solid var(--line-border);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(49,32,45,.14);
}
.lang__menu button {
  display: block; width: 100%;
  text-align: left;
  background: none; border: 0;
  padding: 9px 12px;
  border-radius: 9px;
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--text-primary);
  cursor: pointer;
}
.lang__menu button:hover { background: var(--wine-wash); color: var(--wine-text); }
.lang__menu button[aria-selected="true"] { color: var(--wine-text); font-style: italic; }

/* ── phones ───────────────────────────────────────────── */

.phone {
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  background: var(--plum);
  border: 1px solid rgba(49,32,45,.14);
  box-shadow: 0 22px 48px -18px rgba(49,32,45,.42);
}
.phone img { border-radius: 25px; }
/* Bredden kom tidligere fra <img>-en inni. Hero-en har nå en DOM-animasjon
   uten egenbredde, så rammen må sette den selv — ellers kollapser den til null. */
.phone--lg { width: 320px; max-width: 100%; }
.sec--dark .phone { border-color: rgba(211,179,192,.22); }

/* ── hero ─────────────────────────────────────────────── */

.hero {
  background: var(--plum);
  color: var(--dark-primary);
  padding: clamp(56px, 8vw, 104px) 0 clamp(56px, 8vw, 96px);
  border-bottom: 1px solid var(--plum3);
}
.hero__in {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
/* To setninger, ikke tre ord: målet er at hver setning får sin egen linje.
   Var 82px/12ch, stilt inn for en 25-tegns overskrift — samme mål på en
   43–60-tegns overskrift ga fire og fem linjer. */
.hero__title {
  font-size: clamp(36px, 5.4vw, 62px);
  line-height: 1.06;
  margin: 0 0 22px;
  color: var(--cream);
  max-width: 19ch;
  text-wrap: balance;
}
.hero__lead {
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.62;
  color: var(--dark-secondary);
  max-width: 46ch;
  margin: 0 0 30px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__note { color: var(--mauve); margin: 26px 0 0; font-size: 10.5px; letter-spacing: .16em; }
.hero__phone { display: flex; justify-content: flex-end; }

/* ── sections ─────────────────────────────────────────── */

.sec { padding: clamp(64px, 9vw, 116px) 0; }
.sec--tint { background: var(--cream2); border-block: 1px solid var(--line-hairline); }
.sec--dark { background: var(--plum); color: var(--dark-primary); }
.sec--dark .sec__title { color: var(--cream); }

.sec__title {
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.08;
  margin: 0 0 18px;
  max-width: 20ch;
}
.sec__lead {
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--text-secondary);
  max-width: 54ch;
  margin: 0 0 48px;
}
.sec__lead--dark { color: var(--dark-secondary); }

/* ── three questions ──────────────────────────────────── */

.three-q {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-hairline);
  border: 1px solid var(--line-hairline);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 34px;
}
.q { background: var(--cream); padding: 32px 28px 38px; }
.q--own { background: var(--wine-wash); }
.q__name { color: var(--text-muted); margin: 0 0 16px; font-size: 10.5px; letter-spacing: .16em; }
.q--own .q__name { color: var(--wine-text); }
.q__q { font-size: clamp(21px, 2.2vw, 27px); line-height: 1.22; margin: 0; }
.q--own .q__q { color: var(--wine-text); }

.pull {
  margin: 42px 0 0;
  padding-left: 22px;
  border-left: 2px solid var(--wine-border);
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 62ch;
}

/* ── three cards ──────────────────────────────────────── */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.4vw, 44px); }
.card .phone { max-width: 100%; margin-bottom: 24px; }
.num {
  color: var(--wine-text);
  font-size: 11px;
  letter-spacing: .2em;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-hairline);
}
.card__h { font-size: clamp(22px, 2.1vw, 27px); line-height: 1.2; margin: 0 0 12px; }
.card__b { margin: 0; color: var(--text-secondary); font-size: 16px; }

/* ── what it isn't ────────────────────────────────────── */

.nots {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  overflow: hidden;
}
.nots li { background: var(--plum); padding: 34px 30px; }
.nots__h { font-size: clamp(21px, 2.1vw, 26px); color: var(--mauve-light); margin: 0 0 10px; }
.nots__b { margin: 0; color: var(--dark-secondary); font-size: 16px; }

/* ── flow ─────────────────────────────────────────────── */

.flow { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(32px, 5vw, 72px); margin-top: 34px; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li {
  display: grid;
  grid-template-columns: 42px 1fr;
  column-gap: 18px;
  padding: 22px 0;
  border-top: 1px solid var(--line-hairline);
}
.steps li:last-child { border-bottom: 1px solid var(--line-hairline); }
.steps__n {
  grid-row: span 2;
  color: var(--wine-text);
  font-size: 13px;
  letter-spacing: .1em;
  padding-top: 5px;
}
.steps__h { font-size: clamp(20px, 2vw, 25px); margin: 0 0 4px; }
.steps__b { margin: 0; color: var(--text-secondary); font-size: 16px; grid-column: 2; }

.reach {
  align-self: start;
  position: sticky; top: 96px;
  background: var(--cream2);
  border: 1px solid var(--line-hairline);
  border-radius: 16px;
  padding: 28px 26px;
}
.reach .kicker { margin-bottom: 18px; }
.reach__grid { margin: 0; }
.reach__grid > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-hairline);
}
.reach__grid dt { color: var(--text-secondary); font-size: 16px; }
.reach__grid dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 21px;
  color: var(--wine-text);
  letter-spacing: 0;
}
.reach__note { margin: 20px 0 0; font-size: 15px; color: var(--text-muted); }

/* ── rules ────────────────────────────────────────────── */

.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 40px); margin-top: 34px; }
.rule { padding-top: 18px; border-top: 2px solid var(--wine-border); }
.rule__h { font-size: 11px; letter-spacing: .17em; color: var(--wine-text); margin: 0 0 10px; }
.rule__b { margin: 0; color: var(--text-secondary); font-size: 16px; }

/* ── screenshot rail ──────────────────────────────────── */

.rail {
  margin-top: 44px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}
.rail__in {
  display: flex;
  gap: 22px;
  padding-inline: max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
  width: max-content;
}
.shot { margin: 0; width: 236px; scroll-snap-align: center; }
.shot img {
  border-radius: 20px;
  border: 1px solid rgba(211,179,192,.22);
  box-shadow: 0 20px 42px -20px rgba(0,0,0,.6);
}
.shot figcaption {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--dark-muted);
}
.rail__hint { color: var(--mauve); margin: 18px auto 0; font-size: 10px; letter-spacing: .2em; }

.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--plum3); border-radius: 999px; }
.rail::-webkit-scrollbar-track { background: transparent; }

/* To ledetekster etter hverandre er ett resonnement, ikke to bolker.
   Faller :has() bort, blir avstanden bare den vanlige 48px — kosmetisk, ikke ødelagt. */
.sec__lead:has(+ .sec__lead) { margin-bottom: 18px; }

/* ── a profile is a trail of places ───────────────────── */

.rail--life { margin-top: 38px; }
.life { margin: 0; width: 248px; scroll-snap-align: center; }
.life img {
  border-radius: 15px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 22%;
  filter: saturate(.88);
  border: 1px solid var(--line-hairline);
}
.life figcaption {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: .18em;
}
.trail__note { margin: 26px auto 0; font-size: 14.5px; color: var(--text-muted); }
.rail--life::-webkit-scrollbar-thumb { background: var(--line-border); }

/* ── a story ──────────────────────────────────────────── */

/* Leses som en artikkel, ikke som en markedsbolk: smal spalte, luftig linje-
   avstand. Sitatene låner appens egne former — spørsmålskortet og ledd-linja. */
.story { max-width: 680px; }
.story__title { text-wrap: balance; }
.story__stand {
  margin: 20px 0 0;
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.55;
  color: var(--text-secondary);
  font-style: italic;
}
.story__body { margin-top: 40px; }
.story__body > p {
  margin: 0 0 22px;
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--text-primary);
}
.story__body > p:last-child { margin-bottom: 0; }

/* spørsmålet, slik det ser ut i appen */
.story__ask {
  margin: 30px 0 !important;
  padding: 20px 24px;
  background: var(--wine-wash);
  border: 1px solid var(--wine-border);
  border-radius: 15px;
  color: var(--wine-text) !important;
  font-size: 19px !important;
  line-height: 1.5 !important;
}
/* ledd-linja, samme form som appen viser den i */
.story__chain {
  margin: -8px 0 26px !important;
  font-size: 10.5px !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sage-fill) !important;
}
.story__said {
  margin: 28px 0 !important;
  padding-left: 22px;
  border-left: 2px solid var(--mauve);
  font-size: 19px !important;
  line-height: 1.55 !important;
  font-style: italic;
}
/* Kodaen trer ut av fortellingen: jeg-formen slipper taket og en forteller
   ser på de to utenfra. Streken over gjør skiftet til et grep, ikke en glipp. */
.story__coda {
  margin: 40px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--line-border);
}
.story__coda p {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(21px, 2.6vw, 26px);
  line-height: 1.38;
  letter-spacing: -.012em;
  color: var(--text-primary);
  text-wrap: balance;
}
.story__coda p:last-child { margin-bottom: 0; }

/* Bilder i fortellingen. Ledebildet er liggende og går i full spaltebredde;
   de stående settes inn smalere, ellers spiser ett bilde en hel skjermhøyde. */
.story__fig { margin: 0; }
.story__fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line-hairline);
}
.story__fig--lead { margin: 34px 0 0; }

.story__body .story__fig { margin: 34px auto; width: 76%; }
.story__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 34px 0;
}
.story__pair .story__fig { margin: 0; width: 100%; }

.story__fiction {
  margin: 40px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line-hairline);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}



/* ── pilot ────────────────────────────────────────────── */

.pilot__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 76px); align-items: center; }
.pilot__lead { color: var(--dark-secondary); font-size: 18px; max-width: 46ch; margin: 0; }

.signup {
  background: var(--plum-deep);
  border: 1px solid var(--plum3);
  border-radius: 18px;
  padding: 30px 28px;
}
.signup__l { display: block; color: var(--mauve); font-size: 10px; letter-spacing: .18em; margin: 0 0 8px; }
.signup__l + .signup__i { margin-bottom: 20px; }
.signup__i {
  width: 100%;
  background: var(--plum2);
  border: 1px solid var(--plum3);
  border-radius: 12px;
  padding: 13px 15px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 17px;
}
.signup__i::placeholder { color: #8E7581; }
.signup__i:focus { border-color: var(--wine-on-dark); outline: none; }
.signup__msg { margin: 14px 0 0; font-size: 15.5px; color: var(--sage-on-dark); min-height: 1.4em; }
.signup__msg[data-state="error"] { color: var(--wine-on-dark); }
.signup__fine { margin: 16px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--dark-muted); }

/* ── footer ───────────────────────────────────────────── */

.foot { background: var(--plum-deep); color: var(--dark-muted); padding: 54px 0 46px; }
.foot__in { display: grid; gap: 20px; }
.foot__brand { display: flex; align-items: center; gap: 11px; }
.foot__brand img { width: 34px; height: 34px; border-radius: 9px; }
.foot__note { margin: 0; max-width: 62ch; font-size: 15px; color: var(--dark-secondary); }
.foot__meta { margin: 0; font-size: 10px; letter-spacing: .14em; color: var(--mauve); }
.foot__meta a { color: var(--mauve); }

/* ── reveal on scroll ─────────────────────────────────── */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ── responsive ───────────────────────────────────────── */

@media (max-width: 1040px) {
  .topnav { display: none; }
}

@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; }
  .hero__phone { justify-content: flex-start; margin-top: 8px; }
  .phone--lg { max-width: 270px; }
  .three-q, .cards, .rules { grid-template-columns: 1fr; }
  .rules { gap: 26px; }
  .nots { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .reach { position: static; }
  .pilot__in { grid-template-columns: 1fr; }
  .card .phone { max-width: 260px; }
}

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .wrap { padding-inline: 20px; }
  .top__in { height: 60px; gap: 12px; }
  .brand__word { font-size: 21px; }
  .brand__mark { width: 30px; height: 30px; }
  .q { padding: 26px 22px 30px; }
  .nots li { padding: 26px 22px; }
  .shot { width: 200px; }
  .life { width: 190px; }
  .rail__in { padding-inline: 20px; }
  .signup { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  /* på mobil er spalten allerede smal — smalere bilder blir bare små */
  .story__body .story__fig { width: 100%; }
  .story__pair { grid-template-columns: 1fr; gap: 18px; }
}

/* ── hero-animasjonen ─────────────────────────────────────
   Bygget i DOM framfor video: ingen nedlasting, skarpt i alle
   oppløsninger, og all tekst går gjennom i18n som resten av siden.
   Tilstandene er klasser på .pa som JS legger på etter tur. */

.pa {
  position: relative;
  aspect-ratio: 461 / 963;
  background: var(--cream);
  overflow: hidden;
}

/* Kartet skaleres selv. Arket under er ugjennomsiktig og ligger over,
   så oversvømmelsen nedover blir dekket; .pa klipper resten. */
.pa__map {
  position: absolute; left: 0; right: 0; top: 0;
  height: 46%;
  transform-origin: 62% 40%;
  transition: transform 1600ms var(--ease);
}
.pa.is-zoom .pa__map { transform: scale(2.1); }
.pa__map svg { width: 100%; height: 100%; display: block; }

.pa__pin {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--cream);
  transition: transform 1600ms var(--ease), opacity 300ms var(--ease);
}
.pa__pin--me { left: 44%; top: 54%; background: var(--sage-fill); }
.pa__pin--me::after {
  content: ''; position: absolute; inset: -7px;
  border-radius: 50%; border: 1.5px solid var(--sage-fill);
  animation: paPulse 2.6s var(--ease) infinite;
}
@keyframes paPulse {
  0%        { transform: scale(.55); opacity: .6; }
  70%, 100% { transform: scale(1.8);  opacity: 0;  }
}
.pa__pin--place { left: 62%; top: 40%; background: var(--wine-fill); }
.pa.is-armed .pa__pin--place { opacity: 0; transform: scale(.2); }
/* motskalering: nålene skal holde størrelsen når kartet zoomer */
.pa.is-zoom .pa__pin { transform: scale(.48); }
.pa.is-zoom .pa__pin--place { opacity: 1; transition-delay: 0ms, 800ms; }

.pa__here {
  position: absolute; left: 13px; top: 12px; margin: 0;
  background: rgba(253,244,232,.92);
  border: 1px solid var(--line-hairline);
  border-radius: 99px;
  padding: 4px 10px;
  font-size: 8px; letter-spacing: .14em;
  color: var(--text-secondary);
}

.pa__sheet {
  position: absolute; left: 0; right: 0; bottom: 0; top: 40%;
  display: flex; flex-direction: column;
  background: var(--cream);
  border-radius: 18px 18px 0 0;
  padding: 9px 14px 0;
  box-shadow: 0 -10px 22px rgba(49,32,45,.10);
}
.pa__grab { width: 34px; height: 4px; border-radius: 99px; background: var(--line-border); margin: 0 auto 15px; }

.pa__card {
  border-radius: 12px;
  padding: 11px 13px;
  margin-bottom: 13px;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.pa.is-armed .pa__card { opacity: 0; transform: translateY(9px); }
/* Fast minstehøyde på KORTET, ikke på teksten: da flytter ikke arket seg mens
   spørsmålet skrives, og de seks oversettelsene (35–58 tegn) får samme boks. */
.pa__card--ask {
  background: var(--wine-wash);
  border: 1px solid var(--wine-border);
  min-height: 80px;
  display: flex;
  align-items: center;
}
.pa__card--answer { background: #FFFCF8; border: 1px solid var(--line-hairline); }
.pa.is-ask    .pa__card--ask,
.pa.is-answer .pa__card--answer { opacity: 1; transform: none; }

.pa__ask {
  margin: 0;
  font-size: 12.5px; line-height: 1.42;
  color: var(--wine-text);
}
.pa__who { display: block; font-size: 8px; color: var(--wine-text); margin-bottom: 5px; }
.pa__card--answer p { margin: 0; font-size: 12.5px; line-height: 1.42; color: var(--text-primary); }

.pa__chain { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0 0 5px; padding: 0; }
.pa__chain li {
  font-family: var(--font-mono);
  font-size: 8px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sage-fill);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.pa.is-armed .pa__chain li { opacity: 0; transform: translateX(-5px); }
.pa__chain li + li::before { content: '→'; margin: 0 5px; color: var(--mauve); }
.pa.is-chain .pa__chain li { opacity: 1; transform: none; }
.pa.is-chain .pa__chain li:nth-child(2) { transition-delay: 280ms; }
.pa.is-chain .pa__chain li:nth-child(3) { transition-delay: 560ms; }
.pa.is-chain .pa__chain li:nth-child(4) { transition-delay: 840ms; }

.pa__degree {
  font-size: 7.5px; color: var(--text-muted);
  margin: 0 0 13px;
  transition: opacity 320ms var(--ease);
}
.pa.is-armed .pa__degree { opacity: 0; }
.pa.is-chain .pa__degree { opacity: 1; transition-delay: 980ms; }

.pa__nav {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line-hairline);
  padding: 10px 2px 11px;
  font-size: 7px; letter-spacing: .1em;
  color: var(--text-muted);
}
.pa__plus {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--wine-fill); color: var(--wine-on);
  display: grid; place-items: center;
  margin-top: -15px;
  font-family: var(--font-body); font-size: 16px; letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pa, .pa * { transition-duration: 1ms !important; animation: none !important; }
}

/* ── hero-animasjonen: skrive-arket ───────────────────────
   «Spør nettverket» legger seg over hele skjermen, spørsmålet skrives inn,
   og arket går ned igjen når det sendes. Det er den delen som viser at dette
   er noe DU gjør, ikke noe appen finner på. */

.pa__plus { position: relative; }
.pa.is-tap .pa__plus { animation: paPress 560ms var(--ease) 1; }
.pa.is-tap .pa__plus::after {
  content: ''; position: absolute; inset: -9px;
  border-radius: 50%; border: 2px solid var(--wine-fill);
  animation: paTap 620ms var(--ease) 1;
}
@keyframes paPress { 0%,100% { transform: scale(1); } 38% { transform: scale(.82); } }
@keyframes paTap   { 0% { transform: scale(.65); opacity: .75; } 100% { transform: scale(1.7); opacity: 0; } }

.pa__compose {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column;
  background: var(--cream);
  padding: 24px 16px 16px;
  transform: translateY(101%);
  transition: transform 520ms var(--ease);
}
.pa.is-compose .pa__compose { transform: none; }

.pa__compose-h { font-size: 9px; color: var(--text-muted); margin: 0 0 14px; }

.pa__field {
  border: 1px solid var(--wine-border);
  background: var(--wine-wash);
  border-radius: 12px;
  padding: 12px 13px;
  min-height: 96px;
  font-size: 12.5px; line-height: 1.42;
  color: var(--wine-text);
}
.pa__caret {
  display: inline-block; width: 1.5px; height: 1.05em;
  background: var(--wine-fill);
  vertical-align: -3px; margin-left: 1px;
  animation: paBlink 1.05s steps(1) infinite;
}
@keyframes paBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.pa:not(.is-compose) .pa__caret { opacity: 0; animation: none; }

.pa__scope { font-size: 7.5px; color: var(--sage-fill); margin: 13px 0 0; }

.pa__send {
  margin-top: auto;
  background: var(--wine-fill); color: var(--wine-on);
  border-radius: 999px; padding: 12px; text-align: center;
  font-size: 9.5px; letter-spacing: .16em;
  opacity: .4;
  transition: opacity 320ms var(--ease), transform 200ms var(--ease);
}
.pa.is-ready .pa__send { opacity: 1; }
.pa.is-sent  .pa__send { transform: scale(.94); }

/* Animasjonen ender på et EKTE skjermbilde — den stiliserte sekvensen forklarer,
   fotografiet beviser. `data-shot` gjør at det følger språkvalget.
   Uten JS settes aldri is-armed, og da er dette ALT man ser: appen, som den er. */
.pa__real {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 900ms var(--ease);
}
.pa.is-armed .pa__real { opacity: 0; }
.pa.is-armed.is-real .pa__real { opacity: 1; }

/* Sitatet er tre trinn: oppsettet, det som skjedde, og poenget. Streken til
   venstre tilhører HELE sitatet — tre egne rammer ga tre avbrutte streker. */
.pull p { margin: 0; }
.pull p + p { margin-top: 14px; }
.pull__tail { margin-top: 18px !important; color: var(--text-primary); font-weight: 500; }

/* ── nettverksgrafen ──────────────────────────────────────
   Generert av verktoy-nettverksgraf.py. Skalerer fritt siden det er SVG;
   navnene ligger som <text data-i18n>, så de oversettes som resten. */

.net__fig { margin: 38px 0 0; }
.net__fig svg { width: 100%; height: auto; display: block; }
.net__fig path { fill: none; }

.ng-init  { font-family: var(--font-mono); font-size: 27px; font-weight: 500; fill: var(--cream); text-anchor: middle; }
.ng-name  { font-family: var(--font-mono); font-size: 24px; letter-spacing: .06em; fill: #8C7884; text-anchor: middle; }
.ng-cname { font-family: var(--font-mono); font-size: 22px; letter-spacing: .06em; fill: var(--wine-text); text-anchor: middle; }
.ng-place { font-family: var(--font-mono); font-size: 23px; letter-spacing: .1em; text-transform: uppercase; fill: var(--plum); text-anchor: middle; }
.ng-you   { font-family: var(--font-mono); font-size: 29px; letter-spacing: .1em; fill: var(--cream); text-anchor: middle; }

.net__degrees {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.net__degrees li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.net__degrees b { display: block; font-weight: 400; color: var(--text-primary); font-size: 17.5px; margin-bottom: 3px; }
.net__swatch {
  position: absolute; left: 0; top: 8px;
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--cream);
}
.net__swatch--1 { background: var(--sage-fill); }
.net__swatch--2 { background: #CDB2BE; }
.net__swatch--3 { background: #DECED6; }

.net__trust { margin-top: 42px; }

@media (max-width: 700px) {
  .net__degrees { grid-template-columns: 1fr; gap: 18px; }
}

/* Honninggryte: må være i DOM-en og utfyllbar for roboter, men usynlig og
   uoppnåelig for mennesker og skjermlesere. display:none ville fått enkelte
   roboter til å hoppe over den. */
.signup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }