/* Clock Clerk marketing site — tokens and components per
   design/DESIGN.md ("cool dawn over product canvas"). One royal-blue accent
   does all the brand talking; everything else is cool neutral. Pills for
   anything you can press, two-tier rounding for cards (8px inside, 16–40px
   outside), and the product itself is the only imagery. */

:root {
  --color-snow-canvas: #fcfcfc;
  --color-lavender-wash: #f0f4fe;
  --color-midnight-ink: #020520;
  --color-graphite-body: #14141e;
  --color-slate-caption: #374151;
  --color-ash-helper: #6b7280;
  --color-stone-divider: #e2e8f0;
  --color-fog-surface: #f1f5f9;
  --color-royal-signal: #145aff;
  --color-cobalt-glow: #3b82f6;
  --color-mint-win: #16ca2e;
  --color-coral-lost: #f26052;
  --color-amber-pending: #ffa64d;
  --color-azure-focus: #0099ff;
  --surface-card: #ffffff;

  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-caption: 12px;
  --text-body-sm: 14px;   --leading-body-sm: 1.43;
  --text-body: 16px;      --leading-body: 1.63;
  --text-lede: 18px;
  --text-subheading: 20px;--leading-subheading: 1.4; --tracking-subheading: -0.16px;
  --text-heading-sm: 22px;--leading-heading-sm: 1.4; --tracking-heading-sm: -0.2px;
  --text-heading: 40px;   --leading-heading: 1.05;   --tracking-heading: -1.48px;
  --text-heading-lg: 56px;--leading-heading-lg: 1.05;--tracking-heading-lg: -1.51px;
  --text-display: 72px;   --leading-display: 1.05;   --tracking-display: -0.037em;

  --page-max-width: 1200px;
  --section-gap: 80px;

  --radius-cards: 8px;
  --radius-inputs: 12px;
  --radius-pipeline: 16px;
  --radius-feature: 40px;
  --radius-pill: 9999px;

  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 0px 4px -2px;
  --shadow-sm-2: rgba(0, 0, 0, 0.25) 0px 0px 4px -2px;
  --shadow-glow: rgba(20, 90, 255, 0.1) 0px 0px 100px -28px;
  --shadow-glow-2: rgba(20, 90, 255, 0.1) 0px 0px 50px -28px, rgba(0, 0, 0, 0.18) 0px 0px 3px -1px;
  --shadow-feature: rgba(0, 0, 0, 0.082) 0px 0.36px 1.8px -1.4px, rgba(0, 0, 0, 0.07) 0px 1.37px 6.87px -2.8px, rgba(0, 0, 0, 0.016) 0px 6px 30px -4.25px;
}

/* ---------- Base ---------- */

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

html { color-scheme: light; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-snow-canvas);
  color: var(--color-graphite-body);
  font-family: var(--font-inter);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; color: var(--color-midnight-ink); }
h1 { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg); letter-spacing: var(--tracking-heading-lg); }
h3 { font-size: var(--text-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
h4 { font-size: var(--text-subheading); line-height: var(--leading-subheading); letter-spacing: var(--tracking-subheading); font-weight: 500; }
p { margin: 0; }

a { color: var(--color-royal-signal); text-decoration: none; transition: color .15s ease, opacity .15s ease; }
.hl { color: var(--color-royal-signal); }

.container { max-width: var(--page-max-width); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--section-gap) 0 0; }
.section:last-of-type { padding-bottom: var(--section-gap); }

.lede { font-size: var(--text-lede); line-height: 1.55; color: var(--color-slate-caption); }
.muted { color: var(--color-ash-helper); }

:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.35); border-radius: var(--radius-pill); }

/* ---------- Buttons (ghost-outline or frosted pills; never filled blocks) ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  font: 500 15px/1 var(--font-inter);
  border: 1px solid var(--color-royal-signal);
  background: var(--color-snow-canvas);
  color: var(--color-royal-signal);
  cursor: pointer;
  white-space: nowrap;
  transition: box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { box-shadow: var(--shadow-glow-2); background: #fff; }
.btn-quiet { border-color: var(--color-stone-divider); color: var(--color-midnight-ink); }
.btn-quiet:hover { border-color: var(--color-royal-signal); color: var(--color-royal-signal); }
.btn-sm { padding: 9px 18px; font-size: 14px; }
.btn svg { width: 14px; height: 14px; }

/* ---------- Nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(252, 252, 252, 0.82);
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  border-bottom: 1px solid var(--color-stone-divider);
}
.nav-inner { display: flex; align-items: center; gap: 24px; height: 68px; }
/* Nothing in the bar may shrink or wrap: a long label ("Iniciar sessão", "Частые
   вопросы") otherwise breaks onto a second line and squeezes the logo to make room.
   The row is made to fit instead, by the tighter spacing below 1120px and the fold. */
.brand { display: inline-flex; flex-shrink: 0; align-items: center; gap: 10px; color: var(--color-graphite-body); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--color-royal-signal);
  display: grid; place-items: center;
  box-shadow: var(--shadow-glow-2);
}
.brand-mark svg { width: 22px; height: 22px; }
.nav-links { display: flex; gap: 4px; margin: 0 auto; }
.nav-links a { color: var(--color-graphite-body); font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: var(--radius-pill); white-space: nowrap; }
.nav-links a:hover { color: var(--color-royal-signal); }
.nav-actions { display: flex; align-items: center; gap: 16px; }
.nav-actions .signin { color: var(--color-graphite-body); font-size: 14px; font-weight: 500; white-space: nowrap; }
.nav-actions .signin:hover { color: var(--color-royal-signal); }
/* The language picker, which i18n.js draws: a quiet pill like .btn-quiet with the
   flag and two letters, opening a card of the sixteen languages in two columns. */
.lang { position: relative; }
.lang-button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 10px;
  font: 500 14px/1 var(--font-inter); color: var(--color-graphite-body);
  background: transparent; border: 1px solid var(--color-stone-divider); border-radius: var(--radius-pill);
  cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.lang-button:hover, .lang-button[aria-expanded="true"] { border-color: var(--color-royal-signal); color: var(--color-royal-signal); }
.lang-now { display: inline-flex; }
/* What a screen reader hears in place of the flag and the two letters. */
.lang-said { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lang-chevron { width: 10px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.lang-button[aria-expanded="true"] .lang-chevron { transform: rotate(180deg); }
/* The flag is drawn 3:2 whatever the country's own proportions, with a hairline so
   a white stripe does not melt into the card. */
.lang-flag { flex: none; width: 20px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(2, 5, 32, 0.12); overflow: hidden; }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  display: grid; grid-template-rows: repeat(8, auto); grid-auto-flow: column; gap: 2px 4px;
  margin: 0; padding: 8px; list-style: none;
  background: var(--surface-card); border: 1px solid var(--color-stone-divider); border-radius: var(--radius-pipeline);
  box-shadow: var(--shadow-glow), var(--shadow-feature);
}
.lang-menu[hidden] { display: none; }
.lang-menu [role="option"] {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-cards);
  font-size: 14px; line-height: 1.2; color: var(--color-graphite-body); white-space: nowrap; cursor: pointer;
}
.lang-menu [role="option"]:not([aria-selected="true"]):hover { background: var(--color-fog-surface); }
.lang-menu [role="option"]:focus-visible { box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.35); border-radius: var(--radius-cards); }
.lang-menu [aria-selected="true"] { background: var(--color-lavender-wash); color: var(--color-royal-signal); font-weight: 500; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--color-stone-divider); border-radius: var(--radius-pill); width: 40px; height: 40px; color: var(--color-graphite-body); cursor: pointer; }

/* ---------- Hero ---------- */

.hero { position: relative; padding: 72px 0 0; text-align: center; }
.hero::before {
  /* The blue band behind the headline: two stops, per the brief. */
  content: ""; position: absolute; inset: 0 0 38% 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20, 90, 255, 0.08), rgba(182, 203, 253, 0.4));
  border-radius: 0 0 48px 48px;
}
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--color-stone-divider);
  border-radius: var(--radius-pill);
  font-size: 14px; color: var(--color-graphite-body);
  box-shadow: var(--shadow-sm);
}
.badge .chip { background: var(--color-royal-signal); color: #fff; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: var(--radius-pill); }
.hero h1 { margin: 24px auto 0; max-width: 900px; }
.hero .lede { margin: 24px auto 0; max-width: 600px; }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.hero-note { margin-top: 16px; font-size: 13px; color: var(--color-ash-helper); }
/* Free sits under the two buttons as a link, not a third button: it is the way in
   for a team of three, and a third button would compete with the trial for everyone. */
.hero-free { margin-top: 6px; font-size: 13px; color: var(--color-ash-helper); }
.hero-free a { text-decoration: underline; text-underline-offset: 2px; }
/* The workflow in five steps under the home page's promise, each a link down to
   the feature that does it: the order the product is used in, readable before
   any description is. */
.steps { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 28px auto 0; max-width: 760px; }
.steps a {
  font: 600 13px/1 var(--font-inter); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-midnight-ink); background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--color-stone-divider); border-radius: var(--radius-pill); padding: 9px 14px;
}
.steps a:hover { color: var(--color-royal-signal); border-color: var(--color-royal-signal); }
.steps .arrow { color: var(--color-ash-helper); }
.hero-import { margin-top: 14px; font-size: 14px; color: var(--color-graphite-body); }
.hero-import a { font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

/* A hero with no product stage under it (pricing): the band runs its full height. */
.hero-short { padding-bottom: 72px; }
.hero-short::before { inset: 0; }

/* ---------- Product stage (the hero screenshot, drawn in HTML) ---------- */

.stage { margin: 56px auto 0; max-width: 1120px; text-align: left; }
.tabs { display: flex; justify-content: center; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tab {
  font: 500 14px/1 var(--font-inter); color: var(--color-slate-caption);
  padding: 9px 16px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.7); border: 1px solid var(--color-stone-divider); cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.tab:hover { color: var(--color-royal-signal); }
.tab[aria-selected="true"] { color: var(--color-royal-signal); border-color: var(--color-royal-signal); background: #fff; }

.window {
  background: rgba(252, 252, 252, 0.72);
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 28px;
  padding: 12px;
  box-shadow: var(--shadow-glow), var(--shadow-feature);
}
.app { background: var(--color-snow-canvas); border-radius: 20px; border: 1px solid var(--color-stone-divider); overflow: hidden; }
.app-bar {
  display: flex; align-items: center; gap: 20px; padding: 12px 18px;
  border-bottom: 1px solid var(--color-stone-divider); background: #fff;
  font-size: 13px; color: var(--color-slate-caption); white-space: nowrap; overflow: hidden;
}
.app-bar .b { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--color-graphite-body); }
.app-bar .b i { width: 18px; height: 18px; border-radius: 5px; background: var(--color-royal-signal); }
.app-bar .links { display: flex; gap: 16px; }
.app-bar .links .on { color: var(--color-royal-signal); font-weight: 500; }
.app-bar .ctx { margin-left: auto; color: var(--color-ash-helper); }
.app-body { padding: 16px; }
/* Read out, not shown: the plain sentence that stands in for a mock-up's internals,
   which are aria-hidden so a screen reader or a browsing agent does not take its
   avatars, counts and pretend navigation for content, or try to click them. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* A scroller inside a hidden mock carries tabindex="-1": Chrome makes a scrolling box
   with nothing focusable in it a tab stop of its own, and a tab stop inside aria-hidden
   is focus on something nobody can be told about. The compare tables are content, so
   theirs stay reachable from the keyboard. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Pipeline board */
.board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; }
.col { background: var(--color-fog-surface); border-radius: var(--radius-pipeline); padding: 12px; }
.col-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--color-graphite-body); margin-bottom: 4px; }
.col-head .n { color: var(--color-ash-helper); font-weight: 400; }
.col-sum { font-size: 13px; color: var(--color-royal-signal); font-weight: 500; margin: 0 0 10px 14px; font-family: var(--font-mono); letter-spacing: -0.03em; }
.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--color-cobalt-glow); }
.dot.amber { background: var(--color-amber-pending); }
.dot.mint { background: var(--color-mint-win); }
.dot.coral { background: var(--color-coral-lost); }
.ticket {
  background: var(--surface-card); border-radius: var(--radius-cards);
  padding: 12px 14px; box-shadow: var(--shadow-sm-2);
  font-size: 13px; line-height: 1.4;
}
.ticket + .ticket { margin-top: 8px; }
.ticket .top { display: flex; align-items: center; gap: 8px; }
.ticket .who { white-space: nowrap; font-weight: 600; font-size: 14px; color: var(--color-graphite-body); }
.ticket .hrs { margin-left: auto; white-space: nowrap; font-weight: 500; color: var(--color-graphite-body); font-family: var(--font-mono); letter-spacing: -0.03em; }
.ticket .note { color: var(--color-ash-helper); margin-top: 6px; }
.ticket .foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--color-ash-helper); font-size: 12px; }
.ticket .foot .ago { margin-left: auto; background: var(--color-fog-surface); padding: 2px 8px; border-radius: var(--radius-pill); }
.av {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  background: var(--color-lavender-wash); color: var(--color-royal-signal);
  font-size: 10px; font-weight: 600;
}

/* A project's board: a card is a task, so its name may wrap (a translated one is
   longer than the 220px column), and the bar under it is the hours logged against
   the estimate, as the app's card draws it. */
.ticket .task { font-weight: 600; font-size: 14px; color: var(--color-graphite-body); min-width: 0; }
.budget { height: 4px; border-radius: 2px; background: var(--color-fog-surface); margin-top: 10px; overflow: hidden; }
.budget i { display: block; height: 100%; background: var(--color-royal-signal); border-radius: inherit; }
.ticket .foot .cmt { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.cmt svg, .votes svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }

/* Messages: the threads beside the one open, and a card's panel */
.chat { display: grid; grid-template-columns: minmax(200px, 2fr) 5fr; gap: 12px; }
.threads { background: #fff; border-radius: var(--radius-cards); box-shadow: var(--shadow-sm-2); padding: 8px; font-size: 13px; }
.th-head { font-size: 12px; color: var(--color-ash-helper); padding: 8px 8px 4px; }
.th { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; color: var(--color-graphite-body); }
.th.on { background: var(--color-lavender-wash); color: var(--color-royal-signal); font-weight: 500; }
.th .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unread { margin-left: auto; min-width: 18px; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--color-royal-signal); color: #fff; font-size: 11px; font-weight: 600; text-align: center; }
.av.sq { border-radius: 6px; }
.av.guest { background: #fff3dc; color: #9a6200; }
.thread { display: grid; gap: 12px; align-content: start; }
.msg { display: flex; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--color-graphite-body); }
.msg .by { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.msg .by .tag { padding: 1px 8px; font-size: 11px; }
.msg .at { font-weight: 400; font-size: 12px; color: var(--color-ash-helper); }
.msg p { margin-top: 2px; color: var(--color-slate-caption); }
.mention, .ref { color: var(--color-royal-signal); font-weight: 500; }
.ref { background: var(--color-lavender-wash); padding: 0 6px; border-radius: 6px; }
.feature.wash .ref { background: #fff; }
.composer { border: 1px solid var(--color-stone-divider); background: #fff; border-radius: var(--radius-inputs); padding: 10px 12px; font-size: 13px; color: var(--color-ash-helper); }
.card-panel { display: grid; gap: 12px; }
.card-panel .facts { display: flex; gap: 32px; flex-wrap: wrap; }
.card-panel .k { font-size: 12px; color: var(--color-ash-helper); }
.card-panel .v { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--color-graphite-body); white-space: nowrap; }
.card-panel .v .sub { font-weight: 400; color: var(--color-ash-helper); }
.card-panel .budget { margin-top: 0; }
.card-panel .desc { font-size: 13px; line-height: 1.5; color: var(--color-slate-caption); }

/* The roadmap's requests, most voted first */
.votes { display: inline-flex; align-items: center; gap: 2px; min-width: 44px; font: 500 13px/1 var(--font-mono); color: var(--color-royal-signal); }

/* Sheet tables */
.sheet { width: 100%; border-collapse: collapse; font-size: 13px; }
.sheet th { text-align: right; font-weight: 500; color: var(--color-ash-helper); padding: 8px 10px; border-bottom: 1px solid var(--color-stone-divider); white-space: nowrap; }
.sheet td { text-align: right; padding: 9px 10px; border-bottom: 1px solid var(--color-stone-divider); color: var(--color-graphite-body); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sheet th:first-child, .sheet td:first-child { text-align: left; }
.sheet td .sub { color: var(--color-ash-helper); }
.sheet tr.total td { font-weight: 600; border-bottom: 0; }
.sheet .locked { color: var(--color-ash-helper); background: var(--color-fog-surface); }
.sheet .divider { border-left: 2px solid var(--color-royal-signal); }
.sheet .cell-on { box-shadow: inset 0 0 0 2px var(--color-azure-focus); border-radius: 6px; background: #fff; }

.strip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; padding: 4px 10px;
  border-radius: var(--radius-pill); background: #fff;
  border: 1px solid var(--color-stone-divider); color: var(--color-slate-caption); white-space: nowrap;
}
.tag.blue { color: var(--color-royal-signal); border-color: rgba(20, 90, 255, 0.35); }

/* Four to a row, or two on a phone (below), as a grid of equal columns would set
   them, but flowing: a tile whose figure does not fit its share takes the room it
   needs and the next one moves down. The figures are written as the reader's
   language writes them (i18n.js), and Intl's no-break spaces keep "412 mil US$" or
   "142,3 tys. USD" whole, wider than a quarter of the invoicing panel or half a
   phone; a 1fr grid column would grow to it and push the panel sideways. They do
   not grow, so three tiles leave the fourth place empty as the grid did. */
.tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tiles > .tile { flex: 0 1 calc((100% - 24px) / 4); }
.tile { background: #fff; border-radius: var(--radius-cards); padding: 12px 14px; box-shadow: var(--shadow-sm-2); }
.tile .k { font-size: 12px; color: var(--color-ash-helper); }
.tile .v { font: 500 22px/1.27 var(--font-mono); letter-spacing: -0.045em; color: var(--color-midnight-ink); margin-top: 4px; }
.tile .d { font-size: 12px; color: var(--color-royal-signal); }

.rows { display: grid; gap: 8px; }
.row {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: var(--radius-cards); padding: 10px 14px; box-shadow: var(--shadow-sm-2);
  font-size: 13px; white-space: nowrap; overflow: hidden;
}
.row .name { font-weight: 600; color: var(--color-graphite-body); }
.row .meta { color: var(--color-ash-helper); overflow: hidden; text-overflow: ellipsis; }
.row .end { margin-left: auto; display: flex; gap: 6px; align-items: center; }

/* ---------- Logo strip ---------- */

.logos { text-align: center; }
.logos p { font-size: 14px; color: var(--color-graphite-body); }
.logo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 48px; max-width: 900px; margin: 28px auto 0; }
.logo-grid span {
  font-weight: 600; font-size: 20px; letter-spacing: -0.03em; color: var(--color-graphite-body); opacity: 0.6;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.solutions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 36px; }
.solutions a { font-size: 14px; font-weight: 500; color: var(--color-graphite-body); background: #fff; border: 1px solid var(--color-stone-divider); border-radius: var(--radius-pill); padding: 7px 14px; }
.solutions a:hover { color: var(--color-royal-signal); border-color: var(--color-royal-signal); }
.logo-grid span::before { content: ""; width: 18px; height: 18px; border-radius: 5px; background: currentColor; opacity: .8; }
.logo-grid span:nth-child(3n)::before { border-radius: 50%; }
.logo-grid span:nth-child(4n)::before { transform: rotate(45deg) scale(.8); }

/* ---------- Section heads ---------- */

.section-head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.eyebrow { display: inline-block; font-size: 14px; font-weight: 500; color: var(--color-royal-signal); margin-bottom: 16px; }
.section-head .lede { margin-top: 20px; }

/* ---------- Feature cards ---------- */

.feature {
  background: var(--color-snow-canvas);
  border-radius: var(--radius-feature);
  padding: 52px 72px;
  box-shadow: var(--shadow-feature);
  display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center;
}
.feature + .feature { margin-top: 24px; }
.feature.flip { grid-template-columns: 7fr 5fr; }
.feature.flip .feature-text { order: 2; }
.feature.wash { background: var(--color-lavender-wash); }
.feature-text .k { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--color-slate-caption); }
.feature-text h3 { margin-top: 12px; }
.feature-text .lede { margin-top: 16px; font-size: 16px; line-height: var(--leading-body); }
.ticks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--color-slate-caption); }
.ticks li strong { color: var(--color-graphite-body); font-weight: 500; }
.ticks svg { flex: none; width: 20px; height: 20px; margin-top: 1px; padding: 4px; border-radius: 50%; background: var(--color-lavender-wash); stroke: var(--color-royal-signal); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.feature.wash .ticks svg, .feature.wash .av { background: #fff; }
.plan-note { margin-top: 20px; }
.feature-visual { min-width: 0; }
.feature-visual .app { box-shadow: var(--shadow-glow-2); }
/* A panel scrolls inside its own frame when its table is wider than a phone leaves it,
   as the hero's do: the reports' Person / Hours / Cost table cannot wrap (its cells are
   nowrap figures) and needs about 270px in English, 380px in Ukrainian, and .app's
   overflow: hidden would otherwise cut its last column off. */
.feature-visual .app-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Integrations ---------- */

.connect { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.connect-card { background: var(--color-snow-canvas); border-radius: var(--radius-feature); padding: 40px; box-shadow: var(--shadow-feature); display: flex; flex-direction: column; }
.connect-card .k { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--color-slate-caption); }
.connect-card h3 { margin-top: 12px; }
/* A card with no chips keeps its plan tag at the foot, level with its neighbor's. */
.connect-card > .plan-note { margin-top: auto; padding-top: 20px; }
.connect-card > p:not(.plan-note) { margin-top: 16px; font-size: 15px; line-height: var(--leading-body); color: var(--color-slate-caption); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; flex: 1; align-content: flex-start; }
.chips span { font-size: 14px; font-weight: 500; color: var(--color-graphite-body); background: #fff; border: 1px solid var(--color-stone-divider); border-radius: var(--radius-pill); padding: 7px 14px; }

/* ---------- Numbers band ---------- */

.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.number { background: #fff; border-radius: var(--radius-pipeline); padding: 24px; box-shadow: var(--shadow-sm-2); }
.number .v { font: 700 40px/1 var(--font-mono); letter-spacing: -0.045em; color: var(--color-royal-signal); }
.number p { margin-top: 12px; font-size: 14px; line-height: var(--leading-body-sm); color: var(--color-slate-caption); }

/* ---------- Security (glassmorphic over a blue wash) ---------- */

.secure {
  position: relative; overflow: hidden;
  border-radius: 48px; padding: 72px;
  background: linear-gradient(160deg, var(--color-lavender-wash), rgba(182, 203, 253, 0.55));
}
.secure .section-head { margin-bottom: 40px; }
.glass-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.glass {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 28px; padding: 24px;
}
.glass h4 { display: flex; align-items: center; gap: 10px; }
.glass p { margin-top: 10px; font-size: 14px; line-height: var(--leading-body-sm); color: var(--color-slate-caption); }
/* The way on to the privacy notice's own Security section, for the detail. */
.secure-more { margin-top: 24px; font-size: 15px; font-weight: 500; }
.secure-more a { text-decoration: underline; text-underline-offset: 2px; }
.secure-more + .secure-more { margin-top: 8px; }

/* ---------- Pricing ---------- */

.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
/* Each card is a subgrid of the row's tracks, so a part sits at the same height in
   every card: the Team card's taller name (its Recommended tag) and a longer
   description in one card push the price, the rule and the button down in all four
   alike, in any language. The home page's cards have no list, so they span a track fewer. */
.plan {
  background: #fff; border-radius: 28px; padding: 28px;
  border: 1px solid var(--color-stone-divider);
  display: grid; grid-template-rows: subgrid; grid-row: span 4; gap: 16px;
}
.plan:has(ul) { grid-row: span 5; }
.plan.pick { border-color: var(--color-royal-signal); box-shadow: var(--shadow-glow-2); }
.plan .name { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--color-graphite-body); }
.plan .name .tag { margin-left: auto; }
.plan .price { font-size: 40px; font-weight: 600; letter-spacing: -1.48px; color: var(--color-midnight-ink); line-height: 1.05; }
.plan .price small { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--color-ash-helper); }
.plan p { font-size: 14px; line-height: var(--leading-body-sm); color: var(--color-slate-caption); }
/* A plan's button may wrap, unlike every other .btn. Its label is unbreakable by
   default, and a grid column is never narrower than its content, so a long label
   ("Спробувати безкоштовно", "Дізнатися, що входить") widened its quarter of the
   row and pushed the four cards past the screen between 1081 and about 1300px.
   Wrapping keeps the column at its share; the narrower
   side padding lets most labels stay on one line, and line-height 1.2 keeps a
   two-line label legible inside the pill. The 1.5px taken off the top and bottom
   pays for that line-height, so a one-line plan button is exactly as tall as before. */
.plan .btn { align-self: end; white-space: normal; text-align: center; line-height: 1.2; padding: 12.5px 20px; }
.plan ul { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--color-stone-divider); display: grid; gap: 10px; align-content: start; }
.plan ul + .btn { margin-top: 8px; }
.plan li { position: relative; padding-left: 22px; font-size: 14px; line-height: var(--leading-body-sm); color: var(--color-slate-caption); }
.plan li::before { content: ""; position: absolute; left: 4px; top: 4px; width: 5px; height: 9px; border: solid var(--color-royal-signal); border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Who is charged: a per-seat tracker beside Clock Clerk, row for row */
.seats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 920px; margin: 0 auto 32px; }
.seats-col { background: #fff; border-radius: 28px; padding: 28px 32px; border: 1px solid var(--color-stone-divider); }
.seats-col.us { border-color: var(--color-royal-signal); box-shadow: var(--shadow-glow-2); background: var(--color-lavender-wash); }
.seats-col .k { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--color-graphite-body); padding-bottom: 16px; border-bottom: 1px solid var(--color-stone-divider); }
.seats-col ul { list-style: none; margin: 0; padding: 0; }
.seats-col li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--color-stone-divider); font-size: 14px; line-height: var(--leading-body-sm); color: var(--color-slate-caption); }
.seats-col li:last-child { border-bottom: 0; padding-bottom: 0; }
.seats-col li b { font-weight: 500; color: var(--color-graphite-body); text-align: right; }
.seats-col.us li b { font-family: var(--font-mono); color: var(--color-royal-signal); white-space: nowrap; }
.seats-foot { text-align: center; max-width: 640px; margin: 0 auto 40px; font-size: 14px; color: var(--color-slate-caption); }
.seats-foot:last-child { margin-bottom: 0; }
.plans-foot { text-align: center; margin-top: 20px; font-size: 14px; color: var(--color-ash-helper); }

/* Comparison table */
.compare-wrap { background: #fff; border-radius: 28px; border: 1px solid var(--color-stone-divider); padding: 8px 24px; }
.compare { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; }
.compare th { text-align: center; font-weight: 500; color: var(--color-midnight-ink); padding: 16px 12px; border-bottom: 1px solid var(--color-stone-divider); white-space: nowrap; }
.compare td { text-align: center; padding: 13px 12px; border-bottom: 1px solid var(--color-stone-divider); color: var(--color-slate-caption); }
.compare th:first-child, .compare td:first-child { text-align: left; padding-left: 0; }
.compare td:first-child { color: var(--color-graphite-body); }
.compare tr:last-child td { border-bottom: 0; }
.compare th:nth-child(3), .compare td:nth-child(3) { background: var(--color-lavender-wash); }
.compare .yes { color: var(--color-royal-signal); }
.compare .no { color: var(--color-stone-divider); }

/* ---------- Landing pages ---------- */

/* A landing page's walk-through: one piece of work in five steps, each with the
   screen it happens on drawn small above what happens. */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.flow-step { min-width: 0; background: var(--color-lavender-wash); border-radius: var(--radius-pipeline); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.flow-step h4 { display: flex; align-items: center; gap: 10px; }
.flow-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--color-royal-signal); color: #fff; font: 600 13px/26px var(--font-inter); text-align: center; }
.flow-shot { min-height: 72px; }
.flow-shot .row { flex-wrap: wrap; gap: 6px 10px; }
.flow-shot .msg { background: #fff; border-radius: var(--radius-cards); padding: 10px 12px; box-shadow: var(--shadow-sm-2); }
.flow-shot .ref { background: var(--color-lavender-wash); }
.flow-shot .hrs { font-family: var(--font-mono); letter-spacing: -0.03em; font-weight: 500; }
.flow-step p { font-size: 14px; line-height: var(--leading-body-sm); color: var(--color-slate-caption); }
.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.point { background: #fff; border-radius: var(--radius-pipeline); padding: 28px; box-shadow: var(--shadow-sm-2); }
.point p { margin-top: 10px; font-size: 15px; line-height: var(--leading-body); color: var(--color-slate-caption); }

/* ---------- Evaluation pages (solutions/, features/, pricing/active-filer) ---------- */

/* One requirement each, read rather than skimmed: the problem as running text, then
   what Clock Clerk does about it, what it does not, and which plan has it. */
.prose { max-width: 760px; margin: 0 auto; }
.prose p { font-size: 17px; line-height: var(--leading-body); color: var(--color-slate-caption); }
.prose p + p { margin-top: 16px; }
.prose + .seats { margin-top: 48px; }
.limits { list-style: none; margin: 0 auto; padding: 0; max-width: 920px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.limits li { display: flex; gap: 14px; background: #fff; border-radius: var(--radius-pipeline); padding: 24px; box-shadow: var(--shadow-sm-2); }
.limits svg { flex: none; width: 22px; height: 22px; margin-top: 1px; padding: 5px; border-radius: 50%; background: var(--color-fog-surface); stroke: var(--color-slate-caption); stroke-width: 3; fill: none; stroke-linecap: round; }
.limits p { margin-top: 8px; font-size: 15px; line-height: var(--leading-body); color: var(--color-slate-caption); }
/* The guest's screen ends with the line every guest page carries. */
.guest-foot { margin-top: 14px; text-align: center; font-size: 12px; color: var(--color-ash-helper); }
.app-body > .desc { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--color-slate-caption); }
/* A comparison page answers in words, so its table reads left to right and washes
   Clock Clerk's column (the second) rather than the plan table's Starter. Where it
   costs a team, the figures line up on the right and Clock Clerk's rows are in its blue. */
.compare.versus { min-width: 720px; }
.compare.versus th, .compare.versus td { text-align: left; vertical-align: top; line-height: var(--leading-body-sm); }
.compare.versus td:first-child { width: 24%; font-weight: 500; }
.compare.versus th:nth-child(3), .compare.versus td:nth-child(3) { background: none; }
.compare.versus th:nth-child(2), .compare.versus td:nth-child(2) { background: var(--color-lavender-wash); }
.compare.versus td strong { font-weight: 500; color: var(--color-graphite-body); }
.compare.costs th:nth-child(3), .compare.costs td:nth-child(3) { background: none; }
.compare.costs th:not(:first-child), .compare.costs td:not(:first-child) { text-align: right; white-space: nowrap; font-family: var(--font-mono); }
.compare.costs th:not(:first-child) { font-family: inherit; }
.compare.costs tr.us td:first-child { font-weight: 500; }
.compare.costs tr.us td:not(:first-child) { color: var(--color-royal-signal); }
/* A product that publishes no price gets one sentence across the figures' columns,
   which must wrap like prose rather than line up like a figure. */
.compare.costs td.unpriced { text-align: left; white-space: normal; font-family: inherit; color: var(--color-slate-caption); }
.limits.fits svg { background: var(--color-lavender-wash); stroke: var(--color-royal-signal); }
.related-head { margin-top: 56px; text-align: center; font-size: 14px; font-weight: 500; color: var(--color-slate-caption); }
.related-head + .solutions { margin-top: 16px; }

/* ---------- FAQ ---------- */

.faq { max-width: 800px; margin: 0 auto; display: grid; gap: 8px; }
.faq details { background: #fff; border-radius: var(--radius-pipeline); box-shadow: var(--shadow-sm-2); padding: 0 24px; }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 0;
  display: flex; align-items: center; gap: 16px;
  font-weight: 500; font-size: 16px; color: var(--color-graphite-body);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--color-royal-signal); font-size: 22px; font-weight: 400; line-height: 1; transition: transform .15s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--color-royal-signal); }
.faq details p { padding: 0 0 20px; font-size: 15px; color: var(--color-slate-caption); }

/* ---------- Final CTA ---------- */

.cta {
  text-align: center; border-radius: 48px; padding: 80px 32px;
  background: linear-gradient(180deg, rgba(20, 90, 255, 0.06), rgba(182, 203, 253, 0.45));
}
.cta h2 { max-width: 760px; margin: 0 auto; }
.cta .lede { margin: 20px auto 0; max-width: 560px; }

/* ---------- Footer (dark navy) ---------- */

footer { background: var(--color-midnight-ink); color: rgba(255, 255, 255, 0.62); padding: 64px 0 32px; font-size: 14px; }
footer .brand { color: #fff; }
/* The brand and its line sit on a row of their own above the link columns: beside
   them, as a seventh column, they squeezed six lists into a 1200px container and the
   last one wrapped to a second row. */
.footer-lead { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 40px; margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.footer-lead p { margin: 0; max-width: 560px; }
/* The newsletter sign-up, at the end of the row: an address and a button, which
   wrap under the brand's line on a narrow screen. */
.footer-news { display: grid; gap: 8px; margin-left: auto; }
.footer-news label { color: #fff; font-weight: 500; }
.footer-news-row { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-news input[type="email"] { min-width: 0; width: 240px; max-width: 100%; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.06); color: #fff; font: inherit; }
.footer-news input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.5); }
.footer-news input[type="email"]:focus-visible { border-color: rgba(255, 255, 255, 0.6); }
.footer-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 32px; }
/* Six columns are still narrow: a label that is one long word in some languages
   ("Auftragnehmerverwaltung") breaks rather than pushing the page sideways. */
footer li { overflow-wrap: anywhere; hyphens: auto; }
footer h5 { color: #fff; font-size: 14px; font-weight: 500; margin-bottom: 14px; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
footer a { color: rgba(255, 255, 255, 0.62); }
footer a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 13px; }

/* ---------- User guide (guide/) ---------- */

/* Read to get a job done rather than to be persuaded, so a page is a sidebar of
   every guide page beside one article column at a reading measure, with none of
   the evaluation pages' centered display type. The sidebar is the same on every
   page (website-guide.spec.ts holds it to the folder), and stays in view while a
   long page scrolls. */
/* .container's phone padding, further down, would otherwise take the top and bottom away. */
.container.guide-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 48px; padding-bottom: var(--section-gap); }
.guide-side { position: sticky; top: 92px; max-height: calc(100vh - 116px); overflow-y: auto; }
.guide-toggle { display: none; }
.guide-toc { font-size: 14px; line-height: var(--leading-body-sm); }
.guide-toc-head { margin: 24px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ash-helper); }
.guide-toc-head:first-child { margin-top: 0; }
.guide-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.guide-toc a, .guide-toc .soon { display: block; padding: 6px 12px; border-radius: var(--radius-cards); color: var(--color-graphite-body); }
.guide-toc a:hover { color: var(--color-royal-signal); background: var(--color-fog-surface); }
.guide-toc a[aria-current="page"] { color: var(--color-royal-signal); background: var(--color-lavender-wash); font-weight: 500; }
/* A page a later part of the guide will write: named, so the reader sees what is
   coming, but not a link to a page that is not there yet. */
.guide-toc .soon { color: var(--color-ash-helper); }
.guide-toc .soon::after { content: "soon"; display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--color-fog-surface); font-size: 11px; line-height: 18px; white-space: nowrap; }

.guide-article { max-width: 760px; min-width: 0; }
.guide-article .eyebrow { margin-bottom: 12px; }
.guide-article h1 { font-size: var(--text-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.guide-article h1 + .lede { margin-top: 16px; }
.guide-article h2 { margin: 48px 0 0; padding-top: 8px; font-size: 28px; line-height: 1.2; letter-spacing: -0.6px; scroll-margin-top: 84px; }
.guide-article h3 { margin: 28px 0 0; font-size: var(--text-subheading); line-height: var(--leading-subheading); letter-spacing: var(--tracking-subheading); scroll-margin-top: 84px; }
.guide-article p, .guide-article li { color: var(--color-slate-caption); }
.guide-article h2 + p, .guide-article h3 + p, .guide-article p + p { margin-top: 12px; }
/* A paragraph after a box, a table or a list stands apart from it. */
.guide-article > :is(.guide-onpage, .guide-table-wrap, .guide-note, .guide-shot, ul, ol) + p { margin-top: 16px; }
.guide-article ul, .guide-article ol { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 6px; }
.guide-article * + ul, .guide-article * + ol { margin-top: 12px; }
.guide-article strong { font-weight: 600; color: var(--color-graphite-body); }
.guide-article p a, .guide-article li a, .guide-article td a { text-decoration: underline; text-underline-offset: 2px; }
.guide-article code, .guide-article kbd { font: 500 0.88em var(--font-mono); background: var(--color-fog-surface); border-radius: 6px; padding: 1px 6px; color: var(--color-graphite-body); }

/* "On this page": the long pages' sections, listed under the title. */
.guide-onpage { margin-top: 28px; padding: 16px 20px; border: 1px solid var(--color-stone-divider); border-radius: var(--radius-pipeline); background: #fff; }
.guide-onpage p { font-size: 13px; font-weight: 600; color: var(--color-graphite-body); }
.guide-article .guide-onpage ul { margin-top: 8px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; }

/* An aside the reader should not miss: what is refused, or what a role does not get. */
.guide-note { margin-top: 16px; padding: 14px 18px; border-left: 3px solid var(--color-royal-signal); border-radius: 0 var(--radius-cards) var(--radius-cards) 0; background: var(--color-lavender-wash); }
.guide-note p { color: var(--color-graphite-body); font-size: 15px; }

/* A refusal on the troubleshooting page: the app's words quoted, then why and what to
   do. Anchored by its code, so the target of a link is outlined when it arrives. */
.guide-article var { font-style: italic; }
.guide-refusal { margin-top: 20px; padding: 18px 20px; border: 1px solid var(--color-stone-divider); border-radius: var(--radius-pipeline); background: #fff; scroll-margin-top: 84px; }
.guide-refusal:target { border-color: var(--color-royal-signal); box-shadow: 0 0 0 3px var(--color-lavender-wash); }
.guide-refusal blockquote { margin: 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--color-royal-signal); display: grid; gap: 6px; }
.guide-article .guide-refusal blockquote p { margin: 0; color: var(--color-graphite-body); font-weight: 500; }
.guide-article .guide-refusal blockquote .guide-refusal-title { font-weight: 600; color: var(--color-midnight-ink); }
.guide-article .guide-refusal > p { margin-top: 10px; font-size: 15px; }
.guide-article .guide-refusal > .guide-refusal-code { font-size: 12px; color: var(--color-ash-helper); }
.guide-refusal-code code { font-size: 11px; }
.guide-article .guide-refusal p { overflow-wrap: anywhere; }

/* Who can do what: a table that scrolls inside its own frame on a phone rather than
   pushing the page sideways. */
.guide-table-wrap { margin-top: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-stone-divider); border-radius: var(--radius-pipeline);
  /* Scroll shadows: the white covers move with the table (local) and hide the shadows
     (scroll) at whichever edge is reached, so a phone shows that more columns lie to the side. */
  background:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left / 40px 100% no-repeat local,
    linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0)) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0)) right / 14px 100% no-repeat scroll,
    #fff; }
.guide-table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 14px; line-height: var(--leading-body-sm); }
.guide-table th, .guide-table td { padding: 10px 14px; border-bottom: 1px solid var(--color-stone-divider); text-align: left; vertical-align: top; }
.guide-table thead th { font-weight: 500; color: var(--color-ash-helper); white-space: nowrap; }
.guide-table tbody th { font-weight: 500; color: var(--color-graphite-body); }
.guide-table td { color: var(--color-slate-caption); }
.guide-table tr:last-child th, .guide-table tr:last-child td { border-bottom: 0; }
.guide-table .role, .guide-table .yes, .guide-table .no { text-align: center; white-space: nowrap; }
.guide-table .yes { color: var(--color-royal-signal); font-weight: 600; }
.guide-table .no { color: var(--color-ash-helper); }

/* Who the reader is, and where they start: a card each. */
.guide-article .guide-cards { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.guide-cards li { background: #fff; border-radius: var(--radius-pipeline); padding: 20px; box-shadow: var(--shadow-sm-2); }
.guide-cards h3 { margin: 0; font-size: 17px; }
.guide-cards p { margin-top: 6px; font-size: 15px; }
.guide-article .steps { justify-content: flex-start; margin: 20px 0 0; max-width: none; }
.guide-shot { margin: 20px 0 0; }
.guide-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--color-stone-divider); border-radius: var(--radius-pipeline); }
.guide-shot figcaption { margin-top: 8px; font-size: 13px; color: var(--color-ash-helper); }
/* Narrow shots compared side by side, such as the menu as each role sees it: top-aligned
   at their own heights, because how far each one runs is what the figure shows. */
.guide-shot-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 200px)); gap: 16px; align-items: start; }
.guide-shot-row p { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--color-graphite-body); }

.guide-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--color-stone-divider); }
.guide-pager a { display: grid; gap: 2px; max-width: 48%; padding: 12px 16px; border: 1px solid var(--color-stone-divider); border-radius: var(--radius-pipeline); color: var(--color-graphite-body); font-weight: 500; }
.guide-pager a:hover { border-color: var(--color-royal-signal); color: var(--color-royal-signal); }
.guide-pager span { font-size: 12px; font-weight: 400; color: var(--color-ash-helper); }
.guide-pager [rel="next"] { margin-left: auto; text-align: right; }

/* Below 860px the sidebar folds into a button over the article, as the site's nav
   does into its own: the table of contents is long, and open above the article it
   would push every page's first line off a phone's screen. site.js opens it. */
@media (max-width: 860px) {
  .container.guide-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 24px; }
  .guide-side { position: static; max-height: none; overflow: visible; }
  .guide-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 12px 16px; border: 1px solid var(--color-stone-divider); border-radius: var(--radius-pipeline);
    background: #fff; color: var(--color-graphite-body); font: 500 15px/1.2 var(--font-inter); cursor: pointer;
  }
  .guide-toggle svg { transition: transform .15s ease; }
  .guide-side.open .guide-toggle svg { transform: rotate(180deg); }
  .guide-toc { display: none; margin-top: 8px; padding: 16px; border: 1px solid var(--color-stone-divider); border-radius: var(--radius-pipeline); background: #fff; }
  .guide-side.open .guide-toc { display: block; }
  .guide-article .guide-cards { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .guide-article h1 { font-size: 32px; }
  .guide-article h2 { font-size: 24px; }
  .guide-pager { flex-direction: column; }
  .guide-pager a { max-width: none; }
}

/* ---------- Legal pages (privacy.html, terms.html) ---------- */

/* Prose read in full, so they borrow the guide's article column (.guide-article)
   without its sidebar. As there, .container's phone padding would otherwise take the
   top and bottom away. */
.container.legal-layout { padding-top: 48px; padding-bottom: var(--section-gap); }
@media (max-width: 860px) {
  .container.legal-layout { padding-top: 24px; }
}

/* ---------- Analytics consent (drawn by site.js) ---------- */

/* A card in the corner rather than a bar across the page: it asks, and the page
   stays readable while the reader decides. */
.consent {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  max-width: 420px; padding: 20px 24px;
  background: var(--surface-card); color: var(--color-graphite-body);
  border: 1px solid var(--color-stone-divider); border-radius: var(--radius-pipeline);
  box-shadow: var(--shadow-feature), var(--shadow-glow);
  font-size: var(--text-body-sm); line-height: var(--leading-body-sm);
}
.consent p { margin: 0 0 16px; }
.consent a { color: var(--color-royal-signal); }
.consent-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .consent { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .feature, .feature.flip { grid-template-columns: 1fr; padding: 40px; gap: 32px; }
  .feature.flip .feature-text { order: 0; }
  .glass-grid, .plans { grid-template-columns: 1fr 1fr; }
  .connect { grid-template-columns: 1fr; }
  .numbers { grid-template-columns: 1fr 1fr; }
  .seats { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr 1fr; }
  .points { grid-template-columns: 1fr; }
  .limits { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  /* Below desktop the team kinds stop being a grid and flow like the tiles: four to a
     row, or two below 860px, as equal columns would set them, but a name wider than
     its share takes the room it needs and the next one moves down. A name is one word
     that cannot break ("advocatenkantoren", "Buchhaltungsbüros"), and four 1fr columns
     grow to the longest and push the page sideways just above 860px (by 100px in
     Dutch). On a desktop the grid has the room, and squeezes a short name's column to
     keep a long one on the row rather than moving it down, so it stays a grid there. */
  .logo-grid { display: flex; flex-wrap: wrap; justify-content: center; }
  .logo-grid span { flex: 0 1 calc((100% - 144px) / 4); }
}

/* Just above the fold the bar is spaced tighter, so the longest languages (Russian,
   Dutch, Spanish) still fit on one row: with the full spacing and the Guide link,
   Russian needs 1104px in a fallback font. Above 1120px nothing changes, and the
   folded menu below keeps its own spacing. */
@media (min-width: 1021px) and (max-width: 1120px) {
  .nav-inner { gap: 12px; }
  .nav-links { gap: 0; }
  .nav-links a { padding: 8px; }
  .nav-actions { gap: 12px; }
  .nav-actions .btn-sm { padding: 9px 14px; }
}

/* The nav folds into the phone menu at 1020px, ahead of the layout's 860px: even
   tightened, the row needs 1008px in Russian once the Guide link is in it, and the
   fold moves rather than the translations being cut to fit. Both figures are
   measured in a fallback font, whose letters run wider than Inter's, so Inter
   has room to spare. */
@media (max-width: 1020px) {
  .nav-toggle { display: inline-grid; place-items: center; }
  .nav-links, .nav-actions { display: none; }
  .nav.open .nav-inner { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 14px; }
  .nav.open .nav-links { display: flex; flex-direction: column; width: 100%; order: 3; margin: 8px 0 0; }
  .nav.open .nav-actions { display: flex; width: 100%; order: 4; padding: 8px 12px 4px; justify-content: space-between; }
  /* In the folded menu the picker sits at the left, so its card opens from there,
     and a long trial label wraps under it rather than running off a phone. */
  .nav.open .nav-actions { flex-wrap: wrap; gap: 12px 16px; justify-content: flex-start; }
  .lang-menu { right: auto; left: 0; }
}

@media (max-width: 860px) {
  :root { --text-display: 48px; --text-heading-lg: 38px; --text-heading: 30px; --section-gap: 64px; }
  .secure { padding: 48px 24px; border-radius: 32px; }
  .glass-grid, .plans { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .logo-grid { gap: 24px; }
  .logo-grid span { flex-basis: calc((100% - 24px) / 2); }
  .tiles > .tile { flex-basis: calc((100% - 8px) / 2); }
}

@media (max-width: 560px) {
  :root { --text-display: 40px; --text-heading-lg: 32px; --text-heading: 26px; --text-lede: 16px; }
  .container { padding: 0 16px; }
  .hero { padding-top: 48px; }
  .btn { padding: 13px 24px; }
  .cta-row .btn { flex: 1 1 100%; }
  /* Every .btn is a pixel shorter and narrower on a phone; a plan's keeps the 1.5px
     it gives its line-height, so it stays as tall as the others here too. */
  .plan .btn { padding: 11.5px 24px; }
  .feature, .feature.flip { padding: 24px 16px; border-radius: 28px; }
  .window { padding: 6px; border-radius: 20px; }
  .app { border-radius: 14px; }
  .app-bar .links { display: none; }
  .lang-menu { grid-template-rows: none; grid-auto-flow: row; max-height: min(60vh, 420px); overflow: hidden auto; }
  .numbers { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .flow-shot { min-height: 0; }
  .steps a { padding: 8px 11px; font-size: 12px; }
  .cta { padding: 56px 16px; border-radius: 32px; }
  .compare-wrap { padding: 4px 16px; border-radius: 20px; }
  /* On a phone the Clock Clerk figures may wrap: unbreakable, "$3–$6 / month, or $0
     on Free" is a min-content wider than the screen, and the one-column grid then
     stretches the card past it and the page scrolls sideways (worse in Polish or
     Russian). A lone "$0" has no break opportunity, so it still stays whole. */
  .seats-col { padding: 24px 20px; }
  .seats-col.us li b { white-space: normal; }
  /* The same holds for the Enterprise card's price, the one that is a word in display
     type rather than a figure with a <small> beside it: in Polish "Porozmawiajmy" is
     287px at 40px, wider than a 320px phone leaves a card. A word cannot wrap, so it
     alone scales with the screen below about 420px and stays 40px above it; the
     dollar figures are short and keep their size. */
  .plan .price:not(:has(small)) { font-size: min(40px, 9.5vw); }
  .hero-short { padding-bottom: 48px; }
  /* A heading on a phone may hold a word wider than the screen at display size
     ("Zeiterfassungssoftware" is 418px at 40px): it hyphenates where the browser
     knows the page's language (i18n.js sets it), and breaks anyway where not. */
  h1, h2, h3 { hyphens: auto; overflow-wrap: break-word; }
  .footer-grid { grid-template-columns: 1fr; }
  .row .meta { display: none; }
  .row .end .tag + .tag { display: none; }
  .board { grid-template-columns: repeat(4, 250px); }
  .chat { grid-template-columns: 1fr; }
  .threads { display: none; }
  .connect-card { padding: 24px 16px; border-radius: 28px; }
  /* On a phone the team kinds drop their halves and flow as centered rows at their
     own widths: a long single word ("Buchhaltungsbüros", "accountantskantoren") is
     wider than half the screen, so the halves would no longer line up anyway, and
     short names that fit share a row with it. */
  .logo-grid { gap: 16px 24px; }
  .logo-grid span { flex-basis: auto; font-size: 17px; }
}