/* ═══════════════════════════════════════════════════════════
   SLYRA — Marketing kit (homepage, product, pricing, contact)
   Loaded after main.css on <body class="mkt site">. The tokens of the light marketing pages and the
   pieces they share: section titles, buttons, panels, the closing call, the FAQ. A page keeps in its
   own <style> only what is its own (prefix of the page: hp-, pd-, pr-, ct-).
═══════════════════════════════════════════════════════════ */

body.site {
  --bg:         #FCFCFC;
  --bg-2:       #F3F4F2;
  --card:       #FFFFFF;
  --border:     rgba(17,17,19,0.08);
  --border-hov: rgba(17,17,19,0.14);
  --text:       #111113;
  --text-dim:   #55555C;
  --text-muted: #6E6E75;
  --accent-glow: rgba(0,245,160,0.10);
  --mint-soft:  rgba(0,245,160,0.14);
  --mint-mark:  rgba(0,245,160,0.45);
  --mint-wash:  #EFF7F3;   /* a section on a light mint ground ("Behind Slyra", homepage) */
  --track:      #ECEDEB;
  --panel:      linear-gradient(150deg, #E7F7EF 0%, #F3F4F2 62%);
  /* Night sections (dark bands between the light ones) */
  --night:      #0C0C0D;
  --night-line: rgba(255,255,255,0.08);
  --night-dim:  rgba(255,255,255,0.64);
  background: var(--bg);
  color: var(--text-dim);
}

/* From one page of the site to the next: the browser fades one into the other */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.18s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
body.site a:focus-visible,
body.site button:focus-visible,
body.site input:focus-visible,
body.site select:focus-visible,
body.site textarea:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ── Layout ── */
.mk-wrap { max-width: 1120px; margin: 0 auto; }
.mk-section { padding: 104px 24px; background: var(--bg); }
.mk-section--alt { background: var(--bg-2); }
.mk-head-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: end;
  gap: 24px 64px;
  margin-bottom: 56px;
}

/* A field draws its own focus, on its frame: no second one around it */
body.site .ct-input:focus-visible, body.site .bmi-input input:focus-visible { outline: none; }

/* What is further down comes in as it reaches the screen, and goes back out as one scrolls up: the same movement, tied
   to the scroll. Where the browser cannot do it, everything is simply there. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    body.site main > section:not(:first-of-type) > *, body.site main > .mk-section > * {
      animation: mkReveal linear both;
      animation-timeline: view();
      animation-range: entry 0px entry 260px;
    }
  }
}
@keyframes mkReveal { from { opacity: 0; transform: translateY(36px); } }

/* ── Type ── */
.mk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 16px;
}
.mk-eyebrow-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--mint-soft);
  flex-shrink: 0;
}
/* Large, light titles: the weight is in the size, not in the stroke */
.mk-h1 {
  font-size: clamp(40px, 6.2vw, 80px);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.045em;
  line-height: 1.03;
  text-wrap: balance;
  margin: 0 0 22px;
}
.mk-h2 {
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.04em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
}
.mk-h3 { font-size: 20px; font-weight: 500; color: var(--text); letter-spacing: -0.02em; margin: 0 0 8px; }
.mk-lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 46ch;
  margin: 0;
}
.mk-mark {
  color: inherit;
  background: linear-gradient(transparent 60%, var(--mint-mark) 60%, var(--mint-mark) 90%, transparent 90%);
  padding: 0 0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ── Buttons ── */
.mk-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--ink);
  color: #FFFFFF;
  border: none;
  border-radius: 100px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  padding: 15px 30px;
  min-height: 48px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
  letter-spacing: -0.1px;
}
/* Under the pointer a button of the site does not move, nor cast a shadow, nor its arrow: the colour changes, that is all */
.mk-btn-primary:hover { background: var(--ink-hover); }
.mk-btn-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
/* Or an arrow after the words (the calls to action down the page; the dot stays the button of the top of the
   homepage, which becomes its header) */
.mk-btn-arrow { flex-shrink: 0; margin-right: -4px; }
/* The one movement kept: the arrow of a call to action (.mk-btn-go: "Get Started", "Create my account", LinkedIn)
   moves on under the pointer, or the keyboard */
.mk-btn-go .mk-btn-arrow { transition: transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1); }
.mk-btn-go:is(:hover, :focus-visible) .mk-btn-arrow { transform: translateX(4px); }
/* The same pill on a night section: white, ink text */
.mk-btn-light {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 15px 30px; border: none; border-radius: 100px;
  background: #fff; color: var(--text); font-family: var(--font); font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: background 0.2s;
}
.mk-btn-light:hover { background: #EDEDED; }
.mk-btn-light .mk-btn-dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(0,245,160,0.25); }
.mk-btn-light:focus-visible { outline-color: #fff; }
.mk-btn-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

/* ── Surfaces ── */
.mk-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
}
/* The mint panel behind a picture of the app (pictures with a transparent ground, their shadow kept) */
.mk-panel {
  background: var(--panel);
  border: 1px solid rgba(17,17,19,0.05);
  border-radius: 28px;
  padding: 28px;
}
.mk-panel img { display: block; width: 100%; height: auto; }
.mk-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--text);
  color: var(--accent);
  flex-shrink: 0;
}
.mk-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mk-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.55; color: var(--text); }
.mk-checks li::before {
  content: '';
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--mint-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111113' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* ── The hero of a page that is not the homepage ── */
.mk-page-hero { padding: 72px 24px 64px; background: var(--bg); text-align: center; }
.mk-page-hero .mk-lead { margin: 0 auto; max-width: 40em; text-wrap: balance; }
.mk-page-hero .mk-actions { margin-top: 34px; }
.mk-actions { display: flex; align-items: center; justify-content: center; gap: 12px 26px; flex-wrap: wrap; }

/* ── FAQ (scripts/site/site.js opens and closes it) ── */
.mk-faq-inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 40px 72px;
  align-items: start;
}
.mk-faq-side { position: sticky; top: 96px; }
.mk-faq-side .mk-h2 { margin-bottom: 18px; }
.mk-faq-more { font-size: 15px; color: var(--text-dim); margin: 0; line-height: 1.6; }
.mk-faq-more a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mk-faq-list { display: flex; flex-direction: column; border-top: 1.5px solid var(--border); }
.mk-faq-item { border-bottom: 1.5px solid var(--border); transition: border-color 0.2s; }
.mk-faq-item.open { border-bottom-color: var(--accent); }
.mk-faq-trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 22px 0; min-height: 44px; background: none; border: none; cursor: pointer;
  font-family: var(--font); font-size: 16px; font-weight: 600; color: var(--text);
  text-align: left; gap: 16px;
}
.mk-faq-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), color 0.2s; }
.mk-faq-item.open .mk-faq-chevron { transform: rotate(180deg); color: var(--text); }
.mk-faq-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s cubic-bezier(0.4,0,0.2,1); }
.mk-faq-item.open .mk-faq-content { grid-template-rows: 1fr; }
.mk-faq-body { overflow: hidden; }
.mk-faq-body p { font-size: 15px; color: var(--text-dim); line-height: 1.75; padding: 0 40px 22px 0; margin: 0; max-width: 62ch; }

/* ── Closing call: a night band, centred ── */
.mk-cta { padding: 112px 24px; background: var(--night); text-align: center; }
.mk-cta-panel { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.mk-cta-panel .mk-h2 { color: #fff; margin: 0 auto 16px; max-width: 18ch; }
.mk-cta-panel .mk-lead { color: var(--night-dim); margin: 0 auto; text-align: center; }
.mk-cta-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mk-cta .mk-btn-primary { background: #fff; color: var(--text); }
.mk-cta .mk-btn-primary:hover { background: #EDEDED; }
.mk-cta .mk-btn-link { color: #fff; }

/* ── Responsive ── */
@media (max-width: 980px) {
  .mk-head-split { grid-template-columns: 1fr; }
  .mk-faq-inner { grid-template-columns: 1fr; }
  .mk-faq-side { position: static; }
}
@media (max-width: 640px) {
  .mk-section { padding: 80px 16px; }
  .mk-page-hero { padding: 48px 16px 48px; }
  .mk-head-split { margin-bottom: 40px; }
  .mk-panel { padding: 14px; border-radius: 22px; }
  .mk-cta { padding: 80px 16px; }
  .mk-faq-body p { padding-right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-btn-primary, .mk-btn-go .mk-btn-arrow, .mk-faq-content, .mk-faq-chevron { transition: none; }
}