/* Home page only (index.html). The page's own pair, "Book the free Found Money Call" and "Run your numbers", sits in four places:
   the hero, Ohad's note, the $550 price and the closing band. The story's stops carry no buttons (Ohad, 31 Oct: "remove all the shit
   load of pink and blue buttons throughout the page"); on phones the pair docks at the bottom instead (.hdock, below). */

/* ---------- Landing brief (Ohad, 31 Oct) ---------- */
/* "Month to month, no exit fee." under the hero buttons, and beside the $550 on the price beat's receipt */
/* "Month to month, no exit fee." sits inside the hero's button group as its own line, right under the buttons at every width, with a
   pink tick, instead of drifting to the bottom of the hero on desktop (Ohad, 31 Oct: "so strange to have it randomly sitting on the left") */
.mctas .mterm{flex:0 0 100%;display:flex;align-items:center;gap:8px;margin:4px 0 0;font:600 14px/1.4 var(--sans,'DM Sans',system-ui,sans-serif);color:#4A4550;letter-spacing:.01em}
.mctas .mterm::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:#FA1896 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 12px no-repeat}
/* and its wink, a line under it, in step with its words (Ohad, 2 Nov: "We know you would love this so we don't need to lock you in ;)") */
.mctas .mwink{flex:0 0 100%;margin:-4px 0 0;padding-left:26px;text-wrap:balance;font:500 14px/1.4 var(--sans,'DM Sans',system-ui,sans-serif);color:#5E5766}
@media (max-width:600px){.mctas .mterm{justify-content:center}.mctas .mwink{padding-left:0;text-align:center}}
.receipt .rr .term{display:block;margin-top:2px;font-size:12.5px;font-weight:600;color:#5E5766}
/* the note's button row: the pink comes first, on its own full-width row on phones */
.ncv .btn.pk{font-size:19px;font-weight:700;grid-column:1/-1}
@media (min-width:761px){.ncv{flex-wrap:wrap;gap:12px;max-width:none}}
/* the primary label is long: let it wrap rather than overflow on the narrowest phones */
.mctas .btn.pk,.ctas .btn.pk{max-width:100%}

/* Tap targets at 44px or more */
.wnext{min-height:44px}
.mrail a,.mrail a.on{height:44px}
.mphone .mtb{padding:4px 8px 16px}
.mphone .mtb button{min-height:50px}                     /* the phone picture is drawn at about 0.89 scale */
.wc.sh .tgl{width:46px;height:44px;margin:-10px -2px;border-radius:0;background:transparent!important}
.wc.sh .tgl::before{left:2px;right:2px;top:10px;bottom:10px;border-radius:999px;background:#ECEAEE;transition:background .3s}
.wc.sh .tgl.on::before{background:var(--pink,#FA1896)}
.wc.sh .tgl::after{top:13px;left:5px}

/* Phones only: the pair, docked (Ohad, 31 Oct: "Found Money Call + red phone emoji (left in pink) and next to it (run your numbers +
   calculator emoji)"). A slim bar flush to the bottom edge, no margins and no shadow halo, holding the two buttons side by side.
   It comes up once the hero's buttons have gone off the top, steps aside while any of the page's own pairs is on screen, and
   stays down from the closing band to the end (assets/fo-home-dock.js). The labels keep the buttons' DM Sans bold but scale
   with the screen so both fit on one line (13px at 320, about 16px at 390, 18px at most): two 19px labels with their emoji
   need about 440px side by side, wider than almost every phone. Nothing else on this page is fixed. */
.hdock{display:none}
@media (max-width:760px){
  .hdock{display:flex;gap:6px;position:fixed;left:0;right:0;bottom:0;z-index:250;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:#FAF6EE;border-top:1px solid rgba(110,80,40,.16);transform:translateY(105%);visibility:hidden;transition:transform .28s cubic-bezier(.22,1,.36,1),visibility 0s linear .28s}
  .hdock.on{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.22,1,.36,1)}
  html body .hdock a.btn.btn{flex:1 1 0;min-width:0;width:auto;display:flex;align-items:center;justify-content:center;gap:.3em;margin:0;min-height:52px!important;height:auto!important;padding:8px 6px!important;border-radius:999px;font-size:clamp(13px,calc(4.82vw - 3.1px),18px)!important;line-height:1.15!important;white-space:nowrap;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12);transform:none}
  .hdock .em{flex:none;font-size:1.06em;line-height:1}
  /* the site's narrow-phone rule lets long labels wrap; the dock's two are sized to fit on one line, so they keep it */
  html body .hdock a.btn.btn{white-space:nowrap!important}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.hdock,.hdock.on{transition:none}}
/* Desktop: the header stays on screen on this page (the script lets the shared nav stick; the ticker scrolls away) */
@media (min-width:901px){#fo-header{display:contents}}

/* ==== 02 · The pain, drawn (Ohad, 31 Oct: "ugliest design on the landing page") ====
   The gap is the story, so the card draws it: a 0x to 4x scale, Leo's 1.2x in ink and the 3x the same spend could earn, the stretch between
   them hatched in pink, under the $12,240 left on the table. The two leaks read like flagged statement lines: the ad bill on a 1x card shows
   its 1x, the lapsing credit a pink countdown ring. Words unchanged; the scale's labels are numbers only and hidden from screen readers. */
#b2 .pain{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#b2 .pain>.big{grid-column:1/-1;display:block;position:relative;padding:28px 30px 24px;border-radius:26px;background:linear-gradient(150deg,#F6F0E4 0%,#EFE6D4 100%)!important;box-shadow:0 0 0 1px rgba(110,80,40,.14),0 30px 60px -40px rgba(80,55,20,.5)!important}
#b2 .pain .rate{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;margin:-1px!important;padding:0!important;white-space:nowrap}
#b2 .pain .vs b{font:500 12px/1 var(--mono,'JetBrains Mono',monospace);letter-spacing:.16em;text-transform:uppercase;color:#6E6776}
#b2 .pain .vs strong{display:block;margin-top:10px;font-family:var(--serif,'DM Serif Display',Georgia,serif);font-weight:400;font-size:clamp(52px,6.4vw,76px);line-height:1;letter-spacing:-.02em;color:#E60F86}
#b2 .pain .vs span{display:block;margin-top:8px;font-size:15px;color:#4A4550}
#b2 .gapm{position:relative;margin-top:26px;padding-top:34px}
#b2 .gmk{position:absolute;top:0;transform:translateX(-50%);font:700 13px/1 var(--mono,'JetBrains Mono',monospace);padding:6px 9px;border-radius:999px;color:#fff;white-space:nowrap}
#b2 .gmk::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);border:6px solid transparent;border-bottom:0;border-top-color:inherit}
#b2 .gmk.now{left:30%;background:#5E5766;border-top-color:#5E5766}
#b2 .gmk.could{left:75%;background:#C30E6E;border-top-color:#C30E6E}
#b2 .gtr{position:relative;height:16px;border-radius:999px;background:rgba(110,80,40,.12);overflow:hidden}
#b2 .gnow,#b2 .ggap{position:absolute;top:0;bottom:0;transform-origin:left center}
#b2 .gnow{left:0;width:30%;background:#5E5766;border-radius:999px 0 0 999px}
#b2 .ggap{left:30%;width:45%;background:repeating-linear-gradient(-45deg,#FA1896 0 7px,#FF6CBC 7px 13px);border-radius:0 999px 999px 0}
#b2 .gtk{display:flex;justify-content:space-between;margin-top:9px;font:500 11px/1 var(--mono,'JetBrains Mono',monospace);letter-spacing:.06em;color:#6E6776}
/* the scale's labels sit on their own values (1 Nov: the marker now lands on 3x, so 1x, 2x and 3x are centred on 25%, 50% and 75%, not spread by
   space-between); 0 and 4x stay flush with the track's ends */
#b2 .gtk{position:relative;height:11px}#b2 .gtk span{position:absolute;top:0;transform:translateX(-50%)}
#b2 .gtk span:nth-child(1){left:0;transform:none}#b2 .gtk span:nth-child(2){left:25%}#b2 .gtk span:nth-child(3){left:50%}#b2 .gtk span:nth-child(4){left:75%}#b2 .gtk span:nth-child(5){left:auto;right:0;transform:none}
#b2 .big:not(.in) .gnow,#b2 .big:not(.in) .ggap{transform:scaleX(0)}
#b2 .gnow{transition:transform .8s cubic-bezier(.2,.7,.2,1) .15s}
#b2 .ggap{transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .85s}
#b2 .pc{display:grid;grid-template-columns:44px 1fr;column-gap:14px;row-gap:4px;align-items:start;padding:18px 18px 18px 16px;border-radius:20px;background:#F3ECDF!important;box-shadow:0 0 0 1px rgba(110,80,40,.14),0 18px 36px -30px rgba(80,55,20,.45)!important;border-left:3px solid #FA1896}
#b2 .pc .x{grid-row:1/3;display:flex!important;align-items:center;justify-content:center;width:44px;height:44px;margin:0!important;border-radius:12px;font-size:0!important;background:#FBF7EF!important;box-shadow:inset 0 0 0 1.5px rgba(250,24,150,.55)!important}
#b2 .pc.d2 .x::before{content:"1x";font:700 15px/1 var(--mono,'JetBrains Mono',monospace);color:#C30E6E}
#b2 .pc.d3 .x::before{content:"";width:24px;height:24px;border-radius:50%;background:conic-gradient(#FA1896 0 80%,rgba(250,24,150,.16) 80% 100%);-webkit-mask:radial-gradient(circle,transparent 6.5px,#000 7px);mask:radial-gradient(circle,transparent 6.5px,#000 7px)}
#b2 .pc b{grid-column:2;font-size:17px;line-height:1.25;margin:0}
#b2 .pc small{grid-column:2;font-size:14px;line-height:1.45;color:#4A4550;margin:0}
@media (max-width:600px){
  #b2 .pain{grid-template-columns:1fr;gap:12px}
  #b2 .pain>.big{padding:22px 20px 20px;border-radius:22px}
  #b2 .gapm{margin-top:22px}
  #b2 .pc{padding:16px 16px 16px 14px}
}
@media (prefers-reduced-motion:reduce){#b2 .big .gnow,#b2 .big .ggap{transform:none!important;transition:none!important}}

/* the closing band's pair: side by side from 601px, and on phones both full width, stacked, as in the hero */
@media (max-width:600px){.band .ctas .btn{flex:1 1 100%;width:100%}}
.band .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
#b2 .pc .x{width:44px!important;height:44px!important;align-self:start;line-height:1}

/* 360px phones: the story beats' single column was sizing itself to its widest child (356px in a 320px column) and the page scrolled
   sideways by 28px; the column now keeps to the screen and its children shrink with it */
@media (max-width:760px){#story .beat{grid-template-columns:minmax(0,1fr)}#story .beat>*{min-width:0}}
/* and the closing band's heading on phones under 390px: its pink brush line never wraps, so it scales with the screen instead of pushing
   the page sideways (13 to 68px at 375 to 320) */
@media (max-width:389px){#go .bandin .h2{font-size:7.6vw}#go .bandin{min-width:0}}
@media (max-width:400px){#go .ctas .btn{padding-left:18px!important;padding-right:18px!important;max-width:100%}}
@media (max-width:389px){#go .ctas .btn{white-space:normal;text-align:center}}
/* Nov 2 · Home story beats on phones: the two buttons stack full width instead of squeezing the pink one into a five-line blob */
@media (max-width:600px){.beat .ctas .btn{flex:1 1 100%;width:100%}}