/* Conversion additions keep the existing paper, cable and yellow-marker language. */

html.site-shell body.page-shell .page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  margin-top: 30px;
}

html.site-shell body.page-shell .page-actions .btn--secondary {
  background: var(--shell-white);
}

@media (min-width: 900px) {
  html.site-shell body.page-shell--pricing .page-head .wrap > :not(.shell-price-ticket) {
    width: 100%;
  }
}

html.site-shell body.page-shell .trust-line {
  margin: 25px 0 0;
  color: var(--shell-muted);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.5;
}

html.site-shell body.page-shell .plan-picker {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding: clamp(76px, 9vw, 120px) 0;
  border-block: 3px solid var(--shell-ink);
  background: var(--shell-paper-warm);
  isolation: isolate;
}

html.site-shell body.page-shell .plan-picker::before {
  position: absolute;
  z-index: -1;
  top: 54%;
  right: -5%;
  left: -5%;
  height: var(--shell-wire);
  border-radius: 999px;
  background: var(--shell-ink);
  content: "";
  transform: rotate(-1deg);
}

html.site-shell body.page-shell .plan-picker > .wrap > .kicker {
  margin-bottom: 18px;
  background: var(--shell-yellow);
}

html.site-shell body.page-shell .plan-picker h2 {
  max-width: 12ch;
  margin: 0 0 clamp(42px, 6vw, 70px);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 5.3rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

html.site-shell body.page-shell .plan-picker__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(26px, 5vw, 64px);
}

html.site-shell body.page-shell .plan-route {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(30px, 4vw, 46px);
  background: transparent;
  isolation: isolate;
  transform: rotate(-0.45deg);
}

html.site-shell body.page-shell .plan-route--business {
  transform: rotate(0.55deg) translateY(20px);
}

html.site-shell body.page-shell .plan-route::before,
html.site-shell body.page-shell .plan-route::after {
  position: absolute;
  pointer-events: none;
  clip-path: polygon(2% 1%, 96% 0, 100% 8%, 98% 97%, 7% 100%, 0 94%, 1% 7%);
  content: "";
}

html.site-shell body.page-shell .plan-route::before {
  z-index: -2;
  inset: -4px;
  background: var(--shell-ink);
}

html.site-shell body.page-shell .plan-route::after {
  z-index: -1;
  inset: 0;
  background: var(--shell-white);
}

html.site-shell body.page-shell .plan-route--business::after {
  background: #fffbed;
}

html.site-shell body.page-shell .plan-route > .kicker {
  margin-bottom: 17px;
  background: var(--shell-paper);
  box-shadow: 3px 3px 0 var(--shell-ink);
}

html.site-shell body.page-shell .plan-route--business > .kicker {
  background: var(--shell-yellow);
}

html.site-shell body.page-shell .plan-route h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  line-height: 1;
}

html.site-shell body.page-shell .plan-route__price {
  display: grid;
  gap: 2px;
  margin: 22px 0 0;
  font-weight: 800;
}

html.site-shell body.page-shell .plan-route__price strong {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 7vw, 5.8rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

html.site-shell body.page-shell .plan-route__price span {
  color: var(--shell-muted);
  font-size: 0.9rem;
}

html.site-shell body.page-shell .plan-route__features {
  display: grid;
  gap: 11px;
  margin: 26px 0 34px;
  padding: 20px 0 0;
  border-top: 2px solid var(--shell-ink);
  list-style: none;
  font-weight: 750;
  line-height: 1.45;
}

html.site-shell body.page-shell .plan-route__features li::before {
  margin-inline-end: 9px;
  content: "✓";
  font-weight: 900;
}

html.site-shell body.page-shell .plan-route .btn {
  margin-top: auto;
  margin-inline-start: 9px;
}

html.site-shell body.page-shell .plan-picker > .wrap > .trust-line {
  width: fit-content;
  margin: clamp(50px, 7vw, 82px) auto 0;
  padding: 10px 15px;
  border: 2px solid var(--shell-ink);
  background: var(--shell-yellow);
  color: var(--shell-ink);
  text-align: center;
  transform: rotate(-0.35deg);
}

html.site-shell body.page-shell--signup .signup-progress {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 38px;
  padding: 0;
  list-style: none;
}

html.site-shell body.page-shell--signup .signup-progress::before {
  position: absolute;
  z-index: -1;
  top: 17px;
  right: 8%;
  left: 8%;
  height: 4px;
  border-radius: 999px;
  background: var(--shell-paper-deep);
  content: "";
}

html.site-shell body.page-shell--signup .signup-progress li {
  display: grid;
  justify-items: center;
  gap: 7px;
  color: var(--shell-muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-align: center;
}

html.site-shell body.page-shell--signup .signup-progress span {
  display: grid;
  width: 38px;
  aspect-ratio: 1;
  place-items: center;
  border: 3px solid var(--shell-ink);
  border-radius: 50%;
  background: var(--shell-white);
  color: var(--shell-ink);
  font-size: 0.9rem;
}

html.site-shell body.page-shell--signup .signup-progress li[aria-current="step"] {
  color: var(--shell-ink);
}

html.site-shell body.page-shell--signup .signup-progress li[aria-current="step"] span {
  background: var(--shell-yellow);
  box-shadow: 3px 3px 0 var(--shell-ink);
  transform: rotate(-3deg);
}

html.site-shell body.page-shell--signup .signup-progress li.is-complete span {
  background: var(--shell-ink);
  color: var(--shell-white);
  font-size: 0;
}

html.site-shell body.page-shell--signup .signup-progress li.is-complete span::after {
  content: "✓";
  font-size: 0.95rem;
}

html.site-shell body.page-shell--signup .signup-context,
html.site-shell body.page-shell--signup .signup-required-note {
  margin: 18px 0;
  padding: 12px 14px;
  border-inline-start: 5px solid var(--shell-yellow);
  background: var(--shell-paper-warm);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.5;
}

/* ‏תיבת ההסכמה להתראות (21.8). לא מעוצבת ככרטיס — היא שאלה, לא הבטחה. */
html.site-shell body.page-shell--signup .signup-consent {
  margin: 18px 0 6px;
}

html.site-shell body.page-shell--signup .signup-consent label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
}

html.site-shell body.page-shell--signup .signup-consent input {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin-block-start: 0.2em;
  flex: none;
}

html.site-shell body.page-shell--signup #start-call {
  margin-top: 15px;
  background: var(--shell-white);
}

html.site-shell body.page-shell--signup .signup-optional {
  margin-top: 26px;
  border-block: 2px solid var(--shell-ink);
  background: var(--shell-paper-warm);
}

html.site-shell body.page-shell--signup .signup-optional summary {
  min-height: 52px;
  padding: 15px 4px;
  cursor: pointer;
  font-weight: 900;
  line-height: 1.35;
}

html.site-shell body.page-shell--signup .signup-optional summary span {
  color: var(--shell-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

html.site-shell body.page-shell--signup .signup-optional__fields {
  padding: 4px 4px 22px;
}

html.site-shell body.page-shell--signup textarea {
  display: block;
  width: 100%;
  min-height: 126px;
  box-sizing: border-box;
  padding: 12px 13px;
  border: 3px solid var(--shell-ink);
  border-radius: 0;
  background: var(--shell-white);
  color: var(--shell-ink);
  box-shadow: 5px 6px 0 var(--shell-paper-deep);
  font: inherit;
  font-size: max(1rem, 16px);
  line-height: 1.5;
  resize: vertical;
}

html.site-shell body.page-shell--signup .signup-assistance {
  margin: 34px 0 0;
  padding-top: 20px;
  border-top: 2px solid var(--shell-ink);
  color: var(--shell-muted);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.55;
}

html.site-shell body.page-shell--signup .signup-assistance a {
  color: var(--shell-ink);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-underline-offset: 4px;
}

html.site-shell body.page-shell--signup .hint a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -8px;
}

@media (max-width: 799px) {
  html.site-shell body.page-shell .page-actions {
    display: grid;
    width: min(100%, 340px);
    gap: 18px;
  }

  html.site-shell body.page-shell .page-actions .btn {
    width: 100%;
    text-align: center;
  }

  html.site-shell body.page-shell .plan-picker h2 {
    font-size: clamp(2.7rem, 12vw, 4.3rem);
  }

  html.site-shell body.page-shell .plan-picker__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  html.site-shell body.page-shell .plan-route,
  html.site-shell body.page-shell .plan-route--business {
    transform: rotate(-0.25deg);
  }

  html.site-shell body.page-shell .plan-picker::before {
    top: 57%;
    right: -18%;
    left: -18%;
    transform: rotate(5deg);
  }
}

@media (max-width: 390px) {
  html.site-shell body.page-shell .plan-route {
    padding: 30px 23px 34px;
  }

  html.site-shell body.page-shell .plan-route__price strong {
    font-size: 3.75rem;
  }

  html.site-shell body.page-shell--signup .signup-progress {
    margin-inline: -8px;
    margin-bottom: 30px;
  }

  html.site-shell body.page-shell--signup .signup-progress li {
    font-size: 0.68rem;
  }

  html.site-shell body.page-shell--signup .signup-progress span {
    width: 34px;
  }
}

html.site-shell.a11y-contrast body.page-shell .plan-route::after,
html.site-shell.a11y-contrast body.page-shell--signup .signup-optional,
html.site-shell.a11y-contrast body.page-shell--signup .signup-context,
html.site-shell.a11y-contrast body.page-shell--signup .signup-required-note {
  background: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
  html.site-shell body.page-shell .plan-route,
  html.site-shell body.page-shell .plan-route--business,
  html.site-shell body.page-shell--signup .signup-progress li[aria-current="step"] span {
    transform: none;
  }
}

/* activation actions on the signup done screen (2026-08-14) */
html.site-shell body.page-shell--signup .signup-act-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 6px;
}
html.site-shell body.page-shell--signup .signup-act-actions .cta-button,
html.site-shell body.page-shell--signup .signup-act-actions .btn {
  flex: 1 1 160px;
  text-align: center;
}

/* arrived through a personal referral link — replaces the "who referred you"
   field, so it has to read as a confirmation rather than another thing to fill */
html.site-shell body.page-shell--signup .signup-ref-ok {
  margin: 12px 0 6px;
  padding: 12px 14px;
  border: 1px solid #e6d78a;
  border-radius: 10px;
  background: #fff6c9;
  line-height: 1.55;
}

/* one-time carrier step (Cellcom ships no-answer forwarding disabled, 17.8.26) —
   must read as an instruction, not as a footnote under the code */
html.site-shell body.page-shell--signup .signup-carrier-note {
  margin: 12px 0 6px;
  padding: 12px 14px;
  border: 1px solid #e6d78a;
  border-radius: 10px;
  background: #fff6c9;
  line-height: 1.55;
}

/* ── three tiers ───────────────────────────────────────────────────────────
   The shelf split into personal / business / plus on 2026-08-19. Three cards
   need less air between them than two did, and the middle one carries the
   recommendation, so it is the one that sits forward. */

html.site-shell body.page-shell .plan-picker__grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 38px);
}

html.site-shell body.page-shell .plan-picker__grid--3 .plan-route {
  padding: clamp(24px, 2.6vw, 34px);
}

html.site-shell body.page-shell .plan-picker__grid--3 .plan-route h3 {
  font-size: clamp(1.9rem, 3vw, 2.7rem);
}

html.site-shell body.page-shell .plan-picker__grid--3 .plan-route__price strong {
  font-size: clamp(2.8rem, 4.6vw, 4.2rem);
}

/* Three hand-placed cards: the tilts must not repeat or it reads as a template. */
html.site-shell body.page-shell .plan-route--personal { transform: rotate(-0.6deg); }
html.site-shell body.page-shell .plan-route--plus { transform: rotate(0.4deg) translateY(9px); }
html.site-shell body.page-shell .plan-route--plus::after { background: #f6f3ff; }
html.site-shell body.page-shell .plan-route--plus > .kicker { background: #e9e2ff; }

/* The recommendation badge, pinned to the card it recommends. */
html.site-shell body.page-shell .plan-route__flag {
  position: absolute;
  top: -15px;
  inset-inline-end: 16px;
  z-index: 1;
  padding: 5px 12px;
  border: 2px solid var(--shell-ink);
  background: var(--shell-yellow);
  box-shadow: 3px 3px 0 var(--shell-ink);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  transform: rotate(1.6deg);
}

/* What each plan adds on top of the one before it. Stated as "everything in X,
   plus" rather than repeated in full: a customer comparing three lists of
   fourteen items compares nothing. */
html.site-shell body.page-shell .plan-route__inherits {
  margin: 20px 0 0;
  font-size: 0.88rem;
  font-weight: 750;
  color: var(--shell-muted);
}

/* ── the full comparison ───────────────────────────────────────────────────
   The cards sell; this answers "what exactly am I paying for". It scrolls
   inside itself so a narrow phone never scrolls the page sideways. */

html.site-shell body.page-shell .plan-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  margin: clamp(34px, 5vw, 58px) 0 0;
  border: 2px solid var(--shell-ink);
  background: var(--shell-white);
  box-shadow: 6px 6px 0 var(--shell-ink);
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

html.site-shell body.page-shell .plan-table-wrap:focus-visible {
  outline: 3px solid var(--shell-ink);
  outline-offset: 5px;
}

html.site-shell body.page-shell .plan-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 1rem;
}

html.site-shell body.page-shell .plan-table th,
html.site-shell body.page-shell .plan-table td {
  padding: 18px 22px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.11);
  text-align: start;
  vertical-align: middle;
}

/* Every capability says what it DOES, under its name. A buyer reading a price
   page should never have to guess what a feature label means. */
html.site-shell body.page-shell .plan-table tbody th small {
  display: block;
  max-width: 52ch;
  margin-top: 5px;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--shell-muted);
}

html.site-shell body.page-shell .plan-table thead th {
  border-bottom: 2px solid var(--shell-ink);
  background: var(--shell-paper);
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.15;
}

/* The header follows the scroll for the whole length of the table.
   Two things had to be true for this to work at all:

   1. .plan-table-wrap carries overflow-x for narrow screens, and an element
      with overflow on ONE axis is a scroll container on BOTH. A sticky header
      inside it therefore resolves against a box that never scrolls vertically,
      which is why the first attempt silently did nothing. From 900px up — where
      the table already fits — the overflow is dropped so sticky can resolve
      against the page.
   2. The masthead is itself sticky at top:0 and is 118px tall from 900px up
      (72px below it, the site's own 899px breakpoint), so the header has to
      park underneath it rather than at 0.

   Under border-collapse the border belongs to the TABLE, not the cell, so it
   stays behind while the cell travels — the inset shadow is what keeps a line
   under the header while it moves. */
@media (min-width: 900px) {
  html.site-shell body.page-shell .plan-table-wrap {
    overflow-x: visible;
  }

  html.site-shell body.page-shell .plan-table thead th {
    position: sticky;
    top: 118px;
    z-index: 3;
    border-bottom: 0;
    box-shadow: inset 0 -2px 0 var(--shell-ink);
  }

}

html.site-shell body.page-shell .plan-table thead th small {
  display: block;
  font-family: var(--font-body, inherit);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--shell-muted);
}

html.site-shell body.page-shell .plan-table tbody th {
  font-weight: 750;
}

html.site-shell body.page-shell .plan-table td {
  width: 13%;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 900;
}

html.site-shell body.page-shell .plan-table .yes { color: #1a7f3c; }
html.site-shell body.page-shell .plan-table .no { color: #b9b2a4; }

html.site-shell body.page-shell .plan-table tbody tr:nth-of-type(even of :not(.row-group)) {
  background: #fdfbf4;
}

html.site-shell body.page-shell .plan-table .row-group th {
  padding-top: 26px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--shell-ink);
  background: var(--shell-paper);
  font-family: var(--font-display);
  font-size: 1.15rem;
}

/* The plan name repeated in each group row — the column label a reader needs
   when the header has already scrolled past. Quieter than the group title so
   the eye still reads the group first. */
html.site-shell body.page-shell .plan-table .row-group th + th {
  width: 15%;
  text-align: center;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--shell-muted);
}

/* The screen-reader text behind every ✓ / — so the table is not a wall of
   symbols to anyone not looking at it. */
html.site-shell body.page-shell .plan-table .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 900px) {
  html.site-shell body.page-shell .plan-picker__grid--3 {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  html.site-shell body.page-shell .plan-route--personal,
  html.site-shell body.page-shell .plan-route--plus {
    transform: rotate(-0.25deg);
  }
}

/* The comparison table stands on its own section, not inside .plan-picker:
   that section carries overflow:clip for its decorative band, and a clipped
   ancestor is the box a sticky header pins to — inside it the header could
   never follow the page. Kept visually continuous with the picker above. */
html.site-shell body.page-shell .plan-compare {
  padding: 0 0 clamp(48px, 7vw, 90px);
  background: var(--shell-paper-deep, var(--shell-paper));
}

html.site-shell body.page-shell .plan-compare > .wrap > h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.05;
}

/* On a phone the matrix becomes one readable card per capability. The native
   table stays in the DOM, including its caption and header scopes, while the
   visual layout no longer needs a 620px-wide horizontal canvas. */
@media (max-width: 640px) {
  html.site-shell body.page-shell .plan-compare,
  html.site-shell body.page-shell .plan-compare > .wrap {
    min-width: 0;
    max-width: 100%;
  }

  html.site-shell body.page-shell .plan-compare {
    overflow-x: hidden;
    overflow-x: clip;
  }

  html.site-shell body.page-shell .plan-table-wrap {
    overflow: visible;
    margin-top: 26px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  html.site-shell body.page-shell .plan-table {
    display: block;
    width: 100%;
    min-width: 0;
    border-collapse: separate;
    font-size: 1rem;
  }

  html.site-shell body.page-shell .plan-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  html.site-shell body.page-shell .plan-table tbody {
    display: grid;
    gap: 13px;
  }

  html.site-shell body.page-shell .plan-table tbody + tbody {
    margin-top: 22px;
  }

  html.site-shell body.page-shell .plan-table tbody tr:not(.row-group) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgb(32 29 24 / 0.28);
    border-radius: 18px 6px 19px 7px;
    background: var(--shell-white);
    box-shadow: 0 8px 18px rgb(32 29 24 / 0.08);
  }

  html.site-shell body.page-shell .plan-table tbody tr:not(.row-group) > th {
    grid-column: 1 / -1;
    padding: 16px 17px 14px;
    border-bottom: 1px solid rgb(32 29 24 / 0.18);
    background: color-mix(in srgb, var(--shell-paper) 62%, white);
    line-height: 1.35;
  }

  html.site-shell body.page-shell .plan-table tbody th small {
    margin-top: 6px;
    font-size: 0.92rem;
    line-height: 1.55;
  }

  html.site-shell body.page-shell .plan-table td {
    width: auto;
    min-width: 0;
    padding: 10px 4px 12px;
    border-bottom: 0;
    text-align: center;
    font-size: 1.12rem;
    line-height: 1.2;
  }

  html.site-shell body.page-shell .plan-table td + td {
    border-inline-start: 1px solid rgb(32 29 24 / 0.14);
  }

  html.site-shell body.page-shell .plan-table td::before {
    display: block;
    margin-bottom: 5px;
    color: var(--shell-muted);
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.2;
  }

  html.site-shell body.page-shell .plan-table td:nth-child(2)::before { content: "אישי"; }
  html.site-shell body.page-shell .plan-table td:nth-child(3)::before { content: "עסק"; }
  html.site-shell body.page-shell .plan-table td:nth-child(4)::before { content: "עסקי+"; }

  html.site-shell body.page-shell .plan-table .row-group {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 0;
    background: transparent;
  }

  html.site-shell body.page-shell .plan-table .row-group th:first-child {
    display: block;
    padding: 0 0 10px;
    border-bottom: 2px solid var(--shell-ink);
    background: transparent;
    font-size: 1.3rem;
    line-height: 1.2;
  }

  html.site-shell body.page-shell .plan-table .row-group th + th {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  html.site-shell body.page-shell .plan-compare__note {
    margin-top: 24px;
  }
}

/* With the real header pinned overhead from 900px up, repeating the plan names
   in every group row is noise. Below that the header cannot pin and they are the
   only thing naming the columns, so they stay.

   Last in the file on purpose: the rule that colours them sits further up with
   identical specificity, and a media query adds none — source order is the only
   thing that decides. Colour, not visibility: hiding the cell takes its
   background with it and the group band came out half-painted. */
@media (min-width: 900px) {
  html.site-shell body.page-shell .plan-table .row-group th + th {
    color: transparent;
  }
}

/* The note under the table had been borrowing .mx-fine — a scroll-scene class
   with margin:0 and text-align:center, so it sat flush against the table's drop
   shadow and centred itself away from the column it belongs to. */
html.site-shell body.page-shell .plan-compare__note {
  max-width: 62ch;
  margin: clamp(22px, 3vw, 34px) 0 0;
  color: var(--shell-muted);
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.6;
}