/* Future Health — product page.
   Built by tools/build-product-page.py. Do not hand-edit.

   Scoped to body.single-product throughout, so nothing here can reach the
   rest of the site. Restyles what the Elementor template already renders
   and dresses the two blocks the snippet appends.

   The palette is the packages section's, re-picked for white on 5 Sept:
   every value clears 4.6:1 as ink and 4.95:1 with white on it, so one
   value serves a rule, a label, a dot and a button fill alike. */

body.single-product{
  --fh-ink:#241C2A;
  --fh-ink-70:rgba(36,28,42,.72);
  --fh-ink-52:rgba(36,28,42,.62);
  --fh-rule:rgba(36,28,42,.13);
  --fh-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fh-accent:#A30040;                 /* overridden per package below */
  --fh-blood:#E6005D;
  --fh-tissue:#D20054;
  --fh-amnion:#BA004A;
}
/* the package's own colour, from the body class the snippet adds */
body.fh-pkg-basic   {--fh-accent:#E6005D;}
body.fh-pkg-premium {--fh-accent:#D20054;}
body.fh-pkg-platinum{--fh-accent:#BA004A;}
body.fh-pkg-royal   {--fh-accent:#A30040;}
body.fh-pkg-diamond {--fh-accent:#8C0036;}

/* ---- Unique benefits and guarantees --------------------------------
   Container 0835995, on all five product pages and on /our-packages/.

   It arrives as a flat #E83466 band of eleven equal cards with a big
   rounded corner cut out of each - the last thing on these pages still
   speaking the old template. It is restyled into the source-block card
   the rest of the page already uses: one card, a hairline border, the
   package colour on its top edge, and the eleven items as tiles in a
   three-column grid.

   ALL CSS, no new markup. The section already holds every icon, title and
   description, so rebuilding it would have meant duplicating about 40 KB
   of inline SVG into product.js and re-typing copy that is the client's.
   Restyling in place also means any wording they change later comes
   through on its own.

   Ten of the eleven icons are inline SVGs with fill="#E5426A" written onto
   every path, so the fill is overridden directly. The eleventh, the
   interest-free payment plan, is an ElementsKit FONT glyph, which takes
   `color` instead - both are set below.

   Colour comes from --fh-accent, which product.js already puts on the
   body, so Basic reads #E6005D and Diamond #8C0036 with nothing new
   deciding it. */
/* Transparent, not a tint. The cell backdrop is a fixed layer at z-index
   -3 with a .82 white scrim over it, and it now runs behind this section
   rather than stopping before it - so anything painted here hides it. A
   pale tint would have sat over the scrim over the video and muddied all
   three; nothing is cleaner than nothing.

   Safe for legibility: the eleven tiles keep their own white ground, so no
   body copy ever sits directly on the footage. What shows through is the
   space around and between them. */
body .elementor-1467 .elementor-element.elementor-element-0835995,
body .elementor-element-0835995{
  background-color:transparent !important;
  padding-block:clamp(46px,6vw,86px) !important;}

/* the whole thing becomes one card, exactly the source-block card */
body .elementor-element-0835995 .elementor-element-e7e51da{
  padding:clamp(24px,3vw,38px) !important;border-radius:28px !important;
  background:rgba(255,255,255,.66) !important;
  border:1px solid var(--fh-rule) !important;
  border-block-start:2px solid var(--fh-accent) !important;
  -webkit-backdrop-filter:blur(22px) saturate(155%);backdrop-filter:blur(22px) saturate(155%);
  display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px !important;}

/* The row containers stop being rows so every tile is one grid item.
   Both kinds: the first two rows are e-con-full, the last is e-con-boxed
   and wraps its three tiles in an .e-con-inner, so that is flattened too -
   matching only e-con-full left the last three laid out by the old row and
   squeezed to 82, 129 and 161px. */
body .elementor-element-0835995 .elementor-element-e7e51da > .e-con,
body .elementor-element-0835995 .elementor-element-e7e51da > .e-con > .e-con-inner{
  display:contents !important;}

body .elementor-element-0835995 .elementor-element-8580375{grid-column:1/-1 !important;margin-block-end:8px !important;}
body .elementor-element-0835995 h2{
  font-family:var(--fh-disp) !important;font-size:clamp(21px,2.1vw,27px) !important;
  font-weight:600 !important;letter-spacing:-.02em !important;
  color:var(--fh-ink) !important;text-align:start !important;}

/* each benefit becomes a tile */
body .elementor-element-0835995 .e-con-full.e-transform{
  /* Elementor sizes each card itself, and those widths survive the parent
     going display:contents - the last row came out squeezed. The grid owns
     the width now. */
  width:auto !important;max-width:none !important;flex:initial !important;
  /* Solid white, not the source blocks' 72% glass. Those sit on the page's
     own pale ground, where 72% still reads white. This section is now
     transparent over the cell footage, so 72% let the backdrop through and
     the boxes came out pink. */
  border-radius:18px !important;background:#FFFFFF !important;
  border:1px solid var(--fh-rule) !important;padding:16px 15px !important;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease !important;}
body .elementor-element-0835995 .e-con-full.e-transform:hover{
  transform:translateY(-2px) !important;
  border-color:color-mix(in srgb,var(--fh-accent) 40%,var(--fh-rule)) !important;
  box-shadow:0 18px 34px -22px color-mix(in srgb,var(--fh-accent) 60%,transparent) !important;}

body .elementor-element-0835995 .elementor-icon-box-wrapper{display:block !important;text-align:start !important;}
body .elementor-element-0835995 .elementor-icon{
  display:grid !important;place-items:center !important;width:38px !important;height:38px !important;
  border-radius:11px !important;color:var(--fh-accent) !important;
  background:color-mix(in srgb,var(--fh-accent) 9%,transparent) !important;
  margin:0 0 12px !important;font-size:20px !important;}
body .elementor-element-0835995 .elementor-icon svg{width:22px !important;height:22px !important;}
body .elementor-element-0835995 .elementor-icon svg [fill]{fill:var(--fh-accent) !important;}

body .elementor-element-0835995 .elementor-icon-box-title{
  font-size:14.5px !important;font-weight:600 !important;line-height:1.3 !important;
  color:var(--fh-ink) !important;margin:0 !important;text-align:start !important;}
body .elementor-element-0835995 .elementor-icon-box-description{
  font-size:13px !important;line-height:1.55 !important;color:var(--fh-ink-70) !important;
  margin:7px 0 0 !important;text-align:start !important;}

/* Same two breakpoints the source-block tiles already use, so this section
   folds exactly as they do rather than inventing its own. Without these the
   grid would stay three columns on a phone. */
@media (max-width:820px){
  body .elementor-element-0835995 .elementor-element-e7e51da{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media (max-width:460px){
  body .elementor-element-0835995 .elementor-element-e7e51da{
    grid-template-columns:1fr !important;}
}

/* ---------- the two blocks the snippet appends ---------- */

/* Two columns that flow DOWN, so Ruba's rows survive as columns and the
   order she wrote them in is still readable. One column on a phone. */
body.single-product .fh-list{
  list-style:none;margin:18px 0 0;padding:0;
  columns:2;column-gap:40px;
}
body.single-product .fh-list li{
  break-inside:avoid;position:relative;
  margin:0 0 10px;padding-inline-start:20px;
  font-size:15px;line-height:1.45;font-weight:500;color:var(--fh-ink);
}
/* the marker is the section's dot, not an icon: at the size a marker sits
   a drawing reads as a smudge, and a literal one turns a list of research
   areas into a menu of treatments */
body.single-product .fh-list li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.55em;
  width:6px;height:6px;border-radius:50%;background:var(--fh-src,var(--fh-accent));
}
body.single-product .fh-list--blood {--fh-src:var(--fh-blood);}
body.single-product .fh-list--tissue{--fh-src:var(--fh-tissue);}
body.single-product .fh-list--amnion{--fh-src:var(--fh-amnion);}
@media (max-width:600px){ body.single-product .fh-list{columns:1;} }

/* Left aligned like everything else on the page, and the prices set the
   way the product price is set - AED first, tabular figures, so the two
   rows line up on the decimal rather than drifting. */
body.single-product .fh-addon{margin-block-start:20px;max-width:520px;}
body.single-product .fh-addon ul{list-style:none;margin:0;padding:0;
  border-block-start:2px solid var(--fh-accent);}
body.single-product .fh-addon li{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:13px 0;border-block-end:1px solid var(--fh-rule);
}
body.single-product .fh-a-name{font-size:15px;font-weight:500;color:var(--fh-ink);}
body.single-product .fh-a-price{
  font-size:16px;font-weight:600;color:var(--fh-ink);white-space:nowrap;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}

/* ---------- the summary: what you see before you scroll ----------

   !important, deliberately and only here. Elementor writes per-widget
   rules of the form

     .elementor-1467 .elementor-element.elementor-element-b43bd79 .btn

   which is four classes deep and beats anything a child theme stylesheet
   can reasonably reach. The alternative is opening the template to change
   those values, and the editor does not load. Each declaration below was
   checked against the rendered page - the ones Elementor does not set are
   left plain. */

body.single-product .elementor-widget-woocommerce-product-title h1{
  font-size:clamp(30px,3.4vw,44px) !important;
  font-weight:600 !important;
  letter-spacing:-.022em !important;
  line-height:1.08 !important;
  color:var(--fh-ink) !important;
  text-wrap:balance;
}
body.single-product .woocommerce-product-details__short-description p{
  font-size:15.5px;line-height:1.62;color:var(--fh-ink-70);
  max-width:48ch;margin-block-end:10px;
}
body.single-product .woocommerce-product-details__short-description p:last-child{
  margin-block-end:0;
}

/* the term swatches, as the section's term switcher. The plugin ships
   them as 25x40px boxes; the pill is the span's padding, so the item's
   own padding has to go to zero or the shape is drawn twice. */
body.single-product .variable-items-wrapper{gap:8px;}
body.single-product .variable-items-wrapper .variable-item.button-variable-item{
  border-radius:999px !important;
  border:1px solid var(--fh-rule) !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  min-width:0 !important;
  height:auto !important;
  transition:background-color .2s ease,border-color .2s ease;
}
body.single-product .variable-items-wrapper .variable-item.button-variable-item
  .variable-item-span{
  font-family:var(--fh-mono) !important;
  font-size:11px !important;letter-spacing:.08em !important;
  padding:10px 16px !important;line-height:1 !important;
  color:var(--fh-ink-52) !important;
}
body.single-product .variable-items-wrapper .variable-item.button-variable-item:hover{
  border-color:rgba(36,28,42,.34) !important;
}
body.single-product .variable-items-wrapper .variable-item.button-variable-item:hover
  .variable-item-span{color:var(--fh-ink) !important;}
body.single-product .variable-items-wrapper
  .variable-item.button-variable-item.selected{
  background:var(--fh-accent) !important;border-color:var(--fh-accent) !important;
}
body.single-product .variable-items-wrapper
  .variable-item.button-variable-item.selected .variable-item-span{
  color:#FFFFFF !important;font-weight:700 !important;
}

body.single-product .woocommerce-variation-price .price,
body.single-product .elementor-add-to-cart .price{
  font-size:clamp(24px,2.4vw,31px) !important;font-weight:600 !important;
  color:var(--fh-ink) !important;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
body.single-product .woocommerce-variation-price .price .woocommerce-Price-currencySymbol{
  font-family:var(--fh-mono);font-size:.42em;font-weight:400;
  letter-spacing:.18em;color:var(--fh-ink-52);
  vertical-align:.32em;margin-inline-end:.35em;
}

body.single-product .single_add_to_cart_button{
  background:var(--fh-accent) !important;color:#FFFFFF !important;
  border:0 !important;border-radius:999px !important;
  padding:15px 34px !important;
  font-size:14.5px !important;font-weight:700 !important;
  letter-spacing:-.008em !important;
  box-shadow:0 10px 26px -14px var(--fh-accent) !important;
  transition:filter .2s ease,box-shadow .25s ease,transform .12s ease;
}
body.single-product .single_add_to_cart_button:hover{
  filter:brightness(1.08);
  box-shadow:0 16px 34px -16px var(--fh-accent) !important;
}
body.single-product .single_add_to_cart_button:active{transform:translateY(1px);}
body.single-product .single_add_to_cart_button:focus-visible{
  outline:2px solid var(--fh-ink);outline-offset:3px;
}

/* The rule under the title. It was a washed pink (#E97195, 2.4:1 on
   white) running the full width of the column, which reads as a leftover
   underline rather than a mark. Short, solid, in the package's colour. */
body.single-product .elementor-widget-divider{--divider-color:var(--fh-accent);}
body.single-product .elementor-widget-divider .elementor-divider-separator{
  border-block-start-color:var(--fh-accent) !important;
  border-block-start-width:2px !important;
  width:56px !important;
}

/* the product photo: same corner and the same soft lift as a package card */
body.single-product .elementor-widget-woocommerce-product-images img{
  border-radius:22px !important;
  box-shadow:0 1px 2px rgba(36,28,42,.05),
             0 22px 50px -26px rgba(48,26,66,.34) !important;
}

body.single-product .elementor-widget-heading .elementor-heading-title{
  letter-spacing:-.01em;
}

/* ============================================================ the hero
   The live page's own top block is hidden, not deleted, and this goes in
   its place. Everything below it is untouched - the source sections, the
   benefits band, the accreditation logos, the FAQ, the news, the reviews,
   the marquee, the enquiry form and the footer are all still the live
   site's own, rendering themselves. */
/* the live page's own versions of what we replace. Hidden, not
   deleted: remove this file and the page is exactly as it was. */
body.single-product .elementor-element-3607df3,
body.single-product .elementor-element-86e3dd6,
body.single-product .elementor-element-a9fb543,
body.single-product .elementor-element-929db38,
body.single-product .elementor-element-776b761,
body.single-product .elementor-element-ce74cc1,
body.single-product .elementor-element-729b7cc,
body.single-product .elementor-element-5131005,
body.single-product .elementor-element-e22381a,
body.single-product .elementor-element-f85fbf5,
body.single-product .elementor-element-af9fa20,
body.single-product .elementor-element-05c85cb,
body.single-product .elementor-element-9033f19,
body.single-product .elementor-element-421f64b,
body.single-product .elementor-element-75dd72a,
body.single-product .elementor-element-73dc813,
body.single-product .elementor-element-6c35f57,
body.single-product .elementor-element-6095a17,
body.single-product .elementor-element-5498c6e,
body.single-product .elementor-element-c374cdb,
body.single-product .elementor-element-70b1011,
body.single-product .elementor-element-a36e908,
body.single-product .elementor-element-3d7a067,
body.single-product .elementor-element-d4b4a04,
body.single-product .elementor-element-07bdf3d,
body.single-product .elementor-element-c945f19,
body.single-product .elementor-element-9df2517{display:none !important;}

body.single-product{
  --fh-disp:'Inter Display','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fh-ease:cubic-bezier(.22,.7,.2,1);
  --fh-mask-ease:cubic-bezier(.16,1,.3,1);
}
.fh-hero{position:relative;padding-block:clamp(40px,6vw,86px) clamp(36px,5vw,72px);
  text-align:center;}
.fh-hero-in{max-width:760px;margin-inline:auto;padding-inline:20px;}
.fh-eyebrow{display:flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--fh-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--fh-ink-52);margin:0 0 20px;}
.fh-eyebrow b{color:var(--fh-accent);font-weight:600;}
.fh-dots{display:inline-flex;gap:5px;margin-inline-start:6px;}
.fh-dots i{width:6px;height:6px;border-radius:50%;background:var(--fh-rule);}
.fh-dots i.on{background:var(--fh-accent);}
.fh-hero h1{font-family:var(--fh-disp);font-size:clamp(40px,6.2vw,80px);
  font-weight:600;letter-spacing:-.03em;line-height:1.02;color:var(--fh-ink);margin:0;}
.fh-mask{display:block;overflow:hidden;}
/* The name carries the package's own colour and loses its full stop -
   Ruba, 7 Sept. "Future" stays near-black so the name is still the
   emphasis rather than the whole heading turning pink. This is also the
   largest use of the colour anywhere on the page, which is what makes
   the tighter single-hue ramp workable: a heading is far easier to tell
   from its neighbour than a 6px dot. */
.fh-hero h1 .fh-nm{color:var(--fh-accent);}
.fh-mask > span{display:block;}
/* The hero's entrance is a CSS animation, not a JS-gated transition.
   product.js loads at the end of the body, so a .js-gated start state
   arrives AFTER the first paint: the hero drew in place, then snapped
   down out of the mask, then eased back - the word "Future" visibly
   jerked, worst when arriving from a click because this page paints
   long before the script at the bottom runs. An animation with
   fill-mode both is in its start state at the first paint, needs no
   script, and cannot leave the text stranded if the script never
   loads. */
.fh-mask > span{animation:fh-rise 1.05s var(--fh-mask-ease) both;
  animation-delay:calc(var(--d,0)*90ms);}
@keyframes fh-rise{from{transform:translateY(102%);}to{transform:none;}}
/* the three below the headline, for the same reason */
.fh-hero .fh-rv{animation:fh-in .8s var(--fh-ease) both;
  animation-delay:calc(var(--d,0)*80ms);}
@keyframes fh-in{from{opacity:0;transform:translateY(22px);}
                 to{opacity:1;transform:none;}}
.fh-lede{margin:22px auto 0;max-width:46ch;font-size:clamp(16px,1.35vw,19px);
  line-height:1.58;color:var(--fh-ink-70);}
.fh-chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px 10px;margin:26px 0 0;padding:0;}
.fh-chips li{display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--fh-rule);border-radius:999px;padding:7px 15px;
  font-size:13.5px;color:var(--fh-ink-52);}
.fh-chips li i{width:8px;height:8px;border-radius:50%;background:var(--c);opacity:.22;}
.fh-chips li.on{color:var(--fh-ink);font-weight:600;
  border-color:color-mix(in srgb,var(--c) 34%,var(--fh-rule));}
.fh-chips li.on i{opacity:1;}
.fh-buy{margin:32px auto 0;max-width:520px;padding:22px;border-radius:28px;
  background:rgba(255,255,255,.74);border:1px solid var(--fh-rule);
  -webkit-backdrop-filter:blur(22px) saturate(155%);
          backdrop-filter:blur(22px) saturate(155%);
  box-shadow:0 1px 2px rgba(36,28,42,.04),0 26px 60px -34px rgba(48,26,66,.38);}
.fh-buy-lab{display:block;font-family:var(--fh-mono);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--fh-ink-52);
  margin-block-end:12px;}
.fh-terms{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.fh-terms.is-one{grid-template-columns:minmax(150px,210px);justify-content:center;}
.fh-term{appearance:none;cursor:pointer;background:transparent;color:var(--fh-ink);
  border:1px solid var(--fh-rule);border-radius:18px;padding:13px 10px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:background-color .2s var(--fh-ease),border-color .2s var(--fh-ease);}
.fh-term b{font-family:var(--fh-disp);font-size:22px;font-weight:600;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;}
.fh-term span{font-family:var(--fh-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fh-ink-52);}
.fh-term:hover{border-color:rgba(36,28,42,.3);}
.fh-term.is-on{background:var(--fh-accent);border-color:var(--fh-accent);color:#fff;}
.fh-term.is-on span{color:#fff;}
/* The theme wins on a bare <button>: it paints these its own pink for
   text and border, and puts a 3px pink outline on them that only shows
   once a button takes focus - which is what a long press does, so a pink
   ring appeared out of nowhere. Measured on staging, 6 Sept. Stated at a
   specificity the theme cannot reach, with the focus ring in the
   package's own colour rather than the theme's. */
body.single-product .fh-buy .fh-term{
  color:var(--fh-ink);border-color:var(--fh-rule);outline:none;
  -webkit-tap-highlight-color:transparent;}
body.single-product .fh-buy .fh-term span{color:var(--fh-ink-52);}
body.single-product .fh-buy .fh-term:hover{border-color:rgba(36,28,42,.3);}
body.single-product .fh-buy .fh-term.is-on,
body.single-product .fh-buy .fh-term.is-on:hover{
  background:var(--fh-accent);border-color:var(--fh-accent);color:#fff;}
body.single-product .fh-buy .fh-term.is-on span{color:#fff;}
/* keyboard users still get a ring; a press does not */
body.single-product .fh-buy .fh-term:focus{outline:none;}
body.single-product .fh-buy .fh-term:focus-visible{
  outline:2px solid var(--fh-accent);outline-offset:3px;}
.fh-buy-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-block-start:18px;padding-block-start:16px;
  border-block-start:1px solid var(--fh-rule);flex-wrap:wrap;}
.fh-price{display:flex;align-items:baseline;gap:9px;margin:0;}
.fh-price span{font-family:var(--fh-mono);font-size:11px;letter-spacing:.18em;
  color:var(--fh-ink-52);}
.fh-price b{font-family:var(--fh-disp);font-size:clamp(26px,2.6vw,34px);
  font-weight:600;letter-spacing:-.026em;font-variant-numeric:tabular-nums;}
.fh-cta{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  background:var(--fh-accent);color:#fff !important;text-decoration:none;
  padding:14px 26px;border-radius:999px;font-size:14.5px;font-weight:700;
  box-shadow:0 12px 28px -14px var(--fh-accent);
  transition:filter .2s var(--fh-ease),box-shadow .25s var(--fh-ease);}
.fh-cta:hover{filter:brightness(1.07);box-shadow:0 18px 36px -16px var(--fh-accent);}
@media (max-width:560px){ .fh-terms{grid-template-columns:1fr;} }

/* ---------------------------------------------------- the cell backdrop
   Fixed behind the page and faded out once the benefits band has gone by.
   The .82 white scrim is not decoration: body copy over a cell nucleus
   measures 1.24:1 with nothing in between and 5.06:1 with this. */
.fh-bgv,.fh-bgv-scrim{position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;transition:opacity .5s var(--fh-ease);}
.fh-bgv{object-fit:cover;z-index:-3;}
.fh-bgv-scrim{z-index:-2;background:rgba(255,255,255,.72);}
/* .82 -> .78 on 10 Sept at the user's request. The old value was set to
   bury a backdrop nobody liked; the new footage is worth showing, so the
   cells read at 28% rather than 18%. One number, easy to move again. */
/* No fade. The client watched the half-second fade play out in the gap
   between the benefits card and the accreditations and read it as the
   video still running - "I don't want any fade in or fade out. Just leave
   it like that." display is not an animatable property, so this cuts in
   both directions, which
   is a different job: it hides the jump when the clip loops. */
/* The panel that hides the backdrop below the benefits card. Negative
   z-index keeps it behind every bit of page content and in front of the
   video, which sits at -3 with its scrim at -2. */
.fh-bgv-curtain{position:absolute;left:0;width:100%;background:#fff;
  z-index:-1;pointer-events:none;}

.js .fh-rv{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--fh-ease) calc(var(--d,0)*80ms),
             transform .8s var(--fh-ease) calc(var(--d,0)*80ms);}
.js .fh-rv.is-in{opacity:1;transform:none;}

/* ============================================================ our top
   Hero, what this package stores, add-ons and questions. The live page's
   own versions of the last three are hidden above; nothing from Unique
   Benefits down is touched. */
.fh-top{--fh-disp:'Inter Display','Inter',system-ui,-apple-system,sans-serif;
  --fh-e:cubic-bezier(.22,.7,.2,1);}
.fh-wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,4vw,56px);}
.fh-sec{padding-block:clamp(56px,8vw,116px);}
.fh-head{display:flex;align-items:baseline;gap:16px;padding-block-end:22px;
  margin-block-end:clamp(28px,4vw,52px);border-block-end:1px solid var(--fh-rule);}
.fh-n{font-family:var(--fh-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--fh-accent);}
.fh-head h2{font-family:var(--fh-disp);font-size:clamp(26px,3.2vw,40px);
  font-weight:600;letter-spacing:-.022em;line-height:1.06;color:var(--fh-ink);margin:0;}

.fh-srcs{display:grid;gap:clamp(20px,2.6vw,32px);}
.fh-src{padding:clamp(24px,3vw,38px);border-radius:28px;
  background:rgba(255,255,255,.66);border:1px solid var(--fh-rule);
  border-block-start:2px solid var(--c);
  -webkit-backdrop-filter:blur(22px) saturate(155%);
          backdrop-filter:blur(22px) saturate(155%);
  box-shadow:0 1px 2px rgba(36,28,42,.04),0 24px 54px -34px rgba(48,26,66,.3);
  transition:transform .35s var(--fh-e),box-shadow .35s var(--fh-e);}
.fh-src:hover{transform:translateY(-3px);
  box-shadow:0 1px 2px rgba(36,28,42,.04),0 34px 66px -34px rgba(48,26,66,.36);}
.fh-src header{display:flex;align-items:baseline;gap:13px;}
.fh-src .fh-n{color:var(--c);}
.fh-src h3{font-family:var(--fh-disp);font-size:clamp(21px,2.1vw,27px);font-weight:600;
  letter-spacing:-.02em;margin:0;color:var(--fh-ink);}
.fh-src > p{margin:12px 0 0;color:var(--fh-ink-70);font-size:15.5px;line-height:1.62;
  max-width:70ch;}
.fh-slist{list-style:none;margin:26px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
@media (max-width:820px){ .fh-slist{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:460px){ .fh-slist{grid-template-columns:1fr;} }
.fh-slist li{display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:16px 15px;border-radius:18px;background:rgba(255,255,255,.72);
  border:1px solid var(--fh-rule);
  transition:transform .3s var(--fh-e),border-color .3s var(--fh-e),box-shadow .3s var(--fh-e);}
.fh-slist li:hover{transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--c) 40%,var(--fh-rule));
  box-shadow:0 18px 34px -22px color-mix(in srgb,var(--c) 60%,transparent);}
.fh-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  color:var(--c);background:color-mix(in srgb,var(--c) 9%,transparent);
  transform:scale(.86);transition:transform .5s var(--fh-e) calc(var(--d,0)*80ms + 120ms);}
.fh-slist li.is-in .fh-ic{transform:none;}
.fh-ic svg{width:22px;height:22px;}
.fh-slist b{font-size:14.5px;font-weight:600;line-height:1.3;color:var(--fh-ink);}

.fh-pills{list-style:none;margin:22px 0 0;padding:0;display:flex;
  flex-wrap:wrap;gap:10px;}
.fh-pills li{display:flex;align-items:center;gap:9px;font-size:14.5px;
  font-weight:600;color:var(--fh-ink);padding:10px 16px 10px 13px;
  border-radius:999px;background:var(--fh-tint);
  border:1px solid var(--fh-line);}
.fh-pills li::before{content:"";width:15px;height:15px;flex:0 0 15px;
  border-radius:50%;background:var(--c);opacity:.16;
  box-shadow:inset 0 0 0 4px var(--c);}
.fh-src .fh-sub{margin:12px 0 0;font-weight:600;color:var(--c);
  font-size:15.5px;line-height:1.5;}
.fh-cards{display:grid;gap:clamp(16px,2vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));}
.fh-card{padding:clamp(20px,2.4vw,28px);border-radius:18px;
  background:rgba(255,255,255,.7);border:1px solid var(--fh-rule);
  -webkit-backdrop-filter:blur(22px) saturate(155%);
          backdrop-filter:blur(22px) saturate(155%);
  transition:transform .35s var(--fh-e),box-shadow .35s var(--fh-e);}
.fh-card:hover{transform:translateY(-3px);box-shadow:0 24px 50px -32px rgba(48,26,66,.34);}
.fh-card h3{font-family:var(--fh-disp);font-size:18px;font-weight:600;margin:0;
  letter-spacing:-.015em;color:var(--fh-ink);}
.fh-card p{margin:9px 0 0;color:var(--fh-ink-70);font-size:14.5px;line-height:1.58;}
.fh-ap{font-family:var(--fh-disp);font-size:20px;font-weight:600;
  color:var(--fh-ink) !important;margin-block-start:16px !important;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;}

.fh-q{border-block-end:1px solid var(--fh-rule);}
.fh-q summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  justify-content:space-between;gap:20px;padding-block:20px;
  font-family:var(--fh-disp);font-size:clamp(16px,1.5vw,19px);font-weight:600;
  letter-spacing:-.014em;color:var(--fh-ink);}
.fh-q summary::-webkit-details-marker{display:none;}
.fh-q summary i{flex:0 0 auto;width:17px;height:17px;position:relative;}
.fh-q summary i::before,.fh-q summary i::after{content:"";position:absolute;
  background:var(--fh-accent);inset-block-start:8px;inset-inline-start:0;
  width:17px;height:1.5px;transition:transform .3s var(--fh-e);}
.fh-q summary i::after{transform:rotate(90deg);}
.fh-q[open] summary i::after{transform:rotate(0);}
.fh-qa{padding-block-end:22px;}
.fh-qa p{margin:0;color:var(--fh-ink-70);font-size:15px;line-height:1.65;max-width:74ch;}

/* ---------- next / previous package ----------
   A tab on each edge, fixed to the viewport, carrying the next package's
   own colour so the ramp is legible before you click. It expands to name
   the package on hover and on keyboard focus - collapsed it is a plain
   arrow, which on its own would not say where it goes. Hidden on narrow
   screens, where there is no edge to spare; the packages section already
   provides the way across on a phone. */
.fh-nav{position:fixed;inset-block-start:50%;transform:translateY(-50%);
  z-index:40;display:flex;align-items:center;gap:0;
  padding:16px 13px;border-radius:16px;text-decoration:none;
  background:var(--c);color:#fff !important;
  box-shadow:0 14px 34px -16px var(--c);
  transition:gap .32s var(--fh-ease),padding .32s var(--fh-ease),
             filter .2s var(--fh-ease);}
.fh-nav-next{inset-inline-end:14px;border-start-end-radius:6px;border-end-end-radius:6px;}
.fh-nav-prev{inset-inline-start:14px;border-start-start-radius:6px;border-end-start-radius:6px;}
.fh-nav span{font-family:var(--fh-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;max-width:0;overflow:hidden;
  opacity:0;transition:max-width .32s var(--fh-ease),opacity .24s var(--fh-ease);}
/* On arrival both tabs open out to name their package, then fold back
   to arrows (product.js adds and removes .is-intro). Ruba, 15 Sept: the
   tabs only said where they went on hover, so nobody knew there were more
   packages either side. The open state is the hover state, a little
   larger, so the fold back reads as the same control settling down. */
.fh-nav.is-intro{gap:10px;padding:19px 20px;filter:brightness(1.04);
  box-shadow:0 18px 40px -14px var(--c);}
.fh-nav.is-intro span{max-width:180px;opacity:1;font-size:11.5px;}
.fh-nav{transition:gap .5s var(--fh-ease),padding .5s var(--fh-ease),
  filter .2s var(--fh-ease),box-shadow .5s var(--fh-ease);}
.fh-nav span{transition:max-width .5s var(--fh-ease),opacity .35s var(--fh-ease),
  font-size .5s var(--fh-ease);}
.fh-nav:hover,.fh-nav:focus-visible{filter:brightness(1.06);gap:9px;padding-inline:17px;}
.fh-nav:hover span,.fh-nav:focus-visible span{max-width:180px;opacity:1;}
.fh-nav:focus-visible{outline:2px solid var(--fh-ink);outline-offset:3px;}
.fh-nav svg{flex:0 0 auto;}
@media (max-width:1100px){ .fh-nav{display:none;} }
@media (prefers-reduced-motion:reduce){
  .fh-nav,.fh-nav span{transition:none;}
  .fh-nav span{max-width:150px;opacity:1;}
  .fh-nav{gap:9px;padding-inline:17px;}
}


@media (prefers-reduced-motion:reduce){
  .js .fh-mask > span,.js .fh-rv{transition:none !important;transform:none !important;
    opacity:1 !important;}
  .fh-mask > span,.fh-hero .fh-rv{animation:none !important;}
  .fh-bgv{display:none;}
}