@charset "utf-8";
/* ==========================================================================
   memoclear-en.com

   TECHNOLOGY
   ----------------------------------------------------------------------
   Hand written. No framework, no build step, no CDN, and no JavaScript
   file anywhere in the package. Where the last site in this network used
   custom elements and a module, this one leans on a different set of
   platform features entirely:

     * the mobile menu is the native POPOVER API -- a button with
       popovertarget opens it, Escape and a click outside close it, and
       the browser does all of that with no script;
     * the question panels are an EXCLUSIVE ACCORDION, <details name="qa">,
       so opening one closes the last without a line of code;
     * the price cards align their rows with SUBGRID, so the three columns
       line up whatever length the wording is;
     * @scope keeps the prose and card rules from leaking into each other;
     * :where() holds the base layer at zero specificity, so a component
       rule never has to fight it;
     * @view-transition cross-fades between pages where the browser
       supports it, and is simply ignored where it does not.

   NAMING
   ----------------------------------------------------------------------
   clr-block          a block
   clr-block-part     a part inside it (single hyphen, no BEM)
   clr-on-* clr-is-*  placement and state

   IMAGES
   ----------------------------------------------------------------------
   Nothing is cropped. Every picture is width-driven with height:auto, no
   image sits in a fixed-height box, the cropping value of object-fit is
   used nowhere, and no ancestor of an image hides its overflow.
   ========================================================================== */

@view-transition { navigation: auto }

:root {
  --clr-paper: #F7F5F0;
  --clr-card: #FFFFFF;
  --clr-sand: #EFEAE0;
  --clr-ink: #16181D;
  --clr-ink-soft: #3A4049;
  --clr-mute: #6E7681;
  --clr-line: #DED8CC;
  --clr-line-soft: #EBE6DC;
  --clr-blue: #2563EB;
  --clr-blue-deep: #1D4ED8;
  --clr-blue-pale: #E8EEFC;

  --clr-lift: 0 1px 2px rgb(22 24 29 / .05), 0 12px 28px rgb(22 24 29 / .07);
  --clr-lift-2: 0 12px 24px rgb(22 24 29 / .1), 0 40px 70px rgb(22 24 29 / .14);

  --clr-r: 4px;
  --clr-r-2: 10px;
  --clr-pill: 999px;

  --clr-head-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --clr-body-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --clr-gutter: 22px;
  --clr-rhythm: clamp(54px, 5.6vw, 104px);
}

:where(*, *::before, *::after) { box-sizing: border-box }
:where(html) { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }

body {
  margin: 0;
  background: var(--clr-paper);
  color: var(--clr-ink-soft);
  font-family: var(--clr-body-font);
  font-size: 19px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* one rule, every picture */
:where(img) { display: block; max-width: 100%; height: auto }

:where(svg) {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

:where(h1, h2, h3, h4) {
  font-family: var(--clr-head-font);
  color: var(--clr-ink);
  margin: 0 0 .5em;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.03em;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 3.9rem); line-height: 1.03 }
h2 { font-size: clamp(1.7rem, 1.12rem + 2.1vw, 2.7rem) }
h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.36rem); line-height: 1.32; font-weight: 700;
     letter-spacing: -.02em }
h4 { font-size: 1rem; font-weight: 700; letter-spacing: -.01em }

:where(p) { margin: 0 0 1.1em }
p:last-child { margin-bottom: 0 }
:where(b, strong) { color: var(--clr-ink); font-weight: 600 }

a {
  color: var(--clr-blue-deep);
  text-underline-offset: 3px;
  overflow-wrap: break-word;
}
a:hover { color: var(--clr-ink) }

::selection { background: var(--clr-blue); color: #fff }
:focus-visible { outline: 3px solid var(--clr-blue); outline-offset: 3px; border-radius: 3px }

/* ============================================================ page frame */
.clr-skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--clr-ink); color: var(--clr-paper); padding: 12px 20px;
}
.clr-skip:focus { left: 0 }

.clr-wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--clr-gutter) }
.clr-wrap.clr-is-tight { max-width: 760px }
.clr-wrap.clr-is-broad { max-width: 1320px }

.clr-band { padding: var(--clr-rhythm) 0; position: relative }
.clr-band.clr-is-short { padding: clamp(34px, 3.4vw, 56px) 0 }
.clr-band.clr-on-card { background: var(--clr-card) }
.clr-band.clr-on-sand { background: var(--clr-sand) }
.clr-band.clr-on-ink { background: var(--clr-ink); color: #C9CCD2 }
.clr-band.clr-on-ink h2, .clr-band.clr-on-ink h3 { color: #fff }
.clr-band.clr-on-ink a { color: #9FC0FF }

/* a hairline between bands, the way a printed page separates columns */
.clr-band + .clr-band { border-top: 1px solid var(--clr-line-soft) }

/* ================================================================= strip */
.clr-strip { background: var(--clr-ink); color: #B9BEC7; font-size: .78rem }
.clr-strip-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px 30px; padding-block: 10px;
}
.clr-strip-row span { display: inline-flex; align-items: center; gap: 8px }
.clr-strip-row svg { width: 1.05em; height: 1.05em; color: #8FB4FF }
.clr-strip-row b { color: #fff; font-weight: 600 }

/* ============================================================== masthead */
.clr-head {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--clr-paper) 93%, transparent);
  backdrop-filter: saturate(150%) blur(9px);
  border-bottom: 1px solid var(--clr-line);
}
.clr-head-row { display: flex; align-items: center; gap: 16px; min-height: 76px }

.clr-mark { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none;
            margin-right: auto }
.clr-mark-name {
  font-family: var(--clr-head-font); font-weight: 800; font-size: 1.46rem;
  color: var(--clr-ink); letter-spacing: -.04em; line-height: 1;
}
.clr-mark-rule { width: 26px; height: 3px; background: var(--clr-blue); flex: none;
                 align-self: center }
.clr-mark-sub {
  font-family: var(--clr-head-font); font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--clr-mute); font-weight: 700;
}
.clr-head .clr-mark-sub { display: none }

.clr-nav { display: flex; align-items: center; gap: clamp(14px, 1.5vw, 24px) }
.clr-nav a {
  font-family: var(--clr-head-font); font-size: .92rem; font-weight: 700;
  color: var(--clr-ink-soft); text-decoration: none; padding: 4px 0;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.clr-nav a:hover { color: var(--clr-ink); border-color: var(--clr-line) }
.clr-nav a.clr-is-here { color: var(--clr-ink); border-color: var(--clr-blue) }

/* ---- the menu: native popover, no script ------------------------------ */
.clr-menu-btn {
  display: none; width: 46px; height: 44px; border: 1px solid var(--clr-line);
  background: var(--clr-card); border-radius: var(--clr-r); cursor: pointer;
  place-items: center; gap: 5px; grid-auto-flow: row; padding: 0;
}
.clr-menu-btn i { display: block; width: 20px; height: 2px; background: var(--clr-ink) }

.clr-menu[popover] {
  position: fixed; inset: auto 16px 16px; width: auto; max-width: 420px; margin: 0 auto;
  border: 1px solid var(--clr-line); border-top: 3px solid var(--clr-blue);
  background: var(--clr-card); color: var(--clr-ink-soft);
  border-radius: var(--clr-r-2); box-shadow: var(--clr-lift-2);
  padding: 8px 22px 22px; overflow: visible;
}
.clr-menu[popover]::backdrop { background: rgb(22 24 29 / .38) }
.clr-menu-list { display: flex; flex-direction: column }
.clr-menu-list a {
  font-family: var(--clr-head-font); font-weight: 700; font-size: 1.02rem;
  color: var(--clr-ink-soft); text-decoration: none; padding: 14px 0;
  border-bottom: 1px solid var(--clr-line-soft);
}
.clr-menu-list a.clr-is-here { color: var(--clr-blue-deep) }
.clr-menu-list .clr-cta { margin-top: 18px; border-bottom: 0; justify-content: center }
.clr-menu-close {
  display: block; margin: 14px 0 0; width: 100%; padding: 11px; cursor: pointer;
  background: none; border: 1px solid var(--clr-line); border-radius: var(--clr-r);
  font-family: var(--clr-head-font); font-size: .9rem; font-weight: 700; color: var(--clr-mute);
}

/* ================================================================ action */
.clr-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--clr-head-font); font-weight: 800; font-size: 1rem;
  letter-spacing: -.012em; text-decoration: none;
  background: var(--clr-blue); color: #fff;
  padding: 16px 30px; border: 2px solid var(--clr-blue); border-radius: var(--clr-r);
  white-space: nowrap;
  transition: background .16s, border-color .16s, color .16s, transform .16s;
}
.clr-cta:hover {
  background: var(--clr-blue-deep); border-color: var(--clr-blue-deep); color: #fff;
  transform: translateY(-1px);
}
.clr-cta svg { width: 1.08em; height: 1.08em; stroke-width: 2.3 }
.clr-cta.clr-is-big { padding: 19px 40px; font-size: 1.1rem }
.clr-cta.clr-is-small { padding: 11px 20px; font-size: .9rem }
.clr-cta.clr-is-wide { width: 100% }
.clr-cta.clr-is-ghost { background: transparent; color: var(--clr-ink); border-color: var(--clr-ink) }
.clr-cta.clr-is-ghost:hover { background: var(--clr-ink); color: var(--clr-paper) }
.clr-cta.clr-is-ink { background: var(--clr-ink); border-color: var(--clr-ink); color: var(--clr-paper) }
.clr-cta.clr-is-ink:hover { background: #000; border-color: #000; color: #fff }
.clr-cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center }

.clr-inline {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--clr-head-font); font-weight: 700; font-size: .95rem;
  color: var(--clr-blue-deep); text-decoration: none;
  border-bottom: 2px solid var(--clr-blue-pale); padding-bottom: 2px;
}
.clr-inline:hover { color: var(--clr-ink); border-color: var(--clr-ink) }

/* ================================================================== hero */
.clr-hero { background: linear-gradient(180deg, var(--clr-card), var(--clr-paper)) }
.clr-hero-row {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(26px, 3.6vw, 60px); align-items: center;
  padding-block: clamp(38px, 4.4vw, 78px);
}
.clr-hero-flag {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--clr-head-font); font-size: .72rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: var(--clr-blue-deep);
  margin-bottom: 20px;
}
.clr-hero-flag::before { content: ""; width: 28px; height: 2px; background: var(--clr-blue) }
.clr-hero h1 { max-width: 15ch; margin-bottom: .38em }
.clr-hero-lede { font-size: clamp(1.05rem, 1rem + .45vw, 1.24rem); line-height: 1.68;
                 max-width: 48ch }
.clr-hero-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  margin-top: 28px; border-top: 1px solid var(--clr-line);
}
.clr-hero-facts div {
  padding: 16px 16px 0 0; border-right: 1px solid var(--clr-line); min-width: 0;
}
.clr-hero-facts div:last-child { border-right: 0; padding-right: 0 }
.clr-hero-facts b {
  display: block; font-family: var(--clr-head-font); font-weight: 800;
  font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem);
  color: var(--clr-ink); line-height: 1; letter-spacing: -.04em;
}
.clr-hero-facts span { display: block; font-size: .8rem; color: var(--clr-mute); margin-top: 6px }

.clr-shot { display: grid; place-items: center; position: relative }
.clr-shot::before {
  content: ""; position: absolute; inset: auto 0 8% 0; height: 62%;
  background: var(--clr-sand); border-radius: var(--clr-r-2); pointer-events: none;
}
.clr-shot img { position: relative; max-width: min(100%, 380px) }
.clr-shot.clr-is-small img { max-width: min(100%, 210px) }
.clr-shot.clr-is-plain::before { display: none }

/* ============================================================= standards */
.clr-standards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 }
.clr-standards div {
  padding: 26px 24px; border-left: 1px solid var(--clr-line);
}
.clr-standards div:first-child { border-left: 0; padding-left: 0 }
.clr-standards div:last-child { padding-right: 0 }
.clr-standards i {
  display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 14px;
  color: var(--clr-blue-deep); background: var(--clr-blue-pale); border-radius: var(--clr-r);
}
.clr-standards i svg { width: 1.2em; height: 1.2em }
.clr-standards b {
  display: block; font-family: var(--clr-head-font); font-size: .96rem; font-weight: 800;
  color: var(--clr-ink); margin-bottom: 6px;
}
.clr-standards p { font-size: .87rem; line-height: 1.58; margin: 0; color: var(--clr-ink-soft) }

/* =============================================================== titling */
.clr-title { max-width: 720px; margin: 0 0 clamp(28px, 3vw, 46px) }
.clr-title.clr-is-centred { margin-inline: auto; text-align: center }
.clr-title-kick {
  display: block; font-family: var(--clr-head-font); font-size: .72rem; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase; color: var(--clr-mute); margin-bottom: 12px;
}
.clr-title p { font-size: clamp(1.02rem, 1rem + .32vw, 1.16rem); line-height: 1.68;
               color: var(--clr-ink-soft) }

/* ================================================================= cards */
.clr-cols { display: grid; gap: 1px; background: var(--clr-line-soft) }
.clr-cols.clr-on-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.clr-cols.clr-on-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.clr-cols.clr-on-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }

@scope (.clr-card) {
  :scope {
    background: var(--clr-card); padding: 28px 26px;
    display: flex; flex-direction: column;
  }
  h3 { margin-bottom: .42em }
  p { font-size: .94rem; line-height: 1.66; margin-bottom: .8em }
  .clr-card-no {
    font-family: var(--clr-head-font); font-size: .78rem; font-weight: 800;
    letter-spacing: .14em; color: var(--clr-blue-deep); margin-bottom: 14px;
  }
  .clr-card-fig {
    font-family: var(--clr-head-font); font-size: 2.2rem; font-weight: 800;
    color: var(--clr-ink); line-height: 1; letter-spacing: -.05em; display: block;
    margin-bottom: 10px;
  }
  .clr-card-icon {
    display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px;
    color: var(--clr-blue-deep); background: var(--clr-blue-pale); border-radius: var(--clr-r);
  }
  .clr-card-icon svg { width: 1.2em; height: 1.2em }
  .clr-card-foot {
    margin-top: auto; padding-top: 14px; font-size: .8rem; color: var(--clr-mute);
    border-top: 1px solid var(--clr-line-soft);
  }
}

.clr-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
             gap: 14px }
.clr-ticks li { display: flex; gap: 13px; align-items: flex-start; font-size: .97rem;
                line-height: 1.62 }
.clr-ticks svg { width: 1.1em; height: 1.1em; margin-top: .34em; color: var(--clr-blue);
                 stroke-width: 2.4 }

/* =============================================================== figures */
.clr-figure { margin: 0; overflow: visible }
.clr-figure figcaption { margin-top: 12px; font-size: .8rem; line-height: 1.56;
                         color: var(--clr-mute) }
.clr-figure.clr-is-framed {
  background: var(--clr-card); border: 1px solid var(--clr-line); padding: 16px;
}
.clr-figure.clr-is-round img { border-radius: 50% }

/* ================================================= the formula directory */
.clr-ings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
            background: var(--clr-line-soft) }
.clr-ing {
  background: var(--clr-card); text-decoration: none; display: flex; flex-direction: column;
  transition: background .16s;
}
.clr-ing:hover { background: var(--clr-blue-pale) }
.clr-ing-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px;
                flex: 1 }
.clr-ing-dose {
  font-family: var(--clr-head-font); font-size: 1.6rem; font-weight: 800; color: var(--clr-ink);
  letter-spacing: -.04em; line-height: 1;
}
.clr-ing h3 { margin: 0; color: var(--clr-ink); font-size: 1.08rem }
.clr-ing p { margin: 0; font-size: .9rem; line-height: 1.62; color: var(--clr-ink-soft) }
.clr-ing-go {
  margin-top: auto; padding-top: 10px; font-family: var(--clr-head-font); font-weight: 700;
  font-size: .86rem; color: var(--clr-blue-deep); display: inline-flex; align-items: center;
  gap: .4em;
}
.clr-ing-go svg { width: 1em; height: 1em; stroke-width: 2.4 }

/* ================================================================= steps */
.clr-steps { counter-reset: clr-step; display: grid; gap: 0 }
.clr-step {
  counter-increment: clr-step;
  display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 22px;
  padding: 24px 0; border-top: 1px solid var(--clr-line);
}
.clr-step:last-child { border-bottom: 1px solid var(--clr-line) }
.clr-step::before {
  content: counter(clr-step);
  font-family: var(--clr-head-font); font-weight: 800; font-size: 1.9rem;
  color: var(--clr-line); line-height: .9; letter-spacing: -.05em;
}
.clr-step h3 { margin-bottom: .3em }
.clr-step p { font-size: .96rem; margin: 0 }

/* ================================================== supplement facts box */
.clr-panel {
  background: #fff; border: 2px solid var(--clr-ink); padding: 20px 22px; max-width: 520px;
  font-family: var(--clr-body-font);
}
.clr-panel-title {
  font-family: var(--clr-head-font); font-size: 1.48rem; font-weight: 800;
  letter-spacing: -.03em; margin: 0 0 6px; color: var(--clr-ink);
  border-bottom: 9px solid var(--clr-ink); padding-bottom: 5px;
}
.clr-panel-serve { font-size: .87rem; padding: 5px 0; border-bottom: 1px solid var(--clr-ink);
                   line-height: 1.45 }
.clr-panel-head {
  display: flex; justify-content: flex-end; gap: 14px; font-size: .73rem; font-weight: 700;
  padding: 4px 0; border-bottom: 5px solid var(--clr-ink); color: var(--clr-ink);
}
.clr-panel-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 54px; gap: 10px;
  font-size: .86rem; padding: 5px 0; border-bottom: 1px solid #C8C2B6; line-height: 1.4;
}
.clr-panel-row span:nth-child(2), .clr-panel-row span:last-child { font-weight: 700;
                                                                   color: var(--clr-ink) }
.clr-panel-row span:last-child { text-align: right }
.clr-panel-row small { display: block; font-size: .74em; color: var(--clr-ink-soft) }
.clr-panel-row.clr-is-last { border-bottom: 5px solid var(--clr-ink) }
.clr-panel-note { font-size: .76rem; line-height: 1.5; color: var(--clr-ink-soft);
                  margin-top: 10px }
.clr-panel-note b { display: block; margin-top: 8px }

/* ================================================================ quotes */
.clr-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px }
.clr-quote {
  background: var(--clr-card); border-top: 3px solid var(--clr-ink); padding: 26px 24px;
  display: flex; flex-direction: column;
}
.clr-quote-text { font-size: .95rem; line-height: 1.68; margin: 0 0 20px }
.clr-quote-who { display: flex; align-items: center; gap: 13px; margin-top: auto }
.clr-quote-face { width: 54px; flex: none }
.clr-quote-face img { border-radius: 50% }
.clr-quote-name { font-family: var(--clr-head-font); font-size: .98rem; font-weight: 800;
                  color: var(--clr-ink); margin: 0 }
.clr-quote-meta { font-size: .78rem; color: var(--clr-mute); margin: 2px 0 0 }
.clr-stars { display: inline-flex; gap: 2px; color: var(--clr-blue); margin-bottom: 12px }
.clr-stars svg { width: .9rem; height: .9rem; fill: currentColor; stroke: none }

/* ============================== pricing: three tickets aligned by subgrid */
.clr-offer {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  align-items: stretch;
}
.clr-ticket {
  display: grid; grid-template-rows: subgrid; grid-row: span 9;
  background: var(--clr-card); border: 1px solid var(--clr-line); padding: 0 0 26px;
  position: relative;
}
.clr-offer { grid-template-rows: repeat(9, auto) }
.clr-ticket.clr-is-pick { border: 2px solid var(--clr-ink); box-shadow: var(--clr-lift) }
.clr-ticket-flag {
  font-family: var(--clr-head-font); font-size: .68rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; text-align: center; padding: 9px 12px;
  background: var(--clr-sand); color: var(--clr-ink-soft);
}
.clr-ticket.clr-is-pick .clr-ticket-flag { background: var(--clr-ink); color: #fff }
.clr-ticket-shot { display: grid; place-items: center; padding: 16px 20px 6px }
.clr-ticket-shot img { max-width: min(100%, 180px) }
.clr-ticket-name {
  font-family: var(--clr-head-font); font-size: 1.2rem; font-weight: 800; color: var(--clr-ink);
  text-align: center; margin: 0; padding: 0 20px;
}
.clr-ticket-sub { text-align: center; font-size: .82rem; color: var(--clr-mute); margin: 4px 0 0;
                  padding: 0 20px }
.clr-ticket-price { text-align: center; padding: 16px 20px 0 }
.clr-ticket-price b {
  font-family: var(--clr-head-font); font-size: 3rem; font-weight: 800; color: var(--clr-ink);
  line-height: 1; letter-spacing: -.05em;
}
.clr-ticket-price sup { font-size: .36em; top: -.85em; position: relative; margin-right: .05em }
.clr-ticket-price em { font-style: normal; display: block; font-size: .74rem;
                       letter-spacing: .16em; text-transform: uppercase; color: var(--clr-mute);
                       margin-top: 8px }
.clr-ticket-sums { text-align: center; padding: 14px 20px 0; font-size: .93rem }
.clr-ticket-sums s { color: var(--clr-mute) }
.clr-ticket-save {
  display: inline-block; margin-top: 10px; font-family: var(--clr-head-font); font-size: .8rem;
  font-weight: 800; padding: 4px 12px; background: var(--clr-blue-pale);
  color: var(--clr-blue-deep);
}
.clr-ticket-ship {
  padding: 14px 20px 0; font-size: .86rem; display: flex; align-items: center;
  justify-content: center; gap: 8px; color: var(--clr-ink-soft);
}
.clr-ticket-ship svg { width: 1.12em; height: 1.12em; color: var(--clr-blue) }
.clr-ticket-go { padding: 18px 20px 0 }
.clr-ticket-fine { padding: 12px 20px 0; font-size: .76rem; color: var(--clr-mute);
                   text-align: center; line-height: 1.5 }

.clr-perday {
  margin-top: clamp(24px, 3vw, 40px); display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 28px; padding: 20px 24px; background: var(--clr-ink); color: #C9CCD2;
}
.clr-perday b { color: #fff; font-family: var(--clr-head-font); font-weight: 800 }
.clr-perday span { font-size: .92rem }

/* ============================================================ pledge box */
.clr-pledge {
  display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 32px; align-items: center;
  background: var(--clr-card); border: 1px solid var(--clr-line);
  border-left: 5px solid var(--clr-blue); padding: clamp(24px, 3vw, 40px);
}
.clr-seals { display: flex; flex-wrap: wrap; gap: 30px; align-items: center;
             justify-content: center }
.clr-seals .clr-figure { width: 104px }

/* ====================================== questions: an exclusive accordion */
.clr-qa { border-top: 2px solid var(--clr-ink) }
.clr-qa details {
  border-bottom: 1px solid var(--clr-line);
}
.clr-qa summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 21px 2px;
  font-family: var(--clr-head-font); font-size: clamp(1rem, .97rem + .3vw, 1.15rem);
  font-weight: 800; color: var(--clr-ink); line-height: 1.36; letter-spacing: -.02em;
}
.clr-qa summary::-webkit-details-marker { display: none }
.clr-qa summary::after {
  content: ""; width: 22px; height: 22px; flex: none;
  background:
    linear-gradient(var(--clr-blue), var(--clr-blue)) center / 14px 2px no-repeat,
    linear-gradient(var(--clr-blue), var(--clr-blue)) center / 2px 14px no-repeat;
  transition: transform .2s;
}
.clr-qa details[open] summary::after { transform: rotate(45deg) }
.clr-qa-body { padding: 0 2px 24px }
.clr-qa-body p { font-size: .95rem; max-width: 76ch; margin: 0 }

/* ================================================================= notes */
.clr-note {
  background: var(--clr-card); border: 1px solid var(--clr-line);
  border-left: 4px solid var(--clr-ink); padding: 22px 26px;
}
.clr-note h3 { font-size: 1.04rem; margin-bottom: .4em }
.clr-note p { font-size: .94rem }

/* ================================================================ tables */
.clr-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch }
.clr-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 520px }
.clr-table th, .clr-table td { text-align: left; padding: 13px 15px;
                               border-bottom: 1px solid var(--clr-line) }
.clr-table thead th {
  font-family: var(--clr-head-font); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--clr-mute); font-weight: 800;
  border-bottom: 2px solid var(--clr-ink);
}
.clr-table tbody th { font-weight: 600; color: var(--clr-ink) }
.clr-table caption { caption-side: bottom; padding-top: 12px; font-size: .8rem;
                     color: var(--clr-mute); text-align: left }

/* ============================================================= page head */
.clr-crumbs { font-size: .79rem; color: var(--clr-mute); padding: 18px 0 0 }
.clr-crumbs a { color: var(--clr-mute); text-decoration: none }
.clr-crumbs a:hover { color: var(--clr-blue-deep) }
.clr-crumbs i { margin: 0 8px; font-style: normal; color: var(--clr-line) }

.clr-pagehead { padding: clamp(18px, 2.2vw, 30px) 0 clamp(26px, 3vw, 46px);
                background: var(--clr-card); border-bottom: 1px solid var(--clr-line) }
.clr-pagehead h1 { max-width: 20ch }
.clr-pagehead p { font-size: clamp(1.02rem, 1rem + .32vw, 1.18rem); line-height: 1.68;
                  max-width: 64ch }
.clr-pagehead-meta {
  display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; font-size: .8rem;
  color: var(--clr-mute);
}
.clr-pagehead-meta span { display: inline-flex; align-items: center; gap: 7px }
.clr-pagehead-meta svg { width: 1.05em; height: 1.05em; color: var(--clr-blue) }

/* ================================================================= prose */
@scope (.clr-prose) {
  h2 { margin-top: 1.7em }
  h3 { margin-top: 1.4em }
  ul, ol { padding-left: 1.2em; margin: 0 0 1.1em }
  li { margin-bottom: .5em }
  :scope > *:first-child { margin-top: 0 }
  blockquote {
    margin: 1.5em 0; padding: 2px 0 2px 24px; border-left: 3px solid var(--clr-blue);
    font-size: 1.05rem; color: var(--clr-ink);
  }
}

/* ========================================================= article cards */
.clr-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
             background: var(--clr-line-soft) }
.clr-post {
  background: var(--clr-card); padding: 28px 26px; text-decoration: none;
  display: flex; flex-direction: column; transition: background .16s;
}
.clr-post:hover { background: var(--clr-blue-pale) }
.clr-post-kick {
  font-family: var(--clr-head-font); font-size: .68rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--clr-mute); margin-bottom: 12px;
}
.clr-post h3 { margin-bottom: .4em; color: var(--clr-ink) }
.clr-post p { font-size: .91rem; line-height: 1.62; color: var(--clr-ink-soft); margin: 0 }
.clr-post-go {
  margin-top: 16px; font-family: var(--clr-head-font); font-weight: 700; font-size: .86rem;
  color: var(--clr-blue-deep); display: inline-flex; align-items: center; gap: .4em;
}
.clr-post-go svg { width: 1em; height: 1em; stroke-width: 2.4 }

/* ==================================================== the closing notice */
.clr-finish { background: var(--clr-sand); border-top: 1px solid var(--clr-line) }
.clr-finish-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  gap: clamp(26px, 4vw, 56px); align-items: center;
  padding-block: clamp(40px, 4.6vw, 76px);
}
.clr-finish h2 { margin-bottom: .34em; max-width: 18ch }
.clr-finish-copy p { max-width: 54ch; font-size: clamp(1.02rem, 1rem + .32vw, 1.18rem);
                     line-height: 1.68 }
.clr-finish-go { margin-top: 24px }
.clr-finish-fine { margin-top: 16px; font-size: .8rem; color: var(--clr-mute) }
.clr-finish-shot { display: grid; place-items: center }
.clr-finish-shot img { max-width: min(100%, 220px) }

/* ================================================================ footer */
.clr-foot { background: var(--clr-ink); color: #9AA0AA; padding: clamp(42px, 4.6vw, 70px) 0 28px }
.clr-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px }
.clr-foot .clr-mark-name { color: #fff }
.clr-foot .clr-mark-sub { color: #8FB4FF }
.clr-foot-about p { margin-top: 16px; font-size: .88rem; line-height: 1.66; max-width: 40ch }
.clr-foot-col h2 {
  font-family: var(--clr-head-font); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: #8FB4FF; margin: 0 0 12px; font-weight: 800;
}
.clr-foot-col h2 + ul { margin-bottom: 22px }
.clr-foot-col ul { list-style: none; margin: 0; padding: 0; display: flex;
                   flex-direction: column }
.clr-foot-col a { color: #B4BAC4; font-size: .88rem; text-decoration: none;
                  display: inline-block; padding: 5px 0 }
.clr-foot-col a:hover { color: #fff }
.clr-foot-legal {
  margin-top: 36px; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / .13);
  display: grid; gap: 12px;
}
.clr-foot-legal p { font-size: .77rem; line-height: 1.62; margin: 0; max-width: 106ch;
                    color: #868D97 }
.clr-foot-legal b { color: #C5CAD2 }
.clr-foot-base {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .13);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: .77rem; color: #7A818B;
}
.clr-foot-base a { color: #9AA0AA; text-decoration: none }
.clr-foot-base a:hover { color: #fff }

/* ============================================================= utilities */
.clr-centre { text-align: center }
.clr-small { font-size: .8rem; line-height: 1.6; color: var(--clr-mute) }
.clr-lead { font-size: clamp(1.02rem, 1rem + .32vw, 1.18rem); line-height: 1.68 }
.clr-gap { margin-top: clamp(26px, 3vw, 44px) }
.clr-gap-s { margin-top: 16px }
.clr-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 3.8vw, 56px); align-items: center;
}
.clr-split.clr-on-top { align-items: start }
.clr-split.clr-on-lead { grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr) }
.clr-split > * { min-width: 0 }

/* ============================================================ responsive */
@media (max-width: 1040px) {
  .clr-standards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 }
  .clr-standards div { border-left: 1px solid var(--clr-line);
                       border-top: 1px solid var(--clr-line); padding: 24px }
  .clr-standards div:nth-child(2n+1) { border-left: 0; padding-left: 0 }
  .clr-standards div:nth-child(-n+2) { border-top: 0 }
  .clr-foot-grid { grid-template-columns: 1fr 1fr 1fr }
  .clr-foot-about { grid-column: 1 / -1 }
}

@media (max-width: 1099px) {
  .clr-nav { display: none }
  .clr-menu-btn { display: grid }
}

@media (max-width: 960px) {
  .clr-head-row { min-height: 66px }
  .clr-hero-row { grid-template-columns: 1fr }
  .clr-hero-lede { max-width: none }
  .clr-shot { order: -1; margin-bottom: 8px }
  .clr-shot img { max-width: min(70%, 300px) }
  .clr-split { grid-template-columns: 1fr }
  .clr-ings, .clr-quotes, .clr-posts, .clr-offer,
  .clr-cols.clr-on-3, .clr-cols.clr-on-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .clr-offer { grid-template-rows: none }
  .clr-ticket { grid-row: auto; display: flex; flex-direction: column }
  .clr-pledge { grid-template-columns: 1fr; text-align: center; justify-items: center;
                border-left: 1px solid var(--clr-line); border-top: 5px solid var(--clr-blue) }
  .clr-finish-row { grid-template-columns: minmax(0, 1fr) 190px }
}

@media (max-width: 720px) {
  body { font-size: 18.5px }
  .clr-finish-row { grid-template-columns: 1fr }
  .clr-finish-shot { order: -1 }
  .clr-finish-copy p { max-width: none }
  .clr-hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .clr-hero-facts div:nth-child(2n) { border-right: 0; padding-right: 0 }
  .clr-hero-facts div:nth-child(n+3) { margin-top: 14px; padding-top: 14px;
                                       border-top: 1px solid var(--clr-line) }
}

@media (max-width: 620px) {
  .clr-wrap { padding: 0 17px }
  .clr-ings, .clr-quotes, .clr-posts, .clr-offer,
  .clr-cols.clr-on-2, .clr-cols.clr-on-3, .clr-cols.clr-on-4 { grid-template-columns: 1fr }
  .clr-standards { grid-template-columns: 1fr }
  .clr-standards div { border-left: 0; padding-left: 0; padding-right: 0 }
  .clr-standards div:first-child { border-top: 0 }
  .clr-mark-name { font-size: 1.3rem }
  .clr-step { grid-template-columns: 1fr; gap: 10px }
  .clr-foot-grid { grid-template-columns: 1fr 1fr }
  .clr-seals .clr-figure { width: 88px }
}

@media (max-width: 400px) {
  .clr-cta { padding: 14px 22px; font-size: .95rem }
  .clr-ticket-price b { font-size: 2.5rem }
}

@media (prefers-reduced-motion: reduce) {
  :where(html) { scroll-behavior: auto }
  .clr-cta, .clr-ing, .clr-post { transition: none }
  @view-transition { navigation: none }
}