/* OSMEA — the comparison, at the foot of the product page.
   The page used to carry these nine rows twice: once here, filled and in
   deck wording, and again inside the Nutrition drawer in J's wording. J's
   design settles it — one table, at the foot of the page, in the drawer's
   words. The drawer's copy is gone.
   The brand column is TYPE rather than a filled block now. Nothing is
   highlighted by a background; the colour does the work, blue against the
   quiet grey of the benchmark, and a rule over every row carries the eye
   across. Entries are J's, verbatim.
   Written to sit on either stylesheet: every token carries a fallback, since
   site.css and union.css define different sets (site.css has no --paper and
   sets --ink to the brand blue, union.css has no --line). Layout is stacked,
   not grid-placed, so it does not need a twelve-column parent. */

.u-cmp__wrap{margin-top:clamp(28px,4vh,56px)}
/* fixed, or auto layout hands the short row labels ~39% of the width and
   pushes the brand column into the middle of the page */
.u-cmp__table{width:100%;border-collapse:collapse;text-align:left;table-layout:fixed}
/* no left padding: every column starts on its own edge, which is what lines
   the three of them up as columns rather than as a ruled block */
.u-cmp__table th,.u-cmp__table td{
  padding:clamp(14px,1.9vh,26px) 1.2em clamp(14px,1.9vh,26px) 0;
  vertical-align:top;font-weight:400;
  border-top:1px solid var(--line,rgba(16,6,159,.24));
}
/* fixed layout reads its widths from the FIRST row, so they belong on thead */
.u-cmp__table thead td{width:30%}
.u-cmp__table thead th{width:32%}
.u-cmp__table thead th,.u-cmp__table thead td{border-top:0;padding-top:0}

/* the brand takes the display face, the benchmark stays in the grotesk */
.u-cmp__table thead .is-osmea{
  font-family:Carentro,Georgia,serif;text-transform:uppercase;
  font-size:clamp(24px,2.6vw,40px);letter-spacing:.02em;line-height:1;
  color:var(--blue,#10069f);
}
.u-cmp__table thead th:not(.is-osmea){font-size:var(--t-body,16px);line-height:1.3}

/* the row label is the axis the eye runs down */
.u-cmp__table tbody th{
  /* 700, not 600. The repo ships one cut of Haas, 55 Roman, so every bold on
     this site is synthesised -- that works, but it is a lighter step than a
     real face, and at 17px the 600 of the artwork does not separate the label
     from the entry. 700 does. Shipping Haas Grot Disp R-75 Bold, which is
     installed locally but has never been in the repo, would make this and
     every other bold on the site real; that is a sitewide call, not this
     table's to make. */
  font-size:var(--t-body,16px);font-weight:700;
  letter-spacing:.01em;color:var(--blue,#10069f);
}
.u-cmp__table td{font-size:var(--t-body,16px);line-height:1.4}
.u-cmp__table .is-osmea{color:var(--blue,#10069f)}
/* The artwork's benchmark column is #999, which measures 2.71:1 on this paper
   where body copy needs 4.5:1. This is 5.07:1 and reads the same weight. */
.u-cmp__table thead th:not(.is-osmea),
.u-cmp__table tbody td:not(.is-osmea){color:#6b6b6b}

/* "1 Counts listed…" — the numbers are set without a full stop, as drawn, so
   they are a counter rather than list-style:decimal, which always adds one. */
.u-cmp__fn{
  margin:clamp(18px,2.4vh,32px) 0 0;padding:0;list-style:none;counter-reset:fn;
  font-size:var(--t-small,14px);line-height:1.55;color:#6b6b6b;max-width:none;
}
.u-cmp__fn li{margin-top:4px;counter-increment:fn}
/* SUPERSCRIPT (J, 2026-10-28). The numbers are references, and they were
   set on the baseline at full size, where "1 Counts listed..." reads as if
   the 1 were the first word of the sentence. line-height:0 so a raised
   number cannot grow the line box -- same reason as the <sup> rule below. */
.u-cmp__fn li::before{content:counter(fn) "\00a0"}
.u-cmp--table .u-cmp__fn li::before{
  content:counter(fn);
  vertical-align:super;font-size:.7em;line-height:0;
  margin-right:.5em;
}

/* The table's own references, in "Listed electrolyte1" and "Conventional
   sports drink3". A <sup> with an inherited line-height raises its inline
   box above the strut and makes the LINE taller by a fraction of a pixel,
   which is one of the two things that was making the rules below the row
   land at a different subpixel phase from the rest. Zero leading takes it
   out of the measurement without moving the glyph. */
.u-cmp--table .u-cmp__table sup{font-size:.7em;line-height:0;vertical-align:super}

@media(max-width:860px){
  /* IT STAYS A TABLE ON A PHONE (J, 2026-10-28): "we had built a much
     cleaner comparison table for mobile, where did it go? please use that".

     What was here folded every row into a block with the column heading
     repeated above each cell, on the reasoning that three columns cannot
     hold "Whole-Ingredients: Atlantic Seawater & Coconut Water" in a third
     of 390px. They can -- it takes four lines, and four lines in a column
     is what a comparison looks like. The fold turned nine rows into
     twenty-seven labelled fragments, and you could no longer see the two
     answers side by side, which is the only thing the table is for.

     So: the columns stay, the type comes down, the padding comes in, and
     the row label gets the narrowest share because it is the shortest
     copy in every row. */
  /* EVERY VERTICAL MEASURE HERE IS A WHOLE PIXEL (J, 2026-10-28, three
     times: "fix line thickness and inconsistency").

     The rules were all the same 1px border. What differed was where each
     one LANDED. Row height was 13px x 1.35 = 17.55 per line plus a 1.8vh
     padding that resolves to 15.2 on a 844 screen, so every row ended on a
     different fraction of a pixel, and at 3x a hairline that starts at .55
     of a pixel is painted across two device rows at half strength while
     the next one, starting at .1, is painted across one at full. Same
     border, four weights down the table.

     Integers here, and every row is a whole number of pixels tall, so
     every rule starts on a device-pixel boundary and they are drawn alike
     at any density. (The <sup> rule above is the other half of this: a
     raised reference was adding a fraction to the two rows that carry
     one.) Do not put a vh or a unitless line-height back in this block. */
  .u-cmp--table .u-cmp__table{font-size:13px}
  .u-cmp--table .u-cmp__table thead td{width:22%}
  .u-cmp--table .u-cmp__table thead th{width:38%}
  .u-cmp--table .u-cmp__table th,.u-cmp--table .u-cmp__table td{
    /* 7px, not .55em: the cell padding is what sets where a column
       starts, and an em of it is read against the CELL's own font. The
       wordmark is 31px where the entries under it are 13, so its column
       began 10px further right than its own cells -- J: "logo is not
       aligned correctly". A column edge is a column edge whatever is
       set in it. */
    padding:16px 7px;
    line-height:18px;
    /* 2px, J's call: "make lines 1px thicker so they dont look
       inconsistent". A hairline at this density is one device pixel with
       nowhere to round to, so the eye reads the antialiasing as weight;
       two always has a whole pixel of its own under it. Phone only -- the
       desktop rules are not in question. */
    border-top-width:2px;
  }
  .u-cmp--table .u-cmp__table th:first-child,.u-cmp--table .u-cmp__table td:first-child{padding-left:0}
  .u-cmp--table .u-cmp__table tr>*:last-child{padding-right:0}
  .u-cmp--table .u-cmp__table tbody th{font-size:13px;line-height:18px}
  .u-cmp--table .u-cmp__table td{font-size:13px;line-height:18px}
  /* the wordmark stands up to the two lines beside it rather than sitting
     at the size of a column heading (J: "make logo larger to take up 2
     lines"). 36px is the two lines' height; the column is widened to 38%
     to carry it, taken off the row label, which is the shortest copy in
     every row. */
  .u-cmp--table .u-cmp__table thead .is-osmea{font-size:31px;line-height:36px}
  .u-cmp--table .u-cmp__table thead th:not(.is-osmea){font-size:12px;line-height:18px}
  /* the per-cell heading the fold needed; the real column heads are back */
  .u-cmp--table .u-cmp__table tbody td::before{content:none}

  /* Everything else keeps the fold: /dev/product-new ships with it and is
     signed off. Each row becomes a block and the column headings move onto
     the cells they label, carried on data-label. */
  .u-cmp:not(.u-cmp--table) .u-cmp__table thead{position:absolute;width:1px;height:1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .u-cmp:not(.u-cmp--table) .u-cmp__table,
  .u-cmp:not(.u-cmp--table) .u-cmp__table tbody,
  .u-cmp:not(.u-cmp--table) .u-cmp__table tr,
  .u-cmp:not(.u-cmp--table) .u-cmp__table th,
  .u-cmp:not(.u-cmp--table) .u-cmp__table td{display:block;width:auto}
  .u-cmp:not(.u-cmp--table) .u-cmp__table tbody tr{
    border-top:1px solid var(--line,rgba(16,6,159,.24));
    padding-block:clamp(20px,2.6vh,36px);
  }
  .u-cmp:not(.u-cmp--table) .u-cmp__table th,
  .u-cmp:not(.u-cmp--table) .u-cmp__table td{border:0;padding:0}
  .u-cmp:not(.u-cmp--table) .u-cmp__table tbody th{margin-bottom:.5em}
  .u-cmp:not(.u-cmp--table) .u-cmp__table tbody td{margin-top:.6em}
  .u-cmp:not(.u-cmp--table) .u-cmp__table tbody td::before{
    content:attr(data-label);display:block;
    font-size:var(--t-small,14px);color:#6b6b6b;margin-bottom:.15em;
  }
}


/* ---------- inverted (.u--blue) ----------
   J, 2026-10-28: "lets make this section inverted with a blue background".

   Four of this table's colours are written for paper and three of them are
   literals rather than tokens -- the benchmark grey, the rule, and the
   footnotes -- so the inversion has to name every one. The section's own
   .u--blue sets the heading and anything that inherits. */
.u--blue .u-cmp__table thead .is-osmea,
.u--blue .u-cmp__table tbody th,
.u--blue .u-cmp__table .is-osmea{color:var(--paper,#fcf9f2)}
/* OPAQUE, not paper at 30% (J, 2026-10-28: "on mobile the rule is not the
   same"). The rule under the wordmark was painted at two different strengths
   in one line -- the first column's segment half as strong again as the two
   beside it -- and the rules further down were the stronger weight all the
   way across. Every cell computes the SAME 2px solid rgba(252,249,242,.3);
   Chrome paints all of them at .3. Safari paints a collapsed border from
   both sides of the join, so a translucent one lands twice and composites
   to .51 -- except at the head/body join, where the head's border is
   `none` and only the body cell paints. That is the step J's arrow is on.
   A translucent border cannot be painted twice safely. This is the same
   colour, resolved against the blue once, so it reads identically whether
   Safari paints it one time or two:
     .3 x #fcf9f2 over #10069f = rgb(86.8, 78.9, 183.9). */
.u--blue .u-cmp__table th,
.u--blue .u-cmp__table td{border-top-color:#574fb8}
/* The benchmark column is a step BACK from the brand's, not a different
   colour: #6b6b6b was chosen to read 5.07:1 on paper and measures 1.4:1 on
   this blue. Paper at 62% is 5.4:1 and holds the same relationship. */
.u--blue .u-cmp__table thead th:not(.is-osmea),
.u--blue .u-cmp__table tbody td:not(.is-osmea),
.u--blue .u-cmp__fn{color:rgba(252,249,242,.62)}