/* ==========================================================================
   website-design/wscv.css — THE FOUR WEBSITE SCENES
   Linked only by /doctor/website-development.html.

   The Google Ads page draws each campaign type as a small picture inside the
   service card (.sc-pic > .cv-well > .cv.cv-search …), built in
   gads-services/gsvc.css. This file adds the four scenes that page does not
   have — one per website type — in exactly that vocabulary: the well, its
   ground, its hairline grid and its hue tokens (--h / --hs / --he / --hd)
   come from gsvc.css unchanged, and `.cv s`, `.cv-tag` and `.cv-stars` are
   reused as-is.

   WHY `.ws-` AND NOT `.lp-`
   landing-page/lpcv.css draws eight scenes of the same object: a browser
   window showing ONE page. These four are deliberately not that object —
   they carry a MENU, a catalogue, a before-and-after, and a dashboard,
   because that is the difference between the two services. Sharing a
   prefix would have invited one page's rules to reach the other's drawings,
   so each page owns its own namespace and loads only its own sheet.

     1 business   a site with real navigation and a page per service
     2 ecom       a catalogue, a cart and the payment methods
     3 redesign   the old site beside the new one, and the redirect map
     4 portal     a sidebar, dashboards and a workflow action

   SCALE. Nothing here is in px. `.cv` sets font-size from the well's own
   width (clamp(9px, 4.4cqw, 23px)), so every scene is drawn in `em` and
   reads identically in the rail, in the wide card and on a phone.
   ========================================================================== */


/* ==========================================================================
   1 · THE SHARED OBJECT — a browser window showing a website
   ========================================================================== */
.cv-ws{ display:flex; flex-direction:column; gap:.5em; padding:.95em .85em; }

.ws-win{ flex:1; min-height:0; display:flex; flex-direction:column;
  border-radius:.8em; background:#fff; border:1.5px solid var(--he);
  box-shadow:0 .5em 1.4em rgba(15,27,61,.09); overflow:hidden; }

.ws-bar{ flex:none; display:flex; align-items:center; gap:.42em;
  padding:.42em .55em; border-bottom:1px solid var(--he); background:#F7F9FD; }
.ws-dots{ flex:none; display:flex; gap:.2em; }
.ws-dots i{ width:.32em; height:.32em; border-radius:50%; background:#D3DBE7; }
.ws-url{ flex:1; min-width:0; font-style:normal; font-size:.48em; letter-spacing:.01em;
  color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:.28em .6em; border-radius:99px; background:#fff; border:1px solid var(--he); }

/* THE SITE'S OWN NAVIGATION — the thing a landing page removes and a website
   is built around. It is drawn on every scene that has a front end. */
.ws-nav{ flex:none; display:flex; align-items:center; gap:.42em;
  padding:.44em .55em; border-bottom:1px solid var(--he); background:#fff; }
.ws-logo{ flex:none; display:flex; align-items:center; gap:.28em;
  font-size:.5em; font-weight:800; letter-spacing:-.02em; color:var(--hd); }
.ws-logo s{ width:1.1em; height:1.1em; border-radius:.24em; background:var(--h);
  flex:none; height:1.1em !important; }
.ws-menu{ flex:1; min-width:0; display:flex; gap:.6em; overflow:hidden; }
.ws-menu span{ font-size:.44em; font-weight:650; color:var(--ink-3); white-space:nowrap; }
.ws-menu span.on{ color:var(--hd); font-weight:750; }
.ws-navcta{ flex:none; font-size:.42em; font-weight:750; color:#fff; background:var(--h);
  padding:.34em .7em; border-radius:.34em; white-space:nowrap; }

.ws-body{ flex:1; min-height:0; display:flex; flex-direction:column; gap:.36em;
  padding:.6em .62em; overflow:hidden; }

/* the fill rule: one child per scene absorbs the slack, so the square never
   leaves a void under the drawing */
.ws-grow{ flex:1 1 auto; min-height:0; }

.ws-h{ font-size:.8em; font-weight:800; letter-spacing:-.032em; line-height:1.14;
  color:var(--hd); }
.ws-h em{ font-style:normal; color:var(--h); }
.ws-k{ font-family:var(--mono); font-size:.42em; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-4); font-weight:500; }
.ws-lines{ display:flex; flex-direction:column; gap:.22em; }
.ws-cta{ align-self:flex-start; font-size:.56em; font-weight:750; color:#fff;
  background:var(--h); padding:.5em 1.1em; border-radius:.44em; white-space:nowrap; }
.ws-chips{ display:flex; flex-wrap:wrap; gap:.26em; }
.ws-chip{ font-size:.44em; font-weight:700; color:var(--hd); background:var(--hs);
  padding:.34em .6em; border-radius:99px; white-space:nowrap; }

.ws-note{ flex:none; display:flex; align-items:center; gap:.45em;
  font-family:var(--mono); font-size:.4em; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-4); }
.ws-note::before,.ws-note::after{ content:""; flex:1; height:1px; background:var(--he); }
.ws-note.is-on{ color:var(--hd); }

.ws-foot{ flex:none; display:flex; align-items:center; gap:.4em;
  padding:.44em .55em; border-top:1px solid var(--he); background:#F7F9FD; }
.ws-foot .ws-fb{ flex:1; display:flex; align-items:center; justify-content:center; gap:.3em;
  font-size:.46em; font-weight:750; color:var(--hd); background:#fff;
  border:1.2px solid var(--he); border-radius:.4em; padding:.4em .5em; }
.ws-foot .ws-fb svg{ width:1em; height:1em; flex:none; stroke-width:2.1; }
.ws-foot .ws-fb.is-fill{ color:#fff; background:var(--h); border-color:var(--h); }
.ws-foot .ws-sum{ flex:none; font-size:.6em; font-weight:800; letter-spacing:-.026em;
  color:var(--hd); padding-left:.15em; }


/* ==========================================================================
   2 · 01 BUSINESS WEBSITE — a page per service, each with its own URL
   ========================================================================== */
.cv-ws1 .ws-svcs{ display:flex; gap:.3em; }
.cv-ws1 .ws-svc{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.24em;
  padding:.44em .46em; border-radius:.44em; background:#fff; border:1px solid var(--he); }
.cv-ws1 .ws-svc b{ font-size:.44em; font-weight:750; color:var(--ink-2); line-height:1.2; }
/* the URL is the point of the drawing: one page per service, so each can rank */
.cv-ws1 .ws-svc i{ font-style:normal; font-size:.38em; font-weight:600; color:#3C7A45;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-ws1 .ws-trust{ display:flex; align-items:center; gap:.45em; }
.cv-ws1 .ws-trust .cv-stars u{ display:inline; font-size:.44em; font-weight:650;
  color:var(--ink-3); text-decoration:none; }


/* ==========================================================================
   3 · 02 E-COMMERCE — a catalogue, a cart and the ways people pay
   ========================================================================== */
.cv-ws2 .ws-cart{ flex:none; position:relative; display:flex; align-items:center;
  color:var(--hd); }
.cv-ws2 .ws-cart svg{ width:1em; height:1em; stroke-width:2.1; }
.cv-ws2 .ws-cart b{ position:absolute; right:-.34em; top:-.24em; font-size:.3em;
  font-weight:800; color:#fff; background:var(--h); border-radius:99px;
  min-width:1.5em; text-align:center; padding:.1em .3em; }
.cv-ws2 .ws-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.3em; }
.cv-ws2 .ws-prod{ display:flex; flex-direction:column; gap:.2em;
  padding:.3em; border-radius:.42em; background:#fff; border:1px solid var(--he); }
.cv-ws2 .ws-ph{ width:100%; aspect-ratio:4/3; border-radius:.3em; background:#F3F6FA;
  display:grid; place-items:center; overflow:hidden; }
.cv-ws2 .ws-ph svg{ width:58%; height:auto; color:var(--hd); opacity:.5; stroke-width:2.2; }
.cv-ws2 .ws-prod em{ font-style:normal; font-size:.46em; font-weight:800;
  letter-spacing:-.02em; color:var(--hd); }
.cv-ws2 .ws-prod u{ text-decoration:none; font-size:.36em; color:var(--ink-4);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-ws2 .ws-pay{ display:flex; flex-wrap:wrap; gap:.24em; }
.cv-ws2 .ws-pay span{ font-size:.4em; font-weight:700; color:var(--ink-2);
  background:#F3F6FA; border:1px solid var(--he); padding:.28em .5em; border-radius:.3em;
  white-space:nowrap; }


/* ==========================================================================
   4 · 03 REDESIGN — the old site beside the new one, and the redirect map
   ========================================================================== */
.cv-ws3 .ws-ba{ display:flex; align-items:stretch; gap:.4em; min-height:0; }
.cv-ws3 .ws-side{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.24em; }
.cv-ws3 .ws-sh{ font-family:var(--mono); font-size:.36em; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-4); }
.cv-ws3 .ws-mini{ flex:1; min-height:3.4em; display:flex; flex-direction:column; gap:.2em;
  padding:.36em; border-radius:.4em; background:#fff; border:1px solid var(--he); }
/* the old site is drawn tighter, greyer and without a menu — the difference
   is the drawing's whole argument */
.cv-ws3 .ws-mini.is-old{ background:#F4F5F7; border-color:#D9DDE3; gap:.14em; }
.cv-ws3 .ws-mini.is-old s{ background:#D3D7DE; }
.cv-ws3 .ws-mini b{ font-size:.4em; font-weight:750; color:var(--hd); line-height:1.2; }
.cv-ws3 .ws-mini.is-old b{ color:#7A828E; font-size:.34em; }
.cv-ws3 .ws-mnav{ display:flex; gap:.22em; }
.cv-ws3 .ws-mnav i{ flex:1; height:.22em; border-radius:99px; background:var(--he); }
.cv-ws3 .ws-arrow{ flex:none; align-self:center; display:flex; color:var(--h); }
.cv-ws3 .ws-arrow svg{ width:1em; height:1em; stroke-width:2.4; }
.cv-ws3 .ws-redir{ display:flex; flex-direction:column; gap:.24em; }
.cv-ws3 .ws-rr{ display:flex; align-items:center; gap:.34em; font-family:var(--mono);
  font-size:.42em; line-height:1.5; }
.cv-ws3 .ws-rr s{ display:inline-block; height:auto !important; background:none !important;
  color:#8A929E; text-decoration:line-through; white-space:nowrap; }
.cv-ws3 .ws-rr b{ color:#3C7A45; font-weight:650; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.cv-ws3 .ws-rr i{ font-style:normal; color:var(--ink-4); }


/* ==========================================================================
   5 · 04 CUSTOM WEB PORTAL — a sidebar, dashboards and a workflow action
   ========================================================================== */
.cv-ws4 .ws-app{ flex:1; min-height:0; display:flex; gap:.4em; }
.cv-ws4 .ws-side{ flex:none; width:26%; display:flex; flex-direction:column; gap:.24em;
  padding:.4em .36em; border-radius:.42em; background:#F5F7FB; border:1px solid var(--he); }
.cv-ws4 .ws-side span{ display:flex; align-items:center; gap:.26em;
  font-size:.44em; font-weight:650; color:var(--ink-3); }
.cv-ws4 .ws-side span.on{ color:var(--hd); font-weight:800; }
.cv-ws4 .ws-side span s{ width:.42em; height:.42em !important; border-radius:.12em;
  background:#C8CFDA; flex:none; }
.cv-ws4 .ws-side span.on s{ background:var(--h); }
.cv-ws4 .ws-role{ margin-top:auto; font-size:.34em; font-weight:700; color:var(--hd);
  background:var(--hs); border-radius:.28em; padding:.26em .3em; text-align:center; }
.cv-ws4 .ws-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.3em; }
.cv-ws4 .ws-tiles{ display:flex; gap:.26em; }
.cv-ws4 .ws-tile{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.1em;
  padding:.34em .36em; border-radius:.36em; background:#fff; border:1px solid var(--he); }
.cv-ws4 .ws-tile b{ font-size:.62em; font-weight:800; letter-spacing:-.03em; color:var(--hd);
  line-height:1.05; }
.cv-ws4 .ws-tile i{ font-style:normal; font-size:.32em; font-weight:650; color:var(--ink-4);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-ws4 .ws-rows{ display:flex; flex-direction:column; gap:.24em; }
.cv-ws4 .ws-rows.ws-grow{ justify-content:space-between; }
.cv-ws4 .ws-row{ display:flex; align-items:center; gap:.3em;
  padding:.28em .34em; border-radius:.32em; background:#fff; border:1px solid var(--he); }
.cv-ws4 .ws-row s{ flex:1; }
.cv-ws4 .ws-row u{ flex:none; text-decoration:none; font-size:.34em; font-weight:750;
  color:#fff; background:var(--h); border-radius:.24em; padding:.22em .42em; }
.cv-ws4 .ws-row.is-done u{ color:#0C5A25; background:#E3F3E9; }