/*
 * Quiet cutout polish for production inner pages.
 * This layer deliberately preserves every page's copy, structure and controls.
 */

html.site-shell {
  --polish-blue: #3156c7;
  --polish-blue-soft: rgb(49 86 199 / 0.12);
  --polish-coral: #c95a43;
  --polish-green: #2f7653;
  --polish-shadow-near: 0 30px 62px rgb(32 29 24 / 0.18);
  --polish-shadow-mid: 0 18px 38px rgb(32 29 24 / 0.13);
  --polish-shadow-low: 0 10px 22px rgb(32 29 24 / 0.09);
}

html.site-shell body.page-shell {
  background-color: var(--shell-paper);
  background-image: url("cutout/paper-fiber.webp");
  background-size: 760px auto;
}

html.site-shell body.page-shell::before {
  opacity: 0.26;
}

html.site-shell body.page-shell .masthead {
  border-bottom-color: rgb(32 29 24 / 0.36);
  box-shadow: 0 8px 28px rgb(32 29 24 / 0.08);
}

html.site-shell body.page-shell .masthead-mark {
  filter: drop-shadow(0 5px 5px rgb(32 29 24 / 0.12));
}

html.site-shell body.page-shell .site-nav {
  border-top-color: rgb(32 29 24 / 0.13);
}

html.site-shell body.page-shell :is(.masthead-cta, .btn, .cta-button) {
  box-shadow: 0 9px 18px rgb(32 29 24 / 0.1);
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

html.site-shell body.page-shell :is(.masthead-cta, .btn, .cta-button):hover {
  box-shadow: 0 14px 26px rgb(32 29 24 / 0.13);
}

/* A shallow product stage replaces the old clipped sheet feeling. */
html.site-shell body.page-shell .page-head {
  border-top: 3px solid var(--polish-blue);
}

html.site-shell body.page-shell .page-head .wrap::before {
  border: 1px solid rgb(32 29 24 / 0.2);
  border-radius: 54px 12px 58px 16px;
  background:
    radial-gradient(circle at 84% 18%, rgb(255 255 255 / 0.82), transparent 24%),
    color-mix(in srgb, var(--shell-paper) 92%, white);
  box-shadow:
    var(--polish-shadow-near),
    inset 0 3px 0 rgb(255 255 255 / 0.65),
    inset 0 -8px 18px rgb(32 29 24 / 0.045);
  clip-path: none;
}

html.site-shell body.page-shell .page-head .wrap::after {
  border-color: var(--shell-ink);
  box-shadow: 0 0 0 6px var(--shell-paper), 0 8px 18px rgb(32 29 24 / 0.14);
}

html.site-shell body.page-shell .page-head::after {
  border-color: var(--polish-blue);
  border-left-color: transparent;
  opacity: 0.92;
  filter: drop-shadow(0 9px 8px rgb(32 29 24 / 0.08));
}

html.site-shell body.page-shell .page-head h1 {
  max-width: 17ch;
  font-size: clamp(2.9rem, 6.1vw, 5.25rem);
  line-height: 0.98;
}

html.site-shell body.page-shell .page-head .lead {
  max-width: 47ch;
  color: color-mix(in srgb, var(--shell-ink) 78%, transparent);
}

html.site-shell body.page-shell--how .page-head::before {
  filter: grayscale(1) contrast(1.08) drop-shadow(0 20px 30px rgb(32 29 24 / 0.13));
  opacity: 0.9;
}

html.site-shell body.page-shell--pricing .page-head::before {
  border-width: 1px;
  box-shadow: var(--polish-shadow-mid);
  transform: rotate(-1deg) translateY(-3px);
}

html.site-shell body.page-shell--pricing .page-head .wrap > .shell-price-ticket {
  border-width: 2px;
  box-shadow: var(--polish-shadow-mid), 0 2px 0 rgb(255 255 255 / 0.55) inset;
}

html.site-shell body.page-shell--editorial .page-head {
  background:
    linear-gradient(180deg, var(--shell-paper) 2%, var(--shell-paper-deep) 58%, var(--shell-paper) 100%);
}

html.site-shell body.page-shell--editorial .page-head::before,
html.site-shell body.page-shell--product:not(.page-shell--how):not(.page-shell--pricing) .page-head::before {
  filter: drop-shadow(0 24px 22px rgb(32 29 24 / 0.13));
}

/* The reading route becomes a restrained blue product signal. */
html.site-shell body.page-shell .article-body::before {
  width: 4px;
  background: var(--polish-blue);
  box-shadow: 0 7px 14px rgb(32 29 24 / 0.12);
}

html.site-shell body.page-shell .article-body::after {
  border-width: 2px;
  box-shadow: 0 0 0 6px var(--shell-paper), 0 7px 14px rgb(32 29 24 / 0.12);
}

html.site-shell body.page-shell .article-body h2 {
  border-top: 1px solid rgb(32 29 24 / 0.23);
  font-size: clamp(1.7rem, 3.15vw, 2.45rem);
}

html.site-shell body.page-shell .article-body h2::before {
  top: -3px;
  height: 5px;
  background: var(--polish-blue);
}

html.site-shell body.page-shell .article-body h2::after {
  top: -10px;
  border-width: 2px;
  background: var(--shell-yellow);
}

html.site-shell body.page-shell .article-body :is(p, li) {
  max-width: 68ch;
}

html.site-shell body.page-shell .article-body blockquote,
html.site-shell body.page-shell .table-scroll,
html.site-shell body.page-shell .videofig {
  border-width: 1px;
  box-shadow: var(--polish-shadow-mid);
  transform: none;
}

html.site-shell body.page-shell .videofig {
  border-top: 4px solid var(--polish-blue);
}

html.site-shell body.page-shell .videofig::before {
  background: var(--polish-blue);
  box-shadow: 0 7px 12px rgb(32 29 24 / 0.12);
}

html.site-shell body.page-shell .mx-scene {
  perspective: 1400px;
  border-block-color: rgb(32 29 24 / 0.12);
  background:
    radial-gradient(ellipse at 50% 70%, rgb(32 29 24 / 0.12), transparent 48%),
    linear-gradient(180deg, var(--shell-paper) 0, var(--shell-paper-deep) 18%, var(--shell-paper-deep) 82%, var(--shell-paper) 100%);
}

html.site-shell body.page-shell .mx-stage {
  filter: drop-shadow(0 24px 22px rgb(32 29 24 / 0.14));
}

html.site-shell body.page-shell .mx-tag {
  border-width: 2px;
  box-shadow: var(--polish-shadow-low);
}

html.site-shell body.page-shell--pricing .fact-list--2 li {
  border-width: 1px;
  border-radius: 28px 8px 30px 10px;
  box-shadow: var(--polish-shadow-mid);
  transform: none;
}

html.site-shell body.page-shell--pricing .fact-list--2::before {
  height: 4px;
  background: var(--polish-blue);
}

html.site-shell body.page-shell .post-list > li {
  border-width: 1px;
  border-radius: 24px 7px 24px 9px;
  box-shadow: var(--polish-shadow-low);
  transform: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

html.site-shell body.page-shell .post-list > li:hover {
  box-shadow: var(--polish-shadow-mid);
  transform: translateY(-3px);
}

html.site-shell body.page-shell .post-list > li::before {
  border-width: 2px;
  background: var(--shell-yellow);
}

/* Closing actions keep their familiar content but gain one product-blue route. */
html.site-shell body.page-shell .endcta {
  border-width: 1px;
  border-radius: 36px 10px 38px 12px;
  box-shadow: var(--polish-shadow-near);
  transform: none;
}

html.site-shell body.page-shell .endcta::before {
  position: absolute;
  z-index: -1;
  inset: 12px -12px -12px 12px;
  border-radius: inherit;
  background: var(--shell-yellow);
  content: "";
}

html.site-shell body.page-shell .endcta::after {
  height: 4px;
  background: var(--polish-blue);
  box-shadow: 0 7px 12px rgb(32 29 24 / 0.12);
}

html.site-shell body.page-shell .endcta-tag {
  border-width: 1px;
  box-shadow: var(--polish-shadow-low);
}

html.site-shell body.page-shell--signup .signup-box::before,
html.site-shell body.page-shell--signup .signup-box::after {
  clip-path: none;
  border-radius: 44px 12px 46px 14px;
}

html.site-shell body.page-shell--signup .signup-box::before {
  background: rgb(32 29 24 / 0.22);
  box-shadow: var(--polish-shadow-near);
}

html.site-shell body.page-shell--signup .signup-box::after {
  box-shadow: inset 0 3px 0 rgb(255 255 255 / 0.7);
}

html.site-shell body.page-shell--signup .signup::before,
html.site-shell body.page-shell--app::after,
html.site-shell body.page-shell .notfound::before {
  height: 4px;
  background: var(--polish-blue);
}

html.site-shell body.page-shell--legal .page-head .wrap::before {
  box-shadow: var(--polish-shadow-low);
}

html.site-shell body.page-shell--legal .article-body::before {
  background: color-mix(in srgb, var(--polish-blue) 64%, var(--shell-paper));
}

html.site-shell body.page-shell > .wrap > .rule-double::after {
  border-width: 2px;
  box-shadow: 0 6px 12px rgb(32 29 24 / 0.1);
}

/* The voice picker keeps its compact interaction, now in the same material world. */
html.site-shell body.page-shell--voices .wrap {
  width: min(100%, 760px);
  padding-block: clamp(38px, 7vw, 72px);
}

html.site-shell body.page-shell--voices .brand {
  border-width: 1px;
  border-radius: 18px 6px 19px 7px;
  box-shadow: var(--polish-shadow-low);
}

html.site-shell body.page-shell--voices h1 {
  max-width: 11ch;
  font-size: clamp(2.75rem, 8vw, 4.6rem);
  line-height: 0.98;
}

html.site-shell body.page-shell--voices h2::after {
  height: 4px;
  border-radius: 999px;
  background: var(--polish-blue);
}

html.site-shell body.page-shell--voices .voice {
  border-width: 1px;
  border-radius: 18px 6px 19px 7px;
  box-shadow: var(--polish-shadow-low);
  transform: none;
}

html.site-shell body.page-shell--voices .voice:hover {
  box-shadow: var(--polish-shadow-mid);
  transform: translateY(-2px);
}

html.site-shell body.page-shell--voices .play {
  width: 44px;
  height: 44px;
  border-width: 2px;
  box-shadow: 0 7px 14px rgb(32 29 24 / 0.1);
}

html.site-shell body.page-shell--voices .brand {
  min-height: 44px;
}

html.site-shell body.page-shell--voices .cta {
  border: 1px solid rgb(32 29 24 / 0.28);
  border-radius: 28px 8px 30px 10px;
  box-shadow: var(--polish-shadow-mid);
}

@media (max-width: 899px) {
  html.site-shell body.page-shell .page-head .wrap::before {
    bottom: clamp(135px, 36vw, 240px);
    border-radius: 34px 9px 36px 11px;
  }

  html.site-shell body.page-shell .page-head .kicker {
    width: max-content;
    max-width: calc(100% - 40px);
  }

  html.site-shell body.page-shell .page-head h1 {
    font-size: clamp(2.45rem, 10.5vw, 3.9rem);
  }

  html.site-shell body.page-shell .endcta {
    border-radius: 27px 8px 29px 10px;
  }
}

@media (max-width: 520px) {
  html.site-shell body.page-shell .page-head {
    border-top-width: 2px;
  }

  html.site-shell body.page-shell .article-body {
    padding-inline-start: 42px;
  }

  html.site-shell body.page-shell .post-list > li {
    padding: 23px 22px 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.site-shell body.page-shell *,
  html.site-shell body.page-shell *::before,
  html.site-shell body.page-shell *::after {
    transition: none !important;
  }
}

/* Mobile is a dedicated composition, not a compressed desktop sheet. The
   contextual cutout gets its own stage below a short opening, while the full
   searchable introduction remains in the DOM and can be expanded in place. */
.mobile-copy-toggle {
  display: none;
}

@media (max-width: 640px) {
  html.site-shell body.page-shell .masthead-row {
    min-height: 64px;
    padding-block: 7px;
  }

  html.site-shell body.page-shell .masthead-brand {
    gap: 8px;
    min-width: 0;
    font-size: 1.3rem;
  }

  html.site-shell body.page-shell .masthead-cta {
    padding-inline: 13px;
    font-size: 0.86rem;
  }

  html.site-shell body.page-shell .page-head {
    padding-block: 40px 46px;
  }

  html.site-shell body.page-shell .page-head .wrap,
  html.site-shell body.page-shell--how .page-head .wrap,
  html.site-shell body.page-shell--pricing .page-head .wrap,
  html.site-shell body.page-shell--editorial .page-head .wrap {
    padding-inline: 15px;
    padding-bottom: clamp(188px, 54vw, 226px);
  }

  html.site-shell body.page-shell .page-head .wrap::before,
  html.site-shell body.page-shell--editorial .page-head .wrap::before {
    top: -20px;
    right: 14px;
    bottom: clamp(194px, 56vw, 234px);
    width: calc(100% - 28px);
    border-radius: 28px 8px 30px 10px;
  }

  html.site-shell body.page-shell .page-head .wrap::after,
  html.site-shell body.page-shell--editorial .page-head .wrap::after {
    right: 5px;
    width: 17px;
    height: 17px;
  }

  html.site-shell body.page-shell .page-head .wrap > :is(h1, .lead, .page-meta, .page-actions, .trust-line, .mobile-copy-toggle) {
    padding-inline-start: 16px;
  }

  html.site-shell body.page-shell .page-head .kicker {
    max-width: calc(100% - 24px);
    margin-bottom: 14px;
    font-size: 0.82rem;
  }

  html.site-shell body.page-shell .page-head h1,
  html.site-shell body.page-shell--how .page-head h1,
  html.site-shell body.page-shell--editorial .page-head h1 {
    max-width: 100%;
    font-size: clamp(2.05rem, 10.2vw, 2.65rem);
    line-height: 1.03;
    letter-spacing: -0.035em;
    overflow-wrap: normal;
  }

  html.site-shell body.page-shell .page-head .lead {
    max-width: 39ch;
    margin-top: 15px;
    font-size: 1rem;
    line-height: 1.52;
  }

  html.site-shell body.page-shell.mobile-copy-ready .page-head .lead:not(.is-expanded) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  html.site-shell body.page-shell .mobile-copy-toggle {
    min-width: 88px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    margin: 2px 0 0;
    padding-block: 8px;
    border: 0;
    background: transparent;
    color: var(--shell-ink);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: var(--polish-blue);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    cursor: pointer;
  }

  html.site-shell body.page-shell .page-actions {
    width: calc(100% - 16px);
    gap: 14px;
    margin-top: 20px;
  }

  html.site-shell body.page-shell .page-actions .btn {
    min-height: 48px;
    padding: 11px 18px;
  }

  html.site-shell body.page-shell .trust-line {
    margin-top: 18px;
    font-size: 0.8rem;
    line-height: 1.45;
  }

  html.site-shell body.page-shell .page-meta {
    margin-top: 14px;
    padding-block: 5px;
    font-size: 0.75rem;
    line-height: 1.45;
  }

  html.site-shell body.page-shell[data-visual] .page-head::before,
  html.site-shell body.page-shell--legal[data-visual] .page-head::before {
    right: 0;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: clamp(178px, 48vw, 215px);
    background-position: center bottom;
    background-size: min(78vw, 300px) auto;
    filter: drop-shadow(0 18px 18px rgb(32 29 24 / 0.14));
  }

  html.site-shell body.page-shell .page-head::after {
    left: -22%;
    bottom: -34px;
    width: 170px;
    height: 148px;
    opacity: 0.7;
  }

  html.site-shell body.page-shell .article {
    padding-block: 48px 62px;
  }

  html.site-shell body.page-shell .article-body {
    padding-inline-start: 29px;
  }

  html.site-shell body.page-shell .article-body::before {
    inset-inline-start: 5px;
    width: 3px;
  }

  html.site-shell body.page-shell .article-body::after {
    inset-inline-start: -3px;
    width: 18px;
    height: 18px;
  }

  html.site-shell body.page-shell .article-body h2 {
    margin-top: 2.35em;
    font-size: 1.55rem;
    line-height: 1.12;
  }

  html.site-shell body.page-shell .article-body h2::before {
    right: -24px;
    width: 24px;
  }

  html.site-shell body.page-shell .article-body h2::after {
    right: -33px;
    width: 13px;
    height: 13px;
  }

  html.site-shell body.page-shell .article-body :is(p, li) {
    font-size: 1rem;
    line-height: 1.62;
  }

  html.site-shell body.page-shell .article-body blockquote {
    margin-inline: 0;
    padding: 1.15em 1.15em 1em;
  }

  html.site-shell body.page-shell .table-scroll {
    margin-inline: 0;
    padding: 7px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--polish-blue) var(--shell-paper-deep);
    -webkit-overflow-scrolling: touch;
  }

  html.site-shell body.page-shell .endcta {
    margin-top: 58px;
    margin-inline-start: 0;
    padding: 27px 22px 24px 28px;
  }

  html.site-shell body.page-shell .plan-picker {
    padding-block: 58px 66px;
  }

  html.site-shell body.page-shell .plan-picker h2 {
    max-width: 11ch;
    margin-bottom: 34px;
    font-size: clamp(2.25rem, 10.5vw, 2.85rem);
    line-height: 1;
    letter-spacing: -0.035em;
  }

  html.site-shell body.page-shell .plan-picker__grid {
    gap: 34px;
  }

  html.site-shell body.page-shell .plan-route {
    max-width: 100%;
    padding: 27px 21px 31px;
    transform: none;
  }

  html.site-shell body.page-shell .plan-route h3 {
    font-size: 2rem;
  }

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

  html.site-shell body.page-shell .plan-route .btn::before {
    inset-inline: -8px;
  }

  html.site-shell body.page-shell--signup .signup {
    min-height: auto;
    align-items: start;
    padding-block: 42px 58px;
  }

  html.site-shell body.page-shell--signup .signup-box {
    padding: 29px 21px 34px;
  }

  html.site-shell body.page-shell--signup .signup-box h2.xl {
    max-width: 100%;
    font-size: clamp(2.25rem, 10.8vw, 2.8rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
  }

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

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

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

  html.site-shell body.page-shell--signup :is(input[type="tel"], input[type="text"], input[type="email"], select, textarea) {
    width: 100%;
    max-width: 100%;
    font-size: 16px;
  }

  html.site-shell body.page-shell--voices[data-visual="voice-selection-console"] .wrap {
    min-height: 0;
    padding: 22px max(17px, env(safe-area-inset-right)) 52px max(17px, env(safe-area-inset-left));
  }

  html.site-shell body.page-shell--voices[data-visual="voice-selection-console"] .wrap::before {
    position: absolute;
    top: 18px;
    left: 14px;
    width: 158px;
    height: 128px;
    float: none;
    margin: 0;
    background-position: center;
  }

  html.site-shell body.page-shell--voices .brand {
    position: relative;
    z-index: 1;
    margin-bottom: 102px;
  }

  html.site-shell body.page-shell--voices h1 {
    clear: both;
    max-width: 100%;
    margin-bottom: 12px;
    font-size: clamp(2.25rem, 10.7vw, 2.75rem);
    line-height: 1.01;
    letter-spacing: -0.03em;
  }

  html.site-shell body.page-shell--voices .lead {
    margin-bottom: 28px;
    font-size: 1rem;
    line-height: 1.52;
  }

  html.site-shell body.page-shell--voices h2 {
    margin-top: 28px;
  }

  html.site-shell body.page-shell--voices .voice {
    min-height: 68px;
    padding: 10px 12px;
  }

  html.site-shell.a11y-large-text body.page-shell .mobile-copy-toggle {
    display: none;
  }

  html.site-shell.a11y-large-text body.page-shell.mobile-copy-ready .page-head .lead:not(.is-expanded) {
    display: block;
    overflow: visible;
  }

  html.site-shell body.page-shell--pricing .page-head::before {
    position: absolute;
    z-index: -2;
    right: 0;
    bottom: 4px;
    left: 0;
    width: 100%;
    height: clamp(185px, 51vw, 225px);
    display: block;
    border: 0;
    background: url("scene/pricing-machine-680.webp") center bottom / min(72vw, 278px) auto no-repeat;
    box-shadow: none;
    clip-path: none;
    content: "";
    filter: drop-shadow(0 18px 18px rgb(32 29 24 / 0.15));
    opacity: 1;
    transform: none;
  }
}

/* One action silhouette across every public surface. This reuses the same
   hand-drawn loop as the approved homepage CTA instead of approximating it
   with a different rounded border on each page. */
html.site-shell body.page-shell :is(.masthead-cta, .btn, .cta-button),
html.site-shell body.page-shell--app button {
  position: relative;
  z-index: 0;
  min-height: 44px;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  color: var(--shell-ink);
  background: var(--shell-yellow);
  box-shadow: none;
  isolation: isolate;
  overflow: visible;
  transition: transform 140ms ease, background-color 140ms ease;
}

html.site-shell body.page-shell :is(.masthead-cta, .btn, .cta-button)::before,
html.site-shell body.page-shell--app button::before {
  position: absolute;
  z-index: -1;
  inset: -6px -16px;
  border: 0;
  border-radius: 0;
  background: url("/assets/brand/action-loop.svg") center / 100% 100% no-repeat;
  content: "";
  pointer-events: none;
  transform: none;
}

html.site-shell body.page-shell :is(.masthead-cta, .btn, .cta-button)::after,
html.site-shell body.page-shell--app button::after {
  content: none;
}

html.site-shell body.page-shell :is(.masthead-cta, .btn, .cta-button):hover,
html.site-shell body.page-shell--app button:hover {
  color: var(--shell-ink);
  background: var(--shell-white);
  transform: translateY(-2px);
}

html.site-shell body.page-shell :is(.masthead-cta, .btn, .cta-button):active,
html.site-shell body.page-shell--app button:active {
  transform: translateY(0);
}

html.site-shell body.page-shell :is(.masthead-cta, .btn, .cta-button):disabled,
html.site-shell body.page-shell--app button:disabled {
  opacity: 0.58;
  transform: none;
}

@media (max-width: 520px) {
  html.site-shell body.page-shell :is(.masthead-cta, .btn, .cta-button)::before,
  html.site-shell body.page-shell--app button::before {
    inset-inline: -12px;
  }
}

/* Unique page objects -----------------------------------------------------
   Every inner page owns a different cutout. The adjacent live heading keeps
   the meaning accessible and indexable; the raster remains decorative. */
html.site-shell body.page-shell[data-visual] {
  --page-cutout: none;
  --page-object-width: min(39vw, 470px);
  --page-object-height: 79%;
  --page-object-top: 9%;
  --page-object-left: 3%;
  --page-object-position: center;
  --page-object-size: contain;
}

html.site-shell body.page-shell[data-visual="404-lost-connection"] { --page-cutout: url("cutout/pages/unique/404-lost-connection.webp"); }
html.site-shell body.page-shell[data-visual="accessibility-tactile-console"] { --page-cutout: url("cutout/pages/unique/accessibility-tactile-console.webp"); }
html.site-shell body.page-shell[data-visual="ai-answering-cost-meter"] { --page-cutout: url("cutout/pages/unique/ai-answering-cost-meter.webp"); }
html.site-shell body.page-shell[data-visual="ai-hebrew-answering-machine"] { --page-cutout: url("cutout/pages/unique/ai-hebrew-answering-machine.webp"); }
html.site-shell body.page-shell[data-visual="app-settings-console"] { --page-cutout: url("cutout/pages/unique/app-settings-console.webp"); }
html.site-shell body.page-shell[data-visual="blog-call-library"] { --page-cutout: url("cutout/pages/unique/blog-call-library.webp"); }
html.site-shell body.page-shell[data-visual="business-multi-line-desk"] { --page-cutout: url("cutout/pages/unique/business-multi-line-desk.webp"); }
html.site-shell body.page-shell[data-visual="call-forwarding-route"] { --page-cutout: url("cutout/pages/unique/call-forwarding-route.webp"); }
html.site-shell body.page-shell[data-visual="caller-id-lens"] { --page-cutout: url("cutout/pages/unique/caller-id-lens.webp"); }
html.site-shell body.page-shell[data-visual="english-hebrew-bridge"] { --page-cutout: url("cutout/pages/unique/english-hebrew-bridge.webp"); }
html.site-shell body.page-shell[data-visual="faq-flip-index"] { --page-cutout: url("cutout/pages/unique/faq-flip-index.webp"); }
html.site-shell body.page-shell[data-visual="friends-mutual-credit"] { --page-cutout: url("cutout/pages/unique/friends-mutual-credit.webp"); }
html.site-shell body.page-shell[data-visual="hidden-number-question-dock"] { --page-cutout: url("cutout/pages/unique/hidden-number-question-dock.webp"); }
html.site-shell body.page-shell[data-visual="kosher-phone-direct-line"] { --page-cutout: url("cutout/pages/unique/kosher-phone-direct-line.webp"); }
html.site-shell body.page-shell[data-visual="marketing-call-filter"] { --page-cutout: url("cutout/pages/unique/marketing-call-filter.webp"); }
html.site-shell body.page-shell[data-visual="missed-call-solution-wheel"] { --page-cutout: url("cutout/pages/unique/missed-call-solution-wheel.webp"); }
html.site-shell body.page-shell[data-visual="mmi-route-repair"] { --page-cutout: url("cutout/pages/unique/mmi-route-repair.webp"); }
html.site-shell body.page-shell[data-visual="payment-success-receipt"] { --page-cutout: url("cutout/pages/unique/payment-success-receipt.webp"); }
html.site-shell body.page-shell[data-visual="privacy-call-lockbox"] { --page-cutout: url("cutout/pages/unique/privacy-call-lockbox.webp"); }
html.site-shell body.page-shell[data-visual="signup-activation-dock"] { --page-cutout: url("cutout/pages/unique/signup-activation-dock.webp"); }
html.site-shell body.page-shell[data-visual="spam-law-seal"] { --page-cutout: url("cutout/pages/unique/spam-law-seal.webp"); }
html.site-shell body.page-shell[data-visual="terms-contract-clip"] { --page-cutout: url("cutout/pages/unique/terms-contract-clip.webp"); }
html.site-shell body.page-shell[data-visual="trust-glass-vault"] { --page-cutout: url("cutout/pages/unique/trust-glass-vault.webp"); }
html.site-shell body.page-shell[data-visual="unknown-call-relay"] { --page-cutout: url("cutout/pages/unique/unknown-call-relay.webp"); }
html.site-shell body.page-shell[data-visual="unknown-number-frosted-lens"] { --page-cutout: url("cutout/pages/unique/unknown-number-frosted-lens.webp"); }
html.site-shell body.page-shell[data-visual="voice-selection-console"] { --page-cutout: url("cutout/pages/unique/voice-selection-console.webp"); }
html.site-shell body.page-shell[data-visual="voicemail-guide-recorder"] { --page-cutout: url("cutout/pages/unique/voicemail-guide-recorder.webp"); }
html.site-shell body.page-shell[data-visual="voicemail-replacement"] { --page-cutout: url("cutout/pages/unique/voicemail-replacement.webp"); }
html.site-shell body.page-shell[data-visual="who-called-tracer"] { --page-cutout: url("cutout/pages/unique/who-called-tracer.webp"); }

html.site-shell body.page-shell[data-visual] .page-head::before {
  z-index: -2;
  top: var(--page-object-top);
  right: auto;
  bottom: auto;
  left: var(--page-object-left);
  width: var(--page-object-width);
  height: var(--page-object-height);
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--page-cutout);
  background-position: var(--page-object-position);
  background-repeat: no-repeat;
  background-size: var(--page-object-size);
  box-shadow: none;
  clip-path: none;
  filter: drop-shadow(0 25px 24px rgb(32 29 24 / 0.17));
  opacity: 1;
  transform: none;
  animation: cutout-develop 680ms ease-out 90ms both;
}

html.site-shell body.page-shell:is(
  [data-visual="business-multi-line-desk"],
  [data-visual="call-forwarding-route"],
  [data-visual="english-hebrew-bridge"],
  [data-visual="friends-mutual-credit"],
  [data-visual="marketing-call-filter"],
  [data-visual="missed-call-solution-wheel"],
  [data-visual="mmi-route-repair"],
  [data-visual="terms-contract-clip"],
  [data-visual="unknown-call-relay"],
  [data-visual="voicemail-guide-recorder"],
  [data-visual="voicemail-replacement"]
) {
  --page-object-width: min(44vw, 540px);
}

html.site-shell body.page-shell:is(
  [data-visual="accessibility-tactile-console"],
  [data-visual="blog-call-library"],
  [data-visual="kosher-phone-direct-line"],
  [data-visual="privacy-call-lockbox"],
  [data-visual="trust-glass-vault"],
  [data-visual="unknown-number-frosted-lens"]
) {
  --page-object-width: min(31vw, 370px);
  --page-object-left: 6%;
  --page-object-size: auto 95%;
}

html.site-shell body.page-shell--legal[data-visual] {
  --page-object-top: 14%;
  --page-object-left: 6%;
  --page-object-width: min(29vw, 340px);
  --page-object-height: 70%;
  --page-object-size: contain;
}

/* Standalone surfaces place their unique object inside the existing layout,
   without introducing another card or raster rectangle. */
html.site-shell body.page-shell--utility[data-visual="404-lost-connection"] .notfound::after,
html.site-shell body.page-shell--transaction[data-visual="payment-success-receipt"] .notfound::after {
  position: absolute;
  z-index: 0;
  left: clamp(12px, 3vw, 48px);
  bottom: 5%;
  width: min(31vw, 380px);
  height: 72%;
  background-image: var(--page-cutout);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  pointer-events: none;
  filter: drop-shadow(0 23px 22px rgb(32 29 24 / 0.16));
  animation: cutout-develop 680ms ease-out 120ms both;
}

html.site-shell body.page-shell--transaction[data-visual="payment-success-receipt"] .notfound::after {
  width: min(28vw, 330px);
}

html.site-shell body.page-shell .notfound .wrap {
  z-index: 1;
}

html.site-shell body.page-shell--signup[data-visual="signup-activation-dock"] .signup::after {
  position: absolute;
  z-index: 0;
  left: clamp(8px, 4vw, 64px);
  bottom: 5%;
  width: min(28vw, 340px);
  height: 60%;
  background-image: var(--page-cutout);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  pointer-events: none;
  filter: drop-shadow(0 22px 22px rgb(32 29 24 / 0.15));
  animation: cutout-develop 680ms ease-out 120ms both;
}

html.site-shell body.page-shell--signup .signup > .wrap {
  position: relative;
  z-index: 1;
}

html.site-shell body.page-shell--app[data-visual="app-settings-console"] main::before {
  width: min(64%, 300px);
  height: clamp(150px, 27vw, 220px);
  display: block;
  margin: 0 auto -24px;
  background: var(--page-cutout) center / contain no-repeat;
  content: "";
  pointer-events: none;
  filter: drop-shadow(0 20px 19px rgb(32 29 24 / 0.14));
  animation: cutout-develop 680ms ease-out 90ms both;
}

html.site-shell body.page-shell--voices[data-visual="voice-selection-console"] .wrap {
  position: relative;
}

html.site-shell body.page-shell--voices[data-visual="voice-selection-console"] .wrap::before {
  width: min(48%, 320px);
  height: 225px;
  float: left;
  margin: 4px 0 18px 18px;
  background: var(--page-cutout) center / contain no-repeat;
  content: "";
  pointer-events: none;
  filter: drop-shadow(0 21px 20px rgb(32 29 24 / 0.15));
  animation: cutout-develop 680ms ease-out 90ms both;
}

html.site-shell body.page-shell--voices[data-visual="voice-selection-console"] h2 {
  clear: both;
}

@keyframes cutout-develop {
  from { opacity: 0.01; }
  to { opacity: 1; }
}

@media (max-width: 899px) {
  html.site-shell body.page-shell[data-visual] .page-head::before,
  html.site-shell body.page-shell--legal[data-visual] .page-head::before {
    top: auto;
    right: 0;
    bottom: 8px;
    left: 0;
    width: 100%;
    height: clamp(205px, 52vw, 330px);
    background-position: center;
    background-size: contain;
    transform: none;
  }

  html.site-shell body.page-shell--signup[data-visual="signup-activation-dock"] .signup::after {
    left: -22px;
    bottom: 1%;
    width: 190px;
    height: 210px;
    opacity: 0.54;
  }

  html.site-shell body.page-shell--utility[data-visual="404-lost-connection"] .notfound::after,
  html.site-shell body.page-shell--transaction[data-visual="payment-success-receipt"] .notfound::after {
    left: -22px;
    bottom: 0;
    width: 185px;
    height: 220px;
    opacity: 0.5;
  }
}

@media (max-width: 560px) {
  html.site-shell body.page-shell--voices[data-visual="voice-selection-console"] .wrap::before {
    width: 176px;
    height: 142px;
    margin: 0 0 10px 8px;
  }

  html.site-shell body.page-shell--app[data-visual="app-settings-console"] main::before {
    height: 148px;
    margin-bottom: -14px;
  }
}

html.site-shell.a11y-large-text body.page-shell--utility[data-visual] .notfound::after,
html.site-shell.a11y-large-text body.page-shell--transaction[data-visual] .notfound::after,
html.site-shell.a11y-large-text body.page-shell--signup[data-visual] .signup::after,
html.site-shell.a11y-large-text body.page-shell--app[data-visual] main::before,
html.site-shell.a11y-large-text body.page-shell--voices[data-visual] .wrap::before {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  html.site-shell body.page-shell[data-visual] .page-head::before,
  html.site-shell body.page-shell[data-visual] .notfound::after,
  html.site-shell body.page-shell[data-visual] .signup::after,
  html.site-shell body.page-shell[data-visual] main::before,
  html.site-shell body.page-shell[data-visual] .wrap::before {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Mobile composition v15: inner pages keep the desktop material language,
   while the phone layout prioritizes reading, decisions and thumb reach. */
@media (max-width: 820px) {
  html.site-shell body.page-shell .masthead-row {
    min-height: 60px;
    padding-block: 6px;
  }

  html.site-shell body.page-shell .masthead-brand {
    gap: 7px;
    font-size: 1.2rem;
  }

  html.site-shell body.page-shell .masthead-mark {
    width: 30px;
    height: 30px;
  }

  html.site-shell body.page-shell .masthead-cta {
    min-height: 44px;
    padding-inline: 11px;
    font-size: 0.82rem;
  }

  html.site-shell body.page-shell .page-head {
    min-height: 0;
    padding-block: 28px 30px;
  }

  html.site-shell body.page-shell .page-head .wrap,
  html.site-shell body.page-shell--how .page-head .wrap,
  html.site-shell body.page-shell--pricing .page-head .wrap,
  html.site-shell body.page-shell--editorial .page-head .wrap,
  html.site-shell body.page-shell--product:not(.page-shell--how):not(.page-shell--pricing) .page-head .wrap,
  html.site-shell body.page-shell--legal .page-head .wrap {
    min-height: 0;
    padding: 0 19px 132px;
  }

  html.site-shell body.page-shell .page-head .wrap::before,
  html.site-shell body.page-shell--editorial .page-head .wrap::before {
    top: -10px;
    right: 12px;
    bottom: 108px;
    width: calc(100% - 24px);
    border-radius: 24px 8px 25px 9px;
    box-shadow:
      0 16px 34px rgb(32 29 24 / 0.11),
      inset 0 2px 0 rgb(255 255 255 / 0.62);
  }

  html.site-shell body.page-shell .page-head .wrap::after,
  html.site-shell body.page-shell--editorial .page-head .wrap::after {
    right: 8px;
    width: 14px;
    height: 14px;
    box-shadow: 0 0 0 4px var(--shell-paper);
  }

  html.site-shell body.page-shell .page-head .wrap > :is(h1, .lead, .page-meta, .page-actions, .trust-line, .mobile-copy-toggle) {
    width: 100%;
    padding-inline-start: 10px;
    padding-inline-end: 10px;
  }

  html.site-shell body.page-shell .page-head .kicker {
    max-width: calc(100% - 20px);
    margin: 0 10px 10px;
    padding: 5px 10px;
    font-size: 0.74rem;
  }

  html.site-shell body.page-shell .page-head h1,
  html.site-shell body.page-shell--how .page-head h1,
  html.site-shell body.page-shell--editorial .page-head h1 {
    max-width: 100%;
    font-size: clamp(1.95rem, 8.8vw, 2.35rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
  }

  html.site-shell body.page-shell .page-head .lead {
    max-width: 40ch;
    margin-top: 11px;
    font-size: 0.95rem;
    line-height: 1.5;
  }

  html.site-shell body.page-shell.mobile-copy-ready .page-head .lead:not(.is-expanded) {
    -webkit-line-clamp: 3;
  }

  html.site-shell body.page-shell .mobile-copy-toggle {
    min-width: 88px;
    min-height: 44px;
    margin-top: 0;
    padding-block: 8px;
    font-size: 0.82rem;
  }

  html.site-shell body.page-shell .page-actions {
    width: 100%;
    gap: 10px;
    margin-top: 14px;
  }

  html.site-shell body.page-shell .page-actions .btn {
    min-height: 46px;
    padding: 10px 15px;
    font-size: 0.9rem;
  }

  html.site-shell body.page-shell .trust-line,
  html.site-shell body.page-shell .page-meta {
    margin-top: 10px;
    font-size: 0.75rem;
    line-height: 1.45;
  }

  html.site-shell body.page-shell[data-visual] .page-head::before,
  html.site-shell body.page-shell--legal[data-visual] .page-head::before,
  html.site-shell body.page-shell--pricing .page-head::before {
    top: auto;
    right: 0;
    bottom: 3px;
    left: 0;
    width: 100%;
    height: 122px;
    background-position: center bottom;
    background-size: min(48vw, 188px) auto;
    filter: drop-shadow(0 12px 14px rgb(32 29 24 / 0.12));
  }

  html.site-shell body.page-shell--pricing .page-head::before {
    background: url("scene/pricing-machine-680.webp") center bottom / min(50vw, 196px) auto no-repeat;
  }

  html.site-shell body.page-shell--pricing .page-head .wrap > .shell-price-ticket {
    bottom: 8px;
    left: 24%;
    width: 52%;
    padding: 8px 12px;
  }

  html.site-shell body.page-shell--pricing .page-head .shell-price-ticket strong {
    font-size: 2.55rem;
  }

  html.site-shell body.page-shell .page-head::after {
    display: none;
  }

  html.site-shell body.page-shell .article {
    padding-block: 36px 48px;
  }

  html.site-shell body.page-shell .article > .wrap {
    padding-inline: 20px;
  }

  html.site-shell body.page-shell .article-body {
    padding-inline-start: 0;
  }

  html.site-shell body.page-shell .article-body::before,
  html.site-shell body.page-shell .article-body::after,
  html.site-shell body.page-shell .article-body h2::before,
  html.site-shell body.page-shell .article-body h2::after {
    display: none;
  }

  html.site-shell body.page-shell .article-body h2 {
    margin-top: 2.05em;
    padding-top: 20px;
    border-top: 1px solid rgb(32 29 24 / 0.2);
    font-size: 1.48rem;
    line-height: 1.14;
  }

  html.site-shell body.page-shell .article-body > h2:first-child {
    margin-top: 0;
  }

  html.site-shell body.page-shell .article-body h3 {
    margin-top: 1.7em;
    font-size: 1.16rem;
    line-height: 1.25;
  }

  html.site-shell body.page-shell .article-body :is(p, li) {
    font-size: 0.98rem;
    line-height: 1.62;
  }

  html.site-shell body.page-shell .article-body blockquote {
    padding: 17px 18px 15px;
    border-radius: 16px 6px 17px 7px;
    box-shadow: 0 10px 22px rgb(32 29 24 / 0.08);
  }

  html.site-shell body.page-shell .videofig {
    margin-inline: 0;
    padding: 7px;
    border-radius: 16px 6px 17px 7px;
    box-shadow: 0 12px 24px rgb(32 29 24 / 0.1);
  }

  html.site-shell body.page-shell .videofig figcaption {
    padding: 10px 6px 5px;
    font-size: 0.82rem;
    line-height: 1.5;
  }

  html.site-shell body.page-shell .table-scroll {
    margin-inline: 0;
    padding: 5px;
    border-radius: 14px 5px 15px 6px;
  }

  html.site-shell body.page-shell--pricing .fact-list--2 {
    gap: 12px;
  }

  html.site-shell body.page-shell--pricing .fact-list--2 li {
    padding: 19px 18px;
    border-radius: 18px 7px 19px 8px;
    box-shadow: 0 10px 22px rgb(32 29 24 / 0.08);
  }

  html.site-shell body.page-shell .post-list > li {
    padding: 20px 18px 18px;
    border-radius: 18px 7px 19px 8px;
    box-shadow: 0 8px 18px rgb(32 29 24 / 0.07);
  }

  html.site-shell body.page-shell .post-list h2 {
    font-size: 1.35rem;
  }

  html.site-shell body.page-shell .endcta {
    margin-top: 40px;
    margin-inline-start: 0;
    padding: 23px 20px 21px;
    border-radius: 22px 8px 23px 9px;
    box-shadow: 0 16px 32px rgb(32 29 24 / 0.11);
  }

  html.site-shell body.page-shell .endcta::before {
    inset: 8px -8px -8px 8px;
  }

  html.site-shell body.page-shell .endcta p {
    font-size: 1.15rem;
    line-height: 1.35;
  }

  html.site-shell body.page-shell .endcta .btn {
    width: 100%;
    min-height: 48px;
    margin-top: 13px;
  }

  html.site-shell body.page-shell .plan-picker {
    padding-block: 42px 50px;
  }

  html.site-shell body.page-shell .plan-picker h2 {
    max-width: 100%;
    margin-bottom: 24px;
    font-size: clamp(1.95rem, 8.8vw, 2.35rem);
    line-height: 1.04;
  }

  html.site-shell body.page-shell .plan-picker__grid {
    gap: 18px;
  }

  html.site-shell body.page-shell .plan-route {
    padding: 22px 18px 24px;
    border-radius: 22px 8px 23px 9px;
  }

  html.site-shell body.page-shell .plan-route h3 {
    font-size: 1.65rem;
  }

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

  html.site-shell body.page-shell--signup .signup {
    min-height: 0;
    padding-block: 24px 42px;
  }

  html.site-shell body.page-shell--signup .signup > .wrap {
    padding-inline: 16px;
  }

  html.site-shell body.page-shell--signup .signup::after {
    display: none;
  }

  html.site-shell body.page-shell--signup .signup-box {
    padding: 23px 18px 27px;
  }

  html.site-shell body.page-shell--signup .signup-box::before,
  html.site-shell body.page-shell--signup .signup-box::after {
    border-radius: 24px 8px 25px 9px;
  }

  html.site-shell body.page-shell--signup .signup-box::before {
    inset: -2px;
  }

  html.site-shell body.page-shell--signup .signup-box h2.xl {
    margin-bottom: 12px;
    font-size: clamp(1.95rem, 9vw, 2.35rem);
    line-height: 1.04;
  }

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

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

  html.site-shell body.page-shell--signup :is(input[type="tel"], input[type="text"], input[type="email"], select, textarea) {
    min-height: 48px;
    border-width: 2px;
    box-shadow: 3px 4px 0 var(--shell-paper-deep);
  }

  html.site-shell body.page-shell :is(.masthead-cta, .btn, .cta-button),
  html.site-shell body.page-shell--app button {
    max-width: 100%;
    min-height: 46px;
    padding: 10px 17px;
    font-size: 0.94rem;
  }

  html.site-shell body.page-shell :is(.masthead-cta, .btn, .cta-button)::before,
  html.site-shell body.page-shell--app button::before {
    inset: -5px -9px;
  }

  html.site-shell body.page-shell--voices[data-visual="voice-selection-console"] .wrap {
    padding: 18px max(18px, env(safe-area-inset-right)) 44px max(18px, env(safe-area-inset-left));
  }

  html.site-shell body.page-shell--voices[data-visual="voice-selection-console"] .wrap::before {
    top: 16px;
    left: 14px;
    width: 122px;
    height: 96px;
  }

  html.site-shell body.page-shell--voices .brand {
    margin-bottom: 72px;
  }

  html.site-shell body.page-shell--voices h1 {
    font-size: clamp(1.95rem, 9vw, 2.35rem);
  }

  html.site-shell body.page-shell--voices .voice {
    min-height: 64px;
    padding: 9px 11px;
  }

  #a11y-btn {
    bottom: max(14px, env(safe-area-inset-bottom));
    left: max(14px, env(safe-area-inset-left));
  }
}

@media (max-width: 360px) {
  html.site-shell body.page-shell .page-head .wrap,
  html.site-shell body.page-shell--how .page-head .wrap,
  html.site-shell body.page-shell--pricing .page-head .wrap,
  html.site-shell body.page-shell--editorial .page-head .wrap {
    padding-inline: 16px;
  }

  html.site-shell body.page-shell .page-head h1,
  html.site-shell body.page-shell--how .page-head h1,
  html.site-shell body.page-shell--editorial .page-head h1 {
    font-size: clamp(1.82rem, 8.8vw, 2.1rem);
  }

  html.site-shell body.page-shell .page-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  html.site-shell.a11y-large-text body.page-shell .page-head {
    padding-block: 30px 40px;
  }

  html.site-shell.a11y-large-text body.page-shell .page-head .wrap,
  html.site-shell.a11y-large-text body.page-shell--how .page-head .wrap,
  html.site-shell.a11y-large-text body.page-shell--pricing .page-head .wrap,
  html.site-shell.a11y-large-text body.page-shell--editorial .page-head .wrap {
    padding-bottom: 24px;
  }

  html.site-shell.a11y-large-text body.page-shell .page-head::before,
  html.site-shell.a11y-large-text body.page-shell .page-head::after {
    display: none;
  }

  html.site-shell.a11y-large-text body.page-shell .page-head h1 {
    font-size: clamp(1.6rem, 8.5vw, 2.15rem);
    line-height: 1.1;
  }

  html.site-shell.a11y-large-text body.page-shell .page-head .lead {
    display: block;
    overflow: visible;
    font-size: 1rem;
  }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  html.site-shell body.page-shell .page-head::before,
  html.site-shell body.page-shell .page-head .wrap::before,
  html.site-shell body.page-shell .post-list > li,
  html.site-shell body.page-shell .endcta,
  html.site-shell body.page-shell .plan-route,
  html.site-shell body.page-shell--signup .signup-box {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Mobile fidelity v17: preserve the desktop material language, adjust rhythm only. */
@media (max-width: 820px) {
  html.site-shell body.page-shell .page-head {
    padding-block: 34px 38px;
  }

  html.site-shell body.page-shell.mobile-copy-ready .page-head .lead:not(.is-expanded) {
    -webkit-line-clamp: 2;
  }

  html.site-shell body.page-shell .page-actions {
    gap: 12px;
    margin-top: 18px;
  }

  html.site-shell body.page-shell .article {
    padding-block: 44px 58px;
  }

  html.site-shell body.page-shell .article-body h2 {
    margin-top: 2.25em;
  }

  html.site-shell body.page-shell .post-list {
    gap: 18px;
  }

  html.site-shell body.page-shell .plan-picker__grid {
    gap: 22px;
  }

  html.site-shell body.page-shell--signup .signup {
    padding-block: 30px 50px;
  }
}

/* Mobile readable scale v18: retain the approved paper-and-machine design,
   but remove the obsolete "fit every scene in one pinned screen" type compression. */
@media (max-width: 820px) {
  html.site-shell body.page-shell .masthead-cta,
  html.site-shell body.page-shell :is(.btn, .cta-button) {
    font-size: 1rem;
  }

  html.site-shell body.page-shell .page-head .wrap,
  html.site-shell body.page-shell--how .page-head .wrap,
  html.site-shell body.page-shell--pricing .page-head .wrap,
  html.site-shell body.page-shell--editorial .page-head .wrap,
  html.site-shell body.page-shell--product:not(.page-shell--how):not(.page-shell--pricing) .page-head .wrap,
  html.site-shell body.page-shell--legal .page-head .wrap {
    padding-bottom: 150px;
  }

  html.site-shell body.page-shell .page-head .kicker {
    font-size: 0.85rem;
    line-height: 1.35;
  }

  html.site-shell body.page-shell .page-head .lead {
    font-size: 1.05rem;
    line-height: 1.62;
  }

  html.site-shell body.page-shell .mobile-copy-toggle {
    font-size: 1rem;
  }

  html.site-shell body.page-shell .page-actions .btn {
    font-size: 1rem;
  }

  html.site-shell body.page-shell .trust-line,
  html.site-shell body.page-shell .page-meta {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  html.site-shell body.page-shell[data-visual] .page-head::before,
  html.site-shell body.page-shell--legal[data-visual] .page-head::before,
  html.site-shell body.page-shell--pricing .page-head::before {
    height: 140px;
    background-size: min(58vw, 224px) auto;
  }

  html.site-shell body.page-shell--pricing .page-head::before {
    background-size: min(59vw, 228px) auto;
  }

  html.site-shell body.page-shell .article-body :is(p, li) {
    font-size: 1.0625rem;
    line-height: 1.68;
  }

  html.site-shell body.page-shell .article-body :is(cite, cite a) {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  html.site-shell body.page-shell .videofig figcaption,
  html.site-shell body.page-shell .video-transcript :is(summary, p),
  html.site-shell body.page-shell .table-scroll caption {
    font-size: 1rem;
    line-height: 1.58;
  }

  html.site-shell body.page-shell .table-scroll th {
    font-size: 1rem;
    line-height: 1.45;
  }

  html.site-shell body.page-shell .table-scroll td {
    font-size: 1rem;
    line-height: 1.55;
  }

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

  html.site-shell body.page-shell .plan-route__features {
    font-size: 1.03rem;
    line-height: 1.55;
  }

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

  html.site-shell body.page-shell--signup .signup-progress li {
    gap: 8px;
    font-size: 0.85rem;
    line-height: 1.35;
  }

  html.site-shell body.page-shell--signup .signup-progress span {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  html.site-shell body.page-shell--signup :is(.hint, .signup-context, .signup-required-note) {
    font-size: 1rem;
    line-height: 1.6;
  }

  html.site-shell body.page-shell--signup .signup-assistance {
    font-size: 1rem;
    line-height: 1.6;
  }

  html.site-shell body.page-shell--voices .cta p {
    font-size: 1rem;
    line-height: 1.58;
  }

  html.site-shell body.page-shell .mx-stage,
  html.site-shell body.page-shell .mx-live .mx-stage {
    padding: 48px 20px;
  }

  html.site-shell body.page-shell .mx-col {
    width: min(100%, 560px);
    gap: 22px;
  }

  html.site-shell body.page-shell .mx-tag {
    font-size: 0.86rem;
    line-height: 1.35;
  }

  html.site-shell body.page-shell .mx-demo,
  html.site-shell body.page-shell .mx-col .sect-more {
    font-size: 0.92rem;
    line-height: 1.5;
  }

  html.site-shell body.page-shell .mx-fine {
    font-size: 1rem;
    line-height: 1.62;
  }

  html.site-shell body.page-shell .reg-grid {
    width: 100%;
    gap: 24px;
  }

  html.site-shell body.page-shell .reg {
    width: min(248px, 72vw);
  }

  html.site-shell body.page-shell .reg-flag {
    min-height: 76px;
    padding: 10px;
    font-size: 1.75rem;
  }

  html.site-shell body.page-shell .reg-flag small {
    font-size: 0.88rem;
  }

  html.site-shell body.page-shell .reg-body {
    padding: 12px 14px 14px;
  }

  html.site-shell body.page-shell .reg-keys i {
    width: 18px;
    height: 18px;
  }

  html.site-shell body.page-shell .reg-items {
    width: min(350px, calc(100vw - 40px));
    gap: 8px;
  }

  html.site-shell body.page-shell .reg-items li {
    gap: 9px;
    padding: 10px 12px;
    font-size: 1rem;
    line-height: 1.52;
  }

  html.site-shell body.page-shell .reg-items .reg-tick {
    font-size: 0.82rem;
    line-height: 1.35;
  }

  html.site-shell body.page-shell :is(.swb-title, .swb-num, .swb-inlabel, .swb-ringtxt) {
    font-size: 0.9rem;
  }

  html.site-shell body.page-shell :is(.swb-note, .swb-line, .swb-contxt) {
    font-size: 1rem;
    line-height: 1.52;
  }

  html.site-shell body.page-shell :is(.swb-line .swb-chip, .rly-chip) {
    font-size: 0.78rem;
  }

  html.site-shell body.page-shell .tw-sheet {
    font-size: 1rem;
    line-height: 1.72;
  }

  html.site-shell body.page-shell .dsk-head {
    font-size: 0.86rem;
  }

  html.site-shell body.page-shell :is(.dsk-say, .dsk-tray, .rly-card) {
    font-size: 1rem;
    line-height: 1.55;
  }

  html.site-shell body.page-shell .cas-title,
  html.site-shell body.page-shell .ksh-nethead {
    font-size: 0.92rem;
  }

  html.site-shell body.page-shell :is(.cas-note, .cas-flip, .ksh-card) {
    font-size: 1rem;
    line-height: 1.55;
  }

  html.site-shell body.page-shell :is(.mxd-hole, .ksh-seal) {
    font-size: 0.84rem;
  }

  html.site-shell body.page-shell .mxd-code {
    font-size: 1rem;
  }

  html.site-shell body.page-shell .mxd-steps h3 {
    font-size: 1rem;
  }

  html.site-shell body.page-shell .mxd-steps p {
    font-size: 1rem;
    line-height: 1.52;
  }
}

/* Mobile visual integration v19: every transparent object gets enough stage to
   remain a cutout, while live sentences keep the hierarchy calm and readable. */
@media (max-width: 820px) {
  html.site-shell body.page-shell {
    --page-mobile-object-height: clamp(190px, 54vw, 214px);
  }

  html.site-shell body.page-shell:is(
    [data-visual="ai-answering-cost-meter"],
    [data-visual="blog-call-library"],
    [data-visual="kosher-phone-direct-line"],
    [data-visual="privacy-call-lockbox"],
    [data-visual="trust-glass-vault"],
    [data-visual="unknown-number-frosted-lens"],
    [data-visual="who-called-tracer"]
  ) {
    --page-mobile-object-height: clamp(204px, 58vw, 228px);
  }

  html.site-shell body.page-shell:is(
    [data-visual="english-hebrew-bridge"],
    [data-visual="friends-mutual-credit"],
    [data-visual="unknown-call-relay"]
  ) {
    --page-mobile-object-height: clamp(176px, 49vw, 196px);
  }

  html.site-shell body.page-shell--how {
    --page-mobile-object-height: clamp(220px, 63vw, 260px);
  }

  html.site-shell body.page-shell--pricing {
    --page-mobile-object-height: clamp(198px, 56vw, 224px);
  }

  html.site-shell body.page-shell .page-head .wrap,
  html.site-shell body.page-shell--how .page-head .wrap,
  html.site-shell body.page-shell--pricing .page-head .wrap,
  html.site-shell body.page-shell--editorial .page-head .wrap,
  html.site-shell body.page-shell--product:not(.page-shell--how):not(.page-shell--pricing) .page-head .wrap,
  html.site-shell body.page-shell--legal .page-head .wrap {
    padding-bottom: calc(var(--page-mobile-object-height) + 18px);
  }

  html.site-shell body.page-shell .page-head .wrap::before,
  html.site-shell body.page-shell--editorial .page-head .wrap::before {
    bottom: calc(var(--page-mobile-object-height) - 36px);
  }

  html.site-shell body.page-shell[data-visual] .page-head::before,
  html.site-shell body.page-shell.page-shell--product[data-visual] .page-head::before,
  html.site-shell body.page-shell.page-shell--editorial[data-visual] .page-head::before,
  html.site-shell body.page-shell.page-shell--legal[data-visual] .page-head::before {
    bottom: -4px;
    height: var(--page-mobile-object-height);
    background-color: transparent;
    background-image: var(--page-cutout);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 18px 18px rgb(32 29 24 / 0.14));
  }

  html.site-shell body.page-shell--pricing .page-head::before {
    bottom: -4px;
    height: var(--page-mobile-object-height);
    background-position: center bottom;
    background-size: contain;
    filter: drop-shadow(0 18px 18px rgb(32 29 24 / 0.14));
  }

  html.site-shell body.page-shell--how .page-head::before {
    bottom: -8px;
    height: var(--page-mobile-object-height);
  }

  html.site-shell body.page-shell .page-head .kicker,
  html.site-shell body.page-shell .mx-tag,
  html.site-shell body.page-shell .plan-route .kicker {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
  }

  html.site-shell body.page-shell .trust-line,
  html.site-shell body.page-shell .plan-route__features,
  html.site-shell body.page-shell .mx-fine {
    font-weight: 600;
  }

  html.site-shell body.page-shell .mx-cap {
    max-width: 30ch;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.55;
    text-wrap: pretty;
  }

  html.site-shell body.page-shell .mx-cap::after {
    width: 52px;
    height: 3px;
    margin-top: 10px;
  }

  html.site-shell body.page-shell .mx-fine {
    max-width: 32ch;
    margin-inline: auto;
    font-size: 1rem;
    line-height: 1.62;
    text-align: start;
  }
}