/* fo-polish.css: Oct 29 polish after Ohad's review, loaded last. Generated by audit/polish.py. Phone first. */

/* ---- three bubbles: pink Get your desk, green Text Your First Officer, light blue Run your numbers ---- */
.btn.wa{background:#25D366;color:#fff;box-shadow:0 10px 24px -10px rgba(37,211,102,.7),inset 0 -2px 0 rgba(0,0,0,.12)}
.btn.wa:hover,.btn.wa:focus-visible{background:#1EBE5A;color:#fff;transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(30,190,90,.6)}
.btn.lb{background:#429AD4;color:#fff;box-shadow:0 10px 24px -10px rgba(66,154,212,.75),inset 0 -2px 0 rgba(0,0,0,.12)}
.btn.lb:hover,.btn.lb:focus-visible{background:#1E78B8;color:#fff;transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(30,120,184,.6)}
.btn.gd{background:#F5B700;color:#141216;box-shadow:0 10px 24px -10px rgba(214,160,0,.75),inset 0 -2px 0 rgba(0,0,0,.1)}
.btn.gd:hover,.btn.gd:focus-visible{background:#E8AC00;color:#141216;transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(214,160,0,.6)}
.trio{display:flex;flex-wrap:wrap;gap:10px}
.trio.trio>.btn{flex:1 1 100%;height:52px;padding:0 18px;font-size:15px;font-weight:700;letter-spacing:0}
@media (min-width:761px){
 .trio{container-type:inline-size}
 .trio.trio>.btn{flex:0 0 auto;padding:0 22px}
 /* too narrow for one row: pink and green share the first row, light blue takes the second, edges aligned */
 @container (max-width:620px){.trio.trio>.btn{flex:1 1 0;padding:0 14px}.trio.trio>.btn.lb{flex:1 1 100%}}
}

/* ---- the Note from Ohad: a notepad, one hand, one size, a blank line between paragraphs ---- */
.sec.mnote{padding:34px 0 0}
.ncard{--lh:32px;position:relative;max-width:720px;margin:0 auto;padding:50px 0 24px;background-color:#FFFEFB;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .33 0 0 0 0 .3 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");border-radius:2px;box-shadow:0 1px 1px rgba(20,18,22,.06),0 3px 6px -2px rgba(20,18,22,.08),0 30px 54px -30px rgba(20,18,22,.42);transform:rotate(-.25deg)}
.ncard::before{content:"";position:absolute;left:0;right:0;top:18px;height:1px;background:repeating-linear-gradient(90deg,rgba(20,18,22,.2) 0 5px,transparent 5px 10px)}
.ncard::after{content:"";position:absolute;top:0;bottom:0;left:30px;width:2px;background:rgba(250,24,150,.42)}
.nlab{position:absolute;top:-13px;left:50%;z-index:2;transform:translateX(-50%) rotate(-2deg);background:#FA1896;color:#fff;font:600 11px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px 7px;border-radius:4px;white-space:nowrap;box-shadow:0 6px 14px -8px rgba(160,10,90,.55)}
.nbody{--lo:-9px;position:relative;padding:0 16px 0 44px;font-family:Kalam,'Bradley Hand',cursive;font-weight:300;font-size:18.5px;line-height:var(--lh);color:#1F2D4E;background-image:repeating-linear-gradient(180deg,transparent 0,transparent calc(var(--lh) - 1px),#D3DAE7 calc(var(--lh) - 1px),#D3DAE7 var(--lh));background-position:0 var(--lo)}
.nbody p{margin:0 0 var(--lh);font:inherit;color:inherit;letter-spacing:0}
.nbody p:last-child{margin-bottom:0}
.nbody span{display:inline-block;transform:translateY(var(--y)) rotate(var(--r))}
.nbody .nlead{font-weight:400}
.nbody a{color:#E0117F;font-weight:400;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.nhl{color:inherit;background:none;padding:0;margin:0}  /* pre-merge pass: no pastel highlight, the words stay */
.ncv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;max-width:440px;margin:26px auto 0}
.ncv .btn{width:100%;min-width:0;height:52px;padding:0 10px;font-size:15px;font-weight:700}
@media (min-width:761px){
 .sec.mnote{padding:46px 0 10px}
 .ncard{--lh:36px;padding:60px 0 30px;transform:rotate(-.3deg)}
 .ncard::before{top:22px}.ncard::after{left:58px}
 .nbody{--lo:-8px;padding:0 54px 0 84px;font-size:21px}
}

/* ---- the story: nothing sticks, so the seven beats sit in one row above it and the beats use the full width ---- */
.arc-grid{grid-template-columns:minmax(0,1fr)!important;gap:0!important}
.arc-grid>.rail{display:none!important}
.mrail{display:flex!important;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 30px!important;padding:0!important;background:none!important;box-shadow:none!important;overflow:visible!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.mrail a,.mrail a.on{flex:none;height:32px;padding:0 12px;border-radius:999px;background:#fff!important;color:#141216!important;box-shadow:inset 0 0 0 1px rgba(20,18,22,.12);text-decoration:none;font-weight:700;font-size:12.5px;display:inline-flex;align-items:center;gap:6px}
.mrail a b,.mrail a.on b{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:500;color:#FA1896!important}
.mrail a:hover{box-shadow:inset 0 0 0 1.5px #FA1896}
@media (min-width:761px){.mrail{gap:8px;margin:0 0 44px!important}.mrail a,.mrail a.on{height:36px;padding:0 15px;font-size:13.5px}.mrail a b{font-size:10px}}

/* ---- Up next: a proportional card on every page, the words left and the button right, no strip of empty white ---- */
.pnx .wrap{max-width:1040px;margin-left:auto;margin-right:auto}
.pnx .nxt{gap:8px;padding:24px 20px 22px}
.pnx .nxh{font-size:28px;line-height:1.08;text-wrap:balance}
.pnx .nxp{font-size:15.5px;line-height:1.5;max-width:none}
.pnx .nxb{justify-self:stretch;justify-content:center;height:52px;margin-top:8px}
@media (min-width:900px){
 .pnx .nxt{grid-template-columns:minmax(0,1fr) auto;column-gap:48px;row-gap:8px;align-items:center;padding:30px 40px 32px}
 .pnx .nxt>.nxk,.pnx .nxt>.nxh,.pnx .nxt>.nxp{grid-column:1}
 .pnx .nxt>.nxb{grid-column:2;grid-row:1/span 3;justify-self:end;align-self:center;height:54px;padding:0 28px;margin:0;white-space:nowrap}
 .pnx .nxh{font-size:38px}
}

/* ---- hero: the two cards beside each other on phones end level ---- */
@media (max-width:760px){.mh .mwin{align-items:stretch}.mh .mwin>.wp,.mh .mwin>.ww{height:100%}}

/* ---- reaudit (Oct 30): fixes from the re-audit, generated by audit/reaudit.py ---- */
/* nothing floats: Freebies' phone filter bar was position:fixed */
#ffd .mpick,#ffd .mpick.on{display:none!important}
/* tap targets of 44px; the hit area grows, the chip does not */
.trades a,.trl a,.mrail a,#ffd button.copylink{position:relative}
.trades a::after,.trl a::after,.mrail a::after,#ffd button.copylink::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:44px;transform:translateY(-50%)}
.ttabs button,.mtb button{min-height:44px}
/* the header's place is held before the chrome draws it: no jump when it arrives */
#fo-header{display:block;min-height:92px}
@media (min-width:901px){#fo-header{min-height:100px}}
/* phones: on home the button row sits under the headline, before the phone */
@media (max-width:600px){.mh .mwrap{display:flex;flex-direction:column;align-items:stretch}.mh .mwrap>*,.mh .mrest>*{min-width:0}.mh .mrest{display:contents}.mh .mtop{order:-2}.mh #mctas{order:-1;margin-top:18px}.mh .mrest>.mlab{margin-top:18px}}
/* less air above the footer */
.sec.tight.pnx{padding-bottom:32px}
/* Book: the sections closer together */
.pg-book main>.sec.pgs{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(40px,6vw,72px)}
/* Disclaimer: one centred column, the house row under it */
.pg-disc .lgh .wrap>.reveal,.pg-disc .lgb .legal,.pg-disc .lgc{max-width:760px;margin-left:auto;margin-right:auto}
.pg-disc .lgc{margin-top:28px}
/* Product: the way into the example app */
.tourmore{display:flex;justify-content:center;margin:28px 0 0}
/* Calculator: what the ~$25K tick means */
.calc .bgx{margin:8px 0 0;font-size:12px;line-height:1.45;color:#6b6470}
/* Pricing: Up next on the page's own width */
.pst-page .pnx .wrap{max-width:1200px}
/* Trust: the example ledger's actions are labels */
#sees .act.ex{color:var(--mute);cursor:default}
/* Freebies: the result count jumps to the results */
#ffd .desk #deskcount:not(:empty){cursor:pointer}
#ffd .desk #deskcount:not(:empty)::after{content:" ↓"}
/* ---- /reaudit ---- */
/* ---- prodfix (Oct 30 production audit) ---- */
/* the headline font from this site (same v17 latin file as Google Fonts), preloaded in <head>: no late re-wrap of the hero headline */
@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/DMSerifDisplay-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* text shades: the same hues, a touch deeper, so small text reads at 4.5:1 on white and cream */
html:root{--pinkd:#D90D7E;--earn:#117F4B;--learn:#1C73B0}
.tmx li b{color:#117F4B}.pgl .brush,.pgl .kick,.pgl .fnm a{color:#1C73B0}.mrail a b,.mrail a.on b{color:#D90D7E!important}
/* rails that scroll take focus (set by the chrome while they scroll); the ring shows where */
.srail:focus-visible,.tsh:focus-visible,.cels:focus-visible,.tl90:focus-visible{outline:3px solid #FA1896;outline-offset:4px;border-radius:14px}
/* the product tour after a pick: the tab stays marked, no countdown bar */
.ttabs.held button.on::after{animation:none;width:100%}
/* the calculator's small print sits in a dd that lays out exactly as the small did */
dd.fo-sub{display:contents}
/* paused: the slow zoom on the hero photos stops too */
.fo-still .mbg i,.fo-still .rbg i{animation:none}
/* where an 11px label met its neighbour: the strategy board's header and the calculator's fit gate keep each part whole */
.sb-h{flex-wrap:wrap}.sb-h b,.sb-h small{white-space:nowrap}
@media (max-width:480px){.sb-h small{flex-basis:100%;margin-left:16px}}
.csh{gap:10px}.csh b{white-space:nowrap;flex:none}
/* the logo is never on a tile (second audit P1-5): the trade pages' Freebies link and The App's door keep the chevron, not its tile */
.freego .tile,.nugc .tile{background:transparent!important;box-shadow:none!important;border:0!important}
.tdc .tic:has(img),.tdc.on .tic:has(img){background:transparent!important;box-shadow:none!important}
/* the 11px floor (Oct 30 audit): labels the scan found under 11px, outside the phone mockups and the archived dispatch issues, at the widths where they were under */
@media (max-width:760px){
div.chw > div.chl > span.mpill,
div.mwin > div.wp > small,
div.mwin > div.ww > small.wlab,
div.mwrap > div.mtop > span.mpill,
div.phb > div.mlogos > span,
div.phw > div.pht > span.mpill,
div.wbars > div > span,
div.wtrip > div > em,
ul.wl > li > b{font-size:11px!important}}
a.freego > span.tx > small,
a.ucard > div > small,
article.dk > div.dk-meta > span.chip.ex,
article.dk.lastvis > div.dk-meta > span.chip.ex,
article.dk.lead > div.dk-meta > span.chip.ex,
div > div.bn > i,
div > small > span.dst,
div.ba > div.baf > span.wk,
div.bkg > label > span,
div.bkg > label.wide > span,
div.bsw > i.bgt > span,
div.cards > div.prc > small,
div.cet > div.ceh > span,
div.cgate > div.csh > b,
div.cgate > div.csh > span,
div.chead > div.cfee > small,
div.chead > div.cfind > small,
div.cin > div.clab.c2 > span,
div.clab > span > label,
div.cpick > div.cmix > span,
div.cpick > div.cuse > span,
div.cq.fit > div.bsx > span,
div.cq.fit > div.cqh > span.wk,
div.cstk > div.clab > span.rr,
div.csum > div > small,
div.fi > div.rh > span.pg,
div.fi > div.rt > em.etag,
div.fi > div.rt.serif > em.etag,
div.ledger > div.lh > b,
div.ledger > div.lh > span,
div.ledger2 > div.lhead > b,
div.ledger2 > div.lhead > span,
div.ledger2 > div.lrow2 > span.status,
div.ledger2 > div.lrow2 > span.status.a,
div.ledger2 > div.lrow2 > span.status.g,
div.lrow2 > div.card > small,
div.mf > a.mf-c > small,
div.mwin > div.wp > span.wk,
div.mwin > div.ww > span.wk,
div.mwrap > div.mdesk > p.dfine,
div.nugs > div.nugc > span.n,
div.panel.ink > div.ph > span.tag.d,
div.phb > div.tdoors > span,
div.pvs > a.pv.pv1 > b,
div.pvs > a.pv.pv1 > i,
div.pvs > a.pv.pv2 > b,
div.pvs > a.pv.pv2 > i,
div.pvs > a.pv.pv3 > b,
div.pvs > a.pv.pv3 > i,
div.sb-grid > div.sb-t > small,
div.sboard > div.sb-grid > div.sb-t,
div.sboard > div.sb-h > small,
div.sboard > div.sb-read > small,
div.spend > div.tot > span.est,
div.st > p.stc > b.k-burn,
div.st > p.stc > b.k-earn,
div.st > p.stc > b.k-return,
div.stg > div.sboard > p.sb-fine,
div.tdg > div.tdc > span.tst,
div.vault > a.feat > div.ft-k,
div.ways > div > small,
div.wc.mv > div.top > h5,
div.wc.mv > div.top > span.tag.d,
div.wc.sc > div.top > h5,
div.wc.sc > div.top > span.tag.p,
div.wc.sh > div.top > h5,
div.wc.sh > div.top > span.tag,
div.wtrip > div > small,
dl.bk > div > dt,
dl.bk > div.ret > dt,
dl.casl > div > dt,
dl.ckpi > div > dt,
dl.ckpi > div.net > dt,
dl.ckpi > div.ret > dt,
figure > figcaption > em,
nav.mrail > a > b,
ol > li > span.chip.ex,
ul.cw > li > span{font-size:11px!important}
/* tap targets (Oct 30 audit): transparent hit areas of 44px on the small controls the scan found; nothing on screen moves */
.tgl::before{content:"";position:absolute;left:-2px;right:-2px;top:-10px;bottom:-10px}
.wnext{position:relative}
.wnext::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}
.ps-trh a,.ps-more,.ps-chips a{position:relative}
.ps-trh a::after,.ps-more::after{content:"";position:absolute;left:0;right:0;top:-11px;bottom:-11px}
.ps-chips a::after{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px}
#ffd .desk .dk .grab::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}
#ffd .desk .readfirst summary{min-height:44px}
/* links that stand on their own line: a taller hit area on the same line */
.fnm a,.tnote a{padding:13px 0}
.fcd li b>a{padding:8px 0}
/* /prodfix ---- */