/* Intellayer marketing site.
   Ported from the Claude Design canvas (project 18771cfc), whose artboards carry
   every rule as an inline style attribute. Inline styles cannot express hover,
   focus or media queries, so the canvas encodes hover as a `style-hover`
   attribute its runtime reads and has no breakpoints at all -- both are
   reconstructed here. Colour values, spacing and type scale are the canvas
   values unchanged. */

/* -------------------------------------------------------------------- tokens
   Palette is the product's own brand file (the web app's
   brand/brand.intellayer.ts), not a set picked for the marketing site: --indigo and
   --ink are BRAND.primaryPalette['500'] and BRAND.sidebarBg. Keep them in step
   with that file so the site and the app a visitor lands in agree. */
:root {
  --ink: #1A1A2E;
  --indigo: #3D3FF0;
  --indigo-dark: #2A2CC4;
  --indigo-300: #7B7FF2;
  --indigo-200: #C7C9F4;
  --indigo-50: #EEEFFD;
  --bg: #F6F6FA;
  --panel: #fff;
  --line: #E2E3EE;
  --body: #5B5C75;
  --muted: #8A8BA3;
  --on-dark: #B9BAD1;
  --on-dark-strong: #C7C9F4;
  --rule-dark: #2C2C48;
  --shell: 1200px;
  --pad: 64px;
  --radius: 16px;
  --radius-lg: 20px;
  --font: 'Schibsted Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

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

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

/* The UA sheet hides [hidden] with `display: none`, which any author `display`
   beats on specificity -- so `.btn`, `.form` and friends were rendering their
   hidden state anyway. Everything gated by JS here (the signup links, the
   contact success panel, the form error) sets display, so this has to win. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--indigo); text-decoration: none; }
a:hover { color: var(--indigo-dark); }

img, svg { max-width: 100%; }

h1, h2, h3 { margin: 0; letter-spacing: -0.02em; font-weight: 900; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

/* Visible keyboard focus. The canvas has no focus styling -- an artboard is
   never tabbed through -- so this is added rather than ported. */
:where(a, button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--indigo);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  font-weight: 700;
  z-index: 100;
}
.skip:focus { left: 0; color: #fff; }

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  width: 100%;
}

.page { min-height: 100vh; display: flex; flex-direction: column; }

/* --------------------------------------------------------------------- nav */
.nav { padding: 0 var(--pad); position: relative; }
.nav--light { background: var(--panel); border-bottom: 1px solid var(--line); }
/* Dark nav sits directly on top of the hero (or the contact page's dark body)
   and shares its ground, so there is no rule between them. */
.nav--dark { background: var(--ink); color: #fff; }

.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
}

.nav__logo { display: block; flex: none; }
.nav__logo img { height: 30px; display: block; }

.nav__links {
  display: flex;
  gap: 28px;
  align-items: center;
  font-size: 15px;
}

.nav__links a { color: var(--body); }
.nav__links a:hover { color: var(--ink); }
.nav__links a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.nav__links .btn { color: #fff; }
.nav__links .btn:hover { color: #fff; }

/* Sign in sits between the marketing links and the demo button: returning
   users look top-right, and a plain link there does not compete with the
   primary CTA the way a second button would. */
.nav__signin { font-weight: 700; }

.nav--dark .nav__links a { color: var(--on-dark-strong); }
.nav--dark .nav__links a:hover { color: #fff; }
.nav--dark .nav__links a[aria-current="page"] { color: #fff; font-weight: 700; }

/* Hamburger. Hidden until the links no longer fit; `.js` is set by an inline
   script in <head> so a no-JS visitor keeps the full link list instead of a
   toggle that cannot open. */
.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  cursor: pointer;
  line-height: 0;
  color: var(--ink);
}
.nav--dark .nav__toggle { border-color: #3A3A5C; color: #fff; }
.nav__toggle svg { display: block; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-block;
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  padding: 11px 24px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--indigo); color: #fff; }
.btn--primary:hover { background: var(--indigo-dark); color: #fff; }

.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--indigo); color: #fff; }

.btn--ghost { border-color: #44446A; color: var(--on-dark-strong); background: transparent; }
.btn--ghost:hover { border-color: var(--indigo-300); color: #fff; }

.btn--tint { background: var(--indigo-50); color: var(--indigo); }
.btn--tint:hover { background: var(--indigo-200); color: var(--indigo-dark); }

.btn--lg { padding: 15px 30px; font-size: 16px; }

/* ---------------------------------------------------------------- hero */
/* The 56px above the eyebrow is padding on .hero, NOT margin on .hero__inner.
   As a margin it collapsed straight through the zero-padding hero and pushed
   the whole dark block down, leaving a strip of page background showing
   between the nav and the hero. */
.hero {
  background: var(--ink);
  color: #fff;
  padding: 56px var(--pad) 72px;
}
.hero__inner {
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
}
.eyebrow {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--indigo-300);
  font-weight: 700;
}
.hero h1 { font-size: 68px; line-height: 1.04; letter-spacing: -0.03em; }
.hero__lead { font-size: 20px; line-height: 1.6; color: var(--on-dark); max-width: 600px; }
.hero__actions { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }

/* App mock. Sits on the seam between the dark hero and the light page, which
   the gradient's hard 50% stop draws. */
.mock-band { background: linear-gradient(var(--ink) 50%, var(--bg) 50%); padding: 0 var(--pad); }
.mock {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--panel);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 12px 48px rgba(26, 26, 46, .25);
  height: 440px;
  display: flex;
  overflow: hidden;
}
.mock__rail {
  width: 210px;
  background: var(--bg);
  border-right: 1px solid var(--line);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: none;
}
.mock__rail img { width: 24px; }
.mock__line { height: 10px; background: #DBDCEA; border-radius: 5px; }
.mock__line--a { width: 80%; }
.mock__line--b { width: 65%; }
.mock__line--c { width: 72%; }
.mock__line--on { width: 55%; background: var(--indigo-200); }
.mock__board { flex: 1; padding: 24px; display: flex; gap: 16px; min-width: 0; }
.mock__col {
  flex: 1;
  background: var(--bg);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.mock__col h3 { font-size: 12px; font-weight: 700; color: #6B6C85; letter-spacing: .05em; }
.mock__card { height: 60px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.mock__card--won { background: var(--indigo-50); border-color: var(--indigo-200); }

/* The captured-screenshot version of the hero frame. Keeps the band, the
   border and the shadow; drops the 440px height, because the abstract mock was
   2.5:1 and a real 16:10 capture is not — pinning the height would crop it.
   The frame is then whatever the image's own aspect makes it, which is why the
   <img> carries width/height attributes: they reserve the space before it
   loads, so the half-ink gradient behind it does not jump. */
.mock--shot { height: auto; display: block; }
.mock--shot img { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------------- video */
/* Same width, radius and shadow as .mock, so the film reads as the same kind
   of object as the product frame above it. The ink background is the poster's
   own colour, so nothing flashes while the poster loads. */
.video {
  position: relative;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 12px 48px rgba(26, 26, 46, .25);
}
.video video { display: block; width: 100%; height: auto; }
.video__lead { font-size: 19px; line-height: 1.6; color: var(--body); max-width: 620px; }

/* Covers the whole poster, so a click anywhere starts playback. The pill sits
   dead centre, which on this poster is the gap between the floating cards. */
.video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.video__pill { display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 12px 32px rgba(61, 63, 240, .45); }
.video__play:hover .video__pill { background: var(--indigo-dark); }
/* The global focus ring would outline the whole frame (and be clipped by its
   overflow); put it on the pill instead, in white against the dark poster. */
.video__play:focus-visible { outline: none; }
.video__play:focus-visible .video__pill { outline: 2px solid #fff; outline-offset: 3px; }
.video__pill time { padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .35); font-weight: 500; }

/* ------------------------------------------------------------- sections */
.section {
  padding: 88px var(--pad) 32px;
  max-width: var(--shell);
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.section--tight { padding-top: 48px; padding-bottom: 48px; }
.section--center { align-items: center; }
.section__head { display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }
.section__title { font-size: 44px; text-align: center; }

.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
a.card:hover { border-color: var(--indigo-300); color: inherit; transform: translateY(-2px); }
.card h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.card p { font-size: 15px; line-height: 1.6; color: var(--body); }
.card__more { font-size: 15px; font-weight: 700; color: var(--indigo); margin-top: 4px; }

/* The three-bar brand mark, reused as a section accent. */
.bar { width: 40px; height: 9px; border-radius: 5px; background: var(--indigo); flex: none; }
.bar--2 { background: var(--indigo-300); }
.bar--3 { background: var(--indigo-200); }
.bar--ink { background: var(--ink); }
.bars { display: flex; gap: 6px; }
.bars .bar:first-child { transform: rotate(-14deg); }

/* Capability strip. */
.strip {
  padding: 48px var(--pad);
  max-width: var(--shell);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.strip__label { font-size: 15px; color: var(--muted); }
.strip__item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

/* ------------------------------------------------------------------ CTA */
.cta-wrap { padding: 32px var(--pad) 88px; max-width: var(--shell); margin: 0 auto; width: 100%; }
.cta {
  background: var(--ink);
  border-radius: var(--radius-lg);
  color: #fff;
  padding: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.cta h2 { font-size: 40px; }
.cta p { font-size: 17px; color: var(--on-dark); max-width: 480px; }
.cta .btn { margin-top: 6px; }

/* Row variant: heading left, button right. */
.cta--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  gap: 32px;
  flex-wrap: wrap;
  padding: 56px;
}
.cta--row h2 { font-size: 32px; }
.cta--row .btn { margin-top: 0; flex: none; }

/* --------------------------------------------------------------- footer */
.footer {
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding: 40px var(--pad);
  margin-top: auto;
}
.footer__inner { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer__brand { display: flex; flex-direction: column; gap: 12px; }
.footer__brand img { height: 26px; align-self: flex-start; }
.footer__tag { font-size: 14px; color: var(--muted); }
.footer__cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer__col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer__col strong { color: var(--ink); }
.footer__col a { color: var(--body); }
.footer__col a:hover { color: var(--ink); }
/* "Cookie settings": a button (it changes a setting, it goes nowhere) that
   has to sit in the Legal column looking like one of its links. */
.footer__button {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--body);
  text-align: left;
  cursor: pointer;
}
.footer__button:hover { color: var(--ink); }

/* ------------------------------------------------------------- consent */
/* Analytics consent banner (site-assets/js/consent.js). Above the nav
   (z-index 100). Not a modal: the page stays usable, and nothing is sent to
   Google while the question stays unanswered. */
.consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 150;
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 48px rgba(26, 26, 46, .25);
}
.consent__text { margin-bottom: 14px; font-size: 15px; line-height: 1.55; color: var(--body); }
.consent__text a { font-weight: 700; }
.consent__actions { display: flex; gap: 10px; }
/* Decline and Accept share one style and one width: refusing must be as easy
   as agreeing, or the consent is not freely given. */
.consent__btn { flex: 1 1 0; }
.footer__legal {
  max-width: var(--shell);
  margin: 28px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.footer__legal a { color: var(--muted); }
.footer__legal a:hover { color: var(--ink); }
.footer__legal nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* Slim footer used on interior pages. */
.footer--slim { padding: 28px var(--pad); }
.footer--slim .footer__inner { align-items: center; font-size: 14px; }
.footer--slim img { height: 24px; display: block; }
.footer--slim nav { display: flex; gap: 24px; flex-wrap: wrap; }
.footer--slim nav a { color: var(--body); }
.footer--slim nav a:hover { color: var(--ink); }

/* Dark footer, contact page. */
.footer--dark { background: transparent; border-top: 1px solid var(--rule-dark); }
.footer--dark .footer__col strong { color: #fff; }
.footer--dark .footer__col a,
.footer--dark nav a,
.footer--dark .footer__legal,
.footer--dark .footer__legal a { color: var(--on-dark); }
.footer--dark .footer__col a:hover,
.footer--dark nav a:hover,
.footer--dark .footer__legal a:hover { color: #fff; }
.footer--dark .footer__legal { border-top-color: var(--rule-dark); }

/* -------------------------------------------------- feature page header */
.subhead {
  padding: 56px var(--pad) 0;
  max-width: var(--shell);
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
}
.pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pill {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--body);
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}
.pill:hover { border-color: var(--indigo-300); color: var(--ink); }
.pill[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.pill[aria-current="page"]:hover { color: #fff; }

.subhead h1 { margin-top: 24px; font-size: 54px; line-height: 1.06; letter-spacing: -0.03em; max-width: 720px; }
.subhead__lead { font-size: 19px; line-height: 1.6; color: var(--body); max-width: 580px; }

/* Alternating feature rows. */
.rows {
  padding: 64px var(--pad);
  max-width: var(--shell);
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.row__text { display: flex; flex-direction: column; gap: 14px; }
.row__text h2 { font-size: 32px; }
.row__text p { font-size: 16px; line-height: 1.65; color: var(--body); }
.row__media {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  padding: 24px;
  text-align: center;
}

/* Once a row holds a real screenshot the box stops being a caption slot: the
   padding, the centring and the min-height all belong to the placeholder, not
   to the image. `min-height: 0` matters — without it a wide screenshot in a
   narrow column gets letterboxed by the 300px floor. */
.row__media--shot {
  padding: 0;
  min-height: 0;
  overflow: hidden;
  display: block;
}
.row__media--shot img { display: block; width: 100%; height: auto; }

/* A row carrying a real screenshot stops being a two-column layout.
   Two columns gave the image 508px -- (1200 shell - 128 padding - 56 gap) / 2 --
   and these captures frame the whole 1600px-wide app, so they landed at a 3.15x
   downscale that put the product's own 14px text at roughly 4px. Illegible
   reads as broken, and "the screenshots look stretched" was that: nothing was
   ever out of proportion, it was just too small to resolve. Stacking gives the
   image the full 1072px, about 1.25x once the nav rail is cropped away, which
   is the difference between a product shot and a grey smear.
   The text keeps a measure of its own: body copy set across 1072px runs far
   past the ~75-character line the rest of the site holds to. */
.row--shot { grid-template-columns: 1fr; gap: 24px; align-items: start; }
.row--shot .row__text { max-width: 680px; }

/* Reversed rows keep the text first in source order so it still reads first
   when the grid collapses to one column. Not used by .row--shot rows: with one
   column this only lifts the image above the copy that introduces it. */
@media (min-width: 861px) {
  .row--flip .row__media { order: -1; }
}

/* `.row__text p` is (0,1,1) and would out-specify a bare `.note`, so the
   plan-availability caveats rendered at full body size. Named explicitly
   rather than bumped with !important. */
.note,
.row__text .note { font-size: 13px; color: var(--muted); }

/* -------------------------------------------------------------- pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; align-items: stretch; }
.plans--two { grid-template-columns: repeat(2, 1fr); max-width: 800px; margin: 0 auto; }

.plan {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--ink);
}
.plan__name { font-size: 15px; font-weight: 700; color: var(--indigo); letter-spacing: .04em; text-transform: uppercase; }
.plan__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan__amount { font-size: 46px; font-weight: 900; letter-spacing: -0.02em; white-space: nowrap; }
.plan__period { font-size: 15px; color: var(--body); }
.plan__desc { font-size: 15px; line-height: 1.6; color: var(--body); }
.plan__list { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.plan__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.plan__list li::before {
  content: "";
  width: 16px;
  height: 7px;
  border-radius: 4px;
  background: var(--indigo);
  margin-top: 7px;
  flex: none;
}
.plan .btn { margin-top: auto; }

/* Featured plan inverts. */
.plan--featured { background: var(--ink); border-color: var(--ink); color: #fff; }
.plan--featured .plan__name { color: var(--indigo-300); }
.plan--featured .plan__period,
.plan--featured .plan__desc { color: var(--on-dark); }
.plan--featured .plan__list li::before { background: var(--indigo-300); }

.plan__badge {
  align-self: flex-start;
  background: var(--indigo-50);
  color: var(--indigo);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.plan--featured .plan__badge { background: var(--indigo); color: #fff; }

/* Four plans (the CRM ladder): four across on the full shell, two by two
   below 1180px, one column on phones. Tighter padding so a long feature name
   still fits a quarter of the 1072px content width. */
.plans--four { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.plans--four .plan { padding: 30px 22px; }
.plans--four .plan__amount { font-size: 40px; }

/* What every plan includes: the checklist below in two columns. */
.includes { width: 100%; max-width: 900px; display: flex; flex-direction: column; gap: 20px; }
.includes h2 { font-size: 28px; text-align: center; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.panel h2 { font-size: 22px; }
.panel p { font-size: 15px; color: var(--body); }
.panel .btn { flex: none; }
.panel__text { display: flex; flex-direction: column; gap: 6px; }
.panel__actions { display: flex; gap: 12px; flex-wrap: wrap; flex: none; }

/* Self-serve signup. Every one of these carries `hidden` in the markup and is
   revealed by main.js only when the platform flag is on, so the default state
   of the site is the honest one: signup.selfServe.crm.enabled defaults OFF,
   and while it is off /auth/register/crm just bounces to /auth/login. */
.signup-link { font-weight: 700; }

/* Language switch (EN <-> EL), the same treatment the generated legal pages
   give it in legal.css, which the marketing pages do not load. */
.nav__lang { font-weight: 700; letter-spacing: .04em; }

/* A checklist for text rows and the API page: the plan list's bar bullet at
   body size. Block items with a positioned bullet, not flex like
   .plan__list: these lines mix text with <strong> and <code>, and a flex row
   would turn each of those into a column of its own. */
.ticks { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.6; color: var(--body); }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 16px;
  height: 7px;
  border-radius: 4px;
  background: var(--indigo);
}
.ticks strong { color: var(--ink); }
.ticks--two { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 12px; }

/* Header names, event names and paths quoted in copy. */
.row__text code, .ticks code, .card code, .faq code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  background: var(--indigo-50);
  color: var(--ink);
  padding: 1px 6px;
  border-radius: 6px;
  overflow-wrap: anywhere;
}

/* Cards that inform rather than link: no hover lift (that is a.card only). */
.cards--plain .card { padding: 28px; }

/* ------------------------------------------------------------------ FAQ */
.faq { max-width: 820px; display: flex; flex-direction: column; gap: 12px; width: 100%; }
.faq details {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 26px;
}
.faq summary {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  margin-top: -4px;
  flex: none;
  transition: transform .15s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq p { margin: 12px 0 4px; font-size: 15px; line-height: 1.65; color: var(--body); }

/* ---------------------------------------------------------------- prose */
.prose { max-width: 760px; padding: 80px var(--pad); margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 28px; }
.prose h1 { font-size: 54px; line-height: 1.06; letter-spacing: -0.03em; }
.prose__body { font-size: 18px; line-height: 1.75; color: var(--body); display: flex; flex-direction: column; gap: 20px; }
.prose .btn { align-self: flex-start; }

/* -------------------------------------------------------------- contact */
body.is-dark { background: var(--ink); color: #fff; }
body.is-dark a { color: var(--indigo-300); }
body.is-dark a:hover { color: var(--indigo-200); }

/* Re-assert the footer's own palette. `body.is-dark a` and `.footer--dark nav a`
   tie on specificity, and this block comes later in the file, so without these
   the contact page's footer links came out indigo instead of muted. */
body.is-dark .footer--dark nav a,
body.is-dark .footer--dark .footer__legal a { color: var(--on-dark); }
body.is-dark .footer--dark nav a:hover,
body.is-dark .footer--dark .footer__legal a:hover { color: #fff; }

.contact {
  padding: 56px var(--pad) 88px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.contact__intro { display: flex; flex-direction: column; gap: 20px; }
.contact__intro h1 { font-size: 54px; line-height: 1.06; letter-spacing: -0.03em; }
.contact__intro p { font-size: 18px; line-height: 1.65; color: var(--on-dark); }
.contact__points { display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: var(--on-dark-strong); list-style: none; padding: 0; margin: 0; }
.contact__points li { display: flex; gap: 12px; align-items: center; }
.contact__points .bar { width: 18px; height: 7px; }

.form {
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--ink);
}
.contact__panels { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Cal.com scheduler. Same white card as the form so the two read as one column
   of panels, the way the portal's /get-started page stacks them. */
.booking {
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  color: var(--ink);
}
.booking__title { font-size: 20px; }
.booking__lead { font-size: 15px; color: var(--body); }
.booking .btn { margin-top: 6px; }
.booking__status { font-size: 14px; color: var(--body); }
.booking__note { font-size: 13px; color: var(--muted); line-height: 1.55; }
/* Cal.com sizes its own iframe; this only reserves the row once one exists. */
#booking-frame { width: 100%; }
#booking-frame:not(:empty) { min-height: 560px; margin-top: 8px; }
#booking-direct { font-size: 14px; font-weight: 700; }

.form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; }
.form input, .form textarea {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
  color-scheme: light;
  width: 100%;
}
.form textarea { resize: vertical; min-height: 84px; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--indigo); outline-offset: 1px; border-color: var(--indigo); }
.form .btn { padding: 15px; font-size: 16px; }
.form__error { font-size: 13px; color: #C0362C; text-align: center; }
.form__hint { font-size: 13px; color: var(--muted); line-height: 1.55; }
.form__ok { display: flex; flex-direction: column; gap: 10px; padding: 24px 0; text-align: center; }
.form__ok:focus { outline: none; }

/* Honeypot. Moved off-screen rather than hidden with display:none or
   visibility:hidden, both of which a bot can cheaply detect and skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__ok strong { font-size: 24px; font-weight: 900; }
.form__ok span { font-size: 15px; color: var(--body); }

/* ------------------------------------------------------------ responsive
   The canvas is a fixed-width artboard and defines no breakpoints; everything
   below is added. 980px is where the 1200px shell plus 64px gutters stops
   fitting, 860px where two-column grids start crowding. */
/* Above the 980px collapse the nav still holds eight items, and the Greek
   labels are longer than the English ones, so tighten the gaps. The four
   plans go two by two before a quarter of the shell gets too narrow. */
@media (max-width: 1180px) {
  .nav__links { gap: 18px; }
  .plans--four { grid-template-columns: repeat(2, 1fr); max-width: 800px; margin: 0 auto; }
}

@media (max-width: 980px) {
  :root { --pad: 40px; }
  .hero h1 { font-size: 52px; }
  .section__title { font-size: 36px; }
  .subhead h1, .prose h1, .contact__intro h1 { font-size: 42px; }
  .cta { padding: 48px 32px; }
  .cta h2 { font-size: 32px; }
  .cta--row { padding: 40px 32px; }
  .panel { padding: 32px; }
  .plans { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .plans--two { grid-template-columns: 1fr; }
  .plans--four { grid-template-columns: repeat(2, 1fr); max-width: 800px; }
  .footer__cols { gap: 40px; }
}

@media (max-width: 860px) {
  .row { grid-template-columns: 1fr; gap: 28px; }
  .contact { grid-template-columns: 1fr; gap: 40px; }
  .cards { grid-template-columns: 1fr; }
  .ticks--two { grid-template-columns: 1fr; }
  .mock { height: auto; flex-direction: column; }
  .mock__rail { width: auto; border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; align-items: center; }
  .mock__line { flex: 1; }
  .mock__board { flex-wrap: wrap; }
  .mock__col { min-width: 160px; }
}

@media (max-width: 720px) {
  :root { --pad: 24px; }
  .hero { padding-bottom: 56px; }
  .hero h1 { font-size: 38px; }
  .hero__lead { font-size: 17px; }
  .hero__actions { flex-direction: column; align-self: stretch; }
  .hero__actions .btn { width: 100%; }
  .section { padding-top: 56px; gap: 28px; }
  .subhead h1, .prose h1, .contact__intro h1 { font-size: 34px; }
  .section__title { font-size: 30px; }
  .video__lead { font-size: 17px; }
  .video__pill { padding: 10px 18px; font-size: 15px; }
  .cta h2, .cta--row h2 { font-size: 26px; }
  .row__text h2 { font-size: 26px; }
  .prose { padding-top: 48px; padding-bottom: 48px; }
  .rows { padding-top: 40px; padding-bottom: 40px; gap: 44px; }
  .form { padding: 24px; }
  .plans--four { grid-template-columns: 1fr; max-width: 480px; }
  .plans--four .plan { padding: 30px 26px; }
  .panel { flex-direction: column; align-items: flex-start; }
  .footer__inner { flex-direction: column; gap: 28px; }
  .footer__legal { flex-direction: column; gap: 12px; }
}

/* Nav collapses to a toggle at 980px, not 720px: with the API link and the
   language switch it holds eight items, and the Greek labels run past the
   viewport well before 720px. Without .js the links stay visible and simply
   wrap, which is worse-looking but usable -- a button that cannot open is not. */
@media (max-width: 980px) {
  .js .nav__toggle { display: block; }
  .js .nav__links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--pad) 20px;
    z-index: 50;
  }
  .js .nav--dark .nav__links { background: var(--ink); border-bottom-color: var(--rule-dark); }
  .js .nav__links[data-open="true"] { display: flex; }
  .js .nav__links a { padding: 13px 0; border-bottom: 1px solid var(--line); }
  .js .nav--dark .nav__links a { border-bottom-color: var(--rule-dark); }
  .js .nav__links .btn { margin-top: 14px; border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  a.card:hover { transform: none; }
}

/* ----------------------------------------------------------- price placeholders */
/* Prices come only from the API (main.js). Until it answers each card holds a
   neutral shape; with no JavaScript the noscript note stands in. */
.ph { display: block; height: 14px; width: 80%; margin: 10px 0; border-radius: 7px; background: var(--line); }
.ph--title { height: 22px; width: 55%; }
.ph--price { height: 40px; width: 50%; margin: 16px 0 20px; }
.ph--short { width: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .ph { animation: ph-pulse 1.4s ease-in-out infinite; }
}
@keyframes ph-pulse { 50% { opacity: 0.45; } }
.plan--placeholder { min-height: 360px; }
.plans-unavailable { width: 100%; text-align: center; }
html:not(.js) #plans { display: none; }

/* ------------------------------------------------------------- MCP panel */
/* The MCP server on /developers/, straight under the page head so it is seen. */
.mcp {
  background: var(--indigo-50);
  border: 1px solid var(--indigo-200);
  border-radius: var(--radius-lg);
  padding: 44px;
}
.mcp h2 { margin: 12px 0 12px; }
.mcp__lead { font-size: 18px; line-height: 1.6; color: var(--body); max-width: 820px; }
.mcp__cols { display: grid; grid-template-columns: 1fr 1.5fr; gap: 44px; margin-top: 30px; }
.mcp h3 { font-size: 18px; margin: 0 0 14px; color: var(--ink); }
.mcp__steps { margin: 0; padding-left: 22px; display: grid; gap: 12px; color: var(--body); line-height: 1.6; }
.mcp__steps strong { color: var(--ink); }
@media (max-width: 860px) {
  .mcp { padding: 26px 20px; }
  .mcp__cols { grid-template-columns: 1fr; gap: 28px; }
}

/* ----------------------------------------------------------- integrations */
/* Home page: four across, each card naming the plan it needs. */
.int-lead { max-width: 760px; margin: -8px auto 32px; text-align: center; font-size: 18px; line-height: 1.6; color: var(--body); }
.cards--four { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cards--four .card { padding: 24px; display: flex; flex-direction: column; }
.cards--four .card p { font-size: 15px; }
.card__plan { margin-top: auto; padding-top: 14px; font-size: 13px; font-weight: 700; color: var(--indigo); }
@media (max-width: 1180px) { .cards--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .cards--four { grid-template-columns: 1fr; } }

/* Menu links never wrap. The Greek menu needs about 1,260px (measured
   2026-10-07, with the Integrations link), so Greek pages use the toggle below
   1,280px; the rules are the 980px collapse above, scoped to lang="el". */
.nav__links a { white-space: nowrap; }
@media (max-width: 1279px) {
  html[lang="el"].js .nav__toggle { display: block; }
  html[lang="el"].js .nav__links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--pad) 20px;
    z-index: 50;
  }
  html[lang="el"].js .nav--dark .nav__links { background: var(--ink); border-bottom-color: var(--rule-dark); }
  html[lang="el"].js .nav__links[data-open="true"] { display: flex; }
  html[lang="el"].js .nav__links a { padding: 13px 0; border-bottom: 1px solid var(--line); }
  html[lang="el"].js .nav--dark .nav__links a { border-bottom-color: var(--rule-dark); }
  html[lang="el"].js .nav__links .btn { margin-top: 14px; border-bottom: 0; }
}