/* ==========================================================================
   Chenvar Healthtech Private Limited — corporate site
   Design system: "the register"
   ========================================================================== */

:root{
  --ink:        #14171A;
  --ink-2:      #4A5158;
  --ink-3:      #5E666D;   /* 5.3:1 on paper — WCAG AA for small text */
  --paper:      #F3F4F1;
  --paper-2:    #FBFBFA;
  --rule:       #D5D8D2;
  --rule-2:     #E6E8E4;
  --seal:       #1B5E4B;
  --seal-soft:  #E4EDE8;
  --amber:      #96590E;

  --f-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --f-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1180px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --band: clamp(4rem, 9vw, 7.5rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:1.0625rem;
  line-height:1.62;
  font-variant-numeric:lining-nums tabular-nums;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--seal);
  outline-offset:3px;
  border-radius:1px;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--paper);
  padding:.75rem 1rem; z-index:100;
  font-family:var(--f-mono); font-size:.75rem;
}
.skip:focus{ left:0; }

/* --- type roles ---------------------------------------------------------- */

.eyebrow{
  font-family:var(--f-mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 1.25rem;
  display:block;
}
.eyebrow--seal{ color:var(--seal); }

.display{
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:"wdth" 108;
  font-size:clamp(2.25rem, 5vw, 4rem);   /* 64px ceiling — PRD s.7 */
  line-height:1.06;
  letter-spacing:-.022em;
  margin:0;
  text-wrap:balance;
}

h2.head{
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:"wdth" 108;
  font-size:clamp(1.75rem, 3.6vw, 2.6rem);
  line-height:1.1;
  letter-spacing:-.018em;
  margin:0 0 1.5rem;
  text-wrap:balance;
}

h3.sub{
  font-family:var(--f-display);
  font-weight:600;
  font-size:1.125rem;
  line-height:1.25;
  letter-spacing:-.008em;
  margin:0 0 .5rem;
}

.lede{
  font-size:clamp(1.125rem, 1.7vw, 1.3125rem);
  line-height:1.55;
  color:var(--ink-2);
  max-width:56ch;
  margin:1.75rem 0 0;
}

.prose p{ max-width:68ch; color:var(--ink-2); }
.prose p:first-child{ margin-top:0; }

.mono{ font-family:var(--f-mono); font-size:.8125rem; letter-spacing:.01em; }

/* Trade mark symbol — unregistered marks only. Never swap for the registered
   symbol until a registration certificate is actually issued. */
.tm{
  font-family:var(--f-mono);
  font-size:.40em;
  font-weight:400;
  vertical-align:.78em;
  letter-spacing:.02em;
  margin-left:.1em;
  line-height:0;
}

/* --- header -------------------------------------------------------------- */

.site-head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--rule);
}
.head-in{
  display:flex; align-items:center; gap:1.5rem;
  min-height:64px;
}
.mark{ display:inline-flex; align-items:center; text-decoration:none; flex:none; }

.nav{ margin-left:auto; display:flex; align-items:center; gap:1.6rem; }
.nav a{
  font-family:var(--f-mono);
  font-size:.75rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink-2);
  padding-block:.35rem;
  border-bottom:1px solid transparent;
  transition:color .18s, border-color .18s;
}
.nav a:hover{ color:var(--ink); border-bottom-color:var(--seal); }
.nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--seal); }

.nav-toggle{
  display:none; margin-left:auto;
  background:none; border:1px solid var(--rule);
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink);
  padding:.5rem .75rem; cursor:pointer;
}

@media (max-width: 940px){
  .nav-toggle{ display:block; }
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper-2); border-bottom:1px solid var(--rule);
    padding:.5rem var(--gut) 1.25rem;
  }
  .nav.open{ display:flex; }
  .nav a{ padding-block:.85rem; border-bottom:1px solid var(--rule-2); }
}

/* --- hero ----------------------------------------------------------------
   One component for every page. Height is content-driven: no min-height,
   no spacer, no opacity/animation state (PRD s.7; WEB-001/003/004).        */

.hero{
  padding-block:clamp(3rem, 6.5vw, 5.5rem);
  border-bottom:1px solid var(--rule);
}
.hero .eyebrow{ margin-bottom:1.25rem; }
.hero .display{ max-width:22ch; }
.hero .lede{ max-width:42rem; margin-top:1.5rem; }
.hero .actions{ margin-top:2rem; }

[id]{ scroll-margin-top:84px; }   /* anchors clear the sticky header */

.stat-strip{
  margin:clamp(2.5rem,5vw,3.75rem) 0 2.25rem;
  border-top:1.5px solid var(--ink);
}
.stat-row{
  display:grid;
  grid-template-columns:minmax(9.5rem, 15rem) 1fr;
  gap:1rem;
  border-bottom:1px solid var(--rule);
  padding:.7rem 0;
}
.stat-row dt{
  font-family:var(--f-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  margin:0; padding-top:.15rem;
}
.stat-row dd{
  margin:0; font-family:var(--f-mono); font-size:.8125rem; color:var(--ink);
}

.actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.25rem; }

.btn{
  display:inline-block; text-decoration:none;
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.10em;
  text-transform:uppercase; padding:.9rem 1.5rem;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  transition:background .18s, color .18s, border-color .18s;
}
.btn:hover{ background:var(--seal); border-color:var(--seal); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--rule); }
.btn--ghost:hover{ background:transparent; color:var(--seal); border-color:var(--seal); }
.btn--invert{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn--invert:hover{ background:var(--seal); color:var(--paper); border-color:var(--seal); }
.band--ink .btn--ghost{ color:var(--paper); border-color:#3A4045; }
.band--ink .btn--ghost:hover{ color:var(--paper); border-color:var(--paper); }

/* --- bands --------------------------------------------------------------- */

.band{ padding-block:var(--band); border-top:1px solid var(--rule); }
.hero + .band{ border-top:none; padding-top:clamp(2.5rem, 5vw, 4rem); }
.band--paper2{ background:var(--paper-2); }
.band--ink{ background:var(--ink); color:var(--paper); border-top:none; }
.band--ink .head, .band--ink h3.sub{ color:var(--paper); }
.band--ink .eyebrow{ color:#8E9A93; }
.band--ink p{ color:#B9C0BC; }
.band--ink .band-head p{ color:#B9C0BC; }
.band--ink .reg-row{ border-color:#2B3034; }
.band--ink .reg-name{ color:var(--paper); }
.band--ink .reg-id{ color:#7F8B85; }
.band--ink .reg-desc{ color:#B9C0BC; }

.band-head{ max-width:62ch; margin-bottom:clamp(2.5rem,5vw,3.5rem); }
.band-head p{ margin:0; color:var(--ink-2); font-size:1.0625rem; }

/* --- the register -------------------------------------------------------- */

.register{ border-top:1.5px solid currentColor; }

.reg-row{
  display:grid;
  grid-template-columns:3.5rem minmax(11rem, 15rem) 1fr auto;
  gap:1.25rem;
  align-items:baseline;
  padding:1.5rem 0;
  border-bottom:1px solid var(--rule);
  text-decoration:none;
}
a.reg-row{ transition:padding-left .22s ease, border-color .22s; }
a.reg-row:hover{ padding-left:.625rem; border-bottom-color:var(--seal); }
a.reg-row:hover .reg-name{ color:var(--seal); }

.reg-id{
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.1em;
  color:var(--ink-3); padding-top:.3rem;
}
.reg-name{
  font-family:var(--f-display); font-weight:600; font-size:1.1875rem;
  letter-spacing:-.01em; line-height:1.25; transition:color .18s;
}
.reg-name small{
  display:block; font-family:var(--f-mono); font-weight:400;
  font-size:.6875rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); margin-top:.4rem;
}
.reg-desc{ color:var(--ink-2); font-size:.9375rem; line-height:1.5; max-width:52ch; }

.tag{
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.13em;
  text-transform:uppercase; white-space:nowrap;
  padding:.3rem .6rem; border:1px solid var(--rule); color:var(--ink-3);
}
.tag--live{ color:var(--seal); border-color:var(--seal); background:var(--seal-soft); }
.tag--beta{ color:var(--amber); border-color:color-mix(in srgb, var(--amber) 40%, transparent); }

@media (max-width: 560px){
  .stat-row{ grid-template-columns:1fr; gap:.25rem; }
  .stat-row dt{ padding-top:0; }
}

@media (max-width: 820px){
  .reg-row{ grid-template-columns:2.75rem 1fr; gap:.5rem 1rem; }
  .reg-desc{ grid-column:2; margin-top:.5rem; }
  .tag{ grid-column:2; justify-self:start; margin-top:.75rem; }
}

/* Register inside a half-width split column: description drops to its own
   row so it keeps a readable measure (platforms page). */
.split .reg-row{ grid-template-columns:2.75rem 1fr auto; gap:.5rem 1rem; }
.split .reg-desc{ grid-column:2 / -1; grid-row:2; margin-top:.25rem; }
.split .tag{ grid-column:3; grid-row:1; justify-self:end; margin-top:0; }

/* --- card grid ----------------------------------------------------------- */

.grid{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.cell{ background:var(--paper); padding:clamp(1.5rem,2.6vw,2.25rem); }
.band--paper2 .cell{ background:var(--paper-2); }
.cell p{ margin:0; color:var(--ink-2); font-size:.9375rem; line-height:1.55; }
.cell .idx{
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.14em;
  color:var(--seal); display:block; margin-bottom:1.5rem;
}

@media (max-width: 900px){ .grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 760px){
  .grid--3,.grid--4,.grid--2{ grid-template-columns:1fr; }
}

/* --- list of capabilities ------------------------------------------------ */

.ticks{ list-style:none; margin:1rem 0 0; padding:0; }
.ticks li{
  padding:.5rem 0 .5rem 1.4rem; position:relative;
  font-size:.9375rem; color:var(--ink-2); border-bottom:1px solid var(--rule-2);
}
.ticks li::before{
  content:"—"; position:absolute; left:0; color:var(--seal);
  font-family:var(--f-mono); font-size:.75rem; top:.55rem;
}

/* --- contact / form ------------------------------------------------------ */

.split{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2rem,6vw,5rem); }
@media (max-width: 860px){ .split{ grid-template-columns:1fr; } }

.field{ margin-bottom:1.25rem; }
.field label{
  display:block; font-family:var(--f-mono); font-size:.6875rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:.5rem;
}
.field input, .field select, .field textarea{
  width:100%; font-family:var(--f-body); font-size:1rem; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--rule);
  padding:.8rem .9rem; border-radius:0;
}
.field textarea{ min-height:9rem; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--seal); box-shadow:0 0 0 3px var(--seal-soft);
}
.form-note{ font-family:var(--f-mono); font-size:.6875rem; color:var(--ink-3); line-height:1.6; }

.status{ font-family:var(--f-mono); font-size:.75rem; margin-top:1rem; min-height:1.2rem; }
.status[data-state="ok"]{ color:var(--seal); }
.status[data-state="err"]{ color:var(--amber); }

/* --- legal / long-form --------------------------------------------------- */

.doc{ max-width:74ch; }
.doc h2{
  font-family:var(--f-display); font-weight:600; font-size:1.25rem;
  letter-spacing:-.01em; margin:2.75rem 0 .75rem; padding-top:1.25rem;
  border-top:1px solid var(--rule);
}
.doc h3{ font-family:var(--f-display); font-weight:600; font-size:1rem; margin:1.75rem 0 .5rem; }
.doc p, .doc li{ color:var(--ink-2); font-size:1rem; }
.doc ul{ padding-left:1.1rem; }
.doc li{ margin-bottom:.4rem; }

/* --- footer -------------------------------------------------------------- */

.site-foot{ background:var(--ink); color:#9AA4A0; padding-block:clamp(3rem,6vw,4.5rem) 2rem; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem 2rem; }
@media (max-width: 860px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 520px){ .foot-grid{ grid-template-columns:1fr; } }

.foot-h{
  font-family:var(--f-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:#8A9590;
  margin:0 0 1rem;
}
.foot-strap{ font-size:.875rem; line-height:1.6; margin:1rem 0 0; max-width:30ch; color:#8E9A93; }
.foot-col ul{ list-style:none; margin:0; padding:0; }
.foot-col li{ margin-bottom:.6rem; }
.foot-col a{
  font-size:.875rem; text-decoration:none; color:#B9C0BC;
  border-bottom:1px solid transparent; transition:color .16s, border-color .16s;
}
.foot-col a:hover{ color:var(--paper); border-bottom-color:#4C5652; }

.foot-legal{
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.5rem;
  border-top:1px solid #2B3034;
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between;
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.04em; color:#8A9590;
}
.foot-legal p{ margin:0; }

@media (prefers-reduced-motion: reduce){
  a.reg-row:hover{ padding-left:0; }
  *{ transition:none !important; }
}

@media print{
  .site-head,.site-foot,.actions,.nav-toggle{ display:none; }
  body{ background:#fff; }
}

/* --- brand assets ---------------------------------------------------------
   Intrinsic aspect ratio always: fix one dimension, the other is auto.      */

.brand-logo{ display:block; width:auto; max-width:none; object-fit:contain; }
.brand-logo--head{ height:46px; }
.footer-logo-plate{ display:inline-flex; background:#fff; border-radius:4px; padding:.5rem .7rem; }
.brand-logo--foot{ height:52px; }
@media (max-width:420px){ .brand-logo--head{ height:38px; } }

.medclariva-brand{ display:block; width:min(100%, 320px); height:auto; margin:0 0 1.25rem; }

.sr-only{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important;
  margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important;
  white-space:nowrap!important; border:0!important; }