/* ============================================================
   homepage.css — Friends Illuminated homepage ONLY
   ------------------------------------------------------------
   Design source: _sandbox/homepage-mockups-2026-08-28/merged-v4.html
   ("The Illuminated Manuscript"). Approved by Earl 2026-08-29.

   SCOPING CONTRACT — read before editing:
   * This file is linked from layouts/_default/baseof.html behind
     `{{ if .IsHome }}`, so it is never downloaded on /books/, /shop/,
     /authors/ or any other page.
   * EVERY rule is additionally scoped to `.fih` (the wrapper div that
     layouts/index.html puts around the whole homepage) so that even if
     the link were ever mis-copied to another template it could not
     restyle site chrome. The two exceptions are the
     `body.home-illuminated` rules at the bottom, which deliberately
     re-tint the shared nav / announcement ribbon so they read against
     the dark hero — those are keyed on a body class that only the
     homepage sets.
   * Custom properties live on `.fih`, NOT on `:root`, for the same
     reason. Do not hoist them.
   * @keyframes names are prefixed `fih-` so they cannot collide with
     the animations in main.css.
   ============================================================ */

/* ============================================================
   FRIENDS ILLUMINATED — "The Illuminated Manuscript" (merged v4)
   Base: mockup 1 (candlelight & gold)
   Merged in: mockup 2 hero split · mockup 3 shelf / constellation / transformation
   ============================================================ */
.fih{
  --walnut:      #2A1F17;
  --walnut-lit:  #35281D;
  --parchment:   #E8DCC8;
  --parchment-d: #C4B69C;
  --gold:        #C9A84C;
  --gold-bright: #E3C572;
  --gold-deep:   #A9862F;
  --amber:       #E8A05C;
  --ink:         #1A1410;
  --ink-2:       #120D0A;
  --card:        #3A2F25;

  --parch-dim:   rgba(232,220,200,.68);
  --parch-faint: rgba(232,220,200,.44);
  --gold-line:   rgba(201,168,76,.34);

  --shadow-deep: 0 32px 64px -18px rgba(10,7,4,.85);
  --shadow-mid:  0 18px 38px -14px rgba(10,7,4,.7);

  --f-display: 'Cormorant Garamond',Garamond,Georgia,serif;
  --f-body:    'Lora',Georgia,serif;
  --f-label:   'EB Garamond',Garamond,serif;

  --maxw: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);}
.fih *, .fih *::before, .fih *::after{ box-sizing:border-box;}
.fih{background:var(--ink);
  color:var(--parchment);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;}
.fih img{ max-width:100%; display:block;}
.fih a{ color:inherit; text-decoration:none;}
.fih ::selection{ background:var(--gold); color:#241A10;}
.fih .wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px;}
/* ---------- shared type ---------- */
.fih .eyebrow{
  font-family:var(--f-label);
  font-variant:small-caps;
  font-feature-settings:"smcp" 1;
  text-transform:lowercase;
  letter-spacing:.34em;
  font-size:.86rem;
  font-weight:600;
  color:var(--gold);
  margin:0 0 18px;
  display:flex; align-items:center; gap:16px;
  justify-content:center;}
.fih .eyebrow::before, .fih .eyebrow::after{
  content:""; height:1px; width:54px;
  background:linear-gradient(90deg,transparent,var(--gold));}
.fih .eyebrow::after{ background:linear-gradient(90deg,var(--gold),transparent);}
.fih .eyebrow.left{ justify-content:flex-start;}
.fih .eyebrow.left::before{ display:none;}
.fih h2.section-title{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(2.1rem,4.3vw,3.5rem);
  line-height:1.1;
  letter-spacing:.005em;
  margin:0 0 18px;
  color:var(--parchment);}
.fih h2.section-title em{
  font-style:italic;
  color:var(--gold-bright);
  text-shadow:0 2px 26px rgba(201,168,76,.3);}
.fih .section-sub{
  max-width:640px;
  margin:0 auto;
  color:var(--parchment-d);
  font-size:1.03rem;
  line-height:1.8;}
.fih .section-sub.left{ margin-left:0;}
.fih .center{ text-align:center;}
.fih section{ position:relative;}
/* gold hairline rule between sections */
.fih .rule{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg,transparent,rgba(201,168,76,.42) 18%,rgba(201,168,76,.62) 50%,rgba(201,168,76,.42) 82%,transparent);}
/* ---------- buttons ---------- */
.fih .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--f-label);
  font-variant:small-caps; text-transform:lowercase;
  font-size:1.06rem; font-weight:600; letter-spacing:.16em;
  padding:16px 38px;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease);
  will-change:transform;}
.fih .btn-gold{
  background:linear-gradient(175deg,var(--gold-bright),var(--gold) 55%,var(--gold-deep));
  color:#241A10;
  box-shadow:0 12px 34px -12px rgba(201,168,76,.75), inset 0 1px 0 rgba(255,245,214,.55);}
.fih .btn-gold:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 46px -12px rgba(232,160,92,.8), inset 0 1px 0 rgba(255,245,214,.7);}
.fih .btn-ghost{
  background:rgba(232,220,200,.03);
  color:var(--parchment);
  border-color:rgba(232,220,200,.42);
  backdrop-filter:blur(2px);}
.fih .btn-ghost:hover{
  transform:translateY(-3px);
  border-color:var(--gold);
  color:var(--gold-bright);
  box-shadow:0 16px 34px -16px rgba(201,168,76,.6);}
/* pill variant used in the hero (layout cue from the Reading Room concept) */
.fih .btn-pill{ border-radius:999px; padding:15px 34px;}
.fih .btn .arw{ transition:transform .35s var(--ease);}
.fih .btn:hover .arw{ transform:translateX(4px);}
/* ============================================================
   1. HERO — Candlelit Library, editorial split
   ============================================================ */
.fih .hero{
  position:relative;
  background:var(--walnut);
  padding:0 0 clamp(72px,9vw,116px);
  overflow:hidden;
  isolation:isolate;}
/* candlelight glow */
.fih .hero::before{
  content:""; position:absolute; inset:-10% -20% auto -20%; height:150%;
  background:
    radial-gradient(46% 44% at 50% 4%, rgba(232,160,92,.28), transparent 68%),
    radial-gradient(76% 62% at 56% 30%, rgba(201,168,76,.15), transparent 72%),
    radial-gradient(120% 90% at 50% 100%, rgba(10,7,4,.9), transparent 60%);
  z-index:0; pointer-events:none;}
/* flicker overlay */
.fih .hero .flicker{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(36% 34% at 50% 8%, rgba(255,196,120,.20), transparent 70%);
  animation:fih-flicker 5.2s ease-in-out infinite;
  mix-blend-mode:screen;}
@keyframes fih-flicker{
  0%,100%{ opacity:.72; transform:scale(1); }
  12%{ opacity:.94; transform:scale(1.015); }
  23%{ opacity:.60; }
  37%{ opacity:.88; transform:scale(1.008); }
  48%{ opacity:.66; }
  61%{ opacity:.97; transform:scale(1.02); }
  74%{ opacity:.70; }
  86%{ opacity:.90; transform:scale(1.01); }
}
/* subtle paper grain */
.fih .hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");}
.fih .hero .wrap{ position:relative; z-index:2;}
/* nav — unchanged from the base concept */
/* --- split grid --- */
.fih .hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:clamp(2rem,5vw,4.6rem);
  align-items:center;
  padding-top:clamp(48px,6.5vw,86px);}
.fih .hero-h{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(2.7rem,5.6vw,4.6rem);
  line-height:1.06;
  letter-spacing:.004em;
  margin:0 0 1.5rem;
  color:var(--parchment);}
.fih .hero-h em{
  font-style:italic;
  color:var(--gold-bright);
  text-shadow:0 2px 30px rgba(201,168,76,.36);}
.fih .hero-sub{
  font-size:clamp(1.02rem,1.25vw,1.1rem);
  line-height:1.85;
  color:var(--parchment-d);
  max-width:34rem;
  margin:0 0 2.3rem;}
.fih .hero-ctas{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:2.5rem;}
.fih .hero-stats{
  font-family:var(--f-label);
  font-variant:small-caps; text-transform:lowercase;
  font-size:.86rem; font-weight:600; letter-spacing:.2em;
  color:var(--parchment-d);
  padding-top:1.5rem;
  border-top:1px solid rgba(201,168,76,.28);
  display:flex; flex-wrap:wrap; gap:.55rem; align-items:baseline;}
.fih .hero-stats b{
  font-family:var(--f-display);
  font-variant:normal; text-transform:none;
  font-size:1.35rem; font-weight:700; letter-spacing:.01em;
  color:var(--gold-bright);
  font-variant-numeric:tabular-nums;}
.fih .hero-stats .sep{ color:var(--gold); opacity:.75;}
/* --- fanned book stack --- */
.fih .hstack-wrap{
  display:flex; justify-content:center; align-items:center;
  min-height:clamp(340px,42vw,540px);}
.fih .hstack{
  position:relative;
  width:clamp(210px,24vw,306px);
  aspect-ratio:2/3;
  perspective:1400px;}
/* candle glow pooled behind the deck */
.fih .hstack::before{
  content:""; position:absolute; inset:-34% -30%;
  background:radial-gradient(50% 50% at 50% 48%, rgba(232,160,92,.36), rgba(201,168,76,.13) 52%, transparent 74%);
  filter:blur(12px); z-index:0; pointer-events:none;}
.fih .hbk{
  position:absolute; inset:0;
  border-radius:3px; overflow:hidden;
  background:#241a12;
  box-shadow:var(--shadow-deep), 0 0 0 1px rgba(201,168,76,.24);
  transition:transform .75s var(--ease), box-shadow .75s var(--ease), filter .75s var(--ease);
  will-change:transform;}
.fih .hbk img{ width:100%; height:100%; object-fit:cover;}
.fih .hbk::after{ /* spine sheen */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,rgba(255,236,196,.22) 0%,rgba(255,236,196,0) 24%,rgba(10,7,4,.28) 100%);}
.fih .hbk-4{ transform:translate(-19%,-11%) rotate(-11deg) scale(.9);   z-index:1; filter:brightness(.72);}
.fih .hbk-3{ transform:translate(-10.5%,-5.5%) rotate(-6deg) scale(.94); z-index:2; filter:brightness(.84);}
.fih .hbk-2{ transform:translate(8.5%,4.5%) rotate(6deg) scale(.965);    z-index:3; filter:brightness(.93);}
.fih .hbk-1{ transform:translate(0,0) rotate(0deg) scale(1);             z-index:4;}
.fih .hstack:hover .hbk-4{ transform:translate(-40%,-16%) rotate(-15deg) scale(.9); filter:brightness(.8);}
.fih .hstack:hover .hbk-3{ transform:translate(-21%,-8%) rotate(-8.5deg) scale(.94); filter:brightness(.9);}
.fih .hstack:hover .hbk-2{ transform:translate(19%,7%) rotate(9deg) scale(.96); filter:brightness(.98);}
.fih .hstack:hover .hbk-1{
  transform:translateY(-14px) rotate(1deg) scale(1.03);
  box-shadow:0 44px 78px -22px rgba(8,5,3,.95), 0 0 60px -12px rgba(232,160,92,.55), 0 0 0 1px rgba(201,168,76,.5);}
.fih .new-badge{
  position:absolute; z-index:9;
  top:-16px; right:-18px;
  width:74px; height:74px; border-radius:50%;
  background:linear-gradient(175deg,var(--gold-bright),var(--gold) 55%,var(--gold-deep));
  color:#241A10;
  display:grid; place-items:center;
  font-family:var(--f-label);
  font-variant:small-caps; text-transform:lowercase;
  font-size:.9rem; font-weight:600; letter-spacing:.16em;
  box-shadow:0 10px 26px -8px rgba(201,168,76,.85), inset 0 1px 0 rgba(255,245,214,.6);
  animation:fih-pulseRing 3.4s var(--ease) infinite;}
@keyframes fih-pulseRing{
  0%,100%{ box-shadow:0 10px 26px -8px rgba(201,168,76,.85), inset 0 1px 0 rgba(255,245,214,.6), 0 0 0 0 rgba(201,168,76,.45); }
  55%    { box-shadow:0 10px 26px -8px rgba(201,168,76,.85), inset 0 1px 0 rgba(255,245,214,.6), 0 0 0 16px rgba(201,168,76,0); }
}
/* ============================================================
   2. NEWLY ADDED TO THE LIBRARY — 3D shelf
   ============================================================ */
.fih .shelf-sec{
  padding:clamp(5rem,11vh,7.5rem) 0 clamp(5.5rem,12vh,8.5rem);
  background:
    radial-gradient(60% 40% at 50% -5%,rgba(201,168,76,.10),transparent 70%),
    linear-gradient(180deg,var(--walnut),#241A13 52%,var(--walnut));
  overflow:hidden;}
.fih .shelf-sec__head{ max-width:660px; margin-bottom:clamp(3rem,7vh,4.6rem);}
.fih .shelves{ display:grid; gap:clamp(3rem,7vh,5.2rem);}
.fih .shelf{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.4rem,3.4vw,3.2rem);
  /* The perspective lives on each shelf, NOT on .shelves. With one shared
     vanishing point the second row sits far below the origin, so its
     rotateX(15deg) labels project much lower than the first row's and collide
     with the plank at bottom:0. Per-shelf perspective makes every row project
     identically. */
  perspective:1500px; perspective-origin:50% 34%;
  transform-style:preserve-3d; position:relative;
  /* room for the rotateX-projected labels to clear the plank below */
  padding-bottom:4rem;}
/* the physical shelf plank */
.fih .shelf::after{
  content:""; position:absolute; left:-3%; right:-3%; bottom:0; height:12px;
  transform:rotateX(62deg); transform-origin:top center;
  background:linear-gradient(180deg,#3B2D1F,#150F08);
  border-top:1px solid rgba(201,168,76,.34);
  box-shadow:0 22px 46px -10px rgba(8,5,3,.92),
             0 0 40px -6px rgba(232,160,92,.14);}
.fih .bk{
  position:relative; transform-style:preserve-3d;
  display:grid; justify-items:center;
  transform:rotateX(15deg) translateZ(0);
  transition:transform .75s var(--ease);
  cursor:pointer;}
.fih .bk:hover{ transform:rotateX(0deg) translateY(-22px) translateZ(46px);}
.fih .bk__spot{
  position:absolute; left:50%; top:38%; width:340px; height:340px;
  transform:translate(-50%,-50%) scale(.5);
  background:radial-gradient(circle,rgba(255,224,170,.42),rgba(232,160,92,.18) 34%,transparent 66%);
  filter:blur(10px); opacity:0; pointer-events:none;
  transition:opacity .6s var(--ease), transform .75s var(--ease);}
.fih .bk:hover .bk__spot{ opacity:1; transform:translate(-50%,-50%) scale(1);}
.fih .bk__frame{
  position:relative; width:100%; aspect-ratio:2/3; border-radius:3px;
  overflow:hidden; transform-style:preserve-3d;
  background:#241a12;
  box-shadow:0 24px 44px -18px rgba(8,5,3,.95), 0 0 0 1px rgba(201,168,76,.2);
  transition:box-shadow .7s var(--ease);}
.fih .bk:hover .bk__frame{
  box-shadow:0 44px 70px -22px rgba(8,5,3,1),
             0 0 0 1px rgba(201,168,76,.6),
             0 0 60px -12px rgba(232,160,92,.5);}
.fih .bk__frame img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.8) saturate(.9) sepia(.12);
  transition:filter .7s var(--ease), transform .9s var(--ease);}
.fih .bk:hover .bk__frame img{ filter:brightness(1.06) saturate(1.04) sepia(0); transform:scale(1.03);}
/* glass sheen sweeping across on hover */
.fih .bk__frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 32%,rgba(255,236,196,.32) 48%,transparent 62%);
  transform:translateX(-120%); transition:transform 1s var(--ease);}
.fih .bk:hover .bk__frame::after{ transform:translateX(120%);}
/* reflection under the book */
.fih .bk__reflect{
  width:100%; aspect-ratio:2/1; margin-top:2px;
  transform:rotateX(180deg) translateZ(-1px);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.4),transparent 72%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.4),transparent 72%);
  overflow:hidden; opacity:.2;}
.fih .bk__reflect img{ width:100%; object-fit:cover; object-position:bottom; filter:blur(2px) brightness(.42) sepia(.25);}
.fih .bk__label{
  margin-top:1.5rem; text-align:center; display:grid; gap:.3rem;
  transition:transform .7s var(--ease);}
.fih .bk:hover .bk__label{ transform:translateY(4px);}
.fih .bk__title{
  font-family:var(--f-display); font-weight:600;
  font-size:1.16rem; line-height:1.3;
  color:var(--parchment); transition:color .5s var(--ease);
  /* equal-height labels so every book on a shelf shares one baseline */
  min-height:2.6em; display:grid; align-content:center;}
.fih .bk:hover .bk__title{ color:var(--gold-bright);}
.fih .bk__author{
  font-family:var(--f-body); font-style:italic;
  font-size:.86rem; color:var(--parchment-d);}
.fih .bk__price{
  font-family:var(--f-label);
  font-size:1.05rem; font-weight:600; letter-spacing:.06em;
  color:var(--gold); margin-top:.2rem;}
.fih .bk__price span{
  font-variant:small-caps; text-transform:lowercase;
  letter-spacing:.18em; font-size:.78rem;
  color:var(--parch-faint); margin-left:.5rem;}
/* ============================================================
   3. THREE DOORS
   ============================================================ */
.fih .doors{
  background:var(--ink);
  padding:112px 0 120px;}
.fih .door-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
  margin-top:60px;}
.fih .door{
  position:relative;
  background:
    linear-gradient(160deg,rgba(232,220,200,.045),transparent 46%),
    var(--card);
  border:1px solid var(--gold-line);
  border-radius:3px;
  padding:46px 36px 44px;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);}
.fih .door::after{
  content:""; position:absolute; inset:6px;
  border:1px solid rgba(201,168,76,.14);
  border-radius:2px; pointer-events:none;}
.fih .door:hover{
  transform:translateY(-8px);
  border-color:var(--gold-bright);
  box-shadow:0 26px 50px -22px rgba(201,168,76,.45);}
.fih .door-num{
  position:absolute; top:28px; right:32px;
  font-family:var(--f-label);
  font-size:1.05rem; letter-spacing:.24em;
  color:rgba(201,168,76,.45);
  transition:color .5s var(--ease);}
.fih .door:hover .door-num{ color:var(--gold-bright);}
.fih .door-icon{
  width:58px; height:58px; margin-bottom:26px;
  color:var(--gold);
  transition:color .5s var(--ease), transform .5s var(--ease);}
.fih .door:hover .door-icon{ color:var(--gold-bright); transform:translateY(-2px);}
.fih .door h3{
  font-family:var(--f-display);
  font-weight:600; font-size:1.72rem;
  margin:0 0 14px; color:var(--parchment);
  letter-spacing:.01em;}
.fih .door p{
  margin:0; color:var(--parchment-d);
  font-size:1rem; line-height:1.8;}
/* ============================================================
   4. A CONSTELLATION OF VOICES
   ============================================================ */
.fih .constellation{
  padding:clamp(5rem,11vh,7.5rem) 0 clamp(5rem,11vh,7.5rem);
  background:
    radial-gradient(65% 55% at 50% 48%,rgba(201,168,76,.10),transparent 70%),
    linear-gradient(180deg,var(--walnut),#181009 55%,#221912);
  overflow:hidden;}
.fih .constellation__head{ text-align:center; max-width:660px; margin:0 auto clamp(1rem,3vh,2rem);}
.fih .stage{
  position:relative; width:100%;
  height:clamp(420px,58vw,640px);
  margin-top:1rem;}
.fih .stage__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.fih .stage__svg line{
  stroke:rgba(201,168,76,.36); stroke-width:1;
  stroke-dasharray:5 9;
  vector-effect:non-scaling-stroke;
  animation:fih-flow 9s linear infinite;
  transition:stroke .6s var(--ease), stroke-width .6s var(--ease);}
@keyframes fih-flow{ to{ stroke-dashoffset:-140; } }
.fih .stage__svg line.lit{
  stroke:rgba(227,197,114,.95); stroke-width:1.6;
  filter:drop-shadow(0 0 6px rgba(232,160,92,.85));}
.fih .star{
  position:absolute; transform:translate(-50%,-50%);
  display:grid; justify-items:center; cursor:pointer;
  transition:transform .65s var(--ease);}
.fih .star:hover{ transform:translate(-50%,-50%) scale(1.07);}
.fih .star__orb{
  position:relative; border-radius:50%; overflow:hidden;
  width:var(--s); height:var(--s);
  border:1px solid rgba(201,168,76,.3);
  background:#241a12;
  box-shadow:0 16px 40px -14px rgba(8,5,3,.95);
  transition:box-shadow .65s var(--ease), border-color .65s var(--ease);}
.fih .star__orb img{
  width:100%; height:100%; object-fit:cover; object-position:center 22%;
  filter:sepia(.42) grayscale(.32) brightness(.7) contrast(1.06);
  transition:filter .65s var(--ease), transform .9s var(--ease);}
.fih .star:hover .star__orb img{ filter:sepia(0) grayscale(0) brightness(1) contrast(1.04); transform:scale(1.05);}
.fih .star__orb::after{ /* vignette */
  content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 50% 30%,transparent 42%,rgba(20,14,9,.8) 100%);}
.fih .star__ring{
  position:absolute; inset:-9px; border-radius:50%;
  border:1px solid rgba(201,168,76,.5);
  opacity:0; transform:scale(.9);
  transition:opacity .6s var(--ease), transform .6s var(--ease);}
.fih .star:hover .star__ring{ opacity:1; transform:scale(1);}
.fih .star:hover .star__orb{
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(201,168,76,.6), 0 0 46px -4px rgba(232,160,92,.7),
             0 26px 54px -18px rgba(8,5,3,.95);}
.fih .star__ring::after{
  content:""; position:absolute; inset:-8px; border-radius:50%;
  border:1px dashed rgba(201,168,76,.3);
  animation:fih-ringSpin 22s linear infinite;}
@keyframes fih-ringSpin{ to{ transform:rotate(360deg); } }
.fih .star__meta{
  margin-top:.9rem; text-align:center; width:max(170px,100%);
  opacity:.62; transform:translateY(-4px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);}
.fih .star:hover .star__meta{ opacity:1; transform:none;}
.fih .star__name{
  font-family:var(--f-display); font-weight:600;
  font-size:1.06rem; line-height:1.25;
  color:var(--parchment); white-space:nowrap; display:block;}
.fih .star--lead .star__name{ font-size:1.38rem; color:var(--gold-bright);}
.fih .star__dates{
  display:block;
  font-family:var(--f-label);
  font-size:.78rem; letter-spacing:.13em;
  color:var(--parchment-d); margin-top:.14rem;}
.fih .star__role{
  display:block;
  font-family:var(--f-label);
  font-variant:small-caps; text-transform:lowercase;
  letter-spacing:.16em; font-size:.82rem;
  color:var(--gold); margin-top:.3rem;
  opacity:0; max-height:0; overflow:hidden;
  transition:opacity .55s var(--ease), max-height .55s var(--ease);}
.fih .star:hover .star__role{ opacity:1; max-height:44px;}
/* faint starfield behind the constellation */
.fih .stage__dust{ position:absolute; inset:0; pointer-events:none;}
.fih .stage__dust i{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:rgba(232,220,200,.55);
  animation:fih-twinkle 5s ease-in-out infinite;}
@keyframes fih-twinkle{ 0%,100%{ opacity:.12; transform:scale(.7); } 50%{ opacity:.8; transform:scale(1.2); } }
/* ============================================================
   5. THE TRANSFORMATION
   ============================================================ */
.fih .transform-sec{
  padding:clamp(5rem,11vh,7.5rem) 0;
  background:linear-gradient(180deg,#221912,var(--ink) 48%,#1E1610);}
.fih .transform-sec__head{ text-align:center; max-width:660px; margin:0 auto clamp(2.6rem,6vh,4rem);}
.fih .xcompare{
  display:grid; grid-template-columns:1fr 2px 1fr;
  align-items:stretch; gap:0;
  border:1px solid rgba(201,168,76,.28); border-radius:3px; overflow:hidden;
  box-shadow:var(--shadow-deep);}
.fih .xpanel{ padding:clamp(2rem,3.6vw,3.2rem);}
.fih .xpanel__tag{
  font-family:var(--f-label);
  font-variant:small-caps; text-transform:lowercase;
  font-size:.84rem; font-weight:600; letter-spacing:.24em;
  display:flex; align-items:center; gap:.6rem;
  margin:0 0 1.5rem;}
.fih .xpanel__dot{ width:6px; height:6px; border-radius:50%; display:inline-block; flex:none;}
.fih .xpanel__text{ font-size:clamp(1rem,1.2vw,1.1rem); line-height:1.95; margin:0;}
/* LEFT — as printed, 1659 */
.fih .xpanel--old{
  background:
    radial-gradient(120% 90% at 20% 0%,rgba(255,235,190,.09),transparent 62%),
    var(--walnut-lit);
  position:relative;}
.fih .xpanel--old::after{ /* aged paper grain + foxing */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.62;
  background:
    repeating-linear-gradient(94deg,rgba(0,0,0,.055) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(4deg,rgba(255,240,205,.045) 0 1px,transparent 1px 3px),
    radial-gradient(80% 60% at 78% 82%,rgba(126,92,42,.4),transparent 62%),
    radial-gradient(60% 50% at 12% 96%,rgba(126,92,42,.3),transparent 64%);}
.fih .xpanel--old .xpanel__tag{ color:rgba(232,220,200,.5);}
.fih .xpanel--old .xpanel__dot{ background:rgba(232,220,200,.42);}
.fih .xpanel--old .xpanel__text{
  font-family:var(--f-display); font-style:italic; font-weight:500;
  color:rgba(232,220,200,.6);
  position:relative; z-index:1;}
.fih .xpanel--old .xpanel__text::first-letter{
  font-size:2.9em; float:left; line-height:.86; padding:.06em .14em 0 0;
  color:rgba(201,168,76,.62); font-style:normal;}
/* RIGHT — Friends Illuminated */
.fih .xpanel--new{
  background:
    radial-gradient(110% 80% at 78% 0%,rgba(201,168,76,.1),transparent 62%),
    #1E1710;}
.fih .xpanel--new .xpanel__tag{ color:var(--gold);}
.fih .xpanel--new .xpanel__dot{ background:var(--gold); box-shadow:0 0 10px var(--gold);}
.fih .xpanel--new .xpanel__text{
  font-family:var(--f-display); font-weight:500; color:var(--parchment);}
.fih .xpanel--new .xpanel__text b{
  font-weight:500; color:var(--gold-bright);
  text-shadow:0 0 22px rgba(201,168,76,.4);}
.fih .xpanel--new .xpanel__text::first-letter{
  font-size:2.9em; float:left; line-height:.86; padding:.06em .14em 0 0;
  color:var(--gold);}
/* glowing divider */
.fih .xdivider{
  position:relative; width:2px;
  background:linear-gradient(180deg,transparent,rgba(201,168,76,.22) 12%,
    var(--gold) 50%,rgba(201,168,76,.22) 88%,transparent);}
.fih .xdivider::before{
  content:""; position:absolute; left:-1px; width:4px; height:34%;
  background:linear-gradient(180deg,transparent,var(--gold-bright),transparent);
  filter:blur(2px);
  animation:fih-dividerRun 5.5s var(--ease) infinite;}
@keyframes fih-dividerRun{ 0%{ top:-34%; } 100%{ top:100%; } }
.fih .xdivider::after{
  content:"→"; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ink); border:1px solid rgba(201,168,76,.6);
  color:var(--gold); font-size:.95rem;
  box-shadow:0 0 34px -6px rgba(232,160,92,.8);}
.fih .xsource{
  margin:20px 0 0; text-align:center;
  font-family:var(--f-label);
  font-variant:small-caps; text-transform:lowercase;
  letter-spacing:.19em; font-size:.84rem;
  color:rgba(232,220,200,.5);}
/* stat strip */
.fih .xstats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; margin-top:clamp(2.2rem,5vh,3.2rem);
  background:rgba(201,168,76,.2);
  border:1px solid rgba(201,168,76,.2); border-radius:3px; overflow:hidden;}
.fih .xstat{
  background:linear-gradient(180deg,#241A13,#1A1410);
  padding:clamp(1.8rem,3vw,2.4rem) 1.2rem; text-align:center;
  transition:background .6s var(--ease);}
.fih .xstat:hover{ background:linear-gradient(180deg,#31241A,#201810);}
.fih .xstat__num{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(2.2rem,4.4vw,3.3rem); line-height:1;
  color:var(--gold); letter-spacing:-.01em;
  text-shadow:0 0 40px rgba(201,168,76,.35);
  font-variant-numeric:tabular-nums;}
.fih .xstat__num small{ font-size:.46em; margin-left:.05em; font-weight:500;}
.fih .xstat__label{
  font-family:var(--f-label);
  font-variant:small-caps; text-transform:lowercase;
  font-size:.82rem; font-weight:600; letter-spacing:.18em;
  color:var(--parch-faint);
  margin-top:.9rem; line-height:1.7;}
/* ============================================================
   6. OUR METHOD — faithful to the original
   ============================================================ */
.fih .faithful{
  background:var(--ink);
  padding:114px 0 122px;}
.fih .faithful-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
.fih .faithful h2{ text-align:left;}
.fih .faithful-lede{
  color:var(--parchment-d); font-size:1.03rem; line-height:1.85;
  margin:0 0 34px; max-width:480px;}
/* the checklist, presented in the gilded double-ruled plate */
.fih .method-card{
  background:
    linear-gradient(155deg,rgba(232,220,200,.05),transparent 48%),
    var(--card);
  border:1px solid var(--gold-line);
  border-radius:3px;
  padding:38px 38px 40px;
  position:relative;
  box-shadow:var(--shadow-deep);}
.fih .method-card::after{
  content:""; position:absolute; inset:7px;
  border:1px solid rgba(201,168,76,.13);
  border-radius:2px; pointer-events:none;}
.fih .method-card__tag{
  font-family:var(--f-label);
  font-variant:small-caps; text-transform:lowercase;
  letter-spacing:.24em; font-size:.82rem; font-weight:600;
  color:var(--gold);
  margin:0 0 16px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(201,168,76,.2);}
.fih .checklist{ list-style:none; margin:0; padding:0;}
.fih .checklist li{
  display:flex; align-items:flex-start; gap:15px;
  padding:14px 0;
  border-bottom:1px solid rgba(232,220,200,.09);
  font-size:1.01rem;
  color:var(--parchment);}
.fih .checklist li:last-child{ border-bottom:0; padding-bottom:0;}
.fih .checklist svg{ flex:0 0 20px; width:20px; height:20px; color:var(--gold); margin-top:4px;}
/* two-card method split: compact rendering card + detailed apparatus card */
.fih .method-card--compact{ margin-top:38px; padding:30px 32px 32px;}
.fih .method-card--compact .checklist li{ padding:11px 0; font-size:.98rem;}
.fih .checklist--detail li{ padding:16px 0;}
.fih .checklist--detail span{ display:block;}
.fih .checklist--detail small{
  display:block; margin-top:5px;
  font-size:.88rem; line-height:1.65;
  color:var(--parch-faint);}
.fih .method-card__foot{
  margin:22px 0 0; padding-top:18px;
  border-top:1px solid rgba(201,168,76,.2);
  font-size:.88rem; line-height:1.7;
  color:var(--parch-faint);
  font-style:italic;}
/* ============================================================
   7. FOOTER CTA
   ============================================================ */
.fih .footer-cta{
  position:relative;
  background:var(--walnut);
  padding:118px 0 112px;
  overflow:hidden;
  text-align:center;
  isolation:isolate;}
.fih .footer-cta::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 74% at 50% 108%, rgba(232,160,92,.30), transparent 66%),
    radial-gradient(80% 90% at 50% 118%, rgba(201,168,76,.16), transparent 70%);
  animation:fih-flicker 6.4s ease-in-out infinite;}
.fih .footer-cta .wrap{ position:relative; z-index:1;}
/* the gilded wordmark plaque, kept from the base concept */
.fih .wordmark-wrap{
  margin:0 auto 40px;
  max-width:400px;
  position:relative;}
.fih .wordmark-wrap::before{
  content:""; position:absolute; inset:-52% -30%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(232,160,92,.30), rgba(201,168,76,.10) 52%, transparent 72%);
  filter:blur(6px);
  pointer-events:none;}
.fih .wordmark-plate{
  position:relative;
  display:block;
  border-radius:3px;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(201,168,76,.5),
    0 0 0 7px rgba(42,31,23,.55),
    0 0 0 8px rgba(201,168,76,.18),
    0 34px 76px -26px rgba(8,5,3,.95),
    0 0 90px -14px rgba(232,160,92,.45);}
.fih .wordmark{
  width:100%; height:auto;
  filter:saturate(1.12) contrast(1.06) brightness(1.02);}
.fih .wordmark-plate::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(74% 70% at 50% 46%,
    transparent 34%,
    rgba(42,31,23,.42) 74%,
    rgba(35,25,18,.88) 100%);
  mix-blend-mode:multiply;}
.fih .footer-cta h2{
  font-family:var(--f-display);
  font-weight:600; font-size:clamp(2.2rem,5vw,3.9rem);
  line-height:1.12; margin:0 0 20px;
  color:var(--parchment);}
.fih .footer-cta h2 em{
  font-style:italic; color:var(--gold-bright);
  text-shadow:0 2px 26px rgba(201,168,76,.32);}
.fih .footer-cta p.lede{
  max-width:560px; margin:0 auto 42px;
  color:var(--parchment-d); font-size:1.05rem; line-height:1.85;}
.fih .trust{
  margin-top:38px;
  font-family:var(--f-label);
  font-variant:small-caps; text-transform:lowercase;
  letter-spacing:.2em; font-size:.86rem;
  color:rgba(232,220,200,.5);}
/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.fih .reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);}
.fih .reveal.in{ opacity:1; transform:none;}
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .fih .door-grid{ grid-template-columns:1fr;}
  .fih .faithful-grid{ grid-template-columns:1fr; gap:48px;}
  .fih .xstats{ grid-template-columns:repeat(2,1fr);}
  .fih .shelf{ gap:1.4rem;}
}
@media (max-width:900px){
  .fih .hero-grid{ grid-template-columns:1fr; gap:3rem; padding-top:34px;}
  .fih .hstack-wrap{ order:-1; min-height:auto;}
  .fih .hstack{ width:min(52vw,240px);}
  /* tighter fan so the deck never runs off the viewport edge */
  .fih .hbk-4{ transform:translate(-13%,-8%) rotate(-8deg) scale(.91);}
  .fih .hbk-3{ transform:translate(-7%,-4%) rotate(-4.5deg) scale(.95);}
  .fih .hbk-2{ transform:translate(6%,3.5%) rotate(4.5deg) scale(.97);}
  .fih .new-badge{ width:62px; height:62px; font-size:.8rem; top:-12px; right:-12px;}
  .fih .hero-sub{ margin-inline:0;}
}
@media (max-width:820px){
  .fih .xcompare{ grid-template-columns:1fr; grid-template-rows:auto 2px auto;}
  .fih .xdivider{
    width:auto; height:2px;
    background:linear-gradient(90deg,transparent,rgba(201,168,76,.22) 12%,
      var(--gold) 50%,rgba(201,168,76,.22) 88%,transparent);}
  .fih .xdivider::before{
    left:auto; top:-1px; width:34%; height:4px;
    background:linear-gradient(90deg,transparent,var(--gold-bright),transparent);
    animation:fih-dividerRunH 5.5s var(--ease) infinite;}
  @keyframes fih-dividerRunH{ 0%{ left:-34%; } 100%{ left:100%; } }
  .fih .xdivider::after{ content:"↓"; width:38px; height:38px;}
}
@media (max-width:760px){
  .fih{font-size:16px;}
  .fih .wrap{ padding:0 22px;}
  .fih .hero-h{ font-size:clamp(2.3rem,9vw,3.1rem);}
  .fih .hero-ctas{ flex-direction:column; align-items:stretch;}
  .fih .btn{ width:100%; padding:15px 24px;}
  .fih .hero-stats{ gap:.35rem 1.2rem; font-size:.8rem; letter-spacing:.16em;}
  .fih .hero-stats .sep{ display:none;}
  .fih .hero-stats b{ font-size:1.2rem;}
  .fih .eyebrow{ font-size:.78rem; letter-spacing:.28em;}
  .fih .eyebrow::before, .fih .eyebrow::after{ width:28px;}
  .fih .doors, .fih .faithful{ padding:78px 0 84px;}
  .fih .shelf-sec, .fih .constellation, .fih .transform-sec{ padding:78px 0 84px;}
  .fih .footer-cta{ padding:88px 0 82px;}
  .fih .wordmark-wrap{ max-width:290px;}
  /* shelves flatten to a 2-up stack */
  .fih .shelves{ perspective:none; gap:2.6rem;}
  .fih .shelf{ grid-template-columns:repeat(2,1fr); gap:1.6rem 1.1rem; padding-bottom:0;}
  .fih .shelf::after{ display:none;}
  .fih .bk{ transform:none;}
  .fih .bk:hover{ transform:translateY(-8px);}
  .fih .bk__reflect{ display:none;}
  .fih .bk__label{ margin-top:1rem;}
  .fih .bk__title{ font-size:.98rem;}
  /* constellation collapses to a stacked grid */
  .fih .stage{
    height:auto; display:grid; grid-template-columns:repeat(2,1fr);
    gap:2.2rem 1rem; margin-top:2.6rem;}
  .fih .stage__svg, .fih .stage__dust{ display:none;}
  .fih .star{
    position:static !important; transform:none;
    left:auto !important; top:auto !important; width:auto !important;}
  .fih .star:hover{ transform:translateY(-6px);}
  .fih .star__orb{ --s:min(34vw,132px) !important;}
  .fih .star__orb img{ filter:sepia(.2) brightness(.95);}
  .fih .star__meta{ opacity:1; transform:none; width:100%;}
  .fih .star__role{ opacity:1; max-height:60px;}
  .fih .star__name{ white-space:normal;}
  .fih .xstats{ grid-template-columns:repeat(2,1fr);}
  .fih .method-card{ padding:28px 24px 30px;}
}
@media (max-width:420px){
  .fih .xstats{ grid-template-columns:1fr;}
  .fih .xpanel__text::first-letter{ font-size:2.2em !important;}
  .fih .shelf{ gap:1.4rem .9rem;}
  .fih .bk__title{ font-size:.9rem;}
  .fih .bk__author{ font-size:.8rem;}
  .fih .stage{ gap:1.9rem .8rem;}
  .fih .star__name{ font-size:.96rem;}
  .fih .star--lead .star__name{ font-size:1.1rem;}
}
@media (max-width:359px){
  .fih .shelf{ grid-template-columns:1fr; max-width:230px; margin-inline:auto;}
  .fih .stage{ grid-template-columns:1fr; max-width:240px; margin-inline:auto;}
}
/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .fih *, .fih *::before, .fih *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;}
  .fih .reveal{ opacity:1 !important; transform:none !important;}
  .fih .hero .flicker, .fih .footer-cta::before{ animation:none; opacity:.8;}
  .fih .stage__dust{ display:none;}
  .fih .xdivider::before{ display:none;}
  .fih .new-badge{ animation:none;}
}

/* ============================================================
   SECTION FOOT LINKS
   The mockup's shelf and constellation were dead ends — every card
   pointed at "#shop". On the real site those sections need a crawlable
   route to the full index, so each gets one ghost-pill link.
   ============================================================ */
.fih .shelf-more{
  margin:clamp(2.4rem,4vw,3.4rem) 0 0;
  text-align:center;
}

/* ============================================================
   SITE-CHROME RECONCILIATION
   The homepage reuses the real nav, announcement ribbon and footer
   from baseof.html. main.css styles those for a near-white page; on
   the dark hero they need re-tinting. Keyed on body.home-illuminated,
   which only layouts/index.html sets.
   ============================================================ */

/* main.css gives .hero min-height:100vh + flex centring for the old
   cover-marquee hero. The illuminated hero is a normal block section,
   so those have to be undone explicitly (same specificity fight). */
.fih .hero{
  min-height:0;
  display:block;
  align-items:initial;
  justify-content:initial;
  /* clear the fixed announcement ribbon + nav */
  padding:calc(var(--announce-h, 40px) + var(--nav-height, 64px)) 0 clamp(72px,9vw,116px);
}

body.home-illuminated{ background:#1A1410; }

body.home-illuminated .nav{
  background:rgba(26,20,16,.62);
  border-bottom:1px solid rgba(201,168,76,.26);
}
body.home-illuminated .nav--scrolled,
html[data-theme="dark"] body.home-illuminated .nav--scrolled{
  background:rgba(20,15,11,.94);
}
body.home-illuminated .nav-logo-text,
body.home-illuminated .theme-toggle{ color:#E8DCC8; }
body.home-illuminated .nav-link{ color:rgba(232,220,200,.72); }
body.home-illuminated .nav-link:hover,
body.home-illuminated .nav-link--active{ color:#E3C572; }
body.home-illuminated .nav-menu-toggle span{ background:#E8DCC8; }

body.home-illuminated .announce-bar{
  background:linear-gradient(100deg,#1A1410 0%,#2A1F17 45%,#1A1410 100%);
  border-bottom:1px solid rgba(201,168,76,.5);
}

/* The mobile drawer is a light panel in main.css; keep it legible. */
@media (max-width:768px){
  body.home-illuminated .nav-menu{ background:#1A1410; }
  body.home-illuminated .nav-menu .nav-link{ color:#E8DCC8; }
}

/* ============================================================
   MEASUREMENT DISCLOSURE
   The measured-readability evidence Earl approved 2026-07-26 lives
   under the stat strip as a <details> disclosure so the numbers keep
   their scope, sources and caveats, and stay crawlable.
   ============================================================ */
.fih .xscope{
  margin:1.15rem 0 0;
  text-align:center;
  font-family:var(--f-label);
  font-size:.86rem;
  letter-spacing:.04em;
  color:var(--parch-faint);
}
.fih .xmethod{
  margin:2.2rem auto 0;
  max-width:860px;
  border:1px solid rgba(201,168,76,.22);
  border-radius:3px;
  background:linear-gradient(180deg,#241A13,#1A1410);
}
.fih .xmethod > summary{
  cursor:pointer;
  list-style:none;
  padding:1rem 1.4rem;
  font-family:var(--f-label);
  font-variant:small-caps; text-transform:lowercase;
  letter-spacing:.2em; font-size:.86rem; font-weight:600;
  color:var(--gold);
}
.fih .xmethod > summary::-webkit-details-marker{ display:none; }
.fih .xmethod > summary::after{ content:" +"; color:var(--parch-faint); }
.fih .xmethod[open] > summary::after{ content:" –"; }
.fih .xmethod > summary:hover{ color:var(--gold-bright); }
.fih .xmethod__body{
  padding:0 1.4rem 1.6rem;
  border-top:1px solid rgba(201,168,76,.18);
  font-size:.96rem;
  line-height:1.85;
  color:var(--parchment-d);
}
.fih .xmethod__body p{ margin:1.1rem 0 0; }
.fih .xmethod__body a{
  color:var(--gold-bright);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(201,168,76,.45);
}
.fih .xmethod__body a:hover{ text-decoration-color:var(--gold-bright); }
.fih .xtable{
  width:100%;
  border-collapse:collapse;
  margin-top:1.2rem;
  font-size:.92rem;
  font-variant-numeric:tabular-nums;
}
.fih .xtable caption{
  caption-side:top;
  text-align:left;
  padding:1.1rem 0 .55rem;
  font-family:var(--f-label);
  letter-spacing:.12em;
  font-size:.84rem;
  color:var(--parch-faint);
}
.fih .xtable th,
.fih .xtable td{
  padding:.55rem .5rem;
  border-bottom:1px solid rgba(232,220,200,.1);
  text-align:right;
}
.fih .xtable th:first-child,
.fih .xtable td:first-child{ text-align:left; color:var(--parchment); }
.fih .xtable thead th{
  font-family:var(--f-label);
  font-variant:small-caps; text-transform:lowercase;
  letter-spacing:.16em;
  font-size:.8rem;
  font-weight:600;
  color:var(--gold);
}
.fih .xtable tbody td:last-child{ color:var(--gold-bright); }
@media (max-width:600px){
  .fih .xtable{ font-size:.82rem; }
  .fih .xtable th, .fih .xtable td{ padding:.45rem .3rem; }
}

/* ============================================================
   HERO STAT LINE — three hard numbers, wrapped safely
   ============================================================ */
.fih .hero-stats span{ display:inline-flex; align-items:baseline; gap:.4rem; }

/* Shelf / hero covers keep their natural 2:3 box while the intrinsic
   width/height stamped by partials/img-attrs.html reserves layout. */
.fih .hbk img,
.fih .bk__frame img,
.fih .bk__reflect img,
.fih .star__orb img{ width:100%; height:100%; }
.fih .bk__reflect img{ height:auto; }

/* Focus visibility (the mockup relied on hover only). */
.fih a:focus-visible,
.fih summary:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:3px;
  border-radius:2px;
}
.fih .footer-cta .cta-row{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center;}
@media (max-width:640px){ .fih .footer-cta .cta-row{ flex-direction:column; align-items:stretch; max-width:340px; margin:0 auto;} }