/* ==========================================================================
   Meko booking funnel — shared styles for /pricing, /portal and /start.
   Mirrors the inline funnel on the homepage so the popup looks identical
   everywhere. Relies on each page defining --ease, --ease-spring, --line and
   the JetBrains Mono / Cabinet Grotesk / Switzer font stacks.
   ========================================================================== */

/* ---------- Booking funnel modal ---------- */
.modal-root { position:fixed; inset:0; z-index:100; display:none; }
.modal-root.open { display:block; }
.modal-backdrop { position:absolute; inset:0; background:rgba(11,11,12,0.55); backdrop-filter:blur(8px); opacity:0; transition:opacity .45s var(--ease); }
.modal-root.show .modal-backdrop { opacity:1; }
.modal-shell { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:1.25rem; overflow-y:auto; }
.modal-card {
  position:relative; width:100%; max-width:560px; margin:auto; background:#FAF9F6; border-radius:1.6rem; box-sizing:border-box;
  box-shadow:0 60px 130px -45px rgba(11,11,12,0.6), inset 0 0 0 1px rgba(11,11,12,0.06);
  padding:clamp(1.6rem,4vw,2.5rem); transform:translateY(28px) scale(.97); opacity:0;
  transition:transform .55s var(--ease-spring), opacity .4s var(--ease), height .5s var(--ease);
}
.modal-root.show .modal-card { transform:none; opacity:1; }
.modal-close { position:absolute; top:1.1rem; right:1.1rem; width:38px; height:38px; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-size:.85rem; color:#6B6862; box-shadow:inset 0 0 0 1px var(--line); transition:background .35s var(--ease), color .35s var(--ease), transform .45s var(--ease-spring); }
.modal-close:hover { background:#0B0B0C; color:#FAF9F6; transform:rotate(90deg); }
.modal-progress { height:3px; border-radius:9999px; background:var(--line); overflow:hidden; margin-bottom:1.5rem; margin-right:2.9rem; }
.modal-progress > span { display:block; height:100%; width:25%; background:#0B0B0C; border-radius:9999px; transition:width .55s var(--ease); }
.step { display:none; }
.step.active { display:block; animation:stepIn .5s var(--ease); }
@keyframes stepIn { from{opacity:0; transform:translateX(16px);} to{opacity:1; transform:none;} }
.choice { width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.05rem 1.2rem; border-radius:1rem; box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); font-weight:500; }
.choice:hover { box-shadow:inset 0 0 0 1px rgba(11,11,12,0.42); transform:translateX(4px); }
.choice .tick { width:21px; height:21px; border-radius:9999px; box-shadow:inset 0 0 0 1.5px var(--line); display:flex; align-items:center; justify-content:center; font-size:.66rem; color:transparent; transition:.3s var(--ease); flex:none; }
.choice.sel { background:#0B0B0C; color:#FAF9F6; box-shadow:inset 0 0 0 1px #0B0B0C; transform:translateX(4px); }
.choice.sel .tick { background:#FAF9F6; box-shadow:none; color:#0B0B0C; }
/* "How did you hear about me?" — editorial text links separated by mono slashes */
.heard-row { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.85rem; row-gap:.4rem; }
.heard-sep { font-family:'JetBrains Mono',monospace; font-size:.8rem; color:#A8A49C; user-select:none; }
.chip { position:relative; font-size:.875rem; font-weight:500; color:#6B6862; transition:color .3s var(--ease); }
.chip::after { content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%; background:#0B0B0C; transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
.chip:hover, .chip:focus-visible { color:#0B0B0C; outline:none; }
.chip:hover::after, .chip:focus-visible::after { transform:scaleX(1); transform-origin:left; }
.chip.sel { color:#0B0B0C; }
.chip.sel::after { transform:scaleX(1); transform-origin:left; }
.field { width:100%; background:#fff; border-radius:.9rem; padding:.85rem 1.1rem; box-shadow:inset 0 0 0 1px var(--line); font-size:.95rem; color:#0B0B0C; transition:box-shadow .3s var(--ease); }
.field:focus { outline:none; box-shadow:inset 0 0 0 1.5px #0B0B0C; }
.field::placeholder { color:#A8A49C; }
textarea.field { resize:vertical; }
/* Fine pointers: native resize off — the UA's corner grip forces its own resize
   cursor on top of the custom one. The drag is reimplemented in each page's
   cursor script; these two strokes repaint the grip the browser no longer draws. */
@media (pointer: fine) {
  textarea.field {
    resize: none;
    background-image: linear-gradient(135deg, transparent 0 58%, rgba(11,11,12,0.32) 58% 64%, transparent 64% 76%, rgba(11,11,12,0.32) 76% 82%, transparent 82%);
    background-repeat: no-repeat;
    background-position: right 7px bottom 7px;
    background-size: 11px 11px;
  }
}
.field.invalid, .field.invalid:focus { box-shadow:inset 0 0 0 1.5px #b4452f; }
.phone-row { display:flex; gap:.5rem; }
.phone-row > input { flex:1 1 auto; width:auto; min-width:0; }
/* Custom country-code dropdown (native <select> can't be styled or carry the custom cursor) */
.cc { position:relative; flex:0 0 auto; }
.cc-trigger { display:inline-flex; align-items:center; gap:.45rem; width:auto; padding-left:.95rem; padding-right:.8rem; }
.cc-trigger .cc-flag { font-size:1rem; line-height:1; }
.cc-trigger .cc-dial { font-weight:500; }
.cc-caret { color:#6B6862; transition:transform .3s var(--ease); flex:none; }
.cc.open .cc-caret { transform:rotate(180deg); }
.cc-menu { position:absolute; top:calc(100% + .4rem); left:0; z-index:60; width:262px; max-height:266px; overflow-y:auto;
  scrollbar-width:none; -ms-overflow-style:none;
  background:#fff; border-radius:.9rem; padding:.35rem; margin:0; list-style:none;
  box-shadow:0 26px 54px -22px rgba(11,11,12,0.45), inset 0 0 0 1px var(--line);
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98); transform-origin:top left; pointer-events:none;
  transition:opacity .2s var(--ease), transform .28s var(--ease-spring), visibility .2s; }
.cc-menu::-webkit-scrollbar { width:0; height:0; display:none; }
.cc.open .cc-menu { opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.cc-option { display:flex; align-items:center; gap:.7rem; padding:.58rem .7rem; border-radius:.6rem; font-size:.9rem; color:#0B0B0C;
  transition:background .16s var(--ease), color .16s var(--ease); }
.cc-option .cc-flag { font-size:1rem; line-height:1; flex:none; }
.cc-option .cc-name { flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-option .cc-ld { color:#6B6862; font-variant-numeric:tabular-nums; }
.cc-option:hover, .cc-option.hl { background:#0B0B0C; color:#FAF9F6; }
.cc-option:hover .cc-ld, .cc-option.hl .cc-ld { color:rgba(250,249,246,0.72); }
.cc-option[aria-selected="true"] { font-weight:600; }
.recap { font-family:'JetBrains Mono',monospace; font-size:.76rem; line-height:1.7; color:#6B6862; background:#fff; border-radius:.9rem; padding:1rem 1.15rem; box-shadow:inset 0 0 0 1px var(--line); white-space:pre-wrap; }
.choice:focus-visible, .modal-close:focus-visible, #backBtn:focus-visible { outline:2px solid #0B0B0C; outline-offset:3px; }
/* Small phones / short viewports: cap the card to the visible viewport, pin the
   progress bar + nav, and let the active step scroll between them. */
@media (max-width: 480px), (max-height: 700px) {
  .modal-shell { padding:.85rem; }
  .modal-card {
    display:flex; flex-direction:column;
    max-height:calc(100vh - 1.7rem);
    max-height:calc(100dvh - 1.7rem);
    padding:1.3rem 1.15rem 1.1rem;
  }
  .modal-progress { margin-bottom:1rem; }
  .step.active {
    flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
    margin:0 -4px; padding:0 4px;
  }
  .step h3 { font-size:1.3rem; }
  .step > p.text-muted { margin-bottom:1rem; }
  .choice { padding:.85rem 1rem; }
  .field { font-size:1rem; }
  #modalNav { margin-top:1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-card, .modal-backdrop, .step, .modal-close { transition: none !important; animation: none !important; }
}

/* ---------- Landing mode (/start): the funnel IS the page, shown immediately ---------- */
body.funnel-landing .modal-backdrop { display:none; }        /* the page's own background shows through */
body.funnel-landing .modal-close { display:none; }           /* nowhere to close to on a dedicated page */
body.funnel-landing .modal-shell { padding-top:5.5rem; padding-bottom:2.5rem; align-items:flex-start; }
@media (min-width: 700px) { body.funnel-landing .modal-shell { align-items:center; padding-top:1.25rem; } }
body.funnel-landing .modal-card { box-shadow:0 40px 110px -50px rgba(11,11,12,0.45), inset 0 0 0 1px rgba(11,11,12,0.07); }