/* The public shop. Not the console: nobody here is signed in, and this is the
   first thing a stranger sees of the platform. */

body.smx-shop{background:var(--canvas)}

.sh-top{display:flex;align-items:center;gap:16px;padding:8px 24px;background:var(--navy)}
/* Sized by width, not height: the logo is a wide swoosh beside the wordmark,
   so capping the height shrinks the words to nothing. The cap is a floor under
   the whole header — an image is the one flex item that will not shrink below
   its own stated width, so without it the logo alone can push the page wider
   than the screen. */
.sh-top img{width:200px;height:auto;max-width:100%}
/* Participants land on the shop more often than anyone expects, so the way
   out is a button rather than a link in the footer. margin-left:auto sits on
   this one, so it pushes both it and Sign in to the right as a pair. */
.sh-take{margin-left:auto;flex:none;white-space:nowrap}
.sh-top .sh-signin{margin-left:0;color:rgba(255,255,255,.85);font-size:13.5px;font-weight:600}
.sh-signin:hover{color:#fff;text-decoration:none}
/* On cart and checkout there is no gold button to carry the auto margin, so the
   one link in the header would otherwise sit against the logo. */
.sh-top .sh-toplink{margin-left:auto}

.sh-body{max-width:1140px;margin:0 auto;padding:60px 20px 70px}

/* Three alternatives, side by side and the same height, so the choice can be
   read across rather than scrolled through. */
.sh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}

.sh-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column}
.sh-card-b{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.sh-card h2{font-family:var(--f-head);font-size:18px;margin:0 0 6px;line-height:1.25}

/* The picture. A fixed shape whether or not there is one in it, so the three
   cards keep the same silhouette before any images have been uploaded. */
.sh-pic{aspect-ratio:16/10;background:var(--surface-2);border-bottom:1px solid var(--border)}
.sh-pic img{display:block;width:100%;height:100%;object-fit:cover}
.sh-pic.is-empty{background:linear-gradient(135deg,var(--surface-2) 0%,var(--surface) 100%)}

.sh-desc{margin:0 0 14px;color:var(--ink-soft);font-size:13.5px;line-height:1.55}

.sh-price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.sh-price b{font-family:var(--f-head);font-size:24px;font-variant-numeric:tabular-nums;color:var(--navy)}
.sh-price small{color:var(--muted);font-size:12px}

/* Pushed to the bottom edge, so every card's button sits on the same line
   however much or little sits above it. */
.sh-act{margin-top:auto;padding-top:18px}
.sh-act form{margin:0}  /* one button is wrapped in a form; it must not sit lower for it */

.sh-qty{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sh-qty label{font-size:12.5px;font-weight:600}
.sh-qty input{width:78px}

.sh-go{width:100%;justify-content:center;margin-top:14px;padding:12px}
/* Small print under a button or a form, on the buying pages. The reserved
   height dates from the shop cards, where a caption that wrapped pushed its
   button up and broke the row; those cards carry no captions any more, so on
   the pages that remain it is simply breathing room. */
.sh-note{margin:10px 0 0;font-size:12px;color:var(--muted);text-align:center;line-height:1.5;
  min-height:3em}
.sh-lede{margin:0 0 18px;color:var(--ink-soft);font-size:14.5px}
.sh-narrow{max-width:520px;margin-left:auto;margin-right:auto;padding:22px 24px}
/* The account form carries four fields, and 520px leaves it looking lost on a
   wide screen. The message cards that share sh-narrow keep it: a two-line
   notice in a wide box reads worse. */
.sh-form{max-width:660px;padding:26px 30px}
.sh-unavailable{margin:0;padding:12px 14px;border-radius:var(--r-sm);background:var(--surface-2);
  border:1px solid var(--border);color:var(--muted);font-size:13px;text-align:center}

/* The way to the published norms, under the three products. No panel and no
   heading: the button is the whole of it, standing on the page itself. The
   margin is what the panel's padding used to be, so the button still sits
   clear of the cards above rather than looking attached to the last one. */
.sh-stats{margin:52px 0 6px;text-align:center}

/* Big enough to be the thing the eye lands on after the three prices. Navy
   rather than gold: the three buttons above it are gold and they buy things,
   and this one does not. */
.sh-stats-go{padding:18px 46px;font-size:18px;border-radius:var(--r-sm);
  background:var(--navy);color:#fff;box-shadow:var(--shadow);
  text-decoration:none;transition:background .15s ease,transform .15s ease}
.sh-stats-go:hover{background:var(--navy-600);color:#fff;text-decoration:none;transform:translateY(-1px)}
.sh-stats-go:focus-visible{outline:3px solid var(--navy);outline-offset:3px}

@media (max-width:560px){
  .sh-stats{margin-top:38px}
  /* Full width on a phone: there is nothing to sit beside it. */
  .sh-stats-go{display:flex;width:100%;justify-content:center;padding:15px 18px;font-size:16px}
}

/* Participants land on the shop by mistake more often than anyone expects, so
   the way through is a band they cannot miss rather than a grey link among
   others. It bookends the page against the navy bar at the top. */
.sh-foot{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:center;
  padding:26px 20px;background:var(--navy);color:#fff;text-align:center}
.sh-foot-q{margin:0;font-family:var(--f-head);font-size:20px;font-weight:600;letter-spacing:-.01em}
.sh-foot .btn{flex:none}

/* The way onward after paying. The order details above it are WooCommerce's and
   end in a table; this is the one thing on the page that is a next step. */
.sh-after{text-align:center;margin-top:22px}
.sh-after-h{font-family:var(--f-head);font-size:19px;font-weight:600;letter-spacing:-.01em;margin:0 0 8px}
.sh-after .sh-lede{margin-bottom:16px}

/* Three across, then two, then one — the cards stop being comparable long
   before the viewport stops being wide. */
@media (max-width:920px){
  .sh-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .sh-grid{grid-template-columns:1fr}
  .sh-pic{aspect-ratio:16/7}
}

/* The header on a phone.
 *
 * A 200px logo, a 114px button and Sign in came to 397px across, and the row
 * had no way to wrap — so every screen narrower than that scrolled sideways,
 * on all four public pages. It is the first thing a stranger sees of the
 * platform, and it arrived shifted.
 *
 * Wrapping and centring is what the footer along the bottom of these same pages
 * already does. The logo gives up the width it can spare, which keeps all three
 * on one line down to 360px; below that the actions drop to a second line and
 * read as a deliberate pair rather than as something that fell off the edge. */
@media (max-width:480px){
  .sh-top{flex-wrap:wrap;justify-content:center;gap:8px 12px;padding:10px 14px}
  .sh-top img{width:150px}
  .sh-top .sh-take,.sh-top .sh-toplink{margin-left:0}
  .sh-top .sh-signin{flex:none;white-space:nowrap}
}

/* copyright and trademark notice, on every page */
.smx-legal{padding:20px 24px 26px;border-top:1px solid var(--border);background:var(--surface-2)}
.smx-legal p{max-width:820px;margin:0 auto;font-size:11.5px;line-height:1.6;color:var(--muted);text-align:center}
.smx-legal a{color:var(--navy-600);text-decoration:underline}

/* ------------------------------------------------- choosing how many

   Its own step, so it can show every tier, the saving, the tax and the total
   without any of that crowding a card somebody has not chosen yet. Two
   columns: the decision on the left, what it costs on the right. */

.sh-back{margin:0 0 14px;font-size:13px}
.sh-step{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
.sh-pad{padding:24px 26px}
.sh-h1{font-family:var(--f-head);font-size:24px;margin:0 0 8px;letter-spacing:-.01em}
.sh-sub{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  margin:22px 0 10px}

.sh-tiertable{width:100%;font-size:13.5px;border-collapse:collapse}
.sh-tiertable td{padding:8px 10px;border-bottom:1px solid var(--border)}
.sh-tiertable tr:last-child td{border-bottom:0}
.sh-tiertable tr.on td{background:var(--gold-050);font-weight:600}
/* "Your price" is printed on every row and shown on the one that applies, so
   the script only has to move a class as the quantity is typed. */
.sh-tiertable em{display:none;font-style:normal;font-size:11px;color:var(--navy-600);margin-left:8px;
  text-transform:uppercase;letter-spacing:.05em}
.sh-tiertable tr.on em{display:inline}
.sh-tiertable .right{text-align:right;font-variant-numeric:tabular-nums}

.sh-summary{position:sticky;top:20px}
.sh-sum{width:100%;font-size:13.5px;border-collapse:collapse}
.sh-sum td{padding:7px 0}
.sh-sum .right{text-align:right;font-variant-numeric:tabular-nums}
.sh-sum tr.save td{color:var(--ok,#2E7D5B)}
/* A table row needs telling; the attribute alone loses to display:table-row. */
.sh-sum tr[hidden]{display:none}
.sh-sum tr.total td{border-top:1px solid var(--border);padding-top:11px;font-family:var(--f-head);
  font-size:17px;font-weight:600;color:var(--navy)}

@media (max-width:860px){
  .sh-step{grid-template-columns:1fr}
  .sh-summary{position:static}
}

/* ------------------------------------------------------ cart and checkout

   WooCommerce renders these pages; this dresses them as part of the platform.

   Every rule below targets WooCommerce's own class names rather than replacing
   its templates. Checkout redraws its order review and payment panel over AJAX
   on every field change, and a template override is how that stops working —
   CSS survives each redraw untouched.

   The rules that used to live here addressed wc-block-components-*, which is
   the Blocks checkout. This store runs the classic shortcode one, so none of
   them ever reached the page they were written for. */

.smx-woo .sh-woo{max-width:940px}

/* ---- type ------------------------------------------------------------- */
.smx-woo .sh-woo h1,.sh-woo h2,.sh-woo h3{font-family:var(--f-head);letter-spacing:-.01em;color:var(--ink)}
.smx-woo .sh-woo h1{font-size:26px;margin:0 0 18px}
.smx-woo .sh-woo h2{font-size:19px;margin:0 0 14px}
.smx-woo .sh-woo h3{font-size:15px;margin:0 0 14px}
.smx-woo .sh-woo a{color:var(--navy-600)}
.smx-woo .sh-woo a:hover{color:var(--navy)}
.smx-woo .sh-woo .woocommerce-Price-amount{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Section titles get the gold stripe the dashboards use, so a heading here
   reads the same as a heading there. */
.smx-woo .sh-woo #order_review_heading,
.smx-woo .sh-woo .woocommerce-order-details__title,
.smx-woo .sh-woo .woocommerce-column__title{display:flex;align-items:center;gap:14px;font-size:19px;margin:26px 0 14px}
.smx-woo .sh-woo #order_review_heading::before,
.smx-woo .sh-woo .woocommerce-order-details__title::before,
.smx-woo .sh-woo .woocommerce-column__title::before{
  content:"";width:34px;height:4px;border-radius:2px;background:var(--gold);flex:none}

/* ---- the panels ------------------------------------------------------- */
.smx-woo .sh-woo .woocommerce-billing-fields,
.smx-woo .sh-woo .woocommerce-additional-fields,
.smx-woo .sh-woo #order_review,
.smx-woo .sh-woo .woocommerce-order-details,
.smx-woo .sh-woo .woocommerce-order-overview{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:18px 20px;margin:0 0 18px}
.smx-woo .sh-woo .woocommerce-shipping-fields:empty{display:none}

/* Their own heading becomes the panel's header. */
.smx-woo .sh-woo .woocommerce-billing-fields > h3,
.smx-woo .sh-woo .woocommerce-additional-fields > h3{
  margin:-18px -20px 16px;padding:14px 20px;border-bottom:1px solid var(--border)}

/* ---- fields ----------------------------------------------------------- */
.smx-woo .sh-woo .woocommerce-billing-fields__field-wrapper,
.smx-woo .sh-woo .woocommerce-additional-fields__field-wrapper{
  display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.smx-woo .sh-woo .form-row{float:none;width:auto;margin:0 0 14px;padding:0}
.smx-woo .sh-woo .form-row-wide,.sh-woo .form-row.notes{grid-column:1 / -1}
.smx-woo .sh-woo .form-row label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.smx-woo .sh-woo .form-row .required{color:var(--gold-600);text-decoration:none;border:0}
.smx-woo .sh-woo .form-row .optional{color:var(--muted);font-weight:500}
.smx-woo .sh-woo .woocommerce-input-wrapper{display:block;width:100%}
.smx-woo .sh-woo .input-text,.sh-woo .form-row input[type=text],.sh-woo .form-row input[type=email],
.smx-woo .sh-woo .form-row input[type=tel],.sh-woo .form-row select,.sh-woo .form-row textarea{
  width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--ink);font-size:14px;font-family:inherit;box-shadow:none}
.smx-woo .sh-woo .form-row textarea{min-height:96px;line-height:1.55;resize:vertical}
.smx-woo .sh-woo .input-text:focus,.sh-woo .form-row select:focus,.sh-woo .form-row textarea:focus{
  outline:2px solid color-mix(in srgb,var(--navy) 35%,transparent);outline-offset:1px;background:var(--surface)}
.smx-woo .sh-woo .form-row.woocommerce-invalid .input-text{border-color:var(--danger)}
.smx-woo .sh-woo .form-row.woocommerce-validated .input-text{border-color:var(--st-consumed)}

/* Country and state are select2, which builds its own box — and renders its
   dropdown at the end of the body, outside .sh-woo, so those are scoped to the
   page class instead. */
.smx-woo .sh-woo .select2-container .select2-selection--single{
  height:auto;padding:10px 13px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-2)}
.smx-woo .sh-woo .select2-container .select2-selection--single .select2-selection__rendered{
  padding:0;line-height:1.4;color:var(--ink);font-size:14px}
.smx-woo .sh-woo .select2-container .select2-selection--single .select2-selection__arrow{
  top:50%;transform:translateY(-50%);right:8px}
.smx-woo .select2-dropdown{border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow)}
.smx-woo .select2-results__option--highlighted[aria-selected]{background:var(--navy)}
.smx-woo .select2-search__field{border:1px solid var(--border);border-radius:6px;padding:7px 9px}

/* ---- the order table -------------------------------------------------- */
.smx-woo .sh-woo .shop_table{width:100%;border-collapse:collapse;border:0;border-radius:0;font-size:13.5px}
.smx-woo .sh-woo .shop_table th,.sh-woo .shop_table td{border:0;border-bottom:1px solid var(--border)}
.smx-woo .sh-woo .shop_table thead th{
  text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  font-weight:600;padding:11px 0;background:none}
.smx-woo .sh-woo .shop_table tbody td,.sh-woo .shop_table tbody th,
.smx-woo .sh-woo .shop_table tfoot td,.sh-woo .shop_table tfoot th{padding:12px 0;vertical-align:middle}
.smx-woo .sh-woo .shop_table td:last-child,.sh-woo .shop_table th:last-child{text-align:right}
.smx-woo .sh-woo .shop_table tfoot th{font-weight:600;color:var(--ink-soft)}
.smx-woo .sh-woo .shop_table tfoot .order-total th,
.smx-woo .sh-woo .shop_table tfoot .order-total td{border-bottom:0;font-size:16px;color:var(--ink)}
.smx-woo .sh-woo .shop_table tfoot .order-total strong{font-family:var(--f-head)}
.smx-woo .sh-woo .product-quantity{color:var(--muted)}

/* ---- payment ---------------------------------------------------------- */
.smx-woo #payment{background:none;border-radius:0}
.smx-woo #payment ul.payment_methods{list-style:none;margin:16px 0 0;padding:0}
.smx-woo #payment ul.payment_methods li{border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-2);padding:12px 14px;margin-bottom:9px}
.smx-woo #payment ul.payment_methods li > label{display:inline-flex;align-items:center;gap:10px;margin:0;
  font-family:var(--f-head);font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.smx-woo #payment ul.payment_methods li > input[type=radio]{width:auto;margin:0}
.smx-woo #payment ul.payment_methods li img{max-height:24px;width:auto;vertical-align:middle}

/* The gateway owns what is inside this box. PayPal draws its own button there
   and its brand rules require that button to look like PayPal's, so only the
   frame around it is ours. */
.smx-woo #payment div.payment_box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  margin:11px 0 0;padding:12px 14px;font-size:13px;color:var(--ink-soft)}
.smx-woo #payment div.payment_box::before{display:none}

.smx-woo #payment div.place-order{margin:18px 0 0;padding:0}
.smx-woo #payment #place_order{width:100%;display:block;padding:13px 15px;border:0;border-radius:var(--r-sm);
  background:var(--gold);color:var(--navy-700);font-family:var(--f-head);font-size:15px;font-weight:600;cursor:pointer}
.smx-woo #payment #place_order:hover{background:var(--gold-600)}
.smx-woo .sh-woo .woocommerce-terms-and-conditions-wrapper{margin:0}
.smx-woo .sh-woo .woocommerce-privacy-policy-text{font-size:12px;color:var(--muted);margin:14px 0 0}
.smx-woo .sh-woo .woocommerce-privacy-policy-text p{margin:0}

/* ---- notices and the coupon strip ------------------------------------- */
.smx-woo .sh-woo .woocommerce-info,.sh-woo .woocommerce-message,.sh-woo .woocommerce-error{
  list-style:none;border-radius:10px;padding:12px 15px;margin:0 0 18px;font-size:13.5px;
  background:color-mix(in srgb,var(--gold) 12%,var(--tint));border:1px solid var(--gold);
  color:var(--ink-soft);border-top-width:1px}
.smx-woo .sh-woo .woocommerce-info::before,.sh-woo .woocommerce-message::before,
.smx-woo .sh-woo .woocommerce-error::before{display:none}
.smx-woo .sh-woo .woocommerce-error{background:color-mix(in srgb,var(--st-expired) 10%,var(--tint));border-color:var(--st-expired)}
.smx-woo .sh-woo .woocommerce-message{background:color-mix(in srgb,var(--st-consumed) 10%,var(--tint));border-color:var(--st-consumed)}
.smx-woo .sh-woo .checkout_coupon{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);
  padding:16px 18px;margin:0 0 18px}
.smx-woo .sh-woo .checkout_coupon .button{padding:11px 15px;border:0;border-radius:var(--r-sm);
  background:var(--navy);color:#fff;font-weight:600;cursor:pointer}

/* ---- the page after paying -------------------------------------------- */
.smx-woo .sh-woo .woocommerce-thankyou-order-received{
  font-family:var(--f-head);font-size:22px;font-weight:600;color:var(--ink);
  letter-spacing:-.01em;margin:0 0 18px}
.smx-woo .sh-woo .woocommerce-order-overview{display:flex;flex-wrap:wrap;gap:10px 34px;list-style:none}
.smx-woo .sh-woo .woocommerce-order-overview li{
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600;
  border:0;padding:0;margin:0;flex:none}
.smx-woo .sh-woo .woocommerce-order-overview li strong{
  display:block;margin-top:4px;font-family:var(--f-head);font-size:15px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--ink)}
.smx-woo .sh-woo .woocommerce-customer-details address{
  border:0;padding:0;border-radius:0;font-style:normal;font-size:13.5px;line-height:1.7;color:var(--ink-soft)}
.smx-woo .sh-woo .woocommerce-customer-details .woocommerce-column__title{margin-top:0}

/* The agreement tickbox we add to checkout. It decides whether the order is
   allowed at all, so it keeps the gold callout it is given rather than being
   flattened into another grey box, which is what the rule that used to sit
   here did. */
.smx-woo .sh-woo .smx-agreement{margin:16px 0 0}

@media (max-width:720px){
  .smx-woo .sh-woo .woocommerce-billing-fields__field-wrapper,
  .smx-woo .sh-woo .woocommerce-additional-fields__field-wrapper{grid-template-columns:1fr}
  .smx-woo .sh-woo .woocommerce-order-overview{gap:14px 22px}
}

/* ------------------------------------------------- statistical analysis

   The published norms. Wider than the rest of the shop because the tables
   carry five columns and the charts want the room, and built out of the same
   cards and type as everything else so it reads as part of the platform
   rather than as a report bolted onto it. */

.st-head{margin-bottom:30px}
.st-head h1{font-family:var(--f-head);font-size:30px;letter-spacing:-.02em;margin:0 0 10px}
.st-n{margin:0 0 14px;font-size:15px;color:var(--ink-soft)}
.st-n b{font-family:var(--f-head);font-size:34px;font-weight:600;color:var(--navy);
  letter-spacing:-.02em;vertical-align:-2px;margin-right:6px;font-variant-numeric:tabular-nums}
.st-lede{margin:0;color:var(--ink-soft);font-size:14.5px;line-height:1.65}

.st-sec{margin-bottom:38px}

/* The benchmark: the shape on the left, the numbers behind it on the right. */
.st-hero{display:grid;grid-template-columns:1fr;gap:26px;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:20px 24px;margin-bottom:16px}

.st-bar{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.st-bar-l{width:104px;flex:none;font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.st-bar-t{position:relative;flex:1;height:20px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:5px;overflow:hidden}
.st-sd{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--navy) 9%,transparent)}
.st-fill{position:absolute;top:3px;bottom:3px;left:0;border-radius:4px}
.st-bar-v{width:44px;flex:none;text-align:right;font-family:var(--f-head);font-size:14px;
  font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.st-key{margin:12px 0 0;font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:7px}
.st-sd-key{width:22px;height:11px;border-radius:3px;flex:none;
  background:color-mix(in srgb,var(--navy) 9%,transparent);border:1px solid var(--border)}

/* Grouped bars, with the categories named above rather than inside the SVG so
   long labels wrap instead of colliding. */
.st-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:12px}
.st-legend span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  font-weight:600;color:var(--ink-soft)}
.st-legend i{width:11px;height:11px;border-radius:3px;flex:none}
.st-legend small{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.st-bars{width:100%;height:auto;display:block;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:14px 6px 4px;margin-bottom:16px}

/* Wide tables scroll inside their own card; the page never scrolls sideways. */
.st-tablewrap{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--shadow-sm);overflow-x:auto}
.st-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.st-table th,.st-table td{padding:10px 16px;text-align:left;border-bottom:1px solid var(--border)}
.st-table thead th{font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);font-weight:600;background:var(--surface-2);white-space:nowrap}
.st-table .r{text-align:right}
.st-table .num{font-variant-numeric:tabular-nums}
.st-table tbody tr:last-child td{border-bottom:none}
.st-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:9px;
  vertical-align:1px}
.st-cat{vertical-align:top;font-family:var(--f-head);font-size:13.5px;font-weight:600;
  color:var(--ink);background:var(--surface-2);border-right:1px solid var(--border);
  white-space:nowrap}
.st-cat small{display:block;margin:4px 0 0 18px;font-family:var(--f-body);font-size:11.5px;
  font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.st-first > *{border-top:2px solid var(--border)}
.st-table tbody tr:first-child > *{border-top:0}

.st-foot{margin:0;font-size:12px;color:var(--muted)}

@media (max-width:840px){
  .st-hero{grid-template-columns:1fr;gap:18px}
  .st-head h1{font-size:25px}
  .st-n b{font-size:28px}
}

/* On paper the charts and the tables both matter, so nothing is hidden and
   sections are kept off page breaks where they can be. */
@media print{
  .st-sec{break-inside:avoid;page-break-inside:avoid}
  .st-hero,.st-bars,.st-tablewrap{box-shadow:none}
}

/* Before the first Indicator is finished there is nothing to average. */
.st-none{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:30px 26px;max-width:600px}
.st-none p{margin:0 0 10px;color:var(--ink-soft);font-size:14.5px}
.st-none p:last-child{margin-bottom:0}
.st-none strong{color:var(--ink);font-family:var(--f-head);font-size:16px;font-weight:600}