/* Bert's site styles. Colours only through the variables in tokens.css. */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: -apple-system, system-ui, Roboto, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
}

h1, h2, h3 { line-height: 1.15; margin: 0 0 var(--space-4); }
h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); }
p { margin: 0 0 var(--space-4); }
ul { list-style: none; margin: 0; padding: 0; }

a { color: var(--accent); }
.muted { color: var(--on-surface-variant); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 10;
  padding: var(--space-3) var(--space-4);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-full);
}
.skip-link:focus { top: var(--space-2); }

.wrap, .bar, .footer-grid, .footer-meta {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

/* Header */
.site-header { background: var(--surface); border-bottom: 1px solid var(--outline); }
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  min-height: 72px;
  position: relative;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.wordmark img { display: block; height: 28px; width: auto; }
.nav-wide { display: none; }
.nav-wide ul { display: flex; gap: var(--space-2); }
.nav-wide a, .nav-menu a, .site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--space-3);
  color: var(--on-surface);
  text-decoration: none;
}
.nav-wide a:hover, .nav-menu a:hover, .site-footer li a:hover { color: var(--accent); }

.nav-menu { margin-left: auto; }
.nav-menu summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 1px solid var(--outline-strong);
  border-radius: var(--radius-full);
  cursor: pointer;
  list-style: none;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu ul {
  position: absolute;
  top: 100%;
  left: var(--space-4);
  right: var(--space-4);
  z-index: 5;
  margin-top: calc(var(--space-2) * -1);
  padding: var(--space-2);
  background: var(--surface-row);
  border: 1px solid var(--outline);
  border-radius: var(--radius-lg);
}
.site-header .header-cta { display: none; }

@media (min-width: 900px) {
  .nav-wide { display: block; margin-left: auto; }
  .nav-menu { display: none; }
  .site-header .header-cta { display: inline-flex; }
}

/* Buttons */
.primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-6);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-md);
  background: var(--on-surface);
  color: var(--surface);
  font-weight: 700;
  text-decoration: none;
}
.stores { display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (prefers-reduced-motion: no-preference) {
  .primary-action, .badge, a { transition: background-color var(--motion-short), color var(--motion-short); }
}

/* Bands */
.band { padding: var(--space-8) 0; background: var(--surface); }
.band:nth-of-type(even) { background: var(--surface-grouped); }
.hero { padding: var(--space-8) 0; }

/* Components named like the apps' */
.group-card { background: var(--surface-grouped); border: 1px solid var(--outline); border-radius: var(--radius-lg); padding: var(--space-4); }
.band .group-card, .band:nth-of-type(even) .group-card { background: var(--surface-row); }
.row { background: var(--surface-row); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.bert-says { display: flex; align-items: flex-end; gap: var(--space-3); }
.bert-says img { flex: none; display: block; }
.bert-bubble .label { margin: 0 0 var(--space-1); font-size: 0.875rem; font-weight: 700; }
.bert-bubble p:last-child { margin: 0; }
.bert-bubble { background: var(--accent-container); color: var(--on-accent-container); border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5); }
.chip { display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--accent-container); color: var(--on-accent-container); }
.private-badge { display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--private-container); color: var(--private); }
.banner { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--accent-container); color: var(--on-accent-container); font-weight: 700; }

/* Waitlist form */
.waitlist { max-width: 560px; }
.waitlist label { display: block; margin-bottom: var(--space-2); font-weight: 700; }
.field-row { display: flex; flex-direction: column; gap: var(--space-3); }
.waitlist input[type="email"] {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--outline-strong);
  border-radius: var(--radius-full);
  background: var(--surface-row);
  color: var(--on-surface);
  font: inherit;
}
.waitlist .note {
  margin: var(--space-3) 0 0;
  color: var(--on-surface-variant);
  font-size: 0.9375rem;
  line-height: 1.4;
}
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.soon { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.soon .banner { margin: 0; }

@media (min-width: 768px) {
  .nav-menu ul { left: var(--space-7); right: var(--space-7); }
  .wrap, .bar, .footer-grid, .footer-meta { padding-left: var(--space-7); padding-right: var(--space-7); }
  .field-row { flex-direction: row; }
  .waitlist input[type="email"] { flex: 1; }
}

/* Footer */
.site-footer { background: var(--surface-grouped); padding: var(--space-8) 0 var(--space-6); }
.footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.site-footer li a { overflow-wrap: break-word; hyphens: auto; }
.footer-brand { grid-column: 1 / -1; }
.site-footer h2 { font-size: 1rem; margin-bottom: var(--space-2); }
.footer-meta { margin-top: var(--space-6); border-top: 1px solid var(--outline); padding-top: var(--space-4); }
.footer-meta a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }

@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .footer-brand { grid-column: auto; }
}

/* 404 page */
.not-found { padding-top: var(--space-8); padding-bottom: var(--space-8); text-align: center; }
.not-found img { display: block; margin: 0 auto var(--space-6); }
.not-found p { max-width: 480px; margin-left: auto; margin-right: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Blog */
.blog .lede { font-size: 1.25rem; color: var(--on-surface-variant); max-width: 68ch; }
.feed-link, .back-link { display: inline-flex; align-items: center; min-height: 44px; }
.post-list { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.post-card h2 { font-size: 1.5rem; margin-bottom: var(--space-2); }
.post-card p:last-child { margin-bottom: 0; }
.post-meta { font-size: 0.9375rem; }
.post-body { max-width: 68ch; font-size: 1.125rem; line-height: 1.6; }
.post-body h2 { margin-top: var(--space-7); }
.post-body img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-lg); margin: var(--space-4) 0; }

/* Audience pages (roommates, couples, families) */
.eyebrow { margin: 0 0 var(--space-2); color: var(--accent); font-weight: 700; }
.lede { font-size: 1.1875rem; color: var(--on-surface-variant); max-width: 40rem; }
.hero-grid { display: grid; gap: var(--space-8); align-items: center; }
.phone-figure { margin: 0; }
.phone {
  display: grid;
  gap: var(--space-2);
  max-width: 320px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
  background: var(--surface-grouped);
  border: 2px solid var(--outline-strong);
  border-radius: var(--radius-xl);
}
.phone-title { margin: 0 0 var(--space-1); font-weight: 800; }
.phone .row { background: var(--surface-row); }
.cards { display: grid; gap: var(--space-4); }
.cards .group-card h3 { font-size: 1.1875rem; margin-bottom: var(--space-2); }
.cards .group-card p { margin: 0; }
.words .bert-says { max-width: 36rem; margin-bottom: var(--space-4); }
.faq-item { background: var(--surface-row); border-radius: var(--radius-md); margin-bottom: var(--space-3); }
.faq-item summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  font-weight: 700;
  cursor: pointer;
}
.faq-item p { margin: 0; padding: 0 var(--space-4) var(--space-4); }
.faq-item a { display: inline-flex; align-items: center; min-height: 44px; }
.nav-wide a[aria-current="page"], .nav-menu a[aria-current="page"], .site-footer a[aria-current="page"] {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 6px;
}

@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .hero-grid { grid-template-columns: 3fr 2fr; }
}

/* Designer CHECK round 1: long Norwegian words must not widen the page at 320 and 360. */
.hero-copy { min-width: 0; }
.hero-copy h1 { overflow-wrap: anywhere; hyphens: auto; }
.waitlist .note a {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
}

/* Home page (BERT-110) */
.hero-bean { display: block; margin-bottom: var(--space-4); }
.phone p { margin: 0; }
.phone-card { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--surface-row); border: 1px solid var(--outline); border-radius: var(--radius-lg); }
.phone-card .row { padding: 0; background: none; }
.phone-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.phone-greeting { font-size: 1.375rem; font-weight: 800; }
.phone-summary { color: var(--on-surface-variant); }
.card-title { font-weight: 700; font-size: 0.9375rem; }
.phone .row { display: flex; justify-content: space-between; gap: var(--space-3); }
.meta { color: var(--on-surface-variant); text-align: right; }
.positive { color: var(--money-positive); font-weight: 700; }
.section-lede { max-width: 40em; color: var(--on-surface-variant); }
.card-grid { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.card-grid > li { min-width: 0; }
.group-card h3 { font-size: 1.25rem; margin-bottom: var(--space-2); }
.feature .row { margin-top: var(--space-2); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.card-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.audience { display: flex; flex-direction: column; align-items: flex-start; }
.audience p { flex: 1; }
.trust-link { margin: var(--space-6) 0 0; }
.trust-link a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.levels > li { display: flex; }
.levels .bert-says { flex: 1; height: 100%; align-items: stretch; }
.levels .bert-says img { align-self: flex-end; }
.levels .bert-bubble { flex: 1; }

@media (min-width: 768px) {
  .card-grid-2, .card-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}