/*
 * Wudget landing: shared styles.
 *
 * Breakpoints follow the original Framer site:
 *   desktop  >= 1200px   content 800px wide
 *   tablet   810-1199px  content 770px wide
 *   phone    <= 809px    content 350px wide
 */

/* ---------- Tokens ---------- */

:root {
  --color-bg: #000;
  --color-text: #fff;
  --color-text-secondary: rgba(255, 255, 255, 0.6);
  --color-text-tertiary: rgba(255, 255, 255, 0.48);
  --color-surface: rgba(255, 255, 255, 0.1);
  --color-surface-raised: rgba(255, 255, 255, 0.12);
  --color-divider: rgba(255, 255, 255, 0.1);
  --color-accent: rgb(163, 92, 255);
  --color-link: rgb(0, 153, 255);
  --color-glow: rgba(250, 55, 91, 0.69);

  /* The Framer original renders every text style in the platform UI font (SF Pro on Apple
     devices), so no web font is shipped. The feature list is carried over verbatim from it. */
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
  --font-features: "blwf", "cv03", "cv04", "cv09", "cv11";
  --tracking: -0.02em;

  --text-display: 80px;
  --text-display-lh: 1.1;
  --text-h2: 40px;
  --text-h2-lh: 1.1;
  --text-h3: 26px;
  --text-h3-lh: 1.1;
  --text-h4: 20px;
  --text-lead: 24px;
  --text-value: 28px;
  --text-body: 16px;

  --container: 800px;
  --gutter: 20px;
  --gap-card: 10px;
  --space-section: 100px;
  --radius-card: 20px;
  --radius-nav: 6px;

  --screen-width: 260px;
}

@media (min-width: 810px) and (max-width: 1199px) {
  :root {
    --text-display: 64px;
    --container: 770px;
  }
}

@media (max-width: 809px) {
  :root {
    --text-display: 51px;
    --container: 350px;
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  /* Set on every element: an em-based letter-spacing inherits as a fixed length otherwise. */
  letter-spacing: var(--tracking);
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--text-body);
  line-height: 1.6;
  font-feature-settings: var(--font-features);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1,
h2,
h3,
h4,
p,
ul {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Japanese and Chinese may break between any two characters: break between phrases where the
   browser can (Chrome), and avoid a lone character on the last line everywhere else. Korean
   keeps whole words, as it has spaces between them. */
:lang(ja),
:lang(zh) {
  word-break: auto-phrase;
  text-wrap: pretty;
}

:lang(ko) {
  word-break: keep-all;
}

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

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 8px 12px;
  border-radius: var(--radius-nav);
  background: var(--color-text);
  color: var(--color-bg);
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
}

:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

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

.display {
  font-size: var(--text-display);
  line-height: var(--text-display-lh);
  font-weight: 700;
}

.title {
  font-size: var(--text-h2);
  line-height: var(--text-h2-lh);
  font-weight: 700;
}

.lead {
  font-size: var(--text-lead);
  line-height: 1.4;
}

.muted {
  color: var(--color-text-secondary);
}

/* ---------- Logo ---------- */

.logo-mark {
  position: relative;
  display: block;
  flex: none;
  width: 64px;
  height: 64px;
  padding: 2px;
  border-radius: 14px;
  background: radial-gradient(100% 100% at 0% 0%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.08) 100%);
}
.logo-mark::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: var(--color-bg);
}
/* The app icon fills the inner square, like the icon on a home screen. */
.logo-mark img {
  position: absolute;
  inset: 2px;
  width: 60px;
  height: 60px;
  border-radius: 12px;
}

/* ---------- Navigation ---------- */

.nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav a {
  display: block;
  padding: 4px 8px;
  border-radius: var(--radius-nav);
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav a:hover,
.nav a:focus-visible {
  background: var(--color-surface);
  color: var(--color-text);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  padding-block: 20px;
  background: linear-gradient(var(--color-bg) 50%, rgba(0, 0, 0, 0) 100%);
}

/* ---------- Layout flow ---------- */

main {
  display: block;
}

.section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section + .section {
  margin-top: var(--space-section);
}

.section > .title + .lead {
  margin-top: 10px;
}

.section > .lead + * {
  margin-top: 40px;
}

/* ---------- Hero ---------- */

.hero .hero__logo {
  display: none;
}

.hero__subtitle {
  margin-top: 10px;
  /* Spread the tagline evenly over its lines instead of leaving one word on the last. */
  text-wrap: balance;
}

.hero .store-link {
  margin-top: 40px;
}

.hero .screens {
  margin-top: 40px;
}

/* ---------- App Store link ---------- */

.store-link {
  display: flex;
  flex-direction: column;
}

/* The badge is as wide as its language needs; the margins keep the original 90px-high block. */
.store-link__badge {
  width: auto;
  height: 65px;
  margin-block: 12.5px;
}

.store-link__hint {
  display: none;
}

/* ---------- Phone screenshots ---------- */

.screens {
  display: flex;
  justify-content: center;
  gap: var(--gap-card);
  width: 100%;
}

.screens img {
  width: var(--screen-width);
}

.screens--three img {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}

/* ---------- Cards ---------- */

.card {
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-card);
  width: 100%;
}

/* "How does it work" split cards */

.split-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 420px;
  padding: 28px 20px 0;
  overflow: hidden;
}

.split-card h3 {
  font-size: var(--text-h3);
  line-height: var(--text-h3-lh);
  font-weight: 700;
}

.split-card p {
  color: var(--color-text-secondary);
}

.split-card img {
  flex: none;
  width: calc(100% + 40px);
  max-width: none;
  margin-inline: -20px;
}

/* Amount cards (incomes, plans) */

.amount-card {
  padding: 20px;
  text-align: left;
}

.amount-card__label {
  font-size: var(--text-lead);
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.amount-card__value {
  margin-top: 10px;
  font-size: var(--text-value);
  line-height: 1.2;
  font-weight: 500;
}

.amount-card__note {
  color: var(--color-text-secondary);
}

.amount-card--total {
  width: 100%;
  text-align: center;
}

.amount-card--total .amount-card__value {
  margin-top: 0;
}

.amounts {
  display: flex;
  flex-direction: column;
  gap: var(--gap-card);
  width: 100%;
}

/* Help card */

.help-card {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 390px;
  max-width: 100%;
  padding: 20px;
  text-align: left;
}

.help-card img {
  flex: none;
  width: 60px;
  height: 60px;
}

.help-card__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.help-card__title {
  font-size: var(--text-h3);
  line-height: var(--text-h3-lh);
  font-weight: 700;
}

.help-card a:hover {
  text-decoration: underline;
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: 40px;
  padding: 59px 0 20px;
  border-top: 1px solid var(--color-divider);
}

.site-footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-h3);
  line-height: var(--text-h3-lh);
  font-weight: 700;
  color: var(--color-text-secondary);
}

.site-footer__address {
  margin-top: 20px;
  color: var(--color-text-secondary);
}

/* Language picker, the last item of the header menu: a native <details> opening downwards. */
.language-switcher {
  position: relative;
  flex: none;
}

.language-switcher summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-nav);
  color: var(--color-text-secondary);
  list-style: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.language-switcher summary::-webkit-details-marker {
  display: none;
}

.language-switcher summary::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20'/%3E%3C/svg%3E") center / contain no-repeat;
}

.language-switcher summary:hover,
.language-switcher[open] summary {
  background: var(--color-surface);
  color: var(--color-text);
}

.language-switcher__list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 2px 4px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--color-divider);
  border-radius: 14px;
  background: #1c1c1c;
  list-style: none;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}

.language-switcher__list a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--radius-nav);
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.language-switcher__list a:hover,
.language-switcher__list a:focus-visible {
  background: var(--color-surface);
  color: var(--color-text);
}

.language-switcher__list a[aria-current] {
  color: var(--color-text);
  font-weight: 700;
}

/* ---------- Pricing ---------- */

.page-intro {
  margin-top: 60px;
}

.features {
  display: grid;
  grid-template-columns: repeat(4, 128px);
  justify-content: center;
  gap: 11px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.features li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.features img {
  width: 60px;
  height: 60px;
}

.section.section--tight > * + * {
  margin-top: 30px;
}

/* A long word ("Abonnementen") drops below the badge instead of running off a phone screen. */
.plans-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.plans-title img {
  width: 104px;
  height: 40px;
}

.plan-card .amount-card__value {
  margin-top: 30px;
}

/* Two plans keep the width of a three-column card and sit in the middle. */
.grid-3.plans {
  grid-template-columns: repeat(2, calc((100% - 2 * var(--gap-card)) / 3));
  justify-content: center;
}

.plan-card__discount {
  color: var(--color-accent);
}

.pricing-note {
  color: var(--color-text-secondary);
}

.section.section--tight > .pricing-note + .help-card {
  margin-top: 40px;
}

/* ---------- About ---------- */

.chaos {
  position: relative;
  width: 100%;
  height: 470px;
}

.chaos__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 423px;
  height: 111px;
  border-radius: 1000px;
  background: var(--color-glow);
  filter: blur(100px);
  transform: translate(-50%, -50%);
}

.chaos__item {
  position: absolute;
  top: var(--y);
  left: var(--x);
  object-fit: cover;
  width: var(--s);
  height: var(--s);
  max-width: none;
  opacity: var(--o, 0.5);
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
}

.chaos__item--blur {
  filter: blur(var(--b, 4px));
}

.chaos__item--main {
  left: 50%;
  opacity: 1;
}

.about-text > .lead + .lead {
  margin-top: 20px;
}

.showcase {
  position: relative;
  width: 100%;
  height: 502px;
}

.showcase img {
  position: absolute;
}

.showcase__center {
  top: 0;
  left: 50%;
  width: 240px;
  transform: translateX(-50%);
}

.showcase__side {
  top: 75px;
  width: 194px;
}

.showcase__side--left {
  left: 111px;
  transform: rotate(-8deg);
}

.showcase__side--right {
  right: 111px;
  transform: rotate(8deg);
}

.section > .title + .company {
  margin-top: 30px;
}

.company-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  overflow: hidden;
  text-align: left;
}

.company-card h3 {
  font-size: var(--text-body);
  line-height: 1.6;
  font-weight: 700;
}

.company-card__body {
  position: relative;
  color: var(--color-text-secondary);
}

.company-card__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.company-card__links a {
  color: var(--color-text-tertiary);
  transition: color 0.2s ease;
}

.company-card__links a:hover,
.company-card__links a:focus-visible {
  color: var(--color-text);
}

.company-card__stamp {
  position: absolute;
  top: -19px;
  right: -12px;
  width: 96px;
  height: 96px;
  opacity: 0.16;
}

/* ---------- Legal pages ---------- */

.legal > * + * {
  margin-top: 16px;
}

.legal h2 {
  font-size: var(--text-h2);
  line-height: var(--text-h2-lh);
  font-weight: 700;
}

.legal h3 {
  font-size: var(--text-h3);
  line-height: var(--text-h3-lh);
  font-weight: 700;
}

.legal h4 {
  font-size: var(--text-h4);
  line-height: 1.1;
  font-weight: 700;
}

.legal ul {
  padding-left: 20px;
}

.legal li > p + p {
  margin-top: 16px;
}

/* The original relies on colour alone; a faint underline keeps links identifiable (WCAG 1.4.1). */
.legal a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: rgba(0, 153, 255, 0.4);
  text-underline-offset: 3px;
}

.legal a:hover {
  text-decoration-color: currentColor;
}

/* ---------- 404 ---------- */

.not-found {
  min-height: 50vh;
  justify-content: center;
}

.not-found .lead {
  margin-top: 20px;
}

.button {
  display: inline-block;
  margin-top: 40px;
  padding: 12px 24px;
  border-radius: 12px;
  background: var(--color-surface);
  transition: background-color 0.2s ease;
}

.button:hover {
  background: var(--color-surface-raised);
}

/* ---------- Phone ---------- */

@media (max-width: 809px) {
  .site-header {
    justify-content: center;
  }

  .site-header > .logo-mark {
    display: none;
  }

  /* Five links rarely fit one phone row once translated. */
  .nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 8px;
  }

  .site-header .nav {
    margin-inline: -4px;
  }

  .hero .hero__logo {
    display: block;
    margin-bottom: 10px;
  }

  /* Badge and hint share one plate, as wide as the wider of the two. */
  .store-link__badge {
    width: auto;
    height: 64px;
    margin-block: 0;
    object-fit: contain;
    border-radius: 10px 10px 0 0;
    background: var(--color-surface-raised);
  }

  .store-link__hint {
    display: block;
    padding: 4px 12px;
    border-radius: 0 0 10px 10px;
    background: var(--color-surface-raised);
    line-height: 1.4;
  }

  .screens,
  .screens--three {
    flex-direction: column;
    align-items: center;
  }

  .screens--three img {
    flex: none;
    width: var(--screen-width);
  }

  .grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .split-card {
    height: auto;
  }

  .amount-card {
    text-align: center;
  }

  .help-card {
    width: 100%;
  }

  .site-footer__row {
    justify-content: center;
  }

  .site-footer__brand {
    display: none;
  }

  .site-footer__address {
    margin-top: 19px;
    text-align: center;
  }

  /* The picker can land anywhere in the wrapped menu, so its list centres under the whole header. */
  .language-switcher {
    position: static;
  }

  .language-switcher__list {
    top: calc(100% - 12px);
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .features {
    grid-template-columns: repeat(2, 120px);
    column-gap: 40px;
  }

  .plan-card .amount-card__value {
    margin-top: 0;
  }

  .grid-3.plans {
    grid-template-columns: minmax(0, 1fr);
  }

  .chaos__item {
    top: var(--ym);
    left: var(--xm);
    width: var(--sm, var(--s));
    height: var(--sm, var(--s));
  }

  .chaos__item--main {
    left: 50%;
  }

  .chaos__glow {
    width: 351px;
  }

  .showcase__side {
    display: none;
  }

  .company-card {
    justify-content: flex-start;
  }
}