/* ==========================================================================
   Honest Hearts Photo + Film — Ad Landing Page
   Design tokens and component styles.

   Fidelity note: every colour, size, letter-spacing and spacing value below is
   transcribed from the locked design handoff. Do not "tidy" these numbers.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts

   Butler and High Spirited are LICENSED fonts from the Honest Hearts brand kit
   and are not redistributable, so the files are not bundled here. Drop them in
   at the paths below and they take over automatically — no other change needed:

       assets/fonts/Butler-Light.woff
       assets/fonts/HighSpirited.ttf

   Until then the stack falls through to the Google Fonts stand-ins loaded in
   index.html (Cormorant Garamond 300 for Butler, Sacramento for High Spirited).
   Newsreader and Libre Franklin are the real brand fonts — both are open
   licence and served from Google Fonts.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Butler';
  src: url('../assets/fonts/Butler-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'High Spirited';
  src: url('../assets/fonts/HighSpirited.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Colour */
  --paper: #FBFAF7;          /* cream page background */
  --stone: #F2F0EA;          /* warm stone section background */
  --ink: #2B2A28;            /* body text */
  --taupe: #745E50;          /* accent: eyebrows, links, highlights */
  --taupe-deep: #64503F;     /* taupe hover */
  --slate: #505358;          /* dark sections */
  --slate-deep: #43464A;     /* slate hover / trust strip */
  --film-placeholder: #DDDBD2;

  --rule: rgba(43, 42, 40, .28);        /* dividers on light */
  --rule-soft: rgba(43, 42, 40, .12);
  --rule-light: rgba(251, 250, 247, .22); /* dividers on dark */
  --frame-outer: rgba(251, 250, 247, .55);
  --frame-inner: rgba(251, 250, 247, .28);

  /* Type */
  --display: 'Butler', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --script: 'High Spirited', 'Sacramento', cursive;
  --serif-italic: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Motion */
  --ease: .3s ease;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* height:auto is mandatory alongside the width/height attributes on <img>. The
   attributes are presentational hints, so without this a CSS `width` resizes
   the box but leaves height pinned at the attribute value, stretching the
   image. (.frame > img overrides this with height:100% for object-fit:cover.) */
img { max-width: 100%; display: block; height: auto; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; }

/* Visible keyboard focus. The design has no focus treatment of its own, so this
   is additive — it never shows for mouse users. */
:focus-visible {
  outline: 2px solid var(--taupe);
  outline-offset: 3px;
}

.dark :focus-visible,
.hero :focus-visible,
.reviews :focus-visible {
  outline-color: var(--paper);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   4. Shared type + component patterns
   -------------------------------------------------------------------------- */

/* Small tracked-out uppercase label above every section heading */
.eyebrow {
  display: block;
  font-size: .72rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--taupe);
  line-height: 1.6;
}

.eyebrow--light { color: var(--stone); }

/* Section headings */
.display {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.22;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
}

.display--sm { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.display--faq { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }

/* Handwritten accent line — one per section */
.script {
  display: block;
  font-family: var(--script);
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  line-height: 1.3;
  color: var(--taupe);
  transform: rotate(-2deg);
}

.script--light { color: var(--stone); }
.script--sm { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }

.lede {
  font-family: var(--serif-italic);
  font-style: italic;
  font-weight: 200;
  text-wrap: pretty;
}

/* Centred section header block */
.section-head { text-align: center; }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head .script { margin-top: 6px; }

/* Buttons — square corners, wide tracking, no radius anywhere in this design */
.btn {
  display: inline-block;
  font-size: .74rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  padding: 15px 34px;
  border: 1px solid transparent;
  transition: all var(--ease);
  cursor: pointer;
  text-align: center;
}

.btn--cream {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}
.btn--cream:hover,
.btn--cream:focus-visible {
  background: var(--stone);
  border-color: var(--stone);
  color: var(--ink);
}

.btn--slate {
  background: var(--slate);
  border-color: var(--slate);
  color: var(--paper);
}
.btn--slate:hover,
.btn--slate:focus-visible {
  background: var(--slate-deep);
  border-color: var(--slate-deep);
  color: var(--paper);
}

/* Hero primary CTA carries slightly roomier padding than the rest */
.btn--hero { padding: 16px 38px; }

/* Underlined secondary text link on dark imagery */
.link-quiet {
  font-size: .74rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: .85;
  border-bottom: 1px solid rgba(251, 250, 247, .5);
  padding-bottom: 5px;
  transition: opacity var(--ease);
}
.link-quiet:hover,
.link-quiet:focus-visible { opacity: 1; color: var(--paper); }

/* Double inset border photo frame — the signature brand motif */
.frame {
  position: relative;
  overflow: hidden;
}
.frame::before,
.frame::after {
  content: '';
  position: absolute;
  z-index: 2;
  pointer-events: none;
  border: 1px solid var(--frame-outer);
}
.frame::before { inset: 10px; }
.frame::after  { inset: 14px; border-color: var(--frame-inner); }

.frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame--portrait { aspect-ratio: 4 / 5; }

/* --------------------------------------------------------------------------
   5. Promo bar
   -------------------------------------------------------------------------- */

.promo {
  display: block;
  text-align: center;
  background: var(--taupe);
  color: var(--paper);
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  padding: 12px 16px;
  line-height: 1.6;
  transition: background var(--ease);
}
.promo:hover,
.promo:focus-visible { background: var(--taupe-deep); color: var(--paper); }
.promo strong { font-weight: 600; letter-spacing: .26em; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 88px 24px;
  text-align: center;
  overflow: hidden;
}

/* Small-viewport unit avoids the hero jumping as mobile browser chrome hides */
@supports (min-height: 88svh) {
  .hero { min-height: 88svh; }
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(67, 70, 74, .62), rgba(67, 70, 74, .78));
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  color: var(--paper);
}

.hero__logo { width: clamp(170px, 20vw, 230px); opacity: .92; }

.hero__eyebrow {
  font-size: .72rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  opacity: .85;
}

.hero__title {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.22;
  /* Reduced from the handoff's clamp(2.1rem,5.4vw,4.1rem). The headline now
     carries a real value proposition instead of a category label, so it is
     longer; a smaller size keeps it to two lines and keeps the CTA above the
     fold on a phone. */
  font-size: clamp(1.7rem, 4.2vw, 3.1rem);

  /* The <br> in the markup declares the intended two-line break. Let the title
     — and only the title — size to its longest line rather than inheriting the
     780px content column, so a fallback face with wider metrics than Butler
     can't push "Photography + Film" onto an unintended third line. With Butler
     installed the text is narrower than the column and this never engages. */
  width: max-content;
  max-width: calc(100vw - 48px);
}

.hero__script {
  font-family: var(--script);
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  transform: rotate(-2deg);
  display: block;
  line-height: 1.3;
}

.hero__sub {
  font-family: var(--serif-italic);
  font-style: italic;
  font-weight: 200;
  font-size: 1.3rem;
  letter-spacing: .02em;
  max-width: 560px;
  text-wrap: pretty;
  opacity: .95;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

.hero__micro {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .72;
  margin-top: 4px;
}

/* Meta traffic is overwhelmingly mobile, and most of it arrives inside the
   Instagram or Facebook in app browser, which eats roughly 100px of height on
   top of the phone viewport. Tightening the hero stack here is what keeps the
   primary CTA on the first screen. Measure before loosening any of this. */
@media (max-width: 560px) {
  .hero { padding: 44px 24px; }
  .hero__inner { gap: 15px; }
  .hero__sub { font-size: 1.12rem; }
}

/* --------------------------------------------------------------------------
   7. Trust strip
   -------------------------------------------------------------------------- */

.trust {
  background: var(--slate-deep);
  color: rgba(251, 250, 247, .9);
  padding: 20px 24px;
}

.trust__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 46px;
  justify-content: center;
  font-size: .66rem;
  letter-spacing: .24em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   8. Work gallery
   -------------------------------------------------------------------------- */

.work {
  background: var(--stone);
  padding: 96px 0 88px;
}

.work .section-head {
  margin-bottom: 56px;
  padding: 0 24px;
}

.work__flower {
  width: 76px;
  opacity: .8;
  margin: 0 auto 20px;
}

.work__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.work-card { display: block; }
.work-card .frame { margin-bottom: 16px; }

.work-card__title {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: .9rem;
  margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   9. Film
   -------------------------------------------------------------------------- */

.film {
  background: var(--paper);
  padding: 96px 24px;
}

.film__inner { max-width: 1080px; margin: 0 auto; }
.film .section-head { margin-bottom: 52px; }

.film__feature { margin-bottom: 30px; }

.film__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

/* Click-to-play facade: no YouTube iframe (and no third-party request) until
   the visitor actually clicks. Deliberate page-weight choice — keep it. */
.video {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--film-placeholder);
}

.video__facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background-color: var(--film-placeholder);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video__play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(251, 250, 247, .92);
  color: var(--slate);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  padding-left: 5px;
  transition: transform var(--ease);
}

.video--feature .video__play {
  width: 84px;
  height: 84px;
  font-size: 1.5rem;
  padding-left: 6px;
}

.video__facade:hover .video__play,
.video__facade:focus-visible .video__play { transform: scale(1.08); }

.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video__caption {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: .78rem;
  margin-top: 14px;
}

.video__caption--feature { font-size: .86rem; margin-top: 16px; }

.film__quote {
  max-width: 620px;
  margin: 38px auto 0;
  text-align: center;
  font-size: 1.2rem;
  opacity: .88;
}

.film__cta {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

/* --------------------------------------------------------------------------
   10. About
   -------------------------------------------------------------------------- */

.about {
  background: var(--slate);
  color: var(--paper);
  padding: 100px 24px;
}

.about__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 64px;
  align-items: center;
}

.about__media { position: relative; }

.about__bouquet {
  position: absolute;
  right: -30px;
  bottom: -26px;
  width: 150px;
  opacity: .16;
}

.about__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.about__copy p {
  font-size: .92rem;
  line-height: 1.85;
  max-width: 520px;
  text-wrap: pretty;
  opacity: .94;
}

.about__copy .btn { margin-top: 6px; }

/* --------------------------------------------------------------------------
   11. How it works
   -------------------------------------------------------------------------- */

.process {
  background: var(--paper);
  padding: 96px 24px;
}

.process__inner { max-width: 1080px; margin: 0 auto; }
.process .section-head { margin-bottom: 64px; }

.process__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 44px;
}

.step { text-align: center; padding: 0 6px; }

.step__num {
  font-family: var(--display);
  font-size: 2.1rem;
  color: var(--taupe);
  display: block;
  margin-bottom: 14px;
  letter-spacing: .1em;
}

.step__title {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .92rem;
  margin-bottom: 12px;
}

.step p { font-size: .87rem; opacity: .85; }

/* --------------------------------------------------------------------------
   12. Pricing
   -------------------------------------------------------------------------- */

.pricing {
  background: var(--stone);
  padding: 96px 24px;
}

.pricing__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pricing .script { margin-bottom: 52px; }

.pricing__table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  width: 100%;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.tier {
  padding: 34px 22px;
  border-left: 1px solid var(--rule);
}

.tier:first-child { border-left: 0; }

.tier--featured {
  background: rgba(116, 94, 80, .07);
  border-left: 0;
}

.tier__name {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .82rem;
  margin-bottom: 14px;
  opacity: .7;
}

.tier--featured .tier__name { color: var(--taupe); opacity: 1; }

.tier__price {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: .06em;
  font-size: 1.7rem;
  display: flex;
  align-items: baseline;
  /* The pricing column centres its content with text-align, which a flex
     container ignores for its own items. Without this the price sits left
     while the tier name and tag above and below it stay centred. */
  justify-content: center;
  gap: 8px;
}

/* These are entry prices, not fixed ones. Small enough that the number still
   scans first, present enough that nobody can feel misled later. */
.tier__from {
  font-family: var(--sans);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .65;
}

.tier__tag {
  display: block;
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-top: 12px;
}

/* The bundle saving. Carries more weight than the fine print below it because
   it is the single strongest reason to book both rather than one. */
.pricing__saving {
  font-size: 1.25rem;
  color: var(--taupe);
  margin-top: 22px;
}

.pricing__fine {
  font-size: 1.05rem;
  opacity: .7;
  margin-top: 16px;
}

.pricing__urgency {
  font-size: 1.2rem;
  color: var(--taupe);
  margin-top: 26px;
}

/* Single column: the vertical dividers become horizontal ones */
@media (max-width: 560px) {
  .tier { border-left: 0; border-top: 1px solid var(--rule); }
  .tier:first-child { border-top: 0; }
}

/* --------------------------------------------------------------------------
   13. Reviews
   -------------------------------------------------------------------------- */

.reviews {
  background: var(--taupe);
  color: var(--paper);
  padding: 96px 24px;
}

.reviews__inner { max-width: 1080px; margin: 0 auto; }
.reviews .section-head { margin-bottom: 56px; }

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

.review {
  background: rgba(251, 250, 247, .07);
  border: 1px solid var(--rule-light);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.review__stars {
  letter-spacing: .3em;
  font-size: .8rem;
  color: var(--stone);
}

.review blockquote {
  font-size: .9rem;
  line-height: 1.85;
  opacity: .95;
  flex: 1;
}

.review__by {
  display: flex;
  align-items: center;
  gap: 14px;
}

.review__avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  flex: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.review cite {
  font-family: var(--display);
  font-style: normal;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .82rem;
}

.review cite small {
  display: block;
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .2em;
  opacity: .75;
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */

.faq {
  background: var(--paper);
  padding: 96px 24px 84px;
}

.faq__inner { max-width: 700px; margin: 0 auto; }
.faq .section-head { margin-bottom: 48px; }

.faq__item { border-bottom: 1px solid var(--rule); }

.faq__q {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .9rem;
  padding: 24px 6px;
}

.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ''; }

.faq__sign { font-size: 1.2rem; opacity: .6; }

.faq__a {
  padding: 0 6px 26px;
  font-size: .9rem;
  opacity: .88;
}

/* --------------------------------------------------------------------------
   15. Inquiry
   -------------------------------------------------------------------------- */

.inquire {
  background: var(--slate);
  color: var(--paper);
  padding: 96px 24px 110px;
}

.inquire__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 56px;
  align-items: start;
}

.inquire__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}

.inquire__copy p {
  font-size: .92rem;
  line-height: 1.85;
  max-width: 440px;
  text-wrap: pretty;
  opacity: .94;
}

.inquire__points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .8;
  list-style: none;
}

.inquire__card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 28px 22px;
  color: var(--ink);
}

.inquire__card h3 {
  font-family: var(--display);
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin-bottom: 18px;
  text-align: center;
}

/* HoneyBook injects its own iframe in here and sizes it via postMessage.
   The min-height reserves space so the section does not jump as it loads. */
#hbForm { min-height: 540px; }
#hbForm iframe { display: block; width: 100%; border: 0; }

.inquire__fallbackBox[hidden] { display: none; }

.inquire__lead {
  font-size: .92rem;
  line-height: 1.7;
  text-align: center;
  margin-bottom: 20px;
  opacity: .85;
}

.inquire__open {
  display: block;
  width: 100%;
  padding: 17px 20px;
}

/* Shown only if the HoneyBook widget fails to load or JS is off */
.inquire__fallback {
  font-size: .88rem;
  line-height: 1.8;
  text-align: center;
  padding: 24px 6px;
}

.inquire__fallback a { color: var(--taupe); text-decoration: underline; }

/* --------------------------------------------------------------------------
   16. Sticky re-engagement bar
   -------------------------------------------------------------------------- */

.sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
  transition: transform .35s ease, opacity .35s ease;
}

.sticky.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.sticky__inner {
  background: rgba(251, 250, 247, .96);
  border-top: 1px solid var(--rule-soft);
  box-shadow: 0 -6px 24px rgba(43, 42, 40, .08);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}

.sticky__text {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .85;
}

.sticky__text strong { font-weight: 600; }

.sticky .btn { padding: 12px 28px; }

/* --------------------------------------------------------------------------
   17. Section feature flags (see js/config.js)
   -------------------------------------------------------------------------- */

.flag-no-pricing .pricing,
.flag-no-faq .faq,
.flag-no-sticky .sticky { display: none; }