/* All site styles, in the order they apply. Later files win when two rules are equally specific.
   Shared styles first, then one file per component (next to its .astro file). Add new component styles here. *//* Design tokens: brand colours, text colours, fonts and the corner radius. Change a colour here and it changes everywhere. */

:root {
  --magenta: #DD0066;
  --magenta-hover: #B80055;
  --magenta-tint: #FCE8F1;
  --magenta-dark: #FF3385;
  --ink: #0B0B0F;
  --text: #3A3A44;
  --muted: #6B6B78;
  --line: #E7E7EC;
  --surface: #F7F7F9;
  --white: #FFFFFF;
  --ok: #0E8A5F;
  --display: "Rubik","Assistant",system-ui,sans-serif;
  --body: "Assistant","Rubik",system-ui,sans-serif;
  --r: 12px;
  color-scheme: light;
}

/* Self-hosted fonts (files in public/fonts, licences next to them). Nothing is loaded from Google. */

@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/assistant-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/assistant-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/assistant-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/caveat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/caveat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/fonts/rubik-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/fonts/rubik-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/fonts/rubik-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Images used as backgrounds, by name. Components and the HTML refer to them as var(--name),
   for example style="background-image:var(--l-tadiran)".
   The files live in src/assets/images; the build gives each one a content hash in its name,
   so a changed image is never served from an old browser cache. */

:root {
  /* customer logos for the logo strip and the customers page (one sprite, 8 columns x 6 rows of 140x56) */
  --sprite: url(/assets/customer-logos-sprite.DxWlqDq8.webp);

  /* customer logos added after the sprite */
  --i-brown: url(/assets/brown-hotels.Cd8qbjFJ.svg);
  --i-mtp: url(/assets/metropoline.fB-4puFk.svg);
  --i-alm: url(/assets/alm.BGfUxE86.svg);
  --i-boh: url(/assets/bonei-hatichon.Eq2WeGpu.png);
  --i-levin: url(/assets/levinstein.8M3cgZVu.png);
  --i-isline: url(/assets/isline.CZ4eb5kZ.png);
  --i-sides: url(/assets/sides.Ckdi4eQ5.png);

  /* real client signatures shown as examples (logo + banner) */
  --i-tl: url(/assets/tollmans-logo.ByF0C41b.png);
  --i-tb: url(/assets/tollmans-banner.D36c5CZ8.jpg);
  --i-fl: url(/assets/fattal-logo.DMAxasv1.png);
  --i-fb: url(/assets/fattal-banner.Cmgs8g9S.jpg);
  --i-il: url(/assets/issta-logo.BDukCQ79.png);
  --l-gavyam: url(/assets/gav-yam-logo.D3ymkaWk.png);

  /* logos inside the rotating signature examples */
  --l-admail: url(/assets/admail-logo.CwXdgs_d.png);
  --l-carlton: url(/assets/carlton-logo.B11G5XWv.png);
  --l-inbal: url(/assets/inbal-logo.DGhaIU-L.png);
  --l-ups: url(/assets/ups-logo.BhqlNeFq.png);
  --l-tadiran: url(/assets/tadiran-logo.BFTlo3QE.png);
  --l-ituran: url(/assets/ituran-logo.CY-HP38X.png);
  --l-sport5: url(/assets/sport5-logo.C7NIPO6v.png);
  --l-mda: url(/assets/mda-logo.Cz0FdhVt.png);
  --l-melisron: url(/assets/melisron-logo.Dd1svcZO.png);
  --l-ports: url(/assets/israel-ports-logo.DfaE1pxn.png);
  --l-mot: url(/assets/ministry-of-transport-logo.C9MJ8Gkw.png);

  /* email environments */
  --l-i365: url(/assets/microsoft-365.Ck-9OYov.svg);
  --l-iexch: url(/assets/exchange.C0-LyjIN.svg);
  --l-igoog: url(/assets/google-workspace.C3HuMajr.svg);
  --l-iazure: url(/assets/azure.DA3XRhUQ.png);
}

/* Base styles for the whole site: page defaults, headings, links, focus outline, section spacing, the .wrap container, screen-reader-only text. */

html, body {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  direction: rtl;
  scroll-behavior: smooth;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 24px;
}

h1, h2, h3 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion:reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

.skip {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font: 600 .95rem var(--display);
  text-decoration: none;
}

.skip:focus {
  top: 12px;
}

main:focus, h1[tabindex="-1"]:focus {
  outline: none;
}

section[id] {
  scroll-margin-top: 84px;
}

.ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

body {
  background: var(--white);
  color: var(--text);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.6;
}

h1 {
  font-size: clamp(2rem,3.4vw,2.85rem);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.15;
}

h2 {
  font-size: clamp(1.5rem,2.4vw,2.05rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
}

h3 {
  font-size: 1.08rem;
  font-weight: 600;
}

section {
  padding-block: 80px;
}

@media (max-width:700px) {
  section {
    padding-block: 56px;
  }
  h1 {
    font-size: 1.85rem;
  }
  h2 {
    font-size: 1.45rem;
  }
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Shared text pieces: section labels (eyebrow), lead paragraphs, section headings (.sec-head), notes, links, bullet lists. */

.link {
  color: var(--magenta);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.link:hover {
  text-decoration: underline;
}

.sec-head {
  display: flex;
  flex-direction: column;
  max-width: 680px;
}

.bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}

.bullets li {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.bullets li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--magenta);
  flex: none;
  translate: 0 -2px;
}

@media (max-width:480px) {
  .bullets {
    grid-template-columns: 1fr;
  }
}

.crumb {
  display: inline-flex;
  align-self: flex-start;
  gap: 8px;
  align-items: center;
  font: 600 .85rem var(--display);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--ink);
}

.note-foot {
  font-size: .85rem;
  color: var(--muted);
  margin-top: 18px;
}

.pl {
  list-style: none;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
  font-size: .96rem;
}

.pl li {
  position: relative;
  padding-inline-start: 24px;
}

.pl li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .3em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--magenta-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DD0066' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/10px no-repeat;
}

.lead {
  color: var(--muted);
  max-width: 36em;
  font-size: 1.04rem;
  line-height: 1.65;
}

.sec-head {
  margin-bottom: 40px;
  gap: 10px;
}

@media (max-width:700px) {
  .sec-head {
    margin-bottom: 28px;
  }
}

.eyebrow {
  font: 600 .9rem var(--display);
  font-size: .82rem;
  letter-spacing: .02em;
  color: #C8005C;
}

/* Shared layout: light grey sections (.soft), two-column split sections, grids, centring, button rows, fade-in on scroll (.reveal). */

.center {
  text-align: center;
  margin-inline: auto;
  align-items: center;
}

.ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.grid4 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}

@media (max-width:1000px) {
  .grid4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:560px) {
  .grid4 {
    grid-template-columns: 1fr;
  }
}

.soft {
  background: var(--surface);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.split-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.visual {
  min-width: 0;
}

@media (max-width:960px) {
  .split {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

.reveal {
  transition: opacity .5s ease,transform .5s ease;
}

.reveal.pre {
  opacity: 0;
  transform: translateY(8px);
}

@media (prefers-reduced-motion:reduce) {
  .reveal.pre {
    opacity: 1;
    transform: none;
  }
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width:960px) {
  .grid3 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:620px) {
  .grid3, .grid2 {
    grid-template-columns: 1fr;
  }
}

/* Buttons (.btn and its colours and sizes) and the pause button of moving content (.motion-btn). */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  font: 600 1rem var(--display);
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .2s,border-color .2s,color .2s;
  white-space: nowrap;
}

.btn-primary {
  background: var(--magenta);
  color: #fff;
}

.btn-primary:hover {
  background: var(--magenta-hover);
}

.btn-outline {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}

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

.motion-btn {
  display: inline-grid;
  place-items: center;
  align-self: flex-start;
  justify-self: start;
  width: 32px;
  height: 32px;
  margin-top: 10px;
  background: #fff;
  border: 1px solid #C9C9D3;
  color: var(--text);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
}

.motion-btn:hover {
  border-color: var(--text);
}

.motion-btn svg {
  width: 10px;
  height: 10px;
}

.btn {
  padding: 11px 20px;
  font-size: .95rem;
}

.btn-lg {
  padding: 13px 24px;
  font-size: 1rem;
}

.btn-ws {
  background: #005AFD;
  color: #fff;
  border: 1px solid #005AFD;
}

.btn-ws:hover {
  background: #0047CC;
  border-color: #0047CC;
  color: #fff;
}

/* Form fields, radio groups, form notes and error messages, shared by the contact and demo forms and the signature builder. */

.form-note {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 4px 0 0;
  grid-column: 1/-1;
}

.form-note a {
  color: var(--magenta);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field.full {
  grid-column: 1/-1;
}

.field label {
  font: 500 .95rem var(--display);
  color: var(--ink);
  padding: 0;
}

.field input, .field select {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid #D4D4DC;
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
}

.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px var(--magenta-tint);
}

.radios {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.radios label {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #D4D4DC;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font: 500 .95rem var(--body);
}

.radios input {
  width: auto;
  accent-color: var(--magenta);
}

.radios label:has(input:checked) {
  border-color: var(--magenta);
  background: var(--magenta-tint);
}

.form-foot {
  grid-column: 1/-1;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.err {
  color: #B42318;
  font-size: .9rem;
}

.hp-trap {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

button[disabled] {
  opacity: .7;
  cursor: progress;
}

/* Cards with an icon, used for advantages and features. */

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow .25s,transform .25s;
  min-width: 0;
}

.card:hover {
  box-shadow: 0 16px 40px -20px rgba(11,11,15,.22);
  transform: translateY(-2px);
}

.ico {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--magenta-tint);
  color: var(--magenta);
  display: grid;
  place-items: center;
}

.feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  min-width: 0;
}

.feature ul {
  margin: 0;
  padding-inline-start: 18px;
  color: var(--text);
  display: grid;
  gap: 6px;
  font-size: .98rem;
}

.card, .feature {
  padding: 22px;
  gap: 10px;
}

.card p {
  color: var(--muted);
  font-size: .95rem;
}

/* The example email signatures (.csig and its parts .c-logo, .c-n, .c-rule...), used in many places on the site. */

.csig.tg .c-n {
  color: var(--c);
  font-size: 14.5px;
}

.csig.tg[dir="ltr"] {
  text-align: left;
}

.csig.tg .c-logo {
  background-position: left center;
}

.csig.tg:not([dir="ltr"]) .c-logo {
  background-position: right center;
}

.csig {
  font: 13px/1.55 Arial,Helvetica,sans-serif;
  color: #111;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: start;
}

.csig[dir="ltr"] {
  text-align: left;
}

.c-logo {
  background: center/contain no-repeat;
  margin-bottom: 8px;
}

.csig.toll .c-logo {
  margin-inline: 0;
}

.c-rule {
  height: 1px;
  background: #E6E6E6;
  margin: 8px 0;
}

.c-n {
  font-size: 15px;
  color: #000;
}

.c-soc {
  color: #8A8A8A;
}

.c-soc u {
  color: #8A8A8A;
}

.c-soc i {
  color: #CFCFCF;
  font-style: normal;
  margin: 0 4px;
}

.c-bnr {
  margin-top: 12px;
  border-radius: 2px;
  background: center/cover no-repeat;
  width: 100%;
}

.csig.fattal {
  color: #1E2A5A;
}

.c-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.c-vr {
  width: 2px;
  align-self: stretch;
  background: #1E2A5A;
  min-height: 90px;
}

.csig.fattal .c-n {
  color: #1E2A5A;
  font-size: 17px;
}

.c-id {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.c-icons {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.c-icons i {
  width: 22px;
  height: 22px;
  border: 1.5px solid #1E2A5A;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #1E2A5A;
}

.c-icons svg {
  width: 12px;
  height: 12px;
}

.csig.issta .c-n, .csig.issta .c-r {
  font-size: 15px;
  color: #000;
}

.csig.issta .c-r {
  margin-bottom: 8px;
}

.c-g {
  color: #7A7A7A;
}

.c-g u {
  color: #7A7A7A;
}

.c-links {
  margin-top: 10px;
}

.c-links i {
  font-style: normal;
  margin: 0 4px;
}

@media (max-width:560px) {
  .c-vr {
    display: none;
  }
}

.csig .c-logo {
  display: block;
  background: center/contain no-repeat;
  flex: none;
}

.ad-bn {
  display: block;
  width: 100%;
  max-width: 250px;
  height: auto;
  margin-top: 12px;
  border-radius: 5px;
}

/* Laptop, tablet and phone frames around example emails. */

.phn {
  position: relative;
  background: #fff;
  border: 9px solid #111116;
  border-radius: 40px;
  aspect-ratio: 9/19;
  overflow: hidden;
  box-shadow: 0 24px 50px -28px rgba(11,11,15,.5);
}

.phn::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  translate: -50% 0;
  width: 34%;
  height: 16px;
  background: #111116;
  border-radius: 12px;
  z-index: 2;
}

.mui {
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--body);
  color: #2A2A33;
  font-size: clamp(9px,.78vw,11.5px);
  line-height: 1.45;
}

.mui-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #F3F4F7;
  border-bottom: 1px solid #E4E5EA;
  font: 600 1em var(--display);
  color: #3A3A44;
}

.mui-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.phn .mui-top {
  padding-top: 30px;
  justify-content: center;
}

.phn .mui-body {
  padding: 10px;
}

/* PageHero.astro: Simple page opening: small label, the page title (h1) and an optional lead line. */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: 88px 72px;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

@media (max-width:980px) {
  .hero {
    padding-block: 56px;
  }
}

.phero {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.phero.split-hero .wrap {
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}

@media (max-width:960px) {
  .phero.split-hero .wrap {
    grid-template-columns: 1fr;
  }
}

.hero {
  background: linear-gradient(180deg,#FFFFFF 0%,#FBF3F7 100%);
  border-bottom: 1px solid var(--line);
}

.hero::before {
  content: "";
  position: absolute;
  inset: auto auto -40% -20%;
  width: 70%;
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(closest-side,rgba(221,0,102,.10),transparent);
}

.hero .lead {
  color: var(--muted);
}

.phero.hero {
  padding-block: 88px 72px;
}

.phero h1 {
  font-size: clamp(1.85rem,3vw,2.5rem);
}

.phero {
  padding-block: 64px 52px;
}

.phero .wrap {
  display: flex;
  flex-direction: column;
  max-width: 900px;
  margin-inline: auto;
  gap: 16px;
}

@media (max-width:700px) {
  .phero {
    padding-block: 44px 36px;
  }
  .phero h1 {
    font-size: 1.7rem;
  }
}

.hero-copy img.ph-logo {
  display: block;
  height: 44px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 0 14px 0 !important;
  align-self: flex-start;
  object-fit: contain;
}

/* Price cards, shared by the Admail and WiseStamp price panels. */

.plans {
  display: grid;
  gap: 20px;
  align-items: stretch;
}

.plans.three {
  grid-template-columns: repeat(3,1fr);
}

.plan {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.plan.hl {
  border: 2px solid var(--magenta);
  box-shadow: 0 30px 60px -36px rgba(221,0,102,.45);
}

.pbadge {
  position: absolute;
  top: -13px;
  inset-inline-start: 24px;
  background: var(--magenta);
  color: #fff;
  font: 600 .78rem var(--display);
  padding: 4px 12px;
  border-radius: 999px;
}

.psub {
  color: var(--muted);
  font-size: .95rem;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.price b {
  font: 700 2.6rem/1 var(--display);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.price span {
  color: var(--muted);
  font-size: .95rem;
}

.plan .btn {
  margin-top: auto;
}

@media (max-width:860px) {
  .plans.three {
    grid-template-columns: 1fr;
  }
}

/* A single customer logo cut from the logo sprite (.clogo), used by the logo strip and the logo grids. */

.clogo {
  display: block;
  width: 140px;
  height: 56px;
  background-image: var(--sprite);
  background-size: 1120px 336px;
  background-repeat: no-repeat;
  flex: none;
}

.clogo:hover {
  opacity: 1;
}

/* Small labels in the Admail and WiseStamp solution cards on the home page (.tag, .sol-fit). */

.tag {
  font: 600 .78rem var(--display);
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}

.tag.m {
  background: var(--magenta-tint);
  border-color: transparent;
  color: #B0004F;
}

.hx-tile-n {
  font: 700 .95rem var(--display);
  color: var(--magenta);
}

.sol-fit {
  display: inline-block;
  align-self: flex-start;
  font: 600 .8rem var(--display);
  color: var(--magenta);
  background: #FDEBF3;
  border-radius: 6px;
  padding: 5px 10px;
}

.sol-fit.ws {
  color: #005AFD;
  background: #EEF3FF;
}

.sol-fit:not(.ws) {
  color: #B0004F;
}

/* AboutText.astro: About page: the company story, the two Admail products, and the WiseStamp partnership. */

.about-text {
  max-width: 820px;
  margin-inline: auto;
}

.about-text p {
  margin-top: 16px;
  font-size: 1.06rem;
}

.about-text h2 {
  margin-top: 44px;
}

.about-text h3 {
  margin-top: 26px;
  color: var(--magenta);
}

.bw b {
  color: #1F4FB3;
}

.bw {
  margin-top: 22px;
  border-inline-start: 5px solid #1F4FB3;
  color: #1B2B55;
  font-size: 1.08rem;
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 10px 8px;
  box-shadow: 0 24px 50px -30px rgba(11,11,15,.35),0 2px 6px rgba(11,11,15,.04);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* AdmailHero.astro: Admail page opening: title, lead and buttons, and an email whose signature rotates between customer examples. */

.stack {
  position: relative;
  min-width: 0;
  padding-bottom: 40px;
}

@media (max-width:520px) {
  .stack {
    padding-bottom: 0;
  }
}

/* AdmailAdvantages.astro: Admail page: eight advantage cards and a note on organisation size (data/advantages.js). */

.adv-note {
  margin-top: 22px;
  color: var(--muted);
  font-size: .93rem;
}

/* AdminScreenshot.astro: Admail page: screenshot of the admin interface and what each area does. */

.admin-shot {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
  align-items: center;
}

.admin-shot figure {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 30px 70px -40px rgba(11,11,15,.35);
}

.admin-shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

.admin-feats {
  display: grid;
  gap: 14px;
}

.admin-feats>div {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  background: #fff;
}

.admin-feats p {
  color: var(--muted);
  margin-top: 6px;
  font-size: .96rem;
}

@media (max-width:900px) {
  .admin-shot {
    grid-template-columns: 1fr;
  }
}

.lang-more {
  font-size: .85rem;
  color: var(--muted);
  margin-top: -4px;
}

/* GroupRules.astro: Admail page: signatures and banners by department, with an example table. */

.grp {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
}

.grp-h {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  font: 600 .8rem var(--display);
  color: var(--muted);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.grp-r {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 6px 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.grp-r b {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 .95rem var(--display);
  color: var(--ink);
  grid-row: span 2;
}

.grp-r b i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.grp-r .chip {
  justify-self: start;
  font: 500 .82rem var(--display);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 12px;
}

.grp-r .chip.bn {
  background: var(--magenta-tint);
  border-color: transparent;
  color: var(--magenta);
}

.grp-r .chip.ds {
  background: #EEF1F7;
  border-color: transparent;
  color: #1F3A7A;
}

.page span.chip.bn {
  color: #B0004F;
}

/* BannerIdeas.astro: Banners page: illustrated banner ideas (sale, launch, webinar, hiring, survey, holiday). */

.bnr-gallery {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
}

.bx {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.bx figcaption {
  font: 600 .85rem var(--display);
  color: var(--muted);
}

.bnr-lg {
  height: 92px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-inline: 18px;
  color: #fff;
  box-shadow: 0 10px 24px -16px rgba(11,11,15,.4);
}

.bnr-lg strong {
  font: 700 1.02rem/1.25 var(--display);
  display: block;
}

.bnr-lg small {
  display: block;
  font-size: .8rem;
  opacity: .88;
  margin-top: 3px;
}

.bnr-lg em {
  font: normal 600 .8rem var(--display);
  background: #fff;
  color: var(--ink);
  padding: 7px 12px;
  border-radius: 6px;
  white-space: nowrap;
}

@media (max-width:960px) {
  .bnr-gallery {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:600px) {
  .bnr-gallery {
    grid-template-columns: 1fr;
  }
}

.bnr-gallery .bnr-lg {
  height: 72px;
  padding-inline: 14px;
}

.bnr-gallery .bnr-lg strong {
  font-size: .92rem;
}

.bnr-gallery .bnr-lg small {
  font-size: .74rem;
}

.bnr-gallery .bnr-lg em {
  padding: 5px 10px;
  font-size: .74rem;
}

/* BannersHero.astro: Banners page opening: title and buttons, then real customer banners on three devices. */

.bhero2 {
  padding-block: 64px 72px;
}

.bhero2 .bh-copy {
  align-items: center;
  text-align: center;
}

.bhero2 .bh-copy .lead {
  margin-inline: auto;
}

.bhero2 .bh-copy .ctas {
  justify-content: center;
}

.bhero2 .bh-devs {
  margin-top: 44px;
  max-width: 1200px;
  display: block;
}

.bh-k {
  text-align: center;
  color: var(--muted);
  font-size: .95rem;
  margin-bottom: 28px;
}

/* CampaignManagement.astro: Banners page: campaign management features and an example schedule. */

.split.rev .visual {
  order: -1;
}

@media (max-width:960px) {
  .split.rev .visual {
    order: 0;
  }
}

.timeline {
  margin-top: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 20px;
}

.tl-head {
  display: flex;
  justify-content: space-between;
  font: 600 .8rem var(--display);
  color: var(--muted);
  margin-bottom: 12px;
}

.tl-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: center;
  font-size: .85rem;
  padding: 6px 0;
}

.tl-bar {
  height: 20px;
  border-radius: 5px;
  position: relative;
  background: var(--surface);
}

.tl-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 5px;
}

.tl-axis {
  display: grid;
  grid-template-columns: 110px repeat(4,1fr);
  font-size: .72rem;
  color: var(--muted);
  margin-top: 6px;
}

/* ExposureCalculator.astro: Banners page: how many banner views the organisation's emails create (exposure-calculator.js). */

.calc {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  display: grid;
  gap: 22px;
  min-width: 0;
}

.calc-in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  align-items: end;
}

.calc-in label {
  font: 500 .92rem var(--display);
  color: var(--ink);
  grid-row: 1;
}

.calc-in input {
  grid-row: 2;
  font: 600 1.2rem var(--display);
  padding: 12px 14px;
  border: 1px solid #D4D4DC;
  border-radius: 10px;
  width: 100%;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.calc-in input:focus {
  outline: none;
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px var(--magenta-tint);
}

.calc-out {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
}

.calc-out>div {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.calc-out b {
  font: 700 1.6rem var(--display);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.calc-out span {
  font-size: .85rem;
  color: var(--muted);
}

.calc-out .hl {
  background: var(--magenta-tint);
  border-color: transparent;
}

.calc-out .hl b {
  color: var(--magenta);
}

@media (max-width:560px) {
  .calc-out {
    grid-template-columns: 1fr;
  }
}

.calc-out .hl span {
  color: #55555F;
}

/* AdvantageGrid.astro: Grid of advantage cards, each with a check mark, a title and a short text (text may contain <b>). */

.adv-grid .card.adv h3 {
  font-size: 1.02rem;
  margin: 10px 0 6px;
}

.adv-grid .card.adv p {
  font-size: .93rem;
  line-height: 1.6;
}

.adv-grid .card.adv.ws .ico {
  color: #005AFD;
  background: #EEF3FF;
}

/* Rounded labels in a row (.chips), e.g. integrations and security standards on the WiseStamp page. */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chips span {
  font: 500 .88rem var(--display);
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 6px 12px;
  color: var(--ink);
}

.chips.big {
  margin-bottom: 22px;
}

.chips.big span {
  font-size: .95rem;
  padding: 8px 14px;
  background: #fff;
}

.chips.icons span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chips.icons i {
  width: 20px;
  height: 20px;
  background: center/contain no-repeat;
  display: inline-block;
}

/* ClientGrid.astro: Grid of customer logos. */

.client-grid {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 14px;
  color: var(--muted);
}

@media (max-width:900px) {
  .client-grid {
    grid-template-columns: repeat(3,1fr);
  }
}

.client-grid .cell {
  height: 84px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.client-grid .cell .clogo {
  transform: scale(.95);
}

@media (max-width:600px) {
  .client-grid {
    grid-template-columns: repeat(2,1fr) !important;
  }
  .client-grid .cell {
    overflow: hidden;
  }
  .client-grid .cell .clogo {
    transform: scale(.85);
  }
}

.clogo-img {
  display: block;
  width: 140px;
  height: 56px;
  background: center/contain no-repeat;
}

#allClients {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

#allClients>.cell {
  flex: 0 0 calc((100% - 5*14px)/6);
}

@media (max-width:900px) {
  #allClients>.cell {
    flex-basis: calc((100% - 2*14px)/3);
  }
}

@media (max-width:600px) {
  #allClients>.cell {
    flex-basis: calc((100% - 14px)/2);
  }
}

/* DeviceShowcase.astro: Three real customer examples (signature + banner) on a laptop, a tablet and a phone: Samelet, Gav-Yam, Yeladim BeSikui. */

.devs {
  display: grid;
  grid-template-columns: 1.75fr 1fr .6fr;
  gap: 36px;
  align-items: end;
}

.devs figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.devs figcaption {
  font: 600 .88rem var(--display);
  color: var(--muted);
  text-align: center;
}

.lap {
  position: relative;
}

.lap-scr {
  position: relative;
  background: #fff;
  border: 10px solid #16161B;
  border-top-width: 14px;
  border-radius: 16px 16px 6px 6px;
  aspect-ratio: 16/10.4;
  overflow: hidden;
  box-shadow: 0 24px 50px -30px rgba(11,11,15,.45);
}

.lap-scr::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  translate: -50% 0;
  width: 70px;
  height: 12px;
  background: #16161B;
  border-radius: 0 0 8px 8px;
  z-index: 2;
}

.lap-base {
  height: 14px;
  margin-inline: -7%;
  background: linear-gradient(#DADAE0,#B9B9C2);
  border-radius: 2px 2px 14px 14px;
  position: relative;
}

.lap-base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: 18%;
  height: 6px;
  background: #A6A6B0;
  border-radius: 0 0 8px 8px;
}

.tab {
  background: #fff;
  border: 12px solid #16161B;
  border-radius: 26px;
  aspect-ratio: 3/4.1;
  overflow: hidden;
  box-shadow: 0 24px 50px -30px rgba(11,11,15,.45);
}

.mui-top i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D4D5DC;
  flex: none;
}

.mui-top span {
  margin-inline-start: auto;
  font-weight: 500;
  color: #8A8A96;
}

.mui-meta {
  padding: 8px 12px;
  border-bottom: 1px solid #EEEFF3;
  color: #77778A;
  display: grid;
  gap: 2px;
}

.mui-meta b {
  color: #22222B;
  font-weight: 600;
}

.mui-body img.rb {
  width: 100%;
  height: auto;
  border-radius: 3px;
  display: block;
}

.lap .mui-body img.rb {
  width: 62%;
  max-width: 300px;
}

.lap .mui-body {
  gap: 6px;
}

.rsig {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rsig b {
  font-size: 1.12em;
  color: #1B2A4A;
}

.rsig .r {
  color: #55556A;
}

.rsig .l {
  font-size: .95em;
}

.rsig img {
  height: 18px;
  width: auto;
  margin-top: 6px;
  align-self: flex-start;
}

.rsig img.lgi {
  margin: 0 0 6px;
}

.rsig .lg {
  display: block;
  width: 92px;
  height: 29px;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 0 6px;
}

.rsig.he .lg {
  background-position: right center;
}

@media (max-width:900px) {
  .devs {
    grid-template-columns: 1fr 1fr;
  }
  .devs figure:first-child {
    grid-column: 1/-1;
  }
}

@media (max-width:520px) {
  .devs {
    grid-template-columns: 1fr;
  }
  .devs .phn {
    max-width: 220px;
    margin-inline: auto;
  }
  .lap-scr {
    aspect-ratio: auto;
  }
  .devs .tab {
    max-width: 300px;
    margin-inline: auto;
    aspect-ratio: auto;
  }
}

/* EnvironmentList.astro: Cards for the supported email environments (data/environments.js). Used on the home page and the Admail page. */

.es-envs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
}

.es-envs li {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  min-width: 0;
}

.es-envs i {
  width: 40px;
  height: 40px;
  flex: none;
  background: center/contain no-repeat;
}

.es-envs span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.es-envs b {
  font: 600 .98rem/1.25 var(--display);
  color: var(--ink);
  text-align: start;
}

.es-envs small {
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.35;
}

@media (max-width:1000px) {
  .es-envs {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:420px) {
  .es-envs {
    grid-template-columns: 1fr;
  }
}

/* Faq.astro: Questions and answers that open on click (<details>). Answers may contain simple HTML. */

.faq {
  display: grid;
  gap: 10px;
  max-width: 860px;
}

.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 22px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--magenta);
  line-height: 1;
}

.faq details[open] summary::after {
  content: "–";
}

.faq details p {
  padding-bottom: 18px;
  color: var(--muted);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  font: 600 1.05rem var(--display);
  color: var(--ink);
  font-size: .98rem;
  padding-block: 15px;
}

/* FinalCta.astro: Closing call to action at the bottom of a page: title, one line, demo + contact buttons and the contact line. */

.final .wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.final {
  text-align: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,#FBF3F7,#F7F7F9);
  border-top: 1px solid var(--line);
}

.final::before {
  content: "";
  position: absolute;
  inset: -60% 20% auto;
  height: 120%;
  pointer-events: none;
  background: radial-gradient(closest-side,rgba(221,0,102,.08),transparent);
}

.final p {
  max-width: 34em;
  font-size: 1.12rem;
  color: var(--muted);
}

.final .contact-line {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: .95rem;
  margin-top: 8px;
  color: var(--muted);
}

.final .contact-line b {
  font-weight: 600;
  direction: ltr;
  unicode-bidi: isolate;
  color: var(--ink);
}

/* Leadership.astro: Management cards (photo, name, role, email) and the three departments (data/team.js). */

.leaders {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 24px;
  max-width: 860px;
}

.leader {
  display: flex;
  gap: 24px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
  min-width: 0;
}

.leader h3 {
  font-size: 1.4rem;
}

.leader .role {
  font: 600 1rem var(--display);
  color: var(--magenta);
  margin-top: 4px;
}

.leader .lcontact {
  font-size: .92rem;
  color: var(--muted);
  margin-top: 8px;
}

@media (max-width:700px) {
  .leaders {
    grid-template-columns: 1fr;
  }
  .leader {
    padding: 24px;
  }
}

.team-sec .leaders {
  max-width: 860px;
}

.lphoto {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--line),0 12px 24px -14px rgba(11,11,15,.4);
}

.depts {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  max-width: 860px;
  margin: 20px auto 0;
}

.leaders+.depts {
  margin-inline: 0;
}

.team-sec .depts {
  margin-inline: auto;
}

.dept {
  display: flex;
  gap: 14px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  min-width: 0;
}

.dept h3 {
  font-size: 1.02rem;
}

.dept p {
  font-size: .88rem;
  color: var(--muted);
  margin-top: 2px;
}

@media (max-width:760px) {
  .depts {
    grid-template-columns: 1fr;
  }
}

.role[dir="ltr"] {
  text-align: right;
  letter-spacing: .06em;
}

/* MailWindow.astro: A simple "new message" window: title bar, To and Subject lines, and the message body (slot). */

.mail {
  position: relative;
  background: #fff;
  color: var(--text);
  border-radius: 14px;
  overflow: hidden;
  width: 88%;
  font-size: .9rem;
}

.mail-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 11px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.mail-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #D5D5DC;
}

.mail-bar em {
  margin-inline-start: auto;
  font: normal 600 .72rem var(--display);
  color: var(--muted);
}

.mail-meta {
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  font-size: .84rem;
  color: var(--muted);
  display: grid;
  gap: 2px;
}

.mail-meta b {
  color: var(--ink);
  font-weight: 600;
}

.mail-body {
  padding: 18px;
}

.mail-body p+p {
  margin-top: 6px;
}

@media (max-width:520px) {
  .mail {
    width: 100%;
  }
}

.mail {
  box-shadow: 0 30px 70px -34px rgba(11,11,15,.35);
  border: 1px solid var(--line);
}

.sg-mail {
  width: 100%;
}

/* SignatureRotator.astro: Shows example signatures one at a time (signature-rotator.js changes them every few seconds and adds a pause button). */

.sigrot {
  display: grid;
}

.sigrot .sr {
  grid-area: 1/1;
  opacity: 0;
  transition: opacity .8s;
  pointer-events: none;
}

.sigrot .sr.on {
  opacity: 1;
  pointer-events: auto;
}

.sr-k {
  align-self: flex-start;
  font: 600 .74rem var(--display);
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
}

.sg-rot {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.sg-rot .sr {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: center;
}

/* ContactForm.astro: Contact page: the contact form (contact-form.js, emailed to support@ by send.php) and the contact details. */

.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 40px;
  align-items: start;
}

form.lead {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field legend {
  font: 500 .95rem var(--display);
  color: var(--ink);
  padding: 0;
}

.field textarea:focus {
  outline: none;
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px var(--magenta-tint);
}

.field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid #D4D4DC;
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
  min-height: 110px;
  resize: vertical;
}

fieldset.field {
  border: 0;
  margin: 0;
  padding: 0;
}

.form-msg {
  grid-column: 1/-1;
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--magenta-tint);
  color: var(--ink);
  font-size: .95rem;
}

.cinfo {
  display: grid;
  gap: 12px;
}

.cinfo div {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  background: #fff;
}

.cinfo small {
  display: block;
  color: var(--muted);
  font-size: .85rem;
}

.cinfo strong {
  font: 600 1.05rem var(--display);
  color: var(--ink);
}

@media (max-width:900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width:560px) {
  form.lead {
    grid-template-columns: 1fr;
    padding: 22px;
  }
}

/* AllCustomers.astro: Customers page: every customer logo (data/customers.js) and "hundreds more". */

.more-clients {
  margin-top: 28px;
  text-align: center;
  font: 700 1.3rem var(--display);
  color: var(--magenta);
}

/* DemoForm.astro: Demo page: details form (steps 1-3) with a live preview of the visitor's signature. After sending, step 4 */

.demo-grid {
  display: grid;
  grid-template-columns: 1.35fr .9fr;
  gap: 36px;
  align-items: start;
}

.demo-form {
  display: grid;
  gap: 18px;
}

.demo-form fieldset {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  margin: 0;
  background: #fff;
}

.demo-form legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 1.08rem var(--display);
  color: var(--ink);
  padding: 0 6px;
}

.demo-form legend span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--magenta);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .9rem;
}

.demo-form legend small {
  font-weight: 500;
  color: var(--muted);
  font-size: .85rem;
}

.grid-2f {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.demo-ok {
  border-radius: 14px;
  padding: 18px 20px;
  background: #E6F6EF;
  color: #0B5A3E;
  font-size: 1rem;
}

.demo-side {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 18px;
}

.demo-prev {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 30px 60px -40px rgba(11,11,15,.35);
}

.demo-prev-h {
  font: 600 .85rem var(--display);
  color: var(--muted);
  margin-bottom: 12px;
}

.dp-sig {
  display: flex;
  gap: 14px;
  align-items: center;
  font: 13px/1.55 Arial,sans-serif;
  color: #222;
}

.dp-sig b {
  font-size: 15px;
  color: #1F3A7A;
}

.dp-logo {
  width: 96px;
  height: 60px;
  border: 1.5px dashed #C9C9D3;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: center/contain no-repeat;
  flex: none;
}

.dp-logo span {
  font: 500 .72rem var(--display);
  color: var(--muted);
}

.dp-logo.has {
  border: 0;
}

.dp-logo.has span {
  display: none;
}

.dp-bar {
  width: 2px;
  align-self: stretch;
  background: var(--magenta);
}

.demo-what {
  list-style: none;
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  display: grid;
  gap: 8px;
}

.demo-what li::before {
  content: "✓ ";
  color: var(--magenta);
  font-weight: 700;
}

@media (max-width:900px) {
  .demo-grid {
    grid-template-columns: 1fr;
  }
  .demo-side {
    position: static;
    order: -1;
  }
}

@media (max-width:560px) {
  .grid-2f {
    grid-template-columns: 1fr;
  }
}

.form-msg a, .err a {
  color: inherit;
  font-weight: 600;
}

.dp-bn {
  margin-top: 14px;
  height: 64px;
  border-radius: 6px;
  border: 1.5px dashed var(--magenta);
  background: var(--magenta-tint);
  display: grid;
  place-items: center;
  font: 600 .85rem var(--display);
  color: #B0004F;
}

.demo-ok a {
  color: var(--magenta);
  font-weight: 700;
}

.demo-foot-n {
  margin: 0;
}

.demo-next {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  margin-top: 6px;
  padding: 22px;
  border: 2px solid var(--magenta);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 40px -24px rgba(221,0,102,.35);
}

.demo-next:focus {
  outline: none;
}

.demo-step {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--magenta);
  color: #fff;
  font: 700 .95rem var(--display);
}

.demo-next h2 {
  font-size: 1.25rem;
  margin: 2px 0 8px;
}

.demo-next p {
  margin: 0 0 10px;
  color: var(--text);
}

.demo-next .btn {
  display: inline-flex;
  margin-top: 4px;
}

.demo-next .form-note {
  display: block;
  margin-top: 10px;
}

.demo-next-mail b {
  color: var(--ink);
}

/* HomeEnvironments.astro: Strip under the home hero: supported email environments and WiseStamp's security standards. */

.envsec {
  padding-block: 36px;
  background: var(--surface);
  border-block: 1px solid var(--line);
}

.envsec .wrap {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.es-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 24px;
  align-items: center;
}

.es-k {
  font: 600 1.05rem var(--display);
  color: var(--ink);
}

.es-sec {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.es-badges {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  flex-wrap: wrap;
}

.es-badges ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.es-badges li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font: 600 .9rem var(--display);
  color: var(--ink);
}

.es-badges li svg {
  color: var(--ok);
}

.es-badges p {
  font-size: .82rem;
  color: var(--muted);
}

@media (max-width:700px) {
  .es-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* HomeHero.astro: Home page opening screen: headline and buttons, the Outlook illustration, the two solution cards and the logo strip. */

.hx {
  position: relative;
  background: radial-gradient(900px 420px at 15% 20%,rgba(221,0,102,.07),transparent 70%), linear-gradient(#fff,#fff);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.hx::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size: 56px 56px;
  opacity: .45;
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%,#000 10%,transparent 65%);
  mask-image: radial-gradient(ellipse at 30% 40%,#000 10%,transparent 65%);
  pointer-events: none;
}

.hx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 .95rem var(--display);
  color: var(--ink);
}

.hx-eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 0 4px var(--magenta-tint);
}

.hx h1 em {
  font-style: normal;
  color: var(--magenta);
}

.hx h1 {
  line-height: 1.1;
  letter-spacing: -.015em;
  font-size: clamp(2rem,3.4vw,2.9rem);
  font-weight: 600;
  max-width: 13.5em;
}

.hx h1 .hl {
  display: block;
}

.hx h1 .ms {
  font-style: normal;
  color: var(--magenta);
  font-weight: 700;
  white-space: nowrap;
}

.hx h1 bdi {
  unicode-bidi: isolate;
  white-space: nowrap;
}

.hx-lead {
  color: var(--muted);
  max-width: 30em;
  line-height: 1.7;
  font-size: 1.06rem;
}

.hx-copy .ctas {
  justify-content: flex-start;
}

@media (max-width:700px) {
  .hx h1 .hl {
    display: inline;
  }
  .hx h1 .hl::after {
    content: " ";
  }
}

.hx-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 20px;
  max-width: 760px;
}

.hx2 {
  position: relative;
  display: grid;
  gap: 56px;
  align-items: center;
}

.hx2 h1 {
  max-width: none;
}

.hx2 {
  grid-template-columns: .95fr 1.05fr;
}

@media (max-width:1180px) {
  .hx2 {
    gap: 36px;
  }
}

.hx-prod {
  min-width: 0;
}

@media (max-width:980px) {
  .hx2 {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.hx {
  padding-block: 26px 20px;
}

.ol-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: .82rem;
  color: var(--muted);
  margin-top: 10px;
}

.hx h1 .nw {
  white-space: nowrap;
}

.hx h1 .h1-also {
  display: inline-block;
  vertical-align: middle;
  margin-inline-start: 6px;
  border: 1px solid var(--line);
  background: #fff;
  font: 600 .76rem/1.2 var(--display);
  color: var(--muted);
  letter-spacing: 0;
}

.hx h1 .h1-also {
  white-space: normal;
  border-radius: 10px;
  line-height: 1.25;
  text-align: start;
  padding: 4px 9px;
}

@media (max-width:640px) {
  .hx h1 .h1-also br {
    display: none;
  }
  .hx h1 .h1-also {
    display: block;
    width: max-content;
    margin: 10px 0 0;
    white-space: nowrap;
    border-radius: 999px;
  }
}

/* HomeSignatureExamples.astro: Home: one example signature for each system, Admail and WiseStamp. */

.hx-tile {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 20px 18px;
  box-shadow: 0 30px 60px -40px rgba(11,11,15,.35),0 2px 6px rgba(11,11,15,.04);
  min-width: 0;
}

.hx-tile.ad {
  border-top: 4px solid var(--magenta);
}

.hx-tile.ws {
  border-top: 4px solid #005AFD;
}

.hx-tile-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.w2 {
  font-family: Arial,Helvetica,sans-serif;
  color: #3A3A50;
  text-align: left;
}

.w2-hi {
  font: 500 22px/1 "Caveat",cursive;
  color: #2A2A3A;
  margin: 0 0 10px;
}

.w2-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 14px;
}

.w2-ph {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg,#FF8FB0,#B57BFF);
}

.w2-ph img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  display: block;
}

.w2-id {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-inline-end: 14px;
  border-inline-end: 1px solid #E3E3EC;
}

.w2-id b {
  font-size: 18px;
  color: #5B3FB0;
  line-height: 1.2;
}

.w2-id span {
  font-size: 12.5px;
  color: #4A4A62;
}

.w2-lg {
  display: block;
  width: 84px;
  height: 28px;
  margin-top: 6px;
}

.w2-ct {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: #4A4A62;
  min-width: 0;
}

.w2-c {
  display: flex;
  align-items: center;
  gap: 7px;
}

.w2-c i {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
}

.w2-c svg {
  width: 13px;
  height: 13px;
}

@media (max-width:520px) {
  .w2-row {
    grid-template-columns: auto 1fr;
  }
  .w2-ct {
    grid-column: 1/-1;
  }
  .w2-id {
    border: 0;
  }
}

.hx-duo {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  padding: 0 !important;
}

.hx-duo .hx-tile {
  display: flex;
  flex-direction: column;
}

.hx-tile-h .tag {
  font-size: .74rem;
}

.hx-duo .hx-tile>.csig, .hx-duo .hx-tile>.w2 {
  flex: 1;
}

@media (max-width:860px) {
  .hx-duo {
    grid-template-columns: 1fr;
  }
}

.w2-ad {
  display: block;
  width: 100%;
  max-width: 368px;
  height: auto;
  margin-top: 12px;
  border-radius: 5px;
}

#home-solutions .hx-duo {
  padding: 0;
}

/* LogoMarquee.astro: Moving strip of customer logos under the home hero. The list is written twice so the loop is seamless. */

.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}

.track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: slide 60s linear infinite;
}

.marquee:hover .track {
  animation-play-state: paused;
}

.marquee.paused .track, .marquee:focus-within .track {
  animation-play-state: paused;
}

.track .clogo {
  margin-inline: 6px;
}

.hx-trust {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.hx-trust p {
  font: 600 .95rem var(--display);
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width:560px) {
  .hx-trust {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.hx .hx-trust {
  margin-top: 18px;
  padding-top: 14px;
}

#trustTrack {
  gap: 0;
}

#trustTrack .clogo {
  margin: 0;
  margin-inline-end: 56px;
}

@keyframes slide {
  to {
    transform: translateX(50%);
  }
}

/* OutlookMock.astro: Home hero illustration: Outlook on a laptop showing an email from Admail, with the signature and banner */

.mxw {
  position: relative;
  padding: 6px 0 26px;
}

.mb {
  position: relative;
  width: 94%;
  margin-inline-end: auto;
  transform-origin: center;
  filter: drop-shadow(0 40px 50px rgba(11,11,15,.28));
}

.mb-scr {
  position: relative;
  aspect-ratio: 16/10;
  background: #0d0d10;
  border-radius: 14px 14px 4px 4px;
  padding: 10px 10px 12px;
  box-shadow: inset 0 0 0 1px #2a2a30;
}

.mb-scr::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  translate: -50% 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2c2c33;
}

.mb-fit {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 3px;
  background: #fff;
}

.mb-base {
  height: 13px;
  margin-inline: -7%;
  background: linear-gradient(#E4E4E9,#B4B4BD);
  border-radius: 0 0 12px 12px;
  position: relative;
  box-shadow: 0 1px 0 #9a9aa3;
}

.mb-base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: 16%;
  height: 5px;
  background: #A7A7B0;
  border-radius: 0 0 7px 7px;
}

.mx-zoom {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  z-index: 4;
}

.mx-zl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 .74rem var(--display);
  color: var(--ink);
  background: var(--magenta-tint);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 10px;
}

.mx-zl i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--magenta);
}

@media (max-width:980px) {
  .mb {
    width: 100%;
  }
  .mx-zoom {
    position: relative;
    inset: auto;
    max-width: 420px;
    margin: 16px auto 0;
  }
}

.mb {
  transform: perspective(2200px) rotateY(-7deg) rotateX(1.5deg);
}

@media (max-width:980px) {
  .mb {
    transform: none;
  }
}

.mx-zoom {
  box-shadow: 0 24px 48px -18px rgba(11,11,15,.35),0 0 0 1px rgba(11,11,15,.07);
  width: 350px;
  inset-inline-end: -22px;
  bottom: -10px;
  padding: 16px 18px 18px;
}

.ox {
  position: absolute;
  top: 0;
  right: 0;
  width: 1400px;
  height: 875px;
  transform: scale(var(--s,.45));
  transform-origin: top right;
  direction: rtl;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 10px;
  background: linear-gradient(180deg,#EDF2F9 0%,#E3EBF6 100%);
  font: 14px/1.4 -apple-system,"Segoe UI","Assistant",sans-serif;
  color: #242424;
  overflow: hidden;
}

.ox svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.ox-hd {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 52px;
  padding-inline: 18px 14px;
  flex: none;
}

.ox-app {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #424242;
}

.ox-app b {
  font: 600 19px -apple-system,"Segoe UI",sans-serif;
  color: #242424;
}

.ox-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 420px;
  height: 34px;
  margin-inline-start: 24px;
  background: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 6px;
  padding-inline: 10px;
  color: #616161;
}

.ox-hic {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  color: #424242;
}

.ox-bell {
  position: relative;
  display: grid;
  font-style: normal;
}

.ox-bell em {
  position: absolute;
  top: -6px;
  inset-inline-end: -8px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #C4314B;
  color: #fff;
  font: 700 10px/16px sans-serif;
  text-align: center;
  font-style: normal;
}

.ox-me {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #E0E0E0;
  display: grid;
  place-items: center;
  font-style: normal;
}

.ox-me svg {
  width: 18px;
  height: 18px;
}

.ox-tabs {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 30px;
  padding-inline: 22px;
  flex: none;
  font-size: 14px;
  color: #424242;
}

.ox-tabs .on {
  color: #242424;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 #0F6CBD;
  padding-bottom: 4px;
}

.ox-ham {
  display: grid;
}

.ox-rib {
  display: flex;
  align-items: stretch;
  margin-inline: 12px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  height: 106px;
  flex: none;
  overflow: hidden;
}

.og {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 8px 22px;
  position: relative;
  border-inline-end: 1px solid #EBEBEB;
}

.og small {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  color: #616161;
}

.ob {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 54px;
  padding: 4px 6px;
  font-size: 12px;
  color: #242424;
  text-align: center;
  line-height: 1.2;
}

.ob svg {
  width: 26px;
  height: 26px;
}

.og.big .ob svg {
  width: 30px;
  height: 30px;
}

.ob.col {
  justify-content: center;
  gap: 10px;
  align-items: flex-start;
}

.ob-s {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.ob-s svg {
  width: 16px !important;
  height: 16px !important;
}

.ob.qs {
  justify-content: center;
}

.ob.qs span {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 12px;
}

.ob.qs svg {
  width: 16px;
  height: 16px;
}

.ox-ad {
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  font: 800 20px/1 Arial,sans-serif;
  color: #DD0066;
  letter-spacing: -1px;
}

.ox-ad.sm {
  width: auto;
  height: auto;
  font-size: 15px;
}

.ob.ad {
  background: #FDF1F6;
  border-radius: 6px;
}

.ox-body {
  flex: 1;
  display: grid;
  grid-template-columns: 56px 270px 1fr;
  gap: 10px;
  padding-inline: 0 12px;
  min-height: 0;
}

.ox-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 8px;
  color: #0F6CBD;
}

.ox-rail i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
}

.ox-rail i.on {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.ox-rail svg {
  width: 22px;
  height: 22px;
}

.ox-fold {
  background: rgba(255,255,255,.55);
  border-radius: 8px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.of-h, .of-acc {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  color: #242424;
}

.of-h b {
  font-size: 17px;
}

.of-acc b {
  font-size: 14px;
  font-weight: 600;
}

.of-h svg, .of-acc svg {
  width: 14px;
  height: 14px;
  color: #616161;
}

.ox-fold a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 10px;
  border-radius: 6px;
  color: #242424;
  font-size: 14px;
}

.ox-fold a svg {
  width: 18px;
  height: 18px;
  color: #424242;
}

.ox-fold a em {
  margin-inline-start: auto;
  font-style: normal;
  font-size: 13px;
  color: #0F6CBD;
  font-weight: 600;
}

.ox-fold a em.g {
  color: #616161;
  font-weight: 400;
}

.ox-fold a.on {
  background: #fff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.ox-read {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.ox-subj {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 46px;
  background: #fff;
  border-radius: 8px;
  padding-inline: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  flex: none;
}

.ox-subj b {
  font-size: 16px;
  font-weight: 600;
}

.ox-x {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #D1D1D1;
  border-radius: 6px;
  color: #424242;
}

.ox-x svg {
  width: 14px;
  height: 14px;
}

.ox-msg {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 16px 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  overflow: hidden;
  min-height: 0;
}

.ox-mh {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ox-av {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #8CC88C;
  color: #1E4620;
  font: 600 14px sans-serif;
  flex: none;
}

.ox-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ox-who b {
  color: #0F6CBD;
  font-weight: 500;
  font-size: 14px;
}

.ox-who small {
  font-size: 13px;
  color: #424242;
}

.ox-acts {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 520px;
  color: #424242;
  font-size: 13px;
}

.ox-acts span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ox-acts svg {
  width: 18px;
  height: 18px;
  color: #7A3E9D;
}

.ox-acts time {
  flex-basis: 100%;
  text-align: end;
  font-size: 12px;
  color: #616161;
}

.ox-sug {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 16px;
  font-size: 13px;
  color: #424242;
}

.ox-sug i {
  font-style: normal;
  border: 1px solid #0F6CBD;
  color: #0F6CBD;
  border-radius: 4px;
  padding: 5px 12px;
}

.ox-text {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 18px;
}

.tsig {
  font: 15px/1.55 -apple-system,Arial,"Assistant",sans-serif;
  color: #111;
  direction: rtl;
  text-align: right;
}

.tsig p {
  margin: 0;
}

.tsig b {
  font-weight: 700;
}

.tsig .gap {
  height: 14px;
}

.tsig a {
  color: #0F6CBD;
  text-decoration: none;
}

.tsig .tlogo {
  display: block;
  width: 190px;
  height: 72px;
  margin-top: 10px;
  background: var(--l-admail) right center/contain no-repeat;
}

.tsig img.ad-bn {
  display: block;
  max-width: 560px;
  width: 100%;
  height: auto;
  margin-top: 16px;
  border-radius: 2px;
}

.ox-zoom {
  width: 250px;
  inset-inline-end: -40px;
  bottom: -14px;
  padding: 12px 14px 14px;
}

.ox-zoom .mx-zl {
  font-size: .68rem;
  padding: 3px 9px;
  margin-bottom: 8px;
}

.ox-zoom .tsig {
  font-size: 11px;
  line-height: 1.45;
}

.ox-zoom .tsig .gap {
  height: 5px;
}

.ox-zoom .tsig .tlogo {
  width: 96px;
  height: 34px;
  margin-top: 5px;
}

.ox-zoom .tsig img.ad-bn {
  margin-top: 8px;
}

@media (max-width:1240px) {
  .ox-zoom {
    inset-inline-end: -12px;
  }
}

/* SignatureBuilder.astro: Home: try-it-yourself signature builder. Visitors type their details, pick a colour, add a logo and a banner, */

.how-links {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 12px 32px;
  flex-wrap: wrap;
}

.sb-sec {
  background: linear-gradient(180deg,#fff 0%,#FBF3F7 55%,#fff 100%);
}

.sb {
  display: grid;
  grid-template-columns: minmax(320px,.85fr) 1.15fr;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 50px 100px -60px rgba(11,11,15,.45),0 2px 8px rgba(11,11,15,.04);
  overflow: hidden;
}

.sb-ctl {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-inline-end: 1px solid var(--line);
  min-width: 0;
}

.sb-seg, .sb-dev {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  align-self: flex-start;
}

.sb-k {
  font: 600 .82rem var(--display);
  color: var(--muted);
  padding-inline: 10px 6px;
}

.sb-seg button, .sb-dev button {
  border: 0;
  background: none;
  font: 600 .9rem var(--display);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 36px;
  transition: background .2s,color .2s;
}

.sb-seg button[aria-pressed="true"], .sb-dev button[aria-pressed="true"] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 8px -2px rgba(11,11,15,.18);
}

.sb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sb-grid[hidden] {
  display: none;
}

.sb-grid .field input {
  padding: 10px 12px;
  font-size: .98rem;
}

.sb-set {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sb-set legend {
  font: 500 .95rem var(--display);
  color: var(--ink);
  padding: 0;
  margin-bottom: 10px;
}

.sb-sw {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.sb-sw button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--s);
  box-shadow: 0 0 0 1px var(--line);
  cursor: pointer;
  transition: transform .15s,box-shadow .15s;
}

.sb-sw button:hover {
  transform: scale(1.08);
}

.sb-sw button[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--s);
}

.sb-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 .85rem var(--display);
  color: var(--muted);
  cursor: pointer;
  border: 1px dashed #C9C9D3;
  border-radius: 999px;
  padding: 4px 10px 4px 6px;
  min-height: 36px;
}

.sb-pick input {
  width: 24px;
  height: 24px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

.sb-logo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sb-up {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px dashed #C9C9D3;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .2s,background .2s;
}

.sb-up:hover {
  border-color: var(--magenta);
  background: #FDF6F9;
}

.sb-up-ic {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--magenta-tint);
  color: var(--magenta);
  display: grid;
  place-items: center;
  font: 700 1.3rem/1 var(--display);
  flex: none;
}

.sb-up b {
  display: block;
  font: 600 .95rem var(--display);
  color: var(--ink);
}

.sb-up small {
  font-size: .82rem;
  color: var(--muted);
}

.sb-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.sb-logo:focus-within .sb-up {
  outline: 2px solid var(--magenta);
  outline-offset: 2px;
}

.sb-priv {
  font-size: .8rem;
  color: var(--muted);
}

.sb-prev {
  position: relative;
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: radial-gradient(circle at 80% 10%,#FCE8F1 0,transparent 50%),var(--surface);
  min-width: 0;
}

.sb-dev {
  align-self: center;
}

.sb-stage {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 420px;
}

.sb-mail {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 30px 60px -36px rgba(11,11,15,.4);
  overflow: hidden;
  transition: max-width .45s ease,border-radius .45s ease,border-width .45s ease;
}

.sb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font: 600 .78rem var(--display);
  color: var(--muted);
}

.sb-bar .dots {
  display: flex;
  gap: 6px;
}

.sb-bar .dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #D5D5DC;
}

.sb-meta {
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  font-size: .85rem;
  color: var(--muted);
  display: grid;
  gap: 3px;
}

.sb-meta b {
  color: var(--ink);
  font-weight: 600;
}

.sb-body {
  padding: 18px 20px 22px;
  font-size: .95rem;
  color: #3A3A44;
}

.sb-body p {
  margin-bottom: 16px;
  line-height: 1.6;
}

.sb-stage.mob .sb-mail {
  max-width: 300px;
  border: 10px solid #111116;
  border-radius: 38px;
}

.sb-stage.mob .sb-bar {
  padding-top: 22px;
  justify-content: center;
}

.sb-stage.mob .sb-bar .dots {
  display: none;
}

.sb-stage.mob .sb-body {
  padding: 14px;
  font-size: .85rem;
}

.sbs {
  font-family: Arial,Helvetica,sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #444;
  animation: sbin .35s ease;
}

.sbs-hi {
  color: #555;
  margin-bottom: 10px;
}

.sbs-mono {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  color: #fff;
  font: 700 22px/1 Arial,sans-serif;
  letter-spacing: .02em;
}

.sb-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
}

.sb-cta p {
  font-size: .95rem;
  color: var(--text);
  max-width: 30em;
}

.sb-steps {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  counter-reset: sbs;
}

.sb-steps li {
  counter-increment: sbs;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
}

.sb-steps li::before {
  content: counter(sbs);
  grid-row: span 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--magenta-tint);
  color: var(--magenta);
  display: grid;
  place-items: center;
  font: 700 .95rem var(--display);
}

.sb-steps b {
  font: 600 1rem var(--display);
  color: var(--ink);
}

.sb-steps span {
  font-size: .9rem;
  color: var(--muted);
}

@media (max-width:960px) {
  .sb {
    grid-template-columns: 1fr;
  }
  .sb-ctl {
    border-inline-end: 0;
    border-bottom: 1px solid var(--line);
  }
  .sb-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width:520px) {
  .sb-ctl, .sb-prev {
    padding: 18px;
  }
  .sb-grid {
    grid-template-columns: 1fr;
  }
  .sb-stage {
    min-height: 0;
  }
}

.sb-up-sm {
  padding: 8px 12px;
  margin-top: 2px;
}

.sb-up-sm .sb-up-ic {
  width: 30px;
  height: 30px;
  font-size: 1rem;
}

.sb-set .sb-up {
  margin-top: 4px;
}

#sbSig .csig {
  font-size: 13.5px;
}

#sbSig .csig .c-n {
  font-size: 16px;
}

.sbs-logoimg {
  display: block;
  max-width: 180px;
  max-height: 60px;
  width: auto;
  height: auto;
  margin-bottom: 2px;
}

.csig.tg[dir="ltr"] .sbs-logoimg, .csig.tg[dir="ltr"] .sbs-wm {
  align-self: flex-start;
}

.csig.tg:not([dir="ltr"]) .sbs-logoimg, .csig.tg:not([dir="ltr"]) .sbs-wm {
  align-self: flex-start;
}

.sbs-wm {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

.sbs-wm .sbs-mono {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  font-size: 17px;
}

.sbs-wm b {
  font: 800 17px/1.1 Arial,sans-serif;
  letter-spacing: -.01em;
}

.sbs-bnimg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 12px;
  border-radius: 2px;
}

.sbs-bnph:hover {
  border-color: var(--magenta);
  background: #FDF6F9;
  color: var(--magenta);
}

.sb-del {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 4px 0;
  font: 500 .85rem var(--display);
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}

.sb-del:hover {
  color: var(--magenta);
}

#sbSig .csig, #sbSig .csig * {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#sbSig .sbs {
  max-width: 100%;
}

#sb .sb-ctl input::placeholder {
  color: #6E6E7A;
  opacity: 1;
}

#sb .sb-ctl input:focus::placeholder {
  color: transparent;
}

#sbSig .csig.tg, #sbSig .csig.tg .c-g, #sbSig .csig.tg .c-soc, #sbSig .csig.tg .c-soc u {
  color: var(--c);
}

#sbSig .csig.tg .c-soc i {
  color: var(--c);
  opacity: .35;
}

.eb-try {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 1.3rem var(--display);
  color: var(--magenta);
  background: var(--magenta-tint);
  border-radius: 999px;
  padding: 8px 20px;
}

.sb-hd {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.sb-hd b {
  font: 700 1.2rem var(--display);
  color: var(--ink);
}

.sb-hd span {
  font-size: .9rem;
  color: var(--muted);
}

.sb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.sb-top .sb-dev {
  align-self: auto;
}

.sb-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 .9rem var(--display);
  color: var(--ink);
}

.sb-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
}

.sb-hint {
  grid-column: 1/-1;
  margin: 0;
  font-size: .9rem;
  color: var(--ink);
  background: var(--magenta-tint);
  border-radius: 10px;
  padding: 9px 12px;
}

.sbs-bnph {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 76px;
  border: 1.5px dashed #C9C9D3;
  border-radius: 6px;
  background: #FAFAFC;
  font: 600 13px Arial,sans-serif;
  cursor: pointer;
  text-align: center;
  transition: border-color .2s,background .2s;
  color: #6B6B78;
}

.sbs-bnph small {
  font: 400 11px Arial,sans-serif;
  color: #6E6E7A;
}

@keyframes sbin {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

/* SolutionCompare.astro: Home: what each solution includes, side by side, and the offer to help choose. */

.choose {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.fit-col {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.fit-col.ad {
  border-top: 4px solid var(--magenta);
}

.fit-col.ws {
  border-top: 4px solid #005AFD;
}

.fit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.fit-list li {
  position: relative;
  padding-inline-start: 28px;
  font-size: 1rem;
}

.fit-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .45em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--magenta-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DD0066' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/10px no-repeat;
}

.fit-col.ws .fit-list li::before {
  background-color: #EEF3FF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005AFD' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E");
}

.fit-col .link {
  margin-top: auto;
}

.fit-col .ws-l {
  color: #005AFD;
}

.both-note {
  text-align: center;
  margin-top: 24px;
  color: var(--muted);
  font-size: .95rem;
}

@media (max-width:900px) {
  .choose {
    grid-template-columns: 1fr;
  }
}

.both-note small {
  display: block;
  margin-top: 6px;
  font-size: .8rem;
}

/* SolutionPicks.astro: Two cards under the home hero: Admail and WiseStamp, who each one fits and what it includes. */

.hx-pick {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.hp {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 30px 60px -40px rgba(11,11,15,.35),0 2px 6px rgba(11,11,15,.04);
  min-width: 0;
}

.hp.ad {
  border-top: 4px solid var(--magenta);
}

.hp.ws {
  border-top: 4px solid #005AFD;
}

.hp-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 26px;
}

.hp-h .hx-tile-n {
  font-size: 1.15rem;
}

.hp-ck {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}

.hp-ck li {
  position: relative;
  padding-inline-start: 22px;
  font-size: .93rem;
  line-height: 1.45;
}

.hp-ck li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .3em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--magenta-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DD0066' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/9px no-repeat;
}

.hp.ws .hp-ck li::before {
  background-color: #EEF3FF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005AFD' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E");
}

.hp .link {
  font-size: .95rem;
}

.hp .ws-l {
  color: #005AFD;
}

.hp-more {
  text-align: center;
  font-size: .95rem;
  color: var(--muted);
}

@media (max-width:480px) {
  .hp-ck {
    grid-template-columns: 1fr;
  }
}

.hp-x {
  font-size: .85rem;
  color: var(--muted);
  margin: 0;
  padding-inline-start: 22px;
  position: relative;
}

.hp-x::before {
  content: "+";
  position: absolute;
  inset-inline-start: 3px;
  color: var(--magenta);
  font-weight: 700;
}

@media (max-width:1180px) {
  .hp {
    padding: 14px 16px;
  }
  .hp-ck li {
    font-size: .88rem;
  }
}

.hx-pick2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media (max-width:980px) {
  .hx-pick2 {
    grid-template-columns: 1fr;
  }
}

.hx-pick2 .hp {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "h link" "fit fit" "ck ck" "x x";
  align-items: center;
  gap: 8px 14px;
  padding: 12px 18px;
}

.hx-pick2 .hp-h {
  grid-area: h;
  justify-content: flex-start;
  gap: 10px;
  min-height: 0;
}

.hx-pick2 .sol-fit {
  grid-area: fit;
  justify-self: start;
  white-space: nowrap;
}

.hx-pick2 .hp .link {
  grid-area: link;
  justify-self: end;
  font-size: .88rem;
  white-space: nowrap;
}

.hx-pick2 .hp-ck {
  grid-area: ck;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.hx-pick2 .hp-ck li {
  font-size: .88rem;
}

.hx-pick2 .hp-x {
  grid-area: x;
  font-size: .82rem;
}

.hx-pick2 .hp-more {
  grid-column: 1/-1;
  margin-top: -2px;
  font-size: .9rem;
}

@media (max-width:640px) {
  .hx-pick2 .hp {
    grid-template-columns: 1fr;
    grid-template-areas: "h" "fit" "ck" "x" "link";
  }
  .hx-pick2 .hp .link {
    justify-self: start;
  }
}

.hx-pick2 {
  gap: 14px;
  margin-top: 14px;
}

/* WhyAdmail.astro: Home: why Admail (year founded and four reasons). */

.why {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 72px;
  align-items: start;
}

.year small {
  display: block;
  font: 500 1.05rem var(--body);
  letter-spacing: 0;
  color: var(--muted);
  margin-top: 18px;
}

.points {
  list-style: none;
  margin: 0;
  padding: 0;
}

.points li:last-child {
  border-bottom: 1px solid var(--line);
}

.points .ico {
  grid-row: span 2;
}

.points p {
  color: var(--muted);
}

@media (max-width:900px) {
  .why {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 20px;
  border-top: 1px solid var(--line);
  padding-block: 18px;
}

.year {
  font: 700 clamp(5rem,12vw,9rem)/.9 var(--display);
  color: var(--ink);
  letter-spacing: -.04em;
  font-size: clamp(4rem,9vw,6.5rem);
}

/* CookieBanner.astro: Cookie consent banner. Shown on the first visit and from the "הגדרות עוגיות" buttons; see cookie-consent.js. */

.ck {
  position: fixed;
  z-index: 90;
  bottom: calc(16px + env(safe-area-inset-bottom,0px));
  left: 50%;
  translate: -50% 0;
  width: min(760px,calc(100% - 32px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 60px -24px rgba(11,11,15,.4);
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px 22px;
  align-items: center;
  font-size: .95rem;
  color: var(--text);
}

.ck h2 {
  font: 600 1.02rem var(--display);
  color: var(--ink);
  margin: 0 0 4px;
}

.ck p {
  margin: 0;
  line-height: 1.55;
}

.ck a {
  color: var(--magenta);
}

.ck-btns {
  display: flex;
  gap: 10px;
}

.ck-btns .btn {
  padding: 10px 18px;
  font-size: .95rem;
}

@media (max-width:640px) {
  .ck {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .ck-btns .btn {
    flex: 1;
  }
}

/* FloatingButtons.astro: Round buttons fixed at the bottom corner: contact form and WhatsApp. */

@media (max-width:700px) {
  .fab svg {
    width: 20px;
    height: 20px;
  }
  .fab-tip {
    display: none;
  }
}

.fabs {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom,0px));
  inset-inline-start: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 40;
}

.fab {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.35);
  text-decoration: none;
}

.fab-wa {
  background: #1FAF5A;
}

.fab-mail {
  background: var(--magenta);
}

.fab-tip {
  position: absolute;
  inset-inline-start: 64px;
  white-space: nowrap;
  background: var(--ink);
  color: #fff;
  font: 500 .82rem var(--display);
  padding: 6px 10px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  direction: ltr;
}

.fab:hover .fab-tip, .fab:focus-visible .fab-tip {
  opacity: 1;
}

/* SiteFooter.astro: Bottom of every page: logo, link columns, contact details, legal line and the cookie-settings button. */

footer {
  background: var(--ink);
  color: #9A9AA8;
  border-top: 1px solid #1E1E26;
  padding-block: 56px 32px;
  font-size: .95rem;
}

.foot {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
}

.foot img {
  height: 34px;
  width: auto;
}

.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.foot a {
  text-decoration: none;
}

.foot a:hover {
  color: #fff;
}

.foot .ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

.legal {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid #1E1E26;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font-size: .85rem;
}

@media (max-width:900px) {
  .foot {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:520px) {
  .foot {
    grid-template-columns: 1fr;
  }
}

.legal .co {
  opacity: .85;
}

.legal a {
  color: inherit;
}

@media (max-width:700px) {
  footer {
    padding-bottom: 150px;
  }
}

.foot h2 {
  font: 600 .95rem var(--display);
  color: #fff;
  margin: 0 0 12px;
}

.ck-foot {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* SiteHeader.astro: Top bar on every page: logo, main menu with the Admail and WiseStamp drop-downs, call-to-action buttons, */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top,0px);
  z-index: 50;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 72px;
}

.brand img {
  height: 38px;
  width: auto;
  display: block;
}

.menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  font: 500 1rem var(--display);
}

.menu a {
  text-decoration: none;
  color: var(--text);
}

.menu a:hover {
  color: var(--magenta);
}

.has-sub {
  position: relative;
}

.has-sub > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-inline-start: 8px;
  translate: 0 -3px;
  opacity: .6;
}

.sub {
  position: absolute;
  top: calc(100% + 14px);
  inset-inline-start: -16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 8px;
  min-width: 260px;
  box-shadow: 0 18px 40px -18px rgba(11,11,15,.25);
  display: none;
}

.has-sub:hover .sub, .has-sub:focus-within .sub {
  display: block;
}

.sub a {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: 8px;
}

.sub a:hover {
  background: var(--surface);
  color: var(--ink);
}

.header-cta {
  display: flex;
  gap: 10px;
  margin-inline-start: auto;
}

.header-cta .btn {
  padding: 10px 18px;
  font-size: .95rem;
}

.burger {
  display: none;
  margin-inline-start: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  margin: 4px auto;
}

.site-header .mobile-nav, .mobile-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  border-top: 1px solid var(--line);
  padding-block: 8px 20px;
}

.site-header .mobile-nav[hidden] {
  display: none !important;
}

.mobile-nav a {
  display: block;
  padding: 12px 0;
  font: 500 1.05rem var(--display);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.mobile-nav .btn {
  margin-top: 16px;
  width: 100%;
}

.mobile-nav a.btn {
  display: flex;
  justify-content: center;
  border-bottom: 0;
  color: #fff;
}

@media (max-width:1060px) {
  .menu, .header-cta .btn-outline {
    display: none;
  }
}

@media (max-width:640px) {
  .header-cta {
    display: none;
  }
  .brand img {
    height: 32px;
  }
}

.ws-nav {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: 8px;
  transition: background .2s;
}

.ws-nav-logo {
  height: 16px;
  width: auto;
  display: block;
}

.ws-nav:hover, .ws-nav[aria-current="page"] {
  background: #EEF3FF;
  box-shadow: inset 0 -2px 0 #005AFD;
}

.mobile-nav .ws-nav {
  margin: 0;
  padding: 12px 0;
  display: flex;
  border-radius: 0;
  box-shadow: none;
  background: none;
}

.mobile-nav .ws-nav-logo {
  height: 18px;
}

.menu .sub::before {
  content: "";
  position: absolute;
  top: -14px;
  inset-inline: 0;
  height: 14px;
}

.menu .sub a {
  display: block;
  padding: 9px 12px;
  font: 500 .93rem var(--display);
  color: var(--text);
  white-space: nowrap;
}

.menu .has-sub > a.ws-nav::after {
  margin-inline-start: 6px;
}

.m-sub {
  display: flex;
  flex-direction: column;
  padding: 2px 0 8px;
  border-bottom: 1px solid var(--line);
}

.m-sub[hidden] {
  display: none !important;
}

.m-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.m-row>a {
  flex: 1;
  border-bottom: 0 !important;
}

.m-tog {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
}

.m-tog::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--text);
  border-bottom: 1.5px solid var(--text);
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .2s;
}

.m-tog[aria-expanded="true"]::before {
  transform: rotate(225deg) translate(-2px,-2px);
}

@media (max-width:1060px) {
  .burger {
    display: block;
  }
}

.menu a[aria-current="page"] {
  color: var(--magenta);
}

.menu {
  font-size: .95rem;
  gap: 22px;
}

.menu .sub {
  top: calc(100% + 10px);
  inset-inline-start: -12px;
  z-index: 60;
  min-width: 250px;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 16px 40px -18px rgba(11,11,15,.28),0 2px 6px rgba(11,11,15,.05);
}

.menu .sub.two {
  min-width: 420px;
}

.sub-h {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 10px 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.sub-h b {
  font: 600 .88rem var(--display);
  color: var(--ink);
}

.sub-h span {
  font: 400 .76rem var(--body);
  color: var(--muted);
}

.sub-l {
  display: grid;
  gap: 1px;
}

.sub.two .sub-l {
  grid-template-columns: 1fr 1fr;
  column-gap: 6px;
}

.menu .sub .sub-l a {
  display: block;
  padding: 7px 10px;
  border-radius: 7px;
  font: 500 .84rem/1.3 var(--display);
  color: var(--text);
  white-space: nowrap;
}

.menu .sub .sub-l a:hover {
  background: var(--surface);
  color: var(--magenta);
}

.sub.two .sub-l a:hover {
  color: #005AFD;
}

.menu .sub .sub-all {
  display: block;
  margin-top: 6px;
  padding: 8px 10px 2px;
  border-top: 1px solid var(--line);
  font: 600 .78rem var(--display);
  color: var(--magenta);
}

.sub.two .sub-all {
  color: #005AFD;
}

.mobile-nav .m-sub a {
  font: 400 .95rem var(--body);
  color: var(--muted);
  border-bottom: 0;
  padding: 7px 0;
  padding-inline-start: 14px;
  font-size: .9rem;
}

/* LegalDoc.astro: Frame for a legal text (privacy, terms, accessibility): the text goes in the slot. */

.ldoc a {
  color: var(--magenta);
}

.ldoc {
  max-width: 820px;
  margin-inline: auto;
  line-height: 1.75;
  color: var(--text);
}

.ldoc h2 {
  font-size: 1.25rem;
  margin: 36px 0 10px;
}

.ldoc ul {
  padding-inline-start: 22px;
  display: grid;
  gap: 6px;
}

.ldoc-date {
  color: var(--muted);
  font-size: .9rem;
}

.ldoc-contact {
  list-style: none;
  padding: 16px 20px !important;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--line);
}

/* PricingAdmail.astro: Pricing page: Admail packages, the HTML signature service, and prices by number of users (data/pricing.js). */

.price .vat {
  font-size: .78rem;
  color: var(--muted);
  font-weight: 500;
}

.price-info {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: .92rem;
  color: var(--text);
  margin-top: 28px;
}

.cmp-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

table.cmp {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  font-size: 1rem;
}

.cmp th, .cmp td {
  padding: 16px 22px;
  text-align: start;
  border-bottom: 1px solid var(--line);
}

.cmp thead th {
  font: 600 1.05rem var(--display);
  color: var(--ink);
  background: var(--surface);
}

.cmp thead th:not(:first-child), .cmp td:not(:first-child) {
  text-align: center;
  width: 26%;
}

.cmp tbody tr:last-child td {
  border-bottom: 0;
}

.pl.inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  border: 0;
  padding-top: 8px;
}

.pnote {
  font-size: .85rem;
  color: var(--muted);
  background: var(--surface);
  border-radius: 8px;
  padding: 10px 12px;
}

.plan-wide {
  margin-top: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.assure {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  font: 600 .98rem var(--display);
  color: var(--ink);
}

.assure span::before {
  content: "✓ ";
  color: var(--magenta);
}

.tiers td b {
  font-family: var(--display);
}

.price s {
  font-size: 1rem;
  color: #6B6B78;
}

table.cmp.tiers {
  min-width: 0;
  table-layout: fixed;
}

@media (max-width:640px) {
  table.cmp.tiers th, table.cmp.tiers td {
    padding: 12px 10px;
    font-size: .92rem;
    white-space: normal;
  }
  table.cmp.tiers th:first-child, table.cmp.tiers td:first-child {
    width: 40%;
  }
}

/* PricingTabs.astro: Pricing page: Admail / WiseStamp switch (pricing-tabs.js shows the matching panel). */

.ptabs {
  display: inline-flex;
  align-self: flex-start;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
  margin-top: 8px;
}

.ptabs button {
  border: 0;
  background: none;
  font: 600 1rem var(--display);
  padding: 10px 26px;
  border-radius: 9px;
  cursor: pointer;
  color: var(--muted);
}

.ptabs button[aria-selected="true"] {
  background: var(--ink);
  color: #fff;
}

/* PricingWiseStamp.astro: Pricing page: WiseStamp plans in dollars (data/pricing.js). Hidden until the WiseStamp tab is chosen. */

.pper {
  font-size: .85rem;
  color: var(--muted);
  margin-top: -6px;
}

/* Anatomy.astro: Signatures page: the parts of a signature. Pointing at an item in the list highlights it in the signature (anatomy.js). */

.anat {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items: center;
}

.anat-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 56px 32px 32px;
  box-shadow: 0 40px 80px -50px rgba(11,11,15,.35);
}

.anat-lang {
  position: absolute;
  top: 16px;
  inset-inline-end: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font: 600 .8rem var(--display);
  color: var(--ink);
  transition: box-shadow .2s;
}

.anat-lang i {
  font-style: normal;
  color: var(--magenta);
}

.anat-lang .anat-n {
  position: absolute;
  top: -10px;
  inset-inline-start: -10px;
}

.anat-n {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--magenta);
  color: #fff;
  font: 700 .78rem var(--display);
  display: inline-grid;
  place-items: center;
  box-shadow: 0 0 0 3px #fff;
  flex: none;
}

.anat-sig .csig {
  font-size: 1.05rem;
}

.anat-sig :is(.c-logo,.c-id,.c-icons,.c-bnr) {
  position: relative;
  outline: 2px dashed transparent;
  outline-offset: 6px;
  border-radius: 4px;
  transition: outline-color .2s,opacity .2s;
}

.anat-sig :is(.c-logo,.c-id,.c-icons,.c-bnr)::after {
  position: absolute;
  top: -12px;
  inset-inline-start: -12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--magenta);
  color: #fff;
  font: 700 .78rem var(--display);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 3px #fff;
  z-index: 2;
}

.anat-sig .c-logo::after {
  content: "1";
}

.anat-sig .c-id::after {
  content: "2";
}

.anat-sig .c-icons::after {
  content: "3";
}

.anat-sig .c-bnr::after {
  content: "4";
}

.anat[data-hl] .anat-sig :is(.c-logo,.c-id,.c-icons,.c-bnr) {
  opacity: .35;
}

.anat[data-hl="1"] .anat-sig .c-logo, .anat[data-hl="2"] .anat-sig .c-id, .anat[data-hl="3"] .anat-sig .c-icons, .anat[data-hl="4"] .anat-sig .c-bnr {
  opacity: 1;
  outline-color: var(--magenta);
}

.anat[data-hl="2"] .anat-sig .c-icons {
  opacity: 1;
}

.anat[data-hl="3"] .anat-sig .c-id {
  opacity: 1;
}

.anat[data-hl="5"] .anat-lang {
  box-shadow: 0 0 0 2px var(--magenta);
}

.anat[data-hl="5"] .anat-sig :is(.c-logo,.c-id,.c-icons,.c-bnr) {
  opacity: 1;
}

.anat-key {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.anat-key li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 12px;
  cursor: default;
  transition: background .2s;
}

.anat-key li:hover, .anat-key li:focus-visible, .anat-key li.on {
  background: #FDF1F6;
  outline: none;
}

.anat-key b {
  font: 600 1.05rem var(--display);
  color: var(--ink);
  display: block;
  margin-bottom: 2px;
}

.anat-key p {
  margin: 0;
  font-size: .95rem;
  color: var(--muted);
}

@media (max-width:960px) {
  .anat {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width:600px) {
  .anat-card {
    padding: 52px 18px 22px;
  }
}

/* SignatureFeatures.astro: Signatures page: signature management features in a card grid, including a phone example. */

.sphn {
  width: 250px;
  max-width: 100%;
}

.sphn .mui-body .csig {
  font-size: .95em;
}

.bento {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-areas: "grp grp phn" "a b phn" "c d phn";
  gap: 18px;
}

.bx-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.bx-card h3 {
  font-size: 1.12rem;
}

.bx-card p {
  margin: 0;
  font-size: .95rem;
  color: var(--muted);
}

.bento .b-grp {
  grid-area: grp;
}

.bento .b-phn {
  grid-area: phn;
  align-items: center;
  text-align: center;
  background: linear-gradient(180deg,#fff,#FBF3F7);
}

.bento .b-phn .sphn {
  width: 230px;
  margin-top: 10px;
}

.bx-ic {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--magenta-tint);
  color: var(--magenta);
  display: grid;
  place-items: center;
}

@media (max-width:960px) {
  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "grp grp" "phn phn" "a b" "c d";
  }
}

@media (max-width:600px) {
  .bento {
    grid-template-columns: 1fr;
    grid-template-areas: "grp" "phn" "a" "b" "c" "d";
  }
}

.dept3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
  margin-top: 8px;
}

.dm {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.dm-h {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 600 .88rem var(--display);
  color: var(--ink);
}

.dm-h i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: none;
}

.dm-lg {
  width: 38px;
  height: 16px;
  border-radius: 4px;
  background: #E4E4EA;
}

.dm-l {
  height: 6px;
  border-radius: 3px;
  background: #ECECF1;
}

.dm-bn {
  margin-top: auto;
  min-height: 30px;
  border-radius: 6px;
  color: #fff;
  font: 600 .74rem/1.25 var(--display);
  display: flex;
  align-items: center;
  padding: 6px 9px;
}

.dm-ds {
  margin-top: auto;
  font-size: .7rem;
  line-height: 1.4;
  color: var(--muted);
  border-top: 1px dashed var(--line);
  padding-top: 6px;
}

.dm-cap {
  font-size: .8rem !important;
  margin-top: 2px !important;
}

@media (max-width:600px) {
  .dept3 {
    grid-template-columns: 1fr;
  }
}

/* SignaturesHero.astro: Signatures page opening: title, facts, buttons, and an email whose signature rotates between three customers. */

.sghero .wrap {
  align-items: center;
}

.sg-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.sg-facts li {
  position: relative;
  padding-inline-start: 24px;
  font: 500 .95rem var(--display);
  color: var(--ink);
}

.sg-facts li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .25em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--magenta-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DD0066' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/10px no-repeat;
}

.sg-vis {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sg-cap {
  font-size: .82rem;
  color: var(--muted);
  text-align: center;
}

/* Capabilities.astro: WiseStamp page: capability columns (data/wisestamp.js). */

.caps {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(210px,1fr));
  gap: 18px;
}

.capcol {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
}

.capcol h3 {
  margin-bottom: 12px;
}

.capcol .pl {
  font-size: .93rem;
}

/* DeploymentSteps.astro: WiseStamp page: the four deployment steps (data/wisestamp.js). */

.steps4 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
  counter-reset: st;
}

.steps4 li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  counter-increment: st;
}

.steps4 li::before {
  content: counter(st);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--magenta);
  color: #fff;
  display: grid;
  place-items: center;
  font: 700 1rem var(--display);
  margin-bottom: 6px;
}

.steps4 b {
  font: 700 1.05rem var(--display);
  color: var(--ink);
}

.steps4 span {
  color: var(--muted);
  font-size: .93rem;
}

@media (max-width:900px) {
  .steps4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:520px) {
  .steps4 {
    grid-template-columns: 1fr;
  }
}

/* SignatureStyles.astro: WiseStamp page: illustrated signature styles that can be built in WiseStamp. */

.wsc {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff;
  border-radius: 8px;
  padding: 14px;
  border: 1px solid #EEEFF3;
  min-height: 120px;
}

.wsc>svg {
  width: 62px;
  height: 62px;
  flex: none;
}

.wsc-t {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  font: 400 12.5px/1.4 Arial,Helvetica,sans-serif;
  color: #44444F;
}

.wsc-t b {
  font-size: 15px;
  color: var(--wc);
}

.wsc-t .ln {
  height: 2px;
  width: 46px;
  background: var(--wc);
  margin: 3px 0 2px;
  border-radius: 2px;
}

.wsc-soc {
  display: flex;
  gap: 5px;
  margin-top: 4px;
}

.wsc-soc svg {
  width: 16px;
  height: 16px;
}

.wsc-btn {
  align-self: flex-start;
  margin-top: 6px;
  color: #fff;
  font: 600 11.5px Arial,sans-serif;
  padding: 6px 10px;
  border-radius: 5px;
}

.wsc-gal {
  display: flex;
  gap: 5px;
  margin-top: 6px;
}

.wsc-gal i {
  width: 44px;
  height: 30px;
  border-radius: 4px;
}

.wsc-bn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: #fff;
  font: 700 12px Arial,sans-serif;
  padding: 8px 10px;
  border-radius: 5px;
}

.wsc-bn em {
  font-style: normal;
  background: #fff;
  color: #C8285F;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 11px;
}

.wsc-vid {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font: 600 11.5px Arial,sans-serif;
  color: #6B4FB8;
}

.wsc-vid b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 22px;
  background: #E62117;
  color: #fff;
  border-radius: 5px;
  font-size: 10px;
}

.wsc-eco {
  margin-top: 6px;
  font-size: 11px;
  color: #3C8D3F;
}

.wst-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
}

.wst-gallery figure {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wst-gallery figcaption {
  font: 600 .88rem var(--display);
  color: var(--muted);
}

/* TeamRoles.astro: WiseStamp page: what each team in the organisation manages (data/wisestamp.js). */

.teams {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 14px;
}

.team-i {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.team-i b {
  font: 700 1.08rem var(--display);
  color: var(--ink);
}

.team-i span {
  color: var(--muted);
  font-size: .95rem;
}

/* WiseStampEnvs.astro: WiseStamp page: one-line list of supported environments under the "why WiseStamp" cards. */

.envi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 .76rem var(--display);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px 4px 10px;
}

.envi i {
  width: 16px;
  height: 16px;
  background: center/contain no-repeat;
  flex: none;
}

.ws-envs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}

.ws-envs .f-l {
  font: 600 .8rem var(--display);
  color: var(--muted);
  margin-inline-end: 4px;
}

/* WiseStampFacts.astro: WiseStamp page: key facts, who WiseStamp is, and WiseStamp's certification badges. */

.ws-about {
  padding-block: 56px;
}

.ws-facts {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 16px;
}

.ws-facts>div {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ws-facts b {
  font: 700 1.8rem var(--display);
  color: var(--ink);
  direction: ltr;
  text-align: right;
}

.ws-facts span {
  color: var(--muted);
  font-size: .92rem;
}

.ws-clar {
  margin-top: 22px;
  font-size: 1.05rem;
  color: var(--text);
  background: var(--surface);
  border-radius: 12px;
  padding: 16px 20px;
  border-inline-start: 4px solid var(--magenta);
}

.ws-badges {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 32px auto 0;
  filter: grayscale(1);
}

.ws-cust {
  padding-block: 56px 8px;
}

.ws-cust .sec-head {
  margin-bottom: 28px;
}

@media (max-width:900px) {
  .ws-facts {
    grid-template-columns: 1fr !important;
  }
}

#wisestamp-customers .lead {
  font-size: 1.32rem;
  line-height: 1.6;
  color: var(--text);
  max-width: 42em;
}

@media (max-width:700px) {
  #wisestamp-customers .lead {
    font-size: 1.15rem;
  }
}

/* WiseStampHero.astro: WiseStamp page opening: logo, title and buttons, and an example WiseStamp signature in an email. */

.crumb b {
  color: var(--magenta);
}

.hx-mail-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font: 600 .78rem var(--display);
  color: var(--muted);
}

.hx-mail-bar .dots {
  display: flex;
  gap: 6px;
}

.hx-mail-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #D5D5DC;
}

.wss {
  background: #fff;
  font: 14px/1.45 "Assistant",Arial,sans-serif;
  color: #333;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wss-hi {
  font: 500 1.5rem "Caveat",cursive;
  color: #444;
}

.wss-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.wss-photo {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  font: 700 1.2rem var(--display);
}

.wss-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 130px;
}

.wss-id b {
  font: 700 1.08rem var(--display);
}

.wss-id span {
  color: #666;
  font-size: .86rem;
}

.wss-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 800 .8rem var(--display);
  letter-spacing: .08em;
  margin-top: 6px;
}

.wss-logo i {
  width: 14px;
  height: 14px;
  clip-path: polygon(50% 0,100% 100%,0 100%);
}

.wss-sep {
  width: 1px;
  align-self: stretch;
  background: #E3E3EA;
}

.wss-ct {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: .84rem;
}

.wss-ct li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wss svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--c,#555);
}

.wss-bnr {
  border-radius: 8px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
}

.wss-bnr small {
  display: block;
  font: 600 .68rem var(--display);
  letter-spacing: .08em;
  opacity: .85;
}

.wss-bnr strong {
  font: 700 1rem var(--display);
}

.wss-bnr em {
  font: normal 600 .78rem var(--display);
  background: #fff;
  color: #2A1B6B;
  border-radius: 999px;
  padding: 6px 14px;
}

.ws-hero-vis {
  min-width: 0;
}

.ws-mail {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(11,11,15,.35);
}

.ws-mail-body {
  padding: 20px;
  text-align: left;
}

.ws-mail-body>p {
  color: #444;
  margin-bottom: 14px;
  font-size: .92rem;
}

.hero-copy img.ph-logo.ws {
  height: 26px !important;
  margin-bottom: 16px !important;
}

/* WiseStampIntegrations.astro: WiseStamp page: email environments and CRM systems WiseStamp connects to (data/wisestamp.js). */

.int-h {
  margin: 0 0 10px;
  font: 600 .95rem var(--display);
  color: var(--ink);
}

/* WiseStampService.astro: WiseStamp page: the service Admail adds around WiseStamp. */

.ws-admail {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--magenta-tint);
  border-radius: 16px;
  padding: 32px;
}

.ws-admail h2 {
  margin-top: 8px;
}

.ws-svc-p {
  margin-top: 10px;
  max-width: 40em;
  color: var(--text);
}