/* ==========================================================================
   OUR SYSTEM + WHY CHOOSE US — quieted, 2026-09-13
   --------------------------------------------------------------------------
   One test for every mark in either module: does it say which container
   this is, which tab is open, which cards belong to it, or what can be done?
   What failed that test is removed here and not replaced.

     REMOVED   the accent dash + hairline above every card title (.w8-num)
               the position dashes under the rail (.w8-dots)
               the ring an older skin drew around a hovered, unselected tab
               the embossed inner shadow on each tick, and the white lip
               under the checklist divider
               OUR SYSTEM ONLY — the chevrons between the tabs, which turned
               blue beside the open tab and so marked selection a second time
               with a stroke (the order is already said by the heading's
               "Always in this order" and each tab's when-word); and the
               hairline over the closing row, a second line parallel to the
               container's own edge
     ADDED     one quiet perimeter on the master container — on desktop it
               had none, so the container dissolved into the section ground
               (Our System's ground is white, so only its dock row showed)
     SOFTENED  the divider inside a card, to --w8-edge2 ("the quieter rule
               inside a box"), so no inner line is firmer than the card edge

   Resulting ladder of edges, firmest to faintest:
       container  --pl-ring-2 #DDE4EE
       card       --pl-ring   #E3E6EB   (paper.css, unchanged)
       divider    --w8-edge2  rgba(11,13,18,.10)

   Every selector carries #w8-system or #wcu-ga, paired the way paper.css
   pairs them, so the two sections cannot drift apart and nothing else on
   the page that uses a .w8 class can be reached.  Linked after every other
   stylesheet; the id also out-ranks the unscoped sysw8.css rules on
   specificity, not only on order.  Delete the <link> to undo all of it.
   Markup, sysw8.js and wcusys.js are unchanged: report() still toggles the
   hidden pips, and Why Choose Us's equal-height pin re-measures without them.
   ========================================================================== */

/* ---- 1 · the card: title → sentence → divider → checklist -------------- */
/* the dash row goes, and so does the subgrid track it held, so the title
   starts on the card's own padding and titles still share one line */
#w8-system .w8-num,
#wcu-ga .w8-num{ display: none; }
#w8-system .w8-rail,
#wcu-ga .w8-rail{ grid-template-rows: auto auto auto; }   /* name · sentence · list */
#w8-system .w8-step,
#wcu-ga .w8-step{ grid-row: span 3; }
#w8-system .w8-sn,
#wcu-ga .w8-sn{ margin-top: 0; }

#w8-system .w8-li,
#wcu-ga .w8-li{ border-top-color: var(--w8-edge2); box-shadow: none; }
#w8-system .w8-li li::before,
#wcu-ga .w8-li li::before{ box-shadow: none; }
#w8-system .w8-li li::after,
#wcu-ga .w8-li li::after{ filter: none; }


/* ---- 2 · the rail's position dashes ------------------------------------- */
/* the peek of the next card at the container's edge, the drag and the swipe
   still say the rail moves */
#w8-system .w8-dots,
#w8-system .w8-view ~ .w8-dots,
#wcu-ga .w8-dots,
#wcu-ga .w8-view ~ .w8-dots{ display: none; }


/* ---- 3 · the master container ------------------------------------------- */
/* drawn as an overlay: an inset shadow on .w8-area itself would be painted
   over by the dock's and the canvas's own backgrounds, and a border would
   take 2px from the rail and shift every card */
#w8-system .w8-area,
#wcu-ga .w8-area{ position: relative; }
#w8-system .w8-area::after,
#wcu-ga .w8-area::after{
  content: ""; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--pl-ring-2, #DDE4EE);
}


/* ---- 4 · the tabs -------------------------------------------------------- */
/* selected = the white surface running into the panel (paper.css).  Hover is
   a lighter ground and darker ink, never an outline. */
#w8-system .w8-tab:hover:not([aria-selected="true"]),
#wcu-ga .w8-tab:hover:not([aria-selected="true"]){ box-shadow: none; }

/* Our System's flow chevrons.  The phone layer already dropped them; now the
   desktop does too.  The gap they sat in is kept, so no tab moves. */
#w8-system .w8--flow .w8-tab + .w8-tab .w8-tab-t::before{ content: none; }


/* ---- 5 · Our System's closing row --------------------------------------- */
/* the container's edge already ends the module; the line 34px under it said
   the same thing again.  Transparent, not removed, so the row keeps its 1px
   and nothing below it moves. */
#w8-system .w8-close{ border-top-color: transparent; box-shadow: none; }


/* ---- 6 · the phone ------------------------------------------------------- */
/* the container is edge to edge here, so its perimeter is the top and bottom
   edges it already has — brought to the same tone as the desktop one */
@media (max-width: 860px){
  #w8-system .w8-area::after,
  #wcu-ga .w8-area::after{ content: none; }
  #w8-system .w8-area,
  #wcu-ga .w8-area{
    border-top-color: var(--pl-ring-2, #DDE4EE);
    border-bottom-color: var(--pl-ring-2, #DDE4EE);
  }
}