/* ---------- Call me back: the demo form of /phone and the home ----------
   A card beside its words. The fields reuse .field and .btn from site.css; the focus ring is the site's. */
.cbk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 96px); }
.cbk[hidden] { display: none; }
.cbk__words .lead { max-width: 480px; margin-top: 20px; }
.cbk__points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.cbk__points li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; line-height: 1.45; color: var(--ink); }
.cbk__points svg { flex: none; width: 20px; height: 20px; margin-top: 2px; stroke-width: 2.2; color: var(--blue); }
.cbk__card { padding: clamp(24px, 3.5vw, 40px); border-radius: var(--radius); background: var(--paper); box-shadow: 0 0 0 1px var(--hair), 0 30px 60px rgba(15, 15, 30, .08); }
.cbk .field { margin-bottom: 16px; }
.cbk .field input { min-height: 48px; font-size: 17px; }
.cbk__code { letter-spacing: .3em; font-variant-numeric: tabular-nums; text-align: center; font-size: 24px !important; }
.cbk__hint { margin: 0; font-size: 13px; letter-spacing: -.01em; color: var(--ink-2); }
.cbk__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cbk__consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; margin: 4px 0 20px; font-size: 13px; letter-spacing: -.01em; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.cbk__consent input { width: 24px; height: 24px; margin: 0; accent-color: var(--blue); }
.cbk__consent input:focus-visible { outline: 3px solid var(--focus, var(--blue)); outline-offset: 3px; }
.cbk__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.cbk__btn:focus-visible, .cbk__link:focus-visible, .cbk__opt summary:focus-visible { outline: 3px solid var(--focus, var(--blue)); outline-offset: 3px; }
.cbk__optform .cbk__btn { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-2); }
.cbk__optform .cbk__btn:hover { background: var(--mist); color: var(--ink); }
.cbk__btn svg { flex: none; width: 18px; height: 18px; stroke-width: 2; }
.cbk__btn[disabled] { opacity: .55; cursor: progress; }
.cbk__link { display: block; margin: 8px auto 0; min-height: 44px; padding: 0 12px; background: none; border: 0; font: inherit; font-size: 15px; color: var(--link); cursor: pointer; }
.cbk__status { margin: 16px 0 0; min-height: 1.5em; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.cbk__status[data-tone="error"] { color: #b3261e; }
.cbk__status[data-tone="ok"] { color: #1d7a3f; }
.cbk__step[hidden], .cbk__done[hidden] { display: none; }
.cbk__done { display: flex; align-items: center; gap: 16px; padding: 8px 0; }
.cbk__done svg { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--blue); color: #fff; stroke-width: 2.4; }
.cbk__done p { margin: 0; font-size: 19px; line-height: 1.35; font-weight: 600; }
.cbk__opt { margin-top: 20px; border-top: 1px solid var(--hair); padding-top: 8px; }
.cbk__opt summary { display: flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--link); cursor: pointer; }
.cbk__optform { padding-bottom: 8px; }
.cbk__fine { margin: 12px 0 0; font-size: 13px; letter-spacing: -.01em; line-height: 1.5; color: var(--ink-2); text-wrap: balance; }
.cbk__fine a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
@media (max-width: 860px) { .cbk { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: no-preference) { .cbk__step:not([hidden]) { animation: cbk-in .24s ease-out; } }
@keyframes cbk-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.section:has(> .cbk[hidden]) { display: none; }

/* ---------- The one demo section: call the line now, or be called ----------
   One headline, then one container with a hairline between two halves of equal height: the line on the left, the form
   on the right. Spacing on the 8px scale; the QR plate (18px) nests in the container (28px) at 24px inset. When the
   platform does not answer, the form half stays hidden and the call half stands alone, full width. On a narrow screen
   the halves stack, an "or" on the hairline between them, and the QR (a screen's camera cannot scan itself) is gone. */
.demo__head { max-width: 720px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; }
.demo__head .display-l { text-wrap: balance; }
.demo__head .lead { margin: 16px auto 0; max-width: 560px; }
.demo__box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--radius); background: var(--paper); box-shadow: 0 0 0 1px var(--hair), 0 30px 60px rgba(15, 15, 30, .06); }
.demo__half { padding: clamp(24px, 3.5vw, 48px); min-width: 0; }
.demo__call { display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.demo__num { display: inline-flex; align-items: center; min-height: 44px; margin: 0; font-size: clamp(28px, 3vw, 40px); }
.demo__call .cta-row { margin: 0; justify-content: flex-start; align-items: center; gap: 8px 24px; }
.demo__call .btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.demo__call .btn svg { flex: none; width: 18px; height: 18px; stroke-width: 2; }
.demo__call .more { display: inline-flex; align-items: center; min-height: 44px; }
.demo__qr { display: flex; align-items: center; gap: 16px; margin: 0; }
.demo__qr .pcall__code { flex: none; padding: 12px; border-radius: var(--radius-s); box-shadow: 0 0 0 1px var(--hair); }
.demo__qr .pcall__code svg { width: 112px; height: 112px; }
.demo__qr .pcall__cap { color: var(--ink-2); text-align: left; max-width: 200px; }
.demo__call .pcall__fine { margin: 0; color: var(--ink-2); text-align: left; max-width: 420px; }
.cbk--panel { position: relative; display: flex; flex-direction: column; gap: 24px; border-left: 1px solid var(--hair); }
.cbk--panel[hidden] { display: none; }
.cbk--panel .cbk__card { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.cbk--panel .display-m { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; }
.cbk--panel .lead { margin-top: 12px; font-size: 17px; }
.cbk--panel .cbk__points { margin-top: 16px; gap: 8px; }
.cbk--panel .cbk__points li { font-size: 15px; }
.cbk__step .cbk__fine + .cbk__btn { margin-top: 24px; }
.demo__box:has(> .cbk[hidden]) { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin: 0 auto; }
.demo__box:has(> .cbk[hidden]) .demo__call { align-items: center; text-align: center; }
.demo__box:has(> .cbk[hidden]) .demo__call .cta-row { justify-content: center; }
@media (max-width: 860px) {
  .demo__box { grid-template-columns: minmax(0, 1fr); }
  .demo__qr { display: none; }
  .cbk--panel { border-left: 0; border-top: 1px solid var(--hair); }
  .cbk--panel::before { content: attr(data-or); position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 0 12px; background: var(--paper); font-size: 13px; letter-spacing: -.01em; line-height: 1; color: var(--ink-2); }
  .demo__call .cta-row { flex-direction: column; align-items: stretch; }
  .demo__call .btn { justify-content: center; }
  .demo__call .more { justify-content: center; }
}
@media (max-width: 860px) { .demo__box:has(> .cbk[hidden]) .demo__call { align-items: stretch; } }
.demo__call .demo__num { font-size: clamp(28px, 2.6vw, 36px); letter-spacing: -.02em; }
.demo__call .demo__qr { flex-direction: row; max-width: none; text-align: left; }
.cbk--panel { align-items: stretch; }

/* ---------- The demo box, redone: a night half to call from, a white half to be called ----------
   One 28px container, overflow hidden, so the two halves share its corners and nothing is nested twice. Left: the number
   and the button at the top, the code and the hours at the foot, a hairline between. Right: the words, three facts
   on hairlines, one field, one button. Spacing on the 8px scale. */
.demo__box { overflow: hidden; background: var(--paper); box-shadow: 0 0 0 1px var(--hair), 0 40px 80px rgba(15, 15, 30, .08); }
.demo__box .demo__half { padding: clamp(32px, 4.4vw, 64px); }
.demo__box .demo__call { justify-content: center; align-items: flex-start; gap: 28px; background: #000; color: var(--on-night); }
.demo__box .demo__call .demo__num { min-height: 0; font-size: clamp(36px, 3.6vw, 52px); letter-spacing: -.035em; line-height: 1.05; color: var(--on-night); }
.demo__box .demo__call .cta-row { gap: 8px 24px; }
.demo__box .demo__call .more { color: #2997ff; }
.demo__box .demo__call .demo__qr { margin-top: 20px; width: 100%; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .14); gap: 20px; }
.demo__box .demo__call .pcall__code { padding: 10px; border-radius: 14px; box-shadow: none; }
.demo__box .demo__call .pcall__code svg { width: 104px; height: 104px; }
.demo__box .demo__call .pcall__cap { color: var(--on-night-2); max-width: 180px; }
.demo__box .demo__call .pcall__fine { margin: 0; max-width: 360px; color: var(--on-night-2); }
.demo__box .cbk--panel { border-left: 0; gap: 28px; }
.demo__box .cbk--panel .eyebrow { margin-bottom: 12px; }
.demo__box .cbk--panel .cbk__points { margin-top: 24px; gap: 0; border-top: 1px solid var(--hair); }
.demo__box .cbk--panel .cbk__points li { align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 15px; line-height: 1.4; color: var(--ink); }
.demo__box .cbk--panel .cbk__points svg { width: 18px; height: 18px; margin-top: 0; color: var(--ink-2); }
.demo__box .cbk .field input { min-height: 52px; padding-inline: 16px; border-radius: 14px; border-color: transparent; background: var(--mist); }
.demo__box .cbk .field input:focus { background: var(--paper); border-color: var(--blue); }
.demo__box .cbk .field label { font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--ink-2); }
.demo__box .cbk__consent { margin: 8px 0 16px; font-size: 13px; letter-spacing: -.01em; }
.demo__box .cbk__fine { text-wrap: pretty; }
.demo__box:has(> .cbk[hidden]) .demo__call { align-items: center; text-align: center; }
.demo__box:has(> .cbk[hidden]) .demo__call .demo__qr { justify-content: center; }
@media (max-width: 860px) {
  .demo__box .cbk--panel { border-top: 0; }
  .demo__box .cbk--panel::before { display: none; }
  .demo__box .demo__call { gap: 24px; }
  .demo__box .demo__call .cta-row { width: 100%; }
}