/* ==========================================================================
   MAKE A MARIMBA — shared site stylesheet
   One file for every page. Change it here, it changes everywhere.

   Greens and blues are deep, pure and saturated; the wood tones (and the
   bar icon's texture) are sampled from a photo of Jim's own marimba bars.
   ========================================================================== */
:root{
  /* greens — pure, vivid, dark */
  --forest:#083D26;
  --forest-2:#0C5735;
  --moss:#0E8A4A;
  --moss-soft:#DFF0E5;
  /* blues — pure, vivid, dark */
  --blue:#064E92;
  --blue-2:#0A73CE;
  --blue-soft:#E1EEFA;
  /* wood, sampled from the bar photo */
  --rosewood:#9D5733;
  --honey:#C8873C;
  --honey-soft:#FBF1E4;
  --wood-dark:#5D2815;
  --wood-lit:#CF7B4D;
  /* neutrals */
  --cream:#FAF7F1;
  --paper:#FFFFFF;
  --ink:#1B2620;
  --muted:#59665F;
  --line:#E2DED4;
  --line-2:#EFECE4;

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  --shell:1500px;
  --rail-l:250px;
  --rail-r:260px;
  --gap:clamp(20px,2.4vw,38px);
  --pad:clamp(16px,3vw,40px);
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(12,30,22,.05), 0 4px 14px rgba(12,30,22,.07);
  --shadow:0 2px 6px rgba(12,30,22,.07), 0 18px 44px rgba(12,30,22,.12);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;border:0;display:block}
a{color:var(--blue)}
a:hover{color:var(--forest)}
:focus-visible{outline:3px solid var(--honey);outline-offset:2px}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--forest);color:#fff;padding:12px 18px;z-index:100;
  border-radius:0 0 8px 0;text-decoration:none;font-weight:600;
}
.skip:focus{left:0;color:#fff}

/* ---------- Marimba keyboard icon ---------------------------------------
   Plan view of a chromatic keyboard: accidentals behind (grouped two then
   three), naturals in front, both shortening left to right. Each bar is
   faced with wood cropped from a photo of real bars, so grain and colour
   are genuine. Size the whole icon with --h; everything scales from it.  */
.mbar{
  --h:38px;
  --bw:calc(var(--h) * .155);
  --bg:calc(var(--h) * .075);
  display:inline-flex;
  flex-direction:column;
  gap:calc(var(--h) * .06);
  justify-content:center;
  flex:0 0 auto;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.4));
}
.mbar__row{display:flex;gap:var(--bg)}
/* Both rows are the same height and share one taper ramp, so the silhouette
   is a single triangle pointing right rather than two opposing ones.
   Top row hangs off a flat baseline, bottom row grows from a flat topline. */
.mbar__row--sharps{height:calc(var(--h) * .46);align-items:flex-end;padding-left:calc(var(--bw) * .9)}
.mbar__row--naturals{height:calc(var(--h) * .46);align-items:flex-start}
.mbar__row i{
  display:block;
  width:var(--bw);
  border-radius:calc(var(--bw) * .28);
  background-color:var(--rosewood);
  /* the supplied bar graphic already carries its own 3D shading, so it is
     shown whole and unmodified rather than tiled or overlaid */
  background-image:url("images/bar.jpg");
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.mbar__row--naturals i:nth-child(1){height:98%}
.mbar__row--naturals i:nth-child(2){height:92%}
.mbar__row--naturals i:nth-child(3){height:85%}
.mbar__row--naturals i:nth-child(4){height:79%}
.mbar__row--naturals i:nth-child(5){height:73%}
.mbar__row--naturals i:nth-child(6){height:66%}
.mbar__row--naturals i:nth-child(7){height:60%}
.mbar__row--naturals i:nth-child(8){height:54%}
.mbar__row--sharps i:nth-child(1){height:94%}
.mbar__row--sharps i:nth-child(2){height:88%;margin-right:calc(var(--bw) + var(--bg))}
.mbar__row--sharps i:nth-child(3){height:75%}
.mbar__row--sharps i:nth-child(4){height:69%}
.mbar__row--sharps i:nth-child(5){height:63%}

.mbar--xs{--h:19px}
.mbar--sm{--h:26px}
.mbar--lg{--h:55px}

/* ---------- Resonator pipe rule ------------------------------------------
   A brass cylinder lit from above — the site's horizontal rule.           */
.pipe{
  height:13px;
  background:linear-gradient(180deg,
    #150B02 0%,
    #150B02 6%,      /* thin, hard dark edge */
    #8A5A12 12%,
    #D9A82E 26%,
    #F7DE86 41%,
    #FFF7D6 50%,     /* specular highlight */
    #F0C845 59%,
    #C08A18 74%,
    #7A4A0C 88%,
    #150B02 94%,
    #150B02 100%);   /* thin, hard dark edge */
  box-shadow:0 4px 10px rgba(0,0,0,.30);
}
.pipe--thin{height:7px;box-shadow:0 2px 6px rgba(0,0,0,.25)}

.rule{display:flex;align-items:center;gap:14px;margin:0 0 1.4em}
.rule::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- Header -------------------------------------------------------
   Consistent on every page. Deliberately shallow: photo band, brand left,
   sign-up pinned top right.                                               */
.hero{
  position:relative;
  background:
    linear-gradient(100deg, rgba(8,61,38,.82) 0%, rgba(8,61,38,.54) 38%, rgba(6,78,146,.34) 72%, rgba(6,78,146,.26) 100%),
    url("images/marimbas_and vibes_bg.jpg") center/cover no-repeat,
    var(--forest);
  color:#fff;
  padding:clamp(14px,1.8vw,22px) var(--pad);
}
.hero__inner{
  max-width:var(--shell);
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) 430px;
  gap:clamp(18px,2.6vw,44px);
  align-items:start;
}
.hero__copy{align-self:center}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin:0 0 .3em}
.brand__name{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.6rem,3.4vw,2.5rem);
  line-height:1;
  letter-spacing:-.015em;
  color:#fff;
  margin:0;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.hero__tag{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(.98rem,1.7vw,1.2rem);
  line-height:1.3;
  color:#EDF5EF;
  margin:0;
  max-width:36ch;
  text-shadow:0 1px 8px rgba(0,0,0,.55);
}
.hero__tag b{color:#F6D79A;font-weight:700}

/* sign-up card — feathered accent along the top and right edges */
.subscribe{
  background:var(--paper);
  border-radius:var(--radius);
  padding:14px 16px 13px;
  /* accent glow spills outward from the top and right edges */
  box-shadow:
    0 -9px 20px -6px rgba(200,135,60,.90),
    9px 0 20px -6px rgba(200,135,60,.90),
    0 2px 6px rgba(12,30,22,.10),
    0 16px 40px rgba(12,30,22,.26);
}
.subscribe__title{
  font-family:var(--display);
  font-weight:600;
  font-size:.98rem;
  line-height:1.2;
  color:var(--forest);
  margin:0 0 9px;
}
.subscribe__fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 10px}
.subscribe label{
  display:block;
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--muted);
  margin:0 0 3px;
}
.subscribe input[type=text],
.subscribe input[type=email]{
  width:100%;
  font:inherit;
  font-size:.95rem;
  padding:8px 10px;
  color:var(--ink);
  background:var(--paper);
  border:1px solid #C6CFC9;
  border-radius:7px;
}
.subscribe input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(6,78,146,.18)}
.subscribe__foot{display:flex;align-items:center;gap:12px}
.subscribe__foot .btn{flex:1 1 auto;width:auto}
.subscribe__privacy{font-size:.78rem;line-height:1.25;flex:0 0 auto;max-width:112px}

.btn{
  display:block;
  width:100%;
  font:inherit;
  font-weight:700;
  font-size:.95rem;
  line-height:1.3;
  text-align:center;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(180deg,var(--moss),var(--forest-2));
  border:0;
  border-radius:9px;
  padding:11px 16px;
  cursor:pointer;
  box-shadow:0 2px 0 #06301D, 0 8px 20px rgba(8,61,38,.24);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{color:#fff;filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 3px 0 #06301D, 0 12px 26px rgba(8,61,38,.3)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 #06301D, 0 5px 12px rgba(8,61,38,.22)}
.btn--inline{display:inline-block;width:auto;padding:12px 22px;font-size:1rem}
.btn--blue{background:linear-gradient(180deg,var(--blue-2),var(--blue));box-shadow:0 2px 0 #043763, 0 8px 20px rgba(6,78,146,.26)}
.btn--blue:hover{box-shadow:0 3px 0 #043763, 0 12px 26px rgba(6,78,146,.32)}

/* ---------- Three-column layout ----------------------------------------- */
.layout{
  max-width:var(--shell);
  margin-inline:auto;
  padding:var(--gap) var(--pad) clamp(30px,4vw,56px);
  display:grid;
  grid-template-columns:var(--rail-l) minmax(0,1fr) var(--rail-r);
  gap:var(--gap);
  align-items:start;
}
.rail{
  position:sticky;
  top:var(--gap);
  max-height:calc(100vh - (var(--gap) * 2));
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.rail::-webkit-scrollbar{width:8px}
.rail::-webkit-scrollbar-thumb{background:#D5DDD7;border-radius:8px}

.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  margin:0 0 var(--gap);
}
.card:last-child{margin-bottom:0}
.card__head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 15px;
  background:var(--forest);
  color:#fff;
}
.card__head--blue{background:var(--blue)}
.card__title{
  font-family:var(--display);
  font-weight:600;
  font-size:.95rem;
  line-height:1.25;
  letter-spacing:.01em;
  margin:0;
}
.card__body{padding:14px 16px 16px}

/* project list (left rail) */
.proj{
  display:block;
  text-decoration:none;
  color:var(--ink);
  padding:12px 0;
  border-bottom:1px solid var(--line-2);
}
.proj:last-child{border-bottom:0;padding-bottom:2px}
.proj img{border-radius:8px;margin:0 auto 8px;background:var(--cream)}
.proj__name{
  display:block;
  font-family:var(--display);
  font-weight:600;
  font-size:.96rem;
  line-height:1.25;
  color:var(--blue);
  text-align:center;
}
.proj:hover .proj__name{color:var(--forest);text-decoration:underline}
.proj__meta{
  display:block;
  font-size:.8rem;
  font-style:italic;
  color:var(--muted);
  text-align:center;
  margin-top:2px;
}
.future{margin:0;padding-left:1.1em;font-size:.9rem;color:var(--muted)}
.future li{margin-bottom:.3em}

/* resource list (right rail) */
.res{display:block;padding:13px 0;border-bottom:1px solid var(--line-2)}
.res:last-child{border-bottom:0;padding-bottom:2px}
.res__link{
  font-family:var(--display);
  font-weight:600;
  font-size:.96rem;
  line-height:1.28;
  color:var(--blue);
  text-decoration:none;
  display:block;
}
.res__link:hover{color:var(--forest);text-decoration:underline}
.res__desc{font-size:.84rem;line-height:1.45;color:var(--muted);margin:4px 0 0}
/* highlighted emphasis inside a rail link */
.hl{
  font-weight:700;
  letter-spacing:.04em;
  color:var(--forest);
  background:linear-gradient(180deg,#FFF27A,#FFE23D);
  border-radius:4px;
  padding:0 5px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.res__link:hover .hl{background:linear-gradient(180deg,#FFE94F,#FFD400)}
.res__desc a{color:var(--blue)}
.res img{border-radius:8px;margin:8px auto;width:100%}
.res--contact{
  text-align:center;
  background:var(--moss-soft);
  border-radius:10px;
  padding:12px;
  border-bottom:0;
}
.res--contact .res__link{font-size:.9rem;word-break:break-word}

/* ---------- Main body --------------------------------------------------- */
.page-title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.6rem,3.2vw,2.35rem);
  line-height:1.15;
  letter-spacing:-.015em;
  color:var(--forest);
  margin:0 0 .7em;
}
.page-title--icon{
  display:flex;
  align-items:center;
  gap:14px;
}
.page-title--icon .mbar{flex:0 0 auto}
.section-title{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.15rem,2.2vw,1.4rem);
  line-height:1.25;
  color:var(--forest);
  margin:0;
}
/* nowrap only inside the .rule flex row, where the heading sits beside a line.
   Applied globally it stops long headings wrapping and forces page scroll. */
.rule .section-title{white-space:nowrap}

/* featured product — feathered accent along the left and top edges */
.feature{
  display:grid;
  grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(18px,2.6vw,32px);
  align-items:center;
  background:var(--paper);
  border-radius:var(--radius);
  padding:clamp(20px,2.8vw,32px);
  margin:0 0 var(--gap);
  /* accent glow spills outward from the left and top edges */
  box-shadow:
    -10px 0 22px -7px rgba(200,135,60,.85),
    0 -10px 22px -7px rgba(200,135,60,.85),
    0 2px 6px rgba(12,30,22,.07),
    0 18px 44px rgba(12,30,22,.12);
}
.feature img{border-radius:10px;width:100%}
.kicker{
  display:inline-block;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rosewood);
  background:var(--honey-soft);
  border-radius:100px;
  padding:4px 12px;
  margin:0 0 10px;
}
.feature__title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.05;
  color:var(--forest);
  margin:0 0 .35em;
}
.feature__spec{font-weight:600;margin:0 0 .5em}
.feature__sell{color:var(--muted);margin:0 0 1.1em}

/* ---------- Promo card (sits alongside the video cards) ----------------- */
.promo{
  display:flex;
  flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:
    -10px 0 22px -7px rgba(6,78,146,.45),
    0 -10px 22px -7px rgba(6,78,146,.45),
    0 2px 6px rgba(12,30,22,.07),
    0 18px 44px rgba(12,30,22,.12);
}
.promo__media img{width:100%}
.promo__body{padding:15px 16px 16px;display:flex;flex-direction:column;flex:1}
/* matches .video-card__title so the four boxes read as a set */
.promo__title{
  font-family:var(--display);
  font-weight:600;
  font-size:1.02rem;
  line-height:1.3;
  color:var(--forest);
  margin:0;
  padding:14px 16px;
  border-bottom:1px solid var(--line-2);
}
.promo__list{list-style:none;margin:0 0 1.1em;padding:0;flex:1}
.promo__list li{
  position:relative;
  padding:0 0 0 20px;
  margin:0 0 .35em;
  font-size:.93rem;
  line-height:1.4;
  color:var(--muted);
}
.promo__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.52em;
  width:9px;
  height:9px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--honey),var(--rosewood));
}

/* videos */
.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:var(--gap);
}
.video-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.video-card__title{
  font-family:var(--display);
  font-weight:600;
  font-size:1.02rem;
  line-height:1.3;
  color:var(--forest);
  margin:0;
  padding:14px 16px;
  border-bottom:1px solid var(--line-2);
}
.video{position:relative;width:100%;aspect-ratio:16 / 9;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Index pages (Mods, Hall of Fame) ---------------------------- */


.index-grid{
  display:grid;
  /* 360px floor puts two cards per row in the main column at desktop width,
     dropping to one on narrow screens and rising to three if space allows */
  grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
  gap:18px;
}
.entry{
  display:flex;
  align-items:stretch;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  text-decoration:none;
  color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.entry:hover{
  transform:translateY(-2px);
  border-color:#CBD6CE;
  box-shadow:0 3px 8px rgba(12,30,22,.10), 0 16px 34px rgba(12,30,22,.15);
}
.entry__media{
  flex:0 0 172px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  background:var(--cream);
  border-right:1px solid var(--line-2);
}
/* thumbnails are 100px native; capped so tall and wide ones carry equal
   visual weight and none is enlarged much beyond 1.6x */
.entry__media img{
  max-width:100%;
  max-height:150px;
  width:auto;
  height:auto;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(12,30,22,.18);
}
.entry__head{
  display:flex;
  align-items:flex-start;
  gap:10px;
  flex:1;
  min-width:0;
  padding:14px 16px;
}
.entry__head .mbar{margin-top:2px}
.entry__text{display:block;min-width:0}
.entry__title{
  display:block;
  font-family:var(--display);
  font-weight:700;
  font-size:1.02rem;
  line-height:1.25;
  color:var(--forest);
}
.entry__sub{
  display:block;
  font-weight:700;
  font-size:.86rem;
  line-height:1.35;
  color:var(--moss);
  margin-top:3px;
}
.entry:hover .entry__title{color:var(--blue);text-decoration:underline}

/* ---------- Build pages (individual mods / hall of fame entries) -------- */

.page-sub{
  font-family:var(--display);
  font-weight:600;
  font-size:1.05rem;
  line-height:1.3;
  color:var(--moss);
  margin:-.5em 0 1.2em;
}
.prose{max-width:66ch;margin:0 0 var(--gap)}
.prose p{margin:0 0 1.1em}

.letter{
  max-width:66ch;
  margin:0 0 var(--gap);
  padding:18px 22px;
  background:var(--blue-soft);
  border-radius:var(--radius);
  border-left:4px solid var(--blue);
  font-size:.97rem;
  line-height:1.6;
  color:#1B3348;
}
.letter p{margin:0 0 .9em}
.letter p:last-child{margin-bottom:0}

/* author's own emphasis, kept from the original pages. <u> is given a
   thinner, offset underline so it does not read as a link. */
.prose u,.letter u,.faq__a u{
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:var(--moss);
}
.prose b,.letter b,.faq__a b{font-weight:700}
/* four of the five <u> tags sit inside links, where the link styling already
   does the job - don't double up */
.prose a u,.letter a u,.faq__a a u,.downloads a u{text-decoration:none;color:inherit}

.gallery{
  display:grid;
  /* never upscales: each photo caps at its own natural width */
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;
  justify-items:center;
  align-items:start;
}
.gallery img{
  max-width:100%;
  height:auto;
  border-radius:10px;
  box-shadow:0 2px 6px rgba(12,30,22,.10), 0 14px 32px rgba(12,30,22,.16);
}

.backlink{
  text-align:center;
  margin:var(--gap) 0 0;
  padding-top:var(--gap);
  border-top:1px solid var(--line);
}
.backlink__arrow{
  display:inline-block;
  margin-right:.5em;
  font-size:1.15em;
  line-height:1;
  transform:translateY(1px);
  transition:transform .14s ease;
}
.backlink a:hover .backlink__arrow{transform:translate(-4px,1px)}

/* ---------- FAQ ------------------------------------------------------------
   Native <details>/<summary>: opens without JavaScript, is keyboard
   accessible, and the closed answers are still in the HTML for search. */
.faq{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  margin:0 0 14px;
  overflow:hidden;
  transition:box-shadow .14s ease, border-color .14s ease;
}
.faq[open]{
  border-color:#CBD6CE;
  box-shadow:0 3px 8px rgba(12,30,22,.09), 0 14px 30px rgba(12,30,22,.13);
}
.faq__q{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:15px 52px 15px 17px;
  position:relative;
  cursor:pointer;
  list-style:none;
  font-family:var(--display);
  font-weight:600;
  font-size:1.02rem;
  line-height:1.35;
  color:var(--forest);
}
.faq__q::-webkit-details-marker{display:none}   /* replaced by the chevron */
.faq__q:hover{color:var(--blue);background:#FBFAF7}
.faq__q .mbar{margin-top:1px}
/* chevron, drawn in CSS so there is no image to load */
.faq__q::after{
  content:"";
  position:absolute;
  right:20px;
  top:1.35em;
  width:10px;
  height:10px;
  border-right:2.5px solid var(--moss);
  border-bottom:2.5px solid var(--moss);
  transform:translateY(-4px) rotate(45deg);
  transition:transform .18s ease;
}
.faq[open] .faq__q::after{transform:translateY(0) rotate(-135deg)}
.faq__a{
  padding:2px 20px 18px 17px;
  border-top:1px solid var(--line-2);
  margin-top:-1px;
}
.faq__a p{margin:1em 0 0}
.faq__a p:first-child{margin-top:1em}

/* downloads box, floated beside the questions */
.downloads{
  float:right;
  width:250px;
  margin:0 0 20px 26px;
  background:var(--moss-soft);
  border:1px solid #BFD9C8;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:16px 18px;
}
.downloads__title{
  font-family:var(--display);
  font-weight:700;
  font-size:1rem;
  color:var(--forest);
  margin:0 0 .6em;
}
.downloads ul{margin:0;padding-left:1.1em}
.downloads li{margin-bottom:.45em;font-size:.9rem;line-height:1.4}

@media (prefers-reduced-motion:reduce){
  .faq,.faq__q::after{transition:none}
}

/* ---------- Pages without rails (confirmations, policies) --------------- */
.layout--plain{grid-template-columns:minmax(0,1fr);max-width:880px}

.notice{
  border-radius:var(--radius);
  padding:16px 20px;
  margin:0 0 18px;
}
.notice__title{
  font-family:var(--display);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.01em;
  margin:0 0 .35em;
}
.notice p:last-child{margin-bottom:0}
/* the one thing they must still do */
.notice--action{
  background:#FFF6E6;
  border:1px solid #E8C98A;
  box-shadow:-10px 0 22px -7px rgba(200,135,60,.75),
              0 -10px 22px -7px rgba(200,135,60,.75),
              0 2px 6px rgba(12,30,22,.07);
}
.notice--action .notice__title{color:var(--rosewood);text-transform:uppercase}
.notice--tip{background:var(--blue-soft);border:1px solid #B9D3E9}
.notice--tip .notice__title{color:var(--blue)}

.signoff{margin:2em 0 1.4em}
.signoff img{border-radius:4px}
.signoff__creds{
  font-family:var(--body);
  font-size:.9rem;
  line-height:1.45;
  color:var(--muted);
  margin:.5em 0 0;
}
.signoff--centre{text-align:center}
.signoff--centre img{margin-inline:auto}
.signoff__enjoy{
  font-family:var(--display);
  font-weight:700;
  font-size:1.15rem;
  color:var(--forest);
  margin:0 0 .5em;
}
.promo-banner{
  text-align:center;
  border-top:1px solid var(--line);
  padding-top:26px;
  margin:0 0 1.6em;
}
.promo-banner img{margin-inline:auto;border-radius:8px;box-shadow:var(--shadow-sm)}
.postal{
  font-style:normal;
  font-size:.82rem;
  line-height:1.6;
  color:var(--muted);
  text-align:center;
}

/* ---------- Links directory --------------------------------------------- */
.linkgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
  gap:18px;
}
.linkcard{
  display:flex;
  align-items:stretch;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.linkcard:hover{
  transform:translateY(-2px);
  border-color:#CBD6CE;
  box-shadow:0 3px 8px rgba(12,30,22,.10), 0 16px 34px rgba(12,30,22,.15);
}
.linkcard__media{
  flex:0 0 150px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  background:var(--cream);
  border-right:1px solid var(--line-2);
}
.linkcard__media img{max-width:100%;max-height:130px;width:auto;height:auto;border-radius:6px}
.linkcard__body{padding:15px 17px;min-width:0}
.linkcard__title{
  font-family:var(--display);
  font-weight:700;
  font-size:1.02rem;
  line-height:1.25;
  margin:0 0 .4em;
}
.linkcard__title a{color:var(--forest);text-decoration:none}
.linkcard:hover .linkcard__title a{color:var(--blue);text-decoration:underline}
.linkcard__desc{font-size:.9rem;line-height:1.5;color:var(--muted);margin:0 0 .6em}
.linkcard__domain{margin:0;font-size:.86rem;font-weight:600}
.linkcard__domain a{color:var(--moss);text-decoration:none}
.linkcard__domain a:hover{text-decoration:underline}

/* ---------- Policy / disclaimer documents ------------------------------- */
.sites-strip{
  text-align:center;
  font-family:var(--display);
  font-weight:700;
  font-size:1.02rem;
  color:var(--rosewood);
  letter-spacing:.01em;
  margin:0 0 1em;
}
.doc-date{
  font-size:.86rem;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  padding-bottom:1em;
  margin:0 0 1.4em;
}
.doc-heading{
  font-family:var(--display);
  font-weight:700;
  font-size:1.15rem;
  color:var(--forest);
  margin:1.6em 0 .5em;
}
.doc-list{margin:0 0 1.1em;padding-left:1.2em}
.doc-address{
  font-style:normal;
  line-height:1.6;
  background:var(--moss-soft);
  border-radius:10px;
  padding:14px 18px;
  margin:0 0 1.2em;
  display:inline-block;
}
.doc-list li{margin-bottom:.25em}

/* ---------- Footer ------------------------------------------------------ */
.footer{background:var(--forest);color:#C2D8CB}
.footer__inner{
  max-width:var(--shell);
  margin-inline:auto;
  padding:13px var(--pad);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:2px 0;
  text-align:center;
  font-size:.9rem;
}
.footer a{color:#fff;text-decoration:none;white-space:nowrap}
.footer a:hover{color:#F6D79A;text-decoration:underline}
.footer .sep{color:#3E6B54;padding:0 10px}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  .layout{grid-template-columns:var(--rail-l) minmax(0,1fr)}
  .rail--right{grid-column:1 / -1;position:static;max-height:none;overflow:visible}
  .rail--right .card__body{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 26px}
}
@media (max-width:980px){
  .hero__inner{grid-template-columns:1fr;gap:16px}
  .subscribe{max-width:430px}
}
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .rail{position:static;max-height:none;overflow:visible}
  .rail--left{order:3}
  .rail--right{order:4}
  .rail--left .card__body{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 26px}
  .feature{grid-template-columns:1fr}
}
@media (max-width:520px){
  body{font-size:16px}
  .downloads{float:none;width:auto;margin:0 0 20px}
  .index-grid,.linkgrid{grid-template-columns:1fr}
  .linkcard__media{flex-basis:112px}
  .entry__media{flex-basis:126px}
  .subscribe__fields{grid-template-columns:1fr}
  .subscribe__foot{flex-direction:column;align-items:stretch;gap:8px}
  .subscribe__privacy{max-width:none;text-align:center}
  .footer .sep{display:none}
  .footer__inner{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}
@media print{
  body{background:#fff}
  .hero{background:#fff;color:#000;padding:0 0 12pt}
  .brand__name,.hero__tag{color:#000;text-shadow:none}
  .subscribe,.rail,.footer,.pipe{display:none}
  .layout{display:block;padding:0}
  .card,.feature,.video-card{box-shadow:none;border:1pt solid #999}
}

/* ===========================================================================
   BUILDAMARIMBA — the building-guide sales pages.
   Same components as the rest of the site, re-themed: deep blue structure,
   dark red for emphasis and prices, pure white body.
   =========================================================================== */
.theme-guides{
  --forest:#1B3160;        /* deep blue: headings, rail heads, footer   */
  --forest-2:#26437A;
  --moss:#3C74B8;          /* mid blue                                   */
  --moss-soft:#EAF0F9;
  --blue:#1F5FA8;          /* links                                      */
  --blue-2:#2E7FCE;
  --blue-soft:#E9F1FA;
  --rosewood:#8E1B23;      /* dark red: prices, emphasis                 */
  --honey:#B3242E;
  --honey-soft:#FBEDEE;
  --cream:#FFFFFF;         /* pure white body                            */
  --line:#DCE3EE;
  --line-2:#EDF1F7;
  --ink:#1A2230;
  --muted:#5A6577;
  background:var(--paper);
  padding-bottom:58px;     /* clears the pinned footer bar               */
}

/* --- header band --- */
.ghero{
  background:linear-gradient(100deg,#182C50 0%, #1B3160 60%, #223B67 100%);
  color:#fff;
  padding:9px clamp(14px,3vw,34px);
}
.ghero__inner{max-width:1500px;margin-inline:auto;display:flex;align-items:center;gap:8px clamp(12px,2vw,24px);flex-wrap:wrap}
.ghero__brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto}
.ghero__brand .mbar{--h:17px}
.ghero__brand span:last-child{
  font-family:var(--body);font-weight:600;font-size:.86rem;letter-spacing:.05em;
  text-transform:uppercase;color:#AFC3DE;
}
.ghero__brand:hover span:last-child{color:#fff}
.ghero__head{
  font-family:var(--body);font-weight:400;
  font-size:.86rem;line-height:1.4;
  color:#C8D6E8;margin:0;flex:1 1 320px;
}

/* --- two column layout, rail sticks --- */
.layout--guides{grid-template-columns:236px minmax(0,1fr)}
.rail--guides{top:16px;max-height:calc(100vh - 90px)}

/* --- the eight guide links in the rail --- */
.gnav{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gnav a{
  display:block;text-align:center;text-decoration:none;color:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:8px 6px;background:var(--paper);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.gnav a:hover{transform:translateY(-2px);border-color:#B9C8DE;box-shadow:0 6px 16px rgba(20,40,80,.16)}
.gnav img{width:100%;height:auto;border-radius:6px;margin-bottom:5px}
.gnav span{display:block;font-size:.74rem;font-weight:700;line-height:1.25;color:var(--forest)}
.gnav .price{display:block;font-size:.74rem;font-weight:700;color:var(--rosewood);margin-top:1px}
.gnav__note{
  font-family:var(--display);font-weight:600;font-size:.84rem;line-height:1.35;
  color:var(--blue);text-align:center;margin:12px 0 0;
}

/* --- pinned footer bar --- */
.footerbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--forest);
  border-top:3px solid var(--rosewood);
  box-shadow:0 -4px 18px rgba(10,20,40,.28);
}
.footerbar__inner{
  max-width:1500px;margin-inline:auto;padding:9px clamp(12px,3vw,40px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:2px 0;text-align:center;font-size:.84rem;
}
.footerbar a{color:#DCE7F5;text-decoration:none;white-space:nowrap}
.footerbar a:hover{color:#fff;text-decoration:underline}
.footerbar .sep{color:#4A6390;padding:0 9px}

/* --- price suffix --- */
.usd{font-size:.72em;font-weight:600;opacity:.75;margin-left:.25em;white-space:nowrap}

/* --- tick-box "does this apply to you" list --- */
.applies{list-style:none;margin:0 0 1.6em;padding:0}
.applies li{
  position:relative;padding:12px 14px 12px 46px;margin:0 0 10px;
  background:var(--blue-soft);border:1px solid #CBDCEF;border-radius:10px;line-height:1.5;
}
.applies li::before{
  content:"";position:absolute;left:15px;top:1.05em;width:15px;height:15px;
  border:2px solid var(--moss);border-radius:3px;background:var(--paper);
}

/* --- bordered figure with caption --- */
.figbox{
  float:right;width:320px;margin:0 0 20px 26px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);box-shadow:var(--shadow-sm);padding:12px;text-align:center;
}
.figbox img{margin:0 auto 8px;border-radius:8px}
.figbox figcaption{font-size:.84rem;font-style:italic;line-height:1.4;color:var(--forest)}
.figbox--narrow{width:272px}

/* --- product grid with prices --- */
.pricerow{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:14px;margin:0 0 1.6em;
}
.pricerow a{
  display:block;text-align:center;text-decoration:none;
  border:1px solid var(--line);border-radius:var(--radius);padding:10px;
  background:var(--paper);box-shadow:var(--shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease;
}
.pricerow a:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(20,40,80,.18)}
.pricerow img{width:100%;height:auto;border-radius:8px;margin-bottom:7px}
.pricerow b{display:block;font-size:1rem;color:var(--rosewood)}

/* --- order list --- */
.buylist{margin:0 0 1.6em}
.buyitem{
  display:grid;grid-template-columns:118px minmax(0,1fr);gap:18px;align-items:center;
  border:1px solid var(--line);border-left:4px solid var(--moss);
  border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow-sm);
  padding:14px 18px;margin:0 0 12px;
}
.buyitem img{width:100%;height:auto;border-radius:8px}
.buyitem__name{font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1.3;margin:0 0 .3em}
.buyitem__name a{color:var(--forest);text-decoration:none}
.buyitem:hover .buyitem__name a{color:var(--blue);text-decoration:underline}
.buyitem__price{font-weight:700;color:var(--rosewood);margin:0}
.buyitem--total{border-left-color:var(--rosewood);background:var(--honey-soft)}

/* --- bonus panels --- */
.bonusbox{
  border:1px solid #C6D6EA;border-radius:var(--radius);
  background:var(--blue-soft);padding:clamp(16px,3vw,26px);margin:0 0 1.6em;
}
.bonusbox--alt{background:var(--moss-soft)}
.bonusbox__title{
  font-family:var(--display);font-weight:700;text-align:center;
  font-size:clamp(1.1rem,2.6vw,1.4rem);line-height:1.25;color:var(--forest);margin:0 0 .5em;
}
.bonusbox__value{text-align:center;font-weight:700;color:var(--rosewood);margin:0 0 1em}
.plus{
  text-align:center;font-family:var(--display);font-weight:700;
  font-size:1.3rem;color:var(--rosewood);margin:0 0 1em;
}
.pkg-list{list-style:none;margin:0;padding:0}
.pkg-list li{
  display:flex;align-items:center;gap:16px;
  padding:9px 0;border-bottom:1px solid #D6E2F0;font-weight:600;
}
.pkg-list li:last-child{border-bottom:0}
.pkg-list img{flex:0 0 auto;width:78px;height:auto;border-radius:8px}

/* --- big call to action --- */
.gcta{text-align:center;margin:0 0 1.8em}
.gcta .btn{
  background:linear-gradient(180deg,#B3242E,#8E1B23);
  box-shadow:0 2px 0 #5F1017, 0 8px 22px rgba(142,27,35,.30);
}
.gcta .btn:hover{box-shadow:0 3px 0 #5F1017, 0 12px 28px rgba(142,27,35,.36)}

/* --- value callout --- */
.valueline{
  text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:18px 10px;margin:0 0 1.6em;font-size:1.06rem;line-height:1.6;
}
.valueline b{color:var(--rosewood)}
.valueline .big{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.4rem,3.4vw,2rem);color:var(--rosewood);margin:.15em 0;
}

@media (max-width:900px){
  .layout--guides{grid-template-columns:1fr}
  .rail--guides{position:static;max-height:none;order:-1}
  .gnav{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
  .figbox,.figbox--narrow{float:none;width:auto;max-width:340px;margin:0 auto 20px}
  .buyitem{grid-template-columns:90px minmax(0,1fr);gap:14px}
}
@media (max-width:520px){
  .footerbar__inner{font-size:.78rem;gap:0 4px}
  .footerbar .sep{display:none}
  .theme-guides{padding-bottom:74px}
}

/* --- guides page: lead paragraphs and highlight --- */
.theme-guides .lead-strong{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.06rem,2.4vw,1.28rem);line-height:1.45;
  color:var(--ink);margin:0 0 1em;
}
.theme-guides .lead-blue{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.08rem,2.6vw,1.36rem);line-height:1.4;
  color:var(--blue);background:var(--blue-soft);
  border-left:4px solid var(--moss);border-radius:10px;
  padding:16px 20px;margin:0 0 1.4em;
}
.theme-guides mark{
  background:linear-gradient(180deg,#FFF27A,#FFE23D);
  color:inherit;padding:0 .18em;border-radius:3px;
}
.theme-guides .figbox img + img{margin-top:10px}
.theme-guides .page-title{margin-bottom:.6em}
.theme-guides .contact-box{background:var(--blue-soft);border-color:#C6D6EA}
.theme-guides .card__head{background:var(--forest)}
.theme-guides .guarantee{border-top-color:var(--rosewood)}
.theme-guides .guarantee__title u{text-decoration-color:var(--rosewood)}

/* --- utilities and the guarantee panel (used by the guides pages) --- */
.clearfix::after{content:"";display:block;clear:both}
.section-title--navy{color:var(--forest)}

.guarantee{
  max-width:640px;
  margin-inline:auto;
  background:var(--paper);
  border:1px solid var(--line);
  border-top:5px solid var(--moss);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(22px,4vw,36px);
  text-align:center;
}
.guarantee__title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.15rem,2.8vw,1.45rem);
  color:var(--forest);
  margin:0 0 .35em;
}
.guarantee__sub{font-style:italic;color:var(--muted);margin:0 0 1.2em}
.guarantee img{margin:0 auto 1.3em;border-radius:8px}
.guarantee p{text-align:left}
p.guarantee__title,p.guarantee__sub{text-align:center}
.guarantee__close{
  text-align:center;
  font-weight:700;
  border-top:1px solid var(--line);
  margin:1.3em 0 0;
  padding-top:1.2em;
}

/* ===========================================================================
   Guides page refinements
   =========================================================================== */

/* 5. prices read as good news, not a warning */
.theme-guides{--price:#15803D}
.theme-guides .gnav .price,
.theme-guides .buyitem__price,
.theme-guides .bonusbox__value,
.theme-guides .valueline .big,
.theme-guides .valueline b{color:var(--price)}

/* 3. video sits inline with the copy rather than dominating the section */
.theme-guides .bonusbox .video{max-width:480px;margin-inline:auto;border-radius:10px;box-shadow:var(--shadow-sm)}
.theme-guides .bonusbox--video{max-width:560px;margin-inline:auto}

/* 4. breathing room between the sticky rail and the body copy */
.layout--guides main > section{padding-left:clamp(0px,2.4vw,32px)}

/* 6. the "best value" arrow is a hand drawing, not a framed image */
.arrow-note{
  float:right;
  width:150px;
  height:auto;
  margin:-6px -8px 8px 14px;
  border-radius:0;
  box-shadow:none;
}

@media (max-width:900px){
  .layout--guides main > section{padding-left:0}
  .arrow-note{width:120px;margin:0 0 8px 12px}
}

/* --- opening arrangement: cover left, headline right; instrument column
       floats right beneath it with the copy running down its left --- */
.herorow{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:clamp(16px,2.6vw,28px);
  align-items:center;
  margin:0 0 1.4em;
}
.herorow img{width:100%;height:auto;border-radius:10px}
.herorow .page-title{margin:0}

.sidecol{
  float:right;
  width:344px;
  margin:0 0 22px 30px;
  text-align:center;
}
.sidecol img{max-width:100%;height:auto;margin:0 auto 14px;border-radius:10px}
.sidecol .contact-box{float:none;width:auto;max-width:none;margin:0}

/* contact box keeps the original lead-in wording */
.contact-box__lead{
  font-weight:700;
  font-size:.94rem;
  line-height:1.35;
  color:var(--forest);
  margin:0 0 .5em;
}
.theme-guides .contact-box{float:right;width:250px;margin:0 0 18px 24px}
.theme-guides .sidecol .contact-box{float:none;width:auto;margin:0}

@media (max-width:900px){
  .herorow{grid-template-columns:1fr;justify-items:center;text-align:center}
  .herorow img{max-width:300px}
  .sidecol{float:none;width:auto;max-width:344px;margin:0 auto 22px}
  .theme-guides .contact-box{float:none;width:auto;max-width:300px;margin:0 auto 18px}
}

/* ===========================================================================
   Guides page: float behaviour, pipe spacing, arrow size
   =========================================================================== */

/* pipes need air around them */
.theme-guides main .pipe{margin:clamp(30px,4.4vw,52px) 0}
.theme-guides main .pipe--thin{margin:clamp(26px,3.6vw,44px) 0}

/* A block with a background will slide UNDER a float unless it establishes
   its own formatting context. These sit beside the instrument column. */
.theme-guides .applies,
.theme-guides .lead-blue,
.theme-guides .valueline,
.theme-guides .bonusbox{display:flow-root}

/* headshot column: figure on top, contact box beneath it */
.sidecol--narrow{width:288px}
.sidecol .figbox,
.sidecol .figbox--narrow{float:none;width:auto;margin:0 0 14px}

/* the arrow was being stretched by the generic .buyitem img rule */
.buyitem img.arrow-note{
  width:150px;
  max-width:45%;
  height:auto;
  border-radius:0;
  box-shadow:none;
  float:right;
  margin:-6px -8px 8px 14px;
}

@media (max-width:900px){
  .sidecol--narrow{width:auto;max-width:288px}
  .buyitem img.arrow-note{width:110px;margin:0 0 8px 12px}
}

/* ===========================================================================
   Guides page: contact boxes and the order list
   =========================================================================== */

/* contact boxes: larger, well padded, outlined and lifted off the page */
.theme-guides .contact-box{
  width:272px;
  padding:22px 24px 20px;
  border:2px solid #24406F;
  border-radius:14px;
  background:var(--blue-soft);
  box-shadow:0 3px 0 rgba(27,49,96,.16), 0 14px 30px rgba(20,40,80,.24);
}
.theme-guides .contact-box__lead{font-size:1rem;line-height:1.4;margin:0 0 .7em}
.theme-guides .contact-box p:last-child{font-size:1.02rem;font-weight:700}
.theme-guides .sidecol .contact-box{width:auto}
@media (max-width:900px){
  .theme-guides .contact-box{width:auto;max-width:300px;padding:20px 22px}
}

/* order list: the seven individual guides sit on pink, the package stands
   out in white - which also lets the hand-drawn arrow sit on its own ground */
.theme-guides .buyitem{
  background:var(--honey-soft);
  border-left-color:var(--rosewood);
}
.theme-guides .buyitem--total{
  background:var(--paper);
  border-left-color:var(--moss);
}

/* order list matches the reading width of the body copy, which also pulls the
   hand-drawn arrow in close to the package link instead of stranding it */
.theme-guides .buylist{max-width:66ch}

/* --- P524 page: a few extra pieces --- */
.figbox--plain{float:none;width:auto;margin:0;border:0;background:none;box-shadow:none;padding:0}
.figbox--plain img{width:100%;height:auto;border-radius:10px}
.figbox--plain figcaption{
  font-family:var(--display);font-weight:600;font-style:normal;
  font-size:.94rem;color:var(--rosewood);margin-top:8px;text-align:center;
}
.theme-guides .herorow{grid-template-columns:minmax(0,520px) minmax(0,1fr);align-items:center}

.sidenote{
  float:right;width:300px;margin:0 0 20px 26px;
  background:#DFF3F8;border:2px solid #7CD5E4;border-radius:var(--radius);
  padding:18px 20px;color:var(--rosewood);text-align:center;
  box-shadow:var(--shadow-sm);
}
.sidenote__title{font-family:var(--display);font-weight:700;margin:0 0 .5em}
.sidenote p:last-child{margin:0;font-size:.94rem;line-height:1.5;text-align:left}

.applies-intro{color:var(--rosewood);text-align:center;margin:0 0 1.1em}

.part-tag{
  display:inline-block;font-family:var(--display);font-weight:700;
  font-size:1.15em;color:var(--rosewood);
  background:linear-gradient(180deg,#FFF27A,#FFE23D);
  border-radius:5px;padding:1px 10px;margin-right:.3em;
}
.part-line{font-weight:600;line-height:1.55}

.pricetag{color:var(--price)}
.gcta__price{display:block;margin-top:.7em;font-family:var(--display);font-weight:700;font-size:1.15rem}
.gcta__price a{color:var(--price);text-decoration:none}
.gcta__price a:hover{text-decoration:underline}

@media (max-width:900px){
  .theme-guides .herorow{grid-template-columns:1fr}
  .sidenote{float:none;width:auto;max-width:340px;margin:0 auto 20px}
}

/* --- P524: wider letter blocks, larger pull line, bigger inline photo --- */
.prose--wide{max-width:none}

.valueline--big{
  font-family:var(--display);
  font-size:clamp(1.15rem,2.8vw,1.55rem);
  line-height:1.4;
  color:var(--forest);
  padding:24px 14px;
}
.valueline--big b{color:var(--rosewood);font-weight:700}

.figright{
  float:right;
  width:450px;
  max-width:48%;
  height:auto;
  margin:6px 0 16px 28px;
  border-radius:10px;
}
@media (max-width:900px){
  .figright{float:none;width:auto;max-width:450px;margin:0 auto 18px}
}

/* --- P524 hero: larger picture, headline beside it, second headline below --- */
.herorow__h1{text-align:center;margin:0}
.herorow__h2{
  text-align:center;
  color:#15803D;
  margin:0 0 1.1em;
}
.herorow__h2 u{text-decoration-color:#15803D}
@media (max-width:900px){
  .herorow__h1{margin-top:.4em}
}

/* --- P3: testimonial aside and the sound-comparison pair --- */
.testimonial-box{
  float:right;width:262px;margin:0 0 20px 26px;
  background:var(--moss-soft);border:2px solid var(--moss);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:16px 18px;
}
.testimonial-box__title{
  font-family:var(--display);font-weight:700;font-size:1.05rem;
  color:var(--rosewood);text-align:center;margin:0 0 .6em;
}
.testimonial-box img{width:100%;height:auto;border-radius:8px;margin:0 0 12px}
.testimonial-box p{font-size:.86rem;font-style:italic;line-height:1.5;color:#22364F;margin:0 0 .7em}
.testimonial-box p:last-child{margin:0;font-style:normal;font-weight:700}

.compare{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;margin:1.4em 0 0;
}
.compare__col{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);box-shadow:var(--shadow-sm);padding:14px;
}
.compare__label{font-size:.88rem;font-weight:600;line-height:1.4;color:var(--forest);margin:0 0 .7em}
.compare .video{border-radius:8px;overflow:hidden}

@media (max-width:900px){
  .testimonial-box{float:none;width:auto;max-width:300px;margin:0 auto 20px}
}

/* P3 hero picture at 80% of the standard column width */
.theme-guides .herorow--sm{grid-template-columns:minmax(0,416px) minmax(0,1fr)}
@media (max-width:900px){
  .theme-guides .herorow--sm{grid-template-columns:1fr}
}

/* --- P2: numbered design-feature labels, resonator figures, single compare --- */
.step-num{color:var(--blue);font-weight:700}

.introducing{
  text-align:center;font-family:var(--display);font-weight:700;
  letter-spacing:.16em;font-size:.9rem;color:var(--rosewood);margin:0 0 .3em;
}

.resfig{
  border:2px solid var(--moss);border-radius:var(--radius);
  background:var(--paper);box-shadow:var(--shadow-sm);
  padding:12px;margin:0 0 18px;width:238px;text-align:center;
}
.resfig figcaption{
  font-family:var(--display);font-weight:700;font-size:.95rem;
  color:var(--rosewood);margin:0 0 8px;
}
.resfig img{width:100%;height:auto;border-radius:6px}
.resfig--left{float:left;margin-right:26px}
.resfig--right{float:right;margin-left:26px}

.compare--one{grid-template-columns:minmax(0,340px);justify-content:center}

@media (max-width:900px){
  .resfig--left,.resfig--right{float:none;margin:0 auto 18px}
}

/* --- product title line above the hero --- */
.product-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.25rem,2.5vw,1.55rem);
  letter-spacing:.03em;
  color:var(--rosewood);
  margin:0 0 clamp(20px,3vw,32px);
}
/* when it sits beside the hero picture it introduces the headline directly */
.herorow__copy .product-line{margin-bottom:.7em}
/* sit the text at the top of the row rather than centred against the photo */
.herorow__copy{min-width:0;align-self:start}

/* --- floated body photos: width comes from the width attribute --- */
.bodyfig-l,.bodyfig-r{height:auto;max-width:52%;border-radius:10px}
.bodyfig-l{float:left;margin:6px 26px 16px 0}
.bodyfig-r{float:right;margin:6px 0 16px 26px}
@media (max-width:900px){
  .bodyfig-l,.bodyfig-r{float:none;max-width:100%;margin:0 auto 18px}
}

/* --- P1: jump links, savings table, lead-in line --- */
.jumpline{
  text-align:center;
  font-family:var(--display);
  font-weight:600;
  font-size:1.05rem;
  margin:1.4em 0;
}
.jumpline a{color:var(--blue);text-decoration:none;border-bottom:2px solid rgba(31,95,168,.28)}
.jumpline a:hover{color:var(--forest);border-bottom-color:var(--forest)}

.hereis{font-size:1.12rem;margin-bottom:.6em}

.tablewrap{overflow-x:auto;margin:0 0 1.6em}
.savetable{
  border-collapse:collapse;
  width:100%;
  min-width:620px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  font-size:.92rem;
}
.savetable th{
  background:var(--forest);
  color:#fff;
  font-family:var(--display);
  font-weight:600;
  font-size:.86rem;
  line-height:1.3;
  text-align:left;
  padding:11px 12px;
  vertical-align:bottom;
}
.savetable td{padding:10px 12px;border-top:1px solid var(--line-2)}
.savetable tbody tr:nth-child(even){background:var(--blue-soft)}
.savetable td:first-child{font-weight:700;color:var(--forest)}
.savetable .save{font-weight:700;color:var(--price)}
.tablewrap__note{font-size:.82rem;color:var(--muted);margin:.6em 0 0;text-align:right}

/* --- upsell note after the savings table --- */
.upsell{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:22px 10px;
  margin:0 0 1.8em;
  text-align:center;
}
.upsell__head{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.2rem,2.8vw,1.6rem);
  line-height:1.3;
  color:var(--price);
  margin:0 0 .45em;
}
.upsell__body{
  font-size:1.02rem;
  line-height:1.55;
  color:var(--price);
  margin:0;
}
.upsell__body a{color:var(--price);font-weight:700}
.upsell__body a:hover{color:var(--forest)}

/* --- schools page: narrow hero column, instrument line-up --- */
.theme-guides .herorow--narrow{grid-template-columns:minmax(0,200px) minmax(0,1fr)}

.lineup{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:20px;
  align-items:end;
  margin:0 0 1.8em;
}
.lineup figure{margin:0;text-align:center}
.lineup img{max-width:100%;height:auto;margin:0 auto 10px;border-radius:8px}
.lineup figcaption{
  font-family:var(--display);
  font-weight:700;
  font-size:.92rem;
  line-height:1.3;
  color:var(--forest);
}

.nowyoucan{
  text-align:center;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.5rem,4vw,2.2rem);
  line-height:1.2;
  color:var(--rosewood);
  margin:0 0 1.4em;
}

@media (max-width:900px){
  .theme-guides .herorow--narrow{grid-template-columns:1fr}
}

/* ===========================================================================
   Percussion Keys masthead - kept as the original looked, but responsive
   =========================================================================== */
.pkeys{max-width:900px;margin:0 0 1.6em;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.pkeys__bar{
  background:url("images/header_top_bg.jpg") left center/cover no-repeat, #10305C;
  padding:12px 20px 12px 50px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 40px;
}
.pkeys__name{
  font-family:var(--body);font-weight:700;
  font-size:clamp(1.6rem,4vw,2.5rem);line-height:1.1;color:#46A3FF;
}
.pkeys__tag{font-family:var(--body);font-weight:700;font-size:clamp(.9rem,1.8vw,1.25rem);color:#fff}
.pkeys__hero{width:100%;height:auto;display:block}
.pkeys__menu{
  background:url("images/menu_bg.jpg") center/cover no-repeat, #1B3160;
  padding:6px 12px;
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;
}
.pkeys__menu span{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--body);font-weight:700;font-size:.72rem;color:#fff;letter-spacing:.01em;
}
.pkeys__menu img{width:13px;height:13px}
.pkeys__body{background:var(--paper);padding:clamp(16px,3vw,26px) clamp(16px,3.4vw,34px)}
.pkeys__just{text-align:center;margin:0 0 1em}
.pkeys__just img{margin-inline:auto;max-width:100%;height:auto}
.pkeys__note{font-style:italic;font-size:.82rem;color:var(--muted)}
.pkeys__h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.15rem,2.6vw,1.5rem);line-height:1.3;
  color:var(--forest);text-align:center;margin:0 0 1.4em;
}
.pkeys__ticks{
  float:right;width:350px;margin:0 0 18px 26px;
  background:#FFDDBB;border-radius:var(--radius);padding:16px 18px;
}
.pkeys__ticks ul{list-style:none;margin:0;padding:0}
.pkeys__ticks li{display:flex;gap:14px;align-items:flex-start;padding:9px 0}
.pkeys__ticks img{flex:0 0 auto;width:50px;height:auto}
.pkeys__ticks span{font-weight:700;font-size:.92rem;line-height:1.4;color:#12409B}

/* filmstrip caption */
.filmstrip{text-align:center;margin:0 0 1.6em}
.filmstrip img{margin-inline:auto;max-width:100%;height:auto;border-radius:10px}
.filmstrip figcaption{font-weight:700;color:var(--forest);margin-top:.7em}

/* blue-tick benefit list */
.ticklist{list-style:none;margin:0 0 1.6em;padding:0}
.ticklist li{display:flex;gap:14px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line-2)}
.ticklist li:last-child{border-bottom:0}
.ticklist img{flex:0 0 auto;width:30px;height:auto;margin-top:2px}
.ticklist .pricetag{font-size:1.1rem;font-weight:700}

.bonussplit{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:start}
.bonussplit img{width:100%;height:auto;border-radius:10px}

@media (max-width:900px){
  .pkeys__ticks{float:none;width:auto;margin:0 0 20px}
  .bonussplit{grid-template-columns:1fr}
  .bonussplit img{max-width:150px}
}

/* --- PV page: dark testimonial cards, supplier price panel, cost table --- */
.quotecard{
  float:right;width:320px;margin:0 0 22px 28px;
  background:#400000;border:1px solid #C0332F;border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:18px 20px;color:#fff;
}
.quotecard--left{float:left;margin:0 28px 22px 0}
.quotecard__title{
  font-family:var(--display);font-weight:700;font-size:1.1rem;
  color:#FFD84D;text-align:center;margin:0 0 .7em;
}
.quotecard__intro{font-size:.88rem;line-height:1.5;color:#F2E9E9;margin:0 0 .9em}
.quotecard img{width:100%;height:auto;border-radius:8px;margin:0 0 .9em}
.quotecard__quote{font-size:.88rem;font-style:italic;line-height:1.55;color:#FFD84D;margin:0 0 .8em}
.quotecard__by{font-size:.86rem;font-weight:700;text-align:right;color:#fff;margin:0}

.compare-prices{
  float:right;width:290px;margin:0 0 22px 28px;
  background:#050033;border:1px solid #C0332F;border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:18px 20px;
}
.compare-prices__title{
  font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.35;
  color:#FFD84D;text-align:center;margin:0 0 .9em;
}
.compare-prices p{margin:0 0 .9em;font-size:.9rem;line-height:1.45}
.compare-prices p:last-child{margin:0}
.compare-prices a{color:#fff;text-decoration:none}
.compare-prices a:hover{color:#FFD84D;text-decoration:underline}

.savetable--costs{min-width:0;max-width:460px}
.savetable--costs td:last-child{text-align:right;white-space:nowrap;font-weight:600}
.savetable--costs .total td{border-top:2px solid var(--line);font-weight:700;color:var(--price)}

.askline{
  text-align:center;
  font-family:var(--display);
  font-size:clamp(1.05rem,2.4vw,1.25rem);
  line-height:1.35;
  color:var(--rosewood);
  margin:1.8em 0 1em;
}

@media (max-width:900px){
  .quotecard,.quotecard--left,.compare-prices{float:none;width:auto;max-width:340px;margin:0 auto 22px}
}

/* both hero headings stacked beside the photo, with air between them */
.herorow__h2--inline{margin:.9em 0 0}

/* ===========================================================================
   Making Mallets - full-width pages, no rail
   =========================================================================== */
.layout--wide{max-width:1080px}
.layout--wide .section-title{margin-bottom:1.7em}
/* grid items won't shrink below their content unless told to; without this a
   wide table or a long unbroken string forces a horizontal page scrollbar */
.layout > *{min-width:0}

.mhero{
  background:
    linear-gradient(180deg, rgba(12,22,48,.55) 0%, rgba(12,22,48,.15) 42%, rgba(12,22,48,.35) 100%),
    url("images/mallets_header.jpg") center center/100% auto no-repeat,
    #1B3160;
  padding:clamp(10px,1.6vw,16px) clamp(14px,3vw,34px) clamp(12px,1.8vw,18px);
}
.mhero__inner{
  max-width:1080px;margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2vw,18px);
}
.mhero__wordmark{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.15rem,3vw,1.9rem);
  letter-spacing:.18em;
  line-height:1;
  color:rgb(0,0,173);
  margin:0;
  padding:2px 0;
}
.mhero__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.mhero__nav a{
  display:block;
  backdrop-filter:blur(2px);
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(.9rem,1.9vw,1.1rem);
  line-height:1.25;
  text-align:center;
  text-decoration:none;
  color:#fff;
  background:rgba(10,18,40,.62);
  border:2px solid rgba(255,255,255,.52);
  border-radius:12px;
  padding:13px 22px;
  max-width:330px;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.mhero__nav a:hover{transform:translateY(-2px);background:rgba(255,255,255,.20);border-color:#fff;color:#fff}
.mhero__nav a.is-current{
  background:linear-gradient(180deg,#C0332F,#8E1B23);
  border-color:#E8797A;
  box-shadow:0 3px 0 #5F1017, 0 10px 24px rgba(142,27,35,.4);
}

.bigclaim{
  text-align:center;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.2rem,2.9vw,1.65rem);
  line-height:1.3;
  margin:1em 0 0;
}
.asterisk{font-size:.6em;color:var(--ink);text-decoration:none;vertical-align:super}

.discover{list-style:none;margin:0 0 1.6em;padding:0;display:flow-root}
.discover li{
  position:relative;
  padding:11px 14px 11px 40px;
  margin:0 0 9px;
  background:var(--blue-soft);
  border:1px solid #CBDCEF;
  border-radius:10px;
  font-weight:700;
  line-height:1.5;
  color:var(--blue);
}
.discover li::before{
  content:"";position:absolute;left:15px;top:1.15em;
  width:11px;height:11px;border-radius:50%;background:var(--moss);
}
.discover .pg{color:var(--price);white-space:nowrap}

.compare-prices__diy{color:#5FE39A;font-weight:700;font-size:.95rem}

.savetable .grouphead td{background:var(--moss-soft);border-top:2px solid var(--line)}

.malletcard{
  float:left;width:384px;margin:0 28px 22px 0;
  background:var(--blue-soft);border:3px outset var(--forest);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:0;text-align:center;
}
.malletcard img{width:100%;height:auto;border-radius:var(--radius) var(--radius) 0 0}
.malletcard figcaption{font-size:.86rem;font-weight:700;line-height:1.45;padding:15px}

.storyblock{text-align:center;margin:1.8em 0}
.storyblock__sm{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.05rem,2.3vw,1.25rem);color:var(--forest);margin:0 0 .5em;
}
.storyblock__body{margin:0 0 .7em}
.storyblock__big{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.3rem,3.2vw,1.85rem);line-height:1.25;
  color:var(--rosewood);margin:0 0 .5em;
}

.gallery--strips{grid-template-columns:1fr;justify-items:center;gap:10px}

.allthis{
  text-align:center;font-family:var(--display);font-weight:700;
  font-size:clamp(1.1rem,2.6vw,1.4rem);color:var(--rosewood);margin:1.6em 0 .3em;
}
.bigprice{
  text-align:center;font-family:var(--display);font-weight:700;
  font-size:clamp(2.4rem,7vw,3.6rem);line-height:1;color:var(--price);margin:0 0 1em;
}

@media (max-width:900px){
  .malletcard{float:none;width:auto;max-width:384px;margin:0 auto 22px}
}

/* --- timpani page: bulleted question list, mallet collection pair --- */
.bulletq{list-style:none;margin:0 0 1.4em;padding:0}
.bulletq li{
  display:flex;align-items:flex-start;gap:12px;
  padding:9px 0;
}
.bulletq img{flex:0 0 auto;width:12px;height:auto;margin-top:.55em}
.bulletq span{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.02rem,2.2vw,1.2rem);line-height:1.35;color:var(--forest);
}

.collection{grid-template-columns:repeat(auto-fit,minmax(200px,auto));align-items:end;justify-content:center}
.malletcard img + img{margin-top:0;border-radius:0}
.malletcard img:first-of-type{border-radius:var(--radius) var(--radius) 0 0}