/*
 * Memofyd — site design system.
 *
 * The palette is lifted from the app so the site and the thing it downloads read as one
 * product. Everything else here is chosen for restraint: one accent colour used sparingly,
 * hairline rules rather than boxes, and a lot of vertical space. Luxury in an interface is
 * mostly confidence about what to leave out.
 */

:root {
  --bg:#0b0d11;
  --bg-raised:#12151b;
  --bg-overlay:#181c24;
  --line:#1f242e;
  --line-strong:#2c3341;

  --text:#f0f2f6;
  --text-2:#a0a8b8;
  --text-3:#666e80;

  --accent:#6d8cff;
  --accent-text:#a9bcff;
  --accent-quiet:rgba(109,140,255,.10);
  --warning:#e0a33c;
  --warning-quiet:rgba(224,163,60,.09);
  --positive:#3fbd7a;

  --r-sm:8px; --r:12px; --r-lg:18px; --r-full:999px;
  --shell:1120px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg { max-width:100%; }
a { color:var(--accent-text); text-decoration:none; }
a:hover { text-decoration:underline; }

.shell { max-width:var(--shell); margin:0 auto; padding:0 28px; }
.narrow { max-width:760px; }

/* ---------------------------------------------------------------- type */

h1,h2,h3,h4 { margin:0; font-weight:640; letter-spacing:-.025em; line-height:1.12; }
h1 { font-size:clamp(38px,5.6vw,64px); letter-spacing:-.035em; }
h2 { font-size:clamp(26px,3.4vw,38px); }
h3 { font-size:19px; letter-spacing:-.015em; line-height:1.3; }
p { margin:0; }

.eyebrow {
  font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent-text); margin-bottom:18px;
}
.lede { font-size:clamp(16px,1.6vw,19px); color:var(--text-2); max-width:60ch; }
.muted { color:var(--text-3); }
.small { font-size:14px; }

/* Reserved for the one line per page that must land. */
.display-sub { font-size:clamp(17px,2vw,21px); color:var(--text-2); max-width:58ch; }

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

.nav {
  position:sticky; top:0; z-index:50;
  background:rgba(11,13,17,.78);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease);
}
.nav.scrolled { border-bottom-color:var(--line); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:70px; }

.brand { display:inline-flex; align-items:center; gap:10px; }
/*
 * Lockup proportions, matching the app exactly.
 *
 * Two fifths of the wordmark's box is the d's ascender and the y's descender, so sizing the
 * two halves by their boxes makes the mark tower over the name. 0.935 puts the letterforms
 * at the right size against the mark; the lift raises the mark onto their optical centre
 * rather than the centre of a box the descender drags down.
 */
.brand .mark { height:28px; margin-bottom:10px; }
.brand .word { height:26.2px; }

.nav-links { display:flex; align-items:center; gap:32px; }
.nav-links a {
  color:var(--text-2); font-size:14.5px; font-weight:500; text-decoration:none;
  transition:color .15s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current] { color:var(--text); }

/*
 * The CTA inside the nav needs its button colours back.
 *
 * `.nav-links a` is one specificity point heavier than `.btn-primary`, so without this the
 * link rule wins and paints muted grey text onto the accent fill — legible enough to pass a
 * glance and nowhere near legible enough to pass a contrast check.
 */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover,
.nav-links a.btn-primary[aria-current] { color:#0b0d11; }
.nav-links a.btn-ghost { color:var(--text); }

.nav-toggle {
  display:none; background:none; border:0; color:var(--text); padding:8px; cursor:pointer;
}

@media (max-width:820px) {
  .nav-toggle { display:block; }
  .nav-links {
    position:absolute; inset:70px 0 auto; flex-direction:column; align-items:stretch;
    gap:0; padding:8px 28px 20px; background:var(--bg); border-bottom:1px solid var(--line);
  }
  .nav-links:not(.open) { display:none; }
  .nav-links a { padding:13px 0; border-bottom:1px solid var(--line); font-size:16px; }
  .nav-links .btn { margin-top:14px; justify-content:center; }
}

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

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:var(--r-full); border:1px solid transparent;
  font-size:15px; font-weight:600; text-decoration:none; cursor:pointer;
  transition:transform .14s var(--ease), background-color .14s var(--ease), box-shadow .14s var(--ease);
}
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn-primary { background:var(--accent); color:#0b0d11; box-shadow:0 6px 24px rgba(109,140,255,.26); }
.btn-primary:hover { background:#829dff; box-shadow:0 8px 30px rgba(109,140,255,.36); }
.btn-ghost { border-color:var(--line-strong); color:var(--text); }
.btn-ghost:hover { background:var(--bg-raised); }
.btn-sm { padding:9px 18px; font-size:14px; }
.btn-lg { padding:16px 32px; font-size:16px; }
.btn-stack { flex-direction:column; gap:1px; }
.btn-stack small { font-weight:450; font-size:11.5px; opacity:.7; }

/* -------------------------------------------------------------- layout */

section { padding:clamp(64px,9vw,116px) 0; }
section + section { border-top:1px solid var(--line); }
.section-head { max-width:640px; margin-bottom:clamp(36px,5vw,60px); }
.section-head h2 { margin-bottom:14px; }

.grid { display:grid; gap:20px; }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }

.card {
  background:var(--bg-raised); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:28px;
}
.card h3 { margin-bottom:9px; }
.card p { color:var(--text-2); font-size:14.5px; }

/* A number, then what it means. Used for the three-step explainer. */
.step-n {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; margin-bottom:16px;
  border-radius:var(--r-full); border:1px solid var(--line-strong);
  font-size:13px; font-weight:640; color:var(--accent-text);
}

/* ---------------------------------------------------------------- hero */

.hero { position:relative; overflow:hidden; padding:clamp(72px,11vw,132px) 0 clamp(56px,8vw,96px); }
.hero::before {
  content:""; position:absolute; left:50%; top:-340px; width:1100px; height:760px;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(109,140,255,.16) 0%,rgba(140,120,255,.06) 42%,transparent 68%);
  filter:blur(10px);
}
.hero > * { position:relative; }
.hero h1 { margin-bottom:22px; max-width:16ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:38px; }

/* A quiet gradient on the last word only — the whole heading in gradient reads as a
   template, one word reads as a choice. */
.accentuate {
  background:linear-gradient(100deg,var(--text) 10%,var(--accent-text) 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* --------------------------------------------------------------- misc */

.rule { height:1px; background:var(--line); border:0; margin:0; }

.chips { display:flex; flex-wrap:wrap; gap:9px; }
.chip {
  padding:6px 15px; border-radius:var(--r-full); font-size:13.5px;
  background:var(--accent-quiet); color:var(--accent-text); border:1px solid transparent;
}
.chip-plain { background:var(--bg-overlay); color:var(--text-2); border-color:var(--line); }

.notice {
  border:1px solid var(--warning); background:var(--warning-quiet);
  border-radius:var(--r-lg); padding:24px 26px;
}
.notice h3 { color:var(--warning); margin-bottom:12px; font-size:16px; }
.notice ol,.notice ul { margin:0; padding-left:20px; }
.notice li { margin-bottom:10px; color:var(--text-2); font-size:14.5px; }
.notice li:last-child { margin-bottom:0; }
.notice strong { color:var(--text); }

kbd {
  background:var(--bg-overlay); border:1px solid var(--line-strong); border-bottom-width:2px;
  border-radius:5px; padding:1.5px 7px; font-size:12.5px; font-family:inherit; color:var(--text);
}

table { width:100%; border-collapse:collapse; font-size:14.5px; }
th,td { text-align:left; padding:14px 14px 14px 0; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--text-3); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.09em; }
td code,code { font-size:13px; color:var(--text-2); background:var(--bg-overlay); padding:2px 6px; border-radius:5px; }

/* Long-form legal and FAQ pages. */
.prose { max-width:74ch; }
.prose h2 { font-size:22px; margin:52px 0 14px; }
.prose h3 { font-size:16.5px; margin:30px 0 8px; }
.prose p, .prose li { color:var(--text-2); font-size:15.5px; margin-bottom:14px; }
.prose ul { padding-left:22px; }
.prose strong { color:var(--text); }
.prose > p:first-of-type { font-size:17px; }

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

footer.site {
  border-top:1px solid var(--line);
  padding:clamp(48px,6vw,72px) 0 44px;
}
.foot-grid {
  display:grid; gap:36px;
  grid-template-columns:1.6fr repeat(3,1fr);
}
@media (max-width:760px) { .foot-grid { grid-template-columns:1fr 1fr; } }
.foot-col h4 {
  font-size:11.5px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--text-3); font-weight:600; margin-bottom:16px;
}
.foot-col a { display:block; color:var(--text-2); font-size:14.5px; padding:5px 0; text-decoration:none; }
.foot-col a:hover { color:var(--text); }
.foot-bottom {
  margin-top:48px; padding-top:26px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  color:var(--text-3); font-size:13.5px;
}

/* Anything that scrolls sideways must do so inside its own box, never the page. */
.scroll-x { overflow-x:auto; -webkit-overflow-scrolling:touch; }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  * { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}