/* ==========================================================================
   Multiply Master — marketing site
   Visual direction: warm squared-paper notebook. Cream ground, indigo ink,
   amber highlighter. Type is Fredoka throughout, matching the app itself.
   ========================================================================== */

@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/Fredoka-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/Fredoka-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/Fredoka-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper: #fffdE7;
  --paper-deep: #fdf6d3;
  --ink: #1e2a5a;
  --ink-soft: #56608c;
  --indigo: #3f51b5;
  --indigo-deep: #2f3d8f;
  --amber: #ffc107;
  --amber-deep: #d99700;
  --green: #4caf50;
  --red: #f44336;
  --card: #ffffff;
  --rule: rgba(63, 81, 181, 0.14);

  --shadow-sm: 0 2px 6px rgba(30, 42, 90, 0.07);
  --shadow-md: 0 10px 26px rgba(30, 42, 90, 0.1);
  --shadow-lg: 0 26px 60px rgba(30, 42, 90, 0.16);

  --radius: 22px;
  --radius-lg: 34px;

  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --container: 1140px;

  --text-hero: clamp(2.6rem, 1.4rem + 5.2vw, 5.4rem);
  --text-h2: clamp(2rem, 1.3rem + 2.6vw, 3.2rem);
  --text-h3: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
  --text-body: clamp(1rem, 0.96rem + 0.22vw, 1.12rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Fredoka', 'Segoe UI', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--paper);
  /* Faint squared-paper grid, like a maths exercise book. */
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: -0.015em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--indigo); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--indigo-deep); }

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

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.2rem, 4vw, 2.5rem);
}

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

/* Amber highlighter behind a word — drawn as a marker sweep, not a flat box. */
.mark {
  position: relative;
  white-space: nowrap;
}
.mark::after {
  content: '';
  position: absolute;
  left: -0.1em; right: -0.1em;
  bottom: 0.08em;
  height: 0.36em;
  background: var(--amber);
  border-radius: 3px;
  z-index: -1;
  transform: rotate(-0.6deg);
}

/* --- Skip link ----------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 50%;
  top: -4rem;
  transform: translateX(-50%);
  background: var(--indigo);
  color: #fff;
  padding: 0.7rem 1.4rem;
  border-radius: 0 0 12px 12px;
  z-index: 100;
  transition: top 160ms var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(255, 253, 231, 0.86);
  border-bottom: 2px solid var(--rule);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 74px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 700;
  font-size: 1.16rem;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.brand img {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  box-shadow: var(--shadow-sm);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.4vw, 1.9rem);
}
.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.nav a:hover,
.nav a:focus-visible,
.nav a[aria-current='page'] {
  color: var(--indigo);
  border-bottom-color: var(--amber);
}

@media (max-width: 560px) {
  .nav { gap: 0.9rem; }
  .nav a { font-size: 0.9rem; }
  .brand span { display: none; }
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: inherit;
  font-weight: 700;
  font-size: 1.06rem;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease),
    background-color 180ms var(--ease);
}

.btn-primary {
  background: var(--indigo);
  color: #fff;
  box-shadow: 0 8px 0 var(--indigo-deep), var(--shadow-md);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  color: #fff;
  transform: translateY(3px);
  box-shadow: 0 5px 0 var(--indigo-deep), var(--shadow-md);
}
.btn-primary:active { transform: translateY(8px); box-shadow: 0 0 0 var(--indigo-deep); }

.btn-ghost {
  background: transparent;
  color: var(--indigo);
  border: 2px solid rgba(63, 81, 181, 0.35);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: rgba(63, 81, 181, 0.07);
  border-color: var(--indigo);
}

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

/* --- Hero ---------------------------------------------------------------- */
.hero {
  padding-block: clamp(3rem, 2rem + 5vw, 6rem) 0;
  position: relative;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-actions { justify-content: center; }
  .trust-row { justify-content: center; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--card);
  border: 2px solid var(--rule);
  color: var(--indigo);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.4rem;
}

.hero h1 {
  font-size: var(--text-hero);
  margin-bottom: 0.45em;
}

.hero-lede {
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 34ch;
  margin-bottom: 2rem;
}
@media (max-width: 900px) { .hero-lede { max-width: none; } }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 2rem;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.trust-row span { display: inline-flex; align-items: center; gap: 0.4rem; }
.tick {
  width: 20px; height: 20px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Hero art: mascot on an amber disc, phone overlapping it. */
.hero-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 420px;
}
.hero-disc {
  position: absolute;
  width: min(400px, 78%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffd75e, var(--amber) 62%, var(--amber-deep));
  box-shadow: var(--shadow-lg);
}
.hero-disc::after {
  content: '× + = ×';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 1.4rem;
  transform: translateY(-9.5rem);
}
.hero-mascot {
  position: relative;
  width: min(190px, 42%);
  filter: drop-shadow(0 18px 26px rgba(30, 42, 90, 0.32));
  animation: bob 4.5s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* --- Phone frame --------------------------------------------------------- */
.phone {
  position: relative;
  border-radius: 34px;
  background: #fff;
  padding: 9px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(30, 42, 90, 0.08);
}
.phone img { border-radius: 26px; }
.phone::before {
  content: '';
  position: absolute;
  top: 15px; left: 50%;
  transform: translateX(-50%);
  width: 78px; height: 6px;
  border-radius: 99px;
  background: rgba(30, 42, 90, 0.14);
  z-index: 2;
}

/* --- Section scaffolding ------------------------------------------------- */
.section { padding-block: var(--space-section); }
.section-head { max-width: 52ch; margin-bottom: clamp(2.4rem, 4vw, 3.6rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--text-h2); }
.section-head p { color: var(--ink-soft); font-size: 1.1rem; margin-bottom: 0; }

.section-alt {
  background: var(--paper-deep);
  border-block: 2px solid var(--rule);
}

/* --- Screens strip: staggered, not a uniform grid ------------------------ */

/* The screenshots are the main thing worth looking at on this page, so the
   strip breaks out of the standard reading column and gets its own wider
   bound. At 1140px the five phones were ~190px each, which is too small to
   read a single number on. */
.container--wide { max-width: 1600px; }

.screens {
  display: grid;
  /* The 220px floor is the real sizing rule: above it the phones grow to fill
     the width, below it the strip scrolls sideways instead of shrinking them
     into illegibility. No breakpoint needed — the floor handles every width. */
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.75rem);
  align-items: start;
  overflow-x: auto;
  /* Room for the staggered offset and the hover lift, which would otherwise
     be clipped by the scroll container. */
  padding-block: 0.5rem 1.5rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(63, 81, 181, 0.35) transparent;
}
.screens::-webkit-scrollbar { height: 8px; }
.screens::-webkit-scrollbar-track { background: transparent; }
.screens::-webkit-scrollbar-thumb {
  background: rgba(63, 81, 181, 0.3);
  border-radius: 99px;
}

.screens .phone {
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
  scroll-snap-align: center;
}
.screens .phone:nth-child(odd) { transform: translateY(clamp(1rem, 3vw, 2.6rem)); }
.screens .phone:hover { transform: translateY(-8px) scale(1.03); z-index: 3; }
.screens .phone:nth-child(odd):hover {
  transform: translateY(clamp(0.2rem, 2vw, 1.6rem)) scale(1.03);
}

/* --- Feature bento ------------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.feature {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 2.4vw, 2.3rem);
  box-shadow: var(--shadow-md);
  border: 2px solid transparent;
  grid-column: span 2;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease),
    border-color 240ms var(--ease);
}
.feature:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--amber);
}
/* First two cards are wider — breaks the uniform grid rhythm on purpose. */
.feature:nth-child(1),
.feature:nth-child(2) { grid-column: span 3; }

.feature h3 { font-size: var(--text-h3); margin-bottom: 0.5rem; }
.feature p { color: var(--ink-soft); margin-bottom: 0; }

.feature-icon {
  width: 56px; height: 56px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.1rem;
  box-shadow: var(--shadow-sm);
}
.i-indigo { background: var(--indigo); }
.i-amber  { background: var(--amber-deep); }
.i-green  { background: var(--green); }
.i-red    { background: var(--red); }
.i-teal   { background: #11998e; }

@media (max-width: 880px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .feature,
  .feature:nth-child(1),
  .feature:nth-child(2) { grid-column: span 1; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
}

/* --- Privacy call-out ---------------------------------------------------- */
.privacy-band {
  background: var(--indigo);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3.4rem);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  box-shadow: var(--shadow-lg);
}
.privacy-band h2 { color: #fff; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); }
.privacy-band p { color: rgba(255, 255, 255, 0.86); margin-bottom: 0; max-width: 56ch; }
.privacy-band .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
.privacy-band .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  color: #fff;
}
@media (max-width: 780px) {
  .privacy-band { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

/* --- Language chips ------------------------------------------------------ */
.langs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
}
.lang-chip {
  background: var(--card);
  border: 2px solid var(--rule);
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* --- Prose (privacy / support pages) ------------------------------------- */
.page-hero {
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.page-hero h1 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem); }
.page-hero p { color: var(--ink-soft); font-size: 1.1rem; max-width: 60ch; margin-bottom: 0; }
.updated {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--card);
  border: 2px solid var(--rule);
  border-radius: 999px;
  padding: 0.3rem 0.95rem;
  margin-top: 1.2rem;
}

.prose {
  max-width: 74ch;
  padding-bottom: var(--space-section);
}
.prose h2 {
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
  margin-top: 2.4em;
  padding-top: 1.2rem;
  border-top: 2px solid var(--rule);
}
.prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.prose h3 { font-size: 1.2rem; margin-top: 1.8em; }
.prose ul { padding-left: 1.3rem; margin: 0 0 1.2em; }
.prose li { margin-bottom: 0.5em; }
.prose strong { font-weight: 700; color: var(--ink); }

.callout {
  background: var(--card);
  border-left: 6px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.3rem 1.6rem;
  box-shadow: var(--shadow-sm);
  margin: 1.8rem 0;
}
.callout p { margin-bottom: 0; }

/* --- FAQ ----------------------------------------------------------------- */
.faq { display: grid; gap: 0.9rem; max-width: 74ch; }
.faq details {
  background: var(--card);
  border-radius: var(--radius);
  border: 2px solid var(--rule);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color 200ms var(--ease);
}
.faq details[open] { border-color: var(--amber); }
.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.06rem;
  padding: 1.1rem 1.5rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-size: 1.5rem;
  color: var(--indigo);
  flex: none;
  transition: transform 220ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--indigo); }
.faq .faq-body { padding: 0 1.5rem 1.3rem; color: var(--ink-soft); }

/* --- Contact card -------------------------------------------------------- */
.contact-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: clamp(1.7rem, 3vw, 2.6rem);
  box-shadow: var(--shadow-md);
  border: 2px solid var(--rule);
  max-width: 74ch;
}
.contact-card .email {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  font-weight: 700;
  word-break: break-word;
}

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.72);
  padding-block: clamp(2.5rem, 4vw, 4rem);
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.5rem;
  align-items: center;
  justify-content: space-between;
}
.site-footer a { color: #fff; text-decoration: none; font-weight: 600; }
.site-footer a:hover { color: var(--amber); text-decoration: underline; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer-note { font-size: 0.9rem; width: 100%; margin: 0; }

@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;
  }
}