/* Rendezo design system.
   Loaded by the landing page and by every blog page, so the two are one site
   by construction. Before this file the blog carried a hand-copied set of the
   landing tokens with a "keep them in sync" comment on top, and they had
   already drifted once. Page specific styles stay in the page itself.

   Contrast, measured against #fff and against --paper:
     --ink   18.7 / 17.6
     --body   7.3 /  6.9
     --muted  4.8 /  4.5   (the old #7a7a84 was 4.25 on white, under AA) */

:root {
  --ink: #121212;
  --body: #55565f;
  --muted: #6f7280;
  --line: #e8e9ee;
  --line-strong: #d7d8e0;
  --paper: #f7f8fa;
  --accent: #4f46e5;
  --accent-soft: rgba(79, 70, 229, 0.08);
  --accent-marker: rgba(79, 70, 229, 0.16);

  /* Type scale. Before this the pages used more than forty different font
     sizes, many within half a pixel of each other, which is what makes text
     look subtly wrong: nothing shares a step with anything else. Every size on
     the site is now one of these. */
  --fs-display: clamp(2.75rem, 6vw, 4.5rem);
  --fs-h2: clamp(1.875rem, 3.6vw, 2.75rem);
  --fs-h4: 1.375rem;
  --fs-h3: 1.125rem;
  --fs-lead: clamp(1.0625rem, 1.5vw, 1.25rem);
  --fs-base: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.875rem;
  --fs-2xs: 0.8125rem;
  --fs-label: 0.75rem;
  --fs-micro: 0.6875rem;

  /* Line height falls as the type grows; body copy needs the most air. */
  --lh-display: 1.08;
  --lh-heading: 1.16;
  --lh-snug: 1.35;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  /* Tracking tightens as the type grows, and opens up for small caps labels. */
  --ls-display: -0.04em;
  --ls-heading: -0.03em;
  --ls-tight: -0.02em;
  --ls-label: 0.08em;

  /* Meaningful colour. Green is what you are given or keep, amber and red are
     what booking by hand costs you. Measured on white: 5.02, 5.02, 4.83. */
  --ok: #15803d;
  --warn: #b45309;
  --warn-soft: #fdf1e3;
  --bad: #dc2626;
  --bad-soft: #fdeaea;

  /* Text on the dark sections. */
  --on-dark: #b9bbc4;
  --on-dark-muted: #a9abb6;
  --on-dark-faint: #8b8d97;
  --on-dark-ok: #4ade80;

  --ink-hover: #2c2c33;
  --line-hover: #b9bac4;

  --r-xs: 8px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 28px;

  --wrap: 1104px;
  --wrap-inset: 32px;
  --nav-h: 68px;
  --section-space: 120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #fff;
  color: var(--body);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 90;
  background: var(--ink); color: #fff; padding: 10px 16px;
  border-radius: 0 0 8px 0; font-size: var(--fs-xs); text-decoration: none;
}
.skip:focus { left: 0; }

/* Typography.
   Large and light rather than large and heavy: weight 600 at this size reads
   as considered, weight 800 reads as loud. */
h1, h2, h3, h4 { color: var(--ink); }

/* Line height at display sizes: 1.02 left roughly one pixel between three
   72px lines, so the headline read as a solid block and the underlined phrase
   touched the line below it. */
h1 {
  font-size: var(--fs-display);
  font-weight: 600; line-height: var(--lh-display); letter-spacing: var(--ls-display);
}
h2 {
  font-size: var(--fs-h2);
  font-weight: 600; line-height: var(--lh-heading); letter-spacing: var(--ls-heading);
}
h3 {
  font-size: var(--fs-h3);
  font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--ls-tight);
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
  font-size: var(--fs-label); font-weight: 700; line-height: var(--lh-snug);
  letter-spacing: var(--ls-label); text-transform: uppercase;
}

/* Layout */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--wrap-inset); }

.section { padding: var(--section-space) 0; }
/* Every section is white, so the only thing separating two of them is one
   hairline. The dark closing section brings its own edge. */
.section + .section:not(.final) { border-top: 1px solid var(--line); }

.head { max-width: 760px; }
.head .eyebrow { margin-bottom: 20px; }
.head h2 + .lead { margin-top: 18px; }
.head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* Reveal on scroll, only when JS is running and motion is welcome */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Depth is used for one thing only: a surface that genuinely sits on another
   layer gets a shadow (the mobile menu panel, the chat card over the
   dashboard, the play button over the video). Everything on the page plane is
   separated by a single hairline instead, and hover darkens that hairline
   rather than adding a shadow. */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 14px 26px;
  border: 1px solid transparent; border-radius: var(--r);
  font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-snug);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--ink-hover); transform: translateY(-1px); }
.btn-outline { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--line-hover); transform: translateY(-1px); }
.btn-sm { min-height: 42px; padding: 10px 18px; border-radius: var(--r-sm); font-size: var(--fs-xs); }
.btn-lg { min-height: 58px; padding: 17px 32px; font-size: var(--fs-base); }
@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
}

/* Nav.
   At the top of the page it is invisible and full width, sitting inside the
   hero. On scroll it does not just change colour, it changes shape: the bar
   pulls in from both sides, rounds into a pill and lifts on frosted glass. */
.site-nav { position: sticky; top: 0; z-index: 70; padding: 0 22px; transition: padding 0.28s ease; }
.site-nav.is-scrolled { padding-top: 12px; }
.nav-surface {
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  border: 1px solid transparent; border-radius: 999px;
  transition: max-width 0.28s ease, background 0.28s ease, border-color 0.28s ease,
              box-shadow 0.28s ease, padding 0.28s ease;
}
.site-nav.is-scrolled .nav-surface {
  max-width: 960px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-color: rgba(14, 14, 18, 0.06);
  /* Layered rather than one big blur: a hairline contact shadow, a short
     mid one and a wide faint one. Plus an inset highlight along the top
     edge, which is what makes frosted glass read as glass. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 1px 1px rgba(8, 9, 12, 0.03),
    0 4px 10px -6px rgba(8, 9, 12, 0.07),
    0 16px 36px -20px rgba(8, 9, 12, 0.14);
}
.site-nav.is-scrolled .nav-in { height: 60px; }
@media (prefers-reduced-motion: reduce) {
  .site-nav, .nav-surface { transition: none; }
}
.nav-in { display: flex; align-items: center; gap: 24px; height: var(--nav-h); transition: height 0.28s ease; }

/* The mark is the product in one picture: a message bubble with the booking
   confirmed inside it. Same mark as the panel logo and the favicon, so the
   site, the app and the browser tab all say the same thing. */
.logo {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); text-decoration: none;
  font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--ls-heading);
}
.logo svg { width: 26px; height: 26px; flex: none; color: var(--accent); }
.logo .tick { fill: none; stroke: #fff; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
.section.dark .logo, footer .logo { color: inherit; }

.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 20px; margin-right: auto; }
.nav-links a {
  padding: 8px 12px; border-radius: var(--r-sm);
  color: var(--body); text-decoration: none;
  font-size: var(--fs-xs); font-weight: 500;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-links a:hover { color: var(--ink); background: var(--paper); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Inside a pill everything is a pill: a 10px corner next to a 999px one reads
   as a mistake, not as a detail. */
.site-nav .btn, .nav-links a { border-radius: 999px; }
/* On the frosted bar a white button with a hairline disappeared, so the
   secondary action reads on its own tint instead of on white. */
.site-nav .btn-outline { background: var(--paper); border-color: var(--line-strong); }
.site-nav .btn-outline:hover { background: #fff; border-color: var(--line-hover); }

/* Mobile menu. A <details> element so it works with no JavaScript at all;
   site.js only adds the scroll lock and the click-outside close. */
.nav-mobile { display: none; margin-left: auto; }
.nav-mobile summary {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-sm);
  color: var(--ink); cursor: pointer; list-style: none;
}
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav-mobile summary svg path { transform-box: fill-box; transform-origin: center; transition: transform 0.18s ease, opacity 0.18s ease; }
.nav-mobile[open] summary svg path:first-child { transform: translateY(5px) rotate(45deg); }
.nav-mobile[open] summary svg path:nth-child(2) { opacity: 0; }
.nav-mobile[open] summary svg path:last-child { transform: translateY(-5px) rotate(-45deg); }
.nav-mobile-panel { display: grid; gap: 4px; }
.nav-mobile-panel a:not(.btn) {
  padding: 13px 12px; border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; font-size: var(--fs-base); font-weight: 500;
}
.nav-mobile-panel a:not(.btn):hover { background: var(--paper); }
.nav-mobile-panel .btn { width: 100%; margin-top: 8px; }
.nav-mobile-panel hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0 6px; }

@media (max-width: 900px) {
  body.menu-open { overflow: hidden; }
  /* The panel drops out of the bar, so on a phone the bar is a plain opaque
     strip from the start, with no island behaviour. */
  .site-nav, .site-nav.is-scrolled { padding: 0; background: #fff; border-bottom: 1px solid var(--line); }
  .nav-surface, .site-nav.is-scrolled .nav-surface {
    max-width: none; padding: 0; border-radius: 0; border-color: transparent;
    background: transparent; box-shadow: none; backdrop-filter: none;
  }
  .site-nav.is-scrolled .nav-in { height: var(--nav-h); }
  .nav-links, .nav-actions { display: none; }
  .nav-mobile { display: block; }
  .nav-mobile-panel {
    position: absolute; left: 0; right: 0; top: var(--nav-h);
    height: calc(100dvh - var(--nav-h)); align-content: start;
    padding: 12px 22px 24px; overflow-y: auto;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 36px -30px rgba(8, 9, 12, 0.45);
  }
}

/* Footer. Two bands: who this is and where to go, then the legal line on its
   own. As one flex row the disclaimer wrapped under the brand line and the
   links were left stranded in the corner. */
footer { border-top: 1px solid var(--line); padding: 56px 0 40px; font-size: var(--fs-2xs); color: var(--muted); }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; flex-wrap: wrap; }
.footer-brand { display: grid; gap: 12px; max-width: 46ch; }
.footer-brand .logo { font-size: var(--fs-h3); }
.footer-brand .logo svg { width: 22px; height: 22px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.footer-legal {
  margin-top: 32px; padding-top: 22px;
  border-top: 1px solid var(--line); font-size: var(--fs-2xs);
}
footer a { color: var(--body); text-decoration: none; }
footer a:hover { color: var(--ink); }

@media (max-width: 620px) {
  :root { --section-space: 84px; --wrap-inset: 22px; }
}