/* joiintsaid.com — CSS Grid + custom properties + Flexbox. Pure custom CSS. */

/* --------------------------------------------------------------- tokens -- */
:root{
  /* taken off the JointsAid bottle: the label teal pushed to its darkest for
     the page ground, its dotted highlight brought forward as the action
     colour, and the white cap kept for the light relief sections. */
  --jii-deep:#0B2B2A;
  --jii-deeper:#061C1B;
  --jii-mid:#123F3D;
  --jii-line:#1E514E;
  --jii-aqua:#6FD3CC;
  --jii-aqua-dk:#49B5AE;
  --jii-aqua-fade:rgba(111,211,204,.14);
  --jii-sheet:#FFFFFF;
  --jii-sheet-2:#F2F6F6;
  --jii-sheet-line:#DEE7E6;
  --jii-ink:#0D1F1E;
  --jii-grey:#657875;
  --jii-pale:#B4CECB;
  --jii-pale-2:#89A8A5;

  --jii-h:"Chivo","Segoe UI",system-ui,-apple-system,sans-serif;
  --jii-b:"Mulish","Segoe UI",system-ui,Arial,sans-serif;

  --jii-hold:1200px;
  --jii-leaf:0 20px 0 20px;     /* the asymmetric corner this build is built on */
  --jii-leaf-sm:0 12px 0 12px;
  --jii-pad:clamp(3.3rem,6vw,5.6rem);
}

/* ----------------------------------------------------------------- base -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:94px}
body{margin:0;background:var(--jii-deep);color:var(--jii-pale);
  font:400 17.5px/1.72 var(--jii-b);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--jii-aqua);text-underline-offset:3px}
a:hover{color:#fff}
h1,h2,h3,h4{font-family:var(--jii-h);font-weight:700;line-height:1.14;
  letter-spacing:-.015em;color:#fff;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,4.6vw,3.6rem)}
h2{font-size:clamp(1.75rem,3.2vw,2.5rem)}
h3{font-size:1.14rem}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.05em;padding-left:1.15em}
:focus-visible{outline:3px solid var(--jii-aqua);outline-offset:2px}
::selection{background:var(--jii-aqua);color:var(--jii-deeper)}

.jii-hold{width:100%;max-width:var(--jii-hold);margin-inline:auto;
  padding-inline:clamp(18px,4.2vw,34px)}
.jii-slab{padding-block:var(--jii-pad)}
.jii-deeper{background:var(--jii-deeper)}
.jii-sheet{background:var(--jii-sheet);color:#34413F}
.jii-sheet h2,.jii-sheet h3{color:var(--jii-ink)}
.jii-sheet a{color:var(--jii-aqua-dk)}
.jii-sheet a:hover{color:var(--jii-ink)}
.jii-sheet-2{background:var(--jii-sheet-2);color:#34413F}
.jii-sheet-2 h2,.jii-sheet-2 h3{color:var(--jii-ink)}
.jii-sheet-2 a{color:var(--jii-aqua-dk)}
.jii-snug{padding-block:clamp(2.2rem,3.8vw,3.2rem)}
.jii-from-md,.jii-from-lg{display:none}
.jii-slide{overflow-x:auto;min-width:0;max-width:100%}

/* ----------------------------------------------------------------- lede -- */
.jii-lede{max-width:740px;margin-bottom:clamp(2.1rem,3.6vw,3rem)}
.jii-lede-mid{margin-inline:auto;text-align:center}
.jii-lede h1,.jii-lede h2{margin-bottom:.36em}
.jii-lede-sub{margin:0;font-size:1.08rem;color:var(--jii-pale-2)}
.jii-sheet .jii-lede-sub,.jii-sheet-2 .jii-lede-sub{color:var(--jii-grey)}
.jii-tag{margin:0 0 1rem;font:700 .72rem/1 var(--jii-h);letter-spacing:.24em;
  text-transform:uppercase;color:var(--jii-aqua);
  border-left:3px solid var(--jii-aqua);padding-left:.8rem}
.jii-lede-mid .jii-tag{border-left:0;padding-left:0;
  display:inline-block;border-bottom:3px solid var(--jii-aqua);padding-bottom:.5rem}
.jii-sheet .jii-tag,.jii-sheet-2 .jii-tag{color:var(--jii-aqua-dk);
  border-color:var(--jii-aqua-dk)}
.jii-tag-aqua{color:var(--jii-aqua);border-color:var(--jii-aqua)}

/* --------------------------------------------------------------- action -- */
.jii-act{display:inline-flex;align-items:center;justify-content:center;
  font:700 1rem/1 var(--jii-h);text-decoration:none;padding:1.08rem 1.95rem;
  border-radius:var(--jii-leaf);border:2px solid transparent;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s}
.jii-act-aqua{background:var(--jii-aqua);color:var(--jii-deeper)}
.jii-act-aqua:hover{background:#fff;color:var(--jii-deeper)}
.jii-act-solid{background:var(--jii-ink);color:#fff}
.jii-act-solid:hover{background:#000;color:#fff}
.jii-act-edge{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.jii-act-edge:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.jii-act-line{background:transparent;color:var(--jii-ink);
  border-color:var(--jii-sheet-line)}
.jii-act-line:hover{border-color:var(--jii-ink);color:var(--jii-ink)}
.jii-act-sm{padding:.8rem 1.4rem;font-size:.92rem;border-radius:var(--jii-leaf-sm)}
.jii-act-xs{padding:.66rem 1.1rem;font-size:.86rem;border-radius:var(--jii-leaf-sm)}
.jii-act-full{width:100%}

/* ------------------------------------------------------ rail and header -- */
.jii-rail{background:var(--jii-deeper);color:var(--jii-pale-2);font-size:.82rem;
  border-bottom:1px solid var(--jii-line)}
.jii-rail-in{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;
  padding-block:.5rem}
.jii-rail p{margin:0}
.jii-rail b{color:var(--jii-aqua)}

.jii-head{position:sticky;top:0;z-index:60;background:rgba(11,43,42,.95);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--jii-line)}
.jii-head-in{display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:64px;position:relative}
.jii-badge{display:inline-flex;flex:none}
.jii-badge img{width:150px;height:auto;opacity:.96}
.jii-nav{display:flex;align-items:center;gap:12px}
.jii-nav ul{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;
  flex-wrap:nowrap}
.jii-nav ul a{display:block;padding:.44rem .44rem;font:600 .825rem/1.2 var(--jii-h);
  color:#DCEAE9;text-decoration:none;white-space:nowrap;border-bottom:2px solid
  transparent}
.jii-nav ul a:hover{color:var(--jii-aqua);border-bottom-color:var(--jii-aqua)}
.jii-nav ul a.jii-now{color:var(--jii-aqua);border-bottom-color:var(--jii-aqua)}
.jii-nav a.jii-act-aqua{color:var(--jii-deeper);border-bottom:0}
.jii-open{display:none;width:46px;height:40px;border:1px solid var(--jii-line);
  background:transparent;border-radius:var(--jii-leaf-sm);cursor:pointer;
  padding:10px 9px;flex:none}
.jii-open span{display:block;height:2px;background:var(--jii-aqua);border-radius:2px;
  margin:0 0 5px}
.jii-open span:last-child{margin:0}

/* ----------------------------------------------------------------- path -- */
.jii-path{background:var(--jii-deeper);border-bottom:1px solid var(--jii-line);
  font-size:.85rem}
.jii-path ol{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;
  padding:.7rem 0}
.jii-path li+li::before{content:"\2014";margin-right:.4rem;color:#3D6663}
.jii-path a{color:var(--jii-pale-2);text-decoration:none}
.jii-path a:hover{color:var(--jii-aqua)}

/* ----------------------------------------- hero: headline over a 3-up row */
.jii-hero{padding-block:clamp(2.8rem,5.2vw,4.4rem) 0;position:relative;
  overflow:hidden}
.jii-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 20% 0%,rgba(111,211,204,.15),transparent 62%)}
.jii-hero>.jii-hold{position:relative;z-index:1}
.jii-hero h1{max-width:19ch;margin-bottom:.4em}
.jii-hero h1 em{font-style:normal;color:var(--jii-aqua)}
.jii-hero-sub{font-size:1.12rem;color:var(--jii-pale-2);max-width:52ch;margin:0}
.jii-triple{display:grid;gap:22px;margin-top:clamp(2.2rem,4vw,3.2rem);
  align-items:stretch}
.jii-pod{position:relative;background:var(--jii-mid);border:1px solid var(--jii-line);
  border-radius:var(--jii-leaf);padding:1.7rem 1.6rem;display:flex;
  flex-direction:column}
.jii-pod-art{background:linear-gradient(160deg,var(--jii-aqua),var(--jii-aqua-dk));
  border-color:transparent;align-items:center;justify-content:flex-end;padding:0;
  overflow:hidden;min-height:300px}
.jii-pod-art img{filter:drop-shadow(0 18px 28px rgba(0,0,0,.35))}
.jii-pod-stamp{position:absolute;right:6%;bottom:8%;width:104px;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.32))}
.jii-pod h3{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--jii-aqua);margin-bottom:1.3rem}
.jii-facts{list-style:none;margin:0;padding:0;display:grid;gap:0}
.jii-facts li{padding:.85rem 0;border-top:1px solid var(--jii-line)}
.jii-facts li:first-child{border-top:0;padding-top:0}
.jii-facts b{display:block;font-family:var(--jii-h);font-size:1.28rem;color:#fff;
  line-height:1.15}
.jii-facts span{display:block;font-size:.85rem;color:var(--jii-pale-2);
  margin-top:.2rem}
.jii-pod-buy{background:var(--jii-deeper)}
.jii-from{font-family:var(--jii-h);font-size:2.6rem;font-weight:800;color:#fff;
  line-height:1;margin:0}
.jii-from i{font-style:normal;font-size:1.1rem;vertical-align:super}
.jii-from-note{margin:.5rem 0 1.4rem;font-size:.88rem;color:var(--jii-pale-2)}
.jii-pod-buy .jii-act{margin-bottom:.7rem}
.jii-pod-small{margin:.4rem 0 0;font-size:.78rem;color:#6B8E8B}

.jii-claims{margin-top:clamp(2rem,3.4vw,2.6rem);
  border-top:1px solid var(--jii-line);padding-top:1.4rem}
.jii-claims ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:10px 12px}
.jii-claims li{font:700 .84rem/1 var(--jii-h);color:var(--jii-aqua);
  border:1px solid var(--jii-line);border-radius:var(--jii-leaf-sm);
  padding:.55rem 1rem}
.jii-claims p{margin:1rem 0 0;font-size:.81rem;color:#6B8E8B;max-width:66ch}

/* -------------------------------------------------- why choose: a ledger -- */
.jii-ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--jii-line)}
.jii-ledger li{display:grid;gap:1rem 1.6rem;
  grid-template-columns:auto minmax(0,1fr);padding:1.5rem 0;
  border-bottom:1px solid var(--jii-line)}
.jii-num{font:800 1.6rem/1 var(--jii-h);color:var(--jii-aqua);opacity:.55;
  min-width:2.4ch}
.jii-ledger h3{margin-bottom:.35em}
.jii-ledger p{margin:0;color:var(--jii-pale-2);font-size:1rem}

/* --------------------------------------------------- what is: spec block -- */
.jii-spec{border:1px solid var(--jii-sheet-line);border-radius:var(--jii-leaf);
  overflow:hidden;background:#fff}
.jii-spec-row{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding:.85rem 1.25rem;border-bottom:1px solid var(--jii-sheet-line);
  font-size:.97rem}
.jii-spec-row:last-child{border-bottom:0}
.jii-spec-row:nth-child(odd){background:var(--jii-sheet-2)}
.jii-spec-row span{color:var(--jii-grey)}
.jii-spec-row b{color:var(--jii-ink);text-align:right;font-family:var(--jii-h)}
.jii-spec-note{margin:1rem 0 0;font-size:.83rem;color:var(--jii-grey)}
.jii-flagbox{border-left:4px solid var(--jii-aqua-dk);background:var(--jii-sheet-2);
  padding:1.15rem 1.35rem;margin-top:1.7rem;border-radius:0 var(--jii-leaf-sm) 0 0}
.jii-flagbox p{margin:0;font-size:.98rem}
.jii-flagbox b{color:var(--jii-ink)}
.jii-frame{border-radius:var(--jii-leaf);overflow:hidden;background:var(--jii-mid)}
.jii-frame img{width:100%}

/* --------------------------------------------------------------- steps --- */
.jii-steps{list-style:none;margin:0;padding:0;display:grid;gap:20px;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.jii-steps li{position:relative;background:var(--jii-mid);
  border:1px solid var(--jii-line);border-radius:var(--jii-leaf);
  padding:2.6rem 1.6rem 1.7rem;overflow:hidden}
.jii-steps b{position:absolute;right:.9rem;top:.2rem;font:800 4.2rem/1 var(--jii-h);
  color:rgba(111,211,204,.16)}
.jii-steps h3{margin-bottom:.45em;position:relative}
.jii-steps p{margin:0;color:var(--jii-pale-2);font-size:1rem;position:relative}

/* -------------------------------------------------------------- reviews -- */
.jii-voices{display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
.jii-voice{background:var(--jii-mid);border:1px solid var(--jii-line);
  border-left:4px solid var(--jii-aqua);border-radius:0 var(--jii-leaf-sm) 0 0;
  padding:1.6rem 1.6rem 1.3rem;display:flex;flex-direction:column;position:relative}
.jii-voice-mono{position:absolute;right:1.2rem;top:1.2rem;width:40px;height:40px;
  border:1px solid var(--jii-line);border-radius:var(--jii-leaf-sm);
  display:flex;align-items:center;justify-content:center;
  font:700 .8rem/1 var(--jii-h);color:var(--jii-aqua)}
.jii-voice h3{font-size:1.03rem;color:var(--jii-aqua);margin-bottom:.55em;
  padding-right:3.4rem}
.jii-voice p{margin:0 0 1.1rem;font-size:.97rem;color:#CDE0DE}
.jii-voice-foot{margin-top:auto;padding-top:.9rem;
  border-top:1px solid var(--jii-line);display:flex;flex-wrap:wrap;gap:.4rem 1rem;
  align-items:baseline;font-size:.85rem;color:var(--jii-pale-2)}
.jii-voice-foot b{font-family:var(--jii-h);color:#fff;font-size:.95rem}
.jii-voice-foot em{font-style:normal;margin-left:auto;font:700 .72rem/1 var(--jii-h);
  letter-spacing:.1em;text-transform:uppercase;color:#6B8E8B}

/* -------------------------------------------- pricing: comparison matrix -- */
.jii-matrix{width:100%;border-collapse:separate;border-spacing:0;min-width:680px;
  font-size:.97rem}
.jii-matrix th,.jii-matrix td{padding:1rem 1.1rem;text-align:center;
  border-bottom:1px solid var(--jii-line);vertical-align:middle}
.jii-matrix thead th{background:var(--jii-deeper);color:#fff;vertical-align:top;
  border-bottom:2px solid var(--jii-line)}
.jii-matrix thead th:first-child{text-align:left;background:transparent;
  border-bottom-color:transparent}
.jii-matrix tbody th{text-align:left;font:600 .95rem/1.4 var(--jii-b);
  color:var(--jii-pale-2);width:32%}
.jii-matrix .jii-col-pick{background:var(--jii-aqua-fade)}
.jii-matrix thead .jii-col-pick{background:var(--jii-mid);
  border-top:3px solid var(--jii-aqua)}
.jii-pack-name{display:block;font:800 1.25rem/1.2 var(--jii-h);color:#fff}
.jii-pack-span{display:block;font-size:.83rem;color:var(--jii-pale-2);
  margin-top:.25rem}
.jii-pack-flag{display:inline-block;margin-bottom:.6rem;background:var(--jii-aqua);
  color:var(--jii-deeper);font:700 .68rem/1 var(--jii-h);letter-spacing:.14em;
  text-transform:uppercase;padding:.35rem .7rem;border-radius:var(--jii-leaf-sm)}
.jii-pack-art{margin:.9rem auto 0;max-height:112px;width:auto}
.jii-rate{font:800 2.1rem/1 var(--jii-h);color:#fff}
.jii-rate i{font-style:normal;font-size:1rem;vertical-align:super}
.jii-rate span{display:block;font:400 .8rem/1 var(--jii-b);
  color:var(--jii-pale-2);margin-top:.35rem}
.jii-matrix .jii-col-pick .jii-rate{color:var(--jii-aqua)}
.jii-matrix td.jii-buy{padding-block:1.4rem;border-bottom:0}
.jii-yes{color:var(--jii-aqua);font-weight:700}
.jii-no{color:#6B8E8B}
.jii-paynote{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px;margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--jii-line);
  font-size:.9rem;color:var(--jii-pale-2);text-align:center}
.jii-paylist{font:700 .82rem/1.5 var(--jii-h);color:var(--jii-aqua);
  border:1px solid var(--jii-line);border-radius:var(--jii-leaf-sm);
  padding:.45rem 1rem}

/* -------------------------------------------------------------- science -- */
.jii-rank{list-style:none;margin:0;padding:0;display:grid;gap:0;
  border-top:1px solid var(--jii-sheet-line)}
.jii-rank li{display:grid;gap:.4rem 1.4rem;
  grid-template-columns:auto minmax(0,1fr) auto;padding:1.2rem 0;
  border-bottom:1px solid var(--jii-sheet-line);align-items:baseline}
.jii-rank-n{font:800 1.1rem/1 var(--jii-h);color:var(--jii-aqua-dk)}
.jii-rank h3{margin:0;font-size:1.06rem}
.jii-rank p{grid-column:2/-1;margin:0;font-size:.96rem;color:var(--jii-grey)}
.jii-verdict{font:700 .72rem/1 var(--jii-h);letter-spacing:.12em;
  text-transform:uppercase;color:var(--jii-ink);background:#DDF2F0;
  border-radius:var(--jii-leaf-sm);padding:.4rem .7rem;white-space:nowrap}

/* ------------------------------------------------------------- benefits -- */
.jii-tiles{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
.jii-tile{background:var(--jii-mid);border:1px solid var(--jii-line);
  border-radius:var(--jii-leaf);padding:1.7rem 1.5rem;position:relative}
.jii-tile::before{content:"";position:absolute;left:0;top:0;width:34px;height:3px;
  background:var(--jii-aqua)}
.jii-tile h3{margin-bottom:.5em}
.jii-tile p{margin:0;color:var(--jii-pale-2);font-size:.99rem}

/* ---------------------------------------------------------- ingredients -- */
.jii-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.96rem;
  min-width:620px}
.jii-table thead th{background:var(--jii-deeper);color:var(--jii-aqua);
  font:700 .74rem/1.3 var(--jii-h);letter-spacing:.14em;text-transform:uppercase;
  text-align:left;padding:.85rem 1rem}
.jii-table td,.jii-table th{padding:.9rem 1rem;vertical-align:top;
  border-bottom:1px solid var(--jii-line)}
.jii-table tbody th{text-align:left;font-family:var(--jii-h);font-weight:700;
  color:#fff;white-space:nowrap}
.jii-table tbody td{color:var(--jii-pale-2)}
.jii-table tbody tr:last-child td,.jii-table tbody tr:last-child th{border-bottom:0}
.jii-table-light thead th{background:var(--jii-ink);color:#fff}
.jii-table-light td,.jii-table-light th{border-bottom-color:var(--jii-sheet-line)}
.jii-table-light tbody th{color:var(--jii-ink)}
.jii-table-light tbody td{color:var(--jii-grey)}
.jii-table-light tbody tr:nth-child(even){background:var(--jii-sheet-2)}

/* ----------------------------------------------------------- rate strip -- */
.jii-rates{display:grid;gap:0;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--jii-line);border-radius:var(--jii-leaf);overflow:hidden}
.jii-rates li{list-style:none;padding:1.5rem;text-align:center;
  border-right:1px solid var(--jii-line)}
.jii-rates li:last-child{border-right:0}
.jii-rates b{display:block;font:800 1.9rem/1 var(--jii-h);color:var(--jii-aqua)}
.jii-rates span{display:block;font-size:.86rem;color:var(--jii-pale-2);
  margin-top:.4rem}
.jii-rates{margin:0;padding:0}

/* ------------------------------------------------------------ guarantee -- */
.jii-vow{display:grid;gap:clamp(1.8rem,3.6vw,3rem);align-items:center;
  grid-template-columns:minmax(0,1fr)}
.jii-vow-art{display:flex;justify-content:center}
.jii-marks{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.6rem}
.jii-marks li{position:relative;padding-left:1.9rem;font-size:1rem}
.jii-marks li::before{content:"";position:absolute;left:0;top:.44em;width:12px;
  height:7px;border-left:2.5px solid var(--jii-aqua);
  border-bottom:2.5px solid var(--jii-aqua);transform:rotate(-45deg)}
.jii-sheet .jii-marks li::before,.jii-sheet-2 .jii-marks li::before{
  border-color:var(--jii-aqua-dk)}

/* ------------------------------------------------------------------ faq -- */
.jii-asks{max-width:880px;margin-inline:auto;border-top:1px solid var(--jii-sheet-line)}
.jii-ask{border-bottom:1px solid var(--jii-sheet-line)}
.jii-ask summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:center;
  padding:1.15rem .2rem;font-family:var(--jii-h)}
.jii-ask summary::-webkit-details-marker{display:none}
.jii-ask summary b{font:700 .8rem/1 var(--jii-h);color:var(--jii-aqua-dk)}
.jii-ask summary span{font-weight:700;font-size:1.04rem;color:var(--jii-ink)}
.jii-ask summary i{width:22px;height:22px;position:relative;justify-self:end}
.jii-ask summary i::before,.jii-ask summary i::after{content:"";position:absolute;
  background:var(--jii-ink);transition:transform .18s,opacity .18s}
.jii-ask summary i::before{left:0;right:0;top:10px;height:2px}
.jii-ask summary i::after{top:0;bottom:0;left:10px;width:2px}
.jii-ask[open] summary i::after{transform:scaleY(0);opacity:0}
.jii-ask[open] summary i::before{background:var(--jii-aqua-dk)}
.jii-ask[open] summary span{color:var(--jii-aqua-dk)}
.jii-ask-in{padding:0 2rem 1.35rem 2.6rem;color:var(--jii-grey)}
.jii-ask-in p:last-child{margin-bottom:0}

/* ------------------------------------------------------------ final cta -- */
.jii-final{background:var(--jii-deeper);position:relative;overflow:hidden;
  padding-block:clamp(3rem,5.4vw,4.6rem)}
.jii-final::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 80% at 88% 50%,rgba(111,211,204,.17),transparent 62%)}
.jii-final>.jii-hold{position:relative;z-index:1}
.jii-final-in{display:grid;gap:clamp(2rem,4vw,3.4rem);align-items:center}
.jii-final h2{font-size:clamp(1.9rem,3.6vw,2.8rem);max-width:17ch}
.jii-final-sub{color:var(--jii-pale-2);font-size:1.06rem;max-width:36em}
.jii-final-do{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.7rem}
.jii-final-pay{margin:1.8rem 0 0;font:700 .82rem/1.6 var(--jii-h);
  color:var(--jii-aqua)}
.jii-final-by{margin:.5rem 0 0;font-size:.85rem;color:#6B8E8B}
.jii-final-art{margin:0;position:relative;display:flex;justify-content:center;
  align-items:center;padding:1.4rem}
.jii-final-art::before{content:"";position:absolute;inset:0;
  border:1px solid rgba(111,211,204,.34);border-radius:0 60px 0 60px}
.jii-final-art img{position:relative;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.55))}
.jii-final-stamp{position:absolute;right:6%;bottom:8%;width:110px;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.5))}

/* ------------------------------------------------------- page furniture -- */
.jii-pagetop{background:var(--jii-deeper);
  padding-block:clamp(2.4rem,4.4vw,3.8rem);border-bottom:1px solid var(--jii-line)}
.jii-pagetop .jii-lede{margin-bottom:0}
.jii-prose{max-width:820px;margin-inline:auto}
.jii-prose h2{margin-top:2.3rem}
.jii-prose h2:first-child{margin-top:0}
.jii-prose h3{margin-top:1.7rem}
.jii-prose li{margin-bottom:.45em}
.jii-side{background:var(--jii-sheet-2);border-left:4px solid var(--jii-aqua-dk);
  padding:1.2rem 1.4rem;margin:1.9rem 0;border-radius:0 var(--jii-leaf-sm) 0 0}
.jii-side p:last-child{margin-bottom:0}
.jii-card{background:#fff;border:1px solid var(--jii-sheet-line);
  border-radius:var(--jii-leaf);padding:1.7rem 1.6rem;height:100%}
.jii-card h3{margin-bottom:.55em}
.jii-card p:last-child,.jii-card ul:last-child{margin-bottom:0}
.jii-two{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
.jii-three{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))}
.jii-pair{display:grid;gap:clamp(1.8rem,3.6vw,3rem);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.jii-pair-wide{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.jii-note{font-size:.9rem;color:var(--jii-pale-2)}
.jii-sheet .jii-note,.jii-sheet-2 .jii-note{color:var(--jii-grey)}
.jii-mid{text-align:center}
.jii-gap{margin-top:1.9rem}
.jii-piece{background:#fff;border:1px solid var(--jii-sheet-line);
  border-radius:var(--jii-leaf);overflow:hidden;display:flex;flex-direction:column;
  height:100%}
.jii-piece-when{background:var(--jii-ink);color:var(--jii-aqua);
  font:700 .72rem/1.4 var(--jii-h);letter-spacing:.14em;text-transform:uppercase;
  padding:.62rem 1.4rem}
.jii-piece-in{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.jii-piece h3 a{color:var(--jii-ink);text-decoration:none}
.jii-piece h3 a:hover{color:var(--jii-aqua-dk)}
.jii-piece p{color:var(--jii-grey);font-size:.96rem}
.jii-piece-go{margin-top:auto;font:700 .92rem/1 var(--jii-h);text-decoration:none}

/* --------------------------------------------------------------- footer -- */
.jii-foot{background:var(--jii-deeper);color:var(--jii-pale-2);font-size:.95rem;
  border-top:1px solid var(--jii-line)}
.jii-foot-strip{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:16px;border:1px solid var(--jii-line);
  border-radius:var(--jii-leaf);padding:1.4rem 1.6rem;
  margin-top:clamp(2.2rem,4vw,3.2rem);background:var(--jii-mid)}
.jii-foot-strip p{margin:0;max-width:64ch;color:#D2E5E3}
.jii-foot-strip b{color:#fff}
.jii-foot-grid{display:grid;gap:clamp(2rem,4vw,3.2rem);
  grid-template-columns:minmax(0,1fr);padding-block:clamp(2.4rem,4vw,3.4rem)}
.jii-foot-id img{margin-bottom:1.1rem;opacity:.9}
.jii-foot-id p{font-size:.93rem;color:#7E9D9A}
.jii-foot-pay{margin:1.2rem 0 0;font:700 .8rem/1.6 var(--jii-h);
  color:var(--jii-aqua)}
.jii-foot-by{margin:.35rem 0 0;font-size:.81rem;color:#6B8E8B}
.jii-foot-mail{margin:.9rem 0 0}
.jii-foot-mail a{color:#fff;font-weight:700}
.jii-foot-cols{display:grid;gap:26px;grid-template-columns:repeat(3,minmax(0,1fr))}
.jii-fc h2{font:700 .76rem/1 var(--jii-h);letter-spacing:.18em;
  text-transform:uppercase;color:var(--jii-aqua);margin-bottom:1rem}
.jii-fc ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.jii-fc a{color:var(--jii-pale-2);text-decoration:none;font-size:.94rem}
.jii-fc a:hover{color:#fff}
.jii-fine{border-top:1px solid var(--jii-line);padding-block:1.9rem;columns:2;
  column-gap:44px;font-size:.81rem;color:#6B8E8B}
.jii-fine p{break-inside:avoid;margin:0 0 .8rem}
.jii-fine b{color:#9DBAB7}
.jii-foot-tail{border-top:1px solid var(--jii-line)}
.jii-foot-tail-in{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:12px;padding-block:1rem;font-size:.84rem;
  color:#6B8E8B}
.jii-foot-tail nav{display:flex;flex-wrap:wrap;gap:16px}
.jii-foot-tail a{color:var(--jii-pale-2);text-decoration:none}
.jii-foot-tail a:hover{color:var(--jii-aqua)}

/* ---------------------------------------------------------- breakpoints -- */
@media(min-width:768px){
  .jii-from-md{display:block}
  .jii-vow{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
}
@media(min-width:1024px){
  .jii-from-lg{display:block}
  .jii-triple{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
  .jii-final-in{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
}
@media(min-width:640px) and (max-width:1023px){
  .jii-triple{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jii-pod-art{grid-column:1/-1;min-height:260px}
}
@media(max-width:1260px){
  .jii-nav ul a{padding:.42rem .34rem;font-size:.79rem}
  .jii-act-xs{padding:.6rem .85rem;font-size:.81rem}
}
@media(max-width:1060px){
  html{scroll-padding-top:78px}
  .jii-open{display:block}
  .jii-nav{display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--jii-deep);border-bottom:1px solid var(--jii-line);
    flex-direction:column;align-items:stretch;gap:0;
    padding:.5rem clamp(18px,4.2vw,34px) 1.2rem;max-height:76vh;overflow-y:auto}
  .jii-nav.jii-shown{display:flex}
  .jii-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .jii-nav ul a{padding:.75rem .2rem;font-size:1rem;border-bottom:1px solid
    var(--jii-line)}
  .jii-nav a.jii-act-aqua{margin-top:1rem;padding:.95rem;font-size:1rem}
  .jii-steps,.jii-tiles,.jii-three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  .jii-voices{grid-template-columns:minmax(0,1fr)}
  .jii-pair,.jii-pair-wide{grid-template-columns:minmax(0,1fr)}
  .jii-rates{grid-template-columns:minmax(0,1fr)}
  .jii-rates li{border-right:0;border-bottom:1px solid var(--jii-line)}
  .jii-rates li:last-child{border-bottom:0}
  .jii-fine{columns:1}
  .jii-rank li{grid-template-columns:auto minmax(0,1fr)}
  .jii-verdict{grid-row:1;grid-column:2;justify-self:end}
  .jii-rank h3{grid-column:2}
}
@media(max-width:640px){
  body{font-size:16.8px}
  .jii-triple{grid-template-columns:minmax(0,1fr)}
  .jii-steps,.jii-tiles,.jii-three,.jii-two{grid-template-columns:minmax(0,1fr)}
  .jii-foot-cols{grid-template-columns:minmax(0,1fr)}
  .jii-act{width:100%}
  .jii-act-sm,.jii-act-xs{width:auto}
  .jii-pod-stamp{width:84px}
  .jii-final-stamp{width:88px}
  .jii-ask-in{padding-left:0;padding-right:0}
  .jii-ask summary{grid-template-columns:auto minmax(0,1fr) auto;gap:.7rem}
}