/* FollowBell — one stylesheet for the whole site.
   Two page shapes share it: the landing page and the two guides.
   Brand tokens come from the app: the night gradient, the pink, Schibsted Grotesk. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fonts/schibsted-grotesk.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* The night is the same in both themes: it is the app. */
  --night-1: #3a2856;
  --night-2: #241b33;
  --night-3: #17111c;
  --pink: #ff4fa3;
  --violet: #a855f7;

  --bg: #fbf9fd;
  --panel: #ffffff;
  --panel-2: #f4f0f8;
  --line: #eae4f1;
  --tx: #1a1322;
  --tx-2: #5f566e;
  --tx-3: #6d6480;
  --accent: #c8156f;
  --accent-soft: #fdeff7;
  --shadow: 0 20px 45px -28px rgba(26, 15, 40, 0.45);
  --radius: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17111c;
    --panel: #201829;
    --panel-2: #271e33;
    --line: #322843;
    --tx: #f7f3fa;
    --tx-2: #b4adc2;
    --tx-3: #8d8599;
    --accent: #ff4fa3;
    --accent-soft: #2a1730;
    --shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.8);
  }
}


* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  position: relative;
  background: var(--bg);
  color: var(--tx);
  font-family: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* One grain over everything, rather than a textured hero above a smooth page:
   a texture that stops at a section edge draws that edge. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

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

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: 20px;
}

.skip {
  position: absolute;
  left: -9999px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 10;
  background: var(--panel);
  padding: 10px 16px;
  border-radius: 10px;
}

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

/* ---------- header ---------- */

.site-head {
  position: relative;
  z-index: 2;
}
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-block: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-decoration: none;
  font-size: 19px;
}
.brand img { width: 38px; height: 38px; border-radius: 11px; }
.site-nav {
  display: flex;
  align-items: center;
  gap: 8px 22px;
  font-size: 15px;
}
.site-nav a { color: var(--tx-2); text-decoration: none; }
.site-nav a:hover { color: var(--tx); }
.site-head--night { background: var(--night-3); color: #f7f3fa; }
.site-head--night .site-nav a { color: #c3b8cf; }
.site-head--night .site-nav a:hover { color: #fff; }


/* ---------- buttons ---------- */

.badge { display: inline-block; line-height: 0; }
.hero-actions .badge img { margin-left: -10px; }
.badge img { height: 64px; width: auto; }
.badge:hover { filter: brightness(1.08); }
.site-nav .badge img { height: 46px; }
.guide-cta .badge img { height: 56px; }

/* ---------- hero (always night, in both themes) ---------- */

.hero {
  background:
    radial-gradient(60% 50% at 10% 62%, rgba(255, 79, 163, 0.20) 0%, transparent 70%),
    radial-gradient(115% 80% at 50% -15%, #6a3f8f 0%, transparent 62%),
    linear-gradient(168deg, var(--night-1) 0%, var(--night-2) 55%, var(--night-3) 100%);
  color: #f7f3fa;
  padding-block: clamp(36px, 4vw, 60px);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(28px, 4vw, 64px);
}
.hero-copy { grid-column: 1; grid-row: 1; align-self: end; }
.eyebrow {
  display: inline-block;
  color: #ffb3d7;
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
}
.hero h1 {
  font-size: clamp(36px, 6.2vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 800;
  margin: 18px 0 0;
  max-width: 11ch;
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  display: block;
  color: var(--pink);
  background: linear-gradient(94deg, #ff4fa3 0%, #ff77c2 45%, #c084fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p strong { color: #ffffff; font-weight: 600; }
.hero p {
  color: #d9cfe4;
  font-size: clamp(16px, 1.55vw, 18px);
  max-width: 40ch;
  margin: 18px 0 0;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 26px;
}


.phone {
  width: clamp(280px, 25vw, 352px);
  flex: none;
  padding: 4px;
  border-radius: 44px;
  background: #0b0810;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 34px 70px -30px rgba(8, 4, 14, 0.95), inset 0 0 0 1px rgba(0, 0, 0, 0.8);
}
/* The status-bar strip and the rounded corners are in the image itself (see
   make-assets.sh); this is the glass. It has a bottom: the capture is longer than
   any screen, so the list is cut by the edge of the device, the way a phone in a
   hand cuts it, and not by a fade. */
.phone-screen {
  border-radius: 40px;
  overflow: hidden;
  max-height: 580px;
}
.phone-screen img { border-radius: 0; }


.hero-claims {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  list-style: none;
  margin: 28px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  font-size: 14.5px;
  color: #cdc2d8;
}
.hero-claims li { display: flex; align-items: center; gap: 9px; }
.hero-claims svg { width: 18px; height: 18px; color: var(--pink); flex: none; }

.hero-visual {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  display: flex;
  justify-content: flex-end;
}

/* ---------- the four questions ---------- */

/* Straight from screenshot 02 of the listing, which is the only copy in the whole
   file that says what this app is actually for. The night continues from the hero
   so the two read as one opening. */
.asks {
  background:
    radial-gradient(70% 80% at 88% 40%, rgba(255, 79, 163, 0.12) 0%, transparent 65%),
    var(--night-3);
  color: #f7f3fa;
  padding-block: clamp(44px, 6vw, 82px);
}
.eyebrow--plain { color: #b9abc7; }
.ask-list {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 34px) clamp(28px, 5vw, 72px);
}
.ask-list li {
  font-size: clamp(26px, 3.1vw, 42px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.08;
  text-wrap: balance;
}
.ask-list em { font-style: normal; color: var(--pink); display: block; }
.ask-note {
  margin: clamp(28px, 4vw, 44px) 0 0;
  color: #b3a6c1;
  font-size: 15px;
}

/* ---------- alternating features ---------- */

.feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  padding-block: clamp(30px, 3.4vw, 46px);
}
.feature--flip .feature-text { order: 2; }
.feature-text { min-width: 0; max-width: 30rem; }
.kicker {
  font-size: 13.5px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
}
.feature h2 {
  font-size: clamp(27px, 3.4vw, 40px);
  line-height: 1.06;
  letter-spacing: -0.04em;
  font-weight: 800;
  margin: 14px 0 16px;
  text-wrap: balance;
}
.feature p { color: var(--tx-2); max-width: 44ch; margin: 0; }
.feature p + p { margin-top: 12px; }
.aside { font-size: 14.5px; color: var(--tx-3); }
.aside a { color: var(--accent); }
/* 🔴 A zoom on the part that proves the sentence beside it, not a device. The whole
   phone was a 260 px thumbnail: the counts and « Followed, then unfollowed » are the
   argument, and at that size neither could be read. */
.detail {
  margin: 0;
  width: 100%;
  max-width: 30rem;
  justify-self: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* ---------- questions ---------- */

.questions { padding-block: clamp(48px, 6vw, 84px); }
.questions h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: -0.035em;
  margin: 0 0 8px;
}
.questions > .wrap > p { color: var(--tx-2); margin: 0 0 30px; max-width: 54ch; }
/* Seven answers used to be seven paragraphs on screen at once. Closed, they are
   seven lines you can read in three seconds; the text stays in the page, so the
   crawlers and the schema still see every answer. */
.qa {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.qa details + details { border-top: 1px solid var(--line); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 22px;
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--tx-3);
  border-bottom: 2px solid var(--tx-3);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.18s ease;
}
.qa details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.qa summary:hover { background: var(--panel-2); }
.qa h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.qa details > p { color: var(--tx-2); margin: 0 22px 8px; max-width: 74ch; font-size: 16px; }
.qa details > p:last-child { margin-bottom: 20px; }
.qa a { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .qa summary::after { transition: none; }
}

/* ---------- closing band ---------- */

.close-band {
  text-align: center;
  padding-block: clamp(52px, 6vw, 88px);
  background:
    radial-gradient(90% 130% at 50% 115%, rgba(255, 79, 163, 0.3) 0%, transparent 62%),
    linear-gradient(0deg, var(--night-2), var(--night-3));
  color: #f7f3fa;
}
.close-band h2 {
  font-size: clamp(28px, 4.4vw, 48px);
  letter-spacing: -0.04em;
  font-weight: 800;
  margin: 0 0 24px;
  text-wrap: balance;
}
.close-band p { color: #b3a6c1; font-size: 14px; margin: 14px 0 0; }

/* ---------- footer ---------- */

.site-foot {
  border-top: 1px solid var(--line);
  padding-block: 36px 52px;
  font-size: 14.5px;
  color: var(--tx-2);
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 28px 40px;
  align-items: start;
}
.foot-grid > div:first-child p { margin: 14px 0 0; max-width: 30ch; }
.site-foot h3 {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-3);
  margin: 0 0 10px;
}
.site-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.site-foot a { color: var(--tx-2); text-decoration: none; }
.site-foot a:hover { color: var(--accent); }
.foot-note {
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--tx-3);
  font-size: 13.5px;
}

/* ---------- guides ---------- */

.guide-head {
  background: linear-gradient(170deg, var(--night-1), var(--night-3));
  color: #f7f3fa;
  padding-block: 46px 52px;
}
.guide-head .wrap { max-width: 68ch; }
.crumb { font-size: 13.5px; color: #b9abc7; }
.crumb a { color: #b9abc7; text-decoration: none; }
.crumb a:hover { color: #fff; }
.guide-head h1 {
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.07;
  letter-spacing: -0.038em;
  font-weight: 800;
  margin: 14px 0 0;
  max-width: 20ch;
  text-wrap: balance;
}
.guide-head .stamp { color: #a89ab6; font-size: 13.5px; margin: 16px 0 0; }

.answer {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 26px;
  margin: 0 0 34px;
  box-shadow: var(--shadow);
}
.answer p { margin: 0; font-size: 18px; }
.answer p + p { margin-top: 12px; }

.prose {
  max-width: 68ch;
  padding-block: clamp(36px, 5vw, 56px) 20px;
}
.prose h2 {
  font-size: clamp(23px, 2.9vw, 30px);
  letter-spacing: -0.032em;
  line-height: 1.15;
  margin: 46px 0 14px;
  text-wrap: balance;
}
.prose h3 {
  font-size: 19px;
  letter-spacing: -0.02em;
  margin: 32px 0 10px;
}
.prose p { color: var(--tx-2); margin: 0 0 16px; }
.prose strong { color: var(--tx); font-weight: 600; }
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose ul { color: var(--tx-2); padding-left: 20px; margin: 0 0 16px; }
.prose li { margin-bottom: 8px; }
.prose figure { margin: 30px 0; }
.prose figure .phone { width: 272px; margin-inline: auto; }
.prose figcaption { color: var(--tx-3); font-size: 14px; margin-top: 10px; }

.table-scroll { overflow-x: auto; margin: 0 0 20px; }
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15.5px;
  font-variant-numeric: tabular-nums;
}
th, td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
th { font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tx-3); font-weight: 600; }
td b { color: var(--accent); }

.pull {
  background: var(--panel-2);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin: 28px 0;
}
.pull p:last-child { margin-bottom: 0; }

.guide-cta {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  margin: 40px 0 10px;
}
.guide-cta div { flex: 1; min-width: 240px; }
.guide-cta h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.03em; }
.guide-cta p { margin: 0; color: var(--tx-2); font-size: 15.5px; }

.related { padding-block: 10px clamp(40px, 5vw, 64px); }
.related h2 { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx-3); margin: 0 0 14px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.related a {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  text-decoration: none;
  background: var(--panel);
}
.related a:hover { border-color: var(--accent); }
.related b { display: block; font-size: 17px; letter-spacing: -0.02em; margin-bottom: 5px; }
.related span { color: var(--tx-2); font-size: 14.5px; }

/* ---------- narrow ---------- */

@media (max-width: 900px) {
  /* Below this the phone and the alerts cannot share a row, so the hero becomes
     one column and the cards go back under the device. */
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: 26px; }
  .hero h1, .hero p { max-width: none; }
  .hero-copy { grid-row: 1; }
  .hero-visual { grid-column: 1; grid-row: 2; justify-content: center; align-self: auto; }
  .hero-claims { grid-column: 1; grid-row: 3; margin-top: 0; padding-top: 22px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .hero-claims { flex-direction: column; gap: 12px; }
  /* The header is the one row that cannot wrap, so everything in it gives a
     little rather than pushing the page wider than the screen. */
  .site-head .wrap { gap: 10px; }
  .brand { font-size: 16px; }
  .brand img { width: 26px; height: 26px; }
  .site-nav { gap: 8px; }
  .site-nav .badge img { height: 40px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .ask-list { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the phone is followed by the cards, so it keeps the short fade. */
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature--flip .feature-text { order: 0; }
  .feature .detail { max-width: none; }
  .site-nav .hide-sm { display: none; }
}