/* src/styles/fonts.css */
/*
 * Geist + Geist Mono, self-hosted (were Google Fonts <link>s). Files are the
 * exact Google Fonts v5/v6 woff2 subsets; Geist is variable, one file covers
 * 500 and 600. The latin Geist file is preloaded in index.html and the blog head.
 */
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url(/fonts/geist-v5-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url(/fonts/geist-v5-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url(/fonts/geist-v5-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url(/fonts/geist-v5-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url(/fonts/geist-v5-latin.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/geist-mono-v6-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/geist-mono-v6-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/geist-mono-v6-symbols2.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/geist-mono-v6-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/geist-mono-v6-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/geist-mono-v6-latin.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;
}

/* src/styles/tokens.css */
:root {
  /* color */
  --ink: #0d3a57;
  --ink-soft: rgba(13, 58, 87, 0.7);
  --ink-faint: rgba(13, 58, 87, 0.5);
  --teal: #008080;
  --purple: #9150d2;
  --purple-bright: #a35fe7;
  --yellow: #eb960e;
  --bg: #f8fcfc; /* website page ground (Figma); app bg was #f7fcff */
  --mint: #eefafa;
  --teal-wash: #afd9d9;
  --surface-bluegray: #e6f0f5;
  --border: #c6d7d7;
  --line: #d9e9e9; /* website hairlines (Figma) */
  --cell: #f8fcfc; /* grid cell background (Figma) */
  --gem-purple: #d58bff;
  --gem-green: #70e7c7;
  --green: #1eba84;
  --coral: #ff9f7c;

  /* tints */
  --tint-pink: #f6dcf4;
  --tint-ice: #dcf3f6;
  --tint-green: #ecf6dc;
  --tint-cream: #f6eedc;
  --tint-purple: #f2e9fc;

  /* gradients */
  --grad-purple-cta: linear-gradient(#a35fe7, #9150d2);

  /* shadows */
  --shadow-card: 0 3px 3px rgba(31, 97, 97, 0.1);
  --shadow-glass: 0 6px 16px rgba(31, 97, 97, 0.2);

  /* radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* type */
  --font-sans: 'Geist', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* layout */
  --container: 1202px;
  --intro-col: 752px;
  --gutter: 24px;
}

/* src/styles/global.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

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

ul,
ol {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3,
h4,
p {
  overflow-wrap: break-word;
}

#root {
  isolation: isolate;
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Decorative graphics (panels, hero gem field, phone mocks): not selectable, default cursor. */
[data-graphic],
[data-graphic] * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  cursor: default;
}

/*
 * Figma line breaks. A `\n` in copy.json is a hard break at the design width
 * (>= 1280px) and collapses to a plain space below it. At that width balance /
 * pretty wrapping is switched off too, so lines wrap exactly as in Figma.
 * (Doubled selector: wins over the single-class module rules it is paired with.)
 */
@media (min-width: 1280px) {
  .figma-lines.figma-lines {
    white-space: pre-line;
    text-wrap-style: auto;
  }
}

/* src/components/ui/Container.module.css */
.Container_container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}


@media (max-width: 1249.98px) {
  .Container_container {
    padding-inline: var(--gutter);
  }
}

/* src/components/ui/Button.module.css */
.Button_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.2s var(--ease-out),
    color 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out),
    transform 0.2s var(--ease-out);
}

.Button_button:active {
  transform: scale(0.97);
}

.Button_outline {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
}

.Button_outline:hover {
  background: var(--ink);
  color: var(--bg);
}

.Button_primary {
  color: #fff;
  background: var(--teal);
  border: 1px solid var(--teal);
}

.Button_primary:hover {
  background: #006b6b;
  border-color: #006b6b;
}

/* src/components/ui/SectionRule.module.css */
.SectionRule_rule {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--line);
}

/* src/components/layout/Header.module.css */
.Header_header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 104px;
  isolation: isolate;
}


.Header_backdrop,
.Header_tint,
.Header_blur {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.Header_backdrop {
  z-index: 0;
}


.Header_tint {
  background: linear-gradient(
    to bottom,
    #d9eded 0%,
    rgba(217, 237, 237, 0.6) 45%,
    rgba(217, 237, 237, 0) 100%
  );
}

.Header_blur1 {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 45%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 45%);
}

.Header_blur2 {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 10%, #000 30%, #000 45%, transparent 70%);
  mask-image: linear-gradient(to bottom, transparent 10%, #000 30%, #000 45%, transparent 70%);
}

.Header_blur3 {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 35%, #000 55%, #000 65%, transparent 85%);
  mask-image: linear-gradient(to bottom, transparent 35%, #000 55%, #000 65%, transparent 85%);
}

.Header_blur4 {
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 55%, #000 75%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 55%, #000 75%, #000 80%, transparent 100%);
}

.Header_inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-top: 0;
}

.Header_logo {
  display: block;
  flex: none;
}

.Header_logoFull {
  height: 32px;
  width: auto;
}

.Header_logoMark {
  display: none;
  height: 32px;
  width: auto;
}

.Header_nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.Header_link {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  transition: color 0.2s var(--ease-out);
}

.Header_link:hover {
  color: var(--teal);
}

.Header_download {
  width: 112px;
  padding-inline: 0;
}

@media (max-width: 767.98px) {
  .Header_header {
    height: 72px;
  }
  .Header_nav {
    gap: 20px;
  }
}

@media (max-width: 479.98px) {
  .Header_logoFull {
    display: none;
  }
  .Header_logoMark {
    display: block;
  }
  .Header_nav {
    gap: 20px;
  }
}

/* src/components/layout/Footer.module.css */
.Footer_footer {
  background: var(--bg);
}

.Footer_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-block: 48px;
}

.Footer_logo {
  height: 32px;
  width: auto;
}

.Footer_legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-soft);
}

.Footer_sep {
  color: var(--ink-faint);
}

.Footer_legal a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s var(--ease-out);
}

.Footer_legal a:hover {
  color: var(--ink-soft);
}


@media (max-width: 1023.98px) {
  .Footer_inner {
    flex-direction: column;
    padding-block: 40px;
    text-align: center;
  }
  .Footer_legal {
    justify-content: center;
  }
  
  .Footer_copyright {
    flex-basis: 100%;
  }
  .Footer_sepLead {
    display: none;
  }
}

/* scripts/blog/blog.css */
/*
 * Blog pages (/blog, /blog/<slug>), anatomy of the original Framer blog with the
 * homepage's type, colours and cards (Trust). Text styles are the homepage's
 * (Geist 500/600; no mono).
 *   index = 3-col grid of cards (no visible title) (edge-to-edge image, date, title)
 *   post  = back button + title, cover and prose in one 720px column, then the
 *           homepage's closing CTA (<Closing>, mounted by src/blog/cta.tsx)
 */

.b-page {
  --card: #f2f7f7; /* homepage card fill (Trust) */
}

.b-wrap {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding: 64px var(--gutter) 120px;
}

.b-meta {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* local images render as <picture> + WebP srcset (images.mjs); the wrapper drops out
   of layout so the rules below size the <img> exactly as a bare one (its <source>
   would otherwise be an empty flex item in the app screenshot rows) */
.b-card-thumb picture,
.b-cover picture,
.b-prose picture {
  display: contents;
}

.b-card-thumb source,
.b-cover source,
.b-prose source {
  display: none;
}

/* ---------- index ---------- */

/* the index h1 is for screen readers and search only; the page shows just the cards */
.b-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.b-post-title {
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
  text-wrap: balance;
}

.b-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.b-card {
  display: flex;
}

.b-card-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  transition: border-color 0.2s var(--ease-out);
}

.b-card-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--mint);
  border-bottom: 1px solid var(--line);
}

.b-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

.b-card-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 24px 32px;
}

.b-card-title {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.56px;
  color: var(--ink);
  text-wrap: balance;
  transition: color 0.2s var(--ease-out);
}

.b-card-link:hover {
  border-color: var(--teal-wash);
}

.b-card-link:hover .b-card-title {
  color: var(--teal);
}

.b-card-link:hover .b-card-thumb img {
  transform: scale(1.03);
}

/* ---------- post ---------- */

.b-post {
  max-width: calc(720px + 2 * var(--gutter));
  padding-bottom: 96px;
}

.b-post-head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.b-back {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  margin-top: -2px; /* centre on the title's first line */
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink);
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.b-back:hover {
  border-color: var(--teal-wash);
  color: var(--teal);
}

.b-back:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.b-post-heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.b-post-title {
  font-size: clamp(28px, 2vw + 18px, 40px);
  letter-spacing: -0.03em;
}

.b-cover {
  margin-top: 40px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--mint);
}

.b-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* article body: 18px Geist medium, 1.6 leading, ink-soft text with ink headings */
.b-prose {
  margin-top: 48px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink-soft);
}

.b-prose > * + * {
  margin-top: 20px;
}

.b-prose h2,
.b-prose h3 {
  color: var(--ink);
  font-weight: 600;
  text-wrap: balance;
  scroll-margin-top: 120px;
}

.b-prose h2 {
  font-size: clamp(24px, 1vw + 18px, 28px);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.b-prose h3 {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.b-prose * + h2 {
  margin-top: 48px;
}

.b-prose * + h3 {
  margin-top: 36px;
}

.b-prose h2 + *,
.b-prose h3 + * {
  margin-top: 12px;
}

.b-prose strong {
  font-weight: 600;
  color: var(--ink);
}

.b-prose a {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease-out);
}

.b-prose a:hover {
  color: #006b6b;
}

.b-prose a strong {
  color: inherit;
}

.b-prose ul,
.b-prose ol {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.b-prose li {
  position: relative;
  padding-left: 32px;
}

.b-prose ul > li::before {
  content: '';
  position: absolute;
  left: 8px;
  top: calc(0.8em - 4px);
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--teal-wash);
}

.b-prose ol {
  counter-reset: b-ol;
}

.b-prose ol > li {
  counter-increment: b-ol;
}

.b-prose ol > li::before {
  content: counter(b-ol) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  color: var(--teal);
}

.b-prose blockquote {
  padding-left: 20px;
  border-left: 2px solid var(--teal-wash);
  color: var(--ink);
}

.b-prose img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* app screenshots (/img/blog/app-*): phone-sized, side by side when on consecutive lines */
.b-prose p:has(> img[src^='/img/blog/app-'], > picture > img[src^='/img/blog/app-']) {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-block: 32px;
}

.b-prose img[src^='/img/blog/app-'] {
  flex: 0 1 280px;
  min-width: 0;
}

.b-prose hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin-block: 40px;
}

.b-prose code {
  font-size: 0.95em;
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: var(--mint);
  color: var(--ink);
}

/* ---------- smaller screens ---------- */

@media (max-width: 1099.98px) {
  .b-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .b-card-title {
    font-size: 24px;
    letter-spacing: -0.48px;
  }
}

@media (max-width: 767.98px) {
  .b-wrap {
    padding-block: 40px 72px;
  }
  .b-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .b-card-text {
    padding: 20px 20px 24px;
  }
  .b-post-head {
    gap: 14px;
  }
  .b-back {
    width: 40px;
    height: 40px;
    margin-top: -4px;
  }
  .b-cover {
    margin-top: 28px;
    border-radius: var(--radius-lg);
  }
  .b-prose {
    margin-top: 36px;
  }
}