/* BonFX Offers: inline text ads of experiments C, D and E (Offers MANIFEST, C96).
   Ported from bonfx-offers 0.5.0 assets/bonfx-offers.css: the inline-ad rules only
   (the format A card, its logos and grain are not ported, open decision 5). */

.bfx-unit { margin:30px auto; text-align:center; }
@media (max-width:480px) { .bfx-unit { margin:24px auto; } }

/* ---- Experiment C: inline text ad (2026-10-02, design: experiment-c-mockups v2, version C) ----
   Tint + orange rules, brand title, "Ad" at the far right, hook, proof line, button.
   The unit is the size container, so the phone layout follows the column width, not the viewport. */
.bfx-unit-inl { container-type:inline-size; margin:30px auto; }
.bfx-inl { position:relative; text-align:center; background:#fdf3ea; border-top:0;
           border-bottom:2px solid #e37a36; padding:26px 28px 26px; }
/* Timer line (2026-10-04): the top rule is the track, the bright fill grows as the ad scrolls through the screen.
   0% = the line enters at the bottom, 50% = ad centered, 100% = the line reaches the top of the screen. Set by bonfx-offers.js. */
.bfx-inl-bar { position:absolute; top:0; left:0; right:0; height:4px; background:#f4cfa9; overflow:hidden; }
.bfx-inl-bar i { display:block; height:100%; background:#ff6b0f; transform:scaleX(0); transform-origin:0 50%; will-change:transform; }
.bfx-inl-ad { position:absolute; top:10px; right:14px; font:600 10px/1 Helvetica, Arial, sans-serif;
              letter-spacing:.12em; text-transform:uppercase; color:#8a8a8a; }
.bfx-inl-brand { font:700 12px/1 Helvetica, Arial, sans-serif; letter-spacing:.2em; text-transform:uppercase;
                 color:#c9621f; margin:0 0 12px; }
.bfx-inl .bfx-inl-hook { font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; font-weight:700;
                 margin:0 auto 18px; text-wrap:balance; color:#1a1a1a; }
.bfx-inl .bfx-inl-s1 { font-size:clamp(23px,4.8cqi,33px); line-height:1.15; max-width:20em; }   /* up to 9 words */
.bfx-inl .bfx-inl-s2 { font-size:clamp(19px,3.7cqi,26px); line-height:1.2; max-width:28em; }    /* 10 to 18 words */
.bfx-inl .bfx-inl-s3 { font-size:clamp(17px,3.1cqi,21px); line-height:1.3; max-width:34em; }    /* 19 words and up */
.bfx-inl .bfx-inl-sub { font:14px/1.4 Helvetica, Arial, sans-serif; color:#6b5a4a; margin:0 0 18px; }
.bfx-inl-btn { display:inline-block; min-width:190px; background:#e37a36; color:#fff; font:600 15px/1 Helvetica, Arial, sans-serif;
               padding:14px 28px; border-radius:4px; white-space:nowrap; text-decoration:none; cursor:pointer; }
.bfx-inl-btn::after { content:" \2192"; }
.bfx-inl-btn:hover { background:#c9621f; }
@container (max-width:480px) {
  .bfx-inl { padding-left:18px; padding-right:18px; }
  .bfx-inl-btn { display:block; width:100%; min-width:0; padding:16px; box-sizing:border-box; }
}

/* The theme colors every link; keep the button text white in every link state (fix 2026-10-04: live theme made it dark orange). */
.bfx-unit-inl .bfx-inl a.bfx-inl-btn, .bfx-unit-inl .bfx-inl a.bfx-inl-btn:link, .bfx-unit-inl .bfx-inl a.bfx-inl-btn:visited,
.bfx-unit-inl .bfx-inl a.bfx-inl-btn:hover, .bfx-unit-inl .bfx-inl a.bfx-inl-btn:active, .bfx-unit-inl .bfx-inl a.bfx-inl-btn:focus { color:#fff !important; text-decoration:none !important; }
/* BonFX Consulting ads (experiment D, 2026-10-06): line 2 is the hook question, so it gets real size */
.bfx-inl[data-bfx-offer^="dc"] .bfx-inl-sub { font:700 clamp(16px,3.1cqi,20px)/1.3 Helvetica, Arial, sans-serif; color:#3a2a1c; max-width:30em; margin:2px auto 20px; text-wrap:balance; }
.bfx-inl[data-bfx-offer^="dc"] .bfx-inl-hook { text-wrap:balance; }