/* Component: buttons (Figma 468:2958): .btn.ghost = Button/Secondary (white), .btn.dark = Button/Primary with the green arrow square */
.btn{display:inline-flex;align-items:center;height:max(calc(48px * var(--f)), calc(64 * var(--u)));font-size:var(--fs-body);line-height:1.4;transition:background .3s,color .3s,border-color .3s}
.btn.ghost{padding:0 max(20px, calc(32 * var(--u)));border-radius:max(calc(10px * var(--f)), calc(12 * var(--u)));background:var(--white);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.dark{gap:max(calc(16px * var(--f)), calc(22 * var(--u)));padding:max(calc(6px * var(--f)), calc(8 * var(--u))) max(calc(6px * var(--f)), calc(8 * var(--u))) max(calc(6px * var(--f)), calc(8 * var(--u))) max(20px, calc(32 * var(--u)));border-radius:max(calc(12px * var(--f)), calc(16 * var(--u)));background:var(--night);color:var(--paper);transition:background .3s,color .3s,gap .4s var(--ease-out)}
.btn.dark i{display:grid;place-items:center;align-self:stretch;aspect-ratio:1;border-radius:max(calc(9px * var(--f)), calc(12 * var(--u)));background:var(--green);color:var(--ink);font-style:normal;transition:transform .4s var(--ease-out)}
.btn.dark:hover{gap:max(calc(28px * var(--f)), calc(34 * var(--u)))}   /* the square moves right and the button grows with it */
@media (max-width:820px){
  .btn{height:56px}
  .btn.ghost{padding:0 32px;border-radius:12px}
  .btn.dark{gap:16px;padding:6px 6px 6px 24px;border-radius:16px}
  .btn.dark i{border-radius:12px}
}