/* Generated by build.py from BrownBoots.dc.html — do not edit by hand. */
html { scroll-behavior: smooth; }
  body { margin: 0; background: #F0EAD4; color: #2E2621; font-family: Archivo, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
  * { box-sizing: border-box; }
  a { color: #6B594D; text-decoration: none; }
  a:hover { color: #2E2621; }
  input, select, textarea, button { font-family: inherit; }
  ::selection { background: #AEC07D; color: #2E2621; }
  @keyframes bbrise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
  @keyframes bbline { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  @media (max-width: 1040px) {
    [data-stack="3"]:not([data-mock] *), [data-stack="4"]:not([data-mock] *) { grid-template-columns: repeat(2, 1fr) !important; }
    [data-stack="5"]:not([data-mock] *) { grid-template-columns: repeat(3, 1fr) !important; }
  }
  @media (max-width: 820px) {
    [data-stack]:not([data-mock] *) { grid-template-columns: 1fr !important; }
    [data-nostick] { position: static !important; }
    [data-pad] { padding: 34px 24px !important; }
    [data-phone] { width: 100% !important; max-width: 340px; }
    main section, header > div, footer { padding-left: 22px !important; padding-right: 22px !important; }
    footer { padding-top: 60px !important; }
    [data-mock] { zoom: 0.66; }
    [data-mock="3pane"] { zoom: 0.72; }
    [data-panes] { grid-template-columns: minmax(0, 1fr) !important; }
    [data-panes] > :first-child, [data-panes] > :last-child { display: none !important; }
    [data-stack]:not([data-mock] *) > * { border-right: none !important; }
  }
  @media (max-width: 820px) {
    header > div { height: auto !important; flex-wrap: wrap; padding-top: 14px !important; padding-bottom: 14px !important; row-gap: 14px; column-gap: 20px !important; }
    header nav { order: 3; width: 100%; gap: 0 !important; justify-content: space-between; font-size: 14px !important; }
    main section { padding-top: 80px !important; }
    [data-chart] { gap: 8px !important; height: 220px !important; }
    [data-chart] + div { gap: 8px !important; }
  }
  @media (max-width: 560px) {
    main section, footer { padding-left: 18px !important; padding-right: 18px !important; }
    [data-mock] { zoom: 0.56; }
    [data-mock="3pane"] { zoom: 0.62; }
    [data-pad] { padding: 28px 20px !important; }
  }
  #exchange, #ultimate, #affiliate, #join-exchange, #rewarded-network, #sales-agency,
  #money-bags, #get, #proof, #inquire, #chart { scroll-margin-top: 88px; }

/* page routing */
[data-if] { display: none !important; }
[data-if].is-on { display: contents !important; }

/* hover / focus states lifted out of style-hover and style-focus attributes */
.h0:hover { color: #6B594D !important; }
.h1:hover { background: #2E2621 !important; color: #F0EAD4 !important; transform: translateY(-2px) !important; }
.h2:hover { transform: translateY(-2px) !important; border-color: #6B594D !important; color: #5A4C43 !important; }
.h3:hover { background: #2E2621 !important; transform: translateY(-2px) !important; }
.h4:hover { border-color: #6B594D !important; background: rgba(107,89,77,0.06) !important; }
.h5:hover { transform: translateY(-6px) !important; box-shadow: 0 30px 60px -30px rgba(46,38,33,0.28) !important; }
.h6:hover { background: #FFFFFF !important; color: #6B594D !important; transform: translateY(-2px) !important; }
.h7:hover { background: #3F3630 !important; color: #F0EAD4 !important; transform: translateY(-2px) !important; }
.h8:hover { transform: translateY(-3px) !important; background: #FFFFFF !important; border-color: rgba(107,89,77,0.2) !important; }
.h9:hover { background: #AEC07D !important; transform: translateY(-2px) !important; color: #2E2621 !important; }
.h10:hover { background: #12A56C !important; color: #FFFFFF !important; transform: translateY(-2px) !important; }
.h11:hover { color: #0E3B2E !important; border-color: #0E3B2E !important; }
.h12:hover { border-color: #0E3B2E !important; background: rgba(14,59,46,0.05) !important; color: #0E3B2E !important; }
.f13:focus { border-color: #12A56C !important; }
.h14:hover { border-color: #12A56C !important; background: #FFFFFF !important; }
.h15:hover { background: #FFFFFF !important; transform: translateY(-2px) !important; }
.h16:hover { background: #9FB26B !important; color: #2E2621 !important; transform: translateY(-2px) !important; }
.h17:hover { transform: translateY(-4px) !important; box-shadow: 0 24px 44px -28px rgba(46,38,33,0.26) !important; color: #2E2621 !important; }
.f18:focus { border-color: #AEC07D !important; }
.h19:hover { border-color: #AEC07D !important; background: #FFFFFF !important; }
.h20:hover { background: #9FB26B !important; transform: translateY(-2px) !important; }
.h21:hover { color: #2E2621 !important; }
.h22:hover { border-color: #AEC07D !important; transform: translateY(-3px) !important; color: #2E2621 !important; }
.h23:hover { transform: translateY(-2px) !important; background: #F0EAD4 !important; color: #2E2621 !important; }
.h24:hover { transform: translateY(-2px) !important; background: #6B594D !important; color: #F0EAD4 !important; }
.h25:hover { background: #6B594D !important; color: #F0EAD4 !important; transform: translateY(-2px) !important; }
.h26:hover { color: #2E2621 !important; border-color: #2E2621 !important; }
.h27:hover { transform: translateY(-3px) !important; border-color: rgba(107,89,77,0.22) !important; box-shadow: 0 18px 34px -22px rgba(46,38,33,0.25) !important; }
.f28:focus { border-color: #6B594D !important; }
.h29:hover { background: #6B594D !important; transform: translateY(-2px) !important; }
.h30:hover { background: rgba(255,255,255,0.5) !important; }
.h31:hover { transform: translateY(-2px) !important; border-color: #6B594D !important; color: #6B594D !important; }
.h32:hover { filter: brightness(0.92) !important; }
.h33:hover { background: #F0EAD4 !important; color: #2E2621 !important; transform: translateY(-2px) !important; }
.h34:hover { border-color: #6B594D !important; background: #FFFFFF !important; }
.h35:hover { transform: translateY(-4px) !important; border-color: rgba(107,89,77,0.3) !important; }
.h36:hover { transform: translateY(-2px) !important; }
.h37:hover { color: #F0EAD4 !important; }
.h38:hover { transform: translateY(-3px) !important; border-color: rgba(107,89,77,0.32) !important; }
.h39:hover { color: #AEC07D !important; }
.h40:hover { color: #AEC07D !important; border-color: #AEC07D !important; }
.h41:hover { transform: translateY(-2px) !important; color: #AEC07D !important; }

/* ---------------------------------------------------------------------------
   MOBILE
   The canvas is a desktop composition: every size and column count is inline,
   with no breakpoints. Rather than editing 200-odd style attributes, the mobile
   design is expressed here by matching those inline values.
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {

  /* --- vertical rhythm: desktop uses 120-150px section padding, far too much
         on a phone and the main reason pages ran to 12,000px --- */
  [style*="padding: 130px 40px"] { padding: 62px 20px 0 !important; }
  [style*="padding: 120px 40px"] { padding: 58px 20px 0 !important; }
  [style*="padding: 150px 40px 130px"] { padding: 68px 20px 56px !important; }
  [style*="padding: 140px 40px 130px"] { padding: 64px 20px 56px !important; }
  [style*="padding: 140px 40px 0"] { padding: 64px 20px 0 !important; }
  [style*="padding: 60px 40px"] { padding: 38px 20px !important; }
  [style*="padding: 20px 40px"] { padding: 16px 20px !important; }
  [style*="padding: 42px 40px"] { padding: 30px 20px 0 !important; }
  footer { padding: 52px 20px 28px !important; }

  /* large inter-block gaps */
  [style*="gap: 60px"], [style*="gap: 56px"], [style*="gap: 48px"] { gap: 28px !important; }
  [style*="margin-top: 56px"] { margin-top: 30px !important; }
  [style*="margin: 0 0 44px"] { margin-bottom: 24px !important; }

  /* --- type scale. Display type is set in clamp() so it never got small
         enough; body copy at 15.5-16.5px is already right and stays put. --- */
  h1 { font-size: 40px !important; line-height: 1.06 !important; letter-spacing: -0.02em !important; }
  h2 { font-size: 28px !important; line-height: 1.14 !important; letter-spacing: -0.015em !important; }
  h3 { font-size: 20px !important; }

  /* eyebrows and captions: nothing below 12.5px on a phone */
  [style*="font-size: 9px"], [style*="font-size: 9.5px"], [style*="font-size: 10px"],
  [style*="font-size: 10.5px"], [style*="font-size: 11px"], [style*="font-size: 11.5px"] {
    font-size: 12.5px !important; letter-spacing: 0.1em !important;
  }
  [style*="font-size: 12px"], [style*="font-size: 12.5px"] { font-size: 13px !important; }

  /* mid-scale display numbers and sub-heads that are not h1/h2/h3 */
  [style*="font-size: 20px"], [style*="font-size: 21px"], [style*="font-size: 22px"] { font-size: 17.5px !important; }
  [style*="font-size: 23px"], [style*="font-size: 24px"], [style*="font-size: 25px"],
  [style*="font-size: 26px"], [style*="font-size: 27px"], [style*="font-size: 28px"] { font-size: 19px !important; }
  [style*="font-size: 30px"], [style*="font-size: 32px"], [style*="font-size: 34px"],
  [style*="font-size: 38px"], [style*="font-size: 40px"], [style*="font-size: 60px"] { font-size: 26px !important; }

  /* --- layout: collapse the inline grids, then restore the few that carry
         meaning in their columns --- */
  /* collapse page grids, but leave product mockups (Exchange/Ultimate/etc) intact */
  [style*="grid-template-columns"]:not([data-mock]):not([data-mock] *) { grid-template-columns: 1fr !important; }

  /* ecosystem diagram: Advertisers <-> layer <-> Publishers only reads as a
     relationship while it stays side by side, so it scales instead of stacking */
  [style*="minmax(104px"] {
    grid-template-columns: minmax(54px, 1fr) 12px minmax(142px, 1.5fr) 12px minmax(54px, 1fr) !important;
  }
  /* its internal labels are exempt from the caption bump above: at 12.5px
     "The monetization layer" overflows the centre panel */
  [style*="minmax(104px"] [style*="font-size: 10px"],
  [style*="minmax(104px"] [style*="font-size: 11px"] {
    font-size: 9.5px !important; letter-spacing: 0.07em !important;
  }
  [style*="minmax(104px"] [style*="font-size: 12px"] { font-size: 11px !important; }
  [style*="minmax(104px"] img { max-width: 100% !important; height: auto !important; }
  /* the outer Advertisers / Publishers labels sit in ~65px columns */
  [style*="minmax(104px"] p { font-size: 11px !important; line-height: 1.25 !important; }
  [style*="minmax(104px"] div { white-space: normal !important; }
  /* Kalshi chart keeps all six months, and so does its label row below */
  [style*="repeat(6, 1fr)"] { grid-template-columns: repeat(6, 1fr) !important; gap: 7px !important; }
  #chart { height: 220px !important; }
  /* footer reads better as pairs than as one long list */
  footer [style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; gap: 26px !important; }

  /* card interiors */
  [style*="padding: 40px"] { padding: 24px !important; }
  [style*="padding: 44px"], [style*="padding: 48px"] { padding: 26px !important; }
  /* Kalshi quote card: 70px sides leave a ~226px well on iPhone 17 */
  [style*="padding: 76px 70px"] { padding: 36px 22px !important; }

  /* --- touch ergonomics: 44px minimum --- */
  a[style*="border-radius: 100px"], button {
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.2 !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  input, select, textarea { font-size: 16px !important; }   /* stops iOS zoom-on-focus */

  /* --- header: 102px with a wrapped nav replaced by a 56px bar + panel --- */
  header > div {
    height: 56px !important;
    padding: 0 20px !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }
  header nav {
    position: fixed !important;
    top: 56px; left: 0; right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 4px 20px 18px !important;
    background: #F0EAD4;
    border-bottom: 1px solid rgba(107,89,77,0.14);
    box-shadow: 0 18px 40px -24px rgba(46,38,33,0.5);
    display: none !important;
  }
  body.m-nav-open header nav { display: flex !important; }
  header nav a {
    min-height: 52px;
    display: flex !important;
    align-items: center;
    font-size: 17px !important;
    border-bottom: 1px solid rgba(107,89,77,0.10);
  }
  header nav a:last-child { border-bottom: none; }
  .m-nav-toggle {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    margin-left: -10px;
    padding: 0 10px;
    background: none; border: none; cursor: pointer;
  }
  .m-nav-toggle span {
    display: block; height: 1.5px; width: 22px; background: #2E2621;
    transform-origin: center;
    transition: transform .2s ease, opacity .15s;
  }
  body.m-nav-open .m-nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.m-nav-open .m-nav-toggle span:nth-child(2) { opacity: 0; }
  body.m-nav-open .m-nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  header img { height: 26px !important; }
  /* the header CTA shrinks so the bar holds logo + button + toggle */
  header > div > a:last-child { padding: 10px 18px !important; font-size: 14px !important; min-height: 40px !important; }
  /* iPhone 17 (402px) standard: hero CTAs sit as a centered pair, not left-hugging */
  [data-ctas] {
    justify-content: center !important;
    width: 100% !important;
  }
  main img { max-width: 100%; }
  main h1, main h2, main h3, main p { overflow-wrap: anywhere; }
}

/* the toggle only exists on mobile */
.m-nav-toggle { display: none; }

/* "Hover a bar" / "Tap a bar" — keyed to the input device, not the width */
.m-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .m-pointer { display: none; }
  .m-touch { display: inline; }
}

@media (max-width: 400px) {
  h1 { font-size: 35px !important; }
  h2 { font-size: 25px !important; }
  [style*="padding: 130px 40px"] { padding: 54px 16px 0 !important; }
  [style*="padding: 120px 40px"] { padding: 52px 16px 0 !important; }
  #chart { gap: 5px !important; }
}