/* /for-doms (dommes.html): the sections the other marketing stylesheets don't cover. The hero, Play,
   By and for workers and It's free reuse dommes.css, game-cards.css and domme-features.css as they are.
   The app screens are separate documents in iframes (for-doms-feed.html, for-doms-profile.html), so the
   app's CSS never meets this page's. */

/* ---------- Phone ----------
   The bezel is the only chrome; the screen is the app's own surface. for-doms.js lays the screen out at
   the app's phone width and scales it to fit. */
.fd-phone{--screen-radius:37px;position:relative;width:var(--phone-w,372px);height:var(--phone-h,800px);max-width:100%;padding:9px;border-radius:46px;overflow:hidden;background:#16101d;box-shadow:0 40px 80px -42px #2a103f99,0 0 0 1px #ffffff14;flex:none}
.fd-phone>iframe{display:block;width:100%;height:100%;border:0;border-radius:var(--screen-radius);background:#fff;transform-origin:0 0}
/* The screens are pictures of the app: no clicks, and the wheel scrolls the page. */
.fd-phone>iframe,.fd-page-frame>iframe{pointer-events:none}
.fd-feed-preview{display:flex;justify-content:center;min-width:0}

/* ---------- Post ---------- */
.fd-post-section{padding-block:110px 116px;background:var(--paper)}
.fd-post-section .feature-copy h2>span{color:var(--accent)}
/* Who can see a post, in the composer's own rows. */
.fd-audience{display:grid;max-width:390px;margin-top:34px;padding:8px;border-radius:12px;background:#fffdfd;box-shadow:0 22px 45px -36px #4d2e5770,0 0 0 1px #3222330d;transform:rotate(-1.5deg)}
.fd-audience>div{display:flex;align-items:center;gap:13px;min-height:58px;padding:8px 12px;border-radius:8px}
.fd-audience>div[aria-current]{background:#f0e9f8}
.fd-audience .icon{width:20px;height:20px;color:#7c618e}
.fd-audience span{display:grid;gap:1px}
.fd-audience strong{font-size:13px;font-weight:600}
.fd-audience small{font-size:11px;color:var(--muted)}
.fd-audience .fd-tick{margin-left:auto;color:var(--accent)}

/* ---------- Play ----------
   The games section without the pinned chess scroll: the board shows its final position. */
.play-section.fd-play{padding-bottom:96px}

/* ---------- Get paid ----------
   Receipts and tribute requests over the leaderboard. */
.fd-paid-section{padding-block:116px 130px;background:#ece5f4}
.fd-paid-section .feature-copy h2>span{color:var(--accent)}
.fd-paid-list{display:grid;gap:0;margin:34px 0 0;max-width:430px}
.fd-paid-list>div{padding:18px 0;border-top:1px solid #32223318}
.fd-paid-list dt{display:flex;align-items:center;gap:10px;font:500 17px/1.3 Sora,system-ui,sans-serif;letter-spacing:-.03em}
.fd-paid-list dt .icon{width:19px;height:19px;color:var(--accent)}
.fd-paid-list dd{margin:6px 0 0 29px;font-size:15px;line-height:1.7;color:var(--muted)}
.fd-paid-preview{padding:150px 30px 128px 40px}
.fd-receipt-slip{position:absolute;left:0;bottom:6px;z-index:2;width:290px;padding:19px 21px 17px;border-radius:8px;background:#fffdfd;box-shadow:0 22px 40px -24px #3222335c,0 0 0 1px #3222330c;transform:rotate(-3deg)}
.fd-receipt-slip .payment-label{display:flex;align-items:center;gap:6px;font-size:10px;color:#7c6191}
.fd-receipt-slip .payment-label .icon{width:14px;height:14px}
.fd-receipt-amount{display:flex;align-items:baseline;gap:7px;margin:14px 0 11px;font-size:11px;color:var(--muted)}
.fd-receipt-amount strong{font:500 34px/1 Sora,system-ui,sans-serif;letter-spacing:-.06em;color:var(--ink)}
.fd-receipt-amount small{margin-left:auto;font-size:10px}
.fd-receipt-bar{height:5px;border-radius:3px;background:#ece4f4;overflow:hidden}
.fd-receipt-bar>i{display:block;width:75%;height:100%;border-radius:3px;background:var(--accent)}
.fd-receipt-people{display:flex;align-items:center;gap:0;margin-top:14px;font-size:10px;color:var(--muted)}
.fd-receipt-people .avatar{width:22px;height:22px;font-size:9px;background:#ebe3f4;color:#7a5d8a;box-shadow:0 0 0 2px #fffdfd;object-fit:cover}
.fd-receipt-people .avatar+.avatar{margin-left:-6px}
.fd-receipt-people>span:last-child{margin-left:9px}
.fd-request-slip{position:absolute;right:-18px;top:0;z-index:2;width:224px}

/* ---------- Dote.gg/you ----------
   Her link page and her public feed page side by side. */
.fd-pages .fd-pages-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:100px;align-items:end;margin-bottom:62px}
.fd-pages .fd-pages-copy h2{grid-row:1/span 2;white-space:nowrap;font-size:66px;letter-spacing:-.065em}
.fd-pages .fd-pages-copy>p{grid-column:2;max-width:445px;margin-top:0;font-size:18px;line-height:1.8}
.fd-pages .fd-pages-copy>p+p{margin-top:14px}
.fd-pages-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.fd-pages .personal-page-preview{grid-column:auto;grid-row:auto;width:auto;max-width:none;justify-self:stretch}
.fd-page-feed .personal-page-window{transform:rotate(2deg)}
/* Both windows are miniatures: the feed page lays out at a phone-like width and is scaled to fit. */
.fd-pages .personal-page-body{min-height:480px}
.fd-page-frame{--zoom:.72;height:480px;overflow:hidden;background:#fff}
.fd-page-frame>iframe{display:block;width:calc(100% / var(--zoom));height:calc(100% / var(--zoom));border:0;transform:scale(var(--zoom));transform-origin:0 0}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .fd-pages .fd-pages-copy{column-gap:65px}.fd-pages .fd-pages-copy h2{font-size:54px}.fd-pages-pair{gap:36px}
  .fd-phone{--phone-w:344px;--phone-h:740px}
  .fd-paid-preview{padding:140px 10px 120px 20px}.fd-receipt-slip{width:260px}.fd-request-slip{width:200px}
}
@media(max-width:800px){
  .fd-post-section{padding-block:77px 82px}
  .fd-pages .fd-pages-copy{grid-template-columns:1fr;margin-bottom:40px}
  .fd-pages .fd-pages-copy h2{grid-row:auto;font-size:59px;margin-bottom:22px}
  .fd-pages .fd-pages-copy>p{grid-column:1;font-size:17px}
  .fd-pages-pair{grid-template-columns:1fr;gap:40px;max-width:540px;margin-inline:auto}
  .fd-paid-section{padding-block:77px 90px}
}
@media(max-width:560px){
  .fd-post-section .feature-pair{gap:44px}
  .fd-post-section .feature-copy h2 br{display:none}
  .fd-phone{--phone-w:330px;--phone-h:700px;--screen-radius:34px;border-radius:42px}
  .fd-pages .fd-pages-copy h2{font-size:51px}
  .fd-pages .fd-pages-copy>p{font-size:16px}
  .fd-pages .personal-page-body{min-height:350px}
  .fd-page-frame{--zoom:.8;height:520px}
  .fd-audience{margin-top:28px}
  .fd-paid-list dd{font-size:14px}
  .fd-paid-preview{padding:150px 0 140px;max-width:390px;width:100%;justify-self:center}
  .fd-receipt-slip{width:250px;left:4px;bottom:0}
  .fd-request-slip{width:190px;right:-4px}
}