/* taos — landing (taos.world) */
:root {
  color-scheme: light;
  --blue: #205da5;
  --blue-dark: #1a4a83;
  --green: #74b475;
  --yellow: #fec20d;
  --red: #f44629;
  --teal: #1ba69d;
  --sky: #6bb2f0;

  /* logo wordmark letters — straight from TAOS logo horizontal.svg */
  --w-t: #2f497d;
  --w-a: #74b475;
  --w-o: #fec20d;
  --w-s: #c54222;

  /* pięć kolorów ogona pawia ze znaku — to z nich biorą kolor ikony i paski.
     Wordmark ma cztery litery, ogon ma pięć piór; nie mylić tych dwóch zestawów. */
  --tail-1: #205da5;
  --tail-2: #1ba69d;
  --tail-3: #74b475;
  --tail-4: #fec20d;
  --tail-5: #f44629;

  --ink: #16233d;
  --ink-soft: #3c4a63;
  --muted: #6b7a94;
  --line: #e7ecf4;
  --surface: #ffffff;
  --bg: #f7f9fc;

  --radius: 22px;
  --shadow-sm: 0 1px 2px rgba(22, 35, 61, .05), 0 6px 16px rgba(22, 35, 61, .05);
  --shadow-md: 0 2px 6px rgba(22, 35, 61, .06), 0 18px 44px rgba(22, 35, 61, .09);
  --maxw: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 78px;
}
.brand { display: flex; align-items: center; margin-right: auto; }
.brand img { height: 44px; width: auto; }
.nav { display: flex; align-items: center; gap: 20px; }
.nav a:not(.btn) {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.nav a:not(.btn):hover { color: var(--blue); }
.nav .nav-login { font-weight: 600; color: var(--ink); }

/* small-screen disclosure menu (no JS) */
.menu-sm { display: none; position: relative; }
.menu-sm > summary {
  list-style: none;
  cursor: pointer;
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  display: grid; place-items: center;
}
.menu-sm > summary::-webkit-details-marker { display: none; }
.menu-sm .bars, .menu-sm .bars::before, .menu-sm .bars::after {
  display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--ink);
}
.menu-sm .bars { position: relative; }
.menu-sm .bars::before, .menu-sm .bars::after { content: ""; position: absolute; left: 0; }
.menu-sm .bars::before { top: -5px; }
.menu-sm .bars::after { top: 5px; }
.menu-sm[open] > summary { border-color: #cfdaea; }
.menu-panel {
  position: absolute;
  right: 0; top: calc(100% + 10px);
  min-width: 208px;
  display: flex; flex-direction: column;
  padding: 8px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.menu-panel a { padding: 10px 12px; border-radius: 10px; font-size: 15px; }
.menu-panel a:hover { background: var(--bg); }

@media (max-width: 1040px) {
  .nav .nav-link, .nav .nav-login { display: none; }
  .menu-sm { display: block; }
  .site-header .wrap { height: 70px; }
  .brand img { height: 38px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { border-color: #cfdaea; }
.btn-sm { padding: 9px 18px; font-size: 14px; }

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 18px;
  border-radius: 16px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  transition: transform .15s ease, opacity .15s ease;
}
.store-btn:hover { transform: translateY(-1px); }
.store-btn svg { flex: none; }
.store-btn .lines { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-btn .lines small { font-size: 11px; opacity: .7; letter-spacing: .04em; text-transform: uppercase; }
.store-btn .lines strong { font-size: 16px; font-weight: 600; }
.store-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 0;              /* .hero .wrap carries its own padding — don't stack section's 84px on top */
  background:
    radial-gradient(760px 460px at 12% -10%, rgba(107, 178, 240, .22), transparent 60%),
    radial-gradient(680px 420px at 88% 0%, rgba(116, 180, 117, .20), transparent 62%),
    radial-gradient(520px 380px at 60% 100%, rgba(254, 194, 13, .14), transparent 65%),
    #fff;
  border-bottom: 1px solid var(--line);
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 56px;
  align-items: center;
  padding-top: 68px;
  padding-bottom: 76px;
}
.hero-copy { min-width: 0; }
.eyebrow-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.eyebrow img { height: 20px; width: 20px; object-fit: contain; }
.eyebrow-eu {
  padding: 6px 18px 6px 7px;
  gap: 11px;
  font-size: 14.5px;
  border-color: #c3d5ec;
  background: #fff;
  color: var(--w-t);
}
.flag-eu {
  width: 34px; height: 23px; flex: none;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(22, 35, 61, .14);
}

/* wycinek logo w miejscu słowa „taos" — .78em zrównuje wysokość x znaku z krojem
   nagłówka, a przesunięcie sadza go na linii pisma. Zmierzone pikselowo. */
h1 .h1-mark, h2 .h1-mark {
  height: .78em; width: auto; display: inline-block; vertical-align: baseline;
  transform: translateY(.06em);
}
h1 {
  font-size: clamp(38px, 5.2vw, 60px);
  line-height: 1.06;
  letter-spacing: -.03em;
  margin: 0 0 18px;
  font-weight: 800;
}
/* the wordmark, letter for letter, in the logo's own colours.
   h1 runs at -.03em; the logo sets its letters far wider, so the wordmark
   overrides it — and cancels the trailing space so the full stop stays put. */
h1 .wordmark {
  white-space: nowrap;
  letter-spacing: .03em;
  margin-right: -.03em;
}
.wordmark .w-t, h1 .w-t { color: var(--w-t); }
.wordmark .w-a, h1 .w-a { color: var(--w-a); }
.wordmark .w-o, h1 .w-o { color: var(--w-o); }
.wordmark .w-s, h1 .w-s { color: var(--w-s); }
h1 .w-t { color: var(--w-t); }
h1 .w-a { color: var(--w-a); }
h1 .w-o { color: var(--w-o); }
h1 .w-s { color: var(--w-s); }
.lede { font-size: 19.5px; color: var(--ink-soft); margin: 0 0 30px; max-width: 33em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* proof strip under the CTAs */
.hero-proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 24px 0 0;
  padding: 0;
  font-size: 14px;
  color: var(--muted);
}
.hero-proof li { position: relative; padding-left: 20px; }
.hero-proof li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 9px; height: 5px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

/* product shot + floating chips */
.hero-art { position: relative; max-width: 430px; margin-left: auto; }
.hero-frame {
  position: relative;
  border-radius: 30px;
  padding: 10px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(6px);
}
.hero-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  border-radius: 22px;
  border: 1px solid var(--line);
}

.hero-chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 11px 16px 11px 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  max-width: 262px;
}
.hero-chip .chip-ico {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(116, 180, 117, .18);
  color: #46893f;
}
.hero-chip .chip-ico.alt { background: rgba(32, 93, 165, .10); color: var(--blue); }
.hero-chip .chip-ico svg { width: 17px; height: 17px; }
.hero-chip figcaption { display: flex; flex-direction: column; line-height: 1.3; }
.hero-chip strong { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.hero-chip small { font-size: 12.5px; color: var(--muted); }

.chip-task  { left: -46px; top: 11%; }
.chip-native  { right: -46px; bottom: 15%; max-width: 236px; }

@media (max-width: 1160px) {
  .chip-task { left: -18px; }
  .chip-native { right: -14px; }
}
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; padding-top: 56px; padding-bottom: 56px; }
  .hero-art { max-width: 420px; margin: 0 auto; }
  .chip-task { left: -16px; top: 10%; }
  .chip-native { right: -16px; bottom: 10%; }
}
@media (max-width: 560px) {
  .hero-chip { position: static; max-width: none; margin-top: 12px; box-shadow: var(--shadow-sm); }
  .hero-art { display: flex; flex-direction: column; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-chip { animation: chip-in .5s ease-out both; }
  .chip-task { animation-delay: .25s; }
  .chip-sync { animation-delay: .4s; }
  .chip-voice { animation-delay: .55s; }
  .chip-org { animation-delay: .7s; }
  .chip-native { animation-delay: .45s; }
  @keyframes chip-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* ---------- sections ---------- */
section { padding: 84px 0; }
.section-head { max-width: 640px; margin: 0 0 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 14px;
  font-weight: 700;
}
.section-head p { color: var(--ink-soft); font-size: 18px; margin: 0; }
/* a hand-placed line break that only applies where the line is wide enough to need it */
.br-wide { display: none; }
@media (min-width: 900px) { .br-wide { display: inline; } }
.kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 12px;
}

/* ---------- feature grid ---------- */
.features { background: var(--bg); }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 20px;
}
.card {
  display: flex;            /* so a plan tag can sit on the bottom edge */
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--shadow-sm);
}
.card h3 { font-size: 18px; }
.card img.ico { width: 48px; height: 48px; margin-bottom: 14px; }
.card h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* ---------- screens gallery ---------- */
.screens { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rail {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding: 6px 24px 26px;
  margin: 0 -24px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.rail figure {
  flex: 0 0 262px;
  margin: 0;
  scroll-snap-align: center;
}
.rail img {
  width: 100%;
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  background: #fff;
}
.rail figcaption {
  margin-top: 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- brand film ---------- */
.ident {
  /* the film's own backdrop was lifted to pure white, so no frame edge shows */
  background: #fff;
  padding: 64px 0 68px;
  border-top: 1px solid var(--line);
}
.ident-stage {
  position: relative;
  margin: 0 auto;
  max-width: 600px;
}
.ident-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #fff;
}
.ident-stage figcaption {
  margin-top: 18px;
  text-align: center;
  font-size: 14.5px;
  color: var(--muted);
}
@media (max-width: 560px) { .ident { padding: 44px 0 46px; } }

/* ---------- four pillars ---------- */
.pillars { background: var(--bg); }
.pillars .section-head { max-width: 680px; }

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 20px;
}
/* four pillars sit better two-by-two than three-plus-one */
@media (min-width: 760px) {
  .pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pillar {
  position: relative;
  display: flex;             /* so the fact lists line up along a row */
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 30px 28px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.pillar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--tone);
}
.pillar.p-navy  { --tone: var(--w-t); --tone-ink: var(--w-t); --tone-bg: rgba(47, 73, 125, .10); }
.pillar.p-green { --tone: var(--w-a); --tone-ink: #4c8a4e; --tone-bg: rgba(116, 180, 117, .18); }
.pillar.p-amber { --tone: var(--w-o); --tone-ink: #a37c00; --tone-bg: rgba(254, 194, 13, .20); }
.pillar.p-red   { --tone: var(--w-s); --tone-ink: var(--w-s); --tone-bg: rgba(197, 66, 34, .12); }

.pillar-num {
  position: absolute;
  top: 26px; right: 28px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--tone);
  opacity: .45;
}
.pillar-ico {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.pillar-ico svg { width: 40px; height: 40px; overflow: visible; }
.pillar h3 { font-size: 21px; margin: 0 0 10px; letter-spacing: -.015em; padding-right: 42px; }
.pillar > p { margin: 0 0 18px; color: var(--muted); font-size: 15.5px; }

.pillar-facts { list-style: none; margin: auto 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
.pillar-facts li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.45;
}
.pillar-facts li:last-child { margin-bottom: 0; }
.pillar-facts li::before {
  content: "";
  position: absolute; left: 2px; top: 6px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--tone);
  border-bottom: 2px solid var(--tone);
  transform: rotate(-45deg);
}
@media (max-width: 520px) {
  .pillar { padding: 26px 22px 24px; }
  .pillar h3 { font-size: 19px; }
}

/* ---------- download ---------- */
.download { background: #fff; }
.download-box {
  background:
    radial-gradient(620px 300px at 10% 0%, rgba(107, 178, 240, .20), transparent 60%),
    radial-gradient(520px 320px at 90% 100%, rgba(116, 180, 117, .18), transparent 62%),
    #f9fbfe;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 58px 40px;
  text-align: center;
}
.download-box img.mark { width: 62px; height: 62px; margin: 0 auto 22px; }
.download-box h2 { margin-bottom: 14px; }
.download-box p { color: var(--ink-soft); max-width: 48ch; margin: 0 auto 28px; }
.store-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.platforms { margin-top: 26px; font-size: 14.5px; color: var(--muted); }

/* ---------- footer ---------- */
.site-footer {
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 44px 0 56px;
  font-size: 14.5px;
  color: var(--muted);
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; }
.site-footer img { height: 38px; width: auto; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--blue); text-decoration: underline; }
.foot-brand { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
/* the logo box is centred, but the wordmark inside it sits low — nudge it so the
   "taos" in the mark reads on the same line as the copyright text beside it */
.foot-brand img { transform: translateY(-1px); }
.copyright { color: var(--muted); }
@media (max-width: 620px) {
  .site-footer nav { margin-left: 0; }
}

/* ---------- legal / doc pages ---------- */
.doc { background: #fff; }
.doc .wrap { max-width: 760px; }
.doc h1 { font-size: clamp(30px, 4vw, 42px); margin-bottom: 8px; }
.doc .updated { color: var(--muted); font-size: 14.5px; margin: 0 0 40px; }
.doc h2 { font-size: 23px; margin: 40px 0 12px; }
.doc h3 { font-size: 18px; margin: 26px 0 8px; }
.doc p, .doc li { color: var(--ink-soft); }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.doc table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15.5px; }
.doc th, .doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { color: var(--ink); font-weight: 600; }
.doc .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 18px 0; }
.doc .table-scroll table { margin: 0; min-width: 560px; }
.doc .lang-switch { font-size: 14.5px; margin: 0 0 12px; }
.note {
  background: #fff8e3;
  border: 1px solid #f3e0a6;
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 15px;
  color: #6b5312;
}
.contact-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin: 22px 0;
}
.contact-card p { margin: 0 0 6px; }
.contact-card p:last-child { margin-bottom: 0; }

/* ---------- pricing ---------- */
.pricing-hero { padding: 72px 0 8px; background: #fff; }
.pricing-hero .section-head { margin-bottom: 28px; }
.pricing { padding: 24px 0 84px; background: #fff; }
.billing-toggle {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  margin: 0 auto 36px;
}
.billing-toggle label {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.billing-toggle label .save { color: #4c9a4e; font-weight: 700; margin-left: 4px; }
.billing-radio { position: absolute; opacity: 0; pointer-events: none; }
.toggle-row { text-align: center; }
#bill-annual:checked ~ .toggle-row label[for="bill-annual"],
#bill-monthly:checked ~ .toggle-row label[for="bill-monthly"] { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
#bill-annual:focus-visible ~ .toggle-row label[for="bill-annual"],
#bill-monthly:focus-visible ~ .toggle-row label[for="bill-monthly"] { outline: 2px solid var(--blue); outline-offset: 2px; }
.price-monthly { display: none; }
#bill-monthly:checked ~ .plans .price-monthly { display: block; }
#bill-monthly:checked ~ .plans .price-annual { display: none; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.plan::before { content: ""; height: 6px; background: var(--plan-color, var(--blue)); }
.plan.free { --plan-color: var(--blue); }
.plan.workspace { --plan-color: var(--teal); }
.plan.business { --plan-color: var(--green); box-shadow: var(--shadow-md); border-color: #cfe4cf; }
.plan-body { padding: 26px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.plan-name { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 4px; }
.plan h3 { font-size: 24px; letter-spacing: -.02em; margin: 0 0 6px; }
.plan .tagline { font-size: 15px; color: var(--muted); margin: 0 0 20px; min-height: 3em; }
.badge {
  position: absolute; top: 20px; right: 20px;
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: rgba(116, 180, 117, .18); color: #3f7f41;
}
.price { margin: 0 0 4px; }
.price .amount { font-size: 42px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.price .per { font-size: 14.5px; color: var(--muted); margin-left: 4px; }
.price .alt { display: block; font-size: 14.5px; color: var(--muted); margin-top: 2px; }
.plan .btn { margin: 20px 0 22px; width: 100%; }
.plan .btn-plan { background: var(--plan-color); color: #fff; }
.plan .btn-plan:hover { filter: brightness(.94); }
.plan .includes { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.plan ul { list-style: none; margin: 0; padding: 0; }
.plan li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.45;
}
.plan li::before {
  content: "";
  position: absolute; left: 2px; top: 5px;
  width: 12px; height: 7px;
  border-left: 2px solid var(--plan-color);
  border-bottom: 2px solid var(--plan-color);
  transform: rotate(-45deg);
}
.pricing-notes { max-width: 760px; margin: 40px auto 0; text-align: center; font-size: 14.5px; color: var(--muted); }
.pricing-notes p { margin: 0 0 8px; }

/* ==========================================================================
   Motion
   Everything below is opt-in: the .js class is set by a one-line script in
   <head>, so with JavaScript off nothing is ever hidden. Every rule sits
   inside prefers-reduced-motion: no-preference.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* --- scroll reveal -----------------------------------------------------
     Kierunek wejścia niesie atrybut: puste `data-reveal` to domyślne wejście
     z dołu, a `left` / `right` / `zoom` to warianty rozdzielane sekcjami przez
     mkreveal.py. Rytm jest stały dla całej witryny, więc strona jest żywa,
     ale nie chaotyczna — dwa sąsiednie bloki nigdy nie wchodzą z tej samej
     strony bez powodu. */
  .js [data-reveal] { opacity: 0; transform: translateY(18px); }
  .js [data-reveal="left"]  { transform: translateX(-30px); }
  .js [data-reveal="right"] { transform: translateX(30px); }
  .js [data-reveal="up"]    { transform: translateY(18px); }
  .js [data-reveal="zoom"]  { transform: scale(.955); }
  .js [data-reveal].in {
    opacity: 1;
    transform: none;
    transition: opacity .6s cubic-bezier(.22,.72,.28,1) var(--d, 0s),
                transform .6s cubic-bezier(.22,.72,.28,1) var(--d, 0s);
  }
  /* Wejścia z boku wychodzą poza obrys sekcji — bez tego na wąskim ekranie
     pojawia się poziomy pasek przewijania na czas trwania animacji.
     Przycinamy tylko te sekcje, które faktycznie mają wejście z boku (nie wszystkie
     podstrony mają <main>, a globalne przycięcie zabrałoby margines sekcjom, które
     celowo wychodzą poza obrys). `clip` zamiast `hidden`, bo nie robi z sekcji
     kontenera przewijania i nie psuje przyklejonego nagłówka tabeli. */
  section:has([data-reveal="left"]),
  section:has([data-reveal="right"]) { overflow-x: clip; }

  /* --- pillar cards ------------------------------------------------------ */
  .pillar { transition: transform .35s cubic-bezier(.22,.72,.28,1), box-shadow .35s ease; }
  .pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .pillar::before { transform: scaleY(0); transform-origin: top; transition: transform .6s cubic-bezier(.22,.72,.28,1) calc(var(--d, 0s) + .15s); }
  .js .pillar.in::before { transform: scaleY(1); }

  /* --- icon 01: plumes stream in, then nudge on hover -------------------- */
  .ic-swift .pl { opacity: 0; transform: translateX(-7px); }
  .js .pillar.in .ic-swift .pl {
    opacity: 1; transform: none;
    transition: opacity .45s ease var(--pd), transform .55s cubic-bezier(.2,.8,.3,1) var(--pd);
  }
  .ic-swift .pl-1 { --pd: .30s; }
  .ic-swift .pl-2 { --pd: .38s; }
  .ic-swift .pl-3 { --pd: .46s; }
  .pillar:hover .ic-swift .pl-1 { transform: translateX(2.5px); }
  .pillar:hover .ic-swift .pl-2 { transform: translateX(4px); }
  .pillar:hover .ic-swift .pl-3 { transform: translateX(3px); }

  /* --- icon 02: the loop turns once, and again on hover ------------------ */
  .ic-loop .spin { transform-box: view-box; transform-origin: 20px 20px; }
  .js .pillar.in .ic-loop .spin { animation: taos-turn 1.15s cubic-bezier(.5,0,.3,1) .28s both; }
  .pillar:hover .ic-loop .spin { animation: taos-turn .9s cubic-bezier(.5,0,.3,1); }
  @keyframes taos-turn { from { transform: rotate(-180deg); } to { transform: rotate(180deg); } }

  /* --- icon 03: the quiet ones settle, one stays awake ------------------- */
  .ic-calm .folded circle { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); }
  .ic-calm .awake { transform-box: view-box; transform-origin: 20px 30px; transform: translateY(8px) scale(.8); opacity: 0; }
  .js .pillar.in .ic-calm .folded circle {
    opacity: 1; transform: none;
    transition: opacity .4s ease var(--dd), transform .5s cubic-bezier(.3,1.4,.5,1) var(--dd);
  }
  .ic-calm .folded circle:nth-child(1) { --dd: .30s; }
  .ic-calm .folded circle:nth-child(2) { --dd: .38s; }
  .ic-calm .folded circle:nth-child(3) { --dd: .46s; }
  .ic-calm .folded circle:nth-child(4) { --dd: .54s; }
  .js .pillar.in .ic-calm .awake {
    opacity: 1; transform: none;
    transition: opacity .4s ease .62s, transform .8s cubic-bezier(.3,1.5,.5,1) .62s;
  }
  .pillar:hover .ic-calm .awake { animation: taos-bob 1.8s ease-in-out infinite; }
  @keyframes taos-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }

  /* --- icon 04: the shield draws, the eye opens -------------------------- */
  .ic-shield .sh  { stroke-dasharray: 108; stroke-dashoffset: 108; }
  .ic-shield .eye { stroke-dasharray: 34; stroke-dashoffset: 34; }
  .ic-shield .pupil { transform-box: view-box; transform-origin: 20px 20px; transform: scale(0); }
  .js .pillar.in .ic-shield .sh  { stroke-dashoffset: 0; transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1) .25s; }
  .js .pillar.in .ic-shield .eye { stroke-dashoffset: 0; transition: stroke-dashoffset .7s cubic-bezier(.4,0,.2,1) .7s; }
  .js .pillar.in .ic-shield .pupil { transform: none; transition: transform .5s cubic-bezier(.3,1.6,.5,1) .95s; }
  .pillar:hover .ic-shield .pupil { animation: taos-blink 1.8s ease-in-out infinite; }

  /* three organisations feeding one inbox */
  .ic-hub .org { transform-box: fill-box; transform-origin: center; opacity: 0; transform: translateX(-6px) scale(.6); }
  .js .pillar.in .ic-hub .org {
    opacity: 1; transform: none;
    transition: opacity .32s ease calc(.22s + var(--i, 0) * .1s),
                transform .5s cubic-bezier(.3,1.5,.5,1) calc(.22s + var(--i, 0) * .1s);
  }
  .ic-hub .wire { stroke-dasharray: 22; stroke-dashoffset: 22; }
  .js .pillar.in .ic-hub .wire {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .5s cubic-bezier(.4,0,.2,1) calc(.4s + var(--i, 0) * .1s);
  }
  .ic-hub .hub { transform-box: view-box; transform-origin: 29.4px 20px; transform: scale(0); }
  .js .pillar.in .ic-hub .hub { transform: none; transition: transform .5s cubic-bezier(.3,1.6,.5,1) .78s; }
  .ic-hub .badge { transform-box: view-box; transform-origin: 33.6px 15.4px; transform: scale(0); }
  .js .pillar.in .ic-hub .badge { transform: none; transition: transform .45s cubic-bezier(.3,1.8,.5,1) 1s; }
  .pillar:hover .ic-hub .badge { animation: taos-ping 1.5s ease-out infinite; }
  @keyframes taos-ping { 0%, 100% { transform: none; } 35% { transform: scale(1.35); } }
  @keyframes taos-blink { 0%,100% { transform: scale(1); } 50% { transform: scale(.72); } }

  /* --- feature cards and gallery ----------------------------------------- */
  .features .card { transition: transform .3s cubic-bezier(.22,.72,.28,1), box-shadow .3s ease, border-color .3s ease; }
  .features .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #d8e2f0; }
  .rail figure { transition: transform .3s cubic-bezier(.22,.72,.28,1); }
  .rail figure:hover { transform: translateY(-4px); }
}

/* ---------- what's inside: the not-yet-shipped card ---------- */
.card { position: relative; }
.card-upcoming { border-style: dashed; border-color: #d4dded; background: #fbfcfe; box-shadow: none; }
.card-upcoming .ico { opacity: .55; }
.card-upcoming h3 { color: var(--ink-soft); }
.card-soon {
  position: absolute;
  top: 18px; right: 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #8a6d1f;
  background: rgba(254, 194, 13, .20);
  border-radius: 999px;
  padding: 4px 10px;
}

/* ---------- closing panel ---------- */
.close-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 4px; }
.download-box .mark { width: auto; height: 74px; }

/* ---------- the not-yet-shipped strip ---------- */
.upcoming {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  padding: 22px 26px;
  border: 1px dashed #cdd9ea;
  border-radius: var(--radius);
  background: #fbfcfe;
}
.upcoming-ico {
  flex: none;
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
}
.upcoming-ico svg { width: 34px; height: 34px; }
.upcoming-text { min-width: 0; }
.upcoming-text h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.01em; }
.upcoming-text p { margin: 0; color: var(--muted); font-size: 15px; }
.upcoming-tag {
  flex: none;
  align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: #8a6d1f;
  background: rgba(254, 194, 13, .20);
  border-radius: 999px;
  padding: 5px 11px;
}
@media (max-width: 720px) {
  .upcoming { flex-wrap: wrap; gap: 14px; }
  .upcoming-tag { order: -1; }
}

/* ---------- open-beta bar ---------- */
.beta-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 11px 24px;
  background: var(--w-t);
  color: #fff;
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1.35;
  text-align: center;
}
.beta-bar strong { font-weight: 700; }
.beta-bar .beta-text { color: rgba(255, 255, 255, .88); }
.beta-bar strong { color: #fff; }
.beta-dot {
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--w-o);
  box-shadow: 0 0 0 0 rgba(254, 194, 13, .6);
}
.beta-go {
  flex: none;
  font-weight: 600;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  padding-bottom: 1px;
}
.beta-bar:hover .beta-go { border-bottom-color: #fff; }
@media (max-width: 720px) {
  .beta-bar { font-size: 13.5px; padding: 10px 16px; gap: 9px; }
  .beta-bar .beta-go { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .beta-dot { animation: beta-pulse 2.4s ease-out infinite; }
  @keyframes beta-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(254, 194, 13, .55); }
    70%  { box-shadow: 0 0 0 7px rgba(254, 194, 13, 0); }
    100% { box-shadow: 0 0 0 0 rgba(254, 194, 13, 0); }
  }
}

.beta-kicker {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--w-t);
  margin: 0 0 10px;
}

/* ---------- gallery: a slow drift instead of a scrollbar ---------- */
.rail {
  overflow: hidden;
  margin: 0 -24px;
  padding: 6px 0 26px;
  /* soft edges, so figures enter and leave instead of being cut */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.rail-track { display: flex; width: max-content; }
.rail-set { display: flex; gap: 22px; padding-right: 22px; }
.rail figure { flex: 0 0 262px; margin: 0; }

/* drifts on its own, and can be grabbed and pushed either way.
   touch-action: pan-y keeps vertical page scrolling on phones. */
.rail { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.rail.is-dragging { cursor: grabbing; }
.rail img { pointer-events: none; -webkit-user-drag: none; }

/* ---------- what happens after the preview ---------- */
.after-date {
  max-width: 52ch;
  margin: 0 auto 26px;
  font-size: 14.5px;
  color: var(--muted);
}
.store-btn.is-waiting { opacity: .5; pointer-events: none; }

/* store buttons must survive a narrow phone */
.store-btn { max-width: 100%; }
.store-btn .lines { min-width: 0; }
.store-btn .lines strong, .store-btn .lines small { overflow-wrap: anywhere; }
@media (max-width: 460px) {
  .download-box .store-row { flex-direction: column; align-items: stretch; }
  .store-btn { justify-content: flex-start; }
  .store-btn .lines strong { font-size: 15px; }
}

/* ---------- no credit card, stated plainly ---------- */
.no-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 8px 18px 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.no-card-tick {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(116, 180, 117, .20);
  color: #46893f;
}
.no-card-tick svg { width: 13px; height: 13px; }

/* belt and braces: a store icon must never stretch to fill the button */
.store-btn svg { width: 24px; height: 24px; flex: none; }

/* ---------- feature icons: lighter than the pillar set, and sized ---------- */
.card .ico { width: 52px; height: 52px; margin-bottom: 14px; display: block; overflow: visible; }

/* ---------- closing panel ---------- */
.close-lede { max-width: 60ch; margin: 0 auto 30px; }
.download-box h2 { max-width: 30ch; margin-left: auto; margin-right: auto; line-height: 1.16; }

.grab-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 720px;
  margin: 0 auto 22px;
}
.grab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.grab:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #cfdaea; }
.grab-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--bg); color: var(--w-t); }
.grab-lines { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.grab-lines small { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.grab-lines strong { font-size: 15px; font-weight: 600; }
.grab-web .grab-ico { background: rgba(32, 93, 165, .10); }
.grab.is-waiting { opacity: .52; box-shadow: none; }
@media (max-width: 760px) { .grab-row { grid-template-columns: 1fr; max-width: 380px; } }

.download-box .platforms { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }

/* .download-box p is more specific than .close-lede, so match it */
.download-box .close-lede { max-width: 80ch; line-height: 1.75; margin-bottom: 34px; }

/* ---------- what it replaces ---------- */
.savings { background: #fff; border-top: 1px solid var(--line); }
.savings .section-head { max-width: 760px; }

.saving-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
}
.saving {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.saving::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tone); }
.saving.tone-navy  { --tone: var(--w-t); --tone-ink: var(--w-t); }
.saving.tone-teal  { --tone: var(--teal); --tone-ink: #14837c; }
.saving.tone-green { --tone: var(--w-a); --tone-ink: #3f7f41; }

.saving-plan {
  margin: 0 0 14px;
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tone-ink);
}
.saving-price { margin: 0 0 20px; display: flex; flex-direction: column; gap: 2px; }
.saving-amount { font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--ink); }
.saving-per { font-size: 14px; color: var(--muted); }

.saving-math { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14.5px; }
.saving-math > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px 14px; padding: 5px 0;
}
.saving-math dt { margin: 0; color: var(--muted); min-width: 0; }
.saving-math dd { margin: 0; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
/* no coloured block — a hairline and the card's own accent carry the emphasis */
.saving-math .saving-keep {
  margin-top: 10px;
  padding: 13px 0 2px;
  border-top: 1px solid var(--line);
}
.saving-math .saving-keep dt { color: var(--muted); font-weight: 500; }
.saving-math .saving-keep dd {
  color: var(--tone-ink);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -.02em;
}
.saving-math .saving-year { padding-top: 8px; }
.saving-math .saving-year dd { color: var(--tone-ink); font-weight: 700; }

/* Every card shares one set of rows, so a label that wraps in one language wraps the
   same row in all three cards instead of sliding the figures out of line. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 620px) {
    .saving-grid { grid-template-rows: auto auto auto auto; }
    .saving {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      align-content: start;
    }
    .saving-price { margin-bottom: 0; align-self: start; }
    .saving-math {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
      margin-top: 20px;
    }
    .saving-math > div { align-items: end; }
    .saving-math .saving-keep { margin-top: 0; }
  }
}

.saving-note {
  max-width: none;          /* the note uses the full column, so it runs to three lines, not five */
  margin: 34px auto 0;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--muted);
  text-wrap: pretty;        /* keeps the last line from ending on a single word */
}
@media (max-width: 900px) { .saving-note { text-align: left; } }
.saving-note strong { color: var(--ink-soft); font-weight: 600; }
.saving-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }

/* ---------- out of the feature grid ---------- */
.grid-more { margin: 22px 0 0; text-align: center; font-size: 15.5px; font-weight: 600; }
.grid-more a { text-decoration: none; }
.grid-more a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Gallery, stated defensively.

   Inside WordPress this markup sits under whatever theme is active, and themes
   style figure / img / figcaption globally — several position the caption
   absolutely over the image, which stacks every caption on top of the next and
   lets a picture appear from underneath. These rules restate the basics at a
   specificity a theme will not beat by accident.
   --------------------------------------------------------------------------- */
.rail .rail-track { will-change: transform; }

.rail .rail-set figure {
  position: static;
  display: block;
  float: none;
  flex: 0 0 262px;
  width: 262px;
  max-width: 262px;
  margin: 0;
  padding: 0;
  inset: auto;
  transform: none;
  background: none;
}
.rail .rail-set figure img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  object-fit: contain;
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  background: #fff;
}
.rail .rail-set figcaption {
  position: static;
  display: block;
  inset: auto;
  transform: none;
  width: auto;
  margin: 14px 0 0;
  padding: 0;
  background: none;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- third hero chip, and a warmer icon tint ---------- */
.chip-ico.warm { background: rgba(197, 66, 34, .12); color: var(--w-s); }
/* three chips, so each hangs well clear of the screenshot instead of over it */
.hero-chip { max-width: 232px; padding: 10px 14px 10px 11px; }
.hero-chip strong { font-size: 14px; }
.hero-chip small { font-size: 12px; }
.chip-ico.sun { background: rgba(254, 194, 13, .20); color: #a37500; }

/* four chips that frame the screenshot rather than sit on top of it */
.chip-task  { left: -86px; top: -2%; }
.chip-sync  { right: -92px; top: 28%; }
.chip-voice { right: -74px; bottom: 16%; }
.chip-org   { left: -96px; bottom: 1%; }

@media (max-width: 1240px) {
  .chip-task  { left: -34px; }
  .chip-sync  { right: -36px; }
  .chip-voice { right: -28px; bottom: 15%; }
  .chip-org   { left: -30px; }
}
@media (max-width: 1040px) {
  .chip-task  { left: -12px; }
  .chip-sync  { right: -12px; }
  .chip-voice { right: -10px; bottom: 17%; }
  .chip-org   { left: -10px; }
}
@media (max-width: 900px) {
  .chip-task  { left: -16px; top: 2%; }
  .chip-sync  { right: -16px; top: 30%; }
  .chip-voice { right: -16px; bottom: 18%; }
  .chip-org   { left: -16px; bottom: 2%; }
}

/* ---------- feature icons come alive ---------- */
@media (prefers-reduced-motion: no-preference) {
  .card .ico .p { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.3); }
  .js .card.in .ico .p {
    opacity: 1; transform: none;
    transition: opacity .35s ease calc(.25s + var(--i, 0) * .09s),
                transform .6s cubic-bezier(.3,1.6,.5,1) calc(.25s + var(--i, 0) * .09s);
  }
  .card:hover .ico .p { animation: ico-pop .5s ease calc(var(--i, 0) * .06s); }
  @keyframes ico-pop { 50% { transform: scale(1.22); } }

  /* the announcement waves ripple outward */
  .card .ico .w { opacity: 0; }
  .js .card.in .ico .w { opacity: 1; transition: opacity .4s ease calc(.35s + var(--i, 0) * .12s); }
  .ic-f6 .w { transform-box: fill-box; transform-origin: 0% 50%; }
  .card:hover .ic-f6 .w { animation: ico-wave 1.4s ease-out calc(var(--i, 0) * .16s) infinite; }
  @keyframes ico-wave { 0% { opacity: .15; } 35% { opacity: 1; } 100% { opacity: .15; } }

  /* the gauge draws itself */
  .ic-f8 .draw { stroke-dasharray: 62; stroke-dashoffset: 62; }
  .js .card.in .ic-f8 .draw { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.4,0,.2,1) .2s; }
}
.chip-task { max-width: 252px; }

/* the headline figure is the annual-billing rate — say so, and show the alternative */


/* ---------- alongside Google Workspace / Microsoft 365 ---------- */
.fits { background: var(--bg); border-top: 1px solid var(--line); }
.fits-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  background:
    radial-gradient(560px 260px at 6% 0%, rgba(32, 93, 165, .09), transparent 62%),
    radial-gradient(460px 280px at 96% 100%, rgba(27, 166, 157, .10), transparent 64%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 48px 46px;
  box-shadow: var(--shadow-sm);
}
.fits-copy h2 { font-size: clamp(25px, 2.5vw, 33px); line-height: 1.18; margin: 0 0 16px; }
.fits-copy p { color: var(--ink-soft); margin: 0; line-height: 1.72; }

.fits-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.fits-list li { display: flex; gap: 16px; align-items: flex-start; }
.fits-list strong { display: block; font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.fits-list small { display: block; font-size: 14px; line-height: 1.6; color: var(--muted); }
.fits-ico {
  flex: none;
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 17px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  background: rgba(47, 73, 125, .10);
  color: var(--w-t);
}
.fits-ico.alt  { background: rgba(27, 166, 157, .14); color: #14837c; }
.fits-ico.warm { background: rgba(254, 194, 13, .20); color: #a37500; }

@media (max-width: 980px) {
  .fits-panel { grid-template-columns: 1fr; gap: 34px; padding: 40px 30px; }
}
@media (max-width: 560px) {
  .fits-panel { padding: 32px 22px; border-radius: 22px; }
}

/* the three integration icons, in the same language as the rest of the set */
.fits-ico, .fits-ico.alt, .fits-ico.warm { background: #fff; }
.fits-ico .fic { overflow: visible; }

@media (prefers-reduced-motion: no-preference) {
  .fits-list .d { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.3); }
  .js .fits-list li.in .d {
    opacity: 1; transform: none;
    transition: opacity .3s ease calc(.5s + var(--i, 0) * .12s),
                transform .5s cubic-bezier(.3,1.6,.5,1) calc(.5s + var(--i, 0) * .12s);
  }
  /* the stems draw themselves, then the feather tips land — as on the mark */
  .fits-list .a { stroke-dasharray: 16; stroke-dashoffset: 16; }
  .js .fits-list li.in .a { stroke-dashoffset: 0; transition: stroke-dashoffset .55s cubic-bezier(.4,0,.2,1) .45s; }
  .fits-list .fic-meet .a { stroke-dasharray: none; transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.4); }
  .js .fits-list li.in .fic-meet .a { opacity: 1; transform: none; transition: opacity .3s ease .6s, transform .45s cubic-bezier(.3,1.6,.5,1) .6s; }
  @keyframes fic-pop { 50% { transform: scale(1.22); } }
}

/* the sync arc keeps turning gently while the cursor is on the row */
@media (prefers-reduced-motion: no-preference) {
  .fits-list li:hover .d { animation: fic-pop .55s ease calc(var(--i, 0) * .07s); }
}

/* ---------- call to action, away from the hero and the closing panel ---------- */
.cta-quiet {
  margin: 40px 0 0;
  text-align: center;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted);
}
.cta-quiet a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(32, 93, 165, .28);
  padding-bottom: 1px;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease;
}
.cta-quiet a:hover { color: var(--w-t); border-bottom-color: var(--w-t); }

.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px 32px;
  margin-top: 28px;
  padding: 26px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
}
.cta-band-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cta-band-copy strong { font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.cta-band-copy span { font-size: 14.5px; color: var(--muted); }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-band .btn { padding: 12px 22px; font-size: 15px; }

@media (max-width: 720px) {
  .cta-band { padding: 24px 22px; }
  .cta-band-actions { width: 100%; }
  .cta-band-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* compact store buttons, for the band under the feature grid */
.grab.grab-sm { padding: 9px 14px; border-radius: 14px; gap: 10px; }
.grab-sm .grab-ico { width: 32px; height: 32px; border-radius: 10px; }
.grab-sm .grab-lines small { font-size: 10.5px; }
.grab-sm .grab-lines strong { font-size: 14px; }
.cta-band-actions { align-items: stretch; }
.cta-band-actions .btn { display: inline-flex; align-items: center; }
@media (max-width: 720px) {
  .cta-band-actions .grab.grab-sm { flex: 1 1 auto; }
}

/* keep the band on one line while there is room for it */
@media (min-width: 1000px) {
  .cta-band { flex-wrap: nowrap; }
  .cta-band-copy { flex: 1 1 auto; }
  .cta-band-actions { flex: 0 0 auto; }
}
.cta-band-copy strong { text-wrap: balance; }

/* which plan a capability starts on — so the grid does not overstate the free tier */
/* pinned to the foot of the card, so the tags line up across the row */
.card p.tier-tag {
  align-self: flex-start;
  margin: auto 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  width: 100%;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ==========================================================================
   features page
   ========================================================================== */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.fhero {
  background:
    radial-gradient(760px 340px at 12% 0%, rgba(107, 178, 240, .18), transparent 62%),
    radial-gradient(620px 320px at 88% 100%, rgba(116, 180, 117, .16), transparent 64%),
    var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 76px 0 68px;
}
.fhero h1 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.1; margin: 0 0 18px; letter-spacing: -.02em; }
.fhero .section-head p { font-size: 17px; line-height: 1.7; }
.fhero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }

.fsec { padding: 72px 0; border-bottom: 1px solid var(--line); }
.fsec:nth-of-type(even) { background: var(--bg); }
.fsec .section-head { max-width: 720px; margin-bottom: 36px; }
.fsec .section-head h2 { position: relative; padding-left: 18px; }
.fsec .section-head h2::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 4px; border-radius: 3px; background: var(--tone, var(--w-t));
}
.fsec.tone-navy  { --tone: var(--w-t); }
.fsec.tone-green { --tone: var(--w-a); }
.fsec.tone-amber { --tone: var(--w-o); }
.fsec.tone-red   { --tone: var(--w-s); }
.fsec.tone-teal  { --tone: var(--teal); }

.feat-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 18px;
}
.feat {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 20px 18px;
  box-shadow: var(--shadow-sm);
}
.feat h3 { margin: 0 0 7px; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.feat p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
/* the plan limit sits on the bottom edge of the card, as on the homepage */
.feat p.feat-tier {
  margin: auto 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  width: 100%;
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.feat:not(:has(> .feat-tier)) p:last-child { margin-bottom: 0; }

/* One-line and two-line headings must not push their descriptions out of step: every card
   in a row shares the same three tracks — heading, body, plan label. Without subgrid the
   heading simply reserves two lines, which fixes the common case. */
.feat-list .feat h3 { min-height: 2.6em; }
@supports (grid-template-rows: subgrid) {
  .feat-list .feat {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-content: start;
  }
  .feat-list .feat h3 { min-height: 0; }
  .feat-list .feat p.feat-tier { align-self: end; margin: 0; }
  /* liczba ścieżek musi odpowiadać liczbie dzieci kafelka: ikona zajmuje własną,
     więc kafelek z ikoną I etykietą pakietu potrzebuje czterech, a nie trzech —
     inaczej etykieta ląduje na tekście */
  .feat-list .feat:has(> .ico):has(> .feat-tier) { grid-row: span 4; }
}

/* jurisdiction band */
.jsec {
  background:
    radial-gradient(680px 300px at 88% 0%, rgba(107, 178, 240, .16), transparent 62%),
    var(--bg);
}
.kicker-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* the pill rides inside the kicker's own line box, so it cannot push the heading down */
.kicker-row .eyebrow-eu {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  line-height: 1;
  gap: 7px;
  padding: 2px 11px 2px 3px;
  box-shadow: none;
}
.kicker-row .eyebrow-eu .flag-eu { width: 21px; height: 14px; border-radius: 3px; }

/* ==========================================================================
   plan table
   ========================================================================== */
.plan-sec { background: #fff; padding: 76px 0; }
.plan-scroll { margin-top: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.plan-table {
  width: 100%; min-width: 660px;
  border-collapse: separate; border-spacing: 0;
  font-size: 15px;
}
.plan-table col.col-feat { width: 40%; }
.plan-table col.col-hi { width: 20%; }

/* header: three plan cards that happen to be table cells */
.plan-table thead th {
  position: sticky; top: 78px; z-index: 2;   /* clears the sticky site header */
  background: #fff;
  padding: 18px 16px 16px;
  text-align: center; vertical-align: bottom;
  border-bottom: 1px solid var(--w-t);
}
.plan-table thead th.ph-blank { border-bottom-color: var(--line); }
.plan-table thead th.hi {
  /* opaque base under the tint: a sticky header must never let the rows show through */
  background-color: #fff;
  background-image: linear-gradient(180deg, rgba(47, 73, 125, .075), rgba(47, 73, 125, .045));
  border-radius: 16px 16px 0 0;
}
.ph-flag {
  display: inline-block; margin-bottom: 8px;
  padding: 3px 10px; border-radius: 999px;
  background: var(--w-t); color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.ph-name { display: block; font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.ph-price { display: block; margin-top: 2px; font-size: 26px; font-weight: 700; color: var(--w-t); letter-spacing: -.02em; line-height: 1.1; }
.ph-unit { display: block; font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: .01em; }

/* group dividers */
.plan-group th {
  padding: 26px 0 9px;
  text-align: left; border: 0;
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
}
.plan-group th span { display: inline-flex; align-items: center; gap: 9px; }
.plan-group th span::before {
  content: ""; width: 16px; height: 3px; border-radius: 2px; background: var(--tone, var(--w-t));
}
.plan-group.tone-navy  { --tone: var(--w-t); }
.plan-group.tone-green { --tone: var(--w-a); }
.plan-group.tone-amber { --tone: var(--w-o); }
.plan-group.tone-red   { --tone: var(--w-s); }
.plan-group.tone-teal  { --tone: var(--teal); }

/* rows: hairlines and air, no zebra */
.plan-table tbody th,
.plan-table tbody td {
  padding: 13px 16px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.plan-table tbody th {
  text-align: left; font-weight: 500; font-size: 15px; color: var(--ink-soft);
  padding-left: 0;
}
.plan-table tbody tr:hover th,
.plan-table tbody tr:hover td { background: rgba(47, 73, 125, .028); }
.plan-table tbody tr:hover td.hi { background: rgba(47, 73, 125, .075); }
.plan-table tbody td.hi { background: rgba(47, 73, 125, .045); }
.plan-table tbody tr:last-child td.hi { border-radius: 0 0 16px 16px; }
.plan-table .val { font-size: 13px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }

.tick {
  display: inline-block; position: relative;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(116, 180, 117, .16);
  vertical-align: middle;
}
.tick::after {
  content: ""; position: absolute; left: 7px; top: 7.5px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--w-a); border-bottom: 2px solid var(--w-a);
  transform: rotate(-45deg);
}
.plan-table td.hi .tick { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(116, 180, 117, .5); }
.plan-table td.hi .tick::after { border-color: #5aa35b; }
.plan-table tbody tr:hover td.hi .tick { background: #fff; }

.dash { display: inline-block; width: 12px; height: 2px; border-radius: 2px; background: #cdd7e4; vertical-align: middle; }

.plan-tabs { display: none; gap: 8px; margin: 18px 0 2px; }
.plan-tabs button {
  flex: 1 1 0; min-width: 0;
  padding: 10px 6px; border: 1px solid var(--line); border-radius: 13px;
  background: #fff; color: var(--muted);
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: -.01em;
  cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.plan-tabs button[aria-selected="true"] { background: var(--w-t); border-color: var(--w-t); color: #fff; }

.plan-hint { display: none; margin: 10px 0 0; font-size: 12.5px; color: var(--muted); text-align: right; }
.plan-note { max-width: none; margin: 30px auto 0; text-align: center; font-size: 15px; line-height: 1.7; color: var(--muted); }
.plan-note strong { color: var(--ink); }
.plan-sec .upcoming { margin-top: 34px; }
.plan-sec .cta-band { margin-top: 26px; }

@media (max-width: 900px) {
  .fsec { padding: 56px 0; }
  .fhero { padding: 56px 0 50px; }
  .plan-sec { padding: 56px 0; }
  .plan-note { text-align: left; }
}
/* a grid or flex ancestor would otherwise refuse to let the scroller shrink */
.plan-sec .wrap { min-width: 0; }
.plan-scroll { max-width: 100%; min-width: 0; }
/* an overflow container traps position:sticky, so only scroll horizontally where it is needed */
@media (min-width: 780px) {
  .plan-scroll { overflow: visible; }
}
@media (max-width: 779px) {
  .plan-hint { display: block; }
  .plan-tabs { display: flex; }
  .plan-table { min-width: 580px; font-size: 14px; }
  .plan-table thead th { position: static; padding: 14px 10px 12px; }
  .plan-table tbody th, .plan-table tbody td { padding: 12px 10px; }
  .ph-price { font-size: 22px; }

  /* one plan at a time: the switcher hides the other two columns, and the table fits */
  .plan-table[data-pick] { min-width: 0; }
  .plan-table[data-pick] col.col-feat { width: 60%; }
  .plan-table[data-pick] .ph-flag { margin-bottom: 4px; }
  .plan-table[data-pick="0"] .c1, .plan-table[data-pick="0"] .c2,
  .plan-table[data-pick="1"] .c0, .plan-table[data-pick="1"] .c2,
  .plan-table[data-pick="2"] .c0, .plan-table[data-pick="2"] .c1 { display: none; }
  .plan-table[data-pick] ~ * .plan-hint, .plan-scroll:has(.plan-table[data-pick]) + .plan-hint { display: none; }
}

/* ==========================================================================
   language menu
   ========================================================================== */
.lang { position: relative; margin-left: 6px; }
.lang > summary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 11px 7px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink);
  cursor: pointer; list-style: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary::marker { content: ""; }
.lang > summary:hover { border-color: #cfdaea; }
.lang[open] > summary { border-color: #cfdaea; box-shadow: 0 1px 2px rgba(20, 33, 61, .10); }
.lang .flag { width: 18px; height: 12px; border-radius: 2px; display: block; }
.lang-caret { color: var(--muted); transition: transform .18s ease; }
.lang[open] .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 232px; max-height: 340px; overflow-y: auto;
  padding: 6px; background: #fff;
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 18px 44px rgba(20, 33, 61, .14), 0 2px 6px rgba(20, 33, 61, .06);
}
.lang-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 12px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-soft); text-decoration: none;
  white-space: nowrap;
}
.lang-item:hover { background: var(--bg); color: var(--ink); }
.lang-item.is-on { font-weight: 600; color: var(--ink); }
.lang-item.is-on::after {
  content: ""; margin-left: auto;
  width: 13px; height: 7px;
  border-left: 2px solid var(--w-a); border-bottom: 2px solid var(--w-a);
  transform: rotate(-45deg) translateY(-2px);
}
.lang-soon {
  margin: 4px 0 2px; padding: 10px 10px 4px;
  border-top: 1px solid var(--line);
  font-size: 11px; line-height: 1.6; color: var(--muted); white-space: normal;
}
.lang-soon strong {
  display: block; margin-bottom: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* inside the burger menu the panel is already a dropdown, so this one sits in the flow */
.menu-panel .lang { margin: 8px 0 2px; }
.menu-panel .lang > summary { width: 100%; justify-content: flex-start; }
.menu-panel .lang-menu {
  position: static; min-width: 0; margin-top: 6px;
  border-radius: 14px; box-shadow: none; max-height: 260px;
}
@media (max-width: 1040px) {
  .nav > .lang { display: none; }
}

/* ==========================================================================
   comparison page
   ========================================================================== */
.plan-table .col-price { width: 13%; }
.plan-table th.price, .plan-table td.price { text-align: right; padding-right: 22px; }
.plan-table td.price .val { color: var(--muted); font-weight: 500; }

/* the three summary rows carry the whole argument, so they are set apart */
.plan-table tfoot th,
.plan-table tfoot td { padding: 13px 16px; text-align: center; border-top: 1px solid var(--line); }
.plan-table tfoot th { text-align: left; padding-left: 0; font-weight: 600; color: var(--ink-soft); }
.plan-table tfoot .sum-stack th,
.plan-table tfoot .sum-stack td { border-top: 2px solid var(--w-t); padding-top: 16px; }
.plan-table tfoot td.hi { background: rgba(47, 73, 125, .045); }
.plan-table tfoot .sum-taos td .val { color: var(--ink); font-weight: 700; }
.plan-table tfoot .sum-keep th { color: var(--ink); }
.plan-table tfoot .sum-keep td { padding-bottom: 18px; }
.plan-table tfoot .sum-keep strong {
  font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--w-a);
}
.plan-table tfoot .sum-keep td.hi { border-radius: 0 0 16px 16px; }

.method {
  margin: 34px auto 0; max-width: 760px;
  padding: 22px 26px 24px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 20px;
}
.method h3 {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.method ol { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.65; }
.method li + li { margin-top: 7px; }

.sources { max-width: 820px; margin: 24px auto 0; text-align: center; font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.sources a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.sources a:hover { color: var(--w-t); }
.sources span { display: block; margin-top: 8px; font-size: 12.5px; }

/* the band's own top margin would collapse out of the section and expose the page
   background as a grey strip under the divider — carry the gap as padding instead */
.plan-sec-tail { padding-top: 36px; }
.plan-sec-tail .cta-band { margin-top: 0; }
@media (max-width: 900px) {
  .sources { text-align: left; }
  .method { padding: 18px 20px 20px; }
}
@media (max-width: 779px) {
  .plan-table[data-pick] .col-price { width: 22%; }
  .plan-table th.price, .plan-table td.price { padding-right: 10px; }
}

/* ==========================================================================
   navigation dropdown (Comparison)
   ========================================================================== */
.navdrop { position: relative; }
.navdrop > summary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 2px; list-style: none; cursor: pointer;
  font-size: 15px; font-weight: 500; color: var(--ink-soft);
  transition: color .18s ease;
}
.navdrop > summary::-webkit-details-marker { display: none; }
.navdrop > summary::marker { content: ""; }
.navdrop > summary:hover, .navdrop[open] > summary { color: var(--w-t); }
.navdrop .lang-caret { color: var(--muted); transition: transform .18s ease; }
.navdrop[open] .lang-caret { transform: rotate(180deg); }

.nav-menu {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(100% + 10px); z-index: 60;
  min-width: 252px; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 18px 44px rgba(20, 33, 61, .14), 0 2px 6px rgba(20, 33, 61, .06);
}
.nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 11px; border-radius: 12px;
  font-size: 14.5px; color: var(--ink-soft); text-decoration: none; white-space: nowrap;
}
.nav-item strong { font-weight: 600; color: var(--ink); }
a.nav-item:hover { background: var(--bg); color: var(--ink); }
.nav-item:first-child { border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; margin-bottom: 4px; padding-bottom: 12px; }
.nav-item.is-soon { color: #a9b4c4; cursor: default; }
.nav-item.is-soon em {
  font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); background: var(--bg); border: 1px solid var(--line);
  padding: 2px 7px; border-radius: 999px;
}

/* inside the burger panel the dropdown sits in the flow */
.menu-panel .navdrop > summary { padding: 10px 12px; font-size: 15px; }
.menu-panel .nav-menu {
  position: static; transform: none; min-width: 0; margin: 4px 0 2px;
  border-radius: 14px; box-shadow: none; background: var(--bg);
}
@media (max-width: 1040px) { .nav > .navdrop { display: none; } }

/* ==========================================================================
   comparisons: the hub cards and the head-to-head table
   ========================================================================== */
.vs-list .vs-card { padding: 0; }
.vs-card > a {
  display: flex; flex-direction: column; height: 100%;
  padding: 20px 20px 18px; text-decoration: none; color: inherit; border-radius: 18px;
}
.vs-card > a:hover { background: var(--bg); }
.vs-card h3 { display: flex; align-items: center; gap: 9px; }
.vs-card .vs-go { margin-top: auto; padding-top: 16px; line-height: 0; }

/* The card is a three-track subgrid, so a link that sits in the first track alone leaves the
   other two standing empty under it. The link takes all three and passes them on, which also
   lines the arrows up across the row. */
@supports (grid-template-rows: subgrid) {
  .vs-list .vs-card > a {
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    align-content: start;
    height: auto;
  }
  .vs-list .vs-card > a > p { margin-bottom: 0; }
  .vs-list .vs-card .vs-go { align-self: end; margin-top: 0; }
}

/* the arrow: the brand's four colours as the shaft, the same device as the taos column header */
.vs-go svg { display: block; overflow: visible; transition: transform .2s ease; }
.vs-go .vs-go-seg { transition: opacity .2s ease; }
.vs-card > a:hover .vs-go svg { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  .vs-go svg { transition: none; }
  .vs-card > a:hover .vs-go svg { transform: none; }
}
.vs-card.is-soon { padding: 20px 20px 18px; background: transparent; box-shadow: none; border-style: dashed; }
.vs-card.is-soon h3, .vs-card.is-soon p { color: var(--muted); }
.vs-card h3 em {
  font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); background: var(--bg); border: 1px solid var(--line);
  padding: 2px 7px; border-radius: 999px;
}
.vs-card.is-soon h3 em { background: #fff; }

/* two columns of prose rather than ticks: the cells carry sentences */
.vs-table { min-width: 720px; }
.vs-table col.col-feat { width: 26%; }
.vs-table col.col-hi { width: 37%; }
.vs-table colgroup col:nth-child(2) { width: 37%; }

/* the two headers are plan cards, as on the features page */
.vs-table thead th {
  position: sticky; top: 78px; z-index: 2;
  background: #fff; padding: 18px 16px 16px;
  text-align: center; vertical-align: bottom;
  border-bottom: 1px solid var(--w-t);
}
.vs-table thead th.ph-blank { border-bottom-color: var(--line); }
.vs-table thead th.hi {
  background-color: #fff;
  background-image: linear-gradient(180deg, #fff 55%, rgba(47, 73, 125, .028));
  border-radius: 16px 16px 0 0;
  border-bottom-color: transparent;
}
/* pięć kolorów ogona ze znaku — tyle samo, co piór na pawiu w logo */
.vs-table thead th.hi::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg,
    var(--tail-1) 0 20%, var(--tail-2) 20% 40%, var(--tail-3) 40% 60%,
    var(--tail-4) 60% 80%, var(--tail-5) 80% 100%);
}
.vs-table thead .ph-name { display: block; text-align: center; font-size: 17px; line-height: 1.25; }
/* our side is the logo itself; its height is set from the other side's cap height,
   a hair taller so it leads without anyone noticing why */
/* The height is not guessed: the wordmark's strokes are lighter than a bold sans, so the
   logo is scaled until its stem is a touch heavier than the competitor's. Measured at 4x,
   Slack at 17px/700 has a 3.25px stem; the logo matches it at 18px and carries 108% of it
   at 20px, which is where it sits. Re-measure for a competitor set in a different face. */
.vs-table thead .ph-name .vs-logo {
  display: inline-block;          /* the global reset makes images block-level */
  height: 20px; width: auto; vertical-align: baseline;
}

.vs-table tbody th, .vs-table tbody td {
  text-align: left; vertical-align: top;
  font-size: 14.5px; line-height: 1.6; padding: 15px 16px;
  border-top: 1px solid var(--line);
}
.vs-table tbody th { font-weight: 600; color: var(--ink); padding-left: 0; }
.vs-table tbody td { color: var(--muted); }
.vs-table tbody td.hi { background: rgba(47, 73, 125, .032); color: var(--ink-soft); }
.vs-table tbody tr:hover th,
.vs-table tbody tr:not(.plan-group):hover td { background: rgba(47, 73, 125, .028); }
.vs-table tbody tr:not(.plan-group):hover td.hi { background: rgba(47, 73, 125, .06); }
.vs-table tbody tr:last-child td.hi { border-radius: 0 0 16px 16px; }
.vs-table .plan-group th { padding: 28px 0 9px; border-top: 0; }
.fhero .kicker a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.fhero .kicker a:hover { color: var(--w-t); }

@media (max-width: 779px) {
  /* the head-to-head reads as two stacked answers, not a sideways scroll */
  .vs-table { min-width: 0; }
  .vs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vs-table, .vs-table tbody, .vs-table tr, .vs-table th, .vs-table td { display: block; width: auto; }
  .vs-table tbody tr:not(.plan-group) {
    margin: 0 0 14px; padding: 14px 16px;
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
  }
  .vs-table tbody th { padding: 0 0 10px; border: 0; }
  .vs-table tbody td { padding: 10px 0 0; border-top: 1px solid var(--line); }
  .vs-table tbody td::before {
    content: attr(data-label); display: block; margin-bottom: 3px;
    font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  }
  .vs-table tbody td.hi { background: transparent; }
  .vs-table tbody td.hi::before { color: var(--w-t); }
  .vs-table .plan-group th { padding: 10px 0 8px; }
}

/* long labels must not push the burger panel or a CTA past the screen edge */
.menu-panel { max-width: min(320px, calc(100vw - 32px)); box-sizing: border-box; }
.menu-panel .nav-item { white-space: normal; }
.menu-panel .nav-item.is-soon { flex-wrap: wrap; }
.cta-band .btn { max-width: 100%; white-space: normal; text-align: center; }

/* the caution notice above a comparison: loud enough to stop a reader, quiet enough to trust */
.verify {
  margin: 0 0 22px;
  border: 1px solid #f3d99a;
  border-left: 4px solid var(--w-o);
  border-radius: 18px;
  background: #fffaf0;
  padding: 18px 22px;
}
.verify-in { display: flex; gap: 14px; align-items: flex-start; max-width: 860px; }
.verify-mark {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--w-o); color: #4a3a05;
  font-size: 14px; font-weight: 800; line-height: 24px; text-align: center;
}
.verify strong { display: block; margin-bottom: 4px; font-size: 15px; color: var(--ink); }
.verify p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-soft); }
@media (max-width: 620px) { .verify { padding: 16px 16px; border-radius: 16px; } }

/* ==========================================================================
   mission
   ========================================================================== */
/* Cztery kafelki mają stać w jednym rzędzie; trzy zostają trzema. Domyślna siatka
   ma minimum 300 px, więc czwarty kafelek spadał niżej — tu ustawiamy wprost. */
@media (min-width: 1040px) {
  .feat-list.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .feat-list.cols-3 { grid-template-columns: repeat(3, 1fr); }
}
.mission-hero {
  padding: 92px 0 82px;
  background:
    radial-gradient(880px 430px at 16% -6%, rgba(116, 180, 117, .17), transparent 62%),
    radial-gradient(760px 400px at 86% 4%, rgba(254, 194, 13, .16), transparent 64%),
    radial-gradient(620px 340px at 60% 96%, rgba(107, 178, 240, .14), transparent 66%),
    var(--bg);
}
/* 980, nie 900: po przyklejeniu spójników twardą spacją („od tego,", „że ludzie",
   „ze sobą") najdłuższy wiersz nagłówka urósł i przy 900 px łamał się na trzy wiersze
   z samotnym „rozmawiają." na końcu. Zmierzone, nie dobrane na oko. */
.mission-hero .section-head { max-width: 980px; margin: 0 auto; text-align: center; }
.mission-hero h1 {
  font-size: clamp(36px, 5vw, 60px); line-height: 1.05; letter-spacing: -.032em;
  margin: 10px 0 0;
  /* przeglądarka wyrównuje długość wierszy zamiast upychać pierwszy do oporu */
  text-wrap: balance;
}
.mission-hero > .wrap > .section-head > p:last-child {
  font-size: 20px; line-height: 1.6; max-width: 64ch; margin: 24px auto 0;
}

/* Pięć kolorów ogona, postawionych jako kreska — własna interpunkcja marki.
   Motyw całej witryny: stoi nad kickerem na każdej stronie, nie tylko na Misji. */
.brand-rule { display: inline-flex; gap: 5px; margin-bottom: 22px; }
.hero-copy .brand-rule { margin-bottom: 18px; }
.section-head.center .brand-rule { margin-bottom: 16px; }
.brand-rule i { display: block; width: 26px; height: 5px; border-radius: 3px; }
.brand-rule i:nth-child(1) { background: var(--tail-1); }
.brand-rule i:nth-child(2) { background: var(--tail-2); }
.brand-rule i:nth-child(3) { background: var(--tail-3); }
.brand-rule i:nth-child(4) { background: var(--tail-4); }
.brand-rule i:nth-child(5) { background: var(--tail-5); }

/* the section headings on this page are statements, so they get room to be read */
.mission-hero + .fsec .section-head h2,
#origin .section-head h2, #believe .section-head h2,
#grow .section-head h2, #plans .section-head h2 { max-width: 20ch; }

.mission-close { padding-top: 78px; text-align: center; }
.mission-close .section-head { max-width: 760px; margin: 0 auto; }
.mission-close h2 {
  font-size: clamp(34px, 4.4vw, 52px); letter-spacing: -.03em; line-height: 1.08; margin: 0;
}
.mission-close .section-head p { font-size: 18.5px; margin: 20px auto 0; max-width: 60ch; }
.mission-close .fhero-cta { justify-content: center; margin-top: 30px; }

@media (max-width: 780px) {
  .mission-hero { padding: 66px 0 58px; }
  .brand-rule i { width: 20px; height: 4px; }
}

/* skąd nazwa — proza, nie kafelki: to jest opowieść, a nie lista cech */
.mission-name { background: var(--bg); }
/* .fsec .section-head ma 720 px i stoi przy lewej — przy wyśrodkowanym tekście oś
   nagłówka rozjeżdżała się z osią akapitów poniżej */
.mission-name .section-head {
  text-align: center; margin: 0 auto 30px; max-width: none;
}
.mission-name .section-head h2 { max-width: 30ch; margin-left: auto; margin-right: auto; }
.mission-name .section-head h2::before { display: none; }
.mission-name .section-head h2 { padding-left: 0; }
.name-body p {
  /* szerzej niż domyślna kolumna prozy: przy 86 znakach ten sam tekst mieści się
     w trzech wierszach, a nadal czyta się wygodnie. Cała sekcja jest wyśrodkowana —
     to jedyne miejsce na stronie, które ma być czytane jak inskrypcja, nie jak lista */
  font-size: 18.5px; line-height: 1.75; color: var(--ink-soft);
  max-width: 86ch; margin: 0 auto 20px; text-align: center; text-wrap: balance;
}
.name-body p:last-child { margin-bottom: 0; }
.name-body .greek {
  display: block; text-align: center; margin: 30px auto;
  font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: -.02em;
  color: var(--w-t); line-height: 1.2;
}
.name-body .greek small {
  display: block; margin-top: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}

/* zamknięcie Misji: wordmark jako wycinek z logo — w tym rozmiarze litery stały zbyt blisko */
.mission-close .wordmark .mission-mark {
  /* .80em zrównuje wysokość x logo z tekstem nagłówka, przesunięcie sadza je na linii
     pisma — zmierzone pikselowo, nie na oko */
  display: inline-block; width: auto; height: .80em;
  vertical-align: baseline; transform: translateY(.06em);
  margin: 0 .04em;
}

/* ikony kafelków Misji — ten sam zestaw i te same animacje co ikony na stronie głównej */
.mission-hero ~ .fsec .feat > .ico,
.mission-close ~ .fsec .feat > .ico { display: block; }
.feat > .ico { width: 56px; height: 56px; margin: 0 0 16px; display: block; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .feat > .ico .p { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.3); }
  .js .feat.in > .ico .p {
    opacity: 1; transform: scale(1);
    transition: opacity .35s ease calc(.2s + var(--i, 0) * .07s),
                transform .45s cubic-bezier(.34,1.56,.64,1) calc(.2s + var(--i, 0) * .07s);
  }
  .feat > .ico .draw { stroke-dasharray: 60; stroke-dashoffset: 60; }
  .js .feat.in > .ico .draw { stroke-dashoffset: 0; transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1) .15s; }
}

/* Rozwijane menu porównań urosło z siedmiu pozycji do dwudziestu trzech, więc dostało
   te same dwie sekcje co hub: pojedyncze narzędzia i ich połączenia. Bez nagłówków
   ta lista jest ścianą tekstu. */
.nav-menu-wide { min-width: 320px; max-height: min(70vh, 560px); overflow-y: auto; }
.nav-menu .nav-head {
  margin: 10px 0 4px; padding: 0 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.nav-menu .nav-head:first-of-type { margin-top: 6px; }