@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400..800&family=Noto+Sans+Telugu:wght@400..700&family=Noto+Sans+Kannada:wght@400..700&display=swap');

:root{
  --ground:#e7edf1; --app-bg:#f2f6f8; --surface:#ffffff; --surface-2:#f6f9fb; --surface-3:#eaf0f4;
  --line:#d3dee5; --line-strong:#b9c8d2;
  --tx:#12232e; --tx-2:#476070; --tx-3:#7b909d;
  --pr:#0d6e86; --pr-deep:#094f61; --pr-tint:#dceef3; --pr-ink:#ffffff;
  --elev-1: 0 1px 2px rgba(18,35,46,.05), 0 10px 24px -16px rgba(18,35,46,.28);
  --elev-2: 0 2px 10px rgba(18,35,46,.08), 0 22px 46px -20px rgba(18,35,46,.34);

  --rec:#c0272d;     --rec-bg:#fdeceb;
  --ready:#0f8a72;   --ready-bg:#e3f4ef;
  --queued:#4a5a75;  --queued-bg:#eaedf4;
  --proc:#1a63c4;    --proc-bg:#e7f0fd;
  --done:#7c4fd4;    --done-bg:#f1ecfb;
  --retry:#a15c00;   --retry-bg:#fdf1de;
  --off:#5b6d68;     --off-bg:#eef1f0;

  --font-disp:"Manrope", system-ui, sans-serif;
  --font-body:"Manrope", system-ui, "Noto Sans Telugu","Noto Sans Kannada",sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--ground); color:var(--tx);
  font-family:var(--font-body); line-height:1.55; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-disp); line-height:1.18; letter-spacing:-0.01em; margin:0 0 .5em;}
p{margin:0 0 1em;}
a{color:var(--pr-deep);}
img,svg{max-width:100%;}

.wrap{max-width:960px; margin:0 auto; padding:0 20px;}
.narrow{max-width:720px;}

/* ---------- sticky nav ---------- */
.topnav{
  position:sticky; top:0; z-index:40; background:rgba(242,246,248,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.topnav .row{display:flex; align-items:center; gap:14px; padding:12px 20px; max-width:960px; margin:0 auto; flex-wrap:wrap;}
.topnav .brand{font-weight:800; font-size:.95rem; color:var(--pr-deep); white-space:nowrap; margin-right:auto;}
.topnav .brand small{display:block; font-weight:600; font-size:.68rem; color:var(--tx-3);}
.steps{display:flex; gap:6px; flex-wrap:wrap;}
.step{
  font-size:.72rem; font-weight:700; color:var(--tx-3); text-decoration:none;
  padding:6px 10px; border-radius:99px; border:1px solid transparent; white-space:nowrap;
}
.step .n{display:inline-block; width:16px; height:16px; border-radius:50%; background:var(--surface-3);
  color:var(--tx-2); font-size:.62rem; text-align:center; line-height:16px; margin-right:5px;}
.step.current{background:var(--surface); border-color:var(--line); color:var(--pr-deep); box-shadow:var(--elev-1);}
.step.current .n{background:var(--pr); color:#fff;}
.step:hover:not(.current){color:var(--pr-deep);}

/* compact progress indicator — hidden by default, shown only on narrow viewports (see media query) */
.mnav{display:none; align-items:center; gap:8px; margin-left:auto; flex:none;}
.mnav-arrow{
  flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line); color:var(--pr-deep); text-decoration:none;
  font-size:1.2rem; font-weight:800; line-height:1;
}
.mnav-arrow.disabled{opacity:.35;}
.mnav-info{text-align:center; min-width:104px; line-height:1.2;}
.mnav-info .mnav-count{display:block; font-size:.62rem; font-weight:800; color:var(--pr-deep); text-transform:uppercase; letter-spacing:.05em;}
.mnav-info .mnav-label{display:block; font-size:.78rem; color:var(--tx); font-weight:800; margin-top:1px;}

/* ---------- hero / sections ---------- */
.hero{padding:64px 0 40px;}
.hero .kicker{font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--pr-deep); margin-bottom:14px;}
.hero h1{font-size:clamp(2rem,5vw,2.9rem); max-width:16ch;}
.hero .lede{font-size:1.15rem; color:var(--tx-2); max-width:52ch;}

section{padding:44px 0;}
section.alt{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
section.tint{background:var(--pr-tint);}
.section-head{margin-bottom:28px;}
.section-head .kicker{font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-3); margin-bottom:8px;}
.section-head h2{font-size:clamp(1.5rem,3.4vw,2.1rem);}
.section-head p{color:var(--tx-2); max-width:60ch;}

/* the one big idea */
.headline-idea{
  background:var(--surface); border:1px solid var(--line); border-radius:22px;
  padding:34px 30px; box-shadow:var(--elev-2); margin:28px 0;
}
.headline-idea .tag{display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--pr-deep); background:var(--pr-tint); padding:5px 11px; border-radius:99px; margin-bottom:14px;}
.headline-idea p{font-size:1.35rem; font-weight:700; font-family:var(--font-disp); color:var(--tx); margin:0; line-height:1.4;}
.headline-idea p .em{color:var(--pr-deep);}

/* ---------- cards / grids ---------- */
.grid{display:grid; gap:18px;}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:760px){.grid.cols-2,.grid.cols-3{grid-template-columns:1fr;}}

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px;
  box-shadow:var(--elev-1);
}
.card h3{font-size:1.05rem; margin-bottom:8px;}
.card p{color:var(--tx-2); font-size:.95rem; margin:0;}
.card .icon{width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--pr-tint); color:var(--pr-deep); margin-bottom:14px; font-size:1.2rem;}

/* problem cards with a status colour edge */
.card.edge-rec{border-left:4px solid var(--rec);}
.card.edge-retry{border-left:4px solid var(--retry);}
.card.edge-off{border-left:4px solid var(--off);}

/* ---------- step list ---------- */
.steplist{counter-reset:step; display:grid; gap:16px; margin:28px 0;}
.stepitem{display:flex; gap:18px; align-items:flex-start; background:var(--surface);
  border:1px solid var(--line); border-radius:16px; padding:18px 20px; box-shadow:var(--elev-1);}
.stepitem .num{counter-increment:step; flex:none; width:36px; height:36px; border-radius:50%;
  background:var(--pr); color:#fff; font-weight:800; font-family:var(--font-disp);
  display:grid; place-items:center; font-size:1rem;}
.stepitem .num::before{content: counter(step);}
.stepitem h3{margin:0 0 4px; font-size:1.02rem;}
.stepitem p{margin:0; color:var(--tx-2); font-size:.95rem;}

/* ---------- device frames ---------- */
.frame-row{display:flex; gap:26px; flex-wrap:wrap; justify-content:center; margin:26px 0;}
.frame-figure{width:230px; text-align:center;}
.frame-figure figcaption{margin-top:14px; font-size:.9rem; color:var(--tx-2); line-height:1.4;}
.frame-figure figcaption strong{display:block; color:var(--tx); font-size:.95rem; margin-bottom:2px;}

.phone{
  width:230px; height:498px; background:#04100d; border-radius:26px; padding:8px;
  box-shadow:0 20px 44px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.06);
  margin:0 auto;
}
.scr{
  width:100%; height:100%; border-radius:19px; overflow:hidden; position:relative;
  background:var(--app-bg); color:var(--tx); display:flex; flex-direction:column; font-size:11.5px;
}
.scr .sb{flex:none; display:flex; justify-content:space-between; padding:9px 14px 2px; font-size:.62rem; font-weight:700; color:var(--tx-3);}
.scr .tb{flex:none; padding:6px 13px 4px; display:flex; align-items:center; gap:8px;}
.scr .tb .ttl{font-weight:800; font-size:.82rem;}
.scr .body{flex:1; padding:6px 13px 12px; overflow:hidden;}

.statchip{display:inline-flex; align-items:center; gap:5px; font-size:.6rem; font-weight:800;
  border-radius:99px; padding:5px 9px;}
.statchip .d{width:6px; height:6px; border-radius:50%;}
.statchip.rec{color:var(--rec); background:var(--rec-bg);}
.statchip.rec .d{background:var(--rec); box-shadow:0 0 0 3px color-mix(in srgb, var(--rec) 25%, transparent);}
.statchip.ready{color:var(--ready); background:var(--ready-bg);}
.statchip.ready .d{background:var(--ready);}
.statchip.done{color:var(--done); background:var(--done-bg);}
.statchip.done .d{background:var(--done);}
.statchip.retry{color:var(--retry); background:var(--retry-bg);}
.statchip.retry .d{background:var(--retry);}
.statchip.off{color:var(--off); background:var(--off-bg);}
.statchip.off .d{background:var(--off);}

.mini-card{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:8px 10px; margin-top:7px;}
.mini-card .name{font-weight:800; font-size:.72rem;}
.mini-card .meta{font-size:.6rem; color:var(--tx-3); margin-top:1px;}
.mini-card .snippet{font-size:.62rem; color:var(--tx-2); margin-top:5px; line-height:1.35;}

.big-dot{width:70px; height:70px; border-radius:50%; margin:14px auto 8px; display:grid; place-items:center;
  background:var(--rec-bg); box-shadow:0 0 0 8px color-mix(in srgb, var(--rec) 12%, transparent);}
.big-dot .core{width:24px; height:24px; border-radius:50%; background:var(--rec);}

.confirm-sheet{position:absolute; left:8px; right:8px; bottom:8px; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; padding:12px; box-shadow:var(--elev-2);}
.confirm-sheet .q{font-size:.72rem; font-weight:700; margin-bottom:9px;}
.confirm-sheet .opts{display:flex; gap:8px;}
.confirm-sheet .opt{flex:1; text-align:center; padding:9px 4px; border-radius:10px; font-size:.68rem; font-weight:800;}
.confirm-sheet .opt.yes{background:var(--ready-bg); color:var(--ready);}
.confirm-sheet .opt.no{background:var(--surface-3); color:var(--tx-2);}

.note-block{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:9px 10px; margin-top:6px;}
.note-block .lbl{font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--pr-deep);}
.note-block .txt{font-size:.65rem; color:var(--tx-2); margin-top:3px; line-height:1.4;}

.approve-btn{margin-top:10px; background:var(--pr); color:#fff; text-align:center; font-weight:800;
  font-size:.72rem; border-radius:10px; padding:10px; box-shadow:var(--elev-1);}

/* browser frame for receptionist */
.browser{
  width:100%; max-width:640px; margin:0 auto; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; box-shadow:var(--elev-2);
}
.browser .chrome{background:var(--surface-2); border-bottom:1px solid var(--line); padding:9px 12px; display:flex; gap:6px; align-items:center;}
.browser .chrome .dot{width:9px; height:9px; border-radius:50%; background:var(--line-strong);}
.browser .chrome .url{flex:1; margin-left:8px; background:var(--surface); border:1px solid var(--line); border-radius:7px;
  padding:4px 10px; font-size:.68rem; color:var(--tx-3);}
.browser .content{padding:16px; font-size:.78rem;}
.browser .table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.browser table{width:100%; min-width:420px; border-collapse:collapse; font-size:.75rem;}
.browser th{text-align:left; color:var(--tx-3); font-weight:700; padding:6px 8px; border-bottom:1px solid var(--line); font-size:.68rem; text-transform:uppercase; letter-spacing:.04em;}
.browser td{padding:8px; border-bottom:1px solid var(--line);}
.browser .badge{font-size:.64rem; font-weight:800; padding:3px 8px; border-radius:99px; display:inline-block;}
.browser .badge.walkin{color:var(--retry); background:var(--retry-bg);}
.browser .badge.unmatched{color:var(--off); background:var(--off-bg);}
.browser .badge.confirmed{color:var(--ready); background:var(--ready-bg);}

/* ---------- reassurance list ---------- */
.reassure{display:grid; gap:14px; margin:24px 0;}
.reassure .item{display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:16px 18px;}
.reassure .item .ico{flex:none; width:34px; height:34px; border-radius:9px; background:var(--pr-tint); color:var(--pr-deep);
  display:grid; place-items:center; font-size:1.05rem;}
.reassure .item h3{margin:0 0 3px; font-size:.98rem;}
.reassure .item p{margin:0; color:var(--tx-2); font-size:.92rem;}

/* ---------- synthetic-data notice ---------- */
.synthetic-note{
  font-size:.8rem; color:var(--tx-3); background:var(--surface-2); border:1px dashed var(--line-strong);
  border-radius:10px; padding:10px 14px; margin:20px 0;
}

/* ---------- concept notice banner ---------- */
.concept-banner{background:var(--pr-deep); color:#fff; font-size:.82rem; font-weight:700; text-align:center; padding:9px 14px;}
.concept-banner .wrap{padding:0 20px;}

/* ---------- page nav (prev/next) ---------- */
.pagenav{display:flex; justify-content:space-between; gap:14px; margin:44px 0 10px; flex-wrap:wrap;}
.pagenav a{
  flex:1; min-width:220px; text-decoration:none; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:16px 18px; color:var(--tx); box-shadow:var(--elev-1);
}
.pagenav a:hover{border-color:var(--pr);}
.pagenav .lbl{font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--tx-3);}
.pagenav .ttl{font-weight:800; margin-top:3px;}
.pagenav .next{text-align:right;}

footer{padding:34px 0 60px; color:var(--tx-3); font-size:.82rem; text-align:center;}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:.88rem; border-radius:12px;
  padding:11px 18px; cursor:pointer; border:1px solid transparent; font-family:var(--font-body);}
.btn.primary{background:var(--pr); color:#fff; box-shadow:var(--elev-1);}
.btn.primary:hover{background:var(--pr-deep);}
.btn.ghost{background:var(--surface); border-color:var(--line); color:var(--tx);}
.btn.ghost:hover{border-color:var(--pr);}
.btn:disabled{opacity:.55; cursor:not-allowed;}

/* ---------- feedback widget ---------- */
#fb-toggle{
  position:fixed; right:18px; bottom:18px; z-index:60; background:var(--pr); color:#fff; border:none;
  border-radius:99px; padding:12px 18px; font-weight:800; font-size:.85rem; box-shadow:var(--elev-2);
  cursor:pointer; display:flex; align-items:center; gap:8px; font-family:var(--font-body);
}
#fb-toggle .dot{width:8px; height:8px; border-radius:50%; background:#fff; opacity:.85;}
#fb-panel{
  position:fixed; right:18px; bottom:78px; z-index:61; width:min(340px, calc(100vw - 36px));
  max-height:min(72vh, 72dvh); overflow-y:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--elev-2);
  padding:16px; display:none; flex-direction:column; gap:10px;
}
#fb-panel.open{display:flex;}
#fb-panel .fb-head{display:flex; justify-content:space-between; align-items:center;}
#fb-panel .fb-head strong{font-size:.9rem;}
#fb-panel .fb-close{background:none; border:none; font-size:1rem; color:var(--tx-3); cursor:pointer; line-height:1;}
#fb-panel .fb-context{font-size:.7rem; color:var(--tx-3); background:var(--surface-2); border-radius:8px; padding:6px 9px;}
#fb-panel textarea{
  width:100%; min-height:90px; resize:vertical; border:1px solid var(--line); border-radius:10px; padding:10px;
  font-family:var(--font-body); font-size:.85rem; color:var(--tx); background:var(--app-bg);
}
#fb-panel .fb-status{font-size:.74rem; color:var(--tx-2); min-height:1.2em;}
#fb-panel .fb-status.ok{color:var(--ready);}
#fb-panel .fb-status.wait{color:var(--retry);}
#fb-panel .fb-actions{display:flex; gap:8px;}
#fb-panel .fb-actions .btn{flex:1; justify-content:center; padding:9px 10px; font-size:.8rem;}

/* feedback log page (page 6) */
.fb-log{display:grid; gap:12px; margin:20px 0;}
.fb-log .entry{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px;}
.fb-log .entry .meta{font-size:.68rem; font-weight:800; color:var(--pr-deep); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px;}
.fb-log .entry .txt{font-size:.9rem; color:var(--tx);}
.fb-log .entry .sent{font-size:.68rem; color:var(--tx-3); margin-top:8px;}
.fb-log .empty{color:var(--tx-3); font-size:.9rem; text-align:center; padding:30px 0;}

@media (max-width:640px){
  /* collapse the six-item step list into the compact prev/next indicator so the
     sticky header stays a single line and content is visible immediately */
  .steps{display:none;}
  .mnav{display:flex;}
  .topnav .row{gap:8px; flex-wrap:nowrap; padding:9px 14px;}
  .topnav .brand{font-size:.82rem;}
  .topnav .brand small{display:none;}

  /* concept banner becomes one economical line instead of dominating the screen */
  .concept-banner{font-size:.66rem; font-weight:700; padding:5px 10px; line-height:1.3;}
  .concept-banner .wrap{padding:0 10px;}

  .hero{padding:32px 0 24px;}
  .frame-figure{width:180px;}
  .phone{width:180px; height:390px;}

  /* feedback widget: keep the send control reachable above an on-screen keyboard
     and give the textarea room without the panel overflowing the viewport */
  #fb-toggle{right:14px; bottom:14px; padding:11px 16px; font-size:.8rem;}
  #fb-panel{right:14px; left:14px; width:auto; bottom:72px; max-height:min(65vh, 65dvh);}
  #fb-panel textarea{min-height:70px;}
}

/* ============================================================
   Screen-walkthrough pages (screens.html, front-desk.html) —
   stage grouping + device-frame galleries built from the
   internal screen spec. Scoped additions; does not touch the
   .frame-row/.frame-figure/.phone/.browser patterns above,
   which stay untouched for backward compatibility.
   ============================================================ */
.stage{margin:52px 0;}
.stage:first-of-type{margin-top:28px;}
.stage-head{max-width:70ch; margin-bottom:22px;}
.stage-head .stage-kicker{display:flex; align-items:center; gap:10px; font-size:.72rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:var(--pr-deep); margin-bottom:6px;}
.stage-head .stage-kicker .stage-n{display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; background:var(--pr); color:#fff; font-size:.7rem;}
.stage-head h2{font-size:clamp(1.25rem,2.6vw,1.6rem); margin-bottom:6px;}
.stage-head p{color:var(--tx-2); font-size:.95rem; margin:0;}

.frame-deck{display:flex; flex-wrap:wrap; gap:28px 24px; margin:0 0 8px;}
.frame-deck.phones{justify-content:flex-start;}

.spec-frame{width:393px; max-width:100%;}
.spec-frame figcaption{margin-top:14px; font-size:.88rem; color:var(--tx-2); line-height:1.45; max-width:393px;}
.spec-frame figcaption strong{display:block; color:var(--tx); font-size:.95rem; margin-bottom:3px;}

.spec-phone-wrap{width:393px; margin:0 auto;}
.spec-phone-wrap .scale-inner{transform-origin: top left;}

.spec-browser-frame{width:100%;}
.browser-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; padding:4px 2px 10px; margin:0 auto;}
.spec-frame.wide{width:100%; min-width:0;}
.spec-frame.wide figcaption{max-width:70ch; margin-left:auto; margin-right:auto; text-align:left;}

@media (max-width:900px){
  .spec-phone-wrap{width:283px; height:613px; overflow:hidden;}
  .spec-phone-wrap .scale-inner{transform:scale(.72);}
  .spec-frame{width:283px;}
  .spec-frame figcaption{max-width:283px;}
}
@media (max-width:560px){
  .spec-phone-wrap{width:220px; height:477px;}
  .spec-phone-wrap .scale-inner{transform:scale(.56);}
  .spec-frame{width:220px;}
  .spec-frame figcaption{max-width:220px;}
  .frame-deck{gap:22px 16px; justify-content:center;}
}