:root{
  --bg:#fbf8f5;
  --surface:#ffffff;
  --primary:#c79b7a;
  --primary-2:#b88b6b;
  --primary-soft:#efe0d4;
  --text:#262626;
  --muted:#6f6f6f;
  --border:rgba(30,30,30,.08);
  --shadow:0 14px 40px rgba(0,0,0,.06);
  --radius:22px;

  --font-main:'Inter', sans-serif;
  --font-title:'Playfair Display', serif;

 // --container:420px;
    --container:680px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-main);
  color:var(--text);
  background:
    radial-gradient(700px 260px at 50% 0%, rgba(199,155,122,.12), transparent 60%),
    radial-gradient(600px 220px at 10% 20%, rgba(199,155,122,.08), transparent 55%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}

a{color:inherit}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:2.6rem 1.5rem;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1.8rem;
}

.brand{
  display:flex;align-items:center;gap:.6rem;
  text-decoration:none;
}
.brand-mark{
  width:36px;height:36px;border-radius:12px;
  background:linear-gradient(135deg, rgba(199,155,122,.95), rgba(199,155,122,.55));
  box-shadow:0 10px 24px rgba(199,155,122,.25);
}
.brand-name{
  font-weight:600;
  letter-spacing:.2px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem .75rem;
  border-radius:999px;
  background:rgba(255,255,255,.65);
  border:1px solid var(--border);
  color:var(--muted);
  font-size:.82rem;
}

h1,h2{
  font-family:var(--font-title);
  font-weight:500;
  line-height:1.25;
  margin:0 0 1rem 0;
}
h1{font-size:2.05rem}
h2{font-size:1.55rem}
h3{
  margin:0 0 .5rem 0;
  font-size:1.05rem;
  font-weight:650;
}

p{
  margin:.6rem 0 0 0;
  color:var(--muted);
  line-height:1.7;
}

.hero{padding:1.3rem 0 1rem 0}
.hero-sub{margin-top:.8rem;font-size:1.02rem}

.btn-primary{
  display:block;
  width:100%;
  padding:16px 18px;
  border-radius:999px;
  border:0;
  text-align:center;
  text-decoration:none;
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(180deg, var(--primary), var(--primary-2));
  box-shadow:0 14px 28px rgba(199,155,122,.28);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary:hover{
  transform:translateY(-1px);
  filter:saturate(1.03);
  box-shadow:0 18px 34px rgba(199,155,122,.34);
}

.btn-ghost{
  display:block;
  width:100%;
  margin-top:.7rem;
  padding:14px 18px;
  border-radius:999px;
  border:1px solid var(--border);
  text-align:center;
  text-decoration:none;
  font-weight:600;
  color:var(--text);
  background:rgba(255,255,255,.7);
  transition:transform .18s ease, background .18s ease;
}
.btn-ghost:hover{transform:translateY(-1px);background:rgba(255,255,255,.9)}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.55rem;
  margin:1rem 0;
  box-shadow:var(--shadow);
}

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.8rem;
}

.kpi{
  padding:1rem 1rem;
  border-radius:18px;
  background:rgba(255,255,255,.7);
  border:1px solid var(--border);
}
.kpi strong{display:block;font-size:1.05rem}
.kpi span{display:block;margin-top:.2rem;color:var(--muted);font-size:.9rem}

.trust-strip{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top:1.2rem;
}

.logo-row{
  display:flex;
  gap:.6rem;
  overflow:auto;
  padding:.2rem 0;
  margin-top:.9rem;
}
.logo-chip{
  flex:0 0 auto;
  padding:.65rem .85rem;
  border-radius:999px;
  border:1px dashed rgba(199,155,122,.35);
  background:rgba(255,255,255,.55);
  color:rgba(60,60,60,.75);
  font-size:.85rem;
}

.hr{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.10), transparent);
  margin:1.4rem 0;
}

.stepper{
  display:flex;
  gap:.5rem;
  align-items:center;
  margin:1.1rem 0 0 0;
}
.step-dot{width:10px;height:10px;border-radius:999px;background:rgba(0,0,0,.10)}
.step-dot.on{background:rgba(199,155,122,.9)}
.step-label{margin-left:.4rem;color:var(--muted);font-size:.85rem}

.chat{
  display:flex;
  flex-direction:column;
  gap:.55rem;
}

.chat-bubble{
  max-width:86%;
  padding:14px 16px;
  border-radius:18px;
  font-size:.96rem;
  line-height:1.55;
  animation:fadeUp .25s ease;
  border:1px solid var(--border);
}
.chat-ai{background:rgba(255,255,255,.9)}
.chat-user{
  margin-left:auto;
  background:linear-gradient(180deg, rgba(199,155,122,.95), rgba(184,139,107,.95));
  color:#fff;
  border-color:rgba(199,155,122,.22);
}

.typing{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.8);
  width:max-content;
}
.dot{
  width:7px;height:7px;border-radius:99px;background:rgba(0,0,0,.22);
  animation:bounce 1s infinite ease-in-out;
}
.dot:nth-child(2){animation-delay:.12s}
.dot:nth-child(3){animation-delay:.24s}

textarea{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.12);
  padding:14px;
  font-size:1rem;
  font-family:var(--font-main);
  resize:none;
  background:rgba(255,255,255,.85);
}
textarea:focus{
  outline:none;
  border-color:rgba(199,155,122,.75);
  box-shadow:0 0 0 4px rgba(199,155,122,.16);
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.45rem .7rem;
  border-radius:999px;
  background:rgba(199,155,122,.12);
  border:1px solid rgba(199,155,122,.20);
  color:rgba(65,45,35,.85);
  font-size:.84rem;
  font-weight:600;
}

.list{
  margin:.6rem 0 0 0;
  padding:0;
  list-style:none;
}
.list li{
  margin:.6rem 0;
  color:var(--muted);
}
.list li::before{
  content:"•";
  color:rgba(199,155,122,.95);
  margin-right:.55rem;
}

.profile-hero{
  display:flex;
  gap:1rem;
  align-items:center;
}
.avatar{
  width:64px;height:64px;border-radius:22px;
  background:linear-gradient(135deg, rgba(199,155,122,.95), rgba(199,155,122,.25));
  box-shadow:0 14px 30px rgba(199,155,122,.22);
  flex:0 0 auto;
}
.profile-meta{flex:1}
.profile-meta h2{margin:0}
.profile-meta p{margin:.25rem 0 0 0}

.sticky-cta{
  position:fixed;
  left:0; right:0; bottom:0;
  padding:12px 14px;
  background:rgba(251,248,245,.85);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--border);
  z-index:1000;
}
.sticky-cta .wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 1.5rem;
}

.small{
  font-size:.83rem;
  color:rgba(80,80,80,.65);
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes bounce{
  0%,80%,100%{transform:translateY(0);opacity:.55}
  40%{transform:translateY(-4px);opacity:1}
}

/* ---- MODAL (Demo calendar) ---- */
.modal-backdrop{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;

  /* center */
  align-items:center;
  justify-content:center;

  /* dim background */
  background: rgba(20,20,20,.45);

  /* spacing on small screens */
  padding:14px;
}
.modal-backdrop.on{display:flex}

.modal{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border:1px solid var(--border);
  border-radius:26px;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
  overflow:hidden;
  animation:modalUp .18s ease;
}
.modal-head{
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
}
.modal-title{
  font-family:var(--font-title);
  font-weight:500;
  font-size:1.15rem;
}
.icon-btn{
  border:1px solid var(--border);
  background:rgba(255,255,255,.7);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
}
.modal-body{padding:16px 18px}
.slot-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7rem;
  margin-top:.9rem;
}
.slot{
  padding:12px 12px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.85);
  text-decoration:none;
  text-align:center;
  font-weight:650;
}
.slot small{display:block;margin-top:.25rem;font-weight:500;color:var(--muted)}
.slot:hover{
  border-color:rgba(199,155,122,.55);
  box-shadow:0 10px 26px rgba(199,155,122,.14);
  transform:translateY(-1px);
  transition:all .18s ease;
}

.toast{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:84px;
  background:rgba(35,35,35,.92);
  color:#fff;
  padding:12px 14px;
  border-radius:14px;
  font-size:.92rem;
  display:none;
  z-index:10000;
}
.toast.on{display:block; animation:fadeUp .2s ease}

@keyframes modalUp{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:translateY(0)}
}

.link-soft{
  display:inline-block;
  margin-top:1rem;
  color:rgba(60,60,60,.72);
  text-decoration:none;
  border-bottom:1px dashed rgba(199,155,122,.45);
}
.link-soft:hover{color:rgba(60,60,60,.92)}

/* =========================
   Mobile UX polish
   ========================= */

/* iOS safe-area support for sticky CTA + modal */
:root{
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Better tap targets everywhere */
.btn-primary, .btn-ghost, .slot, .icon-btn{
  min-height: 48px;
}

/* Prevent “double-tap zoom” feel on buttons */
.btn-primary, .btn-ghost, .slot, .icon-btn{
  touch-action: manipulation;
}

/* Smoother scrolling on iOS */
body{
  -webkit-overflow-scrolling: touch;
}

/* Sticky CTA: respect safe area */
.sticky-cta{
  padding-bottom: calc(12px + var(--safe-bottom));
}

/* Container padding: slightly tighter on small screens */
@media (max-width: 380px){
  .container{
    padding: 2.2rem 1.1rem;
  }
  h1{ font-size: 1.85rem; }
}

/* Chat: improve readability + spacing on mobile */
.chat-bubble{
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Textarea: avoid iOS zoom + improve feel */
textarea{
  font-size: 16px; /* prevents iOS zoom-on-focus */
}

/* =========================
   Modal as “bottom sheet” on mobile
   Desktop remains centered
   ========================= */

/* Default (desktop/tablet): centered overlay (you already have) */
.modal-backdrop{
  align-items: center;
  justify-content: center;
}

/* Mobile: bottom sheet */
@media (max-width: 520px){
  .modal-backdrop{
    align-items: flex-end;
    justify-content: center;
  }
  .modal{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  .modal-body{
    max-height: calc(70vh - 60px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(16px + var(--safe-bottom));
  }

  /* Optional: small “grabber” look */
  .modal-head{
    position: relative;
  }
  .modal-head:before{
    content:"";
    position:absolute;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    width:44px;
    height:5px;
    border-radius:999px;
    background: rgba(0,0,0,.12);
  }
}

/* Toast: avoid covering iOS home bar */
.toast{
  bottom: calc(84px + var(--safe-bottom));
}

.day-chip{
  flex:0 0 auto;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.80);
  text-decoration:none;
  font-weight:650;
  font-size:.92rem;

  display:inline-flex;
  flex-direction:column;   /* stack lines */
  align-items:center;      /* center horizontally */
  gap:.15rem;              /* tighter vertical gap */
  line-height:1.05;        /* optional: nicer two-line look */
}
.day-chip.on{
  background:rgba(199,155,122,.14);
  border-color:rgba(199,155,122,.32);
}
.day-chip small{
  font-weight:600;
  color:rgba(60,60,60,.62);
  font-size:.78rem;        /* optional: makes count feel secondary */
}
/* Confirmation screen polish */
#stepDone .card{ background: rgba(255,255,255,.92); }
#stepDone .kpi strong{ font-size:1.05rem; }
#stepDone .list li{ margin:.5rem 0; }

/* ===== Patient visio join page ===== */
.join-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:18px; }
.join-frame{
  width: 900px; max-width: calc(100vw - 36px);
  border-radius: 28px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 70px rgba(0,0,0,.10);
  overflow:hidden;
}
.join-top{
  padding: 16px 18px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  background: rgba(255,255,255,.65);
}
.join-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:14px; padding:18px; }
.join-card{
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.90);
  padding: 16px;
}
.preview-box{
  height: 280px;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.60);
  display:flex; align-items:center; justify-content:center;
  font-weight:800;
  color: rgba(40,40,40,.65);
  position:relative;
  overflow:hidden;
  padding:0;
}
 
@media (max-width: 980px){
  .join-grid{ grid-template-columns: 1fr; }
  .preview-box{ height: 220px; }
}

.why-box{
  border:1px solid var(--border);
  background:rgba(255,255,255,.78);
  border-radius:22px;
  padding:14px 14px;
}
.why-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.8rem;
}
.why-pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.45rem .7rem;
  border-radius:999px;
  border:1px solid rgba(199,155,122,.35);
  background:rgba(199,155,122,.12);
  font-weight:650;
}
.why-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.why-list li{
  display:flex;
  gap:.6rem;
  align-items:flex-start;
  padding:.65rem .7rem;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.86);
}
.why-dot{
  width:.55rem;
  height:.55rem;
  border-radius:99px;
  margin-top:.35rem;
  background:rgba(199,155,122,.85);
  flex:0 0 auto;
}
.consult-box{
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.72);
  border-radius:18px;
  padding:12px 12px;
  margin-top:.6rem;
}

.consult-title{
  font-weight:750;
  margin-bottom:.55rem;
}

.consult-chips{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}

.consult-price{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-top:.7rem;
}

.consult-price-val{
  font-weight:800;
  font-size:1.05rem;
}
.avatar{
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #eee center/cover no-repeat;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  border: 2px solid rgba(255,255,255,.9);
}