/* nueva/n-what-is-nueva-overview/n-what-is-nueva
 * The company overview page. Design lives in _shared/product/v1/product.css, scoped .sk-prod, so
 * this page reads as one family with the product pages. This file declares Nueva's palette on the
 * block's own scope class (no shared brand swatch is touched) plus two things no other page has:
 * the PRESENTED BY strip and the product grid.
 *
 * The @import pins the shared component version. Do not bump it here, that is a deliberate
 * migration (see _shared/README.md).
 */
@import url("https://invokableapp.github.io/shark-pages/_shared/product/v1/product.css");

.sk-prod-nva-what{
  --sk-body:     #4a5560;
  --sk-cream:    #fcfeff;
  --sk-ink:      #141313;
  --sk-lime:     #5fd9d5;
  --sk-line:     #d5dfe1;
  --sk-mist:     #e8f8f6;
  --sk-navy:     #102a2a;
  --sk-navy-d:   #071116;
  --sk-sage:     #087f7b;
  --sk-sans:     Montserrat,system-ui,sans-serif;
  --sk-serif:    Montserrat,"Helvetica Neue",Arial,sans-serif;
  --sk-teal:     #0abab5;
  --sk-teal-d:   #087F7B;
  --sk-tint:     #e8f8f6;
}

/* --- bespoke rules carried over from the donor --- */
/* Gold and tan, on white. The palette is not invented: it is lifted off the products
 * themselves. Renew is a cream bottle with an antique-gold wordmark, Luxe is a cream
 * bottle with a solid gold cap, and both supplement panels are printed in the same two
 * golds on sand. The Beneve navy and teal carry the other campaigns; this lane is the
 * premium skincare lane and reads warm.
 *
 * These are LOCAL tokens on this block only. No brand swatch is touched.
 *
 *   gold-d  #a97f3f   antique gold, the primary. Buttons, kickers, rules.
 *   gold    #c9a96a   light gold, the accent. Gradients, dark-section buttons.
 *   bronze  #8a6f45   the deeper metal, for numerals and small caps.
 *   tan     #ddc79b   the tint, for hairlines and quiet fills.
 *   ink     #2b2721   a warm near-black, never a blue-black.
 */


/* ---------- cross-links to the funnel's other two products ---------- */
/* Every product page in this funnel carries buttons to the other two, because the diagnostic
 * routes to a ROUTINE and a routine can legitimately end up including more than one of them.
 * They sit in the CLOSE section, which is dark, and the shared ghost style is dark-on-white and
 * unreadable there. This is a light outline variant, declared block-locally so
 * _shared/product/v1/ stays untouched. */
.sk-prod-nva-snowslim .sk-prod-close .sk-prod-cta-row{justify-content:center;flex-wrap:wrap}
.sk-prod-nva-snowslim .sk-prod-btn-alt{
  display:inline-flex;align-items:center;gap:.55rem;
  color:#fff;text-decoration:none;font-weight:600;font-size:1.02rem;
  padding:1.05rem 1.9rem;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.42);
  transition:border-color .25s ease,background .25s ease,transform .25s ease;
}
.sk-prod-nva-snowslim .sk-prod-btn-alt:hover{
  border-color:var(--sk-teal,#c9a96a);background:rgba(255,255,255,.08);transform:translateY(-2px);
}

/* ── PRESENTED BY strip ────────────────────────────────────────────────────────
 * Joe's concept, lifted from the GLP "What I Do" one pager, which opens with
 * "Presented By: {rep_full_name}" above an in page nav. The point is that a page a rep
 * SENDS should say who sent it before it says anything else.
 *
 * Page scoped on purpose: it is additive to _shared/product/v1 and defined here, so no other
 * system's pages change. If a second system adopts it, promote it to the shared component then.
 * It is static rather than sticky: the shared mobile buy bar already owns top:0, and two fixed
 * strips would stack on a phone. */
.sk-prod-nva-what .sk-nva-present{
  background:var(--sk-navy); color:#fff; padding:11px 16px;
}
.sk-prod-nva-what .sk-nva-present-in{
  max-width:1120px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.sk-prod-nva-what .sk-nva-present-by{
  margin:0; font-size:.92rem; letter-spacing:.01em; color:#fff;
}
.sk-prod-nva-what .sk-nva-present-by b{ font-weight:700; }
.sk-prod-nva-what .sk-nva-present-nav{
  display:flex; gap:8px; flex-wrap:wrap; margin:0; padding:0; list-style:none;
}
.sk-prod-nva-what .sk-nva-present-nav a{
  display:inline-block; padding:.34rem .72rem; border-radius:999px;
  font-size:.82rem; font-weight:600; text-decoration:none;
  color:#fff; background:rgba(255,255,255,.12);
}
.sk-prod-nva-what .sk-nva-present-nav a:hover{ background:var(--sk-teal); color:var(--sk-navy); }
.sk-prod-nva-what .sk-nva-present-nav a:focus-visible{ outline:2px solid var(--sk-teal); outline-offset:2px; }
@media (max-width:620px){
  .sk-prod-nva-what .sk-nva-present-in{ justify-content:center; text-align:center; }
}

/* ── product grid ────────────────────────────────────────────────────────────── */
.sk-prod-nva-what .sk-nva-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:34px;
}
.sk-prod-nva-what .sk-nva-card{
  background:#fff; border:1px solid var(--sk-line); border-radius:16px; padding:20px;
  display:flex; flex-direction:column; gap:10px;
}
.sk-prod-nva-what .sk-nva-card img{
  width:100%; height:168px; object-fit:contain; display:block;
}
.sk-prod-nva-what .sk-nva-card h3{
  margin:0; font-size:1.02rem; color:var(--sk-ink); font-family:var(--sk-sans);
}
.sk-prod-nva-what .sk-nva-card p{ margin:0; font-size:.9rem; color:var(--sk-body); line-height:1.5; }
.sk-prod-nva-what .sk-nva-card span{
  align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--sk-sage); background:var(--sk-mist);
  padding:.26rem .6rem; border-radius:999px;
}
@media (max-width:900px){ .sk-prod-nva-what .sk-nva-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){
  .sk-prod-nva-what .sk-nva-grid{ grid-template-columns:1fr; }
  .sk-prod-nva-what .sk-nva-card img{ height:150px; }
}

/* ── fixes found by rendering the page, 2026-09-23 ──────────────────────────────
 * The hero H1 let the question mark wrap onto a line of its own, because the accent span
 * ends an inline box and "?" is then a fresh break opportunity. */
.sk-prod-nva-what .sk-nva-nowrap{ white-space:nowrap; }

/* The closing band paints only .sk-prod-close-h and .sk-prod-sub white, so a ghost button there
 * keeps its navy label on a navy gradient and disappears entirely. Invert it inside the band
 * only, so every other use of the ghost button is untouched. */
.sk-prod-nva-what .sk-prod-close .sk-prod-btn-ghost{
  color:#fff; border-bottom-color:rgba(255,255,255,.4);
}
/* "See how sharing works" is a <button> (it opens the ask popup), and the shared ghost style
 * is written for a link: it never clears the browser's grey button box, so the white label sat
 * on light grey and could not be read, in GHL and on the platform alike (2026-10-01). Clear
 * the box so the button reads as the underlined link it is drawn as. */
.sk-prod-nva-what button.sk-prod-btn-ghost{
  background:none; border:0; border-bottom:1.5px solid rgba(30,56,106,.25); border-radius:0;
  padding:0 0 2px; font:inherit; font-weight:600; font-size:.95rem; cursor:pointer;
}
.sk-prod-nva-what .sk-prod-close button.sk-prod-btn-ghost{ border-bottom-color:rgba(255,255,255,.4); }
.sk-prod-nva-what .sk-prod-close .sk-prod-btn-ghost:hover{ border-bottom-color:var(--sk-teal); }

/* The closing heading and subline are centred, so the button row is too. Scoped to the band, so
 * the hero's left aligned row is unaffected. */
.sk-prod-nva-what .sk-prod-close .sk-prod-cta-row{ justify-content:center; }

/* ── lifestyle photography, 2026-09-23 ─────────────────────────────────────────
 * Jeff: "we could pull some images rather than just have product images in the hero".
 * Every photograph on this page is Nueva's own, from nuevalife.com/opportunity.html and the
 * homepage. The hero previously held a composited grid of six packets, which read as a contact
 * sheet rather than a hero: it showed the catalogue before it showed a person. */
.sk-prod-nva-what .sk-nva-shot{
  margin:0; border-radius:20px; overflow:hidden; position:relative;
  box-shadow:0 26px 60px rgba(16,42,42,.20);
  aspect-ratio:5/6;
}
.sk-prod-nva-what .sk-nva-shot img{ width:100%; height:100%; object-fit:cover; display:block; }

/* A single full-width photograph between the claim heading and the pillars, so the section
 * breathes instead of running heading straight into cards. */
.sk-prod-nva-what .sk-nva-band{
  margin:34px 0 0; border-radius:18px; overflow:hidden; aspect-ratio:16/7;
}
.sk-prod-nva-what .sk-nva-band img{ width:100%; height:100%; object-fit:cover; display:block; }

/* The opportunity section was a wall of text. Two columns, photograph first on desktop. */
.sk-prod-nva-what .sk-nva-split{
  display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,56px); align-items:center;
}
.sk-prod-nva-what .sk-nva-split-img{
  margin:0; border-radius:18px; overflow:hidden; aspect-ratio:4/5;
  box-shadow:0 20px 44px rgba(16,42,42,.18);
}
.sk-prod-nva-what .sk-nva-split-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.sk-prod-nva-what .sk-nva-split-copy{ min-width:0; }
@media (max-width:860px){
  .sk-prod-nva-what .sk-nva-split{ grid-template-columns:1fr; }
  /* copy first on a phone: the photograph is support, not the message */
  .sk-prod-nva-what .sk-nva-split-img{ order:2; aspect-ratio:16/10; }
  .sk-prod-nva-what .sk-nva-split-copy{ order:1; }
}

/* The closing band carries Nueva's own next-chapter photograph. The gradient from the shared
 * component stays on top of it, so the white heading keeps its contrast no matter how the
 * photograph crops at a given width. */
.sk-prod-nva-what .sk-nva-close{ position:relative; isolation:isolate; }
.sk-prod-nva-what .sk-nva-close-bg{
  position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(160deg,rgba(16,42,42,.88),rgba(7,17,22,.93)),url("assets/close-back.webp");
  background-size:cover; background-position:center;
}

/* Product cards: the image box was taller than it needed to be, which left a band of empty
 * white under every shot. */
/* The shots are now trimmed to the product, so they can be shown larger AND sit on a tinted
 * panel: on plain white a white-ground cutout has no edge and floats. Aspect ratios vary wildly
 * after trimming (a tall bottle against a wide sachet), so the panel is a fixed box and each
 * image is contained inside it, which keeps every card's text on the same baseline. */
.sk-prod-nva-what .sk-nva-card{ padding:14px; gap:10px; }
.sk-prod-nva-what .sk-nva-card .sk-nva-shotbox{
  background:var(--sk-mist); border-radius:12px; height:190px;
  display:flex; align-items:center; justify-content:center; padding:14px;
}
.sk-prod-nva-what .sk-nva-card .sk-nva-shotbox img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
}
@media (max-width:560px){ .sk-prod-nva-what .sk-nva-card .sk-nva-shotbox{ height:200px; } }

/* ── the difference section, centred properly, 2026-09-23 ──────────────────────
 * .sk-prod-center is text-align only, so a paragraph with a max-width kept its BOX pinned to the
 * left of the wrap: the text looked centred inside a box that was not, which under a full-width
 * centred heading read as a misalignment. Centre the box too. */
.sk-prod-nva-what #sk-nva-what .sk-prod-lede.sk-prod-center{ margin-left:auto; margin-right:auto; }

/* Belt and braces on the pillars: the markup is a <div> of <article>s now, matching the rest of
 * the family, but if one is ever re-marked as a list this keeps the bullets and indent off. */
.sk-prod-nva-what .sk-prod-pillars{ list-style:none; padding-left:0; }

/* ── the ask modal, 2026-09-24 ────────────────────────────────────────────────
 * Both close CTAs open this instead of linking out. See block.html for why it is drawn here
 * rather than as a native GHL popup, and why both doors route through the rep at all.
 * Scoped under the page class like everything else, so it cannot reach another product page. */
.sk-prod-nva-what .sk-nva-ask{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  padding:20px;
}
.sk-prod-nva-what .sk-nva-ask[hidden]{ display:none; }
.sk-prod-nva-what .sk-nva-ask-scrim{
  position:absolute; inset:0;
  background:rgba(7,17,22,.62);
  animation:sk-prod-nva-ask-fade .18s ease-out;
}
.sk-prod-nva-what .sk-nva-ask-card{
  position:relative;
  width:min(440px,100%);
  padding:30px 26px 26px;
  border-radius:18px;
  background:var(--sk-cream,#fcfeff);
  box-shadow:0 24px 60px -20px rgba(7,17,22,.45);
  text-align:center;
  animation:sk-prod-nva-ask-pop .2s cubic-bezier(.2,.8,.3,1);
}
.sk-prod-nva-what .sk-nva-ask-x{
  position:absolute; top:10px; right:10px;
  display:grid; place-items:center;
  width:34px; height:34px;
  border:0; border-radius:50%;
  background:transparent; color:var(--sk-body,#4a5560);
  cursor:pointer;
}
.sk-prod-nva-what .sk-nva-ask-x svg{ width:18px; height:18px; }
.sk-prod-nva-what .sk-nva-ask-x:hover{ background:var(--sk-mist,#e8f8f6); }
.sk-prod-nva-what .sk-nva-ask-x:focus-visible{ outline:2px solid var(--sk-teal); outline-offset:2px; }
.sk-prod-nva-what .sk-nva-ask-h{
  margin:0 0 10px;
  font-size:1.3rem; line-height:1.25;
  color:var(--sk-ink,#141313);
  text-wrap:balance;
}
.sk-prod-nva-what .sk-nva-ask-p{
  margin:0 0 20px;
  font-size:.95rem; line-height:1.55;
  color:var(--sk-body,#4a5560);
}
.sk-prod-nva-what .sk-nva-ask-go{ width:100%; justify-content:center; }
/* ⚠️ THE `hidden` ATTRIBUTE DOES NOT HIDE THIS ON ITS OWN. `hidden` is only a UA rule of
   display:none, and .sk-prod-btn sets display:inline-flex, which is more specific and wins.
   The element then reads hidden===true in JS while rendering perfectly on screen, which is
   exactly how the no-domain state shipped showing the button AND the "not set up yet" note
   at the same time. Caught by screenshotting it, not by asserting on the property. */
.sk-prod-nva-what .sk-nva-ask-go[hidden]{ display:none; }
/* Shown INSTEAD of the button when the rep's domain is not filled in, rather than rendering
   https:///n-what-is-nueva-product-dm-redirect and looking like a broken page. */
.sk-prod-nva-what .sk-nva-ask-note{
  margin:0; font-size:.85rem; line-height:1.5; color:var(--sk-body,#4a5560);
}
.sk-prod-nva-what .sk-nva-ask-note[hidden]{ display:none; }
@keyframes sk-prod-nva-ask-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes sk-prod-nva-ask-pop{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .sk-prod-nva-what .sk-nva-ask-scrim,
  .sk-prod-nva-what .sk-nva-ask-card{ animation:none; }
}