/* ===========================================================
   RoZa Dental — marketing site
   Design system ported from the EnovaWorks portable design
   language (typography scale, spacing rhythm, squircle shapes,
   motion rules, component patterns) and re-skinned with RoZa
   Dental's own product identity: the teal petal mark, teal/coral
   palette, and DM Sans — all sourced from the live RoZa Dental
   application, not invented.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&display=swap');

:root{
  /* --- palette, sourced from the RoZa Dental app design tokens --- */
  --paper:      #F4F6F7;   /* page background */
  --surface:    #FFFFFF;   /* cards, panels */
  --ink:        #102A30;   /* primary text */
  --muted:      #51676D;   /* secondary text */
  --muted2:     #93A4A8;   /* tertiary text, placeholders */
  --line:       #E1E7E8;   /* hairlines, borders, dividers */
  --line2:      #C9D3D5;

  --brand:      #15707F;   /* teal — primary accent, CTAs, links, icons */
  --brand-deep: #0B3E47;   /* deep teal — panels, hovers */
  --brand-soft: #E9F3F4;   /* soft teal fill */

  --coral:      #E85B68;   /* coral — secondary brand accent (used sparingly) */
  --coral-soft: #FDEEEF;

  --success:    #2F9E6E;
  --warn:       #D08A09;
  --purple:     #7C5CBF;   /* Enterprise tier */
  --gold:       #B08A2E;   /* Ultimate tier */

  --ease: cubic-bezier(.32,.72,0,1);
  --maxw: 1180px;
  --r: 20px;
  --r-lg: 30px;

  --s4: 40px; --s5: 64px; --s6: 100px;
}

*{box-sizing:border-box; corner-shape: squircle;}
:where(.dot,.tier-dot,.process-dot,.ai-orb){corner-shape:round;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

body{
  margin:0;
  font-family:'DM Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

h1,h2,h3,h4{margin:0; font-weight:800; letter-spacing:-.02em; color:var(--ink);}
h1{text-wrap:balance;}
h2,h3{text-wrap:balance;}
p{margin:0; text-wrap:pretty;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0; list-style:none;}
button{font-family:inherit;}

::selection{background:var(--brand-soft); color:var(--brand-deep);}
::placeholder{color:var(--muted2);}

/* ---------- layout ---------- */
/* The gutter is on .wrap, and most sections carry both classes
   (class="wrap section"). So the vertical rhythm below must be written as
   padding-top/padding-bottom, never the padding shorthand: a shorthand here
   resets left and right to zero and the text ends up flush against the edge of
   a phone screen. That is exactly what happened, on every page, in both
   languages, until 19 Aug.
   max() with env() keeps the gutter clear of the rounded corners and the
   camera cut-out when a notched phone is held in landscape. */
.wrap{
  max-width:var(--maxw); margin:0 auto;
  padding-left:max(24px, env(safe-area-inset-left));
  padding-right:max(24px, env(safe-area-inset-right));
}
.section{padding-top:var(--s6); padding-bottom:var(--s6);}
.section-compact{padding-top:var(--s5); padding-bottom:var(--s5);}
@media (max-width:780px){
  .section{padding-top:var(--s5); padding-bottom:var(--s5);}
  .section-compact{padding-top:var(--s4); padding-bottom:var(--s4);}
}

.section-head{max-width:640px; margin-bottom:var(--s5);}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ---------- type scale ---------- */
h1.hero{
  font-size:clamp(38px,5.2vw,64px);
  font-weight:800; letter-spacing:-.025em; line-height:1.04;
}
h1.inner{
  font-size:clamp(34px,4.8vw,56px);
  font-weight:800; letter-spacing:-.025em; line-height:1.06;
}
h2.section-title{
  font-size:clamp(28px,3.6vw,44px);
  font-weight:700; letter-spacing:-.02em; line-height:1.12;
}
h3.card-title{
  font-size:20px; font-weight:700; letter-spacing:-.01em; line-height:1.3;
}
.lead{
  font-size:18.5px; color:var(--muted); line-height:1.6;
}
.body-text{font-size:16px; line-height:1.65; color:var(--muted);}
.small-label{
  font-size:14px; font-weight:600; letter-spacing:0; color:var(--ink);
}
.micro{font-size:12.5px; color:var(--muted2);}

/* eyebrow — plain section label, no decoration */
.eyebrow{
  display:flex; align-items:center;
  font-size:13.5px; font-weight:700; letter-spacing:.02em;
  color:var(--brand); margin-bottom:14px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; border-radius:999px;
  font-size:14.5px; font-weight:700;
  border:1px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{background:var(--brand); color:#fff;}
.btn-primary:hover{background:var(--brand-deep); transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(11,62,71,.45);}
.btn-primary:active{transform:scale(.97);}

.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line2);}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand); transform:translateY(-2px);}
.btn-ghost:active{transform:scale(.97);}

.btn-white{background:#fff; color:var(--brand-deep);}
.btn-white:hover{background:var(--brand-soft); transform:translateY(-2px);}

.btn-sm{padding:9px 16px; font-size:13.5px;}

/* chip arrow — squircle chip containing a chevron; hover swaps chevrons */
.chip{
  width:26px; height:26px; border-radius:999px;
  background:var(--brand-soft); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  transition:background .25s var(--ease);
}
.btn .chip{width:24px; height:24px; background:rgba(255,255,255,.22);}
.btn-primary:hover .chip{background:rgba(255,255,255,.3);}
.chip svg{position:absolute; transition:transform .4s var(--ease);}
.chip svg.a{transform:translateX(0);}
.chip svg.b{transform:translateX(-22px);}
a:hover .chip, .card:hover .chip, button:hover .chip, .hoverable:hover .chip{background:var(--brand-deep);}
a:hover .chip svg.a, .card:hover .chip svg.a, button:hover .chip svg.a, .hoverable:hover .chip svg.a{transform:translateX(22px);}
a:hover .chip svg.b, .card:hover .chip svg.b, button:hover .chip svg.b, .hoverable:hover .chip svg.b{transform:translateX(0);}
.chip svg path{stroke:var(--brand);}
.btn-primary .chip svg path{stroke:#fff;}
a:hover .chip svg path, .card:hover .chip svg path, button:hover .chip svg path, .hoverable:hover .chip svg path{stroke:#fff;}

/* ---------- accessibility ---------- */
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:1000;
  background:var(--brand-deep); color:#fff; padding:12px 18px; border-radius:12px;
  font-size:14px; font-weight:700; transition:top .2s var(--ease);
}
.skip-link:focus{top:16px;}
:focus-visible{outline:2.5px solid var(--brand); outline-offset:3px;}

/* ---------- nav ---------- */
.nav-bar{
  position:sticky; top:16px; z-index:500; margin:0 auto;
  max-width:calc(var(--maxw) - 48px);
  padding:0 24px;
}
.nav-bar .nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:64px; padding:0 10px 0 18px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--line);
  border-radius:999px;
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.nav-bar.scrolled .nav-inner{box-shadow:0 18px 40px -24px rgba(16,42,48,.35);}

.brand-lockup{display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px;}
.brand-lockup img,.brand-lockup svg{width:28px; height:28px;}
.brand-lockup .b2{font-size:10px; font-weight:800; letter-spacing:.14em; color:var(--coral); margin-inline-start:3px;}

.nav-links{display:flex; align-items:center; gap:4px;}
.nav-links a{
  font-size:14px; font-weight:600; color:var(--muted);
  padding:9px 14px; border-radius:999px; position:relative;
  transition:color .2s var(--ease);
}
.nav-links a:hover{color:var(--ink);}
.nav-links a.active{color:var(--ink);}
.nav-links a.active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:3px;
  height:2px; background:var(--brand); border-radius:2px;
}
.nav-cta{display:flex; align-items:center; gap:6px; margin-inline-start:6px;}
.nav-burger{display:none;}

@media (max-width:920px){
  .nav-links{display:none;}
  .nav-bar .nav-inner .btn-primary.desktop-only{display:none;}
  .nav-burger{
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:50%; border:none;
    background:transparent; cursor:pointer;
  }
  .nav-burger span{display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; position:relative; transition:transform .3s var(--ease), opacity .3s var(--ease);}
  .nav-burger span::before,.nav-burger span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease);}
  .nav-burger span::before{top:-6px;}
  .nav-burger span::after{top:6px;}
  .nav-burger.open span{background:transparent;}
  .nav-burger.open span::before{transform:translateY(6px) rotate(45deg);}
  .nav-burger.open span::after{transform:translateY(-6px) rotate(-45deg);}
}
@media (min-width:921px){.nav-burger{display:none;}}

.mobile-menu{
  position:fixed; inset:0; z-index:600;
  background:rgba(244,246,247,.92);
  backdrop-filter:blur(20px);
  display:flex; flex-direction:column;
  padding:110px 32px 40px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
.mobile-menu.open{opacity:1; visibility:visible; transform:translateY(0); transition:opacity .35s var(--ease), transform .35s var(--ease), visibility 0s;}
.mobile-menu a{
  font-size:32px; font-weight:800; letter-spacing:-.02em; color:var(--ink);
  padding:12px 0; opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.mobile-menu.open a{opacity:1; transform:translateY(0);}
.mobile-menu.open a:nth-child(1){transition-delay:.06s;}
.mobile-menu.open a:nth-child(2){transition-delay:.11s;}
.mobile-menu.open a:nth-child(3){transition-delay:.16s;}
.mobile-menu.open a:nth-child(4){transition-delay:.21s;}
.mobile-menu.open a:nth-child(5){transition-delay:.26s;}
.mobile-menu .btn{margin-top:24px; align-self:flex-start;}
body.menu-open{overflow:hidden;}

/* ---------- cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover{transform:translateY(-5px); box-shadow:0 30px 60px -40px rgba(16,42,48,.35);}

.mod-card{padding:26px; display:flex; flex-direction:column; gap:14px; height:100%;}
.mod-card .icon-plane{
  width:48px; height:48px; border-radius:14px; background:var(--brand-soft);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.mod-card .icon-plane svg{width:26px; height:26px;}
.mod-card .tier-row{display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:6px;}
.tier-dot{width:7px; height:7px; border-radius:50%; flex-shrink:0;}
.tier-dot.starter{background:var(--muted2);}
.tier-dot.professional{background:var(--brand);}
.tier-dot.enterprise{background:var(--purple);}
.tier-dot.ultimate{background:var(--gold);}
.tier-label{font-size:12px; font-weight:600; color:var(--muted);}
.mod-card .feats{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px;}
.mod-card .feats span{
  font-size:12.5px; font-weight:600; color:var(--muted); background:var(--paper);
  border:1px solid var(--line); padding:5px 10px; border-radius:8px;
}
.mod-card.core{border-color:var(--brand-soft); background:linear-gradient(180deg,var(--brand-soft),#fff 60%);}

/* feature card (icon + text, no image) */
.feat-card{padding:28px; display:flex; flex-direction:column; gap:12px;}
.feat-card .icon-plane{
  width:48px; height:48px; border-radius:14px; background:var(--brand-soft);
  display:flex; align-items:center; justify-content:center;
}
.feat-card .icon-plane svg{width:26px; height:26px;}

/* plan / pricing card */
/* top padding is the same on every plan card so the badge sits fully inside
   the featured one without pushing its content out of line with the others */
.plan-card{
  padding:44px 24px 26px; display:flex; flex-direction:column; gap:14px; height:100%;
  position:relative;
}
.plan-card.featured{border-color:var(--brand); box-shadow:0 30px 60px -38px rgba(21,112,127,.4);}
.plan-card .badge{
  position:absolute; top:16px; inset-inline-end:22px;
  background:var(--brand); color:#fff; font-size:11.5px; font-weight:700;
  padding:5px 12px; border-radius:999px; white-space:nowrap;
}
.plan-name{display:flex; align-items:center; gap:9px; font-size:19px; font-weight:700;}
.plan-desc{color:var(--muted); font-size:14px; line-height:1.5; margin-bottom:2px;}
.plan-count{font-size:13.5px; font-weight:600; color:var(--brand);}
/* Each tier lists only what it adds to the one below, so the ladder is
   readable without diffing four lists. The chip states the inheritance. */
.plan-from{
  font-size:12.5px; font-weight:700; color:var(--brand-deep);
  background:var(--brand-soft); border-radius:10px; padding:7px 11px;
}
.plan-list{display:flex; flex-direction:column; gap:9px; margin-top:0;}
.plan-list li{display:flex; align-items:flex-start; gap:9px; font-size:13.5px; line-height:1.45; color:var(--ink); list-style:none;}
.plan-list li svg{flex-shrink:0; margin-top:2px;}
.plan-cta{margin-top:auto; padding-top:10px;}
/* one shared call to action instead of the same button on all four cards */
.plan-ask{text-align:center; margin-top:34px;}
.plan-ask .micro{margin-top:12px; max-width:520px; margin-inline:auto; line-height:1.6;}

/* stat strip */
.stat-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.stat{background:var(--surface); padding:26px 22px; text-align:left;}
.stat .n{font-size:clamp(26px,3vw,36px); font-weight:800; color:var(--brand-deep); letter-spacing:-.02em;}
.stat .l{font-size:13.5px; color:var(--muted); margin-top:4px;}
@media (max-width:780px){.stat-strip{grid-template-columns:1fr 1fr;}}

/* ---------- CTA panel ---------- */
.cta-panel{
  position:relative; overflow:hidden; border-radius:36px;
  background:linear-gradient(150deg,var(--brand-deep),#062a30);
  color:#fff; padding:var(--s5) var(--s5);
}
.cta-panel /* The mark sits on the CTA panel as a watermark, with a light that runs
   round its outline. The outline is a second <use> of the same shapes,
   stroked instead of filled; every shape carries pathLength="1" so one dash
   pattern behaves identically on a long petal and on the small circle, and
   all five complete a lap together. Opacity lives on the fill rather than on
   the container, so the travelling light can be brighter than the watermark
   it runs around. */
.mark-ghost{
  position:absolute; top:50%; right:-60px; transform:translateY(-50%);
  width:420px; height:420px; pointer-events:none;
}
.mg-body{fill:rgba(255,255,255,.10);}
.mg-halo,.mg-edge{
  fill:none;
  stroke-linecap:round;
  /* position along the outline is set by the scroll handler in script.js,
     not by an animation, so the light only moves when the visitor does */
  stroke-dashoffset:var(--mg, 0);
}
/* Stroke widths are in the logo's own user units. The mark renders 420px
   wide from a 2684-unit viewBox, so the scale is about 0.157: a stroke-width
   of 6 lands just under one screen pixel. Deliberately at the threshold of
   visibility, so the light is felt rather than watched. */
.mg-halo{
  stroke:rgba(214,240,247,.06);
  stroke-width:34;
  stroke-dasharray:.20 .80;
  filter:blur(8px);
}
.mg-edge{
  stroke:rgba(240,252,255,.22);
  stroke-width:4;
  stroke-dasharray:.07 .93;
  filter:drop-shadow(0 0 5px rgba(200,238,248,.18));
}
@media (prefers-reduced-motion: reduce){
  .mg-halo,.mg-edge{display:none;}
}
.cta-panel .mark-ghost svg{width:100%; height:100%; overflow:visible;}
.cta-panel 
.cta-panel-inner{position:relative; z-index:2; max-width:560px;}
.cta-panel h2{color:#fff;}
.cta-panel p{color:rgba(255,255,255,.78);}
.cta-actions{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}
@media (max-width:640px){
  .cta-panel{padding:var(--s4) 26px; border-radius:28px;}
  .cta-panel .mark-ghost{width:260px; height:260px; right:-80px;}
}

/* ---------- forms ---------- */
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:18px;}
.field label{font-size:14px; font-weight:600; color:var(--ink);}
.field input,.field textarea,.field select{
  padding:13px 15px; border-radius:14px; border:1px solid var(--line2);
  background:var(--paper); font-family:inherit; font-size:15px; color:var(--ink);
  outline:none; transition:border-color .2s, box-shadow .2s, background .2s;
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--brand); background:#fff;
  box-shadow:0 0 0 3px rgba(21,112,127,.15);
}
.field textarea{resize:vertical; min-height:130px;}
.field .hint{font-size:12.5px; color:var(--muted2);}
.form-status{font-size:14px; font-weight:600; margin-top:14px;}
.form-status.ok{color:var(--success);}
.form-status.err{color:var(--coral);}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); background:var(--surface); margin-top:var(--s6);}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px;
  /* vertical only: this element is class="wrap footer-grid" */
  padding-top:var(--s5); padding-bottom:var(--s4);
}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr; row-gap:32px;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}
.fbrand{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.fbrand img,.fbrand svg{width:26px; height:26px;}
.ftagline{max-width:220px; font-size:11px; letter-spacing:.04em; color:var(--muted2); font-weight:700; text-transform:uppercase; line-height:1.6;}
.fcol-title{font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted2); margin-bottom:14px;}
.fcol a,.fcol .frow{display:block; font-size:14.5px; color:var(--muted); padding:6px 0; transition:color .2s;}
.fcol a:hover{color:var(--brand);}
.footer-base{
  border-top:1px solid var(--line); display:flex; align-items:center;
  justify-content:space-between; gap:16px; flex-wrap:wrap;
  /* vertical only: this element is class="wrap footer-base" */
  padding-top:22px; padding-bottom:22px;
}
.footer-base .copy{font-size:13px; color:var(--muted2);}
.footer-base .flinks{display:flex; gap:18px; align-items:center;}
.footer-base .flinks a{font-size:13px; color:var(--muted2);}
.footer-base .flinks a:hover{color:var(--brand);}
.icon-badge{
  width:34px; height:34px; border-radius:10px; background:var(--brand-soft);
  display:flex; align-items:center; justify-content:center; color:var(--brand);
  transition:background .2s, color .2s;
}
.icon-badge:hover{background:var(--brand); color:#fff;}
.social-row{display:flex; align-items:center; gap:10px; margin-top:10px;}

/* ---------- misc ---------- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
@media (max-width:920px){.grid-3{grid-template-columns:1fr 1fr;} .grid-4{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.grid-2{grid-template-columns:1fr;} .grid-3{grid-template-columns:1fr;} .grid-4{grid-template-columns:1fr;}}

.pill-tag{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600;
  color:var(--brand); background:var(--brand-soft); padding:7px 13px; border-radius:999px;
}
.hairline{height:1px; background:var(--line); border:none; margin:0;}

/* Scroll-reveal only hides content once JS has confirmed it can run (html.js,
   set synchronously in <head>) and will animate it back in. Without that class
   -- JS blocked, JS errors, or a non-executing crawler -- content stays visible. */
.reveal{transition:opacity .8s var(--ease), transform .8s var(--ease);}
html.js .reveal{opacity:0; transform:translateY(16px);}
html.js .reveal.in,.reveal.in{opacity:1; transform:translateY(0);}

.breadcrumb{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted2); margin-bottom:18px;}
.breadcrumb a{color:var(--muted); font-weight:600;}
.breadcrumb a:hover{color:var(--brand);}

/* dashboard mock (hero / evidence visual, built from the product's own UI language) */
.mock{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 40px 80px -50px rgba(16,42,48,.5); overflow:hidden;
}
.mock-bar{display:flex; align-items:center; gap:7px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--paper);}
.mock-dot{width:8px; height:8px; border-radius:50%; background:var(--line2);}
.mock-body{padding:22px;}
.mock-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px;}
.mock-kpi{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px 14px;}
.mock-kpi .v{font-size:19px; font-weight:800; color:var(--brand-deep);}
.mock-kpi .l{font-size:10.5px; color:var(--muted2); margin-top:2px; text-transform:uppercase; letter-spacing:.05em;}
.mock-row{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line);}
.mock-row:last-child{border-bottom:none;}
.mock-time{font-size:12px; font-weight:700; color:var(--brand); width:44px; font-variant-numeric:tabular-nums;}
.mock-name{font-size:13.5px; font-weight:600; flex:1;}
.mock-sub{font-size:11.5px; color:var(--muted2);}
.mock-status{font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:999px;}
.mock-status.conf{background:var(--brand-soft); color:var(--brand-deep);}
.mock-status.tx{background:var(--coral-soft); color:var(--coral);}
.mock-status.sch{background:var(--paper); color:var(--muted2); border:1px solid var(--line);}

/* ---------- FDI odontogram (the real chart from the application) ---------- */
.chart-demo{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden;
}
/* generous vertical room: teeth grow outwards from the bite line on hover */
.chart-stage{padding:46px 20px 38px;}
.arch-label{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted2); font-weight:700; text-align:center;
  margin-bottom:28px;   /* clearance for teeth swelling upward on hover */
}
/* the arch itself is always drawn left-to-right, even on Arabic pages:
   FDI numbering is a clinical convention, not a text direction */
.teeth-row{display:flex; gap:3px; justify-content:center; align-items:flex-end; direction:ltr;}
.teeth-row.lower{align-items:flex-start; margin-top:2px;}
.arch-divider{display:flex; align-items:center; gap:10px; margin:10px auto; max-width:560px;}
.arch-line{flex:1; height:1px; background:var(--line);}
/* numbering-standard toggle: sits where the static "FDI" caption used to,
   between the two arches. Same control the application itself offers
   (setNum('F'|'U')), restyled to the site's pill language. */
.num-toggle{
  display:inline-flex; align-items:center; gap:2px; flex-shrink:0;
  padding:3px; border-radius:999px; background:var(--surface); border:1px solid var(--line2);
}
.num-toggle button{
  border:none; background:transparent; cursor:pointer; white-space:nowrap;
  font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--muted2);
  padding:6px 13px; border-radius:999px; font-family:inherit;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.num-toggle button:hover{color:var(--brand-deep);}
.num-toggle button.active{background:var(--brand); color:#fff;}
.num-toggle button:focus-visible{outline:2.5px solid var(--brand); outline-offset:2px;}

.tw{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  cursor:pointer; padding:3px 2px; border-radius:6px;
  transition:background .15s var(--ease), transform .18s var(--ease);
  border:none; background:transparent; will-change:transform;
}
/* each tooth grows away from the bite line, so the occlusal plane stays straight */
.teeth-row.upper .tw{transform-origin:bottom center;}
.teeth-row.lower .tw{transform-origin:top center;}
@media (prefers-reduced-motion: reduce){ .tw{transition:background .15s var(--ease);} }
.tw:hover{background:var(--brand-soft);}
.tw:focus-visible{outline:2.5px solid var(--brand); outline-offset:1px;}
.tw.selected{background:var(--brand-soft); box-shadow:inset 0 0 0 2px var(--brand);}
.tw.selected .tnum{color:var(--brand-deep); font-weight:800;}
.tnum{font-size:9px; color:var(--muted2); line-height:1; font-weight:600; font-variant-numeric:tabular-nums;}

/* read-out panel under the arch */
.chart-readout{
  border-top:1px solid var(--line); background:var(--paper);
  padding:20px 24px; display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap;
}
.chart-readout .ro-main{flex:1 1 260px; min-width:0;}
.ro-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.ro-fdi{
  min-width:44px; height:44px; padding:0 10px; border-radius:12px;
  background:var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; color:var(--ink); flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.ro-type{font-size:12.5px; color:var(--muted2); font-weight:600; margin-top:3px;}
.ro-status{font-size:12.5px; font-weight:700; padding:5px 12px; border-radius:999px; display:inline-flex;}
.ro-note{font-size:14px; color:var(--muted); line-height:1.6; margin-top:12px;}
.ro-ai{
  flex:1 1 260px; padding:14px 16px; border-radius:14px; background:var(--coral-soft);
  display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--ink);
  font-weight:600; line-height:1.55;
}
.chart-legend{
  display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
  padding:14px 20px; border-top:1px solid var(--line);
}
/* shown only while the chart is walking itself; removed on first click */
.chart-hint{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 20px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--muted2); font-weight:600;
}
.chart-hint .pulse{
  width:7px; height:7px; border-radius:50%; background:var(--brand); flex-shrink:0;
  animation:hintPulse 1.7s var(--ease) infinite;
}
@keyframes hintPulse{0%,100%{opacity:.3; transform:scale(.75);} 50%{opacity:1; transform:scale(1);}}
@media (prefers-reduced-motion: reduce){ .chart-hint .pulse{animation:none; opacity:.8;} }
.legend-item{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); font-weight:600;}
.legend-sq{width:11px; height:11px; border-radius:3px; flex-shrink:0; border:1px solid rgba(0,0,0,.12);}

@media (max-width:720px){
  .chart-stage{padding:24px 8px 18px; overflow-x:auto;}
  .teeth-row{gap:2px;}
  .num-toggle button{padding:5px 10px; font-size:10.5px;}
}

/* ---------- module list (platform page) ---------- */
.cat-block{
  display:grid; grid-template-columns:270px 1fr; gap:44px;
  padding:38px 0; border-top:1px solid var(--line);
}
.cat-block:first-of-type{border-top:none;}
@media (max-width:820px){.cat-block{grid-template-columns:1fr; gap:18px;}}
.cat-name{font-size:20px; font-weight:700; letter-spacing:-.01em; color:var(--ink);}
.cat-desc{font-size:14px; color:var(--muted); margin-top:8px; line-height:1.6;}
.cat-count{
  display:inline-block; margin-top:12px; font-size:12px; font-weight:700;
  color:var(--brand-deep); background:var(--brand-soft); padding:4px 10px; border-radius:999px;
}
.mod-row{
  display:grid; grid-template-columns:250px 1fr; gap:22px;
  padding:11px 0; border-bottom:1px solid var(--line);
}
.mod-row:last-child{border-bottom:none;}
@media (max-width:600px){.mod-row{grid-template-columns:1fr; gap:3px;}}
.mod-name{
  font-size:15px; font-weight:700; color:var(--ink); line-height:1.45;
  display:flex; align-items:center; gap:12px;
}
/* The application puts each module icon in a rounded tile (.mod-ico: 34px,
   radius 8, accent colour) rather than showing it bare. Ported, because at
   18px with a 1.5 stroke the icons read as faint decoration instead of as
   the software's own iconography. */
.mi{flex-shrink:0; color:var(--brand);}
.mi-tile{
  width:34px; height:34px; border-radius:10px; background:var(--brand-soft);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cat-ic{
  width:48px; height:48px; border-radius:14px; background:var(--brand-soft);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  margin-bottom:16px;
}
.mod-desc{font-size:14px; color:var(--muted); line-height:1.55;}

/* ---------- RoZa AI orb ----------
   Ported verbatim from the application's own .rz-ai-orb (27px in the nav,
   28px on the hero): round, brand-teal, soft highlight at 30%/28%, the RoZa
   mark in white inside at 16/27 of the diameter. Scaled to 40px here, so the
   mark sits at 24px. color-mix() values resolved to literals on purpose.
   The gentle pulse is the one addition the site makes: one slow swell and
   release, 2.4s, so the orb reads as alive without pulling the eye off the
   heading beside it. Disabled under prefers-reduced-motion by the global rule
   at the top of this file. */
@keyframes ai-pulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.07);}
}
.ai-orb{
  width:40px; height:40px; border-radius:50%; flex:0 0 auto;
  background:var(--brand);
  background:radial-gradient(circle at 30% 28%, #5B9BA5, var(--brand) 68%);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 2px 9px rgba(21,112,127,.45), inset 0 0 0 1.5px rgba(255,255,255,.28);
  animation:ai-pulse 2.4s ease-in-out infinite;
}
.ai-orb svg{width:24px; height:24px; display:block;}
.ai-lockup{display:flex; align-items:center; gap:11px; margin-bottom:16px;}
.ai-lockup .n{font-size:16px; font-weight:800; color:var(--ink); letter-spacing:-.01em;}

/* ---------- contact lines (About) ----------
   Modelled on the application's own About panel, which is a plain list of
   label/value rows rather than a designed block. */
.contact-lines{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden;
}
.contact-line{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:17px 24px; border-bottom:1px solid var(--line);
  transition:background .2s var(--ease);
}
.contact-line:last-child{border-bottom:none;}
.contact-line:hover{background:var(--brand-soft);}
.cl-label{font-size:14px; font-weight:700; color:var(--ink);}
.cl-value{font-size:14.5px; color:var(--brand); font-weight:600; text-align:end;}
@media (max-width:520px){
  .contact-line{flex-direction:column; align-items:flex-start; gap:4px; padding:15px 18px;}
  .cl-value{text-align:start;}
}

/* ---------- wide photo band ----------
   Full-bleed image with a hairline and a soft brand shadow; capped in height
   so a tall source still reads as a band rather than a poster. */
.photo-band{
  margin:0; border-radius:28px; overflow:hidden; line-height:0;
  border:1px solid var(--line);
  box-shadow:0 30px 60px -40px rgba(11,62,71,.45);
}
.photo-band img{
  width:100%; height:auto; max-height:440px; object-fit:cover; display:block;
}
@media (max-width:780px){
  .photo-band{border-radius:20px;}
  .photo-band img{max-height:240px;}
}

/* ---------- x-ray annotation mock ----------
   The radiograph is the application's own bitewing sample asset, watermarked
   synthetic by the app itself, so no patient image is used anywhere here. */
.xr-frame{background:#0d1113; border-radius:12px; padding:10px;}
.xr-shot{position:relative; border-radius:8px; overflow:hidden; line-height:0; background:#000;}
.xr-shot img{width:100%; height:auto; display:block;}
.xr-mark{
  position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px;
  border:2px solid var(--coral); border-radius:50%; corner-shape:round;
  box-shadow:0 0 0 3px rgba(232,91,104,.18);
}
/* the annotation sequence: marker lands, finding arrives, the dentist's note
   is typed, then it is committed to the record. Plays once, on entry. */
.xr-demo .xr-mark,
.xr-demo .xr-find,
.xr-demo .xr-notes,
.xr-demo .xr-saved{
  opacity:0; transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.xr-demo .xr-mark{transform:scale(.35);}
.xr-demo .xr-find,
.xr-demo .xr-notes{transform:translateY(7px);}
.xr-demo .xr-saved{transform:translateY(4px);}

.xr-demo.xr-s1 .xr-mark{opacity:1; transform:scale(1);}
.xr-demo.xr-s2 .xr-find{opacity:1; transform:none;}
.xr-demo.xr-s3 .xr-notes{opacity:1; transform:none;}
.xr-demo.xr-s4 .xr-saved{opacity:1; transform:none;}

/* one ping as the marker lands, then nothing */
.xr-demo.xr-s1 .xr-mark::after{
  content:""; position:absolute; inset:-2px; border-radius:50%; corner-shape:round;
  border:2px solid var(--coral);
  animation:xr-ping .9s var(--ease) .15s 1 forwards;
}
@keyframes xr-ping{
  from{transform:scale(1); opacity:.55;}
  to{transform:scale(2.6); opacity:0;}
}

.xr-caret{
  display:inline-block; width:1.5px; height:10px; margin-inline-start:1px;
  background:var(--brand); vertical-align:-1px; opacity:0;
}
.xr-demo.xr-s3 .xr-caret{opacity:1; animation:xr-blink .9s steps(1,end) infinite;}
.xr-demo.xr-done .xr-caret{opacity:0; animation:none;}
@keyframes xr-blink{0%,49%{opacity:1;} 50%,100%{opacity:0;}}

.xr-saved{
  display:flex; align-items:center; gap:7px; margin-top:9px; padding-inline-start:2px;
  font-size:10.5px; font-weight:600; color:var(--success);
}
.xr-saved svg{flex-shrink:0;}

@media (prefers-reduced-motion: reduce){
  .xr-demo .xr-mark,.xr-demo .xr-find,.xr-demo .xr-notes,.xr-demo .xr-saved{
    opacity:1 !important; transform:none !important;
  }
  .xr-demo .xr-mark::after,.xr-caret{display:none;}
}

.xr-tag{
  position:absolute; inset-inline-start:8px; top:8px;
  padding:3px 7px; border-radius:6px;
  background:rgba(8,14,17,.62); backdrop-filter:blur(3px);
  font-size:10px; line-height:1.2; letter-spacing:.04em; color:rgba(255,255,255,.88);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- language switch ---------- */
.lang-switch{
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 12px; border-radius:999px;
  border:1px solid var(--line2); background:var(--surface);
  font-size:13px; font-weight:700; color:var(--muted);
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.lang-switch:hover{border-color:var(--brand); color:var(--brand-deep); background:var(--brand-soft);}
.lang-switch svg{flex-shrink:0; opacity:.75;}