@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#f7fafb;
  --surface:#ffffff;
  --surface-soft:#f0fbfa;
  --text:#102034;
  --muted:#637083;
  --border:#dbe5ea;
  --accent:#0bb7aa;
  --accent-dark:#078c83;
  --accent-soft:#e8fbf8;
  --warning:#fff7e6;
  --warning-border:#f2d18b;
  --shadow:0 12px 34px rgba(15,36,49,.08);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:var(--bg);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input{font:inherit}

.topbar{
  position:sticky;top:0;z-index:50;
  height:76px;
  display:grid;
  grid-template-columns:280px minmax(260px,540px) 1fr;
  align-items:center;
  gap:28px;
  padding:0 28px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.brand{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.brand-mark{font-size:32px;color:var(--accent)}
.brand-text{font-size:22px;font-weight:700;white-space:nowrap}
.brand-text strong{color:var(--accent);font-weight:600}
.brand-subtitle{grid-column:2;font-size:12px;color:var(--muted)}
.search-wrap input{
  width:100%;border:1px solid var(--border);border-radius:14px;
  padding:13px 16px;background:#fbfdfe;color:var(--text);
}
.app-link{justify-self:end;color:#1c3d70;font-weight:600}

.layout{
  display:grid;
  grid-template-columns:300px minmax(0,1fr) 270px;
  min-height:calc(100vh - 76px);
}
.sidebar{border-right:1px solid var(--border);background:var(--surface)}
.sidebar-inner{position:sticky;top:76px;padding:28px 22px}
.sidebar-label{text-transform:uppercase;font-size:12px;font-weight:700;letter-spacing:.08em}
.category-nav details{border-radius:12px;margin-bottom:6px}
.category-nav summary{
  cursor:pointer;list-style:none;padding:12px 10px;font-weight:600;
}
.category-nav summary::-webkit-details-marker{display:none}
.category-nav a{
  display:block;padding:10px 14px 10px 28px;border-radius:10px;color:#33445a;font-size:14px;
}
.category-nav a.active{background:var(--accent-soft);color:var(--accent-dark);font-weight:700}
.support-card{
  margin-top:28px;padding:18px;border:1px solid #bfe9e4;border-radius:16px;background:linear-gradient(180deg,#f4fffd,#ecfaf8)
}
.support-card p{font-size:14px;color:var(--muted);line-height:1.6}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:11px 14px;font-weight:700}
.btn-primary{background:var(--accent-dark);color:#fff}

.content{padding:32px 40px 60px;min-width:0}
article{max-width:900px;margin:0 auto}
.breadcrumbs{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-bottom:16px}
.breadcrumbs a{color:var(--accent-dark)}
.article-header h1{font-size:38px;line-height:1.15;margin:0 0 12px}
.article-header p{color:var(--muted);font-size:17px;line-height:1.7}
.meta-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.chip{border:1px solid var(--border);border-radius:999px;padding:7px 11px;font-size:13px;background:#fff}
.chip.success{color:#087d69;background:#effcf8;border-color:#bce9df}

.steps{display:grid;gap:14px;margin-top:28px}
.step-card{
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  box-shadow:0 4px 16px rgba(17,42,55,.04);overflow:hidden
}
.step-card summary{
  cursor:pointer;list-style:none;display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:14px;padding:18px 20px;font-weight:700
}
.step-card summary::-webkit-details-marker{display:none}
.step-number{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--accent);color:white
}
.step-title{font-size:18px}
.chevron{font-size:22px;color:var(--muted);transition:.2s}
.step-card[open] .chevron{transform:rotate(180deg)}
.step-body{padding:0 20px 22px}
.step-body p{font-size:16px;line-height:1.75;color:#2a3c50}
.screenshot-card{
  margin:18px 0 0;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#eef4f5
}
.screenshot-card img{width:100%;height:auto}
.screenshot-card.narrow img{max-width:720px;margin:auto}
.screenshot-card figcaption{padding:10px 14px;color:var(--muted);font-size:13px;background:#fff;border-top:1px solid var(--border)}
.note{padding:13px 15px;border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:8px;color:#245047}

.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.info-card{border-radius:16px;padding:18px;border:1px solid var(--border);background:#fff}
.info-card h2{font-size:18px;margin:0 0 8px}
.info-card p{margin:0;color:var(--muted);line-height:1.65}
.info-card.tip{background:#f0fcf9;border-color:#bde8df}
.info-card.warning{background:var(--warning);border-color:var(--warning-border)}

.article-nav{display:flex;justify-content:space-between;gap:20px;margin-top:34px;padding-top:22px;border-top:1px solid var(--border)}
.article-nav a{display:flex;flex-direction:column;gap:5px;color:var(--accent-dark);font-weight:700}
.article-nav small{color:var(--muted);font-weight:400}
.article-nav .next{text-align:right}

.toc{padding:32px 24px 0 0}
.toc-card{position:sticky;top:108px;border:1px solid var(--border);border-radius:16px;background:#fff;padding:18px}
.toc-card strong{display:block;margin-bottom:12px}
.toc-card a{display:block;font-size:13px;color:var(--muted);padding:6px 0}

.icon-button{border:0;background:transparent;padding:6px}
.icon-button span{display:block;width:22px;height:2px;background:var(--text);margin:4px 0}
.mobile-only{display:none}
.overlay{position:fixed;inset:76px 0 0;background:rgba(4,17,25,.45);z-index:39}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:1180px){
  .layout{grid-template-columns:270px minmax(0,1fr)}
  .toc{display:none}
}
@media (max-width:820px){
  .desktop-only{display:none!important}
  .mobile-only{display:inline-block}
  .topbar{
    grid-template-columns:auto 1fr auto;height:70px;padding:0 14px;gap:10px
  }
  .brand{justify-self:center}
  .brand-mark{font-size:26px}
  .brand-text{font-size:19px}
  .brand-subtitle{font-size:10px}
  .search-wrap{justify-self:end}
  .search-wrap input{width:42px;padding:10px;border-radius:50%;color:transparent}
  .search-wrap input::placeholder{color:transparent}
  .layout{display:block}
  .sidebar{
    position:fixed;z-index:40;top:70px;bottom:0;left:0;width:min(86vw,340px);
    transform:translateX(-104%);transition:.25s;box-shadow:var(--shadow);overflow:auto
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-inner{position:static;padding:20px}
  .content{padding:22px 14px 44px}
  .breadcrumbs{font-size:12px}
  .article-header h1{font-size:29px}
  .article-header p{font-size:15px}
  .step-card summary{padding:16px}
  .step-title{font-size:16px}
  .step-body{padding:0 16px 18px}
  .step-body p{font-size:15px}
  .info-grid{grid-template-columns:1fr}
  .article-nav{gap:10px}
}
@media (max-width:520px){
  .brand-mark{display:none}
  .article-header h1{font-size:26px}
  .meta-chips{gap:7px}
  .chip{font-size:12px}
  .step-number{width:30px;height:30px}
  .article-nav{flex-direction:column}
  .article-nav .next{text-align:left}
}

/* v4 focused responsive screenshots */
.layout{grid-template-columns:280px minmax(0,1fr) 240px}
.content{padding:32px 30px 60px}
article{max-width:1080px}
.article-header h1{font-size:38px}
.article-header p{font-size:17px}
.step-title{font-size:18px}
.step-body p{font-size:16px}

.screenshot-card{
  margin-top:18px;
  padding:18px;
  background:#eef5f6;
  border-radius:16px;
}
.screenshot-card img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:720px;
  margin:0 auto;
  object-fit:contain;
  border-radius:12px;
  cursor:zoom-in;
  box-shadow:0 10px 28px rgba(7,27,38,.12);
}
.screenshot-card figcaption{
  padding:12px 2px 0;
  font-size:13px;
  text-align:center;
  border:0;
  background:transparent;
}
.image-hint{
  display:none;
  margin:8px 0 0;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

.lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
  background:#07131b;
  overflow:auto;
  touch-action:pan-x pan-y pinch-zoom;
}
.lightbox.open{display:flex}
.lightbox img{
  display:block;
  width:auto;
  height:auto;
  max-width:none;
  max-height:none;
  min-width:min(900px, 94vw);
  object-fit:contain;
}
.lightbox button{
  position:fixed;
  top:12px;
  right:12px;
  z-index:1001;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.18);
  font-size:28px;
}
@media (max-width:1180px){
  .layout{grid-template-columns:250px minmax(0,1fr)}
  .toc{display:none}
}
@media (max-width:820px){
  .content{padding:20px 12px 42px}
  article{max-width:none}
  .article-header h1{font-size:28px}
  .article-header p{font-size:15px}
  .step-card summary{padding:15px 13px}
  .step-body{padding:0 10px 16px}
  .step-body p{font-size:15px}
  .screenshot-card{
    width:100%;
    margin:14px 0 0;
    padding:8px;
    background:#eaf2f3;
    border-radius:12px;
  }
  .screenshot-card img{
    width:100%;
    max-width:100%;
    max-height:none;
    margin:0;
    border-radius:9px;
    box-shadow:none;
  }
  .image-hint{display:block}
  .info-grid{grid-template-columns:1fr}
  .lightbox{
    display:none;
    align-items:flex-start;
    justify-content:flex-start;
    padding:62px 10px 20px;
    overflow:auto;
  }
  .lightbox.open{display:block}
  .lightbox img{
    width:auto;
    min-width:1200px;
    max-width:none;
    height:auto;
    margin:0;
  }
}
@media (max-width:520px){
  .article-header h1{font-size:25px}
  .step-title{font-size:16px}
  .step-number{width:30px;height:30px}
}


/* v10 — professional mobile UI replicas; no screenshot background on phones */
.mobile-only-ui{display:none}
@media (max-width:820px){
  body{background:#fff}
  .content{padding:20px 12px 44px}
  .article-header h1{font-size:29px;line-height:1.18}
  .article-header p{font-size:15px}
  .screenshot-card{display:none!important}
  .mobile-only-ui{display:block}
  .step-card{border-radius:16px;box-shadow:0 8px 24px rgba(15,42,54,.06)}
  .step-card summary{padding:16px 14px}
  .step-body{padding:0 12px 18px}
  .step-body>p{font-size:15px;line-height:1.65}
  .mobile-demo{margin-top:14px;background:#fff;border:1px solid #dbe5ea;border-radius:16px;padding:16px;overflow:hidden;box-shadow:0 10px 26px rgba(15,42,54,.07)}
  .mobile-demo-brand{display:flex;align-items:center;justify-content:center;gap:8px;font-size:18px;font-weight:700;margin-bottom:16px;color:#102034}
  .mobile-demo-brand strong{color:#0bb7aa;font-weight:600}
  .mini-mark{display:grid;place-items:center;width:34px;height:34px;border:2px solid #0bb7aa;border-radius:9px;color:#0bb7aa;font-size:19px}
  .mobile-tabs{display:grid;grid-template-columns:1fr 1fr;background:#eaf2f4;border-radius:12px;padding:4px;margin-bottom:16px}
  .mobile-tabs span{padding:10px;text-align:center;border-radius:9px;color:#526073;font-size:14px}
  .mobile-tabs .active{background:#fff;color:#102034;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.08);outline:2px solid rgba(11,183,170,.18)}
  .focus-note,.focus-line{display:flex;align-items:center;gap:8px;color:#087f76;font-size:13px;font-weight:700;margin:0 0 12px}
  .focus-note span,.focus-line span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#0bb7aa;color:#fff}
  .ghost-field,.demo-input{height:42px;border:1px solid #d6e1e6;border-radius:10px;background:#fff;margin:7px 0 13px;box-shadow:inset 0 1px 2px rgba(0,0,0,.02)}
  .ghost-field{background:linear-gradient(90deg,#fff,#f7fafb)}
  .ghost-button,.demo-button{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:10px;background:#0bb7aa;color:#fff;font-size:14px;font-weight:700;text-align:center;padding:10px 14px}
  .mobile-form-step label{display:block;font-size:13px;font-weight:700;color:#253448;margin-top:4px}
  .mobile-form-step label b{color:#e44}
  .demo-input.filled{display:flex;align-items:center;padding:0 12px;color:#24384a;font-size:14px}
  .demo-help{margin:-6px 0 14px!important;color:#758295!important;font-size:12px!important}
  .demo-button.emphasis{box-shadow:0 0 0 4px rgba(11,183,170,.14)}
  .focus-line{justify-content:center;margin:12px 0 0}
  .mobile-message-step{padding:14px;background:#f7fbfc}
  .message-card{background:#fff;border:1px solid #dbe5ea;border-radius:14px;padding:16px}
  .message-card h3,.email-shell h3{margin:0 0 9px;font-size:18px;line-height:1.35}
  .message-card p,.email-shell p{margin:0 0 14px;font-size:14px;line-height:1.6;color:#566477}
  .email-row{padding:12px;background:#f2f7f8;border-radius:10px;font-size:13px;color:#647286;margin-bottom:14px}
  .email-row strong{display:block;margin-top:4px;color:#102034;overflow-wrap:anywhere}
  .button-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .demo-button.small{min-height:40px}
  .secondary-button{display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:10px;background:#eaf2f4;color:#263749;font-size:12px;font-weight:700;text-align:center;padding:8px}
  .mobile-email-step{padding:0;background:#fff}
  .email-shell{padding:20px;background:#fff}
  .email-shell h3{font-size:20px}
  .email-button{width:max-content;max-width:100%;margin:6px 0 18px;padding:12px 18px}
  .email-foot{font-size:12px!important;color:#8792a2!important;margin-bottom:0!important}
  .mobile-dashboard-step{padding:14px;background:#f8fbfc}
  .dashboard-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
  .dashboard-top h3{margin:0;font-size:22px}.dashboard-top p{margin:3px 0 0;color:#6c7888;font-size:13px}
  .mini-action{padding:9px 10px;border-radius:9px;background:#0bb7aa;color:#fff;font-size:11px;font-weight:700;white-space:nowrap}
  .package-card,.public-link-card,.setup-alert{background:#fff;border:1px solid #dbe5ea;border-radius:12px;padding:13px;margin-top:10px}
  .package-card{border-color:#aee7df;background:#f0fcfa}.package-card strong,.package-card small{display:block}.package-card strong{font-size:13px}.package-card small{margin-top:5px;color:#637083;font-size:11px}
  .public-link-card small{display:block;color:#718092;font-size:10px;margin-bottom:6px}.public-link-card strong{display:block;font-size:12px;overflow-wrap:anywhere}
  .setup-alert{border-color:#f0cf86;background:#fffaf0}.setup-alert strong,.setup-alert span{display:block}.setup-alert strong{font-size:13px;color:#8a4c18}.setup-alert span{font-size:11px;color:#9a6b44;margin-top:5px;line-height:1.45}
}



/* v11 — strict desktop/mobile separation */
.mobile-only-ui{display:none}

@media (min-width:821px){
  .screenshot-card{display:block!important}
  .mobile-only-ui{display:none!important}
}

@media (max-width:820px){
  .screenshot-card{display:none!important}
  .mobile-only-ui{display:block!important}
}

/* v12 — step 6 desktop: full uncropped dashboard */
@media (min-width:821px){
  .dashboard-full{
    padding:14px;
    overflow:visible;
  }
  .dashboard-full img{
    display:block;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    margin:0 auto !important;
  }
}

/* v13 — step 5 desktop: full uncropped email screenshot */
@media (min-width:821px){
  .step5-full{
    padding:14px;
    overflow:visible !important;
  }

  .step5-full .responsive-shot{
    display:block;
    width:100%;
  }

  .step5-full img{
    display:block;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    margin:0 auto !important;
  }
}


/* v14 — second article: manual appointment */
.article-shot-full{
  padding:14px;
  overflow:visible;
}
.article-shot-full img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 auto !important;
}
.tall-shot img{
  max-height:none !important;
}
.appointment-mobile h3{
  margin:0 0 6px;
  font-size:19px;
}
.mobile-subtext{
  margin:0 0 14px !important;
  color:#637083 !important;
  font-size:13px !important;
  line-height:1.55 !important;
}
.forgot-link{
  margin:-5px 0 13px;
  text-align:right;
  color:#637083;
  font-size:12px;
}
.select-like{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  color:#33445a;
  font-size:13px;
}
.mobile-two-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.demo-textarea{
  min-height:78px;
  border:1px solid #d6e1e6;
  border-radius:10px;
  background:#fff;
  margin:7px 0 13px;
}
.demo-textarea.filled{
  padding:12px;
  color:#24384a;
  font-size:13px;
}
.highlighted{
  background:#edf4ff !important;
}
.mobile-action-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}
.appointment-notice{
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:10px;
  padding:12px;
  border:1px solid #aee7df;
  border-radius:12px;
  background:#f0fcfa;
}
.appointment-notice .notice-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  color:#fff;
  background:#0bb7aa;
}
.appointment-notice div{
  min-width:0;
}
.appointment-notice strong,
.appointment-notice small{
  display:block;
}
.appointment-notice strong{
  font-size:13px;
}
.appointment-notice strong em{
  display:inline-grid;
  place-items:center;
  min-width:20px;
  height:20px;
  margin-left:4px;
  border-radius:999px;
  color:#fff;
  background:#0bb7aa;
  font-style:normal;
  font-size:11px;
}
.appointment-notice small{
  margin-top:3px;
  color:#637083;
  font-size:11px;
}
.success-toast{
  padding:13px 14px;
  margin-bottom:14px;
  border:1px solid #b7e7c9;
  border-radius:10px;
  color:#08762f;
  background:#eafaf0;
  font-size:13px;
  font-weight:700;
}
.calendar-mobile-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.calendar-mobile-head strong{
  font-size:14px;
}
.calendar-mobile-head span{
  display:grid;
  place-items:center;
  min-width:24px;
  height:24px;
  border-radius:999px;
  background:#edf3f5;
  color:#526073;
  font-size:11px;
}
.mini-appointment-card{
  margin-top:10px;
  padding:13px;
  border:2px solid #6adbd0;
  border-radius:12px;
  background:#fff;
}
.mini-appointment-card > strong,
.mini-appointment-card > small{
  display:block;
}
.mini-appointment-card > strong{
  margin-top:7px;
  font-size:14px;
}
.mini-appointment-card > small{
  margin-top:3px;
  color:#637083;
  font-size:11px;
}
.appointment-time{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:12px;
}
.appointment-time span{
  color:#637083;
}
.appointment-time em{
  margin-left:auto;
  padding:3px 7px;
  border-radius:999px;
  color:#fff;
  background:#0bb7aa;
  font-size:9px;
  font-style:normal;
  font-weight:700;
}
.appointment-tags{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:10px;
}
.appointment-tags span{
  padding:5px 7px;
  border-radius:999px;
  background:#eafaf5;
  color:#087c62;
  font-size:9px;
  font-weight:700;
}
.week-selector{
  padding:10px;
  margin-bottom:10px;
  border-radius:10px;
  background:#f2f7f8;
  text-align:center;
  font-size:12px;
  font-weight:700;
}
.week-scroll{
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  gap:7px;
  overflow:hidden;
}
.week-column{
  min-height:190px;
  padding:9px;
  border:1px solid #dbe5ea;
  border-radius:10px;
  background:#fff;
}
.week-column.active{
  border-color:#58d5c8;
}
.week-column > strong{
  display:block;
  margin-bottom:8px;
  font-size:11px;
}
.week-column > small{
  color:#8792a2;
  font-size:9px;
}
.week-mini-card{
  margin-top:7px;
  padding:8px;
  border:1px solid #79ddd3;
  border-radius:8px;
  background:#f8fffe;
}
.week-mini-card b,
.week-mini-card span{
  display:block;
}
.week-mini-card b{
  font-size:10px;
}
.week-mini-card span{
  margin-top:3px;
  font-size:9px;
  line-height:1.3;
}

@media (max-width:820px){
  .article-shot-full{
    display:none !important;
  }
  .appointment-mobile{
    display:block !important;
  }
}

@media (max-width:420px){
  .mobile-two-cols{
    grid-template-columns:1fr;
    gap:0;
  }
}

/* v15 — email confirmation article */
.confirm-shot-full,
.confirm-button-shot{
  padding:14px;
  overflow:visible;
}

.confirm-shot-full img,
.confirm-button-shot img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 auto !important;
}

.confirm-button-shot img{
  max-width:760px !important;
}

.confirm-action-demo{
  background:#f7fbfc;
}

.confirm-action-card{
  padding:20px;
  border:1px solid #dbe5ea;
  border-radius:14px;
  background:#fff;
  text-align:center;
}

.confirm-action-card h3{
  margin:10px 0 8px;
  font-size:19px;
}

.confirm-action-card p{
  margin:0 0 16px !important;
  color:#617083 !important;
  font-size:14px !important;
  line-height:1.55 !important;
}

.confirm-mail-icon{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  margin:0 auto;
  border-radius:50%;
  color:#087f76;
  background:#e4f8f5;
  font-size:21px;
}

.confirm-main-button{
  width:100%;
  box-shadow:0 0 0 4px rgba(11,183,170,.12);
}

@media (max-width:820px){
  .confirm-shot-full,
  .confirm-button-shot{
    display:none !important;
  }
}

/* v16 — desktop fix for confirmation article step 3 */
.confirm-button-shot{
  overflow:hidden !important;
  box-sizing:border-box;
}
.confirm-button-shot img{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 auto !important;
  box-sizing:border-box;
}

/* v17 — standalone login article */
.login-shot-full,
.login-focused-shot{
  padding:14px;
  overflow:hidden;
  box-sizing:border-box;
}

.login-shot-full img,
.login-focused-shot img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  margin:0 auto !important;
}

.login-focused-shot img{
  width:auto !important;
  max-width:760px !important;
}

.login-action-card{
  padding:20px;
  border:1px solid #dbe5ea;
  border-radius:14px;
  background:#fff;
  text-align:center;
}

.login-action-card h3{
  margin:10px 0 8px;
  font-size:19px;
}

.login-action-card p{
  margin:0 0 16px !important;
  color:#617083 !important;
  font-size:14px !important;
  line-height:1.55 !important;
}

.login-lock-icon{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  margin:0 auto;
  border-radius:50%;
  color:#087f76;
  background:#e4f8f5;
  font-size:21px;
  font-weight:800;
}

.login-main-button{
  width:100%;
  box-shadow:0 0 0 4px rgba(11,183,170,.12);
}

@media (max-width:820px){
  .login-shot-full,
  .login-focused-shot{
    display:none !important;
  }
}

/* v18 — fix login article steps 2 and 3 */
.login-focused-shot{
  overflow:hidden !important;
  box-sizing:border-box !important;
}

.login-focused-shot img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
}

/* v19 — dashboard introduction article */
.dashboard-full-shot{
  padding:14px;
  overflow:hidden;
  box-sizing:border-box;
}

.dashboard-full-shot img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
}

.dashboard-status-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:12px;
  padding:12px;
  border:1px solid #dbe5ea;
  border-radius:11px;
  background:#fff;
  font-size:12px;
}

.dashboard-highlight-card{
  box-shadow:0 0 0 3px rgba(11,183,170,.10);
}

.usage-line{
  height:7px;
  margin-top:11px;
  overflow:hidden;
  border-radius:999px;
  background:#e7eef1;
}

.usage-line span{
  display:block;
  height:100%;
  border-radius:999px;
  background:#0bb7aa;
}

.copy-link-button{
  margin-top:11px;
  padding:9px 10px;
  border:1px solid #a9ded8;
  border-radius:9px;
  color:#087f76;
  background:#f3fcfb;
  text-align:center;
  font-size:11px;
  font-weight:700;
}

.dashboard-main-action{
  box-shadow:0 0 0 4px rgba(11,183,170,.14);
}

.dashboard-action-note{
  margin-top:14px;
  padding:12px;
  border-left:3px solid #0bb7aa;
  border-radius:7px;
  color:#47576a;
  background:#f2fbfa;
  font-size:12px;
  line-height:1.5;
}

@media (max-width:820px){
  .dashboard-full-shot{
    display:none !important;
  }
}

/* v20 — business profile article */
.business-full-shot{
  padding:14px;
  overflow:hidden;
  box-sizing:border-box;
}

.business-full-shot img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
}

.public-business-shot img{
  width:auto !important;
  max-width:100% !important;
}

.mobile-section-head h3{
  margin:0 0 5px;
  font-size:19px;
}

.mobile-section-head p{
  margin:0 0 14px !important;
  color:#657386 !important;
  font-size:12px !important;
  line-height:1.5 !important;
}

.business-card{
  margin-top:11px;
  padding:13px;
  border:1px solid #dbe5ea;
  border-radius:11px;
  background:#fff;
}

.business-card > strong,
.business-card > small,
.business-card > span{
  display:block;
}

.business-card > small,
.business-card > span{
  margin-top:5px;
  color:#657386;
  font-size:11px;
}

.business-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.business-actions span{
  padding:7px 10px;
  border:1px solid #d2dee3;
  border-radius:8px;
  background:#fff;
  color:#34465a;
  font-size:10px;
  font-weight:700;
}

.save-preview-card{
  padding:17px;
  border:1px solid #dbe5ea;
  border-radius:13px;
  background:#fff;
  text-align:center;
}

.save-preview-card strong,
.save-preview-card small{
  display:block;
}

.save-preview-card small{
  margin-top:5px;
  color:#657386;
  font-size:11px;
}

.business-save-button{
  margin-top:14px;
  font-size:11px;
}

.public-business-preview{
  background:#f4f8f9;
}

.public-business-header{
  display:flex;
  align-items:center;
  gap:11px;
  padding-bottom:14px;
  border-bottom:1px solid #dbe5ea;
}

.business-avatar{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:13px;
  color:#fff;
  background:#16b8aa;
  font-size:20px;
  font-weight:800;
}

.public-business-header h3{
  margin:0;
  font-size:17px;
}

.public-business-header small{
  display:inline-block;
  margin-top:4px;
  padding:2px 6px;
  border-radius:999px;
  color:#fff;
  background:#16b8aa;
  font-size:8px;
  font-weight:800;
}

.public-business-copy{
  padding:15px 0;
}

.public-business-copy h4{
  margin:0 0 6px;
  font-size:15px;
}

.public-business-copy p{
  margin:0 !important;
  color:#657386 !important;
  font-size:12px !important;
}

.public-service-preview{
  position:relative;
  padding:13px;
  border:1px solid #dbe5ea;
  border-radius:11px;
  background:#fff;
}

.public-service-preview strong,
.public-service-preview small{
  display:block;
  padding-right:48px;
}

.public-service-preview strong{
  font-size:13px;
}

.public-service-preview small{
  margin-top:4px;
  color:#657386;
  font-size:10px;
}

.public-service-preview b{
  position:absolute;
  top:15px;
  right:13px;
  color:#09a793;
  font-size:14px;
}

@media (max-width:820px){
  .business-full-shot{
    display:none !important;
  }
}

/* v21 — business article flow correction */
.business-open-highlight{
  border-color:#0bb7aa !important;
  color:#087f76 !important;
  background:#eafaf8 !important;
  box-shadow:0 0 0 3px rgba(11,183,170,.12);
}

/* v22 — billing details article */
.billing-full-shot{
  padding:14px;
  overflow:hidden;
  box-sizing:border-box;
}

.billing-full-shot img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
}

.billing-card,
.billing-save-card{
  padding:15px;
  border:1px solid #dbe5ea;
  border-radius:12px;
  background:#fff;
}

.billing-card-title{
  display:flex;
  align-items:center;
  gap:8px;
  color:#26394c;
}

.billing-card p{
  margin:8px 0 0 !important;
  color:#687689 !important;
  font-size:12px !important;
  line-height:1.5 !important;
}

.billing-save-card{
  text-align:center;
}

.billing-save-card strong,
.billing-save-card small{
  display:block;
}

.billing-save-card small{
  margin-top:6px;
  color:#687689;
  font-size:11px;
  line-height:1.45;
}

.billing-save-button{
  margin-top:14px;
  font-size:11px;
}

@media (max-width:820px){
  .billing-full-shot{
    display:none !important;
  }
}

/* v23 — optimized one-image billing article */
.billing-overview{
  margin:24px 0 18px;
}

.overview-heading{
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin-bottom:13px;
}

.overview-heading h2{
  margin:0;
  font-size:19px;
}

.overview-heading p{
  margin:4px 0 0;
  color:#687689;
  font-size:13px;
}

.overview-icon{
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  border-radius:10px;
  color:#087f76;
  background:#e6f8f5;
  font-weight:800;
}

.billing-numbered-shot{
  padding:14px;
  overflow:hidden;
  box-sizing:border-box;
}

.billing-numbered-shot img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 auto !important;
}

.billing-privacy-note{
  margin:18px 0;
}

.billing-compact-steps .step-body{
  padding-top:4px;
}

.billing-compact-steps .step-body p{
  margin-bottom:6px;
}

.billing-map-mobile{
  padding:12px;
}

.billing-map-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  margin-top:8px;
  border:1px solid #dbe5ea;
  border-radius:10px;
  background:#fff;
}

.billing-map-row:first-child{
  margin-top:0;
}

.billing-map-row span{
  display:grid;
  place-items:center;
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:50%;
  color:#fff;
  background:#0bae9f;
  font-size:13px;
  font-weight:800;
}

.billing-map-row strong{
  font-size:12px;
  line-height:1.35;
}

@media (max-width:820px){
  .billing-numbered-shot{
    display:none !important;
  }
}

/* v24 — one screenshot per real screen */
.visual-overview{
  margin:24px 0 20px;
}

.desktop-visual-map{
  padding:14px;
  overflow:hidden;
  box-sizing:border-box;
}

.visual-map-frame{
  position:relative;
  width:100%;
}

.visual-map-frame img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 auto !important;
}

.visual-marker{
  position:absolute;
  left:var(--x);
  top:var(--y);
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  transform:translate(-50%, -50%);
  border:4px solid #fff;
  border-radius:50%;
  color:#fff;
  background:#08ae9f;
  box-shadow:0 4px 14px rgba(0,0,0,.24);
  font-size:17px;
  font-weight:800;
  line-height:1;
  z-index:2;
}

.mobile-step-map{
  padding:12px;
}

.mobile-step-map-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  margin-top:8px;
  border:1px solid #dbe5ea;
  border-radius:10px;
  background:#fff;
}

.mobile-step-map-row:first-child{
  margin-top:0;
}

.mobile-step-map-row > span{
  display:grid;
  place-items:center;
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:50%;
  color:#fff;
  background:#08ae9f;
  font-size:13px;
  font-weight:800;
}

.mobile-step-map-row > strong{
  font-size:12px;
  line-height:1.35;
}

@media (max-width:820px){
  .desktop-visual-map{
    display:none !important;
  }
}

/* v25 — instruction panel above image, small image markers */
.instruction-panel{
  margin:24px 0 14px;
  padding:18px;
  border:1px solid #dbe5ea;
  border-radius:14px;
  background:#f8fbfc;
}

.instruction-panel h2{
  margin:0 0 14px;
  font-size:19px;
}

.instruction-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.instruction-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px;
  border:1px solid #dbe5ea;
  border-radius:11px;
  background:#fff;
}

.instruction-number{
  display:grid;
  place-items:center;
  flex:0 0 27px;
  width:27px;
  height:27px;
  border-radius:50%;
  color:#fff;
  background:#08ae9f;
  font-size:12px;
  font-weight:800;
}

.instruction-item strong{
  display:block;
  font-size:13px;
  line-height:1.35;
}

.instruction-item p{
  margin:3px 0 0 !important;
  color:#697789 !important;
  font-size:11px !important;
  line-height:1.45 !important;
}

.numbered-reference-image{
  padding:14px;
  overflow:hidden;
  box-sizing:border-box;
}

.numbered-reference-frame{
  position:relative;
  width:100%;
}

.numbered-reference-frame img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  margin:0 auto !important;
}

.small-visual-marker{
  position:absolute;
  left:var(--x);
  top:var(--y);
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  transform:translate(-50%,-50%);
  border:2px solid #fff;
  border-radius:50%;
  color:#fff;
  background:#08ae9f;
  box-shadow:0 2px 7px rgba(0,0,0,.22);
  font-size:10px;
  font-weight:800;
  line-height:1;
  z-index:3;
}

@media (max-width:820px){
  .instruction-grid{
    grid-template-columns:1fr;
  }

  .instruction-panel{
    padding:13px;
  }

  .small-visual-marker{
    width:18px;
    height:18px;
    font-size:9px;
  }
}

/* v26 — ensure numbered reference images are visible on mobile */
@media (max-width:820px){
  .numbered-reference-image{
    display:block !important;
    width:100% !important;
    margin:14px 0 20px !important;
    padding:8px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  .numbered-reference-frame{
    width:100% !important;
    overflow:visible !important;
  }

  .numbered-reference-frame img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    object-fit:contain !important;
    margin:0 auto !important;
  }

  .numbered-reference-image figcaption{
    display:block !important;
    margin-top:8px !important;
    font-size:10px !important;
    line-height:1.45 !important;
  }

  .small-visual-marker{
    display:grid !important;
    width:17px !important;
    height:17px !important;
    border-width:2px !important;
    font-size:8px !important;
  }
}

/* v27 — public booking link article */
.public-link-final-shot{
  padding:14px;
  overflow:hidden;
  box-sizing:border-box;
}

.public-link-final-shot img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  margin:0 auto !important;
}

@media (max-width:820px){
  .public-link-final-shot{
    display:block !important;
    width:100% !important;
    padding:8px !important;
    box-sizing:border-box !important;
  }

  .public-link-final-shot img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
  }
}

/* v28 — create service article */
.service-form-panel{
  margin-top:28px;
}

.service-result-shot{
  padding:14px;
  overflow:hidden;
  box-sizing:border-box;
}

.service-result-shot img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  margin:0 auto !important;
}

@media (max-width:820px){
  .service-result-shot{
    display:block !important;
    width:100% !important;
    padding:8px !important;
    box-sizing:border-box !important;
  }

  .service-result-shot img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
  }
}

/* v29 — edit service article */
.service-edit-panel{
  margin-top:28px;
}

.service-edit-modal-shot .numbered-reference-frame{
  max-width:620px;
  margin:0 auto;
}

.service-edit-modal-shot img{
  width:100% !important;
  max-width:620px !important;
}

@media (max-width:820px){
  .service-edit-modal-shot .numbered-reference-frame{
    max-width:100% !important;
  }

  .service-edit-modal-shot img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
  }
}

/* v30 — service activation status article */
.status-second-panel{
  margin-top:28px;
}

.status-reference-image{
  padding:14px;
  overflow:hidden;
  box-sizing:border-box;
}

.status-reference-image img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  margin:0 auto !important;
}

@media (max-width:820px){
  .status-reference-image{
    display:block !important;
    width:100% !important;
    padding:8px !important;
    box-sizing:border-box !important;
  }

  .status-reference-image img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
  }
}

/* v31 — add staff article */
.staff-form-panel{
  margin-top:28px;
}

.staff-form-shot .numbered-reference-frame{
  max-width:620px;
  margin:0 auto;
}

.staff-form-shot img{
  width:100% !important;
  max-width:620px !important;
}

.staff-success-shot{
  padding:14px;
  overflow:hidden;
  box-sizing:border-box;
}

.staff-success-shot img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  margin:0 auto !important;
}

@media (max-width:820px){
  .staff-form-shot .numbered-reference-frame{
    max-width:100% !important;
  }

  .staff-form-shot img,
  .staff-success-shot img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
  }

  .staff-success-shot{
    display:block !important;
    width:100% !important;
    padding:8px !important;
  }
}

/* v32 — edit staff article */
.staff-edit-panel{
  margin-top:28px;
}

.staff-edit-form-shot .numbered-reference-frame{
  max-width:620px;
  margin:0 auto;
}

.staff-edit-form-shot img{
  width:100% !important;
  max-width:620px !important;
}

.staff-edit-success-shot{
  padding:14px;
  overflow:hidden;
  box-sizing:border-box;
}

.staff-edit-success-shot img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  margin:0 auto !important;
}

@media (max-width:820px){
  .staff-edit-form-shot .numbered-reference-frame{
    max-width:100% !important;
  }

  .staff-edit-form-shot img,
  .staff-edit-success-shot img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
  }

  .staff-edit-success-shot{
    display:block !important;
    width:100% !important;
    padding:8px !important;
  }
}

/* v33 — staff activation status article */
.staff-status-second-panel{
  margin-top:28px;
}

.staff-status-shot{
  display:block;
  width:100%;
  padding:14px;
  overflow:hidden;
  box-sizing:border-box;
}

.staff-status-shot img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  margin:0 auto !important;
}

@media (max-width:820px){
  .staff-status-shot{
    display:block !important;
    width:100% !important;
    padding:8px !important;
    box-sizing:border-box !important;
  }

  .staff-status-shot img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
  }
}

/* v34 — assign services to staff */
.staff-services-panel{
  margin-top:28px;
}

.staff-services-form-shot .numbered-reference-frame{
  max-width:720px;
  margin:0 auto;
}

.staff-services-form-shot img{
  width:100% !important;
  max-width:720px !important;
}

.staff-services-success-shot{
  padding:14px;
  overflow:hidden;
  box-sizing:border-box;
}

.staff-services-success-shot img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  margin:0 auto !important;
}

@media (max-width:820px){
  .staff-services-form-shot .numbered-reference-frame{
    max-width:100% !important;
  }

  .staff-services-form-shot img,
  .staff-services-success-shot img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
  }

  .staff-services-success-shot{
    display:block !important;
    width:100% !important;
    padding:8px !important;
  }
}

/* v35 — delete staff article */
.warning-chip{
  color:#8a5a00 !important;
  background:#fff4d8 !important;
  border-color:#f0d38a !important;
}

.delete-confirm-panel{
  margin-top:28px;
}

.delete-confirm-shot,
.delete-result-shot{
  display:block;
  width:100%;
  padding:14px;
  overflow:hidden;
  box-sizing:border-box;
}

.delete-confirm-shot img,
.delete-result-shot img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  margin:0 auto !important;
}

@media (max-width:820px){
  .delete-confirm-shot,
  .delete-result-shot{
    display:block !important;
    width:100% !important;
    padding:8px !important;
    box-sizing:border-box !important;
  }

  .delete-confirm-shot img,
  .delete-result-shot img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
  }
}


/* v36 — business hours article */
.hours-more-panel{
  margin-top:28px;
}

.hours-primary-shot,
.hours-secondary-shot,
.hours-success-shot{
  display:block;
  width:100%;
  padding:14px;
  overflow:hidden;
  box-sizing:border-box;
}

.hours-primary-shot img,
.hours-secondary-shot img,
.hours-success-shot img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  margin:0 auto !important;
}

@media (max-width:820px){
  .hours-primary-shot,
  .hours-secondary-shot,
  .hours-success-shot{
    display:block !important;
    width:100% !important;
    padding:8px !important;
    box-sizing:border-box !important;
  }

  .hours-primary-shot img,
  .hours-secondary-shot img,
  .hours-success-shot img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
  }
}


/* v37 — unavailable days article */
.unavailable-opening-shot,
.unavailable-form-shot,
.unavailable-result-shot{
  display:block;
  width:100%;
  padding:14px;
  overflow:hidden;
  box-sizing:border-box;
}

.unavailable-result-shot{
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
}

.unavailable-opening-shot img,
.unavailable-form-shot img,
.unavailable-result-shot img{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  margin:0 auto !important;
}

@media (max-width:820px){
  .unavailable-opening-shot,
  .unavailable-form-shot,
  .unavailable-result-shot{
    display:block !important;
    width:100% !important;
    padding:8px !important;
    box-sizing:border-box !important;
  }

  .unavailable-opening-shot img,
  .unavailable-form-shot img,
  .unavailable-result-shot img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
  }
}


/* v38 — staff weekly hours article */
.staff-hours-modal-shot .numbered-reference-frame,
.staff-hours-schedule-shot .numbered-reference-frame{
  max-width:640px;
  margin:0 auto;
}

.staff-hours-modal-shot img,
.staff-hours-schedule-shot img{
  width:100% !important;
  max-width:640px !important;
}

.staff-hours-success-shot{
  display:block;
  width:100%;
}

@media (max-width:820px){
  .staff-hours-modal-shot .numbered-reference-frame,
  .staff-hours-schedule-shot .numbered-reference-frame{
    max-width:100% !important;
  }

  .staff-hours-modal-shot img,
  .staff-hours-schedule-shot img,
  .staff-hours-success-shot img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
  }
}


/* v39 — staff unavailable day article */
.staff-unavailable-form-shot .numbered-reference-frame{
  max-width:640px;
  margin:0 auto;
}
.staff-unavailable-form-shot img{
  width:100% !important;
  max-width:640px !important;
}
@media (max-width:820px){
  .staff-unavailable-form-shot .numbered-reference-frame{max-width:100% !important;}
  .staff-unavailable-form-shot img{display:block !important;width:100% !important;max-width:100% !important;height:auto !important;}
}

/* =========================================================
   v40 — Balanced brand redesign
   Dark navigation, stronger category menu and varied accents.
   Content, screenshots and article structure remain unchanged.
   ========================================================= */

:root{
  --navy:#071a2d;
  --navy-2:#0d2a46;
  --teal:#12b7a6;
  --teal-dark:#078f81;
  --teal-soft:#e9faf7;
  --purple:#7657d6;
  --purple-dark:#6043bd;
  --purple-soft:#f1edff;
  --pink:#d94f83;
  --pink-dark:#b83d6b;
  --pink-soft:#fff0f6;
  --blue:#4877d5;
  --blue-dark:#315fbd;
  --blue-soft:#edf3ff;
  --orange:#be6b28;
  --orange-dark:#9d521e;
  --orange-soft:#fff3e8;
  --page-soft:#f6f8fc;
  --border-soft:#dfe5ee;
  --shadow-soft:0 10px 30px rgba(7,26,45,.055);
}

body{
  background:
    radial-gradient(circle at 85% 0%,rgba(72,119,213,.07),transparent 25%),
    linear-gradient(180deg,#f6f8fc 0%,#fbfcfe 42%,#f7f9fc 100%);
}

/* Dark header aligned with the public Radevou Online website */
.topbar{
  height:82px;
  grid-template-columns:300px minmax(280px,600px) 1fr;
  background:rgba(3,10,17,.97);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 26px rgba(3,10,17,.16);
}
.brand{color:#fff}
.brand-mark{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:2px solid var(--teal);
  border-radius:13px;
  color:var(--teal);
  font-size:26px;
  line-height:1;
  background:rgba(18,183,166,.08);
}
.brand-text{color:#fff;letter-spacing:-.025em}
.brand-text strong{color:var(--teal);font-weight:600}
.brand-subtitle{color:#9fb0c3;letter-spacing:.03em}
.search-wrap input{
  min-height:48px;
  padding:13px 16px 13px 46px;
  color:#17263a;
  background-color:#fff;
  border-color:rgba(255,255,255,.16);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234877d5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:16px center;
}
.search-wrap input:focus{
  outline:3px solid rgba(72,119,213,.22);
  border-color:var(--blue);
}
.app-link{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 18px;
  border:1px solid rgba(18,183,166,.36);
  border-radius:14px;
  color:#fff;
  background:linear-gradient(135deg,var(--teal),var(--teal-dark));
  box-shadow:0 8px 20px rgba(18,183,166,.18);
}
.app-link:hover{background:linear-gradient(135deg,#16c4b3,#078278)}
.icon-button span{background:#fff}

/* Sidebar / category navigation */
.layout{min-height:calc(100vh - 82px)}
.sidebar{
  border-right:1px solid var(--border-soft);
  background:
    linear-gradient(180deg,#fff 0%,#fbfcff 42%,#f6f8fc 100%);
}
.sidebar-inner{top:82px;padding:28px 18px 30px}
.sidebar-label{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 8px 16px;
  color:#6c7a8d;
  letter-spacing:.12em;
}
.sidebar-label::before{
  content:"";
  width:26px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--teal),var(--purple),var(--pink));
}
.category-nav{display:grid;gap:7px}
.category-nav details{
  --menu-accent:var(--teal);
  --menu-dark:var(--teal-dark);
  --menu-soft:var(--teal-soft);
  margin:0;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:15px;
  background:rgba(255,255,255,.72);
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.category-nav details:nth-child(5n+1){--menu-accent:var(--teal);--menu-dark:var(--teal-dark);--menu-soft:var(--teal-soft)}
.category-nav details:nth-child(5n+2){--menu-accent:var(--purple);--menu-dark:var(--purple-dark);--menu-soft:var(--purple-soft)}
.category-nav details:nth-child(5n+3){--menu-accent:var(--pink);--menu-dark:var(--pink-dark);--menu-soft:var(--pink-soft)}
.category-nav details:nth-child(5n+4){--menu-accent:var(--blue);--menu-dark:var(--blue-dark);--menu-soft:var(--blue-soft)}
.category-nav details:nth-child(5n+5){--menu-accent:var(--orange);--menu-dark:var(--orange-dark);--menu-soft:var(--orange-soft)}
.category-nav details[open]{
  border-color:color-mix(in srgb,var(--menu-accent) 24%,#dfe5ee);
  background:linear-gradient(180deg,#fff 0%,var(--menu-soft) 140%);
  box-shadow:0 7px 18px rgba(7,26,45,.045);
}
.category-nav summary{
  position:relative;
  display:grid;
  grid-template-columns:12px 1fr auto;
  align-items:center;
  gap:10px;
  padding:13px 12px;
  color:#22344a;
  font-size:14px;
  font-weight:750;
  transition:color .18s ease,background .18s ease;
}
.category-nav summary::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:4px;
  background:var(--menu-accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--menu-accent) 13%,transparent);
}
.category-nav summary::after{
  content:"+";
  color:var(--menu-dark);
  font-size:18px;
  font-weight:500;
}
.category-nav details[open] summary{
  color:var(--menu-dark);
  background:color-mix(in srgb,var(--menu-soft) 56%,#fff);
}
.category-nav details[open] summary::after{content:"−"}
.category-nav a{
  position:relative;
  margin:0 8px 5px;
  padding:10px 12px 10px 30px;
  border:1px solid transparent;
  color:#46566b;
  line-height:1.4;
  transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease;
}
.category-nav a::before{
  content:"";
  position:absolute;
  left:13px;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:color-mix(in srgb,var(--menu-accent) 48%,#cfd8e2);
  transform:translateY(-50%);
}
.category-nav a:hover{
  color:var(--menu-dark);
  background:color-mix(in srgb,var(--menu-soft) 68%,#fff);
  transform:translateX(2px);
}
.category-nav a.active{
  color:var(--menu-dark);
  border-color:color-mix(in srgb,var(--menu-accent) 24%,#fff);
  background:var(--menu-soft);
  box-shadow:inset 4px 0 0 var(--menu-accent);
}
.category-nav a.active::before{background:var(--menu-accent)}
.support-card{
  margin:30px 4px 0;
  padding:20px;
  border:1px solid rgba(118,87,214,.2);
  background:
    radial-gradient(circle at 100% 0%,rgba(217,79,131,.13),transparent 38%),
    linear-gradient(135deg,#f3f7ff 0%,#faf7ff 58%,#fff7fb 100%);
  box-shadow:0 9px 24px rgba(7,26,45,.05);
}
.support-card strong{color:var(--navy)}
.btn-primary{
  background:var(--navy);
  box-shadow:0 7px 16px rgba(7,26,45,.13);
}
.btn-primary:hover{background:var(--navy-2)}

/* Article surface and headers */
.content{padding-top:38px}
article{position:relative}
.breadcrumbs{margin-bottom:18px}
.breadcrumbs a{color:var(--blue-dark);font-weight:650}
.article-header{
  position:relative;
  overflow:hidden;
  padding:30px 32px;
  border:1px solid var(--border-soft);
  border-top:4px solid var(--blue);
  border-radius:24px;
  background:
    radial-gradient(circle at 94% 4%,rgba(118,87,214,.11),transparent 28%),
    linear-gradient(135deg,#fff 0%,#fbfcff 62%,#f8f5ff 100%);
  box-shadow:var(--shadow-soft);
}
.article-header::after{
  content:"";
  position:absolute;
  right:-52px;
  bottom:-76px;
  width:190px;
  height:190px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(72,119,213,.11),rgba(217,79,131,.08));
  pointer-events:none;
}
.article-header>div{position:relative;z-index:1}
.article-header h1{
  max-width:800px;
  color:var(--navy);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(34px,4.4vw,52px);
  line-height:1.07;
  letter-spacing:-.045em;
}
.article-header p{max-width:820px;color:#617086}
.meta-chips .chip:nth-child(1){color:var(--teal-dark);background:var(--teal-soft);border-color:rgba(18,183,166,.24)}
.meta-chips .chip:nth-child(2){color:var(--purple-dark);background:var(--purple-soft);border-color:rgba(118,87,214,.22)}
.meta-chips .chip:nth-child(3){color:var(--blue-dark);background:var(--blue-soft);border-color:rgba(72,119,213,.22)}

/* Alternating step accents */
.steps{gap:16px;margin-top:24px}
.step-card{
  --step-accent:var(--teal);
  --step-dark:var(--teal-dark);
  --step-soft:var(--teal-soft);
  border-color:var(--border-soft);
  box-shadow:0 7px 22px rgba(7,26,45,.04);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.step-card:nth-child(5n+1){--step-accent:var(--teal);--step-dark:var(--teal-dark);--step-soft:var(--teal-soft)}
.step-card:nth-child(5n+2){--step-accent:var(--purple);--step-dark:var(--purple-dark);--step-soft:var(--purple-soft)}
.step-card:nth-child(5n+3){--step-accent:var(--pink);--step-dark:var(--pink-dark);--step-soft:var(--pink-soft)}
.step-card:nth-child(5n+4){--step-accent:var(--blue);--step-dark:var(--blue-dark);--step-soft:var(--blue-soft)}
.step-card:nth-child(5n+5){--step-accent:var(--orange);--step-dark:var(--orange-dark);--step-soft:var(--orange-soft)}
.step-card:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(7,26,45,.065)}
.step-card[open]{
  border-color:color-mix(in srgb,var(--step-accent) 28%,#dfe5ee);
  box-shadow:inset 4px 0 0 var(--step-accent),0 10px 28px rgba(7,26,45,.055);
}
.step-card summary{background:linear-gradient(90deg,color-mix(in srgb,var(--step-soft) 64%,#fff),#fff 48%)}
.step-card[open] summary{border-bottom:1px solid color-mix(in srgb,var(--step-accent) 15%,#edf0f4)}
.step-number{background:var(--step-accent);box-shadow:0 6px 14px color-mix(in srgb,var(--step-accent) 20%,transparent)}
.step-card[open] .step-title{color:var(--step-dark)}
.chevron{color:var(--step-dark)}
.note{
  border-left-color:var(--blue);
  color:#315275;
  background:var(--blue-soft);
}
.screenshot-card{
  border-color:#dbe2eb;
  background:linear-gradient(135deg,#f1f5fa,#f8f5ff);
}

/* Supporting content */
.info-card{box-shadow:0 7px 20px rgba(7,26,45,.035)}
.info-grid .info-card:nth-child(4n+1){border-top:4px solid var(--teal);background:#fbfffe}
.info-grid .info-card:nth-child(4n+2){border-top:4px solid var(--purple);background:#fdfcff}
.info-grid .info-card:nth-child(4n+3){border-top:4px solid var(--pink);background:#fffafd}
.info-grid .info-card:nth-child(4n+4){border-top:4px solid var(--blue);background:#fbfcff}
.info-card.tip{background:var(--teal-soft);border-color:rgba(18,183,166,.24)}
.info-card.warning{background:var(--orange-soft);border-color:rgba(190,107,40,.24)}
.article-nav a{color:var(--blue-dark)}
.toc-card{
  border-color:var(--border-soft);
  border-top:4px solid var(--purple);
  box-shadow:0 8px 22px rgba(7,26,45,.04);
}
.toc-card strong{color:var(--navy)}
.toc-card a:hover{color:var(--purple-dark)}

/* Mobile refinements */
@media(max-width:820px){
  .topbar{height:70px;background:#050c14}
  .sidebar{top:70px;background:linear-gradient(180deg,#fff,#f7f9fc)}
  .sidebar-inner{padding:18px 14px 26px}
  .search-wrap input{
    width:44px;
    min-height:44px;
    padding:0;
    border-radius:50%;
    color:transparent;
    background-position:center;
  }
  .article-header{padding:23px 19px;border-radius:20px}
  .article-header h1{font-size:31px}
  .article-header p{font-size:15px}
  .step-card:hover{transform:none}
  .category-nav summary{padding:13px 11px}
}
@media(max-width:520px){
  .brand-mark{display:none}
  .brand-text{font-size:18px}
  .article-header h1{font-size:28px}
}


/* ==============================================================
   v41 — Explicit menu colors + exclusive accordion compatibility
   Uses direct colors instead of color-mix() for maximum reliability.
   ============================================================== */

.category-nav details.cat-teal{
  --menu-accent:#12b7a6;--menu-dark:#078f81;--menu-soft:#e9faf7;--menu-border:#b8e7e0;
}
.category-nav details.cat-purple{
  --menu-accent:#7657d6;--menu-dark:#6041bd;--menu-soft:#f1edff;--menu-border:#d5caf8;
}
.category-nav details.cat-pink{
  --menu-accent:#d94f83;--menu-dark:#b83b6a;--menu-soft:#fff0f6;--menu-border:#f2c6d8;
}
.category-nav details.cat-blue{
  --menu-accent:#4877d5;--menu-dark:#315fbd;--menu-soft:#edf3ff;--menu-border:#c8d8f7;
}
.category-nav details.cat-orange{
  --menu-accent:#be6b28;--menu-dark:#9d531b;--menu-soft:#fff3e8;--menu-border:#edcfb0;
}

.category-nav details{
  margin:0;
  overflow:hidden;
  border:1px solid #e3e8ef;
  border-left:4px solid var(--menu-accent);
  border-radius:15px;
  background:#fff;
  box-shadow:none;
}
.category-nav details[open]{
  border-color:var(--menu-border);
  border-left-color:var(--menu-accent);
  background:var(--menu-soft);
  box-shadow:0 8px 20px rgba(7,26,45,.05);
}
.category-nav summary{
  grid-template-columns:12px 1fr auto;
  color:#26384f;
  background:#fff;
}
.category-nav summary::before{
  background:var(--menu-accent);
  box-shadow:0 0 0 4px var(--menu-soft);
}
.category-nav summary::after{color:var(--menu-dark)}
.category-nav details[open] summary{
  color:var(--menu-dark);
  background:var(--menu-soft);
  border-bottom:1px solid var(--menu-border);
}
.category-nav a{
  margin:5px 8px;
  color:#46566b;
}
.category-nav a::before{background:var(--menu-accent);opacity:.55}
.category-nav a:hover{
  color:var(--menu-dark);
  background:#fff;
  border-color:var(--menu-border);
}
.category-nav a.active{
  color:var(--menu-dark);
  background:#fff;
  border-color:var(--menu-border);
  box-shadow:inset 4px 0 0 var(--menu-accent),0 4px 12px rgba(7,26,45,.035);
}
.category-nav a.active::before{background:var(--menu-accent);opacity:1}

.step-card.step-teal{
  --step-accent:#12b7a6;--step-dark:#078f81;--step-soft:#e9faf7;--step-border:#b8e7e0;
}
.step-card.step-purple{
  --step-accent:#7657d6;--step-dark:#6041bd;--step-soft:#f1edff;--step-border:#d5caf8;
}
.step-card.step-pink{
  --step-accent:#d94f83;--step-dark:#b83b6a;--step-soft:#fff0f6;--step-border:#f2c6d8;
}
.step-card.step-blue{
  --step-accent:#4877d5;--step-dark:#315fbd;--step-soft:#edf3ff;--step-border:#c8d8f7;
}
.step-card.step-orange{
  --step-accent:#be6b28;--step-dark:#9d531b;--step-soft:#fff3e8;--step-border:#edcfb0;
}
.step-card{border-color:#dfe5ee}
.step-card summary{background:linear-gradient(90deg,var(--step-soft),#fff 56%)}
.step-card[open]{
  border-color:var(--step-border);
  box-shadow:inset 4px 0 0 var(--step-accent),0 10px 28px rgba(7,26,45,.055);
}
.step-card[open] summary{
  color:var(--step-dark);
  background:var(--step-soft);
  border-bottom:1px solid var(--step-border);
}
.step-number{background:var(--step-accent);box-shadow:0 6px 14px rgba(7,26,45,.10)}
.step-card[open] .step-title,.chevron{color:var(--step-dark)}

@media(max-width:820px){
  .category-nav details{border-left-width:4px}
}


/* ==============================================================
   v43 — Hard accordion visibility fix
   Δεν βασίζεται στο προεπιλεγμένο CSS του browser.
   ============================================================== */

/* Αριστερό menu: όταν μια κατηγορία είναι κλειστή,
   κανένα υπομενού δεν επιτρέπεται να παραμένει ορατό. */
.category-nav > details:not([open]) > a {
  display: none !important;
}

.category-nav > details[open] > a {
  display: block !important;
}

/* Τα links μέσα στην ανοιχτή κατηγορία παίρνουν καθαρά
   την απόχρωση της συγκεκριμένης κατηγορίας. */
.category-nav > details[open] {
  background: var(--menu-soft) !important;
  border-color: var(--menu-border) !important;
  border-left-color: var(--menu-accent) !important;
}

.category-nav > details[open] > a {
  color: var(--menu-dark) !important;
  background: rgba(255,255,255,.72);
}

.category-nav > details[open] > a:hover {
  background: #fff !important;
}

.category-nav > details[open] > a.active {
  color: var(--menu-dark) !important;
  background: #fff !important;
  border-color: var(--menu-border) !important;
  box-shadow:
    inset 4px 0 0 var(--menu-accent),
    0 4px 12px rgba(7,26,45,.045) !important;
}

/* Βήματα άρθρων: κλειστό βήμα = κρυφό σώμα,
   ακόμη και αν παλαιότερο CSS έχει display:block. */
details.step-card:not([open]) > .step-body {
  display: none !important;
}

details.step-card[open] > .step-body {
  display: block !important;
}

/* Σαφέστερη ένδειξη της ανοιχτής κάρτας. */
details.step-card[open] {
  background: #fff;
}

details.step-card:not([open]) .chevron {
  transform: rotate(0deg) !important;
}

details.step-card[open] .chevron {
  transform: rotate(180deg) !important;
}