/* ==========================================================================
   WHY CHOOSE US — LAYERED DEPTH   ·   applied 2026-09-10

   The visual system for the homepage #wcu8 section, taken from version 02
   ("Layered Product Depth") of /doctor/homepage-ui-lab-v2.html. It replaces
   the Wide Bands appearance and the Trust Ledger anatomy underneath it;
   home-whyus/wcu-bands.css is kept on disk as the record of what was there.

   THE SECTION'S OWN TITLE IS NOT TOUCHED. The header rules in part 2 below
   are carried over from wcu-bands.css unchanged, so the eyebrow, the
   "Why Choose Us." headline and the sub-line render exactly as before. Only
   what sits under them is new.

   THREE SURFACES, and a rule for each — this is the whole idea:

     SHELF   #F4F7FC   the ground the section stands on — given by
                       site/shelf.css, which owns every section's surface,
                       edges and vertical breath. Never holds content, and
                       is never set here.
     SHEET   #FFFFFF   a thing you act on, raised off the shelf, radius 16.
     INLAY   #EFF3F9   a compartment cut INTO a sheet, radius 12, recessed.

   That ladder is why version 02 could be taken at all: its page surface is
   the shelf the homepage already stands on, so the depth it spends lands on
   the site's own ground rather than introducing a fourth one.

   Depth is spent to mean something: raised = actionable, recessed = holds
   evidence or detail belonging to the sheet around it. Nothing is raised for
   looks. Every shadow is the same three-part shadow at one of three
   strengths and every recess is the same inset pair, so the section has one
   lighting model rather than a collection of effects.

   One accent, not one hue per group. The four trust groups keep their
   data-grp attribute in the markup, but colour no longer sorts them — a
   standard that opens is told apart by the fact it has risen off the page.

   Naming: every class carries a wc- prefix and every rule is scoped to
   #wcu8. .head, .body, .close, .op, .btn and .in are all in use elsewhere on
   this page; nothing here may reach them. The four .wt- names that survive
   (.wt-wrap, .wt-head, .wt-eyebrow, .wt-sub) are the title's, and only the
   title's.
   ========================================================================== */

/* ---------- 1 · the section: tokens, ground, resets ---------------------- */
#wcu8{
  /* prefixed, because a bare --sheet or --line would be read by anything
     else on this page that happens to declare the same name */
  --wcu-sheet:  #FFFFFF;
  --wcu-inlay:  #EFF3F9;
  --wcu-inlay-2:#E6ECF5;
  --wcu-line:   rgba(16,24,39,.09);
  --wcu-line-2: rgba(16,24,39,.06);
  --wcu-accent:   var(--accent);
  --wcu-accent-2: #1257C4;

  /* one lighting model, three strengths */
  --wcu-lift-1: 0 1px 1px rgba(16,24,39,.04), 0 3px 6px -3px rgba(16,24,39,.10);
  --wcu-lift-2: 0 1px 2px rgba(16,24,39,.05), 0 8px 18px -8px rgba(16,24,39,.18), 0 26px 44px -32px rgba(16,24,39,.24);
  --wcu-lift-3: 0 2px 4px rgba(16,24,39,.06), 0 18px 34px -12px rgba(16,24,39,.24), 0 44px 70px -44px rgba(16,24,39,.36);
  --wcu-sink:   inset 0 1px 2px rgba(16,24,39,.07), inset 0 0 0 1px rgba(16,24,39,.045);

  --wcu-t: .2s cubic-bezier(.22,.7,.24,1);

  /* the one measurement the section hangs off: every child sets its own
     inset from the screen edge, which is what keeps the register aligned
     with the title above it at every width */
  --wcu-edge: max(var(--pad), calc((100% - 1180px) / 2));

}

/* the page has no element resets of its own, so the section declares the
   handful it needs. :where() contributes no specificity, so none of these
   can out-rank a rule below. */
#wcu8 :where(p, h2, h3, ul){ margin: 0; padding: 0; }
#wcu8 :where(ul){ list-style: none; }
#wcu8 :where(svg){ display: block; }
#wcu8 :where(button){
  font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0;
  cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent;
}
#wcu8 :focus-visible{ outline: 2px solid var(--wcu-accent); outline-offset: 3px; border-radius: 8px; }

/* ---------- 2 · the title — carried over unchanged ---------------------- */
#wcu8 .wt-wrap{ width: 100%; max-width: none; margin: 0; }
#wcu8 .wt-head{
  max-width: none; margin: 0; text-align: center; padding-inline: var(--wcu-edge);
}
#wcu8 .wt-head > *{ max-width: 760px; margin-inline: auto; }
#wcu8 .wt-eyebrow{
  font-family: var(--mono); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-2); font-weight: 500;
}
/* the size, line-height and tracking of this headline are owned by
   s9/home-scale.css, which is linked after this file — deliberately not
   restated, so the six section openers stay one scale */
#wcu8 h2{ margin: .4em 0 0; font-weight: 800; text-wrap: balance; }
#wcu8 h2 i{ font-style: normal; color: var(--accent); }
#wcu8 .wt-sub{
  margin: clamp(14px, 1.6vw, 20px) auto 0; max-width: 52ch;
  font-size: 16px; line-height: 1.58; color: var(--ink-2);
}

/* ---------- 3 · the register: eleven sheets on the ground --------------- */
#wcu8 .wc-reg{
  /* the top gap is the shelf system's "heading into its shelf" move and is
     restated in site/shelf.css against .wc-reg; this is the fallback */
  margin: clamp(26px, 2.8vw, 40px) var(--wcu-edge) 0;
  display: flex; flex-direction: column; gap: 8px;
}
#wcu8 .wc-sheet{
  background: var(--wcu-sheet); border-radius: 16px;
  box-shadow: var(--wcu-lift-1), inset 0 0 0 1px var(--wcu-line);
  transition: box-shadow var(--wcu-t);
  min-width: 0;
}
/* an open standard is the one that has risen — that is the whole signal */
#wcu8 .wc-sheet.is-open{ box-shadow: var(--wcu-lift-3), inset 0 0 0 1px var(--wcu-line); }

#wcu8 .wc-head{
  display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 16px;
  align-items: start; width: 100%; padding: 18px 20px;
}
#wcu8 .wc-n{
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px;
  background: var(--wcu-inlay); font-size: 13px; font-weight: 800; color: var(--ink-3);
  transition: background var(--wcu-t), color var(--wcu-t);
}
/* an open standard is a STATE: its plates take the site's selected navy,
   set by site/hier.css. The values here are only the fallback it corrects. */
#wcu8 .wc-sheet.is-open .wc-n{ background: var(--hr-sel, #0F1B3D); color: #fff; }
#wcu8 .wc-mid{ min-width: 0; }
#wcu8 .wc-cat{
  display: block; font-size: 10px; font-weight: 750; letter-spacing: .14em;
  text-transform: uppercase; color: var(--wcu-accent);
}
#wcu8 .wc-t{
  display: block; margin-top: 7px; font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 750; letter-spacing: -.03em; line-height: 1.25; color: var(--ink);
}
#wcu8 .wc-ben{
  display: block; margin-top: 7px; font-size: 13.5px; line-height: 1.55;
  color: var(--ink-2); max-width: 72ch;
}
#wcu8 .wc-cue{
  display: inline-flex; align-items: center; gap: 8px; align-self: center;
  font-size: 12px; font-weight: 650; color: var(--ink-3); white-space: nowrap;
}
#wcu8 .wc-cue i{ position: relative; width: 22px; height: 22px; border-radius: 999px; background: var(--wcu-inlay); }
#wcu8 .wc-cue i::before,
#wcu8 .wc-cue i::after{ content: ""; position: absolute; background: var(--ink-3); transition: transform var(--wcu-t); }
#wcu8 .wc-cue i::before{ top: 10px; left: 6px; right: 6px; height: 1.5px; border-radius: 2px; }
#wcu8 .wc-cue i::after{ left: 10px; top: 6px; bottom: 6px; width: 1.5px; border-radius: 2px; }
#wcu8 .wc-sheet.is-open .wc-cue i::after{ transform: scaleY(0); }

/* the reveal. The grid child carries NO padding of its own while shut —
   grid-template-rows:0fr zeroes the content box but padding would still
   occupy space, and the first line of the answer would stay visible. */
#wcu8 .wc-body{ display: grid; grid-template-rows: 0fr; }
#wcu8 .wc-body.is-open{ grid-template-rows: 1fr; }
#wcu8 .wc-in{ overflow: hidden; min-height: 0; }
#wcu8 .wc-sheet.is-open .wc-in{
  display: grid; grid-template-columns: minmax(0,320px) minmax(0,1fr);
  gap: 14px; padding: 0 20px 20px;
}

/* the proof: a recessed tray, with the drawn scene raised out of it */
#wcu8 .wc-proofinlay{
  background: var(--wcu-inlay); border-radius: 14px; padding: 14px;
  box-shadow: var(--wcu-sink); align-self: start;
}
#wcu8 .wc-scene{
  background: var(--wcu-sheet); border-radius: 10px; overflow: hidden;
  box-shadow: var(--wcu-lift-1);
}
#wcu8 .wc-scene svg{ width: 100%; height: auto; }
#wcu8 .wc-proofinlay p{ margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }

/* ---------- 4 · the questions inside a standard ------------------------- */
#wcu8 .wc-ops{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#wcu8 .wc-op{ background: var(--wcu-inlay); border-radius: 12px; overflow: hidden; min-width: 0; }
#wcu8 .wc-op.is-open{ background: var(--wcu-inlay-2); }
#wcu8 .wc-opq{ display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 14px; }
#wcu8 .wc-opic{
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border-radius: 8px; background: var(--wcu-sheet); box-shadow: var(--wcu-lift-1);
  color: var(--ink-3); transition: background var(--wcu-t), color var(--wcu-t);
}
#wcu8 .wc-opic svg{ width: 15px; height: 15px; }
#wcu8 .wc-op.is-open .wc-opic{ background: var(--hr-sel, #0F1B3D); color: #fff; }
#wcu8 .wc-opt{ flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 700; letter-spacing: -.014em; color: var(--ink); }
#wcu8 .wc-opt i{ display: block; margin-top: 2px; font-style: normal; font-size: 11px; font-weight: 400; color: var(--ink-4); }
#wcu8 .wc-opx{ position: relative; width: 12px; height: 12px; flex: none; }
#wcu8 .wc-opx::before,
#wcu8 .wc-opx::after{ content: ""; position: absolute; background: var(--ink-3); transition: transform var(--wcu-t); }
#wcu8 .wc-opx::before{ top: 5px; left: 0; right: 0; height: 1.5px; border-radius: 2px; }
#wcu8 .wc-opx::after{ left: 5px; top: 0; bottom: 0; width: 1.5px; border-radius: 2px; }
#wcu8 .wc-op.is-open .wc-opx::after{ transform: scaleY(0); }

#wcu8 .wc-opa{ display: grid; grid-template-rows: 0fr; }
#wcu8 .wc-opa.is-open{ grid-template-rows: 1fr; }
#wcu8 .wc-opin{ overflow: hidden; min-height: 0; }
#wcu8 .wc-opa.is-open .wc-opin{
  padding: 0 14px 14px 53px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
}

/* ---------- 5 · the revealed-answer vocabulary --------------------------
   The thirty-seven answers are written with these few classes, so all of
   them read as one voice. Scoped to #wcu8 .wc-opin — the a- names exist
   nowhere else on this page and must not start now. */
#wcu8 .wc-opin p{ margin: 0 0 9px; }
#wcu8 .wc-opin p:last-child{ margin-bottom: 0; }
#wcu8 .wc-opin b{ color: var(--ink); font-weight: 700; }
#wcu8 .wc-opin ul{ margin: 9px 0; display: grid; gap: 6px; }
#wcu8 .wc-opin ul li{ position: relative; padding-left: 15px; }
#wcu8 .wc-opin ul li::before{
  content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px;
  border-radius: 999px; background: var(--wcu-accent);
}
#wcu8 .wc-opin .a-sub{
  font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 6px;
}
#wcu8 .wc-opin .a-vs{ display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); }
#wcu8 .wc-opin .a-vs > div{ background: var(--wcu-sheet); border-radius: 11px; padding: 12px; box-shadow: var(--wcu-lift-1); }
/* the one addition to version 02's rules: a comparison is only readable if
   the two halves are told apart. The usual way stays recessed and quiet;
   the standard here is the raised one, on the accent's own hairline. */
#wcu8 .wc-opin .a-vs > .vs-a{ background: var(--wcu-inlay); color: var(--ink-3); box-shadow: var(--wcu-sink); }
#wcu8 .wc-opin .a-vs > .vs-b{ box-shadow: var(--wcu-lift-1), inset 0 0 0 1px color-mix(in srgb, var(--wcu-accent) 26%, transparent); }
#wcu8 .wc-opin .a-vs > .vs-b b{ color: var(--wcu-accent); }
#wcu8 .wc-opin .a-note{
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--wcu-sheet); box-shadow: var(--wcu-lift-1); font-size: 12px;
}
#wcu8 .wc-opin .a-who li{ padding: 9px 0 9px 15px; }
#wcu8 .wc-opin .aw-t i{ display: block; margin-top: 2px; font-style: normal; font-size: 11.5px; color: var(--ink-3); }
#wcu8 .wc-opin .aw-d{ display: none; }
#wcu8 .wc-opin .a-more,
#wcu8 .wc-opin .a-go{
  display: inline-flex; align-items: center; gap: 8px; margin-top: 9px;
  padding: 10px 15px; border-radius: 10px; background: var(--wcu-accent); color: #fff;
  font-size: 12.5px; font-weight: 700; box-shadow: var(--wcu-lift-1);
  transition: background var(--wcu-t);
}
#wcu8 .wc-opin .a-more:hover,
#wcu8 .wc-opin .a-go:hover{ background: var(--wcu-accent-2); }
#wcu8 .wc-opin .a-more svg,
#wcu8 .wc-opin .a-go svg{ width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
#wcu8 .wc-opin .a-act{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#wcu8 .wc-opin .a-alt{ display: flex; gap: 7px; }
#wcu8 .wc-opin .a-alt a{
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 10px;
  background: var(--wcu-sheet); box-shadow: var(--wcu-lift-1); font-size: 12px; font-weight: 650;
}
#wcu8 .wc-opin .a-alt a svg{ width: 14px; height: 14px; }
#wcu8 .wc-opin .a-fine{ margin-top: 9px; font-size: 11.5px; color: var(--ink-4); }

/* ---------- 6 · the close ----------------------------------------------- */
#wcu8 .wc-close{
  margin: 16px var(--wcu-edge) 0;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: var(--wcu-sheet); border-radius: 22px; padding: 24px;
  box-shadow: var(--wcu-lift-2), inset 0 0 0 1px var(--wcu-line);
}
#wcu8 .wc-closetx{ min-width: 0; }
#wcu8 .wc-ck{
  font-size: 10.5px; font-weight: 750; letter-spacing: .16em;
  text-transform: uppercase; color: var(--wcu-accent);
}
#wcu8 .wc-close h3{ margin-top: 9px; font-size: clamp(19px, 2.2vw, 26px); font-weight: 800; letter-spacing: -.034em; }
#wcu8 .wc-cp{ margin-top: 7px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
#wcu8 .wc-btn{
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 0 20px; border-radius: 12px;
  background: var(--wcu-accent); color: #fff; font-size: 14px; font-weight: 700;
  box-shadow: var(--wcu-lift-1);
  transition: background var(--wcu-t), transform var(--wcu-t), box-shadow var(--wcu-t);
}
#wcu8 .wc-btn:hover{ background: var(--wcu-accent-2); transform: translateY(-1px); box-shadow: var(--wcu-lift-2); }
#wcu8 .wc-btn svg{ width: 16px; height: 16px; }

/* ---------- 7 · narrower ------------------------------------------------- */
@media (max-width: 1000px){
  /* the proof tray stops competing for width and sits above the questions */
  #wcu8 .wc-sheet.is-open .wc-in{ grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 760px){
  #wcu8 .wt-wrap{ padding: 0 var(--gut); }
  #wcu8 .wc-head{ grid-template-columns: 38px minmax(0,1fr); gap: 12px; padding: 16px; }
  #wcu8 .wc-cue{ grid-column: 1 / -1; justify-content: space-between; margin-top: 4px; }
  #wcu8 .wc-sheet.is-open .wc-in{ padding: 0 16px 16px; }
  #wcu8 .wc-opa.is-open .wc-opin{ padding-left: 14px; }
  #wcu8 .wc-close{ padding: 20px; }
  #wcu8 .wc-btn{ margin-left: 0; width: 100%; justify-content: center; }
}
@media (min-width: 1500px){
  #wcu8 .wc-sheet.is-open .wc-in{ grid-template-columns: minmax(0,380px) minmax(0,1fr); gap: 18px; }
}

@media (prefers-reduced-motion: reduce){
  #wcu8 *, #wcu8 *::before, #wcu8 *::after{ transition: none !important; animation: none !important; }
}