/* ==========================================================================
   Waterworks theme - Benharbor client portal
   Project: nuvias-code (employee discount codes)
   Scope:   #portal/p/nuvias-code

   Drop-in. Load AFTER the portal's own <style> block and scope it by adding
   data-brand="waterworks" to <html> (or to any wrapper around the app):

     <html data-brand="waterworks">
     <link rel="stylesheet" href="waterworks-theme.css">

   It overrides the existing token names (--paper, --ink, --brass, ...) and
   retunes the existing component classes (.btn, .panel, .tile, .pill, table,
   .field, .side-nav). No markup changes required. Section 9 adds the classes
   this app needs that the base portal doesn't have.

   Typeface note: Waterworks runs Gotham SSm (Hoefler&Co) plus Freight Display
   Pro / FreightBig Pro (Adobe Fonts). Both are licensed, neither is free. The
   stacks below name the real faces FIRST, so if Waterworks provides a webfont
   kit the app picks it up with no code change. Until then it falls back to
   Montserrat (for Gotham) and Cormorant Garamond (for Freight).

     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=Montserrat:wght@200;300;400;500;600&display=swap">
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=Montserrat:wght@200;300;400;500;600&display=swap');


/* --------------------------------------------------------------------------
   1. TOKENS - light (the Waterworks default: warm white, black, hairlines)
   -------------------------------------------------------------------------- */

[data-brand="waterworks"] {
  /* Surfaces */
  --paper:   #F6F3EF;   /* warm off-white - the Waterworks ground */
  --panel:   #FFFFFF;
  --sand:    #EDE9E3;   /* table headers, banded rows */

  /* Text */
  --ink:     #000000;   /* Waterworks sets headings and emphasis at pure black */
  --ink-2:   #373737;   /* body */
  --ink-3:   #6E6E6E;   /* labels, meta - 5.1:1 on --paper */

  /* Rules - Waterworks is built on hairlines, not shadows */
  --line:    #E2DED7;
  --line-2:  #C9C4BC;

  /* Inverted surfaces (full-bleed black bands, sidebar, sign-in) */
  --navy:      #000000;
  --navy-2:    #1A1A1A;
  --on-navy:   #F6F3EF;
  --on-navy-2: #A39C93;

  /* Secondary - warm stone, stands in for the old seaglass */
  --seaglass:     #8A8178;
  --seaglass-ink: #5C544B;

  /* Primary action. Waterworks has no accent colour; the action IS black. */
  --brass:     #000000;
  --brass-ink: #373737;
  --on-brass:  #F6F3EF;

  /* Status - desaturated hard, so a table of codes still reads monochrome */
  --good: #3E5C4B;  --good-bg: #E9EDE9;  --good-line: #B7C5BB;
  --warn: #8A5A2B;  --warn-bg: #F4ECE2;  --warn-line: #D8C4AA;
  --bad:  #8A3A2E;  --bad-bg:  #F3E6E3;  --bad-line:  #D6B4AD;
  --info: #3F4E5C;  --info-bg: #E8ECEF;  --info-line: #B8C2CB;

  --heading: #000000;
  --pill-neutral-bg: #EDE9E3;
  --pill-neutral-line: #D5D0C8;
  --mark-opacity: 0.05;

  /* Waterworks doesn't float things. Shadows are near-nil; rules do the work. */
  --shadow:      0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lift: 0 1px 3px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.07);

  /* Geometry */
  --r:      2px;   /* Waterworks caps radius at ~4px on inputs, 0 elsewhere */
  --r-flat: 0px;

  /* Type */
  --font-ui:      "Gotham SSm A", "Gotham SSm B", "Gotham", Montserrat, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: freight-display-pro, freight-big-pro, "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-mono:    "SFMono-Regular", "Roboto Mono", Consolas, "Liberation Mono", monospace;

  /* The signature: 11px uppercase, light, wide-tracked */
  --track-wide:  0.18em;
  --track-xwide: 0.26em;
}


/* --------------------------------------------------------------------------
   2. TOKENS - dark. Waterworks uses full black editorially, so this reads as
   on-brand rather than a concession. Cream on black, never grey on grey.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  [data-brand="waterworks"]:not([data-theme="light"]) {
    --paper:   #0A0A0A;
    --panel:   #141414;
    --sand:    #1C1C1C;
    --ink:     #F6F3EF;
    --ink-2:   #C6C1B8;
    --ink-3:   #948E85;
    --line:    #262626;
    --line-2:  #363636;
    --navy:      #000000;
    --navy-2:    #1C1C1C;
    --on-navy:   #F6F3EF;
    --on-navy-2: #9A948B;
    --seaglass:     #A39C93;
    --seaglass-ink: #BDB6AC;
    --brass:     #F6F3EF;   /* inverted: cream button, black label */
    --brass-ink: #FFFFFF;
    --on-brass:  #000000;
    --good: #8FB39C;  --good-bg: #16221B;  --good-line: #33493C;
    --warn: #C99B6B;  --warn-bg: #241B10;  --warn-line: #4A3A22;
    --bad:  #C98A7C;  --bad-bg:  #241512;  --bad-line:  #4C2C25;
    --info: #93A5B4;  --info-bg: #131A20;  --info-line: #2C3945;
    --heading: #F6F3EF;
    --pill-neutral-bg: #1C1C1C;
    --pill-neutral-line: #333333;
    --mark-opacity: 0.10;
    --shadow:      0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-lift: 0 1px 3px rgba(0, 0, 0, 0.6), 0 12px 32px rgba(0, 0, 0, 0.5);
  }
}

[data-brand="waterworks"][data-theme="dark"] {
  --paper:   #0A0A0A;
  --panel:   #141414;
  --sand:    #1C1C1C;
  --ink:     #F6F3EF;
  --ink-2:   #C6C1B8;
  --ink-3:   #948E85;
  --line:    #262626;
  --line-2:  #363636;
  --navy:      #000000;
  --navy-2:    #1C1C1C;
  --on-navy:   #F6F3EF;
  --on-navy-2: #9A948B;
  --seaglass:     #A39C93;
  --seaglass-ink: #BDB6AC;
  --brass:     #F6F3EF;
  --brass-ink: #FFFFFF;
  --on-brass:  #000000;
  --good: #8FB39C;  --good-bg: #16221B;  --good-line: #33493C;
  --warn: #C99B6B;  --warn-bg: #241B10;  --warn-line: #4A3A22;
  --bad:  #C98A7C;  --bad-bg:  #241512;  --bad-line:  #4C2C25;
  --info: #93A5B4;  --info-bg: #131A20;  --info-line: #2C3945;
  --heading: #F6F3EF;
  --pill-neutral-bg: #1C1C1C;
  --pill-neutral-line: #333333;
  --mark-opacity: 0.10;
  --shadow:      0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-lift: 0 1px 3px rgba(0, 0, 0, 0.6), 0 12px 32px rgba(0, 0, 0, 0.5);
}


/* --------------------------------------------------------------------------
   3. FOUNDATION
   -------------------------------------------------------------------------- */

[data-brand="waterworks"] body,
[data-brand="waterworks"] button,
[data-brand="waterworks"] input,
[data-brand="waterworks"] select,
[data-brand="waterworks"] textarea {
  font-family: var(--font-ui);
}

[data-brand="waterworks"] body {
  background: var(--paper);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 300;      /* Waterworks sets nearly all body copy at Light */
  line-height: 1.65;
}

/* Serif for the display line only. Waterworks reserves the serif for
   collection titles and page headers - never for UI chrome. */
[data-brand="waterworks"] .display,
[data-brand="waterworks"] .hero h1,
[data-brand="waterworks"] .section-head h2,
[data-brand="waterworks"] .cta-band h2,
[data-brand="waterworks"] .signin-head h1,
[data-brand="waterworks"] .portal-head h1 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0.005em;
  color: var(--heading);
}

[data-brand="waterworks"] .hero h1         { font-size: clamp(38px, 5.4vw, 62px); line-height: 1.02; }
[data-brand="waterworks"] .section-head h2 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.14; }
[data-brand="waterworks"] .portal-head h1  { font-size: 34px; line-height: 1.1; }
[data-brand="waterworks"] .signin-head h1  { font-size: 32px; line-height: 1.1; }

/* Panel and card headings drop the serif and become the small tracked cap -
   this is the Waterworks nav/category voice, and it holds up at 11px where a
   light serif would go weak. */
[data-brand="waterworks"] .panel-head h2,
[data-brand="waterworks"] .offer-item h3 {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink);
}

[data-brand="waterworks"] .eyebrow {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--track-xwide);
  text-transform: uppercase;
  color: var(--ink-3);
}

[data-brand="waterworks"] .brand-name {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: var(--track-xwide);
  text-transform: uppercase;
}
[data-brand="waterworks"] .brand-sub {
  letter-spacing: var(--track-xwide);
  color: var(--ink-3);
}

[data-brand="waterworks"] a { color: var(--ink); text-decoration: none; }
[data-brand="waterworks"] a:hover { color: var(--ink-2); }

/* Waterworks underlines links with a hairline, not a colour shift. */
[data-brand="waterworks"] .portal-body a:not(.btn) {
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 1px;
}
[data-brand="waterworks"] .portal-body a:not(.btn):hover { border-bottom-color: var(--ink); }

[data-brand="waterworks"] :focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
  border-radius: 0;
}


/* --------------------------------------------------------------------------
   4. BUTTONS - flat, squared, 11px tracked caps. The primary is a black slab.
   -------------------------------------------------------------------------- */

[data-brand="waterworks"] .btn {
  min-height: 46px;
  padding: 13px 26px;
  border-radius: var(--r);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

[data-brand="waterworks"] .btn-primary {
  background: var(--brass);
  color: var(--on-brass);
  border-color: var(--brass);
}
[data-brand="waterworks"] .btn-primary:hover {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

[data-brand="waterworks"] .btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
[data-brand="waterworks"] .btn-ghost:hover { border-color: var(--ink); background: transparent; }

[data-brand="waterworks"] .btn-on-navy {
  background: transparent;
  color: var(--on-navy);
  border-color: rgba(246, 243, 239, .32);
}
[data-brand="waterworks"] .btn-on-navy:hover {
  background: var(--on-navy);
  color: #000;
  border-color: var(--on-navy);
}

/* A quieter tertiary: text with a rule under it, the Waterworks "Learn more". */
[data-brand="waterworks"] .btn-quiet {
  min-height: 0;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  cursor: pointer;
}
[data-brand="waterworks"] .btn-quiet:hover { border-bottom-color: var(--line-2); color: var(--ink-2); }


/* --------------------------------------------------------------------------
   5. PORTAL SHELL - black sidebar, hairline rules, generous air
   -------------------------------------------------------------------------- */

[data-brand="waterworks"] .side {
  background: var(--navy);
  border-right: 1px solid rgba(246, 243, 239, .12);
  padding: 34px 22px;
}
[data-brand="waterworks"] .side .brand-name { color: var(--on-navy); }

[data-brand="waterworks"] .side-nav button {
  border-radius: 0;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--on-navy-2);
  min-height: 42px;
}
[data-brand="waterworks"] .side-nav button:hover { background: transparent; color: var(--on-navy); }
[data-brand="waterworks"] .side-nav button[aria-current="true"] {
  background: transparent;
  color: var(--on-navy);
  box-shadow: inset 2px 0 0 var(--on-navy);
}
[data-brand="waterworks"] .side-nav button[aria-current="true"] .nav-ico { color: var(--on-navy); }
[data-brand="waterworks"] .nav-ico { color: rgba(246, 243, 239, .5); }

[data-brand="waterworks"] .portal-head { padding: 40px 40px 26px; }
[data-brand="waterworks"] .portal-head .sub {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 10px;
}
[data-brand="waterworks"] .portal-body { padding: 34px 40px 72px; gap: 34px; }

[data-brand="waterworks"] .demo-strip {
  background: var(--navy);
  color: var(--on-navy);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: 11px 40px;
}
[data-brand="waterworks"] .demo-strip span {
  color: var(--on-navy-2);
  letter-spacing: 0.06em;
  text-transform: none;
}


/* --------------------------------------------------------------------------
   6. PANELS, TILES, TABLES
   -------------------------------------------------------------------------- */

[data-brand="waterworks"] .panel,
[data-brand="waterworks"] .tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-flat);
  box-shadow: none;
}
[data-brand="waterworks"] .panel-head { padding: 20px 26px; }
[data-brand="waterworks"] .panel-head .hint {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
[data-brand="waterworks"] .panel-body { padding: 26px; }

[data-brand="waterworks"] .tile { padding: 24px 26px; gap: 12px; }
[data-brand="waterworks"] .tile-key {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--track-xwide);
  text-transform: uppercase;
  color: var(--ink-3);
}
[data-brand="waterworks"] .tile-val {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 42px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
[data-brand="waterworks"] .tile-sub { font-size: 12px; color: var(--ink-3); }

[data-brand="waterworks"] thead th {
  padding: 13px 26px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--track-wide);
  background: var(--sand);
  color: var(--ink-3);
}
[data-brand="waterworks"] tbody td {
  padding: 16px 26px;
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-2);
}
[data-brand="waterworks"] tbody td.name { font-weight: 400; color: var(--ink); }
[data-brand="waterworks"] tbody tr:hover td { background: var(--sand); }

[data-brand="waterworks"] .stack-row { padding: 16px 26px; }
[data-brand="waterworks"] .stack-row .k { font-size: 13px; color: var(--ink); font-weight: 400; }
[data-brand="waterworks"] .stack-row .k .s { font-size: 11px; color: var(--ink-3); }
[data-brand="waterworks"] .stack-row .v { font-size: 13px; font-weight: 300; }

[data-brand="waterworks"] .task { padding: 18px 26px; }
[data-brand="waterworks"] .task-mark { border-radius: 0; width: 6px; height: 6px; }
[data-brand="waterworks"] .task-mark.info { background: var(--ink); }
[data-brand="waterworks"] .task-mark.warn { background: var(--warn); }
[data-brand="waterworks"] .task-copy .t { font-size: 13px; font-weight: 400; color: var(--ink); }
[data-brand="waterworks"] .task-copy .d { font-size: 12px; color: var(--ink-3); }

[data-brand="waterworks"] .doc-ico { color: var(--ink-3); }


/* --------------------------------------------------------------------------
   7. PILLS - squared, hairline-bordered, tracked caps. No dot.
   -------------------------------------------------------------------------- */

[data-brand="waterworks"] .pill {
  border-radius: 0;
  padding: 4px 9px;
  border: 1px solid currentColor;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
}
[data-brand="waterworks"] .pill::before { display: none; }

[data-brand="waterworks"] .pill-good    { color: var(--good);   border-color: var(--good-line);         background: var(--good-bg); }
[data-brand="waterworks"] .pill-warn    { color: var(--warn);   border-color: var(--warn-line);         background: var(--warn-bg); }
[data-brand="waterworks"] .pill-bad     { color: var(--bad);    border-color: var(--bad-line);          background: var(--bad-bg); }
[data-brand="waterworks"] .pill-info    { color: var(--info);   border-color: var(--info-line);         background: var(--info-bg); }
[data-brand="waterworks"] .pill-neutral { color: var(--ink-3);  border-color: var(--pill-neutral-line); background: var(--pill-neutral-bg); }


/* --------------------------------------------------------------------------
   8. FORMS
   -------------------------------------------------------------------------- */

[data-brand="waterworks"] .field label {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--track-xwide);
  text-transform: uppercase;
  color: var(--ink-3);
}
[data-brand="waterworks"] .field input,
[data-brand="waterworks"] .field select,
[data-brand="waterworks"] .field textarea {
  min-height: 48px;
  padding: 13px 15px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 300;
  color: var(--ink);
}
[data-brand="waterworks"] .field input::placeholder { color: var(--ink-3); }
[data-brand="waterworks"] .field input:focus,
[data-brand="waterworks"] .field select:focus,
[data-brand="waterworks"] .field textarea:focus {
  border-color: var(--ink);
  outline: none;
}

[data-brand="waterworks"] .signin-screen { background: var(--navy); }
[data-brand="waterworks"] .signin-card {
  border-radius: var(--r-flat);
  padding: 48px 44px;
  box-shadow: none;
  border-color: var(--line);
}
[data-brand="waterworks"] .sandbox-note {
  border-radius: 0;
  background: var(--sand);
  border-color: var(--line-2);
}
[data-brand="waterworks"] .sandbox-note strong {
  font-size: 10px;
  letter-spacing: var(--track-wide);
  color: var(--ink);
}
[data-brand="waterworks"] .sandbox-note p { font-size: 12px; color: var(--ink-3); }


/* ==========================================================================
   9. DISCOUNT-CODE COMPONENTS - new classes for nuvias-code

   These don't exist in the base portal; add the markup shown above each block.
   ========================================================================== */

/* --- The code itself -----------------------------------------------------
   <div class="code-card">
     <span class="code-label">Employee code</span>
     <div class="code-value">WW-EMP-4K7Q-2M</div>
     <div class="code-meta">Issued Aug 30, 2026 - Expires Dec 31, 2026 - 40% off</div>
     <button class="btn btn-primary code-copy" type="button">Copy code</button>
   </div>
   ------------------------------------------------------------------------- */

[data-brand="waterworks"] .code-card {
  background: var(--panel);
  border: 1px solid var(--ink);
  padding: 32px 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

[data-brand="waterworks"] .code-label {
  font-size: 10px;
  letter-spacing: var(--track-xwide);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* The code is the one place tracking goes very wide - it makes the string
   transcribable by eye and over the phone, which is what an employee actually
   does with it. Tabular figures so columns of codes line up. */
[data-brand="waterworks"] .code-value {
  font-family: var(--font-mono);
  font-size: clamp(22px, 3.6vw, 30px);
  font-weight: 400;
  letter-spacing: 0.16em;
  line-height: 1.2;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

[data-brand="waterworks"] .code-meta {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Inline code in a table cell */
[data-brand="waterworks"] .code-inline {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.10em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Copy-to-clipboard confirmation. Toggle .is-copied for ~2s in JS. */
[data-brand="waterworks"] .code-copy.is-copied {
  background: transparent;
  color: var(--good);
  border-color: var(--good-line);
}


/* --- Discount tier -------------------------------------------------------
   <span class="tier tier-employee">Employee</span>

   Tier names below are a placeholder - confirm the real programme names with
   Nuvia before this ships. Every tier carries the same visual weight on
   purpose: a tier is a category, not a status, and it shouldn't compete with
   the status pill next to it.
   ------------------------------------------------------------------------- */

[data-brand="waterworks"] .tier {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  background: transparent;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
[data-brand="waterworks"] .tier-employee { border-color: var(--ink); color: var(--ink); }


/* --- Status ledger -------------------------------------------------------
   Map the code lifecycle onto the pill classes:
     Active    -> pill pill-good
     Issued    -> pill pill-neutral   (delivered, not yet used)
     Redeemed  -> pill pill-info
     Expiring  -> pill pill-warn
     Expired   -> pill pill-neutral
     Revoked   -> pill pill-bad
   ------------------------------------------------------------------------- */


/* --- Redemption meter ----------------------------------------------------
   <div class="meter"><span style="width: 62%"></span></div>
   A hairline bar, not a chunky progress element.
   ------------------------------------------------------------------------- */

[data-brand="waterworks"] .meter {
  width: 100%;
  height: 2px;
  background: var(--line);
  overflow: hidden;
}
[data-brand="waterworks"] .meter > span {
  display: block;
  height: 100%;
  background: var(--ink);
}


/* --- Rule / divider ------------------------------------------------------
   <hr class="rule">  - the Waterworks section break
   ------------------------------------------------------------------------- */

[data-brand="waterworks"] .rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}


/* --- Empty state ---------------------------------------------------------
   <div class="empty">
     <p>No codes issued for this plan year yet.</p>
     <button class="btn btn-primary">Issue a code</button>
   </div>
   ------------------------------------------------------------------------- */

[data-brand="waterworks"] .empty {
  padding: 64px 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
[data-brand="waterworks"] .empty p {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  color: var(--ink-3);
}


/* --------------------------------------------------------------------------
   10. RESPONSIVE - keep the base breakpoints, just reclaim the padding
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  [data-brand="waterworks"] .side-nav button[aria-current="true"] {
    box-shadow: inset 0 -2px 0 var(--on-navy);
  }
}

@media (max-width: 620px) {
  [data-brand="waterworks"] .portal-head,
  [data-brand="waterworks"] .portal-body,
  [data-brand="waterworks"] .demo-strip { padding-left: 20px; padding-right: 20px; }
  [data-brand="waterworks"] .portal-head h1 { font-size: 27px; }
  [data-brand="waterworks"] .code-card { padding: 24px 22px; }
  [data-brand="waterworks"] thead th,
  [data-brand="waterworks"] tbody td { padding-left: 20px; padding-right: 20px; }
}