/* ==========================================================
   Mr Reis · funnel additions (funnels.css)
   Loaded after site.css on the free guide pages. Only the few
   parts site.css does not have. Tokens only: no new colours,
   corners or sizes.

   SIGN UP   .fn-form phone placeholder fit
   THANK YOU .inbox (email arrives demo) · .ty-got · .ty-tips
   SOLO      .solo-hero (standalone thank-you pages)
   RESOURCES .rs-copy (copy the whole roadmap)
   ========================================================== */

/* ---------- sign up ---------- */
/* the long "Phone with country code" placeholder shrinks only when the field can't fit it (same rule as .tr-form) */
.fn-form{container-type:inline-size}
.fn-form .inp[type=tel]:not(.phone-num)::placeholder{font-size:min(1em,calc((100cqi - 84px)*.062))}

/* ---------- thank you: the email arriving (check your email pages) ---------- */
.inbox .mail-bd{gap:var(--s4)}
.inbox-list{display:flex;flex-direction:column}
.inbox-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s3);padding:var(--s3);border-radius:calc(var(--r) - 4px);background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line);transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.inbox-list>.inbox-row{margin-top:var(--s2)}
.inbox-list>.inbox-row:first-child{margin-top:0}
.inbox-av{width:36px;height:36px;flex:none;border-radius:50%;background:var(--bg4)}
.inbox .face{width:36px;height:36px}
.inbox-t{display:flex;flex-direction:column;gap:6px;min-width:0}
.inbox-t b{display:flex;align-items:center;gap:var(--s2);font-size:var(--t2);font-weight:600;line-height:1.2;color:var(--fg)}
.inbox-t>span{font-size:var(--t2);line-height:1.3;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox-ln{display:block;height:7px;border-radius:calc(var(--r) / 2);background:var(--bg4)}
.inbox-ln+.inbox-ln{opacity:.6}
.inbox-row .live{width:6px;height:6px}
/* the new email drops in at the top */
.inbox-slot{display:grid;grid-template-rows:0fr;transition:grid-template-rows .9s var(--ease)}
.inbox-slot>div{min-height:0;overflow:hidden}
.inbox-slot .inbox-row{margin-bottom:var(--s2)}
.inbox-new{opacity:0;transform:translateY(-14px) scale(.98);transition:opacity .6s var(--ease) .15s,transform .9s var(--ease) .15s,background .5s var(--ease),box-shadow .5s var(--ease)}
.inbox.go .inbox-slot{grid-template-rows:1fr}
.inbox.go .inbox-new{opacity:1;transform:none}
.inbox.open .inbox-new{background:var(--bg3);box-shadow:inset 0 0 0 1px var(--fg3)}
.tint:not([data-palette=mono]) .inbox.open .inbox-new{box-shadow:inset 0 0 0 1px var(--ac)}
.tint .inbox .tg-f{background:var(--ac);color:var(--aci)}
.tint .inbox-row .live{background:var(--ac)}

.ty-do .method{border-top:0}
.ty-do .method li:first-child{padding-top:0}

/* thank you: "got it?" card and inbox tips */
.ty-got{display:flex;align-items:center;justify-content:space-between;gap:var(--s5) var(--s7);flex-wrap:wrap}
.ty-got .head{flex:1 1 420px;gap:var(--s4)}
.ty-got .btn{flex:none}
.ty-tips{margin-top:var(--s6)}
.ty-act{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}

/* ---------- standalone thank-you pages (no site nav) ---------- */
.solo-hero{position:relative;padding:var(--s8) 0 var(--s8);text-align:center;isolation:isolate}
.solo-hero .head{max-width:860px}
.solo-hero .done-ck{width:72px;height:72px}
.solo-hero .facts{justify-content:center}
.solo-wait{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s5);padding:var(--s8) var(--s7);border-radius:var(--r)}
.solo-wait .lead{max-width:640px}

/* ---------- resources ---------- */
.rs-copy .i{width:18px;height:18px}
.road-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rs-b>.grid2{margin-top:var(--s1)}
/* number ledgers: a little more room on phones so the columns stay lined up */
.ledger{min-width:0}

/* ---------- phone ---------- */
@media (max-width:760px){
  .solo-hero{padding:var(--s6) 0 var(--s7)}
  .solo-wait{padding:var(--s7) var(--s5)}
  .ty-got .btn{width:100%;white-space:normal;text-align:center;line-height:1.25;height:auto;min-height:var(--h);padding:var(--s3) var(--s4)}
  .ty-act .btn{width:100%}
  .inbox-row{padding:var(--s3) var(--s3)}
  .road-3{grid-template-columns:1fr}
  .kv-stack li{flex-direction:column;align-items:flex-start;gap:var(--s1)}
  .kv-stack li>b{text-align:left}
  .rs-b .card.feat{padding:var(--s5) var(--s4)}
  .card.ledger{padding:var(--s5) var(--s4)}
  .code.ledger-pre{padding:var(--s3);font-size:10.5px}
  .acc-q>span:first-child{flex-wrap:wrap;row-gap:var(--s2)}
}